@extends('layouts.base')

@section('title')
    Sorties 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>
        #sorties-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;
        }
        .text-truncate-50 {
            max-width: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </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">Sorties de caisse - {{ $agence->name }}</h5>
                @if(userHasPermission('can_add_cash_operation'))
                <a href="{{ route('gestion_operation_caisse.page_ajout_operation', ['type' => 'sortie', 'return_url' => request()->url()]) }}" class="btn btn-outline-danger mx-1">
                    <i class="fa-solid fa-plus"></i> Nouvelle sortie
                </a>
                @endif
            </div>
            
            <!-- Filtres -->
            <div class="card-body border-bottom">
                <div class="row g-3">
                    <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-2">
                        <label for="amount_min" class="form-label">Montant min</label>
                        <input type="number" id="amount_min" class="form-control" placeholder="Ex: 1000">
                    </div>
                    <div class="col-md-2">
                        <label for="amount_max" class="form-label">Montant max</label>
                        <input type="number" id="amount_max" class="form-control" placeholder="Ex: 50000">
                    </div>
                    <div class="col-md-2 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="sorties-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>
                            <!-- 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 la sortie"])
@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 = $('#sorties-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route('gestion_operation_caisse.sorties_data') }}',
                type: 'GET',
                data: function(d) {
                    d.from = $('#from').val();
                    d.to = $('#to').val();
                    d.amount_min = $('#amount_min').val();
                    d.amount_max = $('#amount_max').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', 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
        $('#from, #to, #amount_min, #amount_max').on('change', function() {
            table.ajax.reload();
        });
        
        // Réinitialiser les filtres
        $('#reset-filters').on('click', function() {
            $('#from, #to, #amount_min, #amount_max').val('');
            table.ajax.reload();
        });
    });
</script>
@endsection