@extends('donamarmita-admin')
@section('title', 'Sobre Nós - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1>
                <i class="fas fa-info-circle text-primary"></i> 
                Sobre Nós
            </h1>
            <p class="text-muted">
                Escreva um pequeno texto sobre a <strong>{{ $companyName ?? 'empresa' }}</strong> <br>(máx. 250 caracteres)
            </p>
        </div>
        <div class="title_right">
            <div class="btn-group pull-right" role="group">
                <button type="button" class="btn btn-info" id="generatePDFAbout">
                    <i class="fas fa-file-pdf mr-2"></i>
                    Gerar PDF
                </button>
            </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="fas fa-info-circle mr-1"></i> Sobre Nós
                    </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-white"></i>
                    <div>
                        <strong>Informação:</strong> O texto "Sobre Nós" aparece na página principal e pode ser gerado em PDF para download.
                        <span class="badge badge-warning ml-2">Máximo 250 caracteres</span>
                    </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 Texto "Sobre Nós"
                    </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="{{ route('admin.about.aboutus.update') }}" class="form-horizontal form-label-left" id="aboutForm">
                        @csrf
                        @method('PUT')

                        <!-- 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;">
                                    <li role="presentation" class="active" id="tab_pt_li">
                                        <a href="#" class="tab-link" data-lang="pt">
                                            <i class="flag-icon flag-icon-pt mr-2"></i> Português - PT
                                        </a>
                                    </li>
                                    <li role="presentation" id="tab_en_li">
                                        <a href="#" class="tab-link" data-lang="en">
                                            <i class="flag-icon flag-icon-gb mr-2"></i> Inglês - EN
                                        </a>
                                    </li>
                                    <li role="presentation" id="tab_es_li">
                                        <a href="#" class="tab-link" data-lang="es">
                                            <i class="flag-icon flag-icon-es mr-2"></i> Espanhol - ES
                                        </a>
                                    </li>
                                    <li role="presentation" id="tab_fr_li">
                                        <a href="#" class="tab-link" data-lang="fr">
                                            <i class="flag-icon flag-icon-fr mr-2"></i> Francês - FR
                                        </a>
                                    </li>
                                </ul>
                            </div>

                            <div class="panel-body">
                                <!-- Tab Content - TODOS visíveis no DOM, escondidos por CSS próprio -->
                                <div class="custom-tab-content" style="position:relative;">

                                    <div class="custom-tab-pane active" id="tab_pt">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary">
                                                <i class="fas fa-edit mr-1"></i> Texto (Português)
                                            </label>
                                            <textarea id="editor_pt" name="about_pt" rows="15"
                                                placeholder="Escreva um pequeno texto sobre a empresa...">{{ old('about_pt', $about_pt ?? '') }}</textarea>
                                            <small class="form-text text-muted">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                <span id="counter_pt">0</span>/250 caracteres
                                            </small>
                                        </div>
                                    </div>

                                    <div class="custom-tab-pane" id="tab_en">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary">
                                                <i class="fas fa-edit mr-1"></i> Text (English)
                                            </label>
                                            <textarea id="editor_en" name="about_en" rows="15"
                                                placeholder="Write a short text about the company...">{{ old('about_en', $about_en ?? '') }}</textarea>
                                            <small class="form-text text-muted">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                <span id="counter_en">0</span>/250 characters
                                            </small>
                                        </div>
                                    </div>

                                    <div class="custom-tab-pane" id="tab_es">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary">
                                                <i class="fas fa-edit mr-1"></i> Texto (Español)
                                            </label>
                                            <textarea id="editor_es" name="about_es" rows="15"
                                                placeholder="Escriba un breve texto sobre la empresa...">{{ old('about_es', $about_es ?? '') }}</textarea>
                                            <small class="form-text text-muted">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                <span id="counter_es">0</span>/250 caracteres
                                            </small>
                                        </div>
                                    </div>

                                    <div class="custom-tab-pane" id="tab_fr">
                                        <div class="form-group">
                                            <label class="font-weight-bold text-primary">
                                                <i class="fas fa-edit mr-1"></i> Texte (Français)
                                            </label>
                                            <textarea id="editor_fr" name="about_fr" rows="15"
                                                placeholder="Rédiger un court texte sur l'entreprise...">{{ old('about_fr', $about_fr ?? '') }}</textarea>
                                            <small class="form-text text-muted">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                <span id="counter_fr">0</span>/250 caractères
                                            </small>
                                        </div>
                                    </div>

                                </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="fas fa-save mr-2"></i>
                                    Guardar Alterações
                                </button>
                                <button type="button" class="btn btn-info" id="previewPDF">
                                    <i class="fas 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;  /* Força texto branco */
    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 {
    color: white !important;
}

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

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

/* Para garantir que o texto fica branco mesmo com Bootstrap */
.nav-tabs > li.active > a .flag-icon {
    color: white !important;
    opacity: 1;
}

.nav-tabs > li.active > a i {
    color: white;
}

/* 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;
    }
    
    .nav-tabs > li > a {
        display: block;
        text-align: center;
    }
    
    .panel-body {
        padding: 15px;
    }
}

/* Todos os painéis existem no DOM e são visíveis para o Summernote */
.custom-tab-pane {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: -99999px;  /* Fora do ecrã mas no DOM */
    width: 100%;
    visibility: hidden;
}

/* Só o ativo aparece */
.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 = ['pt', 'en', 'es', 'fr'];

    // Inicializar TODOS imediatamente — todos estão no DOM e acessíveis
    langs.forEach(function(lang) {
        $('#editor_' + lang).summernote({
            height: 300,
            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); }
            }
        });
    });

    // Atualizar contador inicial do PT
    updateCounter('pt');

    /* ============================================================
     | 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('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/250</span>');
            $badge = $('#counter_' + lang).closest('small').find('.badge');
        }

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

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

    /* ============================================================
     | PDF
     ============================================================ */
    $('#generatePDFAbout, #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);
                $.ajax({
                    url: '{{ route("admin.about.aboutus.pdf") }}',
                    method: 'POST',
                    data: { _token: '{{ csrf_token() }}' },
                    success: function(response) {
                        $('#pdfSuccessIcon').show();
                        $('#pdfModalFooter').show();
                        $('#downloadPDF').data('url', response.pdf_url);
                    },
                    error: function(xhr) {
                        $('#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