{{--
    Quick date presets for the Reports filters — mirrors the CDR page look.
    Expects $from and $to (Y-m-d) in scope. Must be placed INSIDE the report's
    <form> (it sets the form's name="from"/name="to" inputs and submits).
--}}
@php
    $pToday     = now()->format('Y-m-d');
    $pYesterday = now()->subDay()->format('Y-m-d');
    $pLast7     = now()->subDays(6)->format('Y-m-d');
    $pLast30    = now()->subDays(29)->format('Y-m-d');
    $pMonth     = now()->startOfMonth()->format('Y-m-d');
@endphp
<div class="d-flex align-items-center gap-2 flex-wrap mb-3">
    <span style="font-size:.75rem;font-weight:700;color:var(--sb-text-secondary);text-transform:uppercase;letter-spacing:.06em;">Quick Date Presets</span>
    <button type="button" class="rpt-preset-btn {{ $from === $pToday && $to === $pToday ? 'active' : '' }}" data-from="{{ $pToday }}" data-to="{{ $pToday }}">Today</button>
    <button type="button" class="rpt-preset-btn {{ $from === $pYesterday && $to === $pYesterday ? 'active' : '' }}" data-from="{{ $pYesterday }}" data-to="{{ $pYesterday }}">Yesterday</button>
    <button type="button" class="rpt-preset-btn {{ $from === $pLast7 && $to === $pToday ? 'active' : '' }}" data-from="{{ $pLast7 }}" data-to="{{ $pToday }}">Last 7 Days</button>
    <button type="button" class="rpt-preset-btn {{ $from === $pLast30 && $to === $pToday ? 'active' : '' }}" data-from="{{ $pLast30 }}" data-to="{{ $pToday }}">Last 30 Days</button>
    <button type="button" class="rpt-preset-btn {{ $from === $pMonth && $to === $pToday ? 'active' : '' }}" data-from="{{ $pMonth }}" data-to="{{ $pToday }}">This Month</button>
    <button type="button" class="rpt-preset-btn" data-custom="1">Custom</button>
</div>

<style>
    .rpt-preset-btn { padding:5px 14px; border-radius:999px; font-size:.78rem; font-weight:600; border:1px solid var(--sb-border); background:#fff; color:var(--sb-text-secondary); cursor:pointer; transition:all .15s; }
    .rpt-preset-btn:hover, .rpt-preset-btn.active { background:var(--sb-primary); border-color:var(--sb-primary); color:#fff; }
</style>

<script>
(function () {
    document.querySelectorAll('.rpt-preset-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var form = this.closest('form');
            if (!form) return;
            var fromI = form.querySelector('[name="from"]');
            var toI   = form.querySelector('[name="to"]');
            if (this.dataset.custom) { if (fromI) fromI.focus(); return; }
            if (fromI) fromI.value = this.dataset.from;
            if (toI)   toI.value   = this.dataset.to;
            form.submit();
        });
    });
})();
</script>