@php
    $shortcuts = [
        'today'      => __('اليوم'),
        'yesterday'  => __('أمس'),
        'week'       => __('هذا الأسبوع'),
        'month'      => __('هذا الشهر'),
        'last_week'  => __('آخر أسبوع'),
        'last_month' => __('آخر شهر'),
        'all_time'   => __('All time'),
    ];
    $currentPreset = $activePreset ?? 'today';
    $presetToShortcut = [
        'all_time' => 'all_time',
        'today' => 'today',
        'yesterday' => 'yesterday',
        'this_week' => 'week',
        'this_month' => 'month',
        'last_week' => 'last_week',
        'last_month' => 'last_month',
    ];
    $activeShortcut = $presetToShortcut[$currentPreset] ?? null;
    $dateFromValue = ($currentPreset === 'all_time' || !isset($dateFrom)) ? '' : $dateFrom->toDateString();
    $dateToValue = ($currentPreset === 'all_time' || !isset($dateTo)) ? '' : $dateTo->toDateString();
@endphp

<section class="simple-validation" id="dashboard-date-filter">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap" style="gap: 0.5rem;">
                        <h4 class="card-title mb-0">{{ __('Filter') }}</h4>
                        @if(!empty($dateRangeLabel))
                            <span class="badge badge-light-primary">{{ $dateRangeLabel }}</span>
                        @endif
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <form method="get" action="{{ route('admin.home') }}" class="form-horizontal" novalidate>
                            <input type="hidden" name="range" value="custom">

                            <div class="row">
                                <div class="col-sm-12 col-md-8 col-lg-6">
                                    <div class="form-group">
                                        <div class="controls">
                                            <label>{{ __('التاريخ') }}</label>
                                            <div class="mb-1 d-flex flex-wrap" style="gap: 4px;">
                                                @foreach($shortcuts as $key => $label)
                                                    @if($key === 'all_time')
                                                        <a href="{{ route('admin.home', ['range' => 'all_time']) }}"
                                                           class="btn btn-sm {{ $activeShortcut === 'all_time' ? 'btn-secondary active' : 'btn-outline-secondary' }}">
                                                            {{ $label }}
                                                        </a>
                                                    @else
                                                        <button type="button"
                                                                class="btn btn-sm {{ $activeShortcut === $key ? 'btn-secondary active' : 'btn-outline-secondary' }} date-shortcut"
                                                                data-range="{{ $key }}">
                                                            {{ $label }}
                                                        </button>
                                                    @endif
                                                @endforeach
                                            </div>
                                            <div class="d-flex align-items-center" style="gap: 4px;">
                                                <input type="date"
                                                       id="dashboard_date_from"
                                                       name="date_from"
                                                       class="form-control form-control-sm"
                                                       value="{{ $dateFromValue }}"
                                                       max="{{ now()->toDateString() }}"
                                                       style="flex:1;">
                                                <span class="text-muted">—</span>
                                                <input type="date"
                                                       id="dashboard_date_to"
                                                       name="date_to"
                                                       class="form-control form-control-sm"
                                                       value="{{ $dateToValue }}"
                                                       max="{{ now()->toDateString() }}"
                                                       style="flex:1;">
                                            </div>
                                            <div class="help-block"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary waves-effect waves-light mt-1">{{ __('Search') }}</button>
                            <a href="{{ route('admin.home', ['range' => 'today']) }}" class="btn btn-outline-warning waves-effect waves-light mt-1">{{ __('Reset') }}</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var dateFrom = document.getElementById('dashboard_date_from');
    var dateTo = document.getElementById('dashboard_date_to');
    if (!dateFrom || !dateTo) return;

    function fmt(d) {
        var month = '' + (d.getMonth() + 1);
        var day = '' + d.getDate();
        var year = d.getFullYear();
        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;
        return [year, month, day].join('-');
    }

    function weekStartSaturday(today) {
        var weekStart = new Date(today);
        var day = today.getDay();
        var daysFromSaturday = (day + 1) % 7;
        weekStart.setDate(today.getDate() - daysFromSaturday);
        return weekStart;
    }

    function setActiveButton(activeBtn) {
        document.querySelectorAll('#dashboard-date-filter .date-shortcut').forEach(function (btn) {
            btn.classList.remove('active', 'btn-secondary');
            btn.classList.add('btn-outline-secondary');
        });
        if (activeBtn) {
            activeBtn.classList.remove('btn-outline-secondary');
            activeBtn.classList.add('btn-secondary', 'active');
        }
    }

    document.querySelectorAll('#dashboard-date-filter .date-shortcut').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var range = this.getAttribute('data-range');
            var today = new Date();
            today.setHours(0, 0, 0, 0);

            if (range === 'today') {
                dateFrom.value = fmt(today);
                dateTo.value = fmt(today);
            } else if (range === 'yesterday') {
                var yesterday = new Date(today);
                yesterday.setDate(today.getDate() - 1);
                dateFrom.value = fmt(yesterday);
                dateTo.value = fmt(yesterday);
            } else if (range === 'week') {
                var weekStart = weekStartSaturday(today);
                dateFrom.value = fmt(weekStart);
                dateTo.value = fmt(today);
            } else if (range === 'month') {
                var monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
                dateFrom.value = fmt(monthStart);
                dateTo.value = fmt(today);
            } else if (range === 'last_week') {
                var thisWeekStart = weekStartSaturday(today);
                var lastWeekStart = new Date(thisWeekStart);
                lastWeekStart.setDate(thisWeekStart.getDate() - 7);
                var lastWeekEnd = new Date(thisWeekStart);
                lastWeekEnd.setDate(thisWeekStart.getDate() - 1);
                dateFrom.value = fmt(lastWeekStart);
                dateTo.value = fmt(lastWeekEnd);
            } else if (range === 'last_month') {
                var lastMonthStart = new Date(today.getFullYear(), today.getMonth() - 1, 1);
                var lastMonthEnd = new Date(today.getFullYear(), today.getMonth(), 0);
                dateFrom.value = fmt(lastMonthStart);
                dateTo.value = fmt(lastMonthEnd);
            }

            setActiveButton(this);
        });
    });
});
</script>