@php use Seka\Portal\Modul\Statistiky\Http\View\ZaznamDatumFilterEnum; @endphp
<form action="{{ $filterFormActionRoute }}" method="post">
    @csrf
    <div class="form-row">
        <div class="col">
            <div class="form-group">
                <label class="col-form-label" for="datefilter">Zvoľte obdobie filtrácie</label>
                <select class="custom-select" name="datefilter" id="datefilter"
                        onchange="zobrazitSkrytVyberaceDatumovPreFiltraciu()">
                    @foreach(ZaznamDatumFilterEnum::cases() as $case)
                        @php
                            $selectedDateFilter = old('datefilter', $form_datefilter);
                            if (is_string($selectedDateFilter)) {
                                $selectedDateFilter = ZaznamDatumFilterEnum::from($selectedDateFilter);
                            }
                        @endphp
                        <option @if($selectedDateFilter->equal($case)) selected
                                @endif value="{{ $case->value }}">{{ $case->label() }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <div class="d-none" id="filtration_by_dates">
        <div class="alert alert-primary text-small">
            <i class="icon-info mr-2"></i>
            Definovaný rozsah nesmie presiahnuť obdobie dvanástich mesiacov.
        </div>

        <div class="form-row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="date_from" class="col-form-label">Dátum od <span class="text-red">*</span></label>
                    <input type="text" class="form-control" name="date_from" autocomplete="off"
                           value="{{old('date_from', $form_date_from)}}"
                           data-flatpickr
                           data-alt-input="true"
                           data-alt-format="d.m.Y"
                           data-date-format="Y-m-d"
                           data-week-numbers="true"
                           data-time_24hr="false"
                           data-month-selector-type="static"
                           data-enable-time="false"
                           data-min-date="2020-01-01"
                           data-max-date="today"
                    >
                    @error('date_from')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <label for="date_to" class="col-form-label">Dátum do <span class="text-red">*</span></label>
                    <input type="text" class="form-control" name="date_to" autocomplete="off"
                           value="{{old('date_to', $form_date_to)}}"
                           data-flatpickr
                           data-alt-input="true"
                           data-alt-format="d.m.Y"
                           data-date-format="Y-m-d"
                           data-week-numbers="true"
                           data-time_24hr="false"
                           data-month-selector-type="static"
                           data-enable-time="false"
                           data-min-date="2020-01-01"
                           data-max-date="today"
                    >
                    @error('date_to')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col text-right">
            <button type="submit" class="btn btn-primary">
                <i class="icon-calendar"></i>
                Filtrovať
            </button>
        </div>
    </div>
</form>

@push('scripts')
    <script type="application/javascript">
        zobrazitSkrytVyberaceDatumovPreFiltraciu();

        function zobrazitSkrytVyberaceDatumovPreFiltraciu() {
            const x = document.getElementById('datefilter');
            const o = document.getElementById('filtration_by_dates');

            if (x instanceof Element && o instanceof Element) {
                if (x.value === 'POUZIVATELOM_SPECIFIKOVANY_ROZSAH') {
                    o.setAttribute('class', 'mt-2');
                } else {
                    o.setAttribute('class', 'd-none');
                }
            }
        }
    </script>
@endpush
