@extends('layouts.base')

@section('title')
    Comptabilité - {{ $agency->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-entree {
            background-color: {{ config('colors.lnb_green') }};
            color: white;
        }
        .badge-sortie {
            background-color: #dc3545;
            color: white;
        }
        .badge-exported {
            background-color: {{ config('colors.lnb_green') }};
            color: white;
        }
        .badge-not-exported {
            background-color: #ffc107;
            color: #212529;
        }
        .filters-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 1px solid #dee2e6;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .operations-table {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow-x: auto;
        }
        .btn-action {
            margin: 2px;
        }
        .checkbox-export {
            transform: scale(1.2);
        }
        
        /* Responsive styles */
        @media (max-width: 768px) {
            .card-header {
                flex-direction: column;
                gap: 10px;
            }
            
            .card-header h5 {
                text-align: center;
                margin-bottom: 10px;
            }
            
            .filters-section {
                padding: 15px;
            }
            
            .filters-section .row {
                margin: 0;
            }
            
            .filters-section .col-md-3 {
                margin-bottom: 15px;
            }
            
            .card-body.border-bottom .row {
                flex-direction: column;
                gap: 10px;
            }
            
            .card-body.border-bottom .col-md-6 {
                text-align: center;
            }
            
            .operations-table {
                font-size: 12px;
            }
            
            .operations-table th,
            .operations-table td {
                padding: 8px 4px;
                white-space: nowrap;
            }
            
            .badge {
                font-size: 10px;
                padding: 4px 6px;
            }
            
            .btn-action {
                padding: 4px 6px;
                font-size: 12px;
            }
            
            .checkbox-export {
                transform: scale(1);
            }
        }
        
        @media (max-width: 576px) {
            .operations-table {
                font-size: 11px;
            }
            
            .operations-table th,
            .operations-table td {
                padding: 6px 2px;
            }
            
            .badge {
                font-size: 9px;
                padding: 3px 5px;
            }
            
            .btn-action {
                padding: 3px 5px;
                font-size: 11px;
            }
            
            .filters-section {
                padding: 10px;
            }
            
            .card-header h5 {
                font-size: 16px;
            }
        }
        
        /* Table responsive wrapper */
        .table-responsive-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        /* Hide less important columns on mobile */
        @media (max-width: 768px) {
            .hide-mobile {
                display: none;
            }
        }
    </style>
@endsection

@section('content')
<div class="row">
    {{-- @include('includes.alert.alert_success_error') --}}
    
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="ph-light ph-calculator text-primary me-2"></i>
                    Export vers la Comptabilité - {{ $agency->name }}
                </h5>
            </div>
            
            <!-- Section Filtres -->
            <div class="filters-section">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label for="start_date" class="form-label">Date début</label>
                        <input type="date" id="start_date" class="form-control" value="{{ $defaultStartDate }}">
                    </div>
                    <div class="col-md-3">
                        <label for="end_date" class="form-label">Date fin</label>
                        <input type="date" id="end_date" class="form-control" value="{{ $defaultEndDate }}">
                    </div>
                    <div class="col-md-3">
                        <label for="export_status" class="form-label">Statut Export</label>
                        <select id="export_status" class="form-control">
                            <option value="">Tous</option>
                            <option value="0" selected>En attente</option>
                            <option value="1">Exportées</option>
                        </select>
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="button" id="apply-filters" class="btn btn-primary">
                            <i class="fa-solid fa-filter"></i> Appliquer
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Boutons d'action -->
            <div class="card-body border-bottom">
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" id="preview-selected" class="btn me-2" disabled style="background-color: {{ config('colors.lnb_green') }}; color: white; border-color: {{ config('colors.lnb_green') }};">
                            <i class="fa-solid fa-eye"></i> Prévisualiser la sélection
                        </button>
                    </div>
                    <div class="col-md-6 text-end">
                        <span id="selected-count" class="badge bg-primary fs-6">0 opération(s) sélectionnée(s)</span>
                    </div>
                </div>
            </div>
            
            <!-- Tableau des opérations -->
            <div class="card-body p-0">
                <div class="table-responsive-wrapper">
                    <div class="operations-table">
                        <table class="table table-hover mb-0" id="comptability-table">
                        <thead class="table-light">
                            <tr>
                                <th width="50">
                                    <input type="checkbox" id="select-all" class="checkbox-export">
                                </th>
                                <th>Date Opération</th>
                                <th>Type</th>
                                <th>Montant</th>
                                <th class="hide-mobile">Identifiant</th>
                                <th class="hide-mobile">Ajouté par</th>
                                <th>Statut Export</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($operations->count() > 0)
                                @foreach($operations as $operation)
                                <tr data-operation-id="{{ $operation->id }}">
                                    <td>
                                        <input type="checkbox" class="checkbox-export operation-checkbox" 
                                               value="{{ $operation->id }}" 
                                               {{ $operation->is_exported_to_comptability ? 'disabled' : '' }}>
                                    </td>
                                    <td>{{ $operation->operation_date ? $operation->operation_date->format('d/m/Y H:i') : 'N/A' }}</td>
                                    <td>
                                        @if($operation->type === 'entree')
                                            <span class="badge badge-entree">
                                                <i class="fa-solid fa-arrow-up"></i> Entrée
                                            </span>
                                        @else
                                            <span class="badge badge-sortie">
                                                <i class="fa-solid fa-arrow-down"></i> Sortie
                                            </span>
                                        @endif
                                    </td>
                                    <td>{{ number_format($operation->amount, 0, ',', ' ') }} F</td>
                                    <td class="hide-mobile">{{ $operation->uuid ?? 'N/A' }}</td>
                                    <td class="hide-mobile">{{ $operation->user ? $operation->user->first_name . ' ' . $operation->user->last_name : 'N/A' }}</td>
                                    <td>
                                        @if($operation->is_exported_to_comptability)
                                            <span class="badge badge-exported">
                                                <i class="fa-solid fa-check"></i> Exportée
                                            </span>
                                        @else
                                            <span class="badge badge-not-exported">
                                                <i class="fa-solid fa-clock"></i> En attente
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        @include('gestion_operation_caisse.partials.action_buttons', [
                                            'operation' => $operation,
                                            'onlyView' => true
                                        ])
                                    </td>
                                </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="8" class="text-center py-4">
                                        <div class="d-flex flex-column align-items-center">
                                            <i class="ph-light ph-database text-muted mb-2" style="font-size: 2rem;"></i>
                                            <span class="text-muted">Aucune donnée disponible</span>
                                            <small class="text-muted">Aucune opération trouvée pour les critères sélectionnés</small>
                                        </div>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('gestion_operation_caisse.partials.operation_details_modal', ['title' => "Détails de l'opération"])
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('assets/vendor/datatable/jquery-3.5.1.js') }}"></script>
<script src="{{ asset('assets/vendor/datatable/jquery.dataTables.min.js') }}"></script>

