@extends('layouts.base')

@section('title')
    Toutes les Opérations - Super Admin
@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>
        #toutes-operations-table tbody tr {
            background-color: #fff !important;
        }
        .badge-entrée {
            background-color: {{ config('colors.lnb_green') }};
            color: white;
        }
        .badge-sortie {
            background-color: #dc3545;
            color: white;
        }
        
        /* 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;
        }
    </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-buildings me-2"></i>
                    Toutes les opérations de caisse - Toutes les agences
                </h5>
            </div>
            
            <!-- Filtres -->
            <div class="card-body border-bottom">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label for="agence_id" class="form-label">Agence</label>
                        <select id="agence_id" class="form-select">
                            <option value="">Toutes les agences</option>
                            @foreach($agencies as $agency)
                                <option value="{{ $agency->id }}" {{ $selectedAgenceId == $agency->id ? 'selected' : '' }}>
                                    {{ $agency->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="type" class="form-label">Type</label>
                        <select id="type" class="form-select">
                            <option value="">Tous</option>
                            <option value="entrée">Entrée</option>
                            <option value="sortie">Sortie</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="from" class="form-label">Date début</label>
                        <input type="date" id="from" class="form-control" value="{{ now()->startOfMonth()->toDateString() }}">
                    </div>
                    <div class="col-md-3">
                        <label for="to" class="form-label">Date fin</label>
                        <input type="date" id="to" class="form-control" value="{{ now()->endOfMonth()->toDateString() }}">
                    </div>
                    {{-- <div class="col-md-3 d-flex align-items-end">
                        <button type="button" id="reset-filters" class="btn btn-outline-secondary">
                            <i class="fa-solid fa-undo"></i> Réinitialiser
                        </button>
                    </div> --}}
                </div>
            </div>
            
            <div class="card-body p-0">
                <div class="app-datatable-default overflow-auto">
                    <table class="display app-data-table default-data-table w-100" id="toutes-operations-table">
                        <thead>
                            <tr>
                                <th>Date Opération</th>
                                <th>Type</th>
                                <th>Montant</th>
                                <th>Identifiant</th>
                                <th>Agence</th>
                                <th>Ajouté par</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Les données seront chargées via AJAX -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour les détails de l'opération -->
@include('gestion_operation_caisse.partials.operation_details_modal', ['title' => "Détails de l'opération"])
@include('gestion_operation_caisse.partials.operation_details_modal_script')

<!-- Modal d'annulation d'opération -->
@include('gestion_operation_caisse.partials.cancel_operation_modal')

@endsection

@section('script')
<script src="{{ asset('assets/vendor/datatable/jquery.dataTables.min.js') }}"></script>
<script>
    $(document).ready(function() {
        const table = $('#toutes-operations-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route('gestion_operation_caisse.toutes_operations_data') }}',
                type: 'GET',
                data: function(d) {
                    d.agence_id = $('#agence_id').val();
                    d.type = $('#type').val();
                    d.from = $('#from').val();
                    d.to = $('#to').val();
                }
            },
            columns: [
                { data: 'operation_date', name: 'operation_date' },
                { data: 'type_badge', name: 'type' },
                { data: 'amount', name: 'amount' },
                { data: 'uuid', name: 'uuid' },
                { data: 'agency_name', name: 'agency.name' },
                { data: 'added_by', name: 'added_by' },
                { data: 'actions', name: 'actions', orderable: false, searchable: false }
            ],
            order: [[0, 'desc']],
            pageLength: 25,
            language: {
                processing: "Traitement en cours...",
                search: "Rechercher :",
                lengthMenu: "Afficher _MENU_ éléments",
                info: "Affichage de _START_ à _END_ sur _TOTAL_ éléments",
                infoEmpty: "Aucun élément à afficher",
                infoFiltered: "(filtré de _MAX_ éléments au total)",
                loadingRecords: "Chargement...",
                zeroRecords: "Aucun résultat trouvé",
                emptyTable: "Aucune donnée disponible",
                paginate: {
                    first: "Premier",
                    previous: "Précédent",
                    next: "Suivant",
                    last: "Dernier"
                }
            }
        });
        
        // Appliquer les filtres
        $('#agence_id, #type, #from, #to').on('change', function() {
            table.ajax.reload();
        });
        
        // Réinitialiser les filtres
        $('#reset-filters').on('click', function() {
            $('#agence_id, #type, #from, #to').val('');
            table.ajax.reload();
        });
    });
</script>
@endsection