@php
    // Generate hour options from 00 to 23
    $hourOptions = array_map(function ($h) {
        return str_pad($h, 2, '0', STR_PAD_LEFT);
    }, range(0, 23));
    array_unshift($hourOptions, null);

    // Generate minute options from 00 to 55 with a step of 5 minutes
    $minuteOptions = array_map(function ($m) {
        return str_pad($m, 2, '0', STR_PAD_LEFT);
    }, range(0, 55, 5));
    array_unshift($minuteOptions, null);

    // Retrieve old values or set default
    $oldTimeEnd = old(square_brackets_to_dots($field['name'])) ?? ($field['value'] ?? ($field['default'] ?? ''));
    $oldHourEnd = $oldTimeEnd ? explode(':', $oldTimeEnd)[0] : null;
    $oldMinuteEnd = $oldTimeEnd ? explode(':', $oldTimeEnd)[1] : null;
@endphp

<!-- html5 time input -->
@include('crud::fields.inc.wrapper_start')
<label>{!! $field['label'] !!}</label>
<div class="row">
    <div class="col-md-6 pr-1">
        <select onchange="onHourEnd(this.value)" id="hourSelectEnd" @include('crud::fields.inc.attributes', ['default_class' => 'form-control'])>
            @if (count($hourOptions))
                @foreach ($hourOptions as $hour)
                    <option value="{{ $hour === null ? '' : $hour }}"
                        {{ $hour !== null && $hour == $oldHourEnd ? 'selected' : '' }}>
                        {{ $hour === null ? '-' : $hour }}</option>
                @endforeach
            @endif
        </select>
    </div>
    <div class="col-md-6 pl-1">
        <select onchange="onMinuteEnd(this.value)" id="minuteSelectEnd" @include('crud::fields.inc.attributes', ['default_class' => 'form-control'])>
            @if (count($minuteOptions))
                @foreach ($minuteOptions as $minute)
                    <option value="{{ $minute === null ? '' : $minute }}"
                        {{ $minute !== null && $minute == $oldMinuteEnd ? 'selected' : '' }}>
                        {{ $minute === null ? '-' : $minute }}</option>
                @endforeach
            @endif
        </select>
    </div>
    <input type="hidden" id="time_end" name="{{ $field['name'] }}"
        value="{{ old(square_brackets_to_dots($field['name'])) ?? ($field['value'] ?? ($field['default'] ?? '')) }}">
</div>

{{-- HINT --}}
@if (isset($field['hint']))
    <p class="help-block">{!! $field['hint'] !!}</p>
@endif
@include('crud::fields.inc.wrapper_end')

@push('crud_fields_scripts')
    <script>
        let fullEnd = document.getElementById("time_end").value;
        let resEnd = fullEnd.split(":");
        let hourEnd = resEnd[0] || null; // Set to null if undefined or empty
        let minuteEnd = resEnd[1] || null; // Set to null if undefined or empty

        // Set Hour
        var hourSelectEnd = document.getElementById('hourSelectEnd');
        if (hourEnd) {
            var optHourEnd = hourSelectEnd.options;
            for (var optAEnd, aEnd = 0; optAEnd = optHourEnd[aEnd]; aEnd++) {
                if (optAEnd.value == hourEnd) {
                    hourSelectEnd.selectedIndex = aEnd;
                    break;
                }
            }
        }

        // Set Minute
        var minuteSelectEnd = document.getElementById('minuteSelectEnd');
        if (minuteEnd) {
            var optMinuteEnd = minuteSelectEnd.options;
            for (var optBEnd, bEnd = 0; optBEnd = optMinuteEnd[bEnd]; bEnd++) {
                if (optBEnd.value == minuteEnd) {
                    minuteSelectEnd.selectedIndex = bEnd;
                    break;
                }
            }
        }

        function onHourEnd(val) {
            hourEnd = val;
            checkTimeEnd();
        }

        function onMinuteEnd(val) {
            minuteEnd = val;
            checkTimeEnd();
        }

        function checkTimeEnd() {
            // Update hidden input only if both hour and minute are selected
            if (hourEnd && minuteEnd) {
                document.getElementById("time_end").value = hourEnd + ":" + minuteEnd;
            } else {
                document.getElementById("time_end").value = ''; // Clear the hidden input if any is null
            }
        }
    </script>
@endpush