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

    $headerTextColor = $colortext && $colortext->value ? $colortext->value : '#ffffff';
    $companyLabel = $CompanyName && $CompanyName->value ? $CompanyName->value : config('app.name', 'Medika');
    $clientLabel = !empty(Auth::user()->nom_fournisseur_medicament)
        ? Auth::user()->nom_fournisseur_medicament
        : Auth::user()->nom_fournisseur_para;
@endphp

<style>
    :root {
        --app-header-primary: var(--theme-primary);
        --app-header-primary-dark: var(--theme-primary-dark);
        --app-header-blue-dark: var(--theme-primary-dark);
        --app-header-blue: var(--theme-primary);
        --app-header-blue-2: var(--theme-primary-light);
        --app-header-mint: var(--theme-primary-light);
        --app-header-soft: var(--theme-primary-soft);
        --app-header-mint-soft: var(--theme-primary-soft);
        --app-header-surface: rgba(255, 255, 255, 0.92);
        --app-header-border: #dfe5ee;
        --app-header-text: #172033;
        --app-header-muted: #697386;
        --app-header-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
        --app-header-danger: #d94141;
        --app-header-accent-soft: rgba(var(--theme-primary-rgb), 0.16);
        --app-header-accent-strong: rgba(var(--theme-primary-rgb), 0.28);
    }

    #kt_header.app-modern-header {
        background:
            radial-gradient(circle at top left, rgba(var(--theme-primary-rgb), 0.08), transparent 24rem),
            radial-gradient(circle at top right, rgba(var(--theme-primary-rgb), 0.05), transparent 20rem),
            rgba(250, 252, 255, 0.96) !important;
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(223, 229, 238, 0.86);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
        min-height: 76px;
        height: auto;
        display: flex;
        align-items: center;
        padding: 10px 18px;
        z-index: 95;
    }

    .app-header-inner {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .app-header-brand {
        display: flex;
        align-items: center;
        gap: 13px;
        min-width: 0;
        margin-left: 10px !important;
    }

    .app-header-mark {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--app-header-blue-dark), var(--app-header-blue));
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 900;
        font-size: 18px;
        box-shadow: 0 10px 22px rgba(var(--theme-primary-rgb), 0.18);
        flex: 0 0 auto;
    }

    .app-header-brand-text {
        min-width: 0;
    }

    .app-header-company {
        margin: 0;
        color: var(--app-header-primary-dark);
        font-size: 18px;
        line-height: 1.15;
        font-weight: 900;
        letter-spacing: -0.03em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 360px;
    }

    .app-header-client {
        margin: 4px 0 0;
        color: var(--app-header-muted);
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 440px;
    }

    .app-header-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        min-width: 0;
    }

    .app-header-pill {
        border: 1px solid var(--app-header-border);
        background: var(--app-header-surface);
        color: var(--app-header-text);
        border-radius: 999px;
        min-height: 44px;
        padding: 10px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
        font-weight: 800;
        text-decoration: none !important;
    }

    .app-header-pill:hover {
        transform: translateY(-1px);
        border-color: var(--app-header-accent-strong);
        background: rgba(var(--theme-primary-rgb), 0.06);
        box-shadow: 0 10px 24px rgba(var(--theme-primary-rgb), 0.14);
        color: var(--app-header-text);
    }

    .app-header-cart-btn {
        border: 1px solid var(--app-header-accent-strong);
        background: var(--app-header-accent-soft);
        color: var(--app-header-primary-dark);
        border-radius: 999px;
        min-height: 46px;
        padding: 11px 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-weight: 900;
        box-shadow: 0 10px 22px rgba(var(--theme-primary-rgb), 0.12);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .app-header-cart-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 26px rgba(var(--theme-primary-rgb), 0.16);
        background: rgba(var(--theme-primary-rgb), 0.22);
        color: var(--app-header-primary-dark);
    }

    .app-header-cart-count {
        min-width: 24px;
        height: 24px;
        padding: 0 7px;
        border-radius: 999px;
        background: #ffcf5a;
        color: #2c2100;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 950;
    }

    .app-header-user-btn {
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid var(--app-header-border) !important;
        border-radius: 999px !important;
        min-height: 46px;
        padding: 6px 8px 6px 14px !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }

    .app-header-user-btn:hover {
        border-color: var(--app-header-accent-strong) !important;
        background: rgba(var(--theme-primary-rgb), 0.06) !important;
    }

    .app-header-user-btn .symbol img {
        border: 2px solid #fff;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    }

    .global-cart-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.32);
        backdrop-filter: blur(4px);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

    .global-cart-backdrop.open {
        opacity: 1;
        visibility: visible;
    }

    .global-cart-drawer {
        position: fixed;
        top: 0;
        right: -470px;
        width: 450px;
        max-width: 94vw;
        height: 100vh;
        background: #fff;
        z-index: 1050;
        box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
        transition: right .28s ease;
        display: flex;
        flex-direction: column;
    }

    .global-cart-drawer.open {
        right: 0;
    }

    .global-cart-header {
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--app-header-border);
        background:
            radial-gradient(circle at top left, rgba(var(--theme-primary-rgb), 0.11), transparent 18rem),
            #fbfdff;
    }

    .global-cart-header h3 {
        margin: 0;
        color: var(--app-header-text);
        font-size: 20px;
        font-weight: 900;
        letter-spacing: -0.03em;
    }

    .global-cart-header p {
        margin: 4px 0 0;
        color: var(--app-header-muted);
        font-size: 13px;
        font-weight: 700;
    }

    .global-cart-close {
        width: 38px;
        height: 38px;
        border: 1px solid var(--app-header-border);
        background: #fff;
        border-radius: 50%;
        color: var(--app-header-text);
        font-size: 20px;
        line-height: 1;
        display: grid;
        place-items: center;
    }

    .global-cart-body {
        padding: 18px;
        overflow-y: auto;
        flex: 1;
        background: #fff;
    }

    .global-cart-empty {
        min-height: 260px;
        display: grid;
        place-items: center;
        text-align: center;
        color: var(--app-header-muted);
        border: 1px dashed #cbd5e1;
        border-radius: 22px;
        padding: 24px;
        background: #fbfdff;
    }

    .global-cart-empty strong {
        display: block;
        color: var(--app-header-text);
        font-size: 17px;
        margin-bottom: 6px;
    }

    .global-cart-item {
        border: 1px solid var(--app-header-border);
        background: #f9fafc;
        border-radius: 18px;
        padding: 14px;
        margin-bottom: 10px;
    }

    .global-cart-item-top {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    .global-cart-item-title {
        font-weight: 900;
        color: var(--app-header-text);
        line-height: 1.35;
        font-size: 14px;
    }

    .global-cart-item-sub {
        color: var(--app-header-muted);
        font-size: 12px;
        font-weight: 700;
        margin-top: 4px;
    }

    .global-cart-item-price {
        font-weight: 950;
        color: var(--app-header-primary-dark);
        white-space: nowrap;
    }

    .global-cart-controls {
        display: grid;
        grid-template-columns: 40px 1fr 40px 42px;
        gap: 8px;
        align-items: center;
    }

    .global-cart-control-btn,
    .global-cart-remove-btn {
        height: 38px;
        border-radius: 12px;
        border: 1px solid var(--app-header-border);
        background: #fff;
        color: var(--app-header-text);
        font-weight: 950;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .global-cart-remove-btn {
        color: var(--app-header-danger);
        background: #fff5f5;
        border-color: #ffd1d1;
    }

    .global-cart-qty {
        height: 38px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid var(--app-header-border);
        display: grid;
        place-items: center;
        font-weight: 900;
        color: var(--app-header-text);
    }

    .global-cart-footer {
        border-top: 1px solid var(--app-header-border);
        background: #fff;
        padding: 18px;
    }

    .global-cart-total-row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
        color: var(--app-header-muted);
        font-size: 14px;
        font-weight: 800;
    }

    .global-cart-total-row.grand-total {
        color: var(--app-header-text);
        font-weight: 950;
        font-size: 20px;
        padding-top: 10px;
        margin-top: 12px;
        border-top: 1px solid var(--app-header-border);
    }

    .global-cart-checkout-btn {
        margin-top: 14px;
        width: 100%;
        min-height: 52px;
        border: none;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--app-header-blue), var(--app-header-mint));
        color: white;
        font-weight: 950;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .global-cart-note {
        color: var(--app-header-muted);
        font-size: 12px;
        line-height: 1.45;
        margin-top: 10px;
    }

    #globalReservationModal .modal-content {
        border: 0 !important;
        border-radius: 22px !important;
        overflow: hidden;
        box-shadow: 0 24px 65px rgba(15, 23, 42, 0.22);
    }

    #globalReservationModal .modal-header {
        min-height: 66px;
        border-bottom: 0 !important;
        background: linear-gradient(135deg, var(--app-header-primary), var(--app-header-primary-dark)) !important;
        color: #fff !important;
        padding: 16px 20px !important;
    }

    #globalReservationModal .modal-title {
        font-weight: 950 !important;
        letter-spacing: -0.02em;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    #globalReservationModal .modal-header .close {
        color: #fff !important;
        opacity: 1 !important;
        text-shadow: none !important;
        background: rgba(255,255,255,.14) !important;
        border: 1px solid rgba(255,255,255,.2) !important;
        border-radius: 999px;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

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

    #globalReservationTable thead th {
        background: rgba(var(--theme-primary-rgb), .1);
        color: var(--app-header-primary-dark);
        border-bottom: 1px solid rgba(var(--theme-primary-rgb), .35);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    #globalReservationTable tbody tr:hover {
        background: #f8fbff !important;
    }



    /* Blue / mint restrained refinement */
    #kt_header.app-modern-header {
        border-radius: 0 0 22px 22px;
    }

    .app-header-pill i {
        color: var(--app-header-blue);
    }

    .app-header-cart-btn {
        position: relative;
    }

    .app-header-cart-btn::after {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: inherit;
        border: 1px solid rgba(255,255,255,.18);
        pointer-events: none;
    }

    .global-cart-checkout-btn {
        background: linear-gradient(135deg, var(--app-header-blue), var(--app-header-mint)) !important;
    }

    .global-cart-item {
        background: linear-gradient(180deg, #ffffff, #f8fbfd);
    }

    @media (max-width: 992px) {
        #kt_header.app-modern-header {
            display: none !important;
        }
        .app-header-inner {
            gap: 10px;
        }
        .app-header-company {
            max-width: 240px;
        }
        .app-header-client {
            max-width: 280px;
        }
        .app-header-pill {
            display: none;
        }
    }

    @media (max-width: 576px) {
        .app-header-mark {
            width: 40px;
            height: 40px;
            border-radius: 14px;
        }
        .app-header-company {
            font-size: 15px;
            max-width: 160px;
        }
        .app-header-client {
            display: none;
        }
        .app-header-cart-btn .cart-label {
            display: none;
        }
        .app-header-cart-btn {
            width: 46px;
            padding: 0;
            border-radius: 50%;
        }
        .app-header-cart-count {
            position: absolute;
            top: -6px;
            right: -6px;
        }
        .app-header-user-btn {
            padding: 5px !important;
            width: 44px !important;
        }
    }
