@extends('layouts.worker')

@php
    $userTranslations = \App\Helpers\TranslationHelper::getUserTranslations();
@endphp

@section('title', $userTranslations['translations']['invoices']['title'] ?? 'Mes Factures')

@push('styles')
<link href="{{ asset('css/components/modals.css') }}?v={{ time() }}" rel="stylesheet">
<link href="{{ asset('css/pages/worker/factures.css') }}?v={{ time() }}" rel="stylesheet">
@endpush

@section('content')
<div class="worker-page-container">
    <!-- Navigation par mois -->
    <div class="month-navigation">
        @php
            // Extraire l'année et le mois
            list($year, $month) = explode('-', $selectedMonth);
            $year = (int)$year;
            $month = (int)$month;
            
            // Mois précédent
            $prevMonth = $month > 1 ? 
                $year . '-' . str_pad($month - 1, 2, '0', STR_PAD_LEFT) : 
                ($year - 1) . '-12';
            
            // Mois suivant
            $nextMonth = $month < 12 ? 
                $year . '-' . str_pad($month + 1, 2, '0', STR_PAD_LEFT) : 
                ($year + 1) . '-01';
            
            // Vérifier si le mois suivant est dans le futur
            $currentYear = (int)date('Y');
            $currentMonth = (int)date('m');
            $isNextMonthDisabled = ($month == 12 && $year + 1 > $currentYear) || 
                ($year > $currentYear || ($year == $currentYear && $month + 1 > $currentMonth));
            
            // Formater le mois pour l'affichage
            $translations = \App\Helpers\TranslationHelper::getUserTranslations()['translations'];
            $monthNames = [];
            
            if (isset($translations['months'])) {
                $monthNames = [
                    1 => $translations['months']['january'] ?? 'janvier', 
                    2 => $translations['months']['february'] ?? 'février', 
                    3 => $translations['months']['march'] ?? 'mars', 
                    4 => $translations['months']['april'] ?? 'avril', 
                    5 => $translations['months']['may'] ?? 'mai', 
                    6 => $translations['months']['june'] ?? 'juin',
                    7 => $translations['months']['july'] ?? 'juillet', 
                    8 => $translations['months']['august'] ?? 'août', 
                    9 => $translations['months']['september'] ?? 'septembre', 
                    10 => $translations['months']['october'] ?? 'octobre', 
                    11 => $translations['months']['november'] ?? 'novembre', 
                    12 => $translations['months']['december'] ?? 'décembre'
                ];
            } else {
                $monthNames = [
                    1 => 'janvier', 2 => 'février', 3 => 'mars', 4 => 'avril', 
                    5 => 'mai', 6 => 'juin', 7 => 'juillet', 8 => 'août', 
                    9 => 'septembre', 10 => 'octobre', 11 => 'novembre', 12 => 'décembre'
                ];
            }
            
            $monthYearFormat = $translations['schedules']['month_year_format'] ?? '{month} {year}';
            $displayMonth = ucfirst($monthNames[$month]);
            $displayMonth = str_replace('{month}', $displayMonth, $monthYearFormat);
            $displayMonth = str_replace('{year}', $year, $displayMonth);
        @endphp
        
        <a href="{{ route('worker.factures', ['month' => $prevMonth]) }}" class="nav-arrow prev-month" aria-label="Précédent">
            <svg class="arrow-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15 18L9 12L15 6" stroke="#0a2e57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </a>
        
        <span class="current-month">{{ $displayMonth }}</span>
        
        @if($isNextMonthDisabled)
            <span class="nav-arrow next-month disabled" aria-label="Suivant" style="opacity: 0.3; pointer-events: none;">
                <svg class="arrow-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 18L15 12L9 6" stroke="#0a2e57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </span>
        @else
            <a href="{{ route('worker.factures', ['month' => $nextMonth]) }}" class="nav-arrow next-month" aria-label="Suivant">
                <svg class="arrow-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 18L15 12L9 6" stroke="#0a2e57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </a>
        @endif
    </div>

    <!-- Liste des factures -->
    <div class="invoices-container">
        <div id="invoices-list" class="invoices-list">
            @if($invoices->isEmpty())
                <div class="empty-state">
                    <div class="empty-state-icon">
                        <i class="fas fa-file-invoice"></i>
                    </div>
                    <h3 class="empty-state-title" data-translate="invoices.no_invoices_title">{{ $userTranslations['translations']['invoices']['no_invoices_title'] ?? 'Aucune facture' }}</h3>
                    <p class="empty-state-text" data-translate="invoices.no_invoices_text">{{ $userTranslations['translations']['invoices']['no_invoices_text'] ?? 'Aucune facture générée pour ce mois.' }}</p>
                </div>
            @else
                @foreach($invoices as $invoice)
                    <div class="invoice-card" data-invoice-id="{{ $invoice->id }}" data-client-name="{{ $invoice->client_name }}" data-invoice-number="{{ $invoice->invoice_number }}">
                        <div class="invoice-card-header">
                            <div class="invoice-header-left">
                                @php
                                    $clientName = strtolower($invoice->client_name);
                                    $logoUrl = null;
                                    $logoImgClass = '';
                                    if (str_contains($clientName, 'klam')) {
                                        $logoUrl = asset('images/logos/Klam.png');
                                        $logoImgClass = 'client-logo-img-klam';
                                    } elseif (str_contains($clientName, 'sentier')) {
                                        $logoUrl = asset('images/logos/Sentier_Services.png');
                                        $logoImgClass = 'client-logo-img-sentier';
                                    }
                                @endphp
                                @if($logoUrl)
                                    <div class="client-logo">
                                        <img src="{{ $logoUrl }}" alt="{{ $invoice->client_name }}" class="{{ $logoImgClass }}">
                                    </div>
                                @endif
                                <div class="invoice-number">
                                    <span>{{ $invoice->invoice_number }}</span>
                                </div>
                            </div>
                            <div class="invoice-header-actions">
                                <div class="invoice-status invoice-status-{{ $invoice->isSent() ? 'sent' : 'not-sent' }}">
                                    <span>{{ $invoice->getSentStatusLabel() }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="invoice-card-body-wrapper">
                            <div class="invoice-card-body">
                                <div class="invoice-info">
                                    <div class="invoice-info-item">
                                        <i class="fas fa-calendar"></i>
                                        <span>{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('d/m/Y') }}</span>
                                    </div>
                                    <div class="invoice-info-item">
                                        <i class="fas fa-euro-sign"></i>
                                        <span class="invoice-amount">{{ number_format($invoice->total, 2, ',', ' ') }} €</span>
                                    </div>
                                </div>
                            </div>
                            <div class="invoice-action-buttons">
                                <button class="invoice-history-btn" onclick="showInvoiceHistory({{ $invoice->id }})" title="Historique d'envoi">
                                    <i class="fas fa-history"></i>
                                </button>
                                <button class="invoice-send-btn" onclick="sendInvoice({{ $invoice->id }})" title="Envoyer la facture">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                        <div class="invoice-card-actions">
                            <button class="button button-secondary button-sm" onclick="viewInvoice({{ $invoice->id }})">
                                <i class="fas fa-eye"></i>
                                <span data-translate="invoices.view">{{ $userTranslations['translations']['invoices']['view'] ?? 'Voir' }}</span>
                            </button>
                            <button class="button button-primary button-sm" onclick="downloadInvoice({{ $invoice->id }})">
                                <i class="fas fa-download"></i>
                                <span data-translate="invoices.download">{{ $userTranslations['translations']['invoices']['download'] ?? 'Télécharger' }}</span>
                            </button>
                        </div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</div>

