@php
    $messages = $field['holidayHourMessage'];
    $isChecked =  !empty($messages) ? true : false;
@endphp

<div class="form-group col-md-12">
    
            <div class="input-group">
                <input type="checkbox" name="enable-holiday-hour" id="enable-holiday-hour" {{ $isChecked ? 'checked' : '' }}>
                <label for="enable-holiday-hour" class="ms-2">Enable Holiday Hours</label>
            </div>


            <div class="input-group">
                <textarea
                    id="holiday-hour-message"
                    name="holiday-hour-message"
                    class="form-control"
                    placeholder="Add your holiday hour message">{{ $messages }}</textarea>
            </div>

</div>

@push('after_scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const enableHolidayHour = document.getElementById('enable-holiday-hour');
    enableHolidayHour.addEventListener("change", (e) => {
        const holidayHourMessage = document.getElementById('holiday-hour-message');
        holidayHourMessage.disabled = !e.target.checked;
        if ( !e.target.checked ) {
            holidayHourMessage.value = "";
            holidayHourMessage.disabled = true;
        }
        else {
            holidayHourMessage.disabled = false;;
        }
    });

});
</script>
@endpush