@php
    $fid = $filterId ?? 'main';
    $start = $dateDebut ?? '';
    $end = $dateFin ?? '';
    $hasDateFilter = filled($start) || filled($end);
    $pageTitle = $pageTitle ?? 'Tableau de bord';
    $filterRoute = $filterRoute ?? 'dashboard';
    $defaultLabel = $defaultLabel ?? 'Toutes les dates';

    $label = $defaultLabel;
    if ($hasDateFilter) {
        try {
            $startLabel = $start ? \Carbon\Carbon::parse($start)->locale('fr')->isoFormat('D MMM YYYY') : '…';
            $endLabel = $end ? \Carbon\Carbon::parse($end)->locale('fr')->isoFormat('D MMM YYYY') : '…';
            $label = $start && $end && $start === $end ? $startLabel : trim($startLabel . ' – ' . $endLabel);
        } catch (\Throwable $e) {
            $label = trim(($start ?: '…') . ' – ' . ($end ?: '…'));
        }
    }
@endphp

<div class="shopify-date-bar">
    <div class="shopify-date-bar__title">
        <h1>{{ $pageTitle }}</h1>
    </div>

    <div class="shopify-date" data-shopify-date id="shopify-date-{{ $fid }}">
        <button type="button" class="shopify-date__trigger {{ $hasDateFilter ? 'is-active' : '' }}"
            data-shopify-date-trigger aria-expanded="false" aria-haspopup="dialog"
            aria-controls="shopify-date-panel-{{ $fid }}">
            <i data-feather="calendar" class="feather-14"></i>
            <span data-shopify-date-label>{{ $label }}</span>
            <i data-feather="chevron-down" class="feather-14 shopify-date__caret"></i>
        </button>

        @if ($hasDateFilter)
            <a href="{{ route($filterRoute, request()->filled('scope') ? ['scope' => request('scope')] : []) }}"
                class="shopify-date__clear" title="Effacer le filtre" aria-label="Effacer le filtre">
                <i data-feather="x" class="feather-14"></i>
            </a>
        @endif

        <div class="shopify-date__panel" id="shopify-date-panel-{{ $fid }}" data-shopify-date-panel
            role="dialog" aria-label="Choisir une période" hidden>
            <form method="GET" action="{{ route($filterRoute) }}" data-shopify-date-form>
                @if (request()->filled('scope'))
                    <input type="hidden" name="scope" value="{{ request('scope') }}">
                @endif
                <div class="shopify-date__body">
                    <ul class="shopify-date__presets" role="list">
                        <li>
                            <button type="button" class="shopify-date__preset" data-preset="today">Aujourd'hui</button>
                        </li>
                        <li>
                            <button type="button" class="shopify-date__preset" data-preset="yesterday">Hier</button>
                        </li>
                        <li>
                            <button type="button" class="shopify-date__preset" data-preset="last7">7 derniers
                                jours</button>
                        </li>
                        <li>
                            <button type="button" class="shopify-date__preset" data-preset="last30">30 derniers
                                jours</button>
                        </li>
                        <li>
                            <button type="button" class="shopify-date__preset" data-preset="thisMonth">Ce
                                mois-ci</button>
                        </li>
                        <li>
                            <button type="button" class="shopify-date__preset" data-preset="last365">1 an</button>
                        </li>
                        <li>
                            <button type="button" class="shopify-date__preset is-selected"
                                data-preset="custom">Personnalisé</button>
                        </li>
                    </ul>

                    <div class="shopify-date__custom">
                        <div class="shopify-date__field">
                            <label for="date_debut_{{ $fid }}">Du</label>
                            <input type="date" name="date_debut" id="date_debut_{{ $fid }}"
                                value="{{ $start }}" data-shopify-date-start>
                        </div>
                        <div class="shopify-date__field">
                            <label for="date_fin_{{ $fid }}">Au</label>
                            <input type="date" name="date_fin" id="date_fin_{{ $fid }}"
                                value="{{ $end }}" data-shopify-date-end>
                        </div>
                    </div>
                </div>

                <div class="shopify-date__footer">
                    <button type="button" class="shopify-date__btn shopify-date__btn--plain" data-shopify-date-cancel>
                        Annuler
                    </button>
                    <button type="submit" class="shopify-date__btn shopify-date__btn--primary">
                        Appliquer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@once
    <style>
        .shopify-date-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 1.25rem;
            flex-wrap: wrap;
            min-height: 36px;
            overflow: visible;
            position: relative;
            z-index: 30;
        }

        .shopify-date-bar__title {
            display: flex;
            align-items: center;
            min-height: 32px;
        }

        .shopify-date-bar__title h1 {
            margin: 0 !important;
            padding: 0 !important;
            font-family: 'Archivo', 'Manrope', sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: #121826;
            line-height: 32px;
            height: 32px;
        }

        .shopify-date {
            position: relative;
            display: inline-flex;
            align-items: center;
            align-self: center;
            gap: 6px;
            margin: 0 0 0 auto !important;
            padding: 0;
            z-index: 40;
            height: 32px;
            overflow: visible;
        }

        .shopify-date__trigger {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: 32px;
            padding: 0 10px;
            border: 1px solid #c9cccf;
            border-radius: 8px;
            background: #fff;
            color: #202223;
            font-size: 13px;
            font-weight: 500;
            font-family: inherit;
            cursor: pointer;
            line-height: 1;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
            transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
        }

        .shopify-date__trigger:hover {
            background: #f6f6f7;
            border-color: #8c9196;
        }

        .shopify-date__trigger[aria-expanded="true"] {
            border-color: #0039BA;
            box-shadow: 0 0 0 1px #0039BA;
        }

        .shopify-date__trigger.is-active {
            background: #E8EEF9;
            border-color: #0039BA;
            color: #002A8A;
        }

        .shopify-date__trigger svg {
            width: 14px;
            height: 14px;
            stroke: currentColor;
            flex-shrink: 0;
        }

        .shopify-date__caret {
            opacity: 0.7;
        }

        .shopify-date__clear {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 6px;
            color: #6d7175;
            text-decoration: none;
        }

        .shopify-date__clear:hover {
            background: #f1f2f3;
            color: #202223;
        }

        .shopify-date__clear svg {
            width: 14px;
            height: 14px;
        }

        .shopify-date__panel {
            position: fixed;
            top: 0;
            left: 0;
            width: min(420px, calc(100vw - 24px));
            background: #fff;
            border: 1px solid #e1e3e5;
            border-radius: 12px;
            box-shadow:
                0 4px 6px -1px rgba(26, 26, 26, 0.06),
                0 12px 28px -4px rgba(26, 26, 26, 0.12);
            overflow: hidden;
            z-index: 2000;
        }

        .shopify-date__panel[hidden],
        .shopify-date__panel:not(.is-open) {
            display: none !important;
        }

        .shopify-date__panel.is-open {
            display: block !important;
        }

        .shopify-date.is-open {
            z-index: 50;
        }

        .shopify-date__body {
            display: grid;
            grid-template-columns: 160px 1fr;
            min-height: 220px;
        }

        .shopify-date__presets {
            list-style: none;
            margin: 0;
            padding: 8px;
            border-right: 1px solid #e1e3e5;
            background: #fafbfb;
        }

        .shopify-date__preset {
            width: 100%;
            text-align: left;
            border: 0;
            background: transparent;
            border-radius: 8px;
            padding: 8px 10px;
            font-size: 13px;
            font-weight: 500;
            color: #202223;
            font-family: inherit;
            cursor: pointer;
        }

        .shopify-date__preset:hover {
            background: #f1f2f3;
        }

        .shopify-date__preset.is-selected {
            background: #E8EEF9;
            color: #0039BA;
        }

        .shopify-date__custom {
            display: flex;
            flex-direction: column;
            gap: 14px;
            padding: 16px;
            justify-content: center;
        }

        .shopify-date__field label {
            display: block;
            margin-bottom: 6px;
            font-size: 12px;
            font-weight: 600;
            color: #6d7175;
        }

        .shopify-date__field input[type="date"] {
            width: 100%;
            height: 36px;
            border: 1px solid #c9cccf;
            border-radius: 8px;
            padding: 0 10px;
            font-size: 13px;
            color: #202223;
            background: #fff;
            box-shadow: none !important;
        }

        .shopify-date__field input[type="date"]:focus {
            outline: none;
            border-color: #0039BA;
            box-shadow: 0 0 0 1px #0039BA !important;
        }

        .shopify-date__footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 12px 16px;
            border-top: 1px solid #e1e3e5;
            background: #fff;
        }

        .shopify-date__btn {
            height: 32px;
            padding: 0 12px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            border: 1px solid transparent;
        }

        .shopify-date__btn--plain {
            background: #fff;
            border-color: #c9cccf;
            color: #202223;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
        }

        .shopify-date__btn--plain:hover {
            background: #f6f6f7;
        }

        .shopify-date__btn--primary {
            background: #0039BA;
            border-color: #0039BA;
            color: #fff;
        }

        .shopify-date__btn--primary:hover {
            background: #002A8A;
        }

        @media (max-width: 520px) {
            .shopify-date__body {
                grid-template-columns: 1fr;
            }

            .shopify-date__presets {
                border-right: 0;
                border-bottom: 1px solid #e1e3e5;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 2px;
            }
        }
    </style>

    <script>
        (function() {
            if (window.__dediShopifyDateBound) return;
            window.__dediShopifyDateBound = true;

            function iso(d) {
                const y = d.getFullYear();
                const m = String(d.getMonth() + 1).padStart(2, '0');
                const day = String(d.getDate()).padStart(2, '0');
                return y + '-' + m + '-' + day;
            }

            function rangeFor(preset) {
                const now = new Date();
                const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
                let start = new Date(today);
                let end = new Date(today);

                switch (preset) {
                    case 'today':
                        break;
                    case 'yesterday':
                        start.setDate(start.getDate() - 1);
                        end.setDate(end.getDate() - 1);
                        break;
                    case 'last7':
                        start.setDate(start.getDate() - 6);
                        break;
                    case 'last30':
                        start.setDate(start.getDate() - 29);
                        break;
                    case 'thisMonth':
                        start = new Date(today.getFullYear(), today.getMonth(), 1);
                        break;
                    case 'last365':
                        start.setDate(start.getDate() - 364);
                        break;
                    default:
                        return null;
                }
                return {
                    start: iso(start),
                    end: iso(end)
                };
            }

            function closeAll() {
                document.querySelectorAll('[data-shopify-date]').forEach(function(root) {
                    const panel = root.querySelector('[data-shopify-date-panel]');
                    const trigger = root.querySelector('[data-shopify-date-trigger]');
                    if (panel) {
                        panel.setAttribute('hidden', '');
                        panel.classList.remove('is-open');
                        panel.style.top = '';
                        panel.style.left = '';
                        panel.style.right = '';
                    }
                    if (trigger) trigger.setAttribute('aria-expanded', 'false');
                    root.classList.remove('is-open');
                });
            }

            function positionPanel(panel, trigger) {
                const rect = trigger.getBoundingClientRect();
                const gap = 6;
                const panelWidth = Math.min(420, window.innerWidth - 24);
                const preferredLeft = rect.right - panelWidth;
                const left = Math.max(12, Math.min(preferredLeft, window.innerWidth - panelWidth - 12));
                let top = rect.bottom + gap;

                panel.style.width = panelWidth + 'px';
                panel.style.left = left + 'px';
                panel.style.right = 'auto';
                panel.style.top = top + 'px';

                // Si ça déborde en bas, ouvrir vers le haut
                requestAnimationFrame(function() {
                    const h = panel.offsetHeight || 280;
                    if (top + h > window.innerHeight - 12) {
                        const up = rect.top - gap - h;
                        panel.style.top = Math.max(12, up) + 'px';
                    }
                });
            }

            function openRoot(root) {
                const panel = root.querySelector('[data-shopify-date-panel]');
                const trigger = root.querySelector('[data-shopify-date-trigger]');
                if (!panel || !trigger) return;
                panel.removeAttribute('hidden');
                panel.classList.add('is-open');
                trigger.setAttribute('aria-expanded', 'true');
                root.classList.add('is-open');
                positionPanel(panel, trigger);
            }

            function toggleRoot(root) {
                const panel = root.querySelector('[data-shopify-date-panel]');
                if (!panel) return;
                const isOpen = !panel.hasAttribute('hidden');
                closeAll();
                if (!isOpen) openRoot(root);
            }

            window.addEventListener('resize', closeAll);
            window.addEventListener('scroll', closeAll, true);

            document.addEventListener('click', function(e) {
                const trigger = e.target.closest('[data-shopify-date-trigger]');
                if (trigger) {
                    e.preventDefault();
                    e.stopPropagation();
                    const root = trigger.closest('[data-shopify-date]');
                    if (root) toggleRoot(root);
                    return;
                }

                const cancel = e.target.closest('[data-shopify-date-cancel]');
                if (cancel) {
                    e.preventDefault();
                    closeAll();
                    return;
                }

                const presetBtn = e.target.closest('[data-preset]');
                if (presetBtn) {
                    e.preventDefault();
                    e.stopPropagation();
                    const root = presetBtn.closest('[data-shopify-date]');
                    if (!root) return;

                    root.querySelectorAll('[data-preset]').forEach(function(b) {
                        b.classList.toggle('is-selected', b === presetBtn);
                    });

                    const preset = presetBtn.getAttribute('data-preset');
                    const form = root.querySelector('[data-shopify-date-form]');
                    const startInput = root.querySelector('[data-shopify-date-start]');
                    const endInput = root.querySelector('[data-shopify-date-end]');

                    if (preset === 'custom') {
                        if (startInput) startInput.focus();
                        return;
                    }

                    const range = rangeFor(preset);
                    if (!range || !form) return;
                    if (startInput) startInput.value = range.start;
                    if (endInput) endInput.value = range.end;
                    form.submit();
                    return;
                }

                if (!e.target.closest('[data-shopify-date]')) {
                    closeAll();
                }
            });

            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') closeAll();
            });

            document.addEventListener('change', function(e) {
                if (!e.target.matches('[data-shopify-date-start], [data-shopify-date-end]')) return;
                const root = e.target.closest('[data-shopify-date]');
                if (!root) return;
                root.querySelectorAll('[data-preset]').forEach(function(b) {
                    b.classList.toggle('is-selected', b.getAttribute('data-preset') === 'custom');
                });
            });
        })
        ();
    </script>
@endonce