@php use Carbon\Carbon; @endphp
<x-main>
    <x-slot name="title">Avoirs sur BL</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.20fr)
                    minmax(118px, .52fr)
                    minmax(112px, .48fr)
                    minmax(108px, .46fr)
                    minmax(108px, .46fr)
                    minmax(108px, .46fr)
                    minmax(108px, .46fr)
                    minmax(118px, .52fr)
                    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-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.20fr)
                        minmax(118px, .52fr)
                        minmax(112px, .48fr)
                        minmax(108px, .46fr)
                        minmax(108px, .46fr)
                        minmax(118px, .52fr)
                        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">Avoirs sur BL</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-undo-alt"></i>
                            Suivi des avoirs
                        </div>
                        <h2 class="app-hero-title">Liste des avoirs sur BL</h2>
                        <p class="app-hero-subtitle">
                            Consultez vos avoirs sur bons de livraison 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 avoir
                    </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 Avoirs sur BL</h3>
                    </div>
                </div>

                <div class="card-body">
                    <form class="mb-15" action="{{ route('creditNotes.index') }}" method="GET">
                        @php
                            $defaultDate = Carbon::now()->subMonths(3)->format('Y-m-d');
                            $configValue = \App\Models\Configuration::query()
                                ->where('label', 'Configuration modules')
                                ->first();
                            $decodedConfig = json_decode($configValue?->value ?? '{}', true);
                            $paraModule = (bool) ($decodedConfig['para'] ?? false);
                            $onlyPara = (bool) ($decodedConfig['onlypara'] ?? false);
                            $clientAccess = (int) (auth()->user()->client->all_products ?? 0);
                        @endphp

                        @if ($paraModule)
                            @if ($clientAccess)
                                <div class="row align-items-center g-3">
                                    <div class="col-lg-4 col-md-6 col-sm-12">
                                        <label for="exampleFormControlSelect1">Type des Avoirs/BL</label>
                                        <select class="form-control" id="exampleFormControlSelect1">
                                            <option value="1">Avoir/BL Médicaments</option>
                                            <option value="2">Avoir/BL Para</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-4 col-md-6 col-sm-12">
                                        <label for="date_du">À partir de la date suivante :</label>
                                        <input type="date" name="date" id="date_du" value="{{ $defaultDate }}" class="form-control">
                                    </div>

                                    <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="loadCreditNotesBtn" class="btn btn-primary w-100 w-lg-auto">
                                            <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>
                                <tr class="fw-bolder text-muted bg-light">
                                    <th>N° Facture</th>
                                    <th class="text-center">N°Bon</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 class="text-center">N°Bon</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>
                                </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 () {
                const paraModule = {{ Js::from($paraModule) }};
                const onlyPara = {{ Js::from($onlyPara) }};
                const clientAccess = {{ Js::from($clientAccess) }};

                let defaultType = 1;

                if (paraModule && onlyPara) {
                    defaultType = 2;
                } else if (paraModule) {
                    defaultType = clientAccess === 1 ? 1 : 2;
                } else {
                    defaultType = 1;
                }

                let type = $('#exampleFormControlSelect1').val();

                var table = $('#kt_datatable').DataTable({
                    language: {
                        url: "{{ asset('plugins/custom/datatables/i18n/French.json') }}"
                    },
                    processing: true,
                    serverSide: true,
                    ordering: true,
                    order: [[1, 'desc']],
                    ajax: {
                        url: "{{ route('creditNotes.index') }}",
                        type: "GET",
                        data: function (d) {
                            d.type = defaultType;
                            d.dataType = type;
                            d.date = $('#date_du').val();
                        }
                    },
                    columns: [
                        {data: 'NFACT', name: 'NFACT', orderable: true},
                        {data: 'NUMBON', name: 'NUMBON'},
                        {data: 'DATEMVT', name: 'DATEMVT', className: 'text-center'},
                        {data: 'BRUT_HT', name: 'BRUT_HT', className: 'text-right'},
                        {
                            data: 'REMISE',
                            name: 'REMISE',
                            className: 'text-right',
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    return (row.REMISE == '0,000') ? '' : row.REMISE;
                                }
                                return data;
                            }
                        },
                        {data: 'NET_HT', name: 'NET_HT', className: 'text-right'},
                        {
                            data: 'TOT_TVA',
                            name: 'TOT_TVA',
                            className: 'text-right',
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    return (row.TOT_TVA == '0,000') ? '' : row.TOT_TVA;
                                }
                                return data;
                            }
                        },
                        {data: 'TOT_TTC', name: 'TOT_TTC', className: 'text-right'},
                        {data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center'}
                    ]
                });

                window.creditNotesDataTable = 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 normalizeAction(actionHtml) {
                    if (!actionHtml) return '';
                    const wrapper = document.createElement('div');
                    wrapper.innerHTML = String(actionHtml);
                    wrapper.querySelectorAll('a, button').forEach(function (el) {
                        el.classList.add('bills-action-btn');
                    });
                    return wrapper.innerHTML;
                }

                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} avoir(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 renderCreditNotesWidgets() {
                    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">Aucun avoir à afficher.</div>';
                        return;
                    }

                    container.innerHTML = rows.map(function (row) {
                        const nfact = billsStripHtml(row.NFACT ?? '—') || '—';
                        const numbon = billsStripHtml(row.NUMBON ?? '—') || '—';
                        const date = billsFormatDate(row.DATEMVT);
                        const brut = billsFormatMoney(row.BRUT_HT) + ' DT';
                        const remise = row.REMISE === '0,000' ? '—' : billsFormatMoney(row.REMISE) + ' DT';
                        const ht = billsFormatMoney(row.NET_HT) + ' DT';
                        const tva = row.TOT_TVA === '0,000' ? '—' : billsFormatMoney(row.TOT_TVA) + ' DT';
                        const ttc = billsFormatMoney(row.TOT_TTC) + ' DT';
                        const action = normalizeAction(row.action);

                        return `
                            <article class="bills-line-item">
                                <div class="bills-line-main">
                                    <span class="bills-line-icon"><i class="fas fa-undo-alt"></i></span>
                                    <div class="bills-line-main-text">
                                        <h4 class="bills-line-title">Avoir #${billsEscapeHtml(nfact)}</h4>
                                        <div class="bills-line-sub">Bon de livraison : ${billsEscapeHtml(numbon)} • ${billsEscapeHtml(date)}</div>
                                    </div>
                                </div>

                                <div class="bills-line-cell">
                                    <span class="bills-line-label">Type</span>
                                    <span class="bills-status-badge is-credit-note">Avoir BL</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">
                                    <span class="bills-line-label">Total TTC</span>
                                    <span class="bills-line-value bills-line-money">${billsEscapeHtml(ttc)}</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', renderCreditNotesWidgets);
                renderCreditNotesWidgets();

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

                $(document).on('click', '#loadCreditNotesBtn', 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>