@extends('layouts.app')

@section('title', 'Holiday List')
@section('no-page-header')

@section('content')
<div class="space-y-6">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-lg">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex flex-col">
                    <h5 class="text-lg font-semibold text-gray-900">Holiday Management</h5>
                    <p class="text-sm text-gray-600 mt-1">
                        <span class="inline-flex items-center">
                            <i class="fas fa-calendar-alt mr-2 text-primary-500"></i>
                            Total Holidays: <span class="font-medium text-primary-600 ml-1">{{ $holidays->count() ?? 0 }}</span>
                        </span>
                        @if($holidays->count() > 0)
                        <span class="ml-3 text-gray-400">|</span>
                        <span class="ml-3 text-gray-500">
                            Next: {{ $holidays->where('holiday_date', '>=', now()->format('Y-m-d'))->sortBy('holiday_date')->first()?->holiday_date ? \Carbon\Carbon::parse($holidays->where('holiday_date', '>=', now()->format('Y-m-d'))->sortBy('holiday_date')->first()->holiday_date)->format('d-m-Y') : 'None' }}
                        </span>
                        @endif
                    </p>
                </div>
                <div class="flex flex-col sm:flex-row gap-2">
                    <a href="#" class="inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" onclick="openHolidayModal()">
                        <i class="fas fa-plus mr-2"></i>Add Holiday
                    </a>
                </div>
            </div>
        </div>

        <div class="px-6 py-4 space-y-6">
            <!-- Appointments Table -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead>
                        <tr>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">ID</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Holiday Name</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Date</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Working Details</th>
                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($holidays as $holiday)
                        <tr id="holiday-row-{{ $holiday->id }}">
                            <td class="px-4 py-3 text-sm text-gray-900">{{ $holiday->id }}</td>
                            <td class="px-4 py-3">
                                <span class="holiday-name-display uppercase">{{ $holiday->holiday_name }}</span>
                                <input type="text" class="holiday-name-input hidden w-full px-2 py-1 border border-gray-300 rounded uppercase" value="{{ $holiday->holiday_name }}">
                            </td>
                            <td class="px-4 py-3">
                                <div class="font-medium text-gray-900 holiday-date-display">{{ \Carbon\Carbon::parse($holiday->holiday_date)->format('d-m-Y') }}</div>
                                <input type="date" class="holiday-date-input hidden w-full px-2 py-1 border border-gray-300 rounded" value="{{ $holiday->holiday_date }}">
                            </td>
                            <td class="px-4 py-3">
                                <div class="font-medium text-gray-900 holiday-type-display uppercase">{{ $holiday->holiday_type }}</div>
                                @if($holiday->holiday_type === 'Half Day' && ($holiday->from_time || $holiday->to_time))
                                <div class="text-sm text-gray-600 mt-1">Work: {{ $holiday->from_time }} - {{ $holiday->to_time }}</div>
                                @endif
                                <select class="holiday-type-input hidden w-full px-2 py-1 border border-gray-300 rounded uppercase" value="{{ $holiday->holiday_type }}" onchange="toggleTimeFields(this.value, {{ $holiday->id }})">
                                    <option value="Holiday">Holiday</option>
                                    <option value="Half Day">Half Day</option>
                                </select>
                                <div class="holiday-time-fields hidden mt-2" id="time-fields-{{ $holiday->id }}">
                                    <div class="flex items-center gap-2">
                                        <input type="time" class="holiday-from-time w-full px-2 py-1 border border-gray-300 rounded" value="{{ $holiday->from_time ?? '' }}" step="60" placeholder="From (HH:MM)">
                                        <span class="text-gray-500">-</span>
                                        <input type="time" class="holiday-to-time w-full px-2 py-1 border border-gray-300 rounded" value="{{ $holiday->to_time ?? '' }}" step="60" placeholder="To (HH:MM)">
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2">
                                    <a href="#" class="edit-btn inline-flex items-center px-2 py-1 border border-yellow-300 text-yellow-700 bg-white hover:bg-yellow-50 rounded text-xs" title="Edit" onclick="editHoliday({{ $holiday->id }}); return false;">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <div class="edit-actions hidden">
                                        <button type="button" class="save-btn inline-flex items-center px-2 py-1 border border-green-300 text-green-700 bg-white hover:bg-green-50 rounded text-xs" title="Save" onclick="saveHoliday({{ $holiday->id }})">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button type="button" class="cancel-btn inline-flex items-center px-2 py-1 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 rounded text-xs" title="Cancel" onclick="cancelEdit({{ $holiday->id }})">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                    <button type="button" class="delete-btn inline-flex items-center px-2 py-1 border border-red-300 text-red-700 bg-white hover:bg-red-50 rounded text-xs" title="Delete" onclick="deleteHoliday({{ $holiday->id }})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="px-4 py-8 text-center text-sm text-gray-500">
                                <div class="flex flex-col items-center">
                                    <i class="fas fa-clock text-4xl text-gray-300 mb-2"></i>
                                    No holidays found.
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Holiday Modal -->
<div id="holidayModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium text-gray-900">Add New Holiday</h3>
            <button type="button" onclick="closeHolidayModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>

        <form id="holidayForm" onsubmit="storeHoliday(event)">
            <div class="space-y-4">
                <div>
                    <label for="modal_holiday_name" class="block text-sm font-medium text-gray-700 mb-1">Holiday Name</label>
                    <input type="text" id="modal_holiday_name" name="holiday_name" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 uppercase"
                        placeholder="Enter holiday name">
                </div>

                <div>
                    <label for="modal_holiday_date" class="block text-sm font-medium text-gray-700 mb-1">Holiday Date</label>
                    <input type="hidden" id="modal_holiday_date" name="holiday_date" value="">
                    <input type="text" id="modal_holiday_date_display" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="dd-mm-yyyy" autocomplete="off">
                </div>

                <div>
                    <label for="modal_holiday_type" class="block text-sm font-medium text-gray-700 mb-1">Holiday Type</label>
                    <select id="modal_holiday_type" name="holiday_type" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" onchange="toggleModalTimeFields(this.value)">
                        <option value="Holiday">Holiday</option>
                        <option value="Half Day">Half Day</option>
                    </select>
                </div>

                <div id="modal-time-fields" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Time Range</label>
                    <div class="flex items-center gap-2">
                        <input type="time" id="modal_holiday_from_time" name="from_time" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" step="60" placeholder="From">
                        <span class="text-gray-500">-</span>
                        <input type="time" id="modal_holiday_to_time" name="to_time" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" step="60" placeholder="To">
                    </div>
                </div>

                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" onclick="closeHolidayModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                        Save
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Edit Holiday Modal -->
<div id="editHolidayModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium text-gray-900">Edit Holiday</h3>
            <button type="button" onclick="closeEditHolidayModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>

        <form id="editHolidayForm" onsubmit="updateHoliday(event)">
            <input type="hidden" id="edit_holiday_id" name="holiday_id">
            <div class="space-y-4">
                <div>
                    <label for="edit_holiday_name" class="block text-sm font-medium text-gray-700 mb-1">Holiday Name</label>
                    <input type="text" id="edit_holiday_name" name="holiday_name" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="Enter holiday name">
                </div>

                <div>
                    <label for="edit_holiday_date" class="block text-sm font-medium text-gray-700 mb-1">Holiday Date</label>
                    <input type="hidden" id="edit_holiday_date" name="holiday_date" value="">
                    <input type="text" id="edit_holiday_date_display" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="dd-mm-yyyy" autocomplete="off">
                </div>

                <div>
                    <label for="edit_holiday_type" class="block text-sm font-medium text-gray-700 mb-1">Holiday Type</label>
                    <select id="edit_holiday_type" name="holiday_type" required
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" onchange="toggleEditModalTimeFields(this.value)">
                        <option value="Holiday">Holiday</option>
                        <option value="Half Day">Half Day</option>
                    </select>
                </div>

                <div id="edit-modal-time-fields" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Time Range</label>
                    <div class="flex items-center gap-2">
                        <input type="time" id="edit_holiday_from_time" name="from_time" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" step="60" placeholder="From">
                        <span class="text-gray-500">-</span>
                        <input type="time" id="edit_holiday_to_time" name="to_time" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" step="60" placeholder="To">
                    </div>
                </div>

                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" onclick="closeEditHolidayModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                        Update
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
@endpush

