@extends('layouts.base')

@section('title')
    Opérations - {{ $agence?->name ?? 'Agence' }} - {{ \Carbon\Carbon::create($year, $month, 1)->locale('fr')->isoFormat('MMMM YYYY') }}
@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;
        }
    </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>
                    {{ $agence?->name ?? 'Agence' }} —
                    {{ \Carbon\Carbon::create($year, $month, 1)->locale('fr')->isoFormat('MMMM YYYY') }}
                </h5>
                <a href="{{ route('gestion_operation_caisse.dashboard', ['year' => $year, 'month' => $month]) }}" class="btn btn-sm btn-outline-secondary">
                    <i class="ph-light ph-caret-left me-1"></i> Retour
                </a>
            </div>

            <div class="card-body border-bottom">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Agence</label>
                        <input type="text" class="form-control" value="{{ $agence?->name ?? 'N/A' }}" disabled>
                        <input type="hidden" id="agence_id" value="{{ $agenceId }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Mois</label>
                        <input type="text" class="form-control" value="{{ \Carbon\Carbon::create($year, $month, 1)->locale('fr')->isoFormat('MMMM YYYY') }}" disabled>
                        <input type="hidden" id="from" value="{{ $from->toDateString() }}">
                        <input type="hidden" id="to" value="{{ $to->toDateString() }}">
                    </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" {{ ($type==='entrée') ? 'selected' : '' }}>Entrée</option>
                            <option value="sortie" {{ ($type==='sortie') ? 'selected' : '' }}>Sortie</option>
                        </select>
                    </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="operations-agence-mois-table">
                        <thead>
                            <tr>
                                <th>Date Opération</th>
                                <th>Type</th>
                                <th>Montant</th>
                                <th>Identifiant</th>
                                <th>Ajouté par</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('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>
        $(function() {
            const table = $('#operations-agence-mois-table').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 5,
                lengthMenu: [[5, 10, 25, 50], [5, 10, 25, 50]],
                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: 'added_by', name: 'added_by' },
                    { data: 'actions', orderable: false, searchable: false }
                ],
                order: [[0, 'desc']],
                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" 
                    }
                }
            });

            $('#type').on('change', function() { table.ajax.reload(); });
        });
    </script>
    @include('gestion_operation_caisse.partials.operation_details_modal', ['title' => "Détails de l'opération"]) 
    @include('gestion_operation_caisse.partials.cancel_operation_modal')
    @include('gestion_operation_caisse.partials.operation_details_modal_script')
@endsection