<?php include 'header.php'; ?>

<!-- Normal Sub Header -->
<?php include 'template-parts/sub-header-trainer.php'; ?>

<div class="uk-container">
    <div class="uk-grid uk-grid-medium" uk-grid>

        <!-- Sidebar Area -->
         <div class="uk-width-2-6@m uk-visible@m">
            <div class="sidebar-sticky" uk-sticky="offset: 20; bottom: true">
                <?php include 'trainer-sidebar.php'; ?>
            </div>
        </div>

        <!-- Main Content Area -->
        <div class="uk-width-expand@m">

            <div class="profile-container">

                <!-- Banking Information Header -->
                <div class="profile-header">
                    <h2 class="uk-heading-divider">Availability</h2>
                </div>

                <!-- Schedule Tab Content -->
                <div id="scheduleContent" class="tab-content">

                    <p class="uk-margin-small-top">Set your available days and time slots for consultation sessions.</p>

                    <!-- Availability Status Toggle -->
                    <div class="form-group">
                        <div class="form-label">
                            Availability Status
                        </div>
                        <div class="uk-flex uk-flex-middle">
                            <label class="uk-switch" for="availabilityToggle">
                                <input type="checkbox" id="availabilityToggle" aria-label="Availability status toggle" checked>
                                <div class="uk-switch-slider"></div>
                            </label>
                            <span class="uk-margin-small-left" id="availabilityStatus">Currently Available for Bookings</span>
                        </div>
                    </div>

                    <!-- Calendar Section -->
                    <div class="uk-margin-medium-top">

                        <div class="profile-header">
                            <h3 class="uk-h5 f600">Weekly Schedule</h3>
                        </div>

                        <div class="schedule-calendar">

                            <!-- Sunday -->
                            <div class="day-schedule">
                                <div class="day-header">
                                    <label class="uk-flex uk-flex-middle">
                                        <input type="checkbox" class="uk-checkbox day-toggle" data-day="sunday" checked>
                                        <span class="uk-margin-small-left">Sunday</span>
                                    </label>
                                </div>
                                <div class="time-slots" id="sunday-slots">
                                    <div class="time-slot">
                                        <select class="uk-select time-select" title="Start time">
                                            <option value="09:00">9:00 AM</option>
                                            <option value="10:00">10:00 AM</option>
                                            <option value="11:00">11:00 AM</option>
                                            <option value="12:00">12:00 PM</option>
                                            <option value="13:00">1:00 PM</option>
                                            <option value="14:00">2:00 PM</option>
                                            <option value="15:00">3:00 PM</option>
                                            <option value="16:00">4:00 PM</option>
                                            <option value="17:00">5:00 PM</option>
                                            <option value="18:00">6:00 PM</option>
                                            <option value="19:00">7:00 PM</option>
                                            <option value="20:00">8:00 PM</option>
                                        </select>
                                        <span class="time-separator">to</span>
                                        <select class="uk-select time-select" title="End time">
                                            <option value="10:00">10:00 AM</option>
                                            <option value="11:00">11:00 AM</option>
                                            <option value="12:00">12:00 PM</option>
                                            <option value="13:00">1:00 PM</option>
                                            <option value="14:00">2:00 PM</option>
                                            <option value="15:00">3:00 PM</option>
                                            <option value="16:00">4:00 PM</option>
                                            <option value="17:00">5:00 PM</option>
                                            <option value="18:00">6:00 PM</option>
                                            <option value="19:00">7:00 PM</option>
                                            <option value="20:00">8:00 PM</option>
                                            <option value="21:00">9:00 PM</option>
                                        </select>

                                        <div class="clock-separator"><span uk-icon="icon: clock; ratio: .7" class="uk-icon" aria-hidden="true"></span></div>

                                        <select class="uk-select duration-select" title="Duration">
                                            <option value="15">15 min</option>
                                            <option value="30" selected>30 min</option>
                                            <option value="45">45 min</option>
                                            <option value="60">60 min</option>
                                        </select>

                                        <div class="remove-slot">
                                            <button type="button" class="btn-remove-slot" onclick="removeTimeSlot(this)" aria-label="remove">
                                                <span uk-icon="icon: close; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                            </button>
                                        </div>
                                    </div>
                                    <button type="button" class="btn-add-slot uk-width-1-1 uk-button uk-button-default" onclick="addTimeSlot('sunday')">
                                        + Add Time Slot
                                    </button>
                                </div>
                            </div>

                            <!-- Monday -->
                            <div class="day-schedule">
                                <div class="day-header">
                                    <label class="uk-flex uk-flex-middle">
                                        <input type="checkbox" class="uk-checkbox day-toggle" data-day="monday" checked>
                                        <span class="uk-margin-small-left">Monday</span>
                                    </label>
                                </div>
                                <div class="time-slots" id="monday-slots">
                                    <div class="time-slot">
                                        <select class="uk-select time-select" title="Start time">
                                            <option value="09:00">9:00 AM</option>
                                            <option value="10:00" selected>10:00 AM</option>
                                            <option value="11:00">11:00 AM</option>
                                            <option value="12:00">12:00 PM</option>
                                            <option value="13:00">1:00 PM</option>
                                            <option value="14:00">2:00 PM</option>
                                            <option value="15:00">3:00 PM</option>
                                            <option value="16:00">4:00 PM</option>
                                            <option value="17:00">5:00 PM</option>
                                            <option value="18:00">6:00 PM</option>
                                            <option value="19:00">7:00 PM</option>
                                            <option value="20:00">8:00 PM</option>
                                        </select>
                                        <span class="time-separator">to</span>
                                        <select class="uk-select time-select" title="End time">
                                            <option value="11:00">11:00 AM</option>
                                            <option value="12:00">12:00 PM</option>
                                            <option value="13:00">1:00 PM</option>
                                            <option value="14:00">2:00 PM</option>
                                            <option value="15:00">3:00 PM</option>
                                            <option value="16:00">4:00 PM</option>
                                            <option value="17:00" selected>5:00 PM</option>
                                            <option value="18:00">6:00 PM</option>
                                            <option value="19:00">7:00 PM</option>
                                            <option value="20:00">8:00 PM</option>
                                            <option value="21:00">9:00 PM</option>
                                        </select>

                                        <div class="clock-separator"><span uk-icon="icon: clock; ratio: .7" class="uk-icon" aria-hidden="true"></span></div>

                                        <select class="uk-select duration-select" title="Duration">
                                            <option value="15">15 min</option>
                                            <option value="30" selected>30 min</option>
                                            <option value="45">45 min</option>
                                            <option value="60">60 min</option>
                                        </select>

                                        <div class="remove-slot">
                                            <button type="button" class="btn-remove-slot" onclick="removeTimeSlot(this)" aria-label="remove">
                                                <span uk-icon="icon: close; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                            </button>
                                        </div>
                                    </div>
                                    <button type="button" class="btn-add-slot uk-width-1-1 uk-button uk-button-default" onclick="addTimeSlot('monday')">
                                        + Add Time Slot
                                    </button>
                                </div>
                            </div>

                            <!-- Tuesday -->
                            <div class="day-schedule">
                                <div class="day-header">
                                    <label class="uk-flex uk-flex-middle">
                                        <input type="checkbox" class="uk-checkbox day-toggle" data-day="tuesday" checked>
                                        <span class="uk-margin-small-left">Tuesday</span>
                                    </label>
                                </div>
                                <div class="time-slots" id="tuesday-slots">
                                    <div class="time-slot">
                                        <select class="uk-select time-select" title="Start time">
                                            <option value="09:00">9:00 AM</option>
                                            <option value="10:00">10:00 AM</option>
                                            <option value="11:00">11:00 AM</option>
                                            <option value="12:00">12:00 PM</option>
                                            <option value="13:00">1:00 PM</option>
                                            <option value="14:00" selected>2:00 PM</option>
                                            <option value="15:00">3:00 PM</option>
                                            <option value="16:00">4:00 PM</option>
                                            <option value="17:00">5:00 PM</option>
                                            <option value="18:00">6:00 PM</option>
                                            <option value="19:00">7:00 PM</option>
                                            <option value="20:00">8:00 PM</option>
                                        </select>
                                        <span class="time-separator">to</span>
                                        <select class="uk-select time-select" title="End time">
                                            <option value="15:00">3:00 PM</option>
                                            <option value="16:00">4:00 PM</option>
                                            <option value="17:00">5:00 PM</option>
                                            <option value="18:00" selected>6:00 PM</option>
                                            <option value="19:00">7:00 PM</option>
                                            <option value="20:00">8:00 PM</option>
                                            <option value="21:00">9:00 PM</option>
                                        </select>

                                        <div class="clock-separator"><span uk-icon="icon: clock; ratio: .7" class="uk-icon" aria-hidden="true"></span></div>

                                        <select class="uk-select duration-select" title="Duration">
                                            <option value="15">15 min</option>
                                            <option value="30" selected>30 min</option>
                                            <option value="45">45 min</option>
                                            <option value="60">60 min</option>
                                        </select>

                                        <div class="remove-slot">
                                            <button type="button" class="btn-remove-slot" onclick="removeTimeSlot(this)" aria-label="remove">
                                                <span uk-icon="icon: close; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                            </button>
                                        </div>
                                    </div>
                                    <button type="button" class="btn-add-slot uk-width-1-1 uk-button uk-button-default" onclick="addTimeSlot('tuesday')">
                                        + Add Time Slot
                                    </button>
                                </div>
                            </div>

                            <!-- Wednesday -->
                            <div class="day-schedule">
                                <div class="day-header">
                                    <label class="uk-flex uk-flex-middle">
                                        <input type="checkbox" class="uk-checkbox day-toggle" data-day="wednesday">
                                        <span class="uk-margin-small-left">Wednesday</span>
                                    </label>
                                </div>
                                <div class="time-slots" id="wednesday-slots" style="display: none;">
                                    <button type="button" class="btn-add-slot uk-width-1-1 uk-button uk-button-default" onclick="addTimeSlot('wednesday')">
                                        + Add Time Slot
                                    </button>
                                </div>
                            </div>

                            <!-- Thursday -->
                            <div class="day-schedule">
                                <div class="day-header">
                                    <label class="uk-flex uk-flex-middle">
                                        <input type="checkbox" class="uk-checkbox day-toggle" data-day="thursday" checked>
                                        <span class="uk-margin-small-left">Thursday</span>
                                    </label>
                                </div>
                                <div class="time-slots" id="thursday-slots">
                                    <div class="time-slot">
                                        <select class="uk-select time-select" title="Start time">
                                            <option value="09:00" selected>9:00 AM</option>
                                            <option value="10:00">10:00 AM</option>
                                            <option value="11:00">11:00 AM</option>
                                            <option value="12:00">12:00 PM</option>
                                            <option value="13:00">1:00 PM</option>
                                            <option value="14:00">2:00 PM</option>
                                            <option value="15:00">3:00 PM</option>
                                            <option value="16:00">4:00 PM</option>
                                            <option value="17:00">5:00 PM</option>
                                            <option value="18:00">6:00 PM</option>
                                            <option value="19:00">7:00 PM</option>
                                            <option value="20:00">8:00 PM</option>
                                        </select>
                                        <span class="time-separator">to</span>
                                        <select class="uk-select time-select" title="End time">
                                            <option value="12:00" selected>12:00 PM</option>
                                            <option value="13:00">1:00 PM</option>
                                            <option value="14:00">2:00 PM</option>
                                            <option value="15:00">3:00 PM</option>
                                            <option value="16:00">4:00 PM</option>
                                            <option value="17:00">5:00 PM</option>
                                            <option value="18:00">6:00 PM</option>
                                            <option value="19:00">7:00 PM</option>
                                            <option value="20:00">8:00 PM</option>
                                            <option value="21:00">9:00 PM</option>
                                        </select>

                                        <div class="clock-separator"><span uk-icon="icon: clock; ratio: .7" class="uk-icon" aria-hidden="true"></span></div>

                                        <select class="uk-select duration-select" title="Duration">
                                            <option value="15">15 min</option>
                                            <option value="30" selected>30 min</option>
                                            <option value="45">45 min</option>
                                            <option value="60">60 min</option>
                                        </select>

                                        <div class="remove-slot">
                                            <button type="button" class="btn-remove-slot" onclick="removeTimeSlot(this)" aria-label="remove">
                                                <span uk-icon="icon: close; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                            </button>
                                        </div>
                                    </div>
                                    <button type="button" class="btn-add-slot uk-width-1-1 uk-button uk-button-default" onclick="addTimeSlot('thursday')">
                                        + Add Time Slot
                                    </button>
                                </div>
                            </div>

                            <!-- Friday -->
                            <div class="day-schedule">
                                <div class="day-header">
                                    <label class="uk-flex uk-flex-middle">
                                        <input type="checkbox" class="uk-checkbox day-toggle" data-day="friday">
                                        <span class="uk-margin-small-left">Friday</span>
                                    </label>
                                </div>
                                <div class="time-slots" id="friday-slots" style="display: none;">
                                    <button type="button" class="btn-add-slot uk-width-1-1 uk-button uk-button-default" onclick="addTimeSlot('friday')">
                                        + Add Time Slot
                                    </button>
                                </div>
                            </div>

                            <!-- Saturday -->
                            <div class="day-schedule">
                                <div class="day-header">
                                    <label class="uk-flex uk-flex-middle">
                                        <input type="checkbox" class="uk-checkbox day-toggle" data-day="saturday" checked>
                                        <span class="uk-margin-small-left">Saturday</span>
                                    </label>
                                </div>
                                <div class="time-slots" id="saturday-slots">
                                    <div class="time-slot">
                                        <select class="uk-select time-select" title="Start time">
                                            <option value="09:00">9:00 AM</option>
                                            <option value="10:00">10:00 AM</option>
                                            <option value="11:00">11:00 AM</option>
                                            <option value="12:00">12:00 PM</option>
                                            <option value="13:00">1:00 PM</option>
                                            <option value="14:00">2:00 PM</option>
                                            <option value="15:00">3:00 PM</option>
                                            <option value="16:00" selected>4:00 PM</option>
                                            <option value="17:00">5:00 PM</option>
                                            <option value="18:00">6:00 PM</option>
                                            <option value="19:00">7:00 PM</option>
                                            <option value="20:00">8:00 PM</option>
                                        </select>
                                        <span class="time-separator">to</span>
                                        <select class="uk-select time-select" title="End time">
                                            <option value="17:00">5:00 PM</option>
                                            <option value="18:00" selected>6:00 PM</option>
                                            <option value="19:00">7:00 PM</option>
                                            <option value="20:00">8:00 PM</option>
                                            <option value="21:00">9:00 PM</option>
                                        </select>

                                        <div class="clock-separator"><span uk-icon="icon: clock; ratio: .7" class="uk-icon" aria-hidden="true"></span></div>

                                        <select class="uk-select duration-select" title="Duration">
                                            <option value="15">15 min</option>
                                            <option value="30" selected>30 min</option>
                                            <option value="45">45 min</option>
                                            <option value="60">60 min</option>
                                        </select>

                                        <div class="remove-slot">
                                            <button type="button" class="btn-remove-slot" onclick="removeTimeSlot(this)" aria-label="remove">
                                                <span uk-icon="icon: close; ratio: .6" class="uk-icon" aria-hidden="true"></span>
                                            </button>
                                        </div>
                                    </div>
                                    <button type="button" class="btn-add-slot uk-width-1-1 uk-button uk-button-default" onclick="addTimeSlot('saturday')">
                                        + Add Time Slot
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- Save Button -->
                    <div class="uk-margin-medium-top">
                        <button type="submit" class="uk-button uk-button-primary" onclick="saveSchedule()">
                            Save Changes
                        </button>
                    </div>

                </div>

            </div>

        </div>


    </div><!-- .uk-container -->
