{{-- resources/views/pages/experts/partials/schedules.blade.php --}}
@push('css')
<style>
.schedule-row {
    transition: all 0.3s ease;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 15px;
    border: 1px solid #e9ecef;
}

.schedule-row:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.schedule-day-badge {
    width: 100px;
    font-weight: 600;
    text-transform: capitalize;
}

.input-group-text {
    min-width: 45px;
    justify-content: center;
}

.time-picker {
    font-family: monospace;
}

.availability-switch {
    margin-top: 8px;
}

.day-selector {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #dee2e6;
}
</style>
@endpush

@push('js')
<script>
// Schedule counter
let scheduleCounter = {{ isset($schedules) && $schedules && count($schedules) ? count($schedules) : 1 }};

const daysOfWeek = {
    'monday': '{{ __("labels.monday") }}',
    'tuesday': '{{ __("labels.tuesday") }}',
    'wednesday': '{{ __("labels.wednesday") }}',
    'thursday': '{{ __("labels.thursday") }}',
    'friday': '{{ __("labels.friday") }}',
    'saturday': '{{ __("labels.saturday") }}',
    'sunday': '{{ __("labels.sunday") }}'
};

// function addSchedule() {
//     const container = document.getElementById('schedules-container');
//     const emptyMessage = document.getElementById('empty-schedule-message');
//     const template = document.getElementById('schedule-template');
    
//     // Remove empty message if it exists
//     if (emptyMessage) {
//         emptyMessage.remove();
//     }
    
//     // Clone the template
//     const newRow = template.cloneNode(true);
//     newRow.classList.remove('d-none');
//     newRow.classList.remove('schedule-template');
//     newRow.classList.add('schedule-row');
//     newRow.id = '';
    
//     // Update index
//     const indexSpan = newRow.querySelector('.badge');
//     if (indexSpan) {
//         indexSpan.textContent = scheduleCounter;
//     }
    
//     // Update input names with new index
//     newRow.querySelectorAll('select, input').forEach(element => {
//         if (element.name) {
//             element.name = element.name.replace('__index__', scheduleCounter - 1);
            
//             // Reset values for new row
//             if (element.tagName === 'SELECT') {
//                 element.value = '';
//             } else if (element.type === 'checkbox') {
//                 element.checked = true; // Default to available
//             } else {
//                 element.value = '';
//             }
//         }
        
//         // Update IDs for time inputs to work with any time picker library
//         if (element.id) {
//             element.id = element.id.replace('__index__', scheduleCounter - 1);
//         }
//     });
    
//     // Update delete button onclick
//     const deleteBtn = newRow.querySelector('.btn-outline-danger, .btn-danger');
//     if (deleteBtn) {
//         deleteBtn.onclick = function() {
//             removeSchedule(this);
//         };
//     }
    
//     // Update day display
//     const dayDisplay = newRow.querySelector('.schedule-day-badge');
//     if (dayDisplay) {
//         dayDisplay.textContent = daysOfWeek[newRow.querySelector('select[name*="[day_of_week]"]')?.value] || '{{ __("labels.select_day") }}';
//     }
    
//     // Append to container
//     container.appendChild(newRow);
    
//     // Increment counter
//     scheduleCounter++;
    