</style>

<div id="kt_header" class="header header-fixed app-modern-header">
    <div class="app-header-inner">
        <div class="app-header-brand">
            <div class="app-header-mark">{{ mb_substr($companyLabel, 0, 1) }}</div>
            <div class="app-header-brand-text">
                <h1 class="app-header-company">{{ $companyLabel }}</h1>
                <p class="app-header-client">{{ $clientLabel }}</p>
            </div>
        </div>

        <div class="header-menu-wrapper header-menu-wrapper-left" id="kt_header_menu_wrapper"></div>

        <div class="topbar app-header-right">
            @if($guard_web)
                @include('components.notifications-dropdown')

                <button type="button" class="app-header-pill" data-toggle="modal" data-target="#globalReservationModal">
                    <i class="fas fa-box-open"></i>
                    <span>Réservations</span>
                </button>

                @if(($guard_web ?? false) && isset($user) && $user->hasPermissionTo(1500002))
                <button type="button" class="app-header-cart-btn" onclick="openRightCartDrawer()">
                    <i class="fas fa-shopping-cart"></i>
                    <span class="cart-label">Panier</span>
                    <span class="app-header-cart-count" id="cartCount">0</span>
                </button>
                @endif
            @endif

            <div class="topbar-item">
                <div class="btn btn-icon btn-icon-mobile w-auto btn-clean d-flex align-items-center btn-lg px-2 app-header-user-btn"
                     id="kt_quick_user_toggle">
                    <span class="text-muted font-weight-bold font-size-base d-none d-md-inline mr-1">{{ __('messages.Hello') }}</span>
                    <span class="text-dark-50 font-weight-bolder font-size-base d-none d-md-inline mr-3">{{ $user->name }}</span>
                    <span class="symbol symbol-lg-35 symbol-25 symbol-light-success">
                        @php
                            $image = asset('images/users/');
                            if($guard_provider){
                                $image = 'images/providerAgent/';
                            }
                            if($guard_web){
                                $image = 'images/clientAgent/';
                            }
                        @endphp
                        <img alt="Logo"
                             src="{{ asset($image . '/' . (($user->photo == '' || $user->photo == null) ? 'blank.png' : $user->photo)) }}"/>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