<script>
    function editHoliday(id) {
        const row = document.getElementById(`holiday-row-${id}`);
        const nameDisplay = row.querySelector('.holiday-name-display');
        const dateDisplay = row.querySelector('.holiday-date-display');
        const typeDisplay = row.querySelector('.holiday-type-display');
        const fromTimeInput = row.querySelector('.holiday-from-time');
        const toTimeInput = row.querySelector('.holiday-to-time');

        // Get current values from display
        const holidayName = nameDisplay.textContent.trim();
        const holidayDate = row.querySelector('.holiday-date-input').value;
        const holidayType = typeDisplay.textContent.trim();
        const fromTime = fromTimeInput.value;
        const toTime = toTimeInput.value;

        // Populate edit modal with current values
        document.getElementById('edit_holiday_id').value = id;
        document.getElementById('edit_holiday_name').value = holidayName;
        document.getElementById('edit_holiday_date').value = holidayDate;
        document.getElementById('edit_holiday_date_display').value = formatIsoToDisplay(holidayDate);
        document.getElementById('edit_holiday_type').value = holidayType;
        document.getElementById('edit_holiday_from_time').value = fromTime;
        document.getElementById('edit_holiday_to_time').value = toTime;

        // Show/hide time fields based on current selection
        toggleEditModalTimeFields(holidayType);

        // Show the edit modal
        document.getElementById('editHolidayModal').classList.remove('hidden');
    }

    function saveHoliday(id) {
        const row = document.getElementById(`holiday-row-${id}`);
        const nameInput = row.querySelector('.holiday-name-input');
        const dateInput = row.querySelector('.holiday-date-input');
        const nameDisplay = row.querySelector('.holiday-name-display');
        const dateDisplay = row.querySelector('.holiday-date-display');
        const typeInput = row.querySelector('.holiday-type-input');
        const typeDisplay = row.querySelector('.holiday-type-display');
        const fromTimeInput = row.querySelector('.holiday-from-time');
        const toTimeInput = row.querySelector('.holiday-to-time');

        const formData = {
            _method: 'PUT',
            _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            holiday_name: nameInput.value,
            holiday_date: dateInput.value,
            holiday_type: typeInput.value
        };

        // Add time fields only if Half Day is selected
        if (typeInput.value === 'Half Day') {
            formData.from_time = fromTimeInput.value;
            formData.to_time = toTimeInput.value;
        }

        fetch(`{{ route('holidays.update', ':id') }}`.replace(':id', id), {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update display values
                    nameDisplay.textContent = data.holiday.holiday_name;
                    dateDisplay.textContent = new Date(data.holiday.holiday_date).toLocaleDateString('en-US', {
                        day: 'numeric',
                        month: 'long',
                        year: 'numeric'
                    });
                    typeDisplay.textContent = data.holiday.holiday_type;

                    // Hide input fields, show displays
                    nameDisplay.classList.remove('hidden');
                    nameInput.classList.add('hidden');
                    dateDisplay.classList.remove('hidden');
                    dateInput.classList.add('hidden');
                    typeDisplay.classList.remove('hidden');
                    typeInput.classList.add('hidden');

                    const editBtn = row.querySelector('.edit-btn');
                    const editActions = row.querySelector('.edit-actions');
                    editBtn.classList.remove('hidden');
                    editActions.classList.add('hidden');

                    // Show success message
                    showNotification('Holiday updated successfully!', 'success');
                } else {
                    showNotification('Error updating holiday', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Error updating holiday', 'error');
            });
    }

    function openHolidayModal() {
        document.getElementById('holidayModal').classList.remove('hidden');
        document.getElementById('modal_holiday_name').value = '';
        document.getElementById('modal_holiday_date').value = '';
        document.getElementById('modal_holiday_date_display').value = '';
        document.getElementById('modal_holiday_type').value = '';
    }

    function closeHolidayModal() {
        document.getElementById('holidayModal').classList.add('hidden');
    }

    function storeHoliday(event) {
        event.preventDefault();

        const formData = {
            _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            holiday_name: document.getElementById('modal_holiday_name').value,
            holiday_date: document.getElementById('modal_holiday_date').value,
            holiday_type: document.getElementById('modal_holiday_type').value
        };

        // Add time fields only if Half Day is selected
        if (formData.holiday_type === 'Half Day') {
            formData.from_time = document.getElementById('modal_holiday_from_time').value;
            formData.to_time = document.getElementById('modal_holiday_to_time').value;
        }

        console.log('Storing holiday:', formData);
        console.log('Form elements:', {
            holiday_name: document.getElementById('modal_holiday_name'),
            holiday_date: document.getElementById('modal_holiday_date'),
            holiday_type: document.getElementById('modal_holiday_type'),
            from_time: document.getElementById('modal_holiday_from_time'),
            to_time: document.getElementById('modal_holiday_to_time')
        });

        fetch('{{ route("holidays.store") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify(formData)
                })
            .then(response => {
                console.log('Response status:', response.status);
                return response.json();
            })
            .then(data => {
                console.log('Response data:', data);
                if (data.success) {
                    closeHolidayModal();
                    showNotification('Holiday added successfully!', 'success');
                    // Refresh the page to show the new holiday
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                } else {
                    showNotification('Error adding holiday', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Error adding holiday', 'error');
            });
    }

    function deleteHoliday(id) {
        if (confirm('Are you sure you want to delete this holiday?')) {
            fetch(`{{ route('holidays.destroy', ':id') }}`.replace(':id', id), {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(response => {
                    console.log('Delete response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Delete response data:', data);
                    if (data.success) {
                        // Remove the row from table
                        const row = document.getElementById(`holiday-row-${id}`);
                        row.remove();

                        showNotification('Holiday deleted successfully!', 'success');
                    } else {
                        showNotification('Error deleting holiday', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showNotification('Error deleting holiday', 'error');
                });
        }
    }

    function toggleTimeFields(type, holidayId) {
        const timeFields = document.getElementById(`time-fields-${holidayId}`);
        if (type === 'Half Day') {
            timeFields.classList.remove('hidden');
            // Add event listeners to time inputs for AM/PM display
            const fromTimeInput = timeFields.querySelector('.holiday-from-time');
            const toTimeInput = timeFields.querySelector('.holiday-to-time');

            fromTimeInput.addEventListener('change', () => updateTimeDisplay(fromTimeInput));
            toTimeInput.addEventListener('change', () => updateTimeDisplay(toTimeInput));

            // Update display for existing values
            updateTimeDisplay(fromTimeInput);
            updateTimeDisplay(toTimeInput);
        } else {
            timeFields.classList.add('hidden');
        }
    }

    function toggleModalTimeFields(type) {
        const timeFields = document.getElementById('modal-time-fields');
        if (type === 'Half Day') {
            timeFields.classList.remove('hidden');
            // Add event listeners to modal time inputs for AM/PM display
            const fromTimeInput = document.getElementById('modal_holiday_from_time');
            const toTimeInput = document.getElementById('modal_holiday_to_time');

            fromTimeInput.addEventListener('change', () => updateTimeDisplay(fromTimeInput));
            toTimeInput.addEventListener('change', () => updateTimeDisplay(toTimeInput));
        } else {
            timeFields.classList.add('hidden');
        }
    }

    function convertTo12HourFormat(time24) {
        if (!time24) return '';

        const [hours, minutes] = time24.split(':');
        const hour = parseInt(hours);
        const minute = minutes;

        const ampm = hour >= 12 ? 'PM' : 'AM';
        const hour12 = hour % 12 || 12;

        return `${hour12}:${minute} ${ampm}`;
    }

    function updateTimeDisplay(input) {
        if (input.value) {
            const time12 = convertTo12HourFormat(input.value);
            input.setAttribute('title', `24-hour format: ${input.value} (${time12})`);
        }
    }

    function showNotification(message, type) {
        // Create notification element
        const notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 px-4 py-3 rounded-md text-white z-50 ${
            type === 'success' ? 'bg-green-500' : 'bg-red-500'
        }`;
        notification.textContent = message;

        document.body.appendChild(notification);

        // Remove after 3 seconds
        setTimeout(() => {
            notification.remove();
        }, 3000);
    }

    function sendRequest(url, method, data) {
        return fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(data)
            })
            .then(response => {
                console.log('Response status:', response.status);
                return response.json();
            })
            .then(data => {
                console.log('Response data:', data);
                return data;
            })
            .catch(error => {
                console.error('Error:', error);
                return null;
            });
    }

    function closeEditHolidayModal() {
        document.getElementById('editHolidayModal').classList.add('hidden');
    }

    function toggleEditModalTimeFields(type) {
        const timeFields = document.getElementById('edit-modal-time-fields');
        if (type === 'Half Day') {
            timeFields.classList.remove('hidden');
            // Add event listeners to time inputs for AM/PM display
            const fromTimeInput = document.getElementById('edit_holiday_from_time');
            const toTimeInput = document.getElementById('edit_holiday_to_time');

            fromTimeInput.addEventListener('change', () => updateTimeDisplay(fromTimeInput));
            toTimeInput.addEventListener('change', () => updateTimeDisplay(toTimeInput));

            // Update display for existing values
            updateTimeDisplay(fromTimeInput);
            updateTimeDisplay(toTimeInput);
        } else {
            timeFields.classList.add('hidden');
        }
    }

    function updateHoliday(event) {
        event.preventDefault();

        console.log('Edit form submitted'); // Debug log

        const holidayId = document.getElementById('edit_holiday_id').value;
        const formData = {
            _method: 'PUT',
            _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            holiday_name: document.getElementById('edit_holiday_name').value,
            holiday_date: document.getElementById('edit_holiday_date').value,
            holiday_type: document.getElementById('edit_holiday_type').value
        };

        // Add time fields only if Half Day is selected
        if (formData.holiday_type === 'Half Day') {
            formData.from_time = document.getElementById('edit_holiday_from_time').value;
            formData.to_time = document.getElementById('edit_holiday_to_time').value;
        }

        fetch(`{{ route('holidays.update', ':id') }}`.replace(':id', holidayId), {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(formData)
            })
            .then(response => {
                console.log('Update response status:', response.status);
                if (response.status === 422) {
                    // Validation error
                    return response.json().then(data => {
                        const errors = data.errors;
                        let errorMessage = 'Validation errors:\n';
                        for (const field in errors) {
                            errorMessage += errors[field][0] + '\n';
                        }
                        showNotification(errorMessage, 'error');
                    });
                } else if (!response.ok) {
                    // Other server error
                    return response.json().then(data => {
                        showNotification(data.message || 'Error updating holiday', 'error');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data && data.success) {
                    closeEditHolidayModal();
                    showNotification('Holiday updated successfully!', 'success');
                    // Refresh the page to show the updated holiday
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Error updating holiday', 'error');
            });
    }

    // Date format conversion functions (same as appointments)
    function formatIsoToDisplay(isoDate) {
        if (!isoDate) return '';
        var parts = isoDate.split('-');
        if (parts.length !== 3) return '';
        return parts[2] + '-' + parts[1] + '-' + parts[0];
    }

    function formatDisplayToIso(displayDate) {
        if (!displayDate) return '';
        var parts = displayDate.split('-');
        if (parts.length !== 3) return '';
        return parts[2] + '-' + parts[1] + '-' + parts[0];
    }

    function initHolidayDatepickers() {
        // Add modal datepicker
        const addIsoEl = document.getElementById('modal_holiday_date');
        const addDisplayEl = document.getElementById('modal_holiday_date_display');

        if (addIsoEl && addDisplayEl) {
            addDisplayEl.value = formatIsoToDisplay(addIsoEl.value);

            if (window.jQuery && jQuery.fn && jQuery.fn.datepicker) {
                jQuery(addDisplayEl).datepicker({
                    dateFormat: 'dd-mm-yy',
                    onSelect: function(dateText) {
                        addIsoEl.value = formatDisplayToIso(dateText);
                    }
                });

                addDisplayEl.addEventListener('change', function() {
                    addIsoEl.value = formatDisplayToIso(this.value);
                });
            }
        }

        // Edit modal datepicker
        const editIsoEl = document.getElementById('edit_holiday_date');
        const editDisplayEl = document.getElementById('edit_holiday_date_display');

        if (editIsoEl && editDisplayEl) {
            editDisplayEl.value = formatIsoToDisplay(editIsoEl.value);

            if (window.jQuery && jQuery.fn && jQuery.fn.datepicker) {
                jQuery(editDisplayEl).datepicker({
                    dateFormat: 'dd-mm-yy',
                    onSelect: function(dateText) {
                        editIsoEl.value = formatDisplayToIso(dateText);
                    }
                });

                editDisplayEl.addEventListener('change', function() {
                    editIsoEl.value = formatDisplayToIso(this.value);
                });
            }
        }
    }

    // Initialize datepickers when DOM is ready
    document.addEventListener('DOMContentLoaded', function() {
        initHolidayDatepickers();
    });
</script>

@endsection