@extends('donamarmita-admin')
@section('title', $pageTitle . ' - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1>
                <i class="{{ $pageIcon }} text-primary"></i> 
                {{ $pageTitle }}
            </h1>
            <p class="text-muted">
                {{ $pageDescription }} <strong>{{ $companyName }}</strong>
            </p>
        </div>
        <div class="title_right">
            <div class="btn-group pull-right" role="group">
                <button type="button" class="btn btn-info" id="createPDF">
                    <i class="fa-solid fa-file-pdf mr-2"></i>
                    Criar PDF
                </button>
                <input type="hidden" id="typeDoc" value="{{ $docType }}" />
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <!-- Breadcrumbs -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('admin.dashboard') }}">
                            <i class="fas fa-home mr-1"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <i class="{{ $pageIcon }} mr-1"></i> {{ $pageTitle }}
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Stats Card (simples) -->
    <div class="row tile_count">
        <div class="col-md-12">
            <div class="alert alert-info mb-4" role="alert">
                <div class="d-flex align-items-center">
                    <i class="fas fa-info-circle fa-2x mr-3 text-info"></i>
                    <div>
                        <strong>Informação:</strong> Este conteúdo pode ser gerado em PDF para download.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Panel -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        <i class="fas fa-edit mr-2"></i>
                        Editar Conteúdo
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>

                <div class="x_content">
                    <!-- Error Alerts -->
                    @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-triangle mr-2"></i>
                        <strong>Por favor, corrija os seguintes erros:</strong>
                        <ul class="mt-2 mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif

                    <!-- Success Message -->
                    @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fas fa-check-circle mr-2"></i>
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif

                    <!-- Form -->
                    <form method="POST" action="{{ $formAction }}" class="form-horizontal form-label-left" id="{{ $formId }}">
                        @csrf

                        <!-- Tabs -->
                        <div class="panel with-nav-tabs panel-default">
                            <div class="panel-heading">
                                <!-- Tabs -->
                                <ul class="nav nav-tabs" role="tablist" style="border-bottom: 2px solid #26B99A; margin-bottom: 20px;">
                                    @foreach($languageTabs as $tab)
                                    <li role="presentation" class="{{ $loop->first ? 'active' : '' }}" id="tab_{{ $tab['lang'] ?? $tab['id'] }}_li">
                                        <a href="#tab_{{ $tab['lang'] ?? $tab['id'] }}" class="tab-link" data-toggle="tab" role="tab" data-lang="{{ $tab['lang'] ?? $tab['id'] }}">
                                            <i class="flag-icon flag-icon-{{ $tab['flag'] ?? ($tab['lang'] ?? $tab['id']) }} mr-2"></i> {{ $tab['label'] }}
                                        </a>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>

                            <div class="panel-body">
                                <!-- Tab Content -->
                                <div class="tab-content">
                                    @foreach($languageTabs as $tab)
                                    @php $lang = $tab['lang'] ?? $tab['id']; @endphp
                                    <div class="custom-tab-pane {{ $loop->first ? 'in active' : '' }}" id="tab_{{ $lang }}" role="tabpanel">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary">
                                                <i class="fas fa-edit mr-1"></i> {{ $tab['title'] }}
                                            </label>
                                            <textarea id="editor_{{ $lang }}" 
                                                      name="{{ $tab['field'] }}" 
                                                      class="form-control legal-editor"
                                                      rows="20"
                                                      placeholder="{{ $tab['placeholder'] }}">{{ old($tab['field'], ${$tab['field']} ?? '') }}</textarea>
                                            <small class="form-text text-muted">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                <span id="counter_{{ $lang }}">0</span> caracteres
                                            </small>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <div class="ln_solid"></div>

                        <!-- Form Actions -->
                        <div class="form-group row">
                            <div class="col-md-12 text-right">
                                <button type="submit" class="btn btn-success" id="saveButton">
                                    <i class="fa-solid fa-floppy-disk mr-2"></i>
                                    Guardar Alterações
                                </button>
                                <button type="button" class="btn btn-info" id="previewPDF">
                                    <i class="fa-solid fa-eye mr-2"></i>
                                    Pré-visualizar PDF
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Progresso para PDF -->
<div class="modal fade" id="pdfProgressModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">
                    <i class="fas fa-file-pdf fa-spin mr-2"></i>
                    A gerar PDF...
                </h5>
            </div>
            <div class="modal-body text-center py-4">
                <!-- Progress Bar -->
                <div class="progress" style="height: 25px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" 
                         role="progressbar" 
                         style="width: 0%;" 
                         id="pdfProgressBar">
                        0%
                    </div>
                </div>
                
                <!-- Status Message -->
                <p class="mt-3 text-muted" id="pdfProgressMessage">
                    A preparar o documento PDF...
                </p>
                
                <!-- Success/Error Icons -->
                <div id="pdfSuccessIcon" style="display: none;">
                    <i class="fas fa-check-circle text-success fa-4x"></i>
                    <p class="mt-2 text-success">PDF gerado com sucesso!</p>
                </div>
                
                <div id="pdfErrorIcon" style="display: none;">
                    <i class="fas fa-exclamation-circle text-danger fa-4x"></i>
                    <p class="mt-2 text-danger" id="pdfErrorMessage"></p>
                </div>
            </div>
            <div class="modal-footer" id="pdfModalFooter" style="display: none;">
                <button type="button" class="btn btn-success" id="downloadPDF">
                    <i class="fas fa-download mr-1"></i> Download PDF
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times mr-1"></i> Fechar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="dm-loader" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;">
    <img src="{{ asset('images/loader/dm-loader.svg') }}" width="60">