@if($guard_web)
    <div class="modal fade" id="globalReservationModal" tabindex="-1" role="dialog" aria-labelledby="globalReservationModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-white" id="globalReservationModalLabel">
                        <i class="fas fa-box-open mr-2"></i>Liste des Articles en Répartition
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover" id="globalReservationTable">
                            <thead>
                            <tr>
                                <th>Code</th>
                                <th>Désignation</th>
                                <th>Forme</th>
                                <th>Quantité</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(($guard_web ?? false) && isset($user) && $user->hasPermissionTo(1500002))
    <div class="global-cart-backdrop" id="rightCartBackdrop" onclick="closeRightCartDrawer()"></div>

    <aside class="global-cart-drawer" id="rightCartDrawer" aria-label="Panier">
        <div class="global-cart-header">
            <div>
                <h3>Mon panier</h3>
                <p id="rightCartSubtitle">Chargement...</p>
            </div>
            <button type="button" class="global-cart-close" onclick="closeRightCartDrawer()">×</button>
        </div>

        <div class="global-cart-body" id="rightCartContent">
            <div class="global-cart-empty">Chargement du panier...</div>
        </div>

        <div class="global-cart-footer" id="rightCartSummary" style="display:none;"></div>
    </aside>
    @endif

    <script>
        (function initializeGlobalReservationModal(attempt) {
            if (!(window.jQuery && window.jQuery.fn && window.jQuery.fn.DataTable)) {
                if (attempt < 40) {
                    setTimeout(function () {
                        initializeGlobalReservationModal(attempt + 1);
                    }, 120);
                }
                return;
            }

            const $ = window.jQuery;
            let reservationTableInstance = null;

            $(document).ready(function () {
                window.openGlobalReservationModal = function () {
                    $('#globalReservationModal').modal('show');
                };

                // Any legacy trigger still targeting #reservationModal now opens the global modal.
                $(document).on('click', '[data-target="#reservationModal"], a[href="#reservationModal"]', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    window.openGlobalReservationModal();
                });

                // Keep backward compatibility for legacy JS calls: $('#reservationModal').modal('show')
                if ($.fn.modal && !$.fn.modal.__globalReservationPatched) {
                    const originalModal = $.fn.modal;
                    $.fn.modal = function () {
                        if (this.length && this.attr('id') === 'reservationModal') {
                            return $('#globalReservationModal').modal.apply($('#globalReservationModal'), arguments);
                        }
                        return originalModal.apply(this, arguments);
                    };
                    $.fn.modal.__globalReservationPatched = true;
                }

                $('#globalReservationModal').on('shown.bs.modal', function () {
                    if (!reservationTableInstance) {
                        reservationTableInstance = $('#globalReservationTable').DataTable({
                            processing: true,
                            serverSide: false,
                            ajax: {
                                url: '{{ route("reservations.list") }}',
                                type: 'GET'
                            },
                            columns: [
                                { data: 'code', defaultContent: '' },
                                { data: 'designation', defaultContent: '' },
                                { data: 'forme', defaultContent: '' },
                                { data: 'quantite', defaultContent: '0' }
                            ],
                            language: {
                                url: "{{ asset('plugins/custom/datatables/i18n/French.json') }}",
                                emptyTable: 'Aucune réservation disponible'
                            },
                            responsive: true,
                            pageLength: 10,
                            order: [[0, 'desc']]
                        });
                    } else {
                        reservationTableInstance.ajax.reload(null, false);
                    }
                });
            });
        })(0);
    </script>

    @if(($guard_web ?? false) && isset($user) && $user->hasPermissionTo(1500002))
    <script>
        window.rightCartConfig = {
            viewUrl: "{{ route('orders.viewCart') }}",
            addUrlBase: "{{ route('orders.addToCart', '') }}",
            checkoutUrl: "{{ url('/cart') }}",
            updateUrlBase: "",
            deleteUrlBase: ""
        };

        window.openRightCartDrawer = function () {
            $('#rightCartDrawer').addClass('open');
            $('#rightCartBackdrop').addClass('open');
            loadRightCartDrawer();
        };

        window.closeRightCartDrawer = function () {
            $('#rightCartDrawer').removeClass('open');
            $('#rightCartBackdrop').removeClass('open');
        };

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

        function rightCartNumber(value) {
            if (typeof parseLocaleNumber === 'function') {
                return parseLocaleNumber(value);
            }
            if (value === null || value === undefined || value === '') {
                return 0;
            }
            return parseFloat(String(value).replace(/\s/g, '').replace(',', '.')) || 0;
        }

        function rightCartMoney(value) {
            return rightCartNumber(value).toFixed(3).replace('.', ',');
        }

        function normalizeRightCartItem(entry) {
            const rowKey = entry[0];
            const item = entry[1] || {};
            const attrs = item.attributes || {};
            const productId = item.id || attrs.product_id || attrs.id || rowKey;
            const name = item.name || item.designation || attrs.designation || attrs.name || attrs.libart || 'Article';
            const code = attrs.code || attrs.code_backend || attrs.pct_code || item.code || item.code_backend || productId || '';
            const qty = rightCartNumber(item.quantity ?? item.qty ?? attrs.quantity ?? 0);
            const price = rightCartNumber(item.price ?? attrs.price ?? attrs.sales_price ?? attrs.prix ?? 0);
            const nature = attrs.nature ?? item.nature ?? attrs.NATURE ?? '';
            const promo = attrs.promotion_hidden ?? attrs.promo ?? item.promotion_hidden ?? '';

            return { rowKey, productId, name, code, qty, price, nature, promo };
        }

        window.renderRightCartContent = function (payload) {
            const cartContent = (payload && payload.cartContent) ? payload.cartContent : {};
            const items = Object.entries(cartContent).map(normalizeRightCartItem);
            const container = $('#rightCartContent');
            const summary = $('#rightCartSummary');
            const lineCount = items.length;
            const quantityCount = items.reduce((sum, item) => sum + item.qty, 0);
            const fallbackSubtotal = items.reduce((sum, item) => sum + (item.price * item.qty), 0);
            const subtotal = rightCartNumber(payload?.total_ht ?? payload?.totalCart ?? fallbackSubtotal);
            const tax = rightCartNumber(payload?.total_tva ?? 0);
            const total = rightCartNumber(payload?.total_ttc ?? (subtotal + tax));

            $('#rightCartSubtitle').text(lineCount ? `${lineCount} ligne(s) · ${quantityCount} article(s)` : 'Panier vide');
            $('#cartCount').text(quantityCount || 0);

            if (!items.length) {
                container.html(`
                    <div class="global-cart-empty">
                        <div>
                            <div style="font-size:42px;margin-bottom:10px;"><i class="fas fa-shopping-cart"></i></div>
                            <strong>Votre panier est vide</strong>
                            <p class="mb-0">Ajoutez des articles depuis le catalogue.</p>
                        </div>
                    </div>
                `);
                summary.hide().empty();
                return;
            }

            container.html(items.map(function(item) {
                return `
                    <div class="global-cart-item" data-row-key="${rightCartEscape(item.rowKey)}" data-product-id="${rightCartEscape(item.productId)}">
                        <div class="global-cart-item-top">
                            <div>
                                <div class="global-cart-item-title">${rightCartEscape(item.name)}</div>
                                <div class="global-cart-item-sub">${item.code ? 'Code : ' + rightCartEscape(item.code) + ' · ' : ''}PU : ${rightCartMoney(item.price)}</div>
                            </div>
                            <div class="global-cart-item-price">${rightCartMoney(item.price * item.qty)}</div>
                        </div>
                        <div class="global-cart-controls">
                            <button type="button" class="global-cart-control-btn" onclick="decreaseRightCartItem('${rightCartEscape(item.rowKey)}', '${rightCartEscape(item.productId)}', ${item.qty})">−</button>
                            <div class="global-cart-qty">${item.qty}</div>
                            <button type="button" class="global-cart-control-btn" onclick="increaseRightCartItem('${rightCartEscape(item.productId)}', '${rightCartEscape(item.nature)}', '${rightCartEscape(item.promo)}')">+</button>
                            <button type="button" class="global-cart-remove-btn" title="Supprimer" onclick="removeRightCartItem('${rightCartEscape(item.rowKey)}', '${rightCartEscape(item.productId)}')">×</button>
                        </div>
                    </div>
                `;
            }).join(''));

            summary.show().html(`
                <div class="global-cart-total-row"><span>Sous-total</span><strong>${rightCartMoney(subtotal)}</strong></div>
                <div class="global-cart-total-row"><span>TVA</span><strong>${rightCartMoney(tax)}</strong></div>
                <div class="global-cart-total-row grand-total"><span>Total</span><strong>${rightCartMoney(total)}</strong></div>
                <button type="button" class="global-cart-checkout-btn" onclick="validateRightCartOrder()">
                    <i class="fas fa-check-circle"></i> Valider la commande
                </button>
                <div class="global-cart-note">Le bouton + utilise l’ajout panier existant. Pour − et ×, renseignez updateUrlBase/deleteUrlBase si vos routes Laravel existent.</div>
            `);
        };

        window.loadRightCartDrawer = function () {
            $('#rightCartContent').html('<div class="global-cart-empty">Chargement du panier...</div>');
            $('#rightCartSummary').hide().empty();

            $.ajax({
                url: window.rightCartConfig.viewUrl,
                type: 'GET',
                success: function(response) {
                    renderRightCartContent(response || {});
                },
                error: function() {
                    $('#rightCartSubtitle').text('Erreur de chargement');
                    $('#rightCartContent').html('<div class="global-cart-empty">Impossible de charger le panier.</div>');
                    $('#rightCartSummary').hide().empty();
                }
            });
        };

        window.updateCartCount = function () {
            $.ajax({
                url: window.rightCartConfig.viewUrl,
                type: 'GET',
                success: function(response) {
                    const items = Object.entries(response.cartContent || {}).map(normalizeRightCartItem);
                    const quantityCount = items.reduce((sum, item) => sum + item.qty, 0);
                    $('#cartCount').text(quantityCount || 0);
                }
            });
        };

        window.increaseRightCartItem = function (productId, nature, promo) {
            if (!productId) return;

            $.ajax({
                url: window.rightCartConfig.addUrlBase + '/' + productId,
                type: 'POST',
                data: {
                    quantity: 1,
                    nature: nature || '',
                    promotion_hidden: promo || '',
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response && response.error) {
                        Swal.fire({ icon: 'error', title: 'Erreur', text: response.message || 'Erreur lors de la mise à jour du panier' });
                        return;
                    }
                    updateCartCount();
                    loadRightCartDrawer();
                },
                error: function(xhr) {
                    Swal.fire({ icon: 'error', title: 'Erreur', text: xhr.responseJSON?.message || 'Impossible de modifier la quantité.' });
                }
            });
        };

        window.decreaseRightCartItem = function (rowKey, productId, currentQty) {
            if (!window.rightCartConfig.updateUrlBase) {
                Swal.fire({
                    icon: 'info',
                    title: 'Route à connecter',
                    text: 'Ajoutez la route Laravel de mise à jour quantité dans rightCartConfig.updateUrlBase.',
                    confirmButtonText: 'OK'
                });
                return;
            }

            $.ajax({
                url: window.rightCartConfig.updateUrlBase + '/' + rowKey,
                type: 'POST',
                data: {
                    quantity: Math.max(0, rightCartNumber(currentQty) - 1),
                    _token: '{{ csrf_token() }}'
                },
                success: function() {
                    updateCartCount();
                    loadRightCartDrawer();
                },
                error: function(xhr) {
                    Swal.fire({ icon: 'error', title: 'Erreur', text: xhr.responseJSON?.message || 'Impossible de modifier la quantité.' });
                }
            });
        };

        window.removeRightCartItem = function (rowKey, productId) {
            if (!window.rightCartConfig.deleteUrlBase) {
                Swal.fire({
                    icon: 'info',
                    title: 'Route à connecter',
                    text: 'Ajoutez la route Laravel de suppression ligne panier dans rightCartConfig.deleteUrlBase.',
                    confirmButtonText: 'OK'
                });
                return;
            }

            $.ajax({
                url: window.rightCartConfig.deleteUrlBase + '/' + rowKey,
                type: 'POST',
                data: { _token: '{{ csrf_token() }}' },
                success: function() {
                    updateCartCount();
                    loadRightCartDrawer();
                },
                error: function(xhr) {
                    Swal.fire({ icon: 'error', title: 'Erreur', text: xhr.responseJSON?.message || 'Impossible de supprimer la ligne.' });
                }
            });
        };

        window.validateRightCartOrder = function () {
            window.location.href = window.rightCartConfig.checkoutUrl;
        };

        (function initCartCountWhenJQueryReady(attempt) {
            if (!window.jQuery) {
                if (attempt < 40) {
                    setTimeout(function () {
                        initCartCountWhenJQueryReady(attempt + 1);
                    }, 120);
                }
                return;
            }

            window.jQuery(document).ready(function () {
                if (typeof window.updateCartCount === 'function') {
                    window.updateCartCount();
                }
            });
        })(0);
    </script>
    @endif
@endif