@props(['action' => null])

<div class="bg-white shadow-sm border rounded-lg p-4 mb-6">
    <form method="GET" action="{{ $action }}" class="space-y-4" id="date-filter-form">
        <div class="flex flex-col md:flex-row md:items-end md:space-x-4 space-y-4 md:space-y-0">
            <!-- Sélecteur de période -->
            <div class="flex-1">
                <label for="period" class="block text-sm font-medium text-gray-700 mb-1">
                    <svg class="inline w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                    Période
                </label>
                <select
                    id="period"
                    name="period"
                    class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                    onchange="handlePeriodChange(this.value)"
                >
                    <option value="today" {{ request('period', 'today') === 'today' ? 'selected' : '' }}>Aujourd'hui</option>
                    <option value="week" {{ request('period') === 'week' ? 'selected' : '' }}>7 derniers jours</option>
                    <option value="month" {{ request('period') === 'month' ? 'selected' : '' }}>30 derniers jours</option>
                    <option value="custom" {{ request('period') === 'custom' ? 'selected' : '' }}>Période personnalisée</option>
                    <option value="all" {{ request('period') === 'all' ? 'selected' : '' }}>Toutes les données</option>
                </select>
            </div>

            <!-- Dates personnalisées (visible uniquement si "custom" est sélectionné) -->
            <div id="custom-dates" class="flex-1 space-y-2 md:space-y-0 md:space-x-2 md:flex" style="display: {{ request('period') === 'custom' ? 'flex' : 'none' }};">
                <div class="flex-1">
                    <label for="date_from" class="block text-sm font-medium text-gray-700 mb-1">
                        Date de début
                    </label>
                    <input
                        type="date"
                        id="date_from"
                        name="date_from"
                        value="{{ request('date_from') }}"
                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                    >
                </div>
                <div class="flex-1">
                    <label for="date_to" class="block text-sm font-medium text-gray-700 mb-1">
                        Date de fin
                    </label>
                    <input
                        type="date"
                        id="date_to"
                        name="date_to"
                        value="{{ request('date_to') }}"
                        class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                    >
                </div>
            </div>

            <!-- Boutons d'action -->
            <div class="flex space-x-2">
                <button
                    type="submit"
                    class="inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition"
                >
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                    </svg>
                    Appliquer
                </button>
                <a
                    href="{{ $action ?: url()->current() }}"
                    class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition"
                >
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                    Réinitialiser
                </a>
            </div>
        </div>

        <!-- Affichage de la période active -->
        @if(request()->has('period') && request('period') !== 'all')
            <div class="flex items-center text-sm text-gray-600">
                <svg class="w-4 h-4 mr-1 text-indigo-500" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                </svg>
                <span class="font-medium">
                    Filtre actif :
                    @switch(request('period'))
                        @case('today')
                            Aujourd'hui
                            @break
                        @case('week')
                            7 derniers jours
                            @break
                        @case('month')
                            30 derniers jours
                            @break
                        @case('custom')
                            @if(request('date_from') && request('date_to'))
                                Du {{ \Carbon\Carbon::parse(request('date_from'))->format('d/m/Y') }} au {{ \Carbon\Carbon::parse(request('date_to'))->format('d/m/Y') }}
                            @elseif(request('date_from'))
                                À partir du {{ \Carbon\Carbon::parse(request('date_from'))->format('d/m/Y') }}
                            @elseif(request('date_to'))
                                Jusqu'au {{ \Carbon\Carbon::parse(request('date_to'))->format('d/m/Y') }}
                            @else
                                Période personnalisée
                            @endif
                            @break
                    @endswitch
                </span>
            </div>
        @endif
    </form>
</div>

<script>
function handlePeriodChange(value) {
    const customDates = document.getElementById('custom-dates');
    if (value === 'custom') {
        customDates.style.display = 'flex';
    } else {
        customDates.style.display = 'none';
        // Auto-submit pour les options prédéfinies
        if (value !== 'custom') {
            document.getElementById('date-filter-form').submit();
        }
    }
}
</script>