</div>

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/flag-icon-css/css/flag-icons.min.css" rel="stylesheet">
<style>
/* Tabs Styling */
.nav-tabs {
    border-bottom: 2px solid #26B99A;
    margin-bottom: 20px;
}

.nav-tabs > li {
    float: left;
    margin-bottom: -2px;
}

.nav-tabs > li > a {
    background-color: #f8f8f8;
    color: #555;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    margin-right: 5px;
    border-radius: 4px 4px 0 0;
    font-weight: 500;
    padding: 12px 25px;
    transition: all 0.3s ease;
    font-size: 14px;
    text-decoration: none;
    display: block;
}

/* Hover effect */
.nav-tabs > li > a:hover {
    background-color: #e8e8e8;
    border-color: #ccc #ccc transparent #ccc;
    color: #333;
    transform: translateY(-1px);
}

/* Active tab - Verde com texto branco (mais visível) */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: linear-gradient(135deg, #26B99A 0%, #1e8a73 100%);
    color: white !important;
    border: 1px solid #26B99A;
    border-bottom-color: transparent;
    font-weight: 600;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.1);
    position: relative;
}

/* Indicador adicional - linha branca */
.nav-tabs > li.active > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: white;
}

/* Ícones na tab ativa ficam brancos */
.nav-tabs > li.active > a i,
.nav-tabs > li.active > a .flag-icon {
    color: white !important;
}

/* Ícones nas tabs inativas */
.nav-tabs > li > a i,
.nav-tabs > li > a .flag-icon {
    color: #26B99A;
    transition: color 0.3s ease;
}

.nav-tabs > li > a:hover i,
.nav-tabs > li > a:hover .flag-icon {
    color: #1e8a73;
}

/* Flag Icons */
.flag-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Summernote Custom */
.note-editor.note-frame {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
}

.note-editor.note-frame .note-toolbar {
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 8px 8px 0 0;
    padding: 10px;
}

/* Character Counter */
small .badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 20px;
}

/* Panel Body */
.panel-body {
    padding: 20px;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-tabs > li {
        width: 100%;
        margin-bottom: 5px;
        float: none;
    }
    
    .nav-tabs > li > a {
        display: block;
        text-align: center;
    }
    
    .panel-body {
        padding: 15px;
    }
}

/* Legal Editor Specific */
.legal-editor {
    width: 100%;
    min-height: 400px;
}

.custom-tab-pane {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: -99999px;
    width: 100%;
    visibility: hidden;
}

