@php use Carbon\Carbon; @endphp
<x-main>
    <x-slot name="title">
        Factures
    </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 {
                --bills-primary: var(--theme-primary);
                --bills-primary-dark: var(--theme-primary-dark);
                --bills-primary-soft: var(--theme-primary-soft);
                --bills-mint: #e9f8f2;
                --bills-bg: #f5f8fb;
                --bills-surface: #ffffff;
                --bills-border: #dfe8f0;
                --bills-text: #102033;
                --bills-muted: #6b7c8f;
                --bills-green: #16a34a;
                --bills-green-soft: #ecfdf5;
                --bills-red: #dc2626;
                --bills-red-soft: #fef2f2;
                --bills-yellow: #d97706;
                --bills-yellow-soft: #fffbeb;
                --bills-shadow: 0 16px 38px rgba(15, 35, 52, .08);
            }

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

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

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

            .orders-card > .card-header {
                min-height: auto !important;
                padding: 18px 22px !important;
                border-bottom: 1px solid var(--bills-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(--bills-primary-soft);
                color: var(--bills-primary);
            }

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

            .orders-card .card-label {
                color: var(--bills-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(--bills-border);
                border-radius: 22px;
                background: #ffffff;
                box-shadow: 0 8px 18px rgba(15, 35, 52, .035);
            }

            .orders-card form label {
                display: block;
                color: var(--bills-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(--bills-border) !important;
                background: #f8fbfd !important;
                color: var(--bills-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(--bills-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;
            }

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

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

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

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

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

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

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

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

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

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

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

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

            .bills-line-item {
                width: 100%;
                min-height: 66px;
                display: grid;
                grid-template-columns:
                    minmax(220px, 1.15fr)
                    minmax(112px, .50fr)
                    minmax(104px, .48fr)
                    minmax(104px, .48fr)
                    minmax(104px, .48fr)
                    minmax(104px, .48fr)
                    minmax(98px, .42fr)
                    minmax(118px, .52fr)
                    minmax(88px, .34fr)
                    minmax(72px, .26fr);
                gap: 10px;
                align-items: center;
                padding: 9px 12px;
                border-radius: 18px;
                border: 1px solid var(--bills-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;
            }

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

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

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

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

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

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

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

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

            .bills-line-money {
                font-variant-numeric: tabular-nums;
                text-align: left;
            }

            .bills-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;
            }

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

            .bills-status-badge.is-credit-note {
                color: var(--bills-red);
                background: var(--bills-red-soft);
                border-color: #fecaca;
            }

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

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

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

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

            @media (max-width: 1450px) {
                .bills-line-item {
                    grid-template-columns:
                        minmax(220px, 1.15fr)
                        minmax(104px, .48fr)
                        minmax(104px, .48fr)
                        minmax(104px, .48fr)
                        minmax(118px, .52fr)
                        minmax(88px, .34fr)
                        minmax(72px, .26fr);
                }

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

            @media (max-width: 1100px) {
                .bills-line-item {
                    grid-template-columns: 1fr 1fr 1fr;
                }

                .bills-line-main,
                .bills-line-actions {
                    grid-column: 1 / -1;
                }

                .bills-line-actions {
                    justify-content: flex-start;
                }
            }

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

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

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

            @media (max-width: 650px) {
                .app-hero {
                    padding: 22px;
                    border-radius: 22px;
                }

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

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

                .bills-line-money {
                    text-align: left;
                }
            }
        </style>
    </x-slot>


    <x-slot name="subHeaderTitle">
        Factures
    </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-file-invoice"></i>
                            Suivi des factures
                        </div>
                        <h2 class="app-hero-title">Liste des factures</h2>
                        <p class="app-hero-subtitle">
                            Consultez vos factures par type et période, puis accédez rapidement au détail.
                        </p>
                    </div>
                    <div class="app-hero-chip">
                        <i class="fas fa-list"></i>
                        Une ligne par facture
                    </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 Factures</h3>
                    </div>
                </div>
                <div class="card-body">
                <form class="mb-15" action="{{ route('bills.index') }}" METHOD="GET">
                    @php
                        $defaultDate = Carbon::now()->subMonths(3)->format('Y-m-d'); // Default: 3 months ago

    $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 factures</label>
                                    <select class="form-control" id="exampleFormControlSelect1">
                                        <option value="1">Factures Médicaments</option>
                                        <option value="2">Factures 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" class="btn btn-primary 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
                    <br>
                    <div class="orders-table-shell">
                        <div id="billsPaginationTop" class="bills-widget-pagination is-empty"></div>
                        <div id="billsWidgetList" class="bills-widget-list"></div>
                        <table class="table align-middle" id="kt_datatable" style="margin-top: 13px !important;width: 100%">
                            <thead class="">
                            <tr class="fw-bolder text-muted bg-dynamic text-white">
                                <th class="text-center text-white">N° Facture</th>
                                <th class="text-center text-white">Date Facturation</th>
                                <th class="text-center text-white">Total Brut</th>
                                <th class="text-center text-white">Total Remise</th>
                                <th class="text-center text-white">Total HT</th>
                                <th class="text-center text-white">Total TVA</th>
                                <th class="text-center text-white">Timbre</th>
                                <th class="text-center text-white">Total TTC</th>
                                <th class="text-center text-white">RS</th>
                                <th class="text-center text-white">Action</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                            <tfoot>
                            <tr class="fw-bolder text-muted bg-dynamic">
                                <th class="text-center text-white">N° Facture</th>
                                <th class="text-center text-white">Date Facturation</th>
                                <th class="text-center text-white">Total Brut</th>
                                <th class="text-center text-white">Total Remise</th>
                                <th class="text-center text-white">Total HT</th>
                                <th class="text-center text-white">Total TVA</th>
                                <th class="text-center text-white">Timbre</th>
                                <th class="text-center text-white">Total TTC</th>
                                <th class="text-center text-white">RS</th>
                                <th class="text-center text-white">Action</th>
                            </tr>
                            </tfoot>
                        </table>
                        <div id="billsPaginationBottom" class="bills-widget-pagination is-empty is-bottom"></div>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </x-slot>

    <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>
            $(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') }}",
                    },
                    processing: true,
                    serverSide: true,
                    draw: 2,
                    start: 10,
                    length: 10,
                    order: [],
                    ajax: {
                        url: "{{ route('bills.index') }}",
                        type: "GET",
                        data: function (d) {
                            d.type = defaultType;  // Add type to the request payload
                            d.date = $('#date_du').val(); // Pass the selected date to the server

                        }
                    },
                    columns: [
                        {
                            data: 'n0_fact',
                            name: 'n0_fact',
                            render: function (data, type, row) {
                                // Check if 'n0_fact' starts with 'CR'
                                if (data.startsWith('AR')) {
                                    // Apply a specific style to make text closer together
                                    return '<h5 class="text-danger">' + data + '</h5>';
                                }
                                return data;
                            }
                        },
                        {data: 'DATE_FACT', name: 'DATE_FACT', className: 'text-center'},
                        {data: 'MONTHTBRUT', name: 'MONTHTBRUT', className: 'text-right'},
                        {data: 'montremise', name: 'montremise', className: 'text-right'},
                        {data: 'montht', name: 'montht', className: 'text-right'},
                        {
                            data: 'monttva', name: 'monttva', className: 'text-right',
                            render: function (data, type, row) {
                                return (row.monttva == '0,000') ? '' : row.monttva;
                            }
                        },
                        {data: 'timbre', name: 'timbre', className: 'text-right'},
                        {data: 'monttc', name: 'monttc', className: 'text-right'},
                        {data: 'RETS', name: 'RETS', className: 'text-right'},
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false,
                            searchable: false,
                            className: 'text-center',
                            render: function (data, type, row) {
                                var defaultType;
                                if (!{{ $paraModule ? 'true' : 'false' }}) {
                                    defaultType = 1;
                                } else {
                                    if ({{ $clientAccess ? 'true' : 'false' }}) {
                                        defaultType = 1;
                                    } else {
                                        defaultType = 2;
                                    }
                                }
                                var formType = $('#exampleFormControlSelect1').val() ?? defaultType;
                                var url = "{{ route('bill.show', [
        'bill' => ':n0_fact',
        'type' => ':dataType',
        'date' => ':date',
        'brut' => ':MONTHTBRUT',
        'remise' => ':montremise',
        'ht' => ':montht',
        'tva' => ':monttva',
        'timbre' => ':timbre',
        'ttc' => ':monttc',
        'nature' => ':NATURE',
        'rets' => ':RETS',
    ]) }}";
                                // alert(formType)
                                url = url.replace(':n0_fact', encodeURIComponent(row.n0_fact ?? ''))
                                    .replace(':dataType', encodeURIComponent(formType ?? ''))
                                    .replace(':date', encodeURIComponent(row.DATE_FACT ?? ''))
                                    .replace(':MONTHTBRUT', encodeURIComponent(row.MONTHTBRUT ?? ''))
                                    .replace(':montremise', encodeURIComponent(row.montremise ?? ''))
                                    .replace(':montht', encodeURIComponent(row.montht ?? ''))
                                    .replace(':monttva', encodeURIComponent(row.monttva ?? ''))
                                    .replace(':timbre', encodeURIComponent(row.timbre ?? ''))
                                    .replace(':monttc', encodeURIComponent(row.monttc ?? ''))
                                    .replace(':NATURE', encodeURIComponent(row.NATURE ?? ''))
                                    .replace(':RETS', encodeURIComponent(row.RETS ?? ''));

                                // Removed btn-block class and made it more compact
                                return '<a href="' + url + '" class="btn p-0"><i class="far fa-eye" style="color: {{$backgroundColor}}"></i></a>';
                            }
                        }
                    ]
                });

                window.billsDataTable = table;

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

                function billsStripHtml(value) {
                    const div = document.createElement('div');
                    div.innerHTML = String(value ?? '');
                    return (div.textContent || div.innerText || '').trim();
                }

                function billsFormatMoney(value) {
                    if (value === null || value === undefined || value === '') return '0.000';
                    const raw = String(value).trim();
                    if (raw === '') return '0.000';
                    const normalized = raw.replace(/\s/g, '').replace(',', '.');
                    const number = parseFloat(normalized);
                    if (isNaN(number)) return raw;
                    return number.toLocaleString('fr-FR', {
                        minimumFractionDigits: 3,
                        maximumFractionDigits: 3
                    });
                }

                function billsFormatDate(value) {
                    if (!value) return '—';
                    const raw = String(value);
                    const date = new Date(raw);
                    if (isNaN(date.getTime())) return raw;
                    const day = String(date.getDate()).padStart(2, '0');
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const year = date.getFullYear();
                    return `${day}/${month}/${year}`;
                }

                function buildBillAction(row) {
                    var localDefaultType;
                    if (!{{ $paraModule ? 'true' : 'false' }}) {
                        localDefaultType = 1;
                    } else {
                        if ({{ $clientAccess ? 'true' : 'false' }}) {
                            localDefaultType = 1;
                        } else {
                            localDefaultType = 2;
                        }
                    }

                    var formType = $('#exampleFormControlSelect1').val() ?? localDefaultType;
                    var url = "{{ route('bill.show', [
        'bill' => ':n0_fact',
        'type' => ':dataType',
        'date' => ':date',
        'brut' => ':MONTHTBRUT',
        'remise' => ':montremise',
        'ht' => ':montht',
        'tva' => ':monttva',
        'timbre' => ':timbre',
        'ttc' => ':monttc',
        'nature' => ':NATURE',
        'rets' => ':RETS',
    ]) }}";

                    url = url.replace(':n0_fact', encodeURIComponent(row.n0_fact ?? ''))
                        .replace(':dataType', encodeURIComponent(formType ?? ''))
                        .replace(':date', encodeURIComponent(row.DATE_FACT ?? ''))
                        .replace(':MONTHTBRUT', encodeURIComponent(row.MONTHTBRUT ?? ''))
                        .replace(':montremise', encodeURIComponent(row.montremise ?? ''))
                        .replace(':montht', encodeURIComponent(row.montht ?? ''))
                        .replace(':monttva', encodeURIComponent(row.monttva ?? ''))
                        .replace(':timbre', encodeURIComponent(row.timbre ?? ''))
                        .replace(':monttc', encodeURIComponent(row.monttc ?? ''))
                        .replace(':NATURE', encodeURIComponent(row.NATURE ?? ''))
                        .replace(':RETS', encodeURIComponent(row.RETS ?? ''));

                    return '<a href="' + url + '" class="bills-action-btn" title="Voir la facture"><i class="far fa-eye"></i></a>';
                }

                function billsBuildPageNumbers(info) {
                    const pages = [];
                    const totalPages = info.pages || 0;
                    const current = info.page || 0;

                    if (totalPages <= 7) {
                        for (let i = 0; i < totalPages; i++) pages.push(i);
                        return pages;
                    }

                    pages.push(0);

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

                    if (start > 1) pages.push('dots-start');
                    for (let i = start; i <= end; i++) pages.push(i);
                    if (end < totalPages - 2) pages.push('dots-end');

                    pages.push(totalPages - 1);
                    return pages;
                }

                function renderBillsPagination(target, info) {
                    if (!target) return;

                    const total = info.recordsDisplay || 0;
                    const totalPages = info.pages || 0;
                    const currentPage = info.page || 0;
                    const start = total > 0 ? info.start + 1 : 0;
                    const end = info.end || 0;

                    if (!totalPages || total === 0) {
                        target.classList.add('is-empty');
                        target.innerHTML = '';
                        return;
                    }

                    target.classList.remove('is-empty');

                    const pageButtons = billsBuildPageNumbers(info).map(function (page) {
                        if (typeof page === 'string') {
                            return '<span class="bills-widget-page-dots">…</span>';
                        }

                        return `
                            <button type="button"
                                    class="bills-widget-page-btn ${page === currentPage ? 'active' : ''}"
                                    data-bills-page="${page}"
                                    ${page === currentPage ? 'disabled' : ''}>
                                ${page + 1}
                            </button>
                        `;
                    }).join('');

                    target.innerHTML = `
                        <div class="bills-widget-page-info">
                            Affichage de l’élément ${start} à ${end} sur ${total} facture(s)
                        </div>
                        <div class="bills-widget-page-actions">
                            <button type="button" class="bills-widget-page-btn" data-bills-page="first" ${currentPage === 0 ? 'disabled' : ''}>Premier</button>
                            <button type="button" class="bills-widget-page-btn" data-bills-page="prev" ${currentPage === 0 ? 'disabled' : ''}>Précédent</button>
                            ${pageButtons}
                            <button type="button" class="bills-widget-page-btn" data-bills-page="next" ${currentPage >= totalPages - 1 ? 'disabled' : ''}>Suivant</button>
                            <button type="button" class="bills-widget-page-btn" data-bills-page="last" ${currentPage >= totalPages - 1 ? 'disabled' : ''}>Dernier</button>
                        </div>
                    `;
                }

                function updateBillsPaginations() {
                    const info = table.page.info();
                    renderBillsPagination(document.getElementById('billsPaginationTop'), info);
                    renderBillsPagination(document.getElementById('billsPaginationBottom'), info);
                }

                function renderBillsWidgets() {
                    const container = document.getElementById('billsWidgetList');
                    if (!container) return;

                    const rows = table.rows({ page: 'current' }).data().toArray();
                    updateBillsPaginations();

                    if (!rows.length) {
                        container.innerHTML = '<div class="bills-widget-empty">Aucune facture à afficher.</div>';
                        return;
                    }

                    container.innerHTML = rows.map(function (row) {
                        const numberRaw = row.n0_fact ?? '—';
                        const numberText = billsStripHtml(numberRaw) || '—';
                        const isCreditNote = String(numberText).trim().toUpperCase().startsWith('AR');
                        const badgeClass = isCreditNote ? 'is-credit-note' : 'is-invoice';
                        const badgeText = isCreditNote ? 'Avoir' : 'Facture';
                        const action = buildBillAction(row);
                        const date = billsFormatDate(row.DATE_FACT);
                        const brut = billsFormatMoney(row.MONTHTBRUT) + ' DT';
                        const remise = billsFormatMoney(row.montremise) + ' DT';
                        const ht = billsFormatMoney(row.montht) + ' DT';
                        const tva = row.monttva === '0,000' ? '—' : billsFormatMoney(row.monttva) + ' DT';
                        const timbre = billsFormatMoney(row.timbre) + ' DT';
                        const ttc = billsFormatMoney(row.monttc) + ' DT';
                        const rets = billsFormatMoney(row.RETS) + ' DT';

                        return `
                            <article class="bills-line-item">
                                <div class="bills-line-main">
                                    <span class="bills-line-icon"><i class="fas fa-file-invoice"></i></span>
                                    <div class="bills-line-main-text">
                                        <h4 class="bills-line-title">Facture #${billsEscapeHtml(numberText)}</h4>
                                        <div class="bills-line-sub">Date facturation : ${billsEscapeHtml(date)}</div>
                                    </div>
                                </div>

                                <div class="bills-line-cell">
                                    <span class="bills-line-label">Type</span>
                                    <span class="bills-status-badge ${badgeClass}">${badgeText}</span>
                                </div>

                                <div class="bills-line-cell is-optional-md">
                                    <span class="bills-line-label">Brut</span>
                                    <span class="bills-line-value bills-line-money">${billsEscapeHtml(brut)}</span>
                                </div>

                                <div class="bills-line-cell is-optional-md">
                                    <span class="bills-line-label">Remise</span>
                                    <span class="bills-line-value bills-line-money">${billsEscapeHtml(remise)}</span>
                                </div>

                                <div class="bills-line-cell">
                                    <span class="bills-line-label">Total HT</span>
                                    <span class="bills-line-value bills-line-money">${billsEscapeHtml(ht)}</span>
                                </div>

                                <div class="bills-line-cell is-optional-md">
                                    <span class="bills-line-label">TVA</span>
                                    <span class="bills-line-value bills-line-money">${billsEscapeHtml(tva)}</span>
                                </div>

                                <div class="bills-line-cell is-optional-md">
                                    <span class="bills-line-label">Timbre</span>
                                    <span class="bills-line-value bills-line-money">${billsEscapeHtml(timbre)}</span>
                                </div>

                                <div class="bills-line-cell">
                                    <span class="bills-line-label">Total TTC</span>
                                    <span class="bills-line-value bills-line-money">${billsEscapeHtml(ttc)}</span>
                                </div>

                                <div class="bills-line-cell is-optional-md">
                                    <span class="bills-line-label">RS</span>
                                    <span class="bills-line-value bills-line-money">${billsEscapeHtml(rets)}</span>
                                </div>

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

                document.addEventListener('click', function (event) {
                    const btn = event.target.closest('[data-bills-page]');
                    if (!btn || btn.disabled) return;

                    const info = table.page.info();
                    const target = btn.getAttribute('data-bills-page');

                    if (target === 'first') {
                        table.page('first').draw('page');
                    } else if (target === 'prev') {
                        table.page('previous').draw('page');
                    } else if (target === 'next') {
                        table.page('next').draw('page');
                    } else if (target === 'last') {
                        table.page(info.pages - 1).draw('page');
                    } else {
                        const pageIndex = parseInt(target, 10);
                        if (!isNaN(pageIndex)) {
                            table.page(pageIndex).draw('page');
                        }
                    }
                });

                table.on('draw', renderBillsWidgets);
                renderBillsWidgets();

                $('#exampleFormControlSelect1').on('change', function () {
                    var selectedType = $(this).val();
                    defaultType = selectedType;
                    table.ajax.reload();
                });
                $(document).on('click', '.btn-primary', 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>