@php

    $enableHolidayHour = $field['enableHolidayHour'] ?? false;
    $holidayName = $field['holidayName'] ?? '';
    $holidayHour = $field['holidayHour'] ?? '';

    $valueDates = json_decode($holidayHour, true);

    $value = old($field['name']) ?? ($field['value'] ?? []);

    if (is_string($value)) {
        $value = json_decode($value, true) ?? [];
    }

    /**
     * Ensure at least 1 block exists
     */
    if (empty($value)) {
        $value = [
            [
                'holiday' => 'new_year',
                'dates' => [
                    [
                        'date' => '',
                        'open_time' => '',
                        'close_time' => '',
                    ]
                ]
            ]
        ];
    }

    $holidays = [
        'new_year' => 'New Year',
        'waitangi_day' => 'Waitangi Day',
        'easter' => 'Easter',
        'anzac' => 'Anzac Day',
        'kings_birthday' => "King's Birthday",
        'matariki' => 'Matariki',
        'labour' => 'Labour Day',
        'christmas' => 'Christmas',
    ];
@endphp

<div class="form-group col-md-12">
    <div id="holiday-wrapper" class="card">
        @foreach($value as $hIndex => $block)

            <div class=" mb-3 holiday-block">

                <div class="card-header d-flex flex-column justify-content-between align-items-start">
                    <label class="fw-bold mb-2">{{ $field['label'] ?? 'Holiday Hours' }}</label>
                    <div class="d-flex align-items-center gap-2">
                        <div>
                            <input type="checkbox" name='enable_holiday' id="enable_holiday" clas="mb-2" {{ $enableHolidayHour ? 'checked' : '' }}/>Enable
                        </div>
                        <div>
                            <select class="form-control w-100"
                                name="{{ $field['name'] }}[{{ $hIndex }}][holiday]">

                                @foreach($holidays as $key => $label)
                                    <option value="{{ $key }}"
                                        @selected(($holidayName ?? '') === $key)>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- <button type="button" class="btn btn-danger btn-sm remove-holiday">
                        Remove Holiday
                    </button> --}}

                </div>

                <div class="card-body">

                    <div class="dates-container">

                        @foreach(($valueDates ?? []) as $dIndex => $row)

                            <div class="row mb-2 date-row">
                                

                                <div class="col-md-1">
                                     <input type="checkbox" name="{{ $field['name'] }}[{{ $hIndex }}][dates][{{ $dIndex }}][isClosed]" class="holiday-is-closed" {{ $row['is_closed'] === "true" ? 'checked' : '' }} > Is Closed?
                                </div>
                                <div class="col-md-4">
                                    <input type="date"
                                        name="{{ $field['name'] }}[{{ $hIndex }}][dates][{{ $dIndex }}][date]"
                                        class="form-control open-date"
                                        value="{{ $row['date'] ?? '' }}">
                                </div>

                                <div class="col-md-3">
                                    <input type="time"
                                        name="{{ $field['name'] }}[{{ $hIndex }}][dates][{{ $dIndex }}][open_time]"
                                        class="form-control open-time"
                                        value="{{ $row['open_time'] ?? '' }}" {{ $row['is_closed'] === "true" ? 'disabled' : '' }}>
                                </div>

                                <div class="col-md-3">
                                    <input type="time"
                                        name="{{ $field['name'] }}[{{ $hIndex }}][dates][{{ $dIndex }}][close_time]"
                                        class="form-control close-time"
                                        value="{{ $row['close_time'] ?? '' }}" {{ $row['is_closed'] === "true" ? 'disabled' : '' }}>
                                </div>

                                <div class="col-md-1">
                                    <button type="button" class="btn btn-danger btn-sm remove-date">
                                        −
                                    </button>
                                </div>

                            </div>

                        @endforeach

                    </div>

                    <button type="button"
                        class="btn btn-primary btn-sm add-date">
                        + Add Date
                    </button>

                </div>
            </div>

        @endforeach

    </div>

    {{-- <button type="button" class="btn btn-success" id="add-holiday">
        + Add Holiday Type
    </button> --}}

</div>

@push('after_scripts')
<script>