<script>
$(document).ready(function() {
    let selectedOperations = [];
    
    // Gestion des checkboxes
    $('#select-all').on('change', function() {
        const isChecked = $(this).is(':checked');
        $('.operation-checkbox:not(:disabled)').prop('checked', isChecked);
        updateSelectedOperations();
    });
    
    $(document).on('change', '.operation-checkbox', function() {
        updateSelectedOperations();
        updateSelectAllState();
    });
    
    function updateSelectedOperations() {
        selectedOperations = [];
        $('.operation-checkbox:checked').each(function() {
            selectedOperations.push($(this).val());
        });
        
        const count = selectedOperations.length;
        $('#selected-count').text(count + ' opération(s) sélectionnée(s)');
        
        // Activer/désactiver les boutons
        $('#preview-selected').prop('disabled', count === 0);
    }
    
    function updateSelectAllState() {
        const totalCheckboxes = $('.operation-checkbox:not(:disabled)').length;
        const checkedCheckboxes = $('.operation-checkbox:checked').length;
        
        if (checkedCheckboxes === 0) {
            $('#select-all').prop('indeterminate', false).prop('checked', false);
        } else if (checkedCheckboxes === totalCheckboxes) {
            $('#select-all').prop('indeterminate', false).prop('checked', true);
        } else {
            $('#select-all').prop('indeterminate', true);
        }
    }
    
    // Filtres
    $('#apply-filters').on('click', function() {
        console.log('Bouton Appliquer cliqué');
        loadOperations();
    });
    
    function loadOperations() {
        console.log('Fonction loadOperations appelée');
        const startDate = $('#start_date').val();
        const endDate = $('#end_date').val();
        const exportStatus = $('#export_status').val();
        
        console.log('Dates:', startDate, endDate);
        console.log('Statut export:', exportStatus);
        
        $.ajax({
            url: '{{ route("gestion_operation_caisse.comptability.operations") }}',
            type: 'GET',
            data: {
                start_date: startDate,
                end_date: endDate,
                export_status: exportStatus
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                console.log('Réponse reçue:', response);
                updateTable(response.operations);
                selectedOperations = [];
                updateSelectedOperations();
            },
            error: function(xhr, status, error) {
                console.error('Erreur lors du chargement des opérations:', error);
                console.error('Status:', status);
                console.error('Response:', xhr.responseText);
            }
        });
    }
    
    function updateTable(operations) {
        try {
            console.log('Fonction updateTable appelée avec', operations.length, 'opérations');
            const tbody = $('#comptability-table tbody');
            tbody.empty();
            
            // Vérifier s'il y a des opérations
            if (operations.length === 0) {
                const noDataRow = `
                    <tr>
                        <td colspan="8" class="text-center py-4">
                            <div class="d-flex flex-column align-items-center">
                                <i class="ph-light ph-database text-muted mb-2" style="font-size: 2rem;"></i>
                                <span class="text-muted">Aucune donnée disponible</span>
                                <small class="text-muted">Aucune opération trouvée pour les critères sélectionnés</small>
                            </div>
                        </td>
                    </tr>
                `;
                tbody.append(noDataRow);
                return;
            }
            
            operations.forEach(function(operation) {
            const row = `
                <tr data-operation-id="${operation.id}">
                    <td>
                        <input type="checkbox" class="checkbox-export operation-checkbox" 
                               value="${operation.id}" 
                               ${operation.is_exported_to_comptability ? 'disabled' : ''}>
                    </td>
                    <td>${operation.date_operation_formatted || 'N/A'}</td>
                    <td>
                        ${operation.type === 'entree' 
                            ? '<span class="badge badge-entree"><i class="fa-solid fa-arrow-up"></i> Entrée</span>'
                            : '<span class="badge badge-sortie"><i class="fa-solid fa-arrow-down"></i> Sortie</span>'
                        }
                    </td>
                    <td>${operation.amount_formatted || 'N/A'}</td>
                    <td class="hide-mobile">${operation.uuid || 'N/A'}</td>
                    <td class="hide-mobile">${operation.user_nom || 'N/A'}</td>
                    <td>
                        ${operation.is_exported_to_comptability 
                            ? '<span class="badge badge-exported"><i class="fa-solid fa-check"></i> Exportée</span>'
                            : '<span class="badge badge-not-exported"><i class="fa-solid fa-clock"></i> En attente</span>'
                        }
                    </td>
                    <td>
                        <button type="button" class="btn btn-sm btn-outline-primary btn-action btn-view-details"
                                data-operation='${JSON.stringify(operation.modalData)}'>
                            <i class="fa-solid fa-eye"></i>
                        </button>
                    </td>
                </tr>
            `;
            tbody.append(row);
        });
        } catch (error) {
            console.error('Erreur dans updateTable:', error);
        }
    }
    
    // Prévisualisation
    $('#preview-selected').on('click', function() {
        if (selectedOperations.length === 0) return;
        
        // Ouvrir la page de prévisualisation dans un nouvel onglet
        const form = $('<form>', {
            method: 'POST',
            action: '{{ route("gestion_operation_caisse.comptability.preview") }}',
            target: '_blank'
        });
        
        form.append($('<input>', {
            type: 'hidden',
            name: '_token',
            value: $('meta[name="csrf-token"]').attr('content')
        }));
        
        selectedOperations.forEach(function(id) {
            form.append($('<input>', {
                type: 'hidden',
                name: 'operation_ids[]',
                value: id
            }));
        });
        
        $('body').append(form);
        form.submit();
        form.remove();
    });
});
</script>

@include('gestion_operation_caisse.partials.operation_details_modal', ['title' => "Détails de l'opération"])
@include('gestion_operation_caisse.partials.operation_details_modal_script')
@endsection