.custom-tab-pane.active {
    position: relative !important;
    left: 0 !important;
    visibility: visible !important;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/lang/summernote-pt-PT.min.js"></script>
<script>
$(document).ready(function() {

    var langs = @json(array_map(function($tab) {
        return $tab['lang'] ?? $tab['id'];
    }, $languageTabs));

    // Inicializar Summernote para cada idioma
    langs.forEach(function(lang) {
        $('#editor_' + lang).summernote({
            height: 400,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ],
            callbacks: {
                onChange: function() { updateCounter(lang); },
                onPaste: function() { setTimeout(function(){ updateCounter(lang); }, 100); }
            }
        });
    });

    // Aplicar locale PT ao editor português
    if ($('#editor_pt').length) {
        $('#editor_pt').summernote('locale', 'pt-PT');
    }

    // Atualizar contador inicial
    langs.forEach(function(lang) {
        setTimeout(function() { updateCounter(lang); }, 500);
    });

    /* ============================================================
     | TAB CHANGE
     ============================================================ */
    $('.tab-link').on('click', function(e) {
        e.preventDefault();

        var lang = $(this).data('lang');

        // Atualizar tabs
        $('.nav-tabs li').removeClass('active');
        $(this).closest('li').addClass('active');

        // Trocar painel visível
        $('.custom-tab-pane').removeClass('active');
        $('#tab_' + lang).addClass('in active');

        updateCounter(lang);
    });

    /* ============================================================
     | CHARACTER COUNTER
     ============================================================ */
    function updateCounter(lang) {
        var $editor = $('#editor_' + lang);
        if (!$editor.length || !$editor.data('summernote')) return;

        var html = $editor.summernote('code') || '';
        var plain = html.replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').replace(/\s+/g, ' ').trim();
        var count = plain.length;

        $('#counter_' + lang).text(count);

        var $badge = $('#counter_' + lang).closest('small').find('.badge');
        if (!$badge.length) {
            $('#counter_' + lang).closest('small').append('<span class="badge badge-success ml-2">0/6000</span>');
            $badge = $('#counter_' + lang).closest('small').find('.badge');
        }

        $badge.text(count + '/6000')
              .removeClass('badge-success badge-warning badge-danger')
              .addClass(count > 6000 ? 'badge-danger' : count > 5000 ? 'badge-warning' : 'badge-success');
    }

    /* ============================================================
     | FORM SUBMIT
     ============================================================ */
    $('#{{ $formId }}').on('submit', function() {
        $('#dm-loader').fadeIn(200);
    });

    /* ============================================================
     | PDF GENERATION
     ============================================================ */
    $('#createPDF, #previewPDF').on('click', function() {
        $('#pdfProgressModal').modal('show');
        $('#pdfProgressBar').css('width', '0%').text('0%');
        $('#pdfProgressMessage').text('A preparar o documento PDF...');
        $('#pdfSuccessIcon, #pdfErrorIcon, #pdfModalFooter').hide();

        var progress = 0;
        var interval = setInterval(function() {
            progress += 10;
            $('#pdfProgressBar').css('width', progress + '%').text(progress + '%');

            if (progress >= 100) {
                clearInterval(interval);
                
                const typeDoc = $('#typeDoc').val();
                
                $.ajax({
                    url: '{{ route("admin.settings.createpdf", ["typeDoc" => "__TYPE__"]) }}'.replace('__TYPE__', typeDoc),
                    method: 'POST',
                    data: { 
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        $('#pdfProgressBar').css('width', '100%').text('100%');
                        $('#pdfProgressMessage').text('PDF gerado com sucesso!');
                        $('#pdfSuccessIcon').show();
                        $('#pdfModalFooter').show();
                        $('#downloadPDF').data('url', response.pdf_url);
                    },
                    error: function(xhr) {
                        $('#pdfProgressMessage').text('Erro ao gerar PDF');
                        $('#pdfErrorIcon').show();
                        $('#pdfErrorMessage').text(xhr.responseJSON?.message || 'Erro desconhecido');
                        $('#pdfModalFooter').show();
                    }
                });
            }
        }, 200);
    });

    $('#downloadPDF').on('click', function() {
        var url = $(this).data('url');
        if (url) window.open(url, '_blank');
        $('#pdfProgressModal').modal('hide');
    });

    setTimeout(function() {
        $('.alert-dismissible').fadeOut(500);
    }, 5000);
});
</script>
@endpush

@endsection