<!-- Modal glass historique d'envoi -->
<div id="invoice-history-modal" class="modal-layer" data-modal-id="invoice-history">
    <div class="modal-backdrop" data-close-modal></div>
    <div class="modal-container">
        <div class="glass-form glass-form-delete">
            <div class="glass-filter"></div>
            <div class="glass-overlay"></div>
            <div class="glass-specular"></div>
            <div class="glass-content">
                <div class="glass-header">
                    <h3 class="glass-title">
                        <i class="fas fa-history"></i>
                        Historique d'envoi
                    </h3>
                    <button type="button" class="modal-close" data-close-modal aria-label="Fermer">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="glass-form-fields">
                    <div id="invoice-history-content">
                        <div class="loading">
                            <i class="fas fa-spinner fa-spin"></i>
                            <span>Chargement...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal glass confirmation d'envoi -->
<div id="invoice-send-modal" class="modal-layer" data-modal-id="invoice-send">
    <div class="modal-backdrop" data-close-modal></div>
    <div class="modal-container">
        <div class="glass-form glass-form-delete">
            <div class="glass-filter"></div>
            <div class="glass-overlay"></div>
            <div class="glass-specular"></div>
            <div class="glass-content">
                <div class="glass-header">
                    <h3 class="glass-title">
                        <i class="fas fa-paper-plane"></i>
                        Envoyer la facture
                    </h3>
                    <button type="button" class="modal-close" data-close-modal aria-label="Fermer">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="glass-form-fields">
                    <p class="glass-modal-text">
                        Confirmer l'envoi de la facture <strong id="send-invoice-number"></strong> à <strong id="send-invoice-email"></strong> ?
                    </p>
                </div>
                <div class="glass-actions glass-actions-delete">
                    <button type="button" class="button button-secondary" data-close-modal>
                        Annuler
                    </button>
                    <button type="button" id="invoice-send-confirm" class="button button-primary">
                        Envoyer
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Lightbox pour visualiser le PDF -->
<div id="pdf-lightbox" class="pdf-lightbox" style="display: none;">
    <div class="pdf-lightbox-overlay" onclick="closePdfLightbox()"></div>
    <div class="pdf-lightbox-container">
        <div class="pdf-lightbox-header">
            <h3 class="pdf-lightbox-title">
                <i class="fas fa-file-pdf"></i>
                <span id="pdf-lightbox-invoice-number"></span>
            </h3>
            <button type="button" class="pdf-lightbox-close" onclick="closePdfLightbox()" aria-label="Fermer">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="pdf-lightbox-content">
            <div id="pdf-viewer-container">
                <canvas id="pdf-canvas"></canvas>
            </div>
            <div class="pdf-controls">
                <button id="pdf-zoom-out" class="pdf-nav-btn" title="Zoom arrière">
                    <i class="fas fa-search-minus"></i>
                </button>
                <button id="pdf-zoom-reset" class="pdf-nav-btn" title="Réinitialiser le zoom">
                    <i class="fas fa-search"></i>
                </button>
                <button id="pdf-zoom-in" class="pdf-nav-btn" title="Zoom avant">
                    <i class="fas fa-search-plus"></i>
                </button>
                <div class="pdf-controls-divider"></div>
                <button id="pdf-prev" class="pdf-nav-btn" disabled>
                    <i class="fas fa-chevron-left"></i>
                </button>
                <span id="pdf-page-info">Page <span id="pdf-page-num">1</span> / <span id="pdf-page-count">1</span></span>
                <button id="pdf-next" class="pdf-nav-btn" disabled>
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
</div>

@php
    $currentYear = (int) explode('-', $selectedMonth)[0];
    $currentMonth = (int) explode('-', $selectedMonth)[1];
@endphp

<!-- Données pour JavaScript -->
<div id="js-data" 
     data-user-id="{{ Auth::id() }}"
     data-selected-month="{{ $selectedMonth }}"
     data-current-year="{{ $currentYear }}"
     data-current-month="{{ $currentMonth }}"
     data-translations='{{ json_encode($userTranslations['translations'], JSON_HEX_APOS | JSON_HEX_QUOT) }}'
     class="hidden">
</div>
@endsection

@push('scripts')
<script type="module">
  // Importer PDF.js
  import * as pdfjsLib from '{{ asset("js/vendor/pdfjs/pdf.min.mjs") }}';
  
  // Configuration de PDF.js
  pdfjsLib.GlobalWorkerOptions.workerSrc = '{{ asset("js/vendor/pdfjs/pdf.worker.min.mjs") }}';
  
  // Rendre pdfjsLib disponible globalement
  window.pdfjsLib = pdfjsLib;
</script>
<script src="{{ asset('js/components/modals.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/pages/worker/factures.js') }}?v={{ time() }}"></script>
@endpush