@extends('layouts.base')

@section('title')
    Rapports de Caisse - {{ $agence->name }}
@endsection

@section('style')
    <link href="{{ asset('assets/vendor/datatable/jquery.dataTables.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        .badge-entrée { background-color: {{ config('colors.lnb_green') }}; color: #fff; }
        .badge-sortie { background-color: #dc3545; color: #fff; }
        
        /* Couleurs LNB pour les éléments de l'interface */
        .btn-primary {
            background-color: {{ config('colors.lnb_green') }};
            border-color: {{ config('colors.lnb_green') }};
        }
        
        .btn-primary:hover {
            background-color: {{ config('colors.lnb_green') }};
            border-color: {{ config('colors.lnb_green') }};
            opacity: 0.9;
        }
        
        .card-header h5 {
            color: {{ config('colors.lnb_green') }};
        }
        .column-selector {
            max-height: 300px;
            overflow-y: auto;
        }
        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        
        .loading-content {
            background: white;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid {{ config('colors.lnb_green') }};
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .column-item {
            padding: 0.5rem;
            border-bottom: 1px solid #eee;
        }
        .column-item:last-child {
            border-bottom: none;
        }
    </style>
@endsection

@section('content')
<div class="row">
    <div class="col-12 mb-3">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="ph-light ph-chart-line me-2"></i>
                    Rapports de Caisse
                    @if($isSuperAdmin)
                        - Toutes Agences
                    @else
                        - {{ $agence->name }}
                    @endif
                </h5>
            </div>
            <div class="card-body">
                {{-- Formulaire des filtres --}}
                <form id="form-rapports-filtres" class="row g-3 align-items-end">
                    @if($isSuperAdmin)
                        <div class="col-md-3">
                            <label class="form-label">Agence</label>
                            <select name="agence_id" class="form-select">
                                <option value="">Toutes les agences</option>
                                @foreach($agencies as $agency)
                                    <option value="{{ $agency->id }}" {{ (string)($selectedAgenceId ?? '') === (string)$agency->id ? 'selected' : '' }}>
                                        {{ $agency->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    <div class="col-md-2">
                        <label class="form-label">Date début</label>
                        <input type="date" name="from" value="{{ request('from', ($from ?? now()->startOfMonth()->toDateString())) }}" class="form-control" />
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Date fin</label>
                        <input type="date" name="to" value="{{ request('to', ($to ?? now()->endOfMonth()->toDateString())) }}" class="form-control" />
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Type</label>
                        <select name="type" class="form-select">
                            <option value="">Tous</option>
                            <option value="entrée" {{ ($type ?? '') === 'entrée' ? 'selected' : '' }}>Entrées</option>
                            <option value="sortie" {{ ($type ?? '') === 'sortie' ? 'selected' : '' }}>Sorties</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#columnSelectionModal">
                            <i class="ph-light ph-list-checks me-1"></i> Sélectionner colonnes
                        </button>
                    </div>
                </form>
                
                @if(($from ?? null) || ($to ?? null))
                    <div class="mt-3 p-3 bg-light rounded">
                        <h6 class="mb-2">Filtres appliqués :</h6>
                        <div class="row">
                            <div class="col-md-3">
                                <strong>Période :</strong> {{ $from ?? '—' }} → {{ $to ?? '—' }}
                            </div>
                            @if($isSuperAdmin && ($selectedAgenceId ?? null))
                                <div class="col-md-3">
                                    <strong>Agence :</strong> {{ optional($agencies->firstWhere('id', $selectedAgenceId))->name }}
                                </div>
                        @endif
                        @if(($type ?? null))
                                <div class="col-md-3">
                                    <strong>Type :</strong> {{ ucfirst($type) }}
                                </div>
                        @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <div class="d-flex flex-wrap gap-2">
                    <button type="button" id="btn-export-csv" class="btn btn-success btn-sm">
                        <i class="ph-light ph-file-csv me-1"></i> Export CSV
                    </button>
                    <button type="button" id="btn-export-excel" class="btn btn-outline-success btn-sm">
                        <i class="ph-light ph-microsoft-excel-logo me-1"></i> Export Excel
                    </button>
                    <button type="button" id="btn-export-pdf" class="btn btn-outline-danger btn-sm">
                        <i class="ph-light ph-file-pdf me-1"></i> Export PDF
                    </button>
                    <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#previewModal">
                        <i class="ph-light ph-eye me-1"></i> Prévisualiser
                    </button>
                </div>
            </div>
                </div>
            </div>
            
    <!-- Modal Sélection des colonnes -->
    <div class="modal fade" id="columnSelectionModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Sélectionner les colonnes à inclure dans le rapport</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Colonnes principales</h6>
                            <div class="column-selector">
                                <div class="column-item">
                                    <div class="form-check">
                                        <input class="form-check-input column-checkbox" type="checkbox" value="operation_date" id="col_operation_date" checked>
                                        <label class="form-check-label" for="col_operation_date">Date opération</label>
                                    </div>
                                </div>
                                <div class="column-item">
                                    <div class="form-check">
                                        <input class="form-check-input column-checkbox" type="checkbox" value="type" id="col_type" checked>
                                        <label class="form-check-label" for="col_type">Type</label>
                                    </div>
                                </div>
                                <div class="column-item">
                                    <div class="form-check">
                                        <input class="form-check-input column-checkbox" type="checkbox" value="amount" id="col_amount" checked>
                                        <label class="form-check-label" for="col_amount">Montant</label>
                                    </div>
                                </div>
                                <div class="column-item">
                                    <div class="form-check">
                                        <input class="form-check-input column-checkbox" type="checkbox" value="uuid" id="col_uuid" checked>
                                        <label class="form-check-label" for="col_uuid">Identifiant (UUID)</label>
                                    </div>
                                </div>
                                <div class="column-item">
                                    <div class="form-check">
                                        <input class="form-check-input column-checkbox" type="checkbox" value="external_reference" id="col_external_reference">
                                        <label class="form-check-label" for="col_external_reference">Référence externe</label>
                                    </div>
                                </div>
                                <div class="column-item">
                                    <div class="form-check">
                                        <input class="form-check-input column-checkbox" type="checkbox" value="reason" id="col_reason" checked>
                                        <label class="form-check-label" for="col_reason">Motif</label>
                                    </div>
                                </div>
                                @if($isSuperAdmin)
                                <div class="column-item">
                                    <div class="form-check">
                                        <input class="form-check-input column-checkbox" type="checkbox" value="agency" id="col_agency" checked>
                                        <label class="form-check-label" for="col_agency">Agence</label>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6>Informations de traçabilité</h6>
                            <div class="column-selector">
                                <div class="column-item">
                                    <div class="form-check">
                                        <input class="form-check-input column-checkbox" type="checkbox" value="added_by" id="col_added_by" checked>
                                        <label class="form-check-label" for="col_added_by">Caissier</label>
                                    </div>
                                </div>
                                <div class="column-item">
                                    <div class="form-check">
                                        <input class="form-check-input column-checkbox" type="checkbox" value="date_added" id="col_date_added" checked>
                                        <label class="form-check-label" for="col_date_added">Date d'ajout</label>
                                    </div>
                                </div>
                                <div class="column-item">
                                    <div class="form-check">
                                        <input class="form-check-input column-checkbox" type="checkbox" value="exported_by" id="col_exported_by">
                                        <label class="form-check-label" for="col_exported_by">Exporté par</label>
                                    </div>
                                </div>
                                <div class="column-item">
                                    <div class="form-check">
                                        <input class="form-check-input column-checkbox" type="checkbox" value="export_date" id="col_export_date">
                                        <label class="form-check-label" for="col_export_date">Date d'export</label>
                                    </div>
                                </div>
                                <div class="column-item">
                                    <div class="form-check">
                                        <input class="form-check-input column-checkbox" type="checkbox" value="is_exported_to_comptability" id="col_is_exported">
                                        <label class="form-check-label" for="col_is_exported">Exporté vers comptabilité</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="select-all-columns">Tout sélectionner</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="deselect-all-columns">Tout désélectionner</button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" class="btn btn-primary" id="apply-column-selection">Appliquer</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Prévisualisation export -->
    <div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Prévisualisation de l'export</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="preview-table">
                            <thead id="preview-thead">
                                <tr>
                                    <th>Date</th>
                                    <th>Type</th>
                                    <th>Montant</th>
                                    <th>Identifiant</th>
                                    <th>Motif</th>
                                    @if($isSuperAdmin)
                                    <th>Agence</th>
                                    @endif
                                    <th>Caissier</th>
                                    <th>Date ajout</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="preview-stats" class="mt-2 small text-muted"></div>
                </div>
                <div class="modal-footer">
                    <div class="d-flex flex-wrap gap-2 ms-auto">
                        <button type="button" class="btn btn-outline-success btn-sm" id="btn-export-csv-modal">CSV</button>
                        <button type="button" class="btn btn-outline-success btn-sm" id="btn-export-excel-modal">Excel</button>
                        <button type="button" class="btn btn-outline-danger btn-sm" id="btn-export-pdf-modal">PDF</button>
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Fermer</button>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
<!-- Overlay de chargement -->
<div class="loading-overlay" id="loadingOverlay">
    <div class="loading-content">
        <div class="loading-spinner"></div>
        <h5>Génération du rapport en cours...</h5>
        <p>Veuillez patienter, cela peut prendre quelques instants pour les gros volumes de données.</p>
    </div>
</div>

@endsection

@section('script')
    <script src="{{ asset('assets/vendor/datatable/jquery-3.5.1.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Variables globales pour les colonnes sélectionnées
            let selectedColumns = ['operation_date', 'type', 'amount', 'uuid', 'external_reference'];
            @if($isSuperAdmin)
                selectedColumns.push('agency');
            @endif
            selectedColumns.push('reason');
            selectedColumns.push('added_by');
            selectedColumns.push('date_added');

            // Variables pour gérer l'état temporaire du modal
            let tempSelectedColumns = [...selectedColumns];

            // Fonction pour initialiser les checkboxes selon l'état actuel
            function initializeModalCheckboxes() {
                $('.column-checkbox').each(function() {
                    const value = $(this).val();
                    $(this).prop('checked', selectedColumns.includes(value));
                });
            }

            // Gestion de la sélection des colonnes
            $('#select-all-columns').on('click', function() {
                $('.column-checkbox').prop('checked', true);
            });

            $('#deselect-all-columns').on('click', function() {
                $('.column-checkbox').prop('checked', false);
            });

            // Initialiser les checkboxes quand le modal s'ouvre
            $('#columnSelectionModal').on('show.bs.modal', function() {
                initializeModalCheckboxes();
                tempSelectedColumns = [...selectedColumns];
            });

            // Appliquer les changements seulement quand on clique sur "Appliquer"
            $('#apply-column-selection').on('click', function() {
                selectedColumns = [];
                $('.column-checkbox:checked').each(function() {
                    selectedColumns.push($(this).val());
                });
                console.log('Colonnes sélectionnées appliquées:', selectedColumns);
                
                // Rafraîchir la prévisualisation si le modal est ouvert
                if ($('#previewModal').hasClass('show')) {
                    $('#previewModal').modal('hide');
                    setTimeout(function() {
                        $('#previewModal').modal('show');
                    }, 300);
                }
                
                $('#columnSelectionModal').modal('hide');
            });

            // Annuler les changements si on ferme sans appliquer
            $('#columnSelectionModal').on('hidden.bs.modal', function() {
                // Restaurer l'état précédent si on n'a pas cliqué sur "Appliquer"
                initializeModalCheckboxes();
            });

            // Rafraîchit les statistiques de synthèse en fonction des filtres saisis
            function refreshStats() {
                const params = {
                    from: $('input[name="from"]').val(),
                    to: $('input[name="to"]').val(),
                    type: $('select[name="type"]').val(),
                    agence_id: $('select[name="agence_id"]').val(),
                };
                $.get('{{ route('gestion_operation_caisse.rapports_stats') }}', params, function(res) {
                    // Les stats sont affichées dans le modal de prévisualisation
                });
            }

            refreshStats();

            // Rafraîchir les stats quand les filtres changent
            $('#form-rapports-filtres').on('change', 'input, select', function(){
                refreshStats();
            });

            // Prévisualisation export
            $('#previewModal').on('show.bs.modal', function(){
                const params = {
                    limit: 10,
                    from: $('input[name="from"]').val(),
                    to: $('input[name="to"]').val(),
                    type: $('select[name="type"]').val(),
                    agence_id: $('select[name="agence_id"]').val(),
                    columns: selectedColumns.join(',')
                };
                
                $.get('{{ route('gestion_operation_caisse.rapports_preview') }}', params, function(res){
                    const tbody = $('#preview-table tbody');
                    const thead = $('#preview-thead');
                    tbody.empty();
                    
                    // Mettre à jour les en-têtes selon les colonnes sélectionnées
                    updatePreviewHeaders(thead);
                    
                    (res.rows || []).forEach(function(r){
                        const row = buildPreviewRow(r);
                        tbody.append(row);
                    });
                });

                $.get('{{ route('gestion_operation_caisse.rapports_stats') }}', params, function(res){
                    if (res && res.totalEntrees !== undefined) {
                        $('#preview-stats').text(
                            `Entrées = ${new Intl.NumberFormat('fr-FR').format(res.totalEntrees)} F | ` +
                            `Sorties = ${new Intl.NumberFormat('fr-FR').format(res.totalSorties)} F | ` +
                            `Solde = ${new Intl.NumberFormat('fr-FR').format(res.solde)} F | ` +
                            `Lignes = ${res.nbOperations}`
                        );
                    }
                });
            });

            // Fonction pour mettre à jour les en-têtes de prévisualisation
            function updatePreviewHeaders(thead) {
                const headerMap = {
                    'operation_date': 'Date',
                    'type': 'Type',
                    'amount': 'Montant',
                    'uuid': 'Identifiant',
                    'external_reference': 'Référence',
                    'reason': 'Motif',
                    'agency': 'Agence',
                    'added_by': 'Caissier',
                    'date_added': 'Date ajout',
                    'exported_by': 'Exporté par',
                    'export_date': 'Date export',
                    'is_exported_to_comptability': 'Exporté vers comptabilité'
                };
                
                let headers = '';
                selectedColumns.forEach(function(col) {
                    if (headerMap[col]) {
                        headers += `<th>${headerMap[col]}</th>`;
                    }
                });
                thead.html(`<tr>${headers}</tr>`);
            }

            // Fonction pour construire une ligne de prévisualisation
            function buildPreviewRow(r) {
                let cells = '';
                selectedColumns.forEach(function(col) {
                    let value = '';
                    switch(col) {
                        case 'operation_date':
                            value = r.operation_date || '';
                            break;
                        case 'type':
                            value = r.type || '';
                            break;
                        case 'amount':
                            value = r.amount || '';
                            break;
                        case 'uuid':
                            value = r.uuid || '';
                            break;
                        case 'external_reference':
                            value = r.external_reference || '';
                            break;
                        case 'reason':
                            value = r.reason || '';
                            break;
                        case 'agency':
                            value = r.agency || '';
                            break;
                        case 'added_by':
                            value = r.added_by || '';
                            break;
                        case 'date_added':
                            value = r.date_added || '';
                            break;
                        case 'exported_by':
                            value = r.exported_by || '';
                            break;
                        case 'export_date':
                            value = r.export_date || '';
                            break;
                        case 'is_exported_to_comptability':
                            value = r.is_exported_to_comptability ? 'Oui' : 'Non';
                            break;
                    }
                    cells += `<td>${value}</td>`;
                });
                return `<tr>${cells}</tr>`;
            }

            // Construit la querystring à transmettre aux endpoints d'export
            function buildQs() {
                const params = new URLSearchParams({
                    from: $('input[name="from"]').val() || '',
                    to: $('input[name="to"]').val() || '',
                    type: $('select[name="type"]').val() || '',
                    agence_id: $('select[name="agence_id"]').val() || '',
                    columns: selectedColumns.join(',')
                });
                return params.toString();
            }

            // Gestion des exports avec overlay de chargement
            $(document).on('click', '#btn-export-csv, #btn-export-csv-modal', function(){
                $('#loadingOverlay').show();
                window.location.href = `{{ route('gestion_operation_caisse.rapports_export') }}?${buildQs()}`;
                setTimeout(function() { $('#loadingOverlay').hide(); }, 3000);
            });
            $(document).on('click', '#btn-export-excel, #btn-export-excel-modal', function(){
                $('#loadingOverlay').show();
                window.location.href = `{{ route('gestion_operation_caisse.rapports_export_excel') }}?${buildQs()}`;
                setTimeout(function() { $('#loadingOverlay').hide(); }, 3000);
            });
            $(document).on('click', '#btn-export-pdf, #btn-export-pdf-modal', function(){
                $('#loadingOverlay').show();
                window.location.href = `{{ route('gestion_operation_caisse.rapports_export_pdf') }}?${buildQs()}`;
                setTimeout(function() { $('#loadingOverlay').hide(); }, 5000);
            });
        });
    </script>
@endsection