{{--
    Filter periode: trigger ringkas yang membuka popover berisi preset di kiri
    dan kalender rentang di kanan. Vanilla JS, tanpa pustaka tanggal.

    Parameter:
      $start, $end  Carbon  — rentang yang sedang aktif
      $target       string  — URL tujuan saat Terapkan (query lain ikut dijaga)
      $block        bool    — lebar penuh mengikuti kolomnya, untuk baris filter

    Boleh dipakai lebih dari sekali dalam satu halaman: tiap instance punya id
    sendiri dan JS-nya hanya mencari elemen di dalam wadahnya.
--}}
@php
    $target ??= url()->current();
    $block ??= false;
    $pid = 'pp-'.\Illuminate\Support\Str::random(6);
    // Query lain (mis. pencarian) dibawa ikut supaya filter tidak saling menghapus.
    $keep = collect(request()->query())->except(['start', 'end'])->all();
@endphp

@once
    <style>
        .period-picker {
            position: relative;
            display: inline-block;
            --pp-primary: #2563EB;
            --pp-primary-dark: #1D4ED8;
            --pp-primary-soft: #E7EEFD;
            --pp-line: #EFEDEB;
            --pp-body: #1C1917;
            --pp-muted: #78716C;
            --pp-light: #FAFAF9;
        }

        .period-trigger {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            border: 1px solid var(--pp-line);
            border-radius: 14px;
            background: #fff;
            padding: .625rem 1rem;
            font-size: .875rem;
            font-weight: 600;
            color: var(--pp-body);
            cursor: pointer;
        }
        .period-trigger:hover { border-color: var(--pp-primary); }
        .period-trigger:focus-visible { outline: 2px solid var(--pp-primary-soft); outline-offset: 1px; }
        .period-trigger .pp-caret { color: var(--pp-muted); font-size: .7rem; }
        .period-trigger .pp-cal { color: var(--pp-muted); }

        /* Mode block: ikut lebar kolomnya, sejajar dengan field lain di baris filter. */
        .period-picker.block, .period-picker.block .period-trigger { display: block; width: 100%; }
        .period-picker.block .period-trigger { display: flex; justify-content: space-between; }
        .period-picker.block .period-trigger-label {
            flex: 1 1 auto; text-align: left;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }

        /* Lapisan klik-di-luar. Menutup popover tanpa perlu menebak-nebak apakah
           elemen yang diklik masih menempel di DOM — tombol tanggal selalu
           digambar ulang setiap kali dipilih. */
        .period-backdrop { position: fixed; inset: 0; z-index: 40; }

        .period-popover {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            z-index: 41;
            width: 480px;
            max-width: 92vw;
            background: #fff;
            border: 1px solid var(--pp-line);
            border-radius: 18px;
            box-shadow: 0 12px 32px rgba(28, 25, 23, .14);
            overflow: hidden;
        }
        /* Trigger dekat tepi kiri layar: buka ke kanan supaya tetap terlihat. */
        .period-popover.align-left { right: auto; left: 0; }

        .period-header {
            font-size: .9375rem; font-weight: 700; color: var(--pp-body);
            padding: .875rem 1.25rem; border-bottom: 1px solid var(--pp-line);
        }

        .period-body { display: flex; }

        .period-presets {
            flex: 0 0 150px;
            border-right: 1px solid var(--pp-line);
            padding: .75rem;
            display: flex; flex-direction: column; gap: .125rem;
        }
        .period-preset {
            background: none; border: none; text-align: left; cursor: pointer;
            font-size: .8125rem; font-weight: 500; color: var(--pp-muted);
            padding: .4rem .5rem; border-radius: 10px;
        }
        .period-preset:hover { background: var(--pp-primary-soft); color: var(--pp-primary-dark); }
        .period-preset.active { color: var(--pp-primary-dark); font-weight: 700; background: var(--pp-primary-soft); }

        .period-cal { flex: 1 1 auto; padding: .875rem 1rem; min-width: 0; }

        .period-inputs { display: flex; gap: .75rem; margin-bottom: 1rem; }
        .period-input { position: relative; flex: 1 1 0; min-width: 0; }
        .period-input-icon {
            position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
            font-size: .8rem; line-height: 1; color: var(--pp-muted); pointer-events: none;
        }
        .period-input input {
            width: 100%; border: 1px solid var(--pp-line); background: var(--pp-light);
            border-radius: 12px; padding: .5rem .6rem .5rem 2rem;
            font-size: .8125rem; color: var(--pp-body);
        }
        .period-input input:focus { outline: none; border-color: var(--pp-primary); background: #fff; }

        .period-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
        .period-month { font-size: .8125rem; font-weight: 700; color: var(--pp-body); }
        .period-nav-btn {
            background: none; border: none; cursor: pointer; color: var(--pp-muted);
            font-size: 1.1rem; line-height: 1; padding: .1rem .45rem; border-radius: 8px;
        }
        .period-nav-btn:hover { background: var(--pp-light); color: var(--pp-primary); }

        .period-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
        .period-weekdays { margin-bottom: .25rem; }
        .period-wd { text-align: center; color: var(--pp-muted); font-size: .6875rem; font-weight: 600; padding: .25rem 0; }

        .period-day {
            position: relative; aspect-ratio: 1 / 1;
            display: flex; align-items: center; justify-content: center;
            border: none; background: none; border-radius: 50%;
            font-size: .8125rem; font-weight: 500; color: var(--pp-body); cursor: pointer;
        }
        .period-day.empty { cursor: default; }
        .period-day:not(.empty):hover { background: var(--pp-light); }
        /* Hari di tengah rentang bersudut lurus supaya menyatu jadi satu balok. */
        .period-day.in-range { background: var(--pp-primary-soft); color: var(--pp-primary-dark); border-radius: 0; }
        .period-day.endpoint { background: var(--pp-primary); color: #fff; font-weight: 700; }
        .period-day.today::after {
            content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
            width: 4px; height: 4px; border-radius: 50%; background: var(--pp-primary);
        }
        .period-day.endpoint.today::after { background: #fff; }

        .period-footer {
            display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
            padding: .875rem 1.25rem; border-top: 1px solid var(--pp-line);
        }
        .period-btn-cancel {
            background: none; border: none; cursor: pointer; color: var(--pp-muted);
            font-size: .875rem; font-weight: 600; padding: .5rem .875rem; border-radius: 12px;
        }
        .period-btn-cancel:hover { background: var(--pp-light); }
        .period-btn-apply {
            border: none; cursor: pointer; background: var(--pp-primary); color: #fff;
            font-size: .875rem; font-weight: 600; padding: .5rem 1.25rem; border-radius: 12px;
        }
        .period-btn-apply:hover { background: var(--pp-primary-dark); }

        @media (max-width: 480px) {
            .period-body { flex-direction: column; }
            .period-presets {
                flex: none; border-right: none; border-bottom: 1px solid var(--pp-line);
                flex-direction: row; flex-wrap: wrap;
            }
        }
    </style>
@endonce

<div class="period-picker @if ($block) block @endif" id="{{ $pid }}"
     data-target="{{ $target }}" data-keep="{{ json_encode($keep) }}"
     data-start="{{ $start->toDateString() }}" data-end="{{ $end->toDateString() }}">

    <button type="button" class="period-trigger" data-role="toggle" aria-haspopup="dialog" aria-expanded="false">
        <span class="pp-cal" aria-hidden="true">🗓</span>
        <span class="period-trigger-label">{{ $start->translatedFormat('d M Y') }} – {{ $end->translatedFormat('d M Y') }}</span>
        <span class="pp-caret" aria-hidden="true">▾</span>
    </button>

    <div data-role="layer" hidden>
        <div class="period-backdrop" data-role="backdrop"></div>

        <div class="period-popover" role="dialog" aria-label="Pilih periode" data-role="popover">
            <div class="period-header">Pilih periode</div>

            <div class="period-body">
                <div class="period-presets" data-role="presets">
                    @foreach ([
                        'today' => 'Hari ini',
                        'yesterday' => 'Kemarin',
                        'last-week' => 'Minggu lalu',
                        'last-quarter' => 'Kuartal lalu',
                        'last-month' => 'Bulan lalu',
                        'last-year' => 'Tahun lalu',
                        'wtd' => 'Minggu ini',
                        'mtd' => 'Bulan ini',
                        'ytd' => 'Tahun ini',
                    ] as $key => $text)
                        <button type="button" class="period-preset" data-preset="{{ $key }}">{{ $text }}</button>
                    @endforeach
                </div>

                <div class="period-cal">
                    <div class="period-inputs">
                        <div class="period-input">
                            <span class="period-input-icon" aria-hidden="true">🗓</span>
                            <input type="text" inputmode="numeric" maxlength="10" placeholder="DD/MM/YYYY"
                                   aria-label="Tanggal mulai" data-role="input-start">
                        </div>
                        <div class="period-input">
                            <span class="period-input-icon" aria-hidden="true">🗓</span>
                            <input type="text" inputmode="numeric" maxlength="10" placeholder="DD/MM/YYYY"
                                   aria-label="Tanggal akhir" data-role="input-end">
                        </div>
                    </div>

                    <div class="period-nav">
                        <button type="button" class="period-nav-btn" data-role="prev" aria-label="Bulan sebelumnya">‹</button>
                        <div class="period-month" data-role="month" aria-live="polite"></div>
                        <button type="button" class="period-nav-btn" data-role="next" aria-label="Bulan berikutnya">›</button>
                    </div>

                    <div class="period-grid period-weekdays">
                        @foreach (['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'] as $w)
                            <div class="period-wd">{{ $w }}</div>
                        @endforeach
                    </div>
                    <div class="period-grid" data-role="grid"></div>
                </div>
            </div>

            <div class="period-footer">
                <button type="button" class="period-btn-cancel" data-role="cancel">Batal</button>
                <button type="button" class="period-btn-apply" data-role="apply">Terapkan</button>
            </div>
        </div>
    </div>
</div>

<script>
    (() => {
        const root = document.getElementById('{{ $pid }}');
        const el = role => root.querySelector(`[data-role="${role}"]`);
        const toggle = el('toggle');
        const layer = el('layer');
        const popover = el('popover');
        const grid = el('grid');
        const monthLabel = el('month');
        const inStart = el('input-start');
        const inEnd = el('input-end');

        const MONTHS = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
            'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];

        // Tanggal dipegang sebagai objek Date pada jam 12 siang, jadi pergeseran
        // zona waktu / DST tidak pernah menggeser harinya.
        const day = (y, m, d) => new Date(y, m, d, 12);
        const today = () => { const n = new Date(); return day(n.getFullYear(), n.getMonth(), n.getDate()); };
        const iso = d => [d.getFullYear(), String(d.getMonth() + 1).padStart(2, '0'),
            String(d.getDate()).padStart(2, '0')].join('-');
        const fromIso = s => { const [y, m, d] = s.split('-').map(Number); return day(y, m - 1, d); };
        const shift = (d, n) => day(d.getFullYear(), d.getMonth(), d.getDate() + n);
        const monthStart = d => day(d.getFullYear(), d.getMonth(), 1);
        const monthEnd = d => day(d.getFullYear(), d.getMonth() + 1, 0);
        const sameDay = (a, b) => a && b && +a === +b;
        // Minggu dimulai hari Minggu, mengikuti kolom kalender di atas.
        const weekStart = d => shift(d, -d.getDay());

        const applied = { start: fromIso(root.dataset.start), end: fromIso(root.dataset.end) };

        // Salinan kerja selama popover terbuka. `end` null berarti rentang baru
        // sedang dimulai dan menunggu klik kedua.
        let tempStart = applied.start;
        let tempEnd = applied.end;
        let viewMonth = monthStart(applied.end || applied.start);
        let hover = null;   // Date yang sedang disorot, untuk pratinjau rentang.

        const PRESETS = {
            'today': () => [today(), today()],
            'yesterday': () => [shift(today(), -1), shift(today(), -1)],
            'last-week': () => { const s = shift(weekStart(today()), -7); return [s, shift(s, 6)]; },
            'last-quarter': () => {
                const t = today(), q = Math.floor(t.getMonth() / 3) - 1;
                const s = day(t.getFullYear(), q * 3, 1);
                return [s, monthEnd(day(s.getFullYear(), s.getMonth() + 2, 1))];
            },
            'last-month': () => { const s = monthStart(shift(monthStart(today()), -1)); return [s, monthEnd(s)]; },
            'last-year': () => { const y = today().getFullYear() - 1; return [day(y, 0, 1), day(y, 11, 31)]; },
            'wtd': () => [weekStart(today()), today()],
            'mtd': () => [monthStart(today()), today()],
            'ytd': () => [day(today().getFullYear(), 0, 1), today()],
        };

        /** Rentang yang digambar: pilihan pasti, atau pratinjau start→hover. */
        function shown() {
            if (tempStart && !tempEnd && hover) {
                return hover < tempStart ? [hover, tempStart] : [tempStart, hover];
            }
            return [tempStart, tempEnd];
        }

        const fmt = d => d ? [String(d.getDate()).padStart(2, '0'),
            String(d.getMonth() + 1).padStart(2, '0'), d.getFullYear()].join('/') : '';

        /**
         * Tombol tanggal bulan yang sedang dilihat. Sengaja disimpan: sorotan
         * hanya boleh mengubah kelas CSS, tidak membangun ulang tombolnya.
         * Kalau tombolnya diganti di antara mousedown dan mouseup, browser tidak
         * pernah mengirim `click` — klik kedua (ujung rentang) jadi hilang.
         *
         * @type {{ btn: HTMLButtonElement, date: Date }[]}
         */
        let cells = [];

        /** Bangun ulang petak bulan. Hanya saat bulan yang dilihat berganti. */
        function buildMonth() {
            const lead = monthStart(viewMonth).getDay();
            const total = monthEnd(viewMonth).getDate();

            grid.innerHTML = '';
            cells = [];

            for (let i = 0; i < lead; i++) {
                const blank = document.createElement('div');
                blank.className = 'period-day empty';
                grid.appendChild(blank);
            }

            for (let d = 1; d <= total; d++) {
                const date = day(viewMonth.getFullYear(), viewMonth.getMonth(), d);
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'period-day';
                btn.dataset.date = iso(date);
                btn.textContent = d;
                grid.appendChild(btn);
                cells.push({ btn, date });
            }
        }

        /** Segarkan tampilan tanpa menyentuh struktur DOM. */
        function paint() {
            monthLabel.textContent = MONTHS[viewMonth.getMonth()] + ' ' + viewMonth.getFullYear();

            // Input tidak ditulis ulang saat sedang diketik, supaya kursor dan
            // angka setengah jadi tidak terlempar.
            if (document.activeElement !== inStart) inStart.value = fmt(tempStart);
            if (document.activeElement !== inEnd) inEnd.value = fmt(tempEnd);

            const [a, b] = shown();
            const now = today();

            for (const { btn, date } of cells) {
                btn.classList.toggle('endpoint', sameDay(date, a) || sameDay(date, b));
                btn.classList.toggle('in-range', !!(a && b && date > a && date < b));
                btn.classList.toggle('today', sameDay(date, now));
            }

            root.querySelectorAll('[data-preset]').forEach(btn => {
                const [s, e] = PRESETS[btn.dataset.preset]();
                btn.classList.toggle('active', sameDay(tempStart, s) && sameDay(tempEnd, e));
            });
        }

        /** Ganti bulan yang dilihat, lalu gambar. */
        function show(month) {
            viewMonth = monthStart(month);
            buildMonth();
            paint();
        }

        /** Model dua klik: klik pertama memulai rentang baru, kedua menutupnya. */
        function pick(date) {
            if (!tempStart || tempEnd) {
                tempStart = date;
                tempEnd = null;
            } else if (date >= tempStart) {
                tempEnd = date;
            } else {
                tempEnd = tempStart;
                tempStart = date;
            }
            hover = null;
            paint();
        }

        grid.addEventListener('click', e => {
            const cell = e.target.closest('[data-date]');
            if (cell) pick(fromIso(cell.dataset.date));
        });
        grid.addEventListener('mouseover', e => {
            const cell = e.target.closest('[data-date]');
            // Pratinjau hanya berarti saat menunggu klik kedua.
            if (!cell || !tempStart || tempEnd) return;
            const date = fromIso(cell.dataset.date);
            if (sameDay(hover, date)) return;
            hover = date;
            paint();
        });
        grid.addEventListener('mouseleave', () => {
            if (hover) { hover = null; paint(); }
        });

        root.querySelectorAll('[data-preset]').forEach(btn => {
            btn.addEventListener('click', () => {
                [tempStart, tempEnd] = PRESETS[btn.dataset.preset]();
                hover = null;
                show(tempEnd);
            });
        });

        /**
         * Input bertopeng DD/MM/YYYY: cukup ketik angka, garis miringnya
         * disisipkan sendiri. Tanggal baru dipakai setelah lengkap dan valid.
         */
        function onInput(input, which) {
            const digits = input.value.replace(/\D/g, '').slice(0, 8);
            let dd = digits.slice(0, 2), mm = digits.slice(2, 4);
            const yyyy = digits.slice(4, 8);

            // Bulan dijepit 1–12, hari 1–jumlah hari bulan itu. Selama tahun
            // belum diketik dipakai tahun kabisat, jadi 29/02 tetap boleh.
            if (mm.length === 2) mm = String(Math.min(12, Math.max(1, +mm))).padStart(2, '0');
            if (dd.length === 2) {
                let n = Math.max(1, Math.min(31, +dd));
                if (mm.length === 2) {
                    const y = yyyy.length === 4 ? +yyyy : 2000;
                    n = Math.min(n, monthEnd(day(y, +mm - 1, 1)).getDate());
                }
                dd = String(n).padStart(2, '0');
            }

            let masked = dd;
            if (digits.length > 2) masked = dd + '/' + mm;
            if (digits.length > 4) masked = dd + '/' + mm + '/' + yyyy;
            input.value = masked;

            if (digits.length < 8) return;
            const date = day(+yyyy, +mm - 1, +dd);
            // Tanggal hasil jepitan selalu nyata, tapi tahun 0000 tetap ditolak.
            if (!yyyy || +yyyy < 1970) return;

            if (which === 'start') tempStart = date; else tempEnd = date;
            hover = null;
            show(date);
        }
        inStart.addEventListener('input', () => onInput(inStart, 'start'));
        inEnd.addEventListener('input', () => onInput(inEnd, 'end'));

        function open() {
            tempStart = applied.start;
            tempEnd = applied.end;
            hover = null;
            layer.hidden = false;
            toggle.setAttribute('aria-expanded', 'true');
            align();
            show(applied.end || applied.start);
        }

        function close() {
            layer.hidden = true;
            toggle.setAttribute('aria-expanded', 'false');
            hover = null;
        }

        /**
         * Popover biasanya menggantung ke kiri dari trigger (right: 0). Kalau
         * trigger-nya sendiri dekat tepi kiri layar, itu membuatnya keluar
         * layar — jadi dibalik membuka ke kanan.
         */
        function align() {
            const rect = root.getBoundingClientRect();
            const width = Math.min(480, window.innerWidth * 0.92);
            popover.classList.toggle('align-left', rect.right - width < 8);
        }

        toggle.addEventListener('click', () => layer.hidden ? open() : close());
        el('backdrop').addEventListener('click', close);
        el('cancel').addEventListener('click', close);
        el('prev').addEventListener('click', () => show(shift(viewMonth, -1)));
        el('next').addEventListener('click', () => show(shift(monthEnd(viewMonth), 1)));

        window.addEventListener('keydown', e => {
            if (e.key === 'Escape' && !layer.hidden) close();
        });
        window.addEventListener('resize', () => {
            if (!layer.hidden) align();
        });

        el('apply').addEventListener('click', () => {
            // Rentang yang baru separuh dipilih dianggap satu hari.
            let a = tempStart, b = tempEnd || tempStart;
            if (!a) return;
            if (a > b) [a, b] = [b, a];

            const url = new URL(root.dataset.target, window.location.origin);
            Object.entries(JSON.parse(root.dataset.keep)).forEach(([k, v]) => url.searchParams.set(k, v));
            url.searchParams.set('start', iso(a));
            url.searchParams.set('end', iso(b));
            window.location.href = url.toString();
        });

        show(viewMonth);
    })();
</script>