@section('title',  ($indexTitle ?? ''))

@push('scripts')
    {{ $dataTable->scripts() }}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            // Reload DataTable on date change
            $('#start_date, #end_date').on('change', function() {
                window.LaravelDataTables["stocktransfers-table"].draw();
            });

            $(document).on('click', '.view-transfer-details', function() {
                var transferId = $(this).data('id');
                var url = "{{ route('stock_transfers.details', ':id') }}".replace(':id', transferId);

                Swal.fire({
                    title: 'Chargement...',
                    text: 'Veuillez patienter',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function(response) {
                        if (response.success) {
                            var html = '<table class="table table-bordered text-start"><thead><tr><th>Produit</th><th>Quantité</th></tr></thead><tbody>';
                            
                            response.details.forEach(function(item) {
                                html += '<tr><td>' + item.product + '</td><td>' + item.quantity + '</td></tr>';
                            });
                            
                            html += '</tbody></table>';

                            Swal.fire({
                                title: 'Détails du transfert',
                                html: html,
                                icon: 'info',
                                width: '600px',
                                showCloseButton: true,
                                focusConfirm: false,
                                confirmButtonText: 'Fermer'
                            });
                        } else {
                            Swal.fire('Erreur', 'Impossible de récupérer les détails.', 'error');
                        }
                    },
                    error: function() {
                        Swal.fire('Erreur', 'Une erreur est survenue.', 'error');
                    }
                });
            });
        });
    </script>
@endpush

<x-app-layout :assets="$assets ?? []">
<div>
   <div class="row">
      <div class="col-sm-12">
         <div class="card">
            <div class="card-header d-flex justify-content-between">
               <div class="header-title">
                  <h4 class="card-title">{{ $pageTitle ?? 'List'}}</h4>
               </div>
                <div class="card-action">
                    {!! $headerAction ?? '' !!}
                </div>
            </div>
            <div class="card-body px-0">
               <!-- Date Filter Section -->
               <div class="row align-items-end px-3 mb-3">
                   <div class="col-md-4">
                       <label for="start_date" class="form-label">Date Début</label>
                       <input type="date" id="start_date" class="form-control">
                   </div>
                   <div class="col-md-4">
                       <label for="end_date" class="form-label">Date Fin</label>
                       <input type="date" id="end_date" class="form-control">
                   </div>
               </div>

               <div class="table-responsive">
                    {{ $dataTable->table(['class' => 'table text-center table-striped w-100'],true) }}
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
</x-app-layout>