//     // Initialize any time picker if available
//     if (typeof initializeTimePicker === 'function') {
//         initializeTimePicker(newRow);
//     }
// }
function addSchedule() {
    const container = document.getElementById('schedules-container');
    const emptyMessage = document.getElementById('empty-schedule-message');
    
    // Remove empty message if it exists
    if (emptyMessage) {
        emptyMessage.remove();
    }
    
    // Get current counter value
    const currentIndex = scheduleCounter;
    
    // Create schedule row HTML as string template
    const scheduleRow = `
        <div class="schedule-row" data-index="${currentIndex}">
            <div class="row align-items-center">
                <div class="col-1 text-center text-muted small">
                    <span class="badge bg-light text-dark">${currentIndex}</span>
                </div>
                <div class="col-md-3 col-12 mb-2 mb-md-0">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-calendar-day text-muted"></i>
                        </span>
                        <select class="form-select" 
                                name="schedules[${currentIndex}][day_of_week]" 
                                onchange="updateDayDisplay(this, ${currentIndex})">
                            <option value="">{{ __('labels.select_day') }}</option>
                            <option value="monday">{{ __('labels.monday') }}</option>
                            <option value="tuesday">{{ __('labels.tuesday') }}</option>
                            <option value="wednesday">{{ __('labels.wednesday') }}</option>
                            <option value="thursday">{{ __('labels.thursday') }}</option>
                            <option value="friday">{{ __('labels.friday') }}</option>
                            <option value="saturday">{{ __('labels.saturday') }}</option>
                            <option value="sunday">{{ __('labels.sunday') }}</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3 col-12 mb-2 mb-md-0">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-play text-muted"></i>
                        </span>
                        <input type="time" 
                               class="form-control time-picker" 
                               name="schedules[${currentIndex}][start_time]" 
                               value="09:00"
                               {{-- step="900" --}}
                               >
                    </div>
                </div>
                <div class="col-md-3 col-12 mb-2 mb-md-0">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-stop text-muted"></i>
                        </span>
                        <input type="time" 
                               class="form-control time-picker" 
                               name="schedules[${currentIndex}][end_time]" 
                               value="17:00"
                               {{-- step="900" --}}
                               >
                    </div>
                </div>
                <div class="col-md-2 col-12">
                    <button type="button" 
                            class="btn btn-outline-danger btn-sm w-100"
                            onclick="removeSchedule(this, ${currentIndex})">
                        <i class="fas fa-trash me-1"></i>{{ __('labels.remove') }}
                    </button>
                </div>
            </div>
        </div>
    `;
    
    // Append to container using jQuery or vanilla JS
    if (typeof $ !== 'undefined') {
        // jQuery way
        $(container).append(scheduleRow);
    } else {
        // Vanilla JS way
        container.insertAdjacentHTML('beforeend', scheduleRow);
    }
    
    // Initialize any time picker for the new row
    if (typeof initializeTimePicker === 'function') {
        const newRow = container.lastElementChild;
        initializeTimePicker(newRow);
    }
    
    // Increment counter
    scheduleCounter++;
}

function removeSchedule(button) {
    const row = button.closest('.schedule-row');
    
    // Confirm before deletion
    Swal.fire({
        title: '{{ __("labels.are_you_sure") }}',
        text: '{{ __("labels.delete_schedule_warning") }}',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: '{{ __("labels.yes_delete") }}',
        cancelButtonText: '{{ __("labels.cancel") }}'
    }).then((result) => {
        if (result.isConfirmed) {
            row.remove();
            
            // Update indices of remaining rows
            const rows = document.querySelectorAll('.schedule-row:not(.d-none)');
            if (rows.length === 0) {
                // Add empty message if no rows left
                const container = document.getElementById('schedules-container');
                container.innerHTML = `
                    <div id="empty-schedule-message" class="text-center py-4 text-muted">
                        <i class="fas fa-clock fa-2x mb-3"></i>
                        <p>{{ __('labels.no_schedules_added') }}</p>
                    </div>
                `;
                
                // Append template back
                const templateDiv = document.createElement('div');
                templateDiv.innerHTML = document.getElementById('schedule-template').outerHTML;
                container.appendChild(templateDiv.firstChild);
                
                scheduleCounter = 1;
            } else {
                rows.forEach((row, index) => {
                    const badge = row.querySelector('.badge');
                    if (badge) badge.textContent = index + 1;
                    
                    // Update input names
                    row.querySelectorAll('select, input').forEach(element => {
                        if (element.name) {
                            // Update day_of_week
                            const dayMatch = element.name.match(/schedules\[(\d+)\]\[day_of_week\]/);
                            if (dayMatch) {
                                element.name = `schedules[${index}][day_of_week]`;
                            }
                            
                            // Update start_time
                            const startMatch = element.name.match(/schedules\[(\d+)\]\[start_time\]/);
                            if (startMatch) {
                                element.name = `schedules[${index}][start_time]`;
                            }
                            
                            // Update end_time
                            const endMatch = element.name.match(/schedules\[(\d+)\]\[end_time\]/);
                            if (endMatch) {
                                element.name = `schedules[${index}][end_time]`;
                            }
                            
                            // Update is_available
                            const availMatch = element.name.match(/schedules\[(\d+)\]\[is_available\]/);
                            if (availMatch) {
                                element.name = `schedules[${index}][is_available]`;
                            }
                        }
                        
                        // Update IDs
                        if (element.id) {
                            element.id = element.id.replace(/\d+/, index);
                        }
                    });
                });
                scheduleCounter = rows.length + 1;
            }
            
            // Show success message
            Swal.fire({
                icon: 'success',
                title: '{{ __("labels.deleted") }}',
                text: '{{ __("messages.schedule_deleted") }}',
                timer: 1500,
                showConfirmButton: false
            });
        }
    });
}

