@props([
    'formData',
    /** @var \App\Livewire\Projects\MosaicManager */
    'manager'
])

<x-modal wire:model.live="showDownloadModal" {{ $attributes }} >
    <x-form-modal submit="saveDownloads" wire:loading.class="opacity-50">
        <x-slot name="title">
            {{ __('Downloads') }}
        </x-slot>

        <x-slot name="description">
            {{ __('Download for project') }}
        </x-slot>


        <x-slot name="form">
            <div class="col-span-6 sm:col-span-4">
                <div
                    x-data="{
                    value: @entangle('formData.dateRange'),
    init() {
        let picker = flatpickr(this.$refs.picker, {
            mode: 'range',
            dateFormat: 'Y/m/d',
            defaultDate: this.value,
            onChange: (date, dateString) => {
                this.value = dateString.split(' to ');
            }
        });

        // Watcher voor het updaten van de picker
        this.$watch('value', () => picker.setDate(this.value));
    },

}"
                    class="max-w-sm w-full"
                >
                    <div class="mb-2 font-bold">Date Range:</div>

                    <input wire:model="formData.dateRange" class="w-full rounded-md border border-gray-200 px-3 py-2.5" x-ref="picker" type="text">
                </div>
                <x-input-error for="formData.date_range" class="mt-2"/>
                <x-input-error for="formData" class="mt-2"/>
            </div>
            <div>
                <span class="whitespace-nowrap"></span>
            </div>
        </x-slot>

        <x-slot name="actions">
            <x-action-message class="mr-3" on="saved">
                {{ __('Saved.') }}
            </x-action-message>

            <x-secondary-button class="mr-3"
                                type="button"
                                x-on:click="$wire.showDownloadModal = false"
            >
                {{ __('Cancel') }}
            </x-secondary-button>
            <x-button wire:loading.disabled>
                {{ __('Save') }}
            </x-button>

        </x-slot>
    </x-form-modal>
</x-modal>