@php use Carbon\Carbon; @endphp
<x-main>
    <x-slot name="title">
        Liste des bons des livraisons
    </x-slot>
    <x-slot name="cssSlot">
        <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
        @include('components.styles.client-v2-datatable')

        <style>
            :root {
                --deliveries-primary: var(--theme-primary);
                --deliveries-primary-dark: var(--theme-primary-dark);
                --deliveries-primary-soft: var(--theme-primary-soft);
                --deliveries-mint: #e9f8f2;
                --deliveries-bg: #f5f8fb;
                --deliveries-surface: #ffffff;
                --deliveries-border: #dfe8f0;
                --deliveries-text: #102033;
                --deliveries-muted: #6b7c8f;
                --deliveries-green: #16a34a;
                --deliveries-green-soft: #ecfdf5;
                --deliveries-red: #dc2626;
                --deliveries-red-soft: #fef2f2;
                --deliveries-yellow: #d97706;
                --deliveries-yellow-soft: #fffbeb;
                --deliveries-shadow: 0 16px 38px rgba(15, 35, 52, .08);
            }

            .orders-modern-page {
                color: var(--deliveries-text);
            }

            .orders-modern-page .app-hero { margin-bottom: 18px; }

            .orders-card.card.card-custom {
                border: 1px solid var(--deliveries-border) !important;
                border-radius: 28px !important;
                overflow: hidden;
                background: var(--deliveries-surface) !important;
                box-shadow: var(--deliveries-shadow) !important;
            }

            .orders-card > .card-header {
                min-height: auto !important;
                padding: 18px 22px !important;
                border-bottom: 1px solid var(--deliveries-border) !important;
                background: linear-gradient(180deg, #ffffff, #f8fbfd) !important;
            }

            .orders-card .card-title {
                display: flex;
                align-items: center;
                gap: 12px;
                margin: 0 !important;
            }

            .orders-card .card-icon {
                width: 42px;
                height: 42px;
                border-radius: 15px;
                display: inline-grid;
                place-items: center;
                background: var(--deliveries-primary-soft);
                color: var(--deliveries-primary);
            }

            .orders-card .card-icon i {
                color: var(--deliveries-primary) !important;
            }

            .orders-card .card-label {
                color: var(--deliveries-text) !important;
                font-weight: 950 !important;
                letter-spacing: -.03em;
            }

            .orders-card .card-body {
                background: linear-gradient(180deg, #ffffff, #f8fbfd);
                padding: 18px !important;
            }

            .orders-card form.mb-15 {
                margin-bottom: 16px !important;
                padding: 14px;
                border: 1px solid var(--deliveries-border);
                border-radius: 22px;
                background: #ffffff;
                box-shadow: 0 8px 18px rgba(15, 35, 52, .035);
            }

            .orders-card form label {
                display: block;
                color: var(--deliveries-muted);
                font-size: 11px;
                font-weight: 950 !important;
                text-transform: uppercase;
                letter-spacing: .055em;
                margin-bottom: 7px;
            }

            .orders-card .form-control {
                height: 42px;
                border-radius: 14px !important;
                border: 1px solid var(--deliveries-border) !important;
                background: #f8fbfd !important;
                color: var(--deliveries-text) !important;
                box-shadow: none !important;
                font-size: 13px;
                font-weight: 800;
            }

            .orders-card .form-control:focus {
                background: #ffffff !important;
                border-color: rgba(15, 110, 168, .45) !important;
                box-shadow: 0 0 0 4px rgba(15, 110, 168, .08) !important;
            }

            .orders-card form button.btn {
                height: 42px;
                border-radius: 14px !important;
                border: 0 !important;
                background: linear-gradient(135deg, var(--deliveries-primary), #18a875) !important;
                box-shadow: 0 12px 22px rgba(15, 110, 168, .16);
                font-weight: 950;
            }

            .orders-table-shell {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            #kt_datatable,
            #kt_datatable_wrapper {
                display: none !important;
            }

            .deliveries-widget-list {
                order: 2;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .deliveries-widget-pagination {
                order: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                padding: 10px 12px;
                border: 1px solid var(--deliveries-border);
                border-radius: 18px;
                background: #ffffff;
                box-shadow: 0 8px 18px rgba(15, 35, 52, .04);
            }

            .deliveries-widget-pagination.is-bottom {
                order: 3;
            }

            .deliveries-widget-pagination.is-empty {
                display: none;
            }

            .deliveries-widget-page-info {
                color: var(--deliveries-muted);
                font-size: 12px;
                font-weight: 850;
                line-height: 1.35;
                white-space: nowrap;
            }

            .deliveries-widget-page-actions {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 5px;
                flex-wrap: wrap;
            }

            .deliveries-widget-page-btn {
                min-width: 34px;
                height: 34px;
                border-radius: 12px;
                border: 1px solid var(--deliveries-border);
                background: #ffffff;
                color: var(--deliveries-text);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                font-weight: 900;
                padding: 0 10px;
                transition: all .16s ease;
            }

            .deliveries-widget-page-btn:hover:not(:disabled):not(.active) {
                background: var(--deliveries-primary-soft);
                border-color: rgba(15, 110, 168, .25);
                color: var(--deliveries-primary-dark);
            }

            .deliveries-widget-page-btn.active {
                background: var(--deliveries-primary);
                border-color: var(--deliveries-primary);
                color: #ffffff;
            }

            .deliveries-widget-page-btn:disabled {
                opacity: .42;
                cursor: not-allowed;
            }

            .deliveries-widget-page-dots {
                min-width: 28px;
                height: 34px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: var(--deliveries-muted);
                font-weight: 900;
            }

            .deliveries-widget-empty {
                border: 1px dashed var(--deliveries-border);
                background: #ffffff;
                border-radius: 18px;
                padding: 22px;
                color: var(--deliveries-muted);
                font-weight: 850;
                text-align: center;
            }

            .deliveries-line-item {
                width: 100%;
                min-height: 66px;
                display: grid;
                grid-template-columns:
                    minmax(230px, 1.20fr)
                    minmax(120px, .58fr)
                    minmax(120px, .58fr)
                    minmax(106px, .46fr)
                    minmax(118px, .55fr)
                    minmax(118px, .55fr)
                    minmax(118px, .55fr)
                    minmax(88px, .34fr);
                gap: 10px;
                align-items: center;
                padding: 9px 12px;
                border-radius: 18px;
                border: 1px solid var(--deliveries-border);
                background: #ffffff;
                box-shadow: 0 8px 20px rgba(15, 35, 52, .04);
                transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
            }

            .deliveries-line-item:hover {
                border-color: rgba(15, 110, 168, .28);
                box-shadow: 0 12px 26px rgba(15, 35, 52, .07);
                transform: translateY(-1px);
            }

            .deliveries-line-main {
                min-width: 0;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .deliveries-line-icon {
                width: 38px;
                height: 38px;
                border-radius: 14px;
                display: inline-grid;
                place-items: center;
                background: var(--deliveries-primary-soft);
                color: var(--deliveries-primary);
                flex: 0 0 auto;
            }

            .deliveries-line-title {
                margin: 0;
                color: var(--deliveries-text);
                font-size: 13px;
                font-weight: 950;
                line-height: 1.2;
                letter-spacing: -.015em;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .deliveries-line-sub {
                margin-top: 3px;
                color: var(--deliveries-muted);
                font-size: 11px;
                font-weight: 800;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .deliveries-line-cell {
                min-width: 0;
            }

            .deliveries-line-label {
                display: block;
                color: var(--deliveries-muted);
                font-size: 10px;
                font-weight: 950;
                line-height: 1;
                text-transform: uppercase;
                letter-spacing: .055em;
                margin-bottom: 5px;
            }

            .deliveries-line-value {
                display: block;
                color: var(--deliveries-text);
                font-size: 12px;
                font-weight: 900;
                line-height: 1.2;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .deliveries-line-money {
                font-variant-numeric: tabular-nums;
                text-align: right;
            }

            .deliveries-status-badge {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-height: 28px;
                max-width: 100%;
                padding: 0 10px;
                border-radius: 999px;
                border: 1px solid transparent;
                font-size: 11px;
                font-weight: 950;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .deliveries-status-badge.is-credit {
                color: var(--deliveries-primary-dark);
                background: var(--deliveries-primary-soft);
                border-color: #bfdef4;
            }

            .deliveries-status-badge.is-cash {
                color: #047857;
                background: var(--deliveries-green-soft);
                border-color: #bbf7d0;
            }

            .deliveries-status-badge.is-other {
                color: var(--deliveries-yellow);
                background: var(--deliveries-yellow-soft);
                border-color: #fde68a;
            }

            .deliveries-line-actions {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 6px;
            }

            .deliveries-line-actions a,
            .deliveries-line-actions .btn,
            .deliveries-action-btn {
                width: 34px;
                height: 34px;
                border-radius: 12px !important;
                border: 1px solid var(--deliveries-border) !important;
                background: #ffffff !important;
                display: inline-flex !important;
                align-items: center;
                justify-content: center;
                color: var(--deliveries-primary) !important;
                padding: 0 !important;
                transition: all .16s ease;
            }

            .deliveries-line-actions a:hover,
            .deliveries-line-actions .btn:hover,
            .deliveries-action-btn:hover {
                background: var(--deliveries-primary-soft) !important;
                border-color: rgba(15, 110, 168, .28) !important;
                color: var(--deliveries-primary-dark) !important;
                transform: translateY(-1px);
            }

            .deliveries-line-actions i,
            .deliveries-action-btn i {
                color: inherit !important;
            }

            @media (max-width: 1300px) {
                .deliveries-line-item {
                    grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(108px, .55fr)) minmax(88px, .34fr);
                }

                .deliveries-line-cell.is-optional {
                    display: none;
                }
            }

            @media (max-width: 900px) {
                .app-hero-inner,
                .deliveries-widget-pagination {
                    align-items: flex-start;
                    flex-direction: column;
                }

                .deliveries-widget-page-info {
                    white-space: normal;
                }

                .deliveries-widget-page-actions {
                    justify-content: flex-start;
                }

                .deliveries-line-item {
                    grid-template-columns: 1fr;
                    align-items: start;
                    padding: 12px;
                }

                .deliveries-line-main {
                    padding-bottom: 8px;
                    border-bottom: 1px solid #edf3f7;
                }

                .deliveries-line-money {
                    text-align: left;
                }

                .deliveries-line-actions {
                    justify-content: flex-start;
                }
            }
        </style>

    </x-slot>

    <x-slot name="subHeaderTitle">
        Liste des bons des livraisons
    </x-slot>
    <x-slot name="bodyContent">
        <div class="orders-modern-page">
            <section class="app-hero">
                <div class="app-hero-inner">
                    <div>
                        <div class="app-hero-kicker">
                            <i class="fas fa-truck"></i>
                            Suivi des livraisons
                        </div>
                        <h2 class="app-hero-title">Liste des bons de livraison</h2>
                        <p class="app-hero-subtitle">
                            Consultez vos bons de livraison et filtrez les résultats par type et par date.
                        </p>
                    </div>
                    <div class="app-hero-chip">
                        <i class="fas fa-box-open"></i>
                        Interface livraison
                    </div>
                </div>
            </section>

            <div class="card card-custom orders-card">
                <div class="card-header">
                    <div class="card-title">
                        <span class="card-icon">
                            <i class="flaticon-notepad"></i>
                        </span>
                        <h3 class="card-label">Liste des Bons de Livraison</h3>
                    </div>
                </div>
                <div class="card-body">
                    <form class="mb-15" action="{{ route('movements.index') }}" method="GET">
                    @php
                        $defaultDate = Carbon::now()->subMonths(3)->format('Y-m-d'); // Default: 3 months ago
//                        dd($defaultDate);
                            $paraModule = json_decode(\App\Models\Configuration::query()->where('label', 'Configuration modules')->first()->value)->para;
                    @endphp

                    @if ($paraModule)
                        @php
                            $clientAccess = auth()->user()->client->all_products;
                        @endphp

                        @if ($clientAccess)
                            <div class="row align-items-center g-3">
                                <!-- Type des bons de livraisons -->
                                <div class="col-lg-4 col-md-6 col-sm-12">
                                    <label for="bills" style="font-weight: bold">Type des bons de livraisons</label>
                                    <select class="form-control" id="exampleFormControlSelect1">
                                        <option value="1">BL Médicaments</option>
                                        <option value="2">BL Para</option>
                                    </select>
                                </div>

                                <!-- Input: Date -->
                                <div class="col-lg-4 col-md-6 col-sm-12">
                                    <label for="date" style="font-weight: bold">À partir de la date suivante:</label>
                                    <input type="date" name="date" id="date_du" value="{{$defaultDate}}" class="form-control border-primary rounded">
                                </div>

                                <!-- Button: Charge -->
                                <div class="col-lg-4 col-md-12 col-sm-12 text-md-start text-center mt-md-0 mt-3">
                                    <br>
                                    <button type="button" id="loadDeliveriesButton" class="btn w-100 w-lg-auto" style="background-color: var(--theme-primary);">
                                        <i class="fas fa-download text-white"></i> <span class="text-white">charger</span>
                                    </button>
                                </div>
                            </div>
                        @endif
                    @endif
                    </form>

                    <div class="orders-table-shell">
                        <div id="deliveriesPaginationTop" class="deliveries-widget-pagination is-empty"></div>
                        <div id="deliveriesWidgetList" class="deliveries-widget-list"></div>
                        <table class="table align-middle" id="kt_datatable" style="margin-top: 13px !important;width: 100%">
                            <thead>
                            <tr class="fw-bolder text-muted bg-light">
                                <th>N° Facture</th>
                                <th>N° BL</th>
                                <th class="text-center">Nature</th>
                                <th class="text-center">Date</th>
                                <th class="text-center">Total Brut</th>
                                <th class="text-center">Total Remise</th>
                                <th class="text-center">Total HT</th>
                                <th class="text-center">Total TVA</th>
                                <th class="text-center">Total TTC</th>
                                <th class="text-center">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                            <tr class="fw-bolder text-muted bg-light">
                                <th>N° Facture</th>
                                <th>N° BL</th>
                                <th>Nature</th>
                                <th>Date</th>
                                <th>Total Brut</th>
                                <th>Total Remise</th>
                                <th>Total HT</th>
                                <th>Total TVA</th>
                                <th>Total TTC</th>
                                <th>Action</th>
                            </tr>
                            </tfoot>
                        </table>
                        <div id="deliveriesPaginationBottom" class="deliveries-widget-pagination is-bottom is-empty"></div>
                    </div>
                    <!--end: Datatable-->
                </div>
            </div>
        </div>
    </x-slot>
    <script>

    </script>
    <x-slot name="jsSlot">
        <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}"></script>
        <script src="{{ asset('plugins/jquery-validation/jquery.validate.min.js') }}"></script>
        <script src="{{ asset('plugins/jquery-validation/additional-methods.min.js') }}"></script>
        <script src="{{ asset('plugins/jquery-validation/localization/messages_fr.min.js') }}"></script>
        <script>
            $.ajaxSetup({
                async: true,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        </script>

        <x-select2-ajax id="deliveryFormNumber" :length="1" route="api.searchDeliveryFormByNumber" multiple="true"
                        text='item.id_backend'/>
        <script>
            $("#orderNumber").select2({
                language: "fr",
                placeholder: "Saisir un numéro de commande",
                allowClear: true,
                multiple: true,
                cache: false,
                order: [2],
                ajax: {
                    url: '{{ route("api.searchDeliveryFormByOrderNumber") }}',
                    dataType: "json",
                    type: "post",
                    delay: 1000,
                    data: function (term) {
                        return {
                            q: term, // search term
                            "_token": "{{ csrf_token() }}"
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.order_id,
                                    id: item.id
                                }
                            })
                        };
                    }
                },
                templateSelection: function (item) {
                    return item.name || item.text;
                }
            });

            $(document).ready(function () {

                @php
                    $configValue = \App\Models\Configuration::query()
                        ->where('label', 'Configuration modules')
                        ->first();

                    $clientAccess = (int) (auth()->user()->client->all_products ?? 0);

                    $decodedConfig = json_decode($configValue?->value ?? '{}', true);

                    $paraModule = (bool) ($decodedConfig['para'] ?? false);
                    $onlyPara = (bool) ($decodedConfig['onlypara'] ?? false);
                @endphp

                const paraModule = {{ Js::from($paraModule) }};
                const onlyPara = {{ Js::from($onlyPara) }};
                const clientAccess = {{ Js::from($clientAccess) }};

                let defaultType = 1;

                if (paraModule && onlyPara) {
                    defaultType = 2; // Para only
                } else if (paraModule) {
                    defaultType = clientAccess === 1 ? 1 : 2;
                } else {
                    defaultType = 1; // No para module
                }

                var table = $('#kt_datatable').DataTable({
                    language: {
                        url: "{{ asset('plugins/custom/datatables/i18n/French.json') }}",
                        emptyTable: "Aucun bon de livraison trouvé pour cette période"
                    },
                    processing: true,
                    serverSide: true,
                    ordering: true,
                    order: [[3, 'desc']], // Default sort by date column
                    ajax: {
                        url: "{{ route('movements.index') }}",
                        type: "GET",
                        data: function (d) {
                            var selectedType = $('#exampleFormControlSelect1').length
                                ? ($('#exampleFormControlSelect1').val() || defaultType)
                                : defaultType;
                            d.type = defaultType;
                            d.dataType = selectedType;
                  
                            d.date = $('#date_du').val(); // Pass the selected date to the server
                        },
                        error: function (xhr, error, thrown) {
                            // Show a clean error message to the user
                            if (xhr.responseJSON && xhr.responseJSON.error) {
                                // Custom error message from our API
                                Swal.fire({
                                    text: xhr.responseJSON.error,
                                    icon: "warning",
                                    buttonsStyling: false,
                                    confirmButtonText: "D'accord",
                                    customClass: {
                                        confirmButton: "btn font-weight-bold btn-light"
                                    }
                                });
                            } else {
                                // Generic error message
                                Swal.fire({
                                    text: "Une erreur s'est produite lors de la récupération des données.",
                                    icon: "warning",
                                    buttonsStyling: false,
                                    confirmButtonText: "D'accord",
                                    customClass: {
                                        confirmButton: "btn font-weight-bold btn-light"
                                    }
                                });
                            }
                            // Return empty data to prevent DataTables from retrying
                            $('#kt_datatable').DataTable().clear().draw();
                        }
                    },
                    columns: [
                        {
                            data: 'NFACT',
                            name: 'NFACT',
                            orderable: true
                        },
                        {
                            data: 'NUMBON',
                            name: 'NUMBON',
                            orderable: true
                        },
                        {
                            data: 'KNAT',
                            name: 'KNAT',
                            orderable: true
                        },
                        {
                            data: 'DATEMVT',
                            name: 'DATEMVT',
                            className: 'text-center',
                            orderable: true,
                            render: function(data, type, row) {
                                if (type === 'sort') {
                                    var parts = data.split(/[-\/]/);
                                    return parts[2] + '-' + parts[1] + '-' + parts[0];
                                }
                                return data;
                            }

                        },
                        {
                            data: 'BRUT_HT',
                            name: 'BRUT_HT',
                            className: 'text-right',
                            orderable: true,
                            render: function(data, type, row) {
                                if (type === 'sort') {
                                    // Remove thousand separators and convert comma to dot for sorting
                                    return parseFloat(data.replace(/\./g, '').replace(',', '.'));
                                }
                                return data;
                            }
                        },
                        {
                            data: 'REMISE',
                            name: 'REMISE',
                            className: 'text-right',
                            orderable: true,
                            render: function (data, type, row) {
                                if (type === 'sort') {
                                    return parseFloat(data.replace(/\./g, '').replace(',', '.'));
                                }
                                return (row.REMISE == '0,000') ? '' : row.REMISE;
                            }
                        },
                        {
                            data: 'NET_HT',
                            name: 'NET_HT',
                            className: 'text-right',
                            orderable: true,
                            render: function(data, type, row) {
                                if (type === 'sort') {
                                    return parseFloat(data.replace(/\./g, '').replace(',', '.'));
                                }
                                return data;
                            }
                        },
                        {
                            data: 'TOT_TVA',
                            name: 'TOT_TVA',
                            className: 'text-right',
                            orderable: true,
                            render: function (data, type, row) {
                                if (type === 'sort') {
                                    return parseFloat(data.replace(/\./g, '').replace(',', '.'));
                                }
                                return (row.TOT_TVA == '0,000') ? '' : row.TOT_TVA;
                            }
                        },
                        {
                            data: 'TOT_TTC',
                            name: 'TOT_TTC',
                            className: 'text-right',
                            orderable: true,
                            render: function(data, type, row) {
                                if (type === 'sort') {
                                    return parseFloat(data.replace(/\./g, '').replace(',', '.'));
                                }
                                return data;
                            }
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false,
                            className: 'text-center',
                            render: function (data, type, row) {
                                if (!{{ $paraModule ? 'true' : 'false' }}) {
                                    formType = 1;
                                } else {
                                    if ({{ $clientAccess ? 'true' : 'false' }}) {
                                        formType = 1;
                                    } else {
                                        formType = 2;
                                    }
                                }

                                var formType = $('#exampleFormControlSelect1').val() ?? formType;
                                var url = "{{ route('deliveryForm.show', ['form' => ':form', 'type' => ':dataType', 'date' => ':date']) }}";
                                url = url.replace(':form', row.NUMBON)
                                    .replace(':dataType', formType)
                                    .replace(':date', row.DATEMVT);

                                return '<a href="' + url + '" class="btn p-0"><i class="far fa-eye text-dynamic"></i></a>';
                            }
                        }

                    ],
                    drawCallback: function () {
                        renderDeliveriesList(table);
                    },
                    initComplete: function () {
                        renderDeliveriesList(table);
                    }
                });

                function deliveriesEscapeHtml(value) {
                    return String(value ?? '')
                        .replace(/&/g, '&amp;')
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;')
                        .replace(/"/g, '&quot;')
                        .replace(/'/g, '&#039;');
                }

                function deliveriesStripHtml(value) {
                    return $('<div>').html(value ?? '').text().trim();
                }

                function deliveriesCleanMoney(value) {
                    const text = deliveriesStripHtml(value);
                    return text && text !== '0,000' ? text : '—';
                }

                function deliveriesNatureClass(value) {
                    const text = String(value || '').toUpperCase();
                    if (text.includes('CREDIT') || text.includes('CRÉDIT')) return 'is-credit';
                    if (text.includes('COMPTANT') || text.includes('CASH')) return 'is-cash';
                    return 'is-other';
                }

                function deliveriesBuildAction(row) {
                    let resolvedFormType;

                    if (!paraModule) {
                        resolvedFormType = 1;
                    } else {
                        resolvedFormType = clientAccess === 1 ? 1 : 2;
                    }

                    resolvedFormType = $('#exampleFormControlSelect1').val() || resolvedFormType;

                    let url = "{{ route('deliveryForm.show', ['form' => ':form', 'type' => ':dataType', 'date' => ':date']) }}";
                    url = url.replace(':form', encodeURIComponent(row.NUMBON || ''))
                        .replace(':dataType', encodeURIComponent(resolvedFormType))
                        .replace(':date', encodeURIComponent(row.DATEMVT || ''));

                    return `<a href="${url}" class="deliveries-action-btn" title="Consulter"><i class="far fa-eye"></i></a>`;
                }

                function deliveriesPageButtons(info) {
                    if (!info || info.pages <= 1) {
                        return '';
                    }

                    const current = info.page;
                    const totalPages = info.pages;
                    const parts = [];

                    function pageButton(pageIndex, label, extraClass = '') {
                        const active = pageIndex === current ? ' active' : '';
                        return `<button type="button" class="deliveries-widget-page-btn${active} ${extraClass}" data-delivery-page="${pageIndex}">${label}</button>`;
                    }

                    parts.push(`<button type="button" class="deliveries-widget-page-btn" data-delivery-page="first" ${current === 0 ? 'disabled' : ''}>Premier</button>`);
                    parts.push(`<button type="button" class="deliveries-widget-page-btn" data-delivery-page="prev" ${current === 0 ? 'disabled' : ''}>Précédent</button>`);

                    const start = Math.max(0, current - 2);
                    const end = Math.min(totalPages - 1, current + 2);

                    if (start > 0) {
                        parts.push(pageButton(0, '1'));
                        if (start > 1) parts.push('<span class="deliveries-widget-page-dots">…</span>');
                    }

                    for (let i = start; i <= end; i++) {
                        parts.push(pageButton(i, String(i + 1)));
                    }

                    if (end < totalPages - 1) {
                        if (end < totalPages - 2) parts.push('<span class="deliveries-widget-page-dots">…</span>');
                        parts.push(pageButton(totalPages - 1, String(totalPages)));
                    }

                    parts.push(`<button type="button" class="deliveries-widget-page-btn" data-delivery-page="next" ${current >= totalPages - 1 ? 'disabled' : ''}>Suivant</button>`);
                    parts.push(`<button type="button" class="deliveries-widget-page-btn" data-delivery-page="last" ${current >= totalPages - 1 ? 'disabled' : ''}>Dernier</button>`);

                    return parts.join('');
                }

                function renderDeliveriesPagination(tableInstance) {
                    const info = tableInstance.page.info();
                    const from = info.recordsDisplay ? info.start + 1 : 0;
                    const to = info.end;
                    const text = `Affichage de ${from} à ${to} sur ${info.recordsDisplay} bons de livraison`;
                    const actions = deliveriesPageButtons(info);

                    const html = `
                        <div class="deliveries-widget-page-info">${text}</div>
                        <div class="deliveries-widget-page-actions">${actions}</div>
                    `;

                    $('#deliveriesPaginationTop, #deliveriesPaginationBottom')
                        .removeClass('is-empty')
                        .html(html);

                    if (!info.recordsDisplay) {
                        $('#deliveriesPaginationTop, #deliveriesPaginationBottom').addClass('is-empty');
                    }
                }

                function renderDeliveriesList(tableInstance) {
                    const data = tableInstance.rows({ page: 'current' }).data().toArray();
                    const $list = $('#deliveriesWidgetList');

                    if (!data.length) {
                        $list.html('<div class="deliveries-widget-empty">Aucun bon de livraison trouvé pour cette période.</div>');
                        renderDeliveriesPagination(tableInstance);
                        return;
                    }

                    const html = data.map(function (row) {
                        const nature = deliveriesStripHtml(row.KNAT || '—');
                        const natureClass = deliveriesNatureClass(nature);
                        const actionHtml = deliveriesBuildAction(row);

                        return `
                            <div class="deliveries-line-item">
                                <div class="deliveries-line-main">
                                    <span class="deliveries-line-icon"><i class="fas fa-truck-loading"></i></span>
                                    <div class="min-w-0">
                                        <h4 class="deliveries-line-title">BL N° ${deliveriesEscapeHtml(row.NUMBON || '—')}</h4>
                                        <div class="deliveries-line-sub">Facture : ${deliveriesEscapeHtml(row.NFACT || 'Non facturé')}</div>
                                    </div>
                                </div>

                                <div class="deliveries-line-cell">
                                    <span class="deliveries-line-label">Nature</span>
                                    <span class="deliveries-status-badge ${natureClass}">${deliveriesEscapeHtml(nature)}</span>
                                </div>

                                <div class="deliveries-line-cell">
                                    <span class="deliveries-line-label">Date</span>
                                    <span class="deliveries-line-value">${deliveriesEscapeHtml(row.DATEMVT || '—')}</span>
                                </div>

                                <div class="deliveries-line-cell deliveries-line-money is-optional">
                                    <span class="deliveries-line-label">Brut HT</span>
                                    <span class="deliveries-line-value">${deliveriesEscapeHtml(deliveriesCleanMoney(row.BRUT_HT))}</span>
                                </div>

                                <div class="deliveries-line-cell deliveries-line-money is-optional">
                                    <span class="deliveries-line-label">Remise</span>
                                    <span class="deliveries-line-value">${deliveriesEscapeHtml(deliveriesCleanMoney(row.REMISE))}</span>
                                </div>

                                <div class="deliveries-line-cell deliveries-line-money">
                                    <span class="deliveries-line-label">Total HT</span>
                                    <span class="deliveries-line-value">${deliveriesEscapeHtml(deliveriesCleanMoney(row.NET_HT))}</span>
                                </div>

                                <div class="deliveries-line-cell deliveries-line-money">
                                    <span class="deliveries-line-label">Total TTC</span>
                                    <span class="deliveries-line-value">${deliveriesEscapeHtml(deliveriesCleanMoney(row.TOT_TTC))}</span>
                                </div>

                                <div class="deliveries-line-actions">
                                    ${actionHtml}
                                </div>
                            </div>
                        `;
                    }).join('');

                    $list.html(html);
                    renderDeliveriesPagination(tableInstance);
                }

                $(document).on('click', '[data-delivery-page]', function () {
                    const target = $(this).data('delivery-page');
                    const info = table.page.info();

                    if (target === 'first') table.page(0).draw('page');
                    else if (target === 'prev') table.page(Math.max(info.page - 1, 0)).draw('page');
                    else if (target === 'next') table.page(Math.min(info.page + 1, info.pages - 1)).draw('page');
                    else if (target === 'last') table.page(info.pages - 1).draw('page');
                    else table.page(parseInt(target, 10)).draw('page');
                });

                $('#exampleFormControlSelect1').on('change', function () {
                    var selectedType = $(this).val();
                    defaultType = selectedType;
                    table.ajax.reload();
                });

                $(document).on('click', '#loadDeliveriesButton', function () {
                    const dateValue = document.getElementById('date_du').value;
                    if(dateValue === ''){
                        Swal.fire({
                            text: "Vous devez choisir une date pour récupérer les informations à partir de cette date. Sinon, les informations affichées par défaut correspondent aux 3 derniers mois.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "ok",
                            customClass: {
                                confirmButton: "btn font-weight-bold btn-light"
                            }
                        }).then(function () {
                            KTUtil.scrollTop();
                        });

                    }else{
                        table.ajax.reload();

                    }
                });

            });


        </script>
    </x-slot>
</x-main>