@extends('base')

@section('content')
    <div class="alert alert-success text-center" id="entete" style="background:#000000 !important; color: white !important">
        <h1>FACTURER LES BL</h1>
    </div>

    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <h5 class="card-title text-success mb-3"><i class="fas fa-filter"></i> Filtres</h5>
            <div class="form-row">
                <div class="form-group col-md-3">
                    <label for="date_debut">Date début:</label>
                    <input type="date" class="form-control" id="date_debut" value="{{ date('Y-m-d') }}">
                </div>
                <div class="form-group col-md-3">
                    <label for="date_fin">Date fin:</label>
                    <input type="date" class="form-control" id="date_fin" value="{{ date('Y-m-d') }}">
                </div>
                <div class="form-group col-md-4">
                    <label for="societe_id">Société:</label>
                    <select id="societe_id" class="form-control">
                        <option value="">Toutes</option>
                        @foreach($societes as $societe)
                            <option value="{{ $societe->ID_Societe }}">{{ $societe->Societe_Code }} ->
                                {{ $societe->Societe_Nom_Societe }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group col-md-2 d-flex align-items-end">
                    <button class="btn btn-success btn-block" id="btn_filtrer">
                        <i class="fas fa-search"></i> Rechercher
                    </button>
                </div>
            </div>

            <button class="btn btn-danger" id="btn_facturer">
                <i class="fas fa-check"></i> Marquer comme facturé le(s) BL sélectionné(s)
            </button>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-hover table-bordered" id="table_bl">
            <thead style="background-color:#28a745; color:white">
                <tr>
                    <th width="30px"><input type="checkbox" id="select_all"></th>
                    <th>BL Code</th>
                    <th>Date Ref</th>
                    <th>Client</th>
                    <th>Chantier</th>
                </tr>
            </thead>
        </table>
    </div>

    <script>
        $(document).ready(function () {
            var table = $('#table_bl').DataTable({
                processing: true,
                serverSide: true,
                paging: true,
                dom: 'Bfrtip',
                buttons: [
                    { "extend": 'excel', "text": 'Export excel', "className": 'btn_export_excel', title: 'Liste des bls', "attr": { "style": "color: rgb(255, 255, 255); background-color: rgb(33, 136, 56);" } }
                ],
                ajax: {
                    url: "{{ route('facturer_bl.table') }}",
                    data: function (d) {
                        d.date_debut = $('#date_debut').val();
                        d.date_fin = $('#date_fin').val();
                        d.societe_id = $('#societe_id').val();
                    }
                },
                columns: [
                    {
                        data: 'id_bl',
                        orderable: false,
                        searchable: false,
                        render: function (data) {
                            return '<input type="checkbox" class="bl_checkbox" value="' + data + '">';
                        }
                    },
                    { data: 'bl_code' },
                    { data: 'bl_date_ref_formatted', name: 'bl_date_ref' },
                    {
                        data: 'client',
                        render: function (data) {
                            return data ? data.client_code + ' - ' + data.client_nom : '';
                        }
                    },
                    {
                        data: 'chantier',
                        render: function (data) {
                            return data ? data.chantier_code + ' - ' + data.chantier_nom : '';
                        }
                    }
                ],
                language: {
                    url: "//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json"
                }
            });

            $('#btn_filtrer').click(function () {
                table.ajax.reload();
            });

            $('#select_all').change(function () {
                $('.bl_checkbox').prop('checked', $(this).prop('checked'));
            });

            $('#btn_facturer').click(function () {
                var selectedBls = [];
                $('.bl_checkbox:checked').each(function () {
                    selectedBls.push($(this).val());
                });

                if (selectedBls.length === 0) {
                    alert('Veuillez sélectionner au moins un BL.');
                    return;
                }

                if (confirm('Êtes-vous sûr de vouloir marquer ' + selectedBls.length + ' BL(s) comme facturé(s) ?')) {
                    $.post("{{ route('facturer_bl.facturer') }}", {
                        bl_ids: selectedBls,
                        _token: '{{ csrf_token() }}'
                    }, function (response) {
                        if (response.success) {
                            alert(response.message);
                            table.ajax.reload();
                        } else {
                            alert('Erreur: ' + response.message);
                        }
                    });
                }
            });
        });
    </script>
@endsection