<div class="">
    <x-jetstream.label for="period-selector" value="{{ $label }}" />

    <div class="space-y-4">
        <!-- Period Selection -->
        <div class="w-full">
            <x-select
                wire:model.live="selectedPeriod"
                :options="[
                    ['label' => __('Previous Year'), 'value' => 'previous_year'],
                    ['label' => __('Previous Quarter'), 'value' => 'previous_quarter'],
                    ['label' => __('Previous Month'), 'value' => 'previous_month'],
                    ['label' => __('Custom'), 'value' => 'custom']
                ]"
                option-label="label"
                option-value="value"
                placeholder="{{ __('Select a period') }}"
            />
        </div>

        <!-- Custom Date Range (shown when 'custom' is selected) -->
        @if($selectedPeriod === 'custom')
            <div class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4" wire:ignore>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('From date') }}</label>
                        <x-flatpickr
                            id="select-period-from"
                            dateFormat="Y-m-d"
                            altFormat="d-m-Y"
                            placeholder="{{ __('Select start date') }}"
                            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm placeholder-theme-light"
                        />
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('To date') }}</label>
                        <x-flatpickr
                            id="select-period-to"
                            dateFormat="Y-m-d"
                            altFormat="d-m-Y"
                            placeholder="{{ __('Select end date') }}"
                            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm placeholder-theme-light"
                        />
                    </div>
                </div>

                @error('customFromDate')
                    <div class="text-sm text-red-700" role="alert">{{ __($message) }}</div>
                @enderror
                @error('customToDate')
                    <div class="text-sm text-red-700" role="alert">{{ __($message) }}</div>
                @enderror

                <div class="flex justify-end">
                    <x-jetstream.secondary-button
                        x-on:click="
                            let fp1 = document.getElementById('select-period-from');
                            let fp2 = document.getElementById('select-period-to');
                            let from = fp1 && fp1._flatpickr ? fp1._flatpickr.input.value : '';
                            let to   = fp2 && fp2._flatpickr ? fp2._flatpickr.input.value : '';
                            $wire.applyCustomPeriod(from, to)
                        "
                        wire:loading.attr="disabled"
                    >
                        <span wire:loading.remove wire:target="applyCustomPeriod">
                            {{ __('Update') }}
                        </span>
                        <span wire:loading wire:target="applyCustomPeriod">
                            <x-icon class="h-4 w-4 animate-spin" name="arrow-path" />
                        </span>
                    </x-jetstream.secondary-button>
                </div>
            </div>
        @endif

    </div>
</div>

@script
<script>
    Livewire.hook('morph.updated', () => {
        $nextTick(() => {
            document.querySelectorAll('.flatpickr-input').forEach(el => {
                if (!el._flatpickr && window.LaravelFlatpickr) {
                    window.LaravelFlatpickr.initializeFlatpickr(el);
                }
            });
        });
    });
</script>
@endscript
