<?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">

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

                    <!-- Schedule Header -->
                    <div class="uk-width-expand@s">
                        <div class="profile-header">
                            <h2 class="uk-heading-divider">My Schedule</h2>
                            <p class="uk-margin-small-top uk-margin-remove-bottom">Manage your availability, view upcoming sessions, and set your working hours.</p>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="uk-width-auto@s">
                        <div class="uk-flex uk-flex-right gap-8">
                            <button class="uk-button uk-button-small uk-button-default" onclick="refreshSchedule()">
                                <span uk-icon="icon: refresh; ratio: 0.6"></span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Schedule Summary Cards -->
                <div class="uk-grid uk-grid-match uk-grid-medium uk-child-width-1-2 uk-child-width-1-2@s uk-child-width-1-4@m" uk-grid>
                    <div>
                        <div class="cart-item-small">
                            <h3 class="uk-card-title uk-margin-remove uk-text-primary">3</h3>
                            <p class="f600 uk-margin-remove">Today's Sessions</p>
                        </div>
                    </div>
                    <div>
                        <div class="cart-item-small">
                            <h3 class="uk-card-title uk-margin-remove uk-text-warning">12</h3>
                            <p class="f600 uk-margin-remove">This Week</p>
                        </div>
                    </div>
                    <div>
                        <div class="cart-item-small">
                            <h3 class="uk-card-title uk-margin-remove uk-text-success">8</h3>
                            <p class="f600 uk-margin-remove">Available Slots</p>
                        </div>
                    </div>
                    <div>
                        <div class="cart-item-small">
                            <h3 class="uk-card-title uk-margin-remove uk-text-secondary">85%</h3>
                            <p class="f600 uk-margin-remove">Booking Rate</p>
                        </div>
                    </div>
                </div>

                <hr class="uk-margin-medium-top">

                <!-- Calendar Navigation -->
                <div class="uk-margin-medium-top">
                    <div class="uk-grid uk-grid-small uk-flex-between uk-flex-middle" uk-grid>
                        <div class="uk-width-auto">
                            <button class="uk-button uk-button-default uk-button-small" onclick="previousWeek()">
                                <span uk-icon="icon: chevron-left; ratio: 0.7"></span> Previous
                            </button>
                        </div>
                        <div class="uk-width-expand uk-text-center">
                            <h3 class="uk-margin-remove uk-h5" id="currentWeek">August 19 - 25, 2025</h3>
                        </div>
                        <div class="uk-width-auto">
                            <button class="uk-button uk-button-default uk-button-small" onclick="nextWeek()">
                                Next <span uk-icon="icon: chevron-right; ratio: 0.7"></span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Weekly Schedule Grid -->
                <div class="uk-margin-medium-top" id="scheduleGrid">
                    <div class="uk-overflow-auto">
                        <table class="uk-table uk-table-small uk-table-divider schedule-table">
                            <thead>
                                <tr>
                                    <th class="time-column">Time</th>
                                    <th class="uk-text-center">Mon<br><small>Aug 19</small></th>
                                    <th class="uk-text-center">Tue<br><small>Aug 20</small></th>
                                    <th class="uk-text-center">Wed<br><small>Aug 21</small></th>
                                    <th class="uk-text-center">Thu<br><small>Aug 22</small></th>
                                    <th class="uk-text-center">Fri<br><small>Aug 23</small></th>
                                    <th class="uk-text-center">Sat<br><small>Aug 24</small></th>
                                    <th class="uk-text-center">Sun<br><small>Aug 25</small></th>
                                </tr>
                            </thead>
                            <tbody id="scheduleTableBody">
                                <!-- 9:00 AM -->
                                <tr>
                                    <td class="time-slot">9:00 AM</td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('mon', '09:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell booked">
                                        <div class="slot-booked">
                                            <strong>Fatima Hassan</strong><br>
                                            <small>Coding Practice</small>
                                        </div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('wed', '09:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell blocked">
                                        <div class="slot-blocked">Blocked</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('fri', '09:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('sat', '09:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell unavailable">
                                        <div class="slot-unavailable">Unavailable</div>
                                    </td>
                                </tr>

                                <!-- 10:00 AM -->
                                <tr>
                                    <td class="time-slot">10:00 AM</td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('mon', '10:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('tue', '10:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('wed', '10:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell booked">
                                        <div class="slot-booked">
                                            <strong>Ahmad Rahman</strong><br>
                                            <small>Behavioral Coaching</small>
                                        </div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('fri', '10:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('sat', '10:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell unavailable">
                                        <div class="slot-unavailable">Unavailable</div>
                                    </td>
                                </tr>

                                <!-- 11:00 AM -->
                                <tr>
                                    <td class="time-slot">11:00 AM</td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('mon', '11:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('tue', '11:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell booked current-session">
                                        <div class="slot-booked">
                                            <strong>Mohammed Ali</strong><br>
                                            <small>System Design</small><br>
                                            <span class="uk-text-success uk-text-small">In Progress</span>
                                        </div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('thu', '11:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell blocked">
                                        <div class="slot-blocked">Blocked</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('sat', '11:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell unavailable">
                                        <div class="slot-unavailable">Unavailable</div>
                                    </td>
                                </tr>

                                <!-- 2:00 PM -->
                                <tr>
                                    <td class="time-slot">2:00 PM</td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('mon', '14:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('tue', '14:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell booked upcoming-session">
                                        <div class="slot-booked">
                                            <strong>Sarah Ahmad</strong><br>
                                            <small>Technical Interview</small><br>
                                            <span class="uk-text-warning uk-text-small">Upcoming</span>
                                        </div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('thu', '14:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('fri', '14:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell booked">
                                        <div class="slot-booked">
                                            <strong>Nora Abdullah</strong><br>
                                            <small>Algorithm Practice</small>
                                        </div>
                                    </td>
                                    <td class="schedule-cell unavailable">
                                        <div class="slot-unavailable">Unavailable</div>
                                    </td>
                                </tr>

                                <!-- 3:00 PM -->
                                <tr>
                                    <td class="time-slot">3:00 PM</td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('mon', '15:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell blocked">
                                        <div class="slot-blocked">Blocked</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('wed', '15:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('thu', '15:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('fri', '15:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('sat', '15:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell unavailable">
                                        <div class="slot-unavailable">Unavailable</div>
                                    </td>
                                </tr>

                                <!-- 4:00 PM -->
                                <tr>
                                    <td class="time-slot">4:00 PM</td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('mon', '16:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('tue', '16:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('wed', '16:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('thu', '16:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('fri', '16:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell available" onclick="selectTimeSlot('sat', '16:00')">
                                        <div class="slot-available">Available</div>
                                    </td>
                                    <td class="schedule-cell unavailable">
                                        <div class="slot-unavailable">Unavailable</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Schedule Legend -->
                <div class="uk-margin-medium-top">
                    <div class="uk-grid uk-grid-small uk-child-width-auto uk-flex-center" uk-grid>
                        <div class="uk-flex uk-flex-middle">
                            <div class="legend-item available"></div>
                            <span class="uk-text-small uk-margin-small-left">Available</span>
                        </div>
                        <div class="uk-flex uk-flex-middle">
                            <div class="legend-item booked"></div>
                            <span class="uk-text-small uk-margin-small-left">Booked</span>
                        </div>
                        <div class="uk-flex uk-flex-middle">
                            <div class="legend-item blocked"></div>
                            <span class="uk-text-small uk-margin-small-left">Blocked</span>
                        </div>
                        <div class="uk-flex uk-flex-middle">
                            <div class="legend-item unavailable"></div>
                            <span class="uk-text-small uk-margin-small-left">Unavailable</span>
                        </div>
                    </div>
                </div>

            </div>

        </div>

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

<!-- Set Availability Modal -->
<div id="availabilityModal" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <h2 class="uk-modal-title">Set Weekly Availability</h2>

        <form id="availabilityForm">
            <div class="uk-margin">
                <h4 class="uk-h5">Working Hours</h4>
                <div class="uk-grid uk-grid-small" uk-grid>
                    <div class="uk-width-1-2">
                        <label class="form-label">Start Time</label>
                        <input type="time" class="uk-input" id="workStartTime" value="09:00">
                    </div>
                    <div class="uk-width-1-2">
                        <label class="form-label">End Time</label>
                        <input type="time" class="uk-input" id="workEndTime" value="17:00">
                    </div>
                </div>
            </div>

            <div class="uk-margin">
                <h4 class="uk-h5">Working Days</h4>
                <div class="uk-grid uk-grid-small uk-child-width-auto" uk-grid>
                    <div><label><input class="uk-checkbox" type="checkbox" checked> Monday</label></div>
                    <div><label><input class="uk-checkbox" type="checkbox" checked> Tuesday</label></div>
                    <div><label><input class="uk-checkbox" type="checkbox" checked> Wednesday</label></div>
                    <div><label><input class="uk-checkbox" type="checkbox" checked> Thursday</label></div>
                    <div><label><input class="uk-checkbox" type="checkbox" checked> Friday</label></div>
                    <div><label><input class="uk-checkbox" type="checkbox" checked> Saturday</label></div>
                    <div><label><input class="uk-checkbox" type="checkbox"> Sunday</label></div>
                </div>
            </div>

            <div class="uk-margin">
                <h4 class="uk-h5">Session Duration Options</h4>
                <div class="uk-grid uk-grid-small uk-child-width-auto" uk-grid>
                    <div><label><input class="uk-checkbox" type="checkbox" checked> 30 minutes</label></div>
                    <div><label><input class="uk-checkbox" type="checkbox" checked> 45 minutes</label></div>
                    <div><label><input class="uk-checkbox" type="checkbox" checked> 60 minutes</label></div>
                    <div><label><input class="uk-checkbox" type="checkbox"> 90 minutes</label></div>
                </div>
            </div>

            <div class="uk-margin uk-text-right">
                <button class="uk-button uk-button-default uk-modal-close uk-margin-small-right" type="button">Cancel</button>
                <button class="uk-button uk-button-primary" type="submit">Save Availability</button>
            </div>
        </form>
    </div>
</div>



<script>
    // Enhanced week navigation with actual functionality
    let currentWeekStart = new Date('2025-08-19'); // Starting week

    function formatDate(date) {
        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ];
        return `${months[date.getMonth()]} ${date.getDate()}`;
    }

    function updateWeekHeader(startDate) {
        const endDate = new Date(startDate);
        endDate.setDate(endDate.getDate() + 6);

        const headerText = `${formatDate(startDate)} - ${formatDate(endDate)}, ${startDate.getFullYear()}`;
        document.getElementById('currentWeek').textContent = headerText;
    }

    function updateTableHeaders(startDate) {
        const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        const headers = document.querySelectorAll('thead th');

        for (let i = 1; i < headers.length; i++) { // Skip first column (Time)
            const date = new Date(startDate);
            date.setDate(date.getDate() + (i - 1));

            headers[i].innerHTML = `${days[i-1]}<br><small>${formatDate(date)}</small>`;
        }
    }

    function clearScheduleData() {
        // Clear all booked sessions and reset to available
        const scheduleCells = document.querySelectorAll('.schedule-cell');

        scheduleCells.forEach((cell, index) => {
            // Skip time column cells
            if (!cell.classList.contains('time-slot')) {
                // Reset classes
                cell.className = 'schedule-cell available';
                cell.onclick = function() {
                    const row = Math.floor(index / 7);
                    const col = index % 7;
                    const days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
                    const times = ['09:00', '10:00', '11:00', '14:00', '15:00', '16:00'];
                    selectTimeSlot(days[col], times[row]);
                };

                // Reset content
                cell.innerHTML = '<div class="slot-available">Available</div>';
            }
        });
    }

    function loadSampleScheduleData() {
        // This is where you would normally load data from your backend
        // For demo purposes, we'll add some sample bookings

        const sampleBookings = [{
                day: 1, // Tuesday (0-based)
                time: 0, // 9:00 AM (0-based)
                client: 'Fatima Hassan',
                service: 'Coding Practice',
                status: 'booked'
            },
            {
                day: 3, // Thursday
                time: 1, // 10:00 AM
                client: 'Ahmad Rahman',
                service: 'Behavioral Coaching',
                status: 'booked'
            }
        ];

        // Apply sample bookings randomly for demo
        sampleBookings.forEach(booking => {
            const rows = document.querySelectorAll('#scheduleTableBody tr');
            if (rows[booking.time]) {
                const cells = rows[booking.time].querySelectorAll('.schedule-cell');
                if (cells[booking.day]) {
                    cells[booking.day].className = 'schedule-cell booked';
                    cells[booking.day].innerHTML = `
                    <div class="slot-booked">
                        <strong>${booking.client}</strong><br>
                        <small>${booking.service}</small>
                    </div>
                `;
                    cells[booking.day].onclick = null;
                }
            }
        });
    }

    // Navigate weeks
    function previousWeek() {
        UIkit.notification({
            message: 'Loading previous week...',
            status: 'primary',
            pos: 'top-center',
            timeout: 1500
        });

        // Move to previous week
        currentWeekStart.setDate(currentWeekStart.getDate() - 7);

        setTimeout(() => {
            // Update the UI
            updateWeekHeader(currentWeekStart);
            updateTableHeaders(currentWeekStart);
            clearScheduleData();
            loadSampleScheduleData();

            UIkit.notification({
                message: 'Previous week loaded successfully!',
                status: 'success',
                pos: 'top-center',
                timeout: 2000
            });
        }, 1500);
    }

    function nextWeek() {
        UIkit.notification({
            message: 'Loading next week...',
            status: 'primary',
            pos: 'top-center',
            timeout: 1500
        });

        // Move to next week
        currentWeekStart.setDate(currentWeekStart.getDate() + 7);

        setTimeout(() => {
            // Update the UI
            updateWeekHeader(currentWeekStart);
            updateTableHeaders(currentWeekStart);
            clearScheduleData();
            loadSampleScheduleData();

            UIkit.notification({
                message: 'Next week loaded successfully!',
                status: 'success',
                pos: 'top-center',
                timeout: 2000
            });
        }, 1500);
    }

    // Refresh schedule
    function refreshSchedule() {
        UIkit.notification({
            message: 'Refreshing schedule...',
            status: 'primary',
            pos: 'top-center',
            timeout: 2000
        });

        setTimeout(() => {
            // Reload current week data
            clearScheduleData();
            loadSampleScheduleData();

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

    // Select time slot
    function selectTimeSlot(day, time) {
        UIkit.notification({
            message: `Selected ${day} at ${time}`,
            status: 'primary',
            pos: 'top-center',
            timeout: 2000
        });
    }

    // Set availability
    function setAvailability() {
        UIkit.modal('#availabilityModal').show();
    }

    // Handle availability form submission
    document.getElementById('availabilityForm').addEventListener('submit', function(e) {
        e.preventDefault();

        UIkit.notification({
            message: 'Availability settings updated successfully!',
            status: 'success',
            pos: 'top-center',
            timeout: 3000
        });

        UIkit.modal('#availabilityModal').hide();
    });

    // Initialize
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Schedule dashboard loaded');

        // Set initial week display
        updateWeekHeader(currentWeekStart);
        updateTableHeaders(currentWeekStart);
    });
</script>

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