@props([
    'col'       => 3,
    'label'     => null,
    'name'      => null,
    'fromName'  => 'from-date',
    'toName'    => 'to-date',
])

<div class="col-md-{{ $col }}">
    @if($label)
        <label for="{{ $name }}" class="form-label">{{ $label }}</label>
    @endif

    <input type="text"
           class="form-control form-control-sm daterange-picker"
           id="{{ $name }}"
           name="{{ $name }}"
           placeholder="{{ __('dashboard.select_date') }}..."
           autocomplete="off">

    <!-- hidden inputs -->
    <input type="hidden"
           name="{{ $fromName }}[{{ $name }}]"
           class="from-date">

    <input type="hidden"
           name="{{ $toName }}[{{ $name }}]"
           class="to-date">

    <div class="invalid-feedback"></div>

    @foreach ($errors->get($name) as $message)
        <span class="text-danger">
            <small class="errorTxt">{{ $message }}</small>
        </span>
    @endforeach
</div>

@once
@push('styles')
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush
@endonce

@once
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

   <script>
    document.addEventListener('DOMContentLoaded', function () {

        document.querySelectorAll('.daterange-picker').forEach(function (el) {

            const wrapper   = el.parentElement;
            const fromInput = wrapper.querySelector('.from-date');
            const toInput   = wrapper.querySelector('.to-date');

            const fp = flatpickr(el, {
                mode: "range",
                dateFormat: "Y-m-d",
                disableMobile: true,
                allowInput: false,
                maxDate: "today", // ✅ منع اختيار تاريخ مستقبلي

                onChange: function(selectedDates) {
                    if (selectedDates.length === 2) {
                        fromInput.value = selectedDates[0].toISOString().split('T')[0];
                        toInput.value   = selectedDates[1].toISOString().split('T')[0];
                    }
                }
            });

            el._flatpickrInstance = fp;
        });

        document.addEventListener('clear-date-ranges', function () {
            document.querySelectorAll('.daterange-picker').forEach(function (el) {
                if (el._flatpickrInstance) {
                    el._flatpickrInstance.clear();
                }

                const wrapper = el.parentElement;
                wrapper.querySelector('.from-date').value = '';
                wrapper.querySelector('.to-date').value   = '';
                el.value = '';
            });
        });

    });
</script>

@endpush
@endonce