function validateScheduleTimes(row) {
    const startInput = row.querySelector('input[name*="[start_time]"]');
    const endInput = row.querySelector('input[name*="[end_time]"]');
    
    if (startInput && endInput && startInput.value && endInput.value) {
        const start = startInput.value;
        const end = endInput.value;
        
        if (start >= end) {
            Swal.fire({
                icon: 'warning',
                title: '{{ __("labels.invalid_time") }}',
                text: '{{ __("messages.end_time_must_be_after_start") }}',
                timer: 3000,
                showConfirmButton: false
            });
            
            endInput.value = '';
        }
    }
}

function checkDuplicateDay(row) {
    const daySelect = row.querySelector('select[name*="[day_of_week]"]');
    if (!daySelect) return;
    
    const selectedDay = daySelect.value;
    if (!selectedDay) return;
    
    const rows = document.querySelectorAll('.schedule-row:not(.d-none)');
    let duplicateFound = false;
    
    rows.forEach((otherRow) => {
        if (otherRow === row) return;
        
        const otherDay = otherRow.querySelector('select[name*="[day_of_week]"]')?.value;
        if (otherDay === selectedDay) {
            duplicateFound = true;
        }
    });
    
    if (duplicateFound) {
        Swal.fire({
            icon: 'warning',
            title: '{{ __("labels.duplicate_day") }}',
            text: '{{ __("messages.duplicate_schedule_day") }}',
            timer: 3000,
            showConfirmButton: false
        });
        
        daySelect.value = '';
    }
}

// Optional: Initialize time picker if using a library
function initializeTimePicker(container) {
    // If using Bootstrap Timepicker, Flatpickr, or any other time picker library
    // Initialize here
    if (typeof flatpickr !== 'undefined') {
        container.querySelectorAll('.time-picker').forEach(element => {
            flatpickr(element, {
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i",
                time_24hr: true,
                minuteIncrement: 15
            });
        });
    }
}

// Initialize on document load
document.addEventListener('DOMContentLoaded', function() {
    initializeTimePicker(document);
    
    // Add validation listeners to existing rows
    document.querySelectorAll('.schedule-row').forEach(row => {
        const startInput = row.querySelector('input[name*="[start_time]"]');
        const endInput = row.querySelector('input[name*="[end_time]"]');
        const daySelect = row.querySelector('select[name*="[day_of_week]"]');
        
        if (endInput) {
            endInput.addEventListener('change', function() {
                validateScheduleTimes(row);
            });
        }
        
        if (daySelect) {
            daySelect.addEventListener('change', function() {
                // Update day display
                const dayDisplay = row.querySelector('.schedule-day-badge');
                if (dayDisplay) {
                    dayDisplay.textContent = daysOfWeek[this.value] || '{{ __("labels.select_day") }}';
                }
                
                // Check for duplicates
                checkDuplicateDay(row);
            });
        }
    });
});
</script>
@endpush