</div><!-- .uk-container -->


<script>
    // Replace the existing script section with this updated version

    // Add new time slot to a specific day
    function addTimeSlot(day) {
        const slotsContainer = document.getElementById(day + '-slots');
        const addButton = slotsContainer.querySelector('.btn-add-slot');

        const timeSlot = document.createElement('div');
        timeSlot.className = 'time-slot';
        timeSlot.innerHTML = `
        <select class="uk-select time-select" title="Start time">
            <option value="09:00">9:00 AM</option>
            <option value="10:00">10:00 AM</option>
            <option value="11:00">11:00 AM</option>
            <option value="12:00">12:00 PM</option>
            <option value="13:00">1:00 PM</option>
            <option value="14:00">2:00 PM</option>
            <option value="15:00">3:00 PM</option>
            <option value="16:00">4:00 PM</option>
            <option value="17:00">5:00 PM</option>
            <option value="18:00">6:00 PM</option>
            <option value="19:00">7:00 PM</option>
            <option value="20:00">8:00 PM</option>
        </select>
        <span class="time-separator">to</span>
        <select class="uk-select time-select" title="End time">
            <option value="10:00">10:00 AM</option>
            <option value="11:00">11:00 AM</option>
            <option value="12:00">12:00 PM</option>
            <option value="13:00">1:00 PM</option>
            <option value="14:00">2:00 PM</option>
            <option value="15:00">3:00 PM</option>
            <option value="16:00">4:00 PM</option>
            <option value="17:00">5:00 PM</option>
            <option value="18:00">6:00 PM</option>
            <option value="19:00">7:00 PM</option>
            <option value="20:00">8:00 PM</option>
            <option value="21:00">9:00 PM</option>
        </select>
        <div class="clock-separator"><span uk-icon="icon: clock; ratio: .7" class="uk-icon" aria-hidden="true"></span></div>
        <select class="uk-select duration-select" title="Duration">
            <option value="15">15 min</option>
            <option value="30" selected>30 min</option>
            <option value="45">45 min</option>
            <option value="60">60 min</option>
        </select>
        <div class="remove-slot">
            <button type="button" class="btn-remove-slot" onclick="removeTimeSlot(this)" aria-label="remove">
                <span uk-icon="icon: close; ratio: .6" class="uk-icon" aria-hidden="true"></span>
            </button>
        </div>
    `;

        slotsContainer.insertBefore(timeSlot, addButton);

        // Show notification for adding time slot
        UIkit.notification({
            message: 'New time slot added',
            status: 'success',
            pos: 'bottom-right',
            timeout: 2000
        });
    }

    // Remove time slot with notification
    function removeTimeSlot(button) {
        button.closest('.time-slot').remove();

        // Show notification for removing time slot
        UIkit.notification({
            message: 'Time slot removed',
            status: 'warning',
            pos: 'bottom-right',
            timeout: 2000
        });
    }

    // Validate schedule data
    function validateSchedule(scheduleData) {
        const errors = [];
        let hasAnyEnabledDay = false;
        let hasAnyTimeSlot = false;

        Object.keys(scheduleData).forEach(day => {
            const dayData = scheduleData[day];

            if (dayData.enabled) {
                hasAnyEnabledDay = true;

                if (dayData.slots.length === 0) {
                    errors.push(`${day.charAt(0).toUpperCase() + day.slice(1)} is enabled but has no time slots`);
                } else {
                    hasAnyTimeSlot = true;

                    // Validate each time slot
                    dayData.slots.forEach((slot, index) => {
                        const fromTime = parseInt(slot.from.replace(':', ''));
                        const toTime = parseInt(slot.to.replace(':', ''));

                        if (fromTime >= toTime) {
                            errors.push(`${day.charAt(0).toUpperCase() + day.slice(1)} slot ${index + 1}: End time must be after start time`);
                        }
                    });
                }
            }
        });

        if (!hasAnyEnabledDay) {
            errors.push('Please enable at least one day');
        }

        if (!hasAnyTimeSlot) {
            errors.push('Please add at least one time slot to enabled days');
        }

        return errors;
    }

    // Save schedule data with UIKit notifications
    function saveSchedule() {
        // Show loading notification
        UIkit.notification({
            message: 'Saving your schedule...',
            status: 'primary',
            pos: 'top-center',
            timeout: 3000
        });

        // Collect schedule data
        const scheduleData = {};
        const days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];

        days.forEach(day => {
            const dayToggle = document.querySelector(`[data-day="${day}"]`);
            const slotsContainer = document.getElementById(day + '-slots');
            const timeSlots = slotsContainer.querySelectorAll('.time-slot');

            scheduleData[day] = {
                enabled: dayToggle.checked,
                slots: []
            };

            timeSlots.forEach(slot => {
                const fromTime = slot.querySelector('.time-select:first-child').value;
                const toTime = slot.querySelector('.time-select:last-child').value;
                const duration = slot.querySelector('.duration-select').value;

                scheduleData[day].slots.push({
                    from: fromTime,
                    to: toTime,
                    duration: duration
                });
            });
        });

        // Validate schedule
        const validationErrors = validateSchedule(scheduleData);

        if (validationErrors.length > 0) {
            // Show validation errors
            validationErrors.forEach(error => {
                UIkit.notification({
                    message: error,
                    status: 'warning',
                    pos: 'top-center',
                    timeout: 4000
                });
            });
            return;
        }

        // Get availability status
        const availabilityStatus = document.getElementById('availabilityToggle').checked;
        scheduleData.available = availabilityStatus;

        // Simulate API call (replace with your actual API endpoint)
        setTimeout(() => {
            const success = true; // This would come from your API response

            if (success) {
                UIkit.notification({
                    message: 'Schedule updated successfully!',
                    status: 'success',
                    pos: 'top-center',
                    timeout: 4000
                });

                console.log('Schedule data saved:', scheduleData);
            } else {
                UIkit.notification({
                    message: 'Failed to update schedule. Please try again.',
                    status: 'danger',
                    pos: 'top-center',
                    timeout: 4000
                });
            }
        }, 2000);
    }

    // Handle day toggle changes with notifications
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('day-toggle')) {
            const day = e.target.dataset.day;
            const dayName = day.charAt(0).toUpperCase() + day.slice(1);
            const slotsContainer = document.getElementById(day + '-slots');

            if (e.target.checked) {
                slotsContainer.style.display = 'block';
                UIkit.notification({
                    message: `${dayName} enabled`,
                    status: 'success',
                    pos: 'bottom-right',
                    timeout: 2000
                });
            } else {
                slotsContainer.style.display = 'none';
                UIkit.notification({
                    message: `${dayName} disabled`,
                    status: 'warning',
                    pos: 'bottom-right',
                    timeout: 2000
                });
            }
        }
    });

    // Handle availability toggle with notifications
    document.getElementById('availabilityToggle').addEventListener('change', function() {
        const status = document.getElementById('availabilityStatus');

        if (this.checked) {
            status.textContent = 'Currently Available for Bookings';
            status.style.color = 'var(--success-color)';

            UIkit.notification({
                message: 'You are now available for bookings',
                status: 'success',
                pos: 'top-center',
                timeout: 3000
            });
        } else {
            status.textContent = 'Currently Unavailable for Bookings';
            status.style.color = 'var(--error-color)';

            UIkit.notification({
                message: 'You are now unavailable for bookings',
                status: 'warning',
                pos: 'top-center',
                timeout: 3000
            });
        }
    });

    // Optional: Auto-save functionality
    function enableAutoSave() {
        let saveTimeout;

        // Auto-save when day toggles change
        document.addEventListener('change', function(e) {
            if (e.target.classList.contains('day-toggle') || e.target.id === 'availabilityToggle') {
                clearTimeout(saveTimeout);
                saveTimeout = setTimeout(() => {
                    UIkit.notification({
                        message: 'Changes saved automatically',
                        status: 'success',
                        pos: 'bottom-right',
                        timeout: 2000
                    });
                }, 3000);
            }
        });

        // Auto-save when time slots change
        document.addEventListener('change', function(e) {
            if (e.target.classList.contains('time-select') || e.target.classList.contains('duration-select')) {
                clearTimeout(saveTimeout);
                saveTimeout = setTimeout(() => {
                    UIkit.notification({
                        message: 'Time slot changes saved',
                        status: 'success',
                        pos: 'bottom-right',
                        timeout: 2000
                    });
                }, 2000);
            }
        });
    }

    // Call this if you want to enable auto-save
    // enableAutoSave();
</script>

<?php include 'footer.php'; ?>