@props(['website', 'from', 'to'])

@php
    $currentRange = request('range', '7d');
    $presets = [
        'today' => 'Today',
        '7d' => 'Last 7 days',
        '30d' => 'Last 30 days',
        '90d' => 'Last 90 days',
    ];
@endphp

<div x-data="{ open: false, mode: '{{ $currentRange }}' }" class="relative">
    <button
        @click="open = !open"
        type="button"
        class="inline-flex items-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
    >
        <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
        </svg>
        <span>{{ $presets[$currentRange] ?? $from->format('M j') . ' - ' . $to->format('M j, Y') }}</span>
        <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" fill="currentColor" />
        </svg>
    </button>

    <div
        x-show="open"
        @click.away="open = false"
        x-transition
        class="absolute right-0 z-10 mt-2 w-72 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5"
    >
        <div class="p-2">
            @foreach ($presets as $key => $label)
                <a
                    href="{{ route('dashboard.show', ['website' => $website, 'range' => $key]) }}"
                    class="block rounded-md px-3 py-2 text-sm {{ $currentRange === $key ? 'bg-indigo-50 text-indigo-700 font-medium' : 'text-gray-700 hover:bg-gray-100' }}"
                >
                    {{ $label }}
                </a>
            @endforeach

            <div class="my-2 border-t border-gray-100"></div>

            <form action="{{ route('dashboard.show', $website) }}" method="GET" class="px-3 py-2 space-y-3">
                <input type="hidden" name="range" value="custom">
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">From</label>
                    <input
                        type="date"
                        name="from"
                        value="{{ $from->toDateString() }}"
                        class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    >
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">To</label>
                    <input
                        type="date"
                        name="to"
                        value="{{ $to->toDateString() }}"
                        class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    >
                </div>
                <button
                    type="submit"
                    class="w-full rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-500"
                >
                    Apply
                </button>
            </form>
        </div>
    </div>
</div>