<div class="card mt-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            <i class="fas fa-clock me-2"></i>{{ __('labels.working_hours') }}
        </h5>
        @if(!isset($readonly) || (isset($readonly) && !$readonly))
        <button type="button" class="btn btn-primary btn-sm" onclick="addSchedule()">
            <i class="fas fa-plus me-1"></i> {{ __('labels.add_schedule') }}
        </button>
        @endif
    </div>
    <div class="card-body">
        <div class="alert alert-info" role="alert">
            <i class="fas fa-info-circle me-2"></i>
            {{ __('messages.schedule_help_text') }}
        </div>
        
        <div id="schedules-container">
            @if(isset($schedules) && $schedules && count($schedules))
                @foreach($schedules as $index => $schedule)
                    <div class="schedule-row" id="schedule-{{ $index }}">
                        <div class="row align-items-center">
                            {{-- Index --}}
                            <div class="col-1 text-center text-muted small">
                                <span class="badge bg-light text-dark">{{ $index + 1 }}</span>
                            </div>
                            
                            {{-- Day of Week --}}
                            <div class="col-md-3 col-12 mb-2 mb-md-0">
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-calendar-day text-muted"></i>
                                    </span>
                                    <select class="form-select @error('schedules.' . $index . '.day_of_week') is-invalid @enderror" 
                                            name="schedules[{{ $index }}][day_of_week]"
                                            {{ isset($readonly) && $readonly ? 'disabled' : '' }}>
                                        <option value="">{{ __('labels.select_day') }}</option>
                                        <option value="monday" {{ old('schedules.' . $index . '.day_of_week', $schedule['day_of_week'] ?? '') == 'monday' ? 'selected' : '' }}>{{ __('labels.monday') }}</option>
                                        <option value="tuesday" {{ old('schedules.' . $index . '.day_of_week', $schedule['day_of_week'] ?? '') == 'tuesday' ? 'selected' : '' }}>{{ __('labels.tuesday') }}</option>
                                        <option value="wednesday" {{ old('schedules.' . $index . '.day_of_week', $schedule['day_of_week'] ?? '') == 'wednesday' ? 'selected' : '' }}>{{ __('labels.wednesday') }}</option>
                                        <option value="thursday" {{ old('schedules.' . $index . '.day_of_week', $schedule['day_of_week'] ?? '') == 'thursday' ? 'selected' : '' }}>{{ __('labels.thursday') }}</option>
                                        <option value="friday" {{ old('schedules.' . $index . '.day_of_week', $schedule['day_of_week'] ?? '') == 'friday' ? 'selected' : '' }}>{{ __('labels.friday') }}</option>
                                        <option value="saturday" {{ old('schedules.' . $index . '.day_of_week', $schedule['day_of_week'] ?? '') == 'saturday' ? 'selected' : '' }}>{{ __('labels.saturday') }}</option>
                                        <option value="sunday" {{ old('schedules.' . $index . '.day_of_week', $schedule['day_of_week'] ?? '') == 'sunday' ? 'selected' : '' }}>{{ __('labels.sunday') }}</option>
                                    </select>
                                </div>
                                {{-- <small class="schedule-day-badge text-muted ms-1">
                                    {{ __("labels." . ($schedule['day_of_week'] ?? 'select_day')) }}
                                </small> --}}
                            </div>
                            
                            {{-- Start Time --}}
                            <div class="col-md-3 col-12 mb-2 mb-md-0">
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-play text-muted"></i>
                                    </span>
                                    <input type="time" 
                                           class="form-control time-picker @error('schedules.' . $index . '.start_time') is-invalid @enderror" 
                                           name="schedules[{{ $index }}][start_time]" 
                                           value="{{ old('schedules.' . $index . '.start_time', $schedule['start_time'] ?? '09:00') }}"
                                           {{-- step="900" --}}
                                           {{ isset($readonly) && $readonly ? 'readonly' : '' }}>
                                </div>
                            </div>
                            
                            {{-- End Time --}}
                            <div class="col-md-3 col-12 mb-2 mb-md-0">
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="fas fa-stop text-muted"></i>
                                    </span>
                                    <input type="time" 
                                           class="form-control time-picker @error('schedules.' . $index . '.end_time') is-invalid @enderror" 
                                           name="schedules[{{ $index }}][end_time]" 
                                           value="{{ old('schedules.' . $index . '.end_time', $schedule['end_time'] ?? '17:00') }}"
                                           {{-- step="900" --}}
                                           {{ isset($readonly) && $readonly ? 'readonly' : '' }}>
                                </div>
                            </div>
                            
                            {{-- Available Switch --}}
                            {{-- <div class="col-md-2 col-12 mb-2 mb-md-0">
                                <div class="form-check form-switch availability-switch">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           name="schedules[{{ $index }}][is_available]" 
                                           id="schedule-available-{{ $index }}"
                                           value="1"
                                           {{ old('schedules.' . $index . '.is_available', $schedule['is_available'] ?? true) ? 'checked' : '' }}
                                           {{ isset($readonly) && $readonly ? 'disabled' : '' }}>
                                    <label class="form-check-label" for="schedule-available-{{ $index }}">
                                        {{ __('labels.available') }}
                                    </label>
                                </div>
                            </div> --}}
                            
                            {{-- Actions --}}
                            @if(!isset($readonly) || (isset($readonly) && !$readonly))
                            <div class="col-md-2 col-12">
                                <button type="button" 
                                        class="btn btn-outline-danger btn-sm w-100"
                                        onclick="removeSchedule(this)">
                                    <i class="fas fa-trash me-1"></i>{{ __('labels.remove') }}
                                </button>
                            </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            @else
                {{-- Empty State --}}
                <div id="empty-schedule-message" class="text-center py-4 text-muted">
                    <i class="fas fa-clock fa-2x mb-3"></i>
                    <p>{{ __('labels.no_schedules_added') }}</p>
                    <small>{{ __('messages.add_schedule_help') }}</small>
                </div>
            @endif
        </div>
    </div>
    
    @if(isset($schedules) && count($schedules) > 0)
    <div class="card-footer bg-transparent">
        <small class="text-muted">
            <i class="fas fa-info-circle me-1"></i>
            {{ __('messages.schedule_note') }}
        </small>
    </div>
    @endif
</div>

{{-- Hidden template row --}}