@php
    $this->isEditing = empty($data) ? false : true;   
@endphp
<div>
    <x-modals.modal>
        <x-slot:title>
            @if(empty($data))
                Add Holiday
            @elseif(!empty($data['delete']))
                Delete Holiday: {{$holidayName}}
            @else 
                Update Holiday
            @endif
        </x-slot:title>
        @if(!empty($data['delete']))
            <form wire:submit.prevent="delete">
                <div class="form-header">
                    <p>Are you sure you want to delete?</p>
                </div>
                <div class="modal-btn delete-action">
                    <div class="row">
                        <div class="col-6">
                            <button type="submit" class="btn btn-primary w-100 continue-btn"> Delete </button>
                        </div>
                        <div class="col-6">
                            <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn"> Cancel </a> 
                        </div>
                    </div>
                </div>
            </form>
        @else
            <form wire:submit.prevent="submitForm">
                @foreach($fields as $field)
                    <div class="form-group">
                        <label>{{ucwords(str_replace('_', ' ', $field)) }} <span class="text-danger">*</span></label>
                        @php
                            $isFieldEditable = collect($editableFields)->contains($field);
                            $fieldName = "data.$field";
                        @endphp
                        @if($field === "holiday_date")
                            <input class="form-control @if(!$isFieldEditable) disabled @endif"
                                placeholder=""
                                type="date" 
                                wire:model.defer="{{ $fieldName }}"
                                @if($isEditing && !$isFieldEditable)
                                    disabled
                                @endif
                            >
                        @elseif($field === "completed")
                        <div class="custom-control custom-checkbox">
                            <input type="hidden" wire:model.defer="{{ $fieldName }}" value="0"> 
                            <input type="checkbox"
                                class="custom-control-input"
                                id="{{ $field }}"
                                wire:model.defer="{{ $fieldName }}"
                                @if($isEditing && !$isFieldEditable)
                                disabled
                                @endif>
                            <label class="custom-control-label" for="{{ $field }}">{{ ucwords(str_replace('_', ' ', $field)) }}</label>
                        </div>

                        @else
                            <input class="form-control @if(!$isFieldEditable) disabled @endif"
                                type="text"
                                wire:model.defer="{{ $fieldName }}"
                                @if($isEditing && !$isFieldEditable)
                                    disabled
                                @endif
                            >
                        @endif
                        @if($isFieldEditable) <!-- Only show error message if the field is editable -->
                            @error($fieldName)
                                <span class="error">{{ $message }}</span>
                            @enderror
                        @endif
                    </div>
                @endforeach
                <div class="submit-section">
                    <button class="btn btn-primary submit-btn">Submit</button>
                </div>
            </form>
        @endif
    </x-modals.modal>
</div>



<!-- <div>
    <x-modals.modal>
        @if (!empty($data) && empty($data['delete']))
        <x-slot:title>
            Update Holiday
        </x-slot>
        <form wire:submit.prevent="update">
            <div class="form-group">
                <x-form.wire.input name="name" label="Holiday Name"></x-form.wire.input>
            </div>
            <div class="form-group">
                <x-form.wire.input type="date" name="holiday_date" label="Holiday Date"></x-form.wire.input>
            </div>
            <div class="form-group">
                <x-form.wire.checkbox name="completed" label="Completed"></x-form.wire.checkbox>
            </div>

            <div class="submit-section">
                <button class="btn btn-primary submit-btn">Submit</button>
            </div>
        </form>
        @elseif(!empty($data['delete']))
        <div class="form-header">
            <h3>Delete Holiday <b>{{$name}}</b></h3>
            <p>Are you sure want to delete?</p>
        </div>
        <form wire:submit.prevent="delete">
            <div class="modal-btn delete-action">
                <div class="row">
                    <div class="col-6">
                        <button type="submit"  class="btn btn-primary w-100 continue-btn">Delete</button>
                    </div>
                    <div class="col-6">
                        <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                    </div>
                </div>
            </div>
        </form>
        @else
        <x-slot:title>
            Add Holiday
        </x-slot>
        <form wire:submit.prevent="store">
            <div class="form-group">
                <x-form.wire.input name="name" label="Holiday Name"></x-form.wire.input>
            </div>
            <div class="form-group">
                <x-form.wire.input type="date" name="holiday_date" label="Holiday Date"></x-form.wire.input>
            </div>
            <div class="form-group">
                <x-form.wire.checkbox name="completed" label="Completed"></x-form.wire.checkbox>
            </div>
            <div class="submit-section">
                <button class="btn btn-primary submit-btn">Submit</button>
            </div>
        </form>
        @endif
    </x-modals.modal>
</div> -->