(function () {

    let fieldName = "{{ $field['name'] }}";

    // =========================
    // ADD HOLIDAY BLOCK
    // =========================
    // document.getElementById('add-holiday').addEventListener('click', function () {

    //     let wrapper = document.getElementById('holiday-wrapper');
    //     let index = wrapper.querySelectorAll('.holiday-block').length;

    //     let holidays = @json($holidays);

    //     let options = Object.entries(holidays).map(([k, v]) => {
    //         return `<option value="${k}">${v}</option>`;
    //     }).join('');

    //     let html = `
    //     <div class="card mb-3 holiday-block">

    //         <div class="card-header d-flex justify-content-between align-items-center">

    //             <select class="form-control w-50" name="${fieldName}[${index}][holiday]">
    //                 ${options}
    //             </select>

    //             <button type="button" class="btn btn-danger btn-sm remove-holiday">
    //                 Remove Holiday
    //             </button>

    //         </div>

    //         <div class="card-body">

    //             <div class="dates-container">

    //                 <div class="row mb-2 date-row">

    //                     <div class="col-md-4">
    //                         <input type="date"
    //                             name="${fieldName}[${index}][dates][0][date]"
    //                             class="form-control">
    //                     </div>

    //                     <div class="col-md-3">
    //                         <input type="time"
    //                             name="${fieldName}[${index}][dates][0][open_time]"
    //                             class="form-control">
    //                     </div>

    //                     <div class="col-md-3">
    //                         <input type="time"
    //                             name="${fieldName}[${index}][dates][0][close_time]"
    //                             class="form-control">
    //                     </div>

    //                     <div class="col-md-2">
    //                         <button type="button" class="btn btn-danger btn-sm remove-date">
    //                             −
    //                         </button>
    //                     </div>

    //                 </div>

    //             </div>

    //             <button type="button" class="btn btn-primary btn-sm add-date">
    //                 + Add Date
    //             </button>

    //         </div>

    //     </div>
    //     `;

    //     wrapper.insertAdjacentHTML('beforeend', html);
    // });

    document.querySelectorAll(".dates-container").forEach(function(container) {
        container.addEventListener("change", function (e) {
            if (!e.target.classList.contains("holiday-is-closed")) {
                return;
            }
            console.log("change");

            const cb = e.target;
            const row = cb.closest(".date-row");

            const dateField = row.querySelector(".open-date");
            const openField = row.querySelector(".open-time");
            const closeField = row.querySelector(".close-time");

            dateField.disabled = cb.checked;
            openField.disabled = cb.checked;
            closeField.disabled = cb.checked;

            if (cb.checked) {
                dateField.value = "";
                openField.value = "";
                closeField.value = "";
            }
        });
    });

    // =========================
    // ADD DATE
    // =========================
    document.addEventListener('click', function (e) {

        if (e.target.closest('.add-date')) {

            let block = e.target.closest('.holiday-block');
            let container = block.querySelector('.dates-container');

            let hIndex = [...document.querySelectorAll('.holiday-block')].indexOf(block);
            let dIndex = container.querySelectorAll('.date-row').length;

            let html = `
            <div class="row mb-2 date-row">

                <div class="col-md-1">
                        <input type="checkbox" name="${fieldName}[${hIndex}][dates][${dIndex}][isClosed]" class="holiday-is-closed"> Is Closed?
                </div>

                <div class="col-md-4">
                    <input type="date"
                        name="${fieldName}[${hIndex}][dates][${dIndex}][date]"
                        class="form-control open-date">
                </div>

                <div class="col-md-3">
                    <input type="time"
                        name="${fieldName}[${hIndex}][dates][${dIndex}][open_time]"
                        class="form-control open-time">
                </div>

                <div class="col-md-3">
                    <input type="time"
                        name="${fieldName}[${hIndex}][dates][${dIndex}][close_time]"
                        class="form-control close-time">
                </div>

                <div class="col-md-1">
                    <button type="button" class="btn btn-danger btn-sm remove-date">−</button>
                </div>

            </div>
            `;

            container.insertAdjacentHTML('beforeend', html);
        }

        // =========================
        // REMOVE DATE
        // =========================
        if (e.target.closest('.remove-date')) {

            let row = e.target.closest('.date-row');
            let container = row.closest('.dates-container');

            if (container.querySelectorAll('.date-row').length === 1) {
                alert('Each holiday must have at least one date.');
                return;
            }

            row.remove();
        }

        // =========================
        // REMOVE HOLIDAY BLOCK
        // =========================
        // if (e.target.closest('.remove-holiday')) {

        //     let blocks = document.querySelectorAll('.holiday-block');

        //     if (blocks.length === 1) {
        //         alert('At least one holiday is required.');
        //         return;
        //     }

        //     e.target.closest('.holiday-block').remove();
        // }

    });

})();

</script>
@endpush