<div class="container py-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="<?= APP_URL ?>/mentors" class="text-decoration-none">Mentor Network</a></li>
            <li class="breadcrumb-item"><a href="<?= APP_URL ?>/mentors/<?= $mentor['user_id'] ?>" class="text-decoration-none"><?= htmlspecialchars($mentor['first_name'] . ' ' . $mentor['last_name']) ?></a></li>
            <li class="breadcrumb-item active" aria-current="page">Book Session</li>
        </ol>
    </nav>

    <div class="row justify-content-center">
        <div class="col-lg-9">
            <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
                <div class="row g-0">
                    <!-- Sidebar Mentor Brief -->
                    <div class="col-md-4 text-white p-5 d-flex flex-column justify-content-between" style="background: linear-gradient(135deg, #1a2940 0%, #2f4858 100%) !important;">
                        <div>
                            <span class="badge bg-warning text-dark text-uppercase text-3xs font-outfit mb-3">Booking With</span>
                            <img src="<?= avatarUrl($mentor['avatar'], $mentor['first_name'] . ' ' . $mentor['last_name']) ?>" alt="Mentor" class="rounded-circle border border-3 border-white shadow-sm mb-3 d-block mx-auto" style="width: 100px; height: 100px; object-fit: cover;">
                            <h4 class="fw-bold font-outfit text-center text-white mb-1"><?= htmlspecialchars($mentor['first_name'] . ' ' . $mentor['last_name']) ?></h4>
                            <p class="text-white-50 text-xs text-center mb-0"><i class="fa-solid fa-school text-warning me-1"></i> <?= htmlspecialchars($mentor['university_name'] ?? 'University') ?></p>
                        </div>
                        <div class="text-center text-xs text-white-50 mt-4">
                            <p class="mb-0">Virtual classes are conducted online. The mentor will contact you via messaging once they confirm this booking.</p>
                        </div>
                    </div>

                    <!-- Booking Form -->
                    <div class="col-md-8 p-5 bg-white">
                        <h3 class="fw-bold font-outfit text-dark mb-4">Book A Session</h3>
                        
                        <form action="<?= APP_URL ?>/sessions/book" method="POST">
                            <?= csrf_field() ?>
                            <input type="hidden" name="mentor_id" value="<?= $mentor['user_id'] ?>">

                            <div class="row g-3">
                                <div class="col-12">
                                    <label for="title" class="form-label text-sm fw-medium">Session Title / Topic</label>
                                    <input type="text" class="form-control rounded-3" id="title" name="title" required placeholder="e.g. KNUST Engineering Admissions Consultation">
                                </div>
                                <div class="col-md-6">
                                    <label for="session_type" class="form-label text-sm fw-medium">Session Category</label>
                                    <select class="form-select rounded-3" id="session_type" name="session_type" required>
                                        <option value="mentorship">Mentorship Consultation</option>
                                        <option value="academic_prep">Academic Prep / Tutoring</option>
                                        <option value="career_guidance">Career Guidances</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="duration_min" class="form-label text-sm fw-medium">Duration</label>
                                    <select class="form-select rounded-3" id="duration_min" name="duration_min" required>
                                        <option value="30">30 Minutes</option>
                                        <option value="60" selected>60 Minutes (1 Hour)</option>
                                        <option value="90">90 Minutes</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="scheduled_date" class="form-label text-sm fw-medium">Select Date</label>
                                    <input type="date" class="form-control rounded-3" id="scheduled_date" name="scheduled_date" required min="<?= date('Y-m-d') ?>">
                                </div>
                                <div class="col-md-6">
                                    <label for="scheduled_time" class="form-label text-sm fw-medium">Select Time Slot</label>
                                    <select class="form-select rounded-3" id="scheduled_time" name="scheduled_time" required disabled>
                                        <option value="">-- Please select a date first --</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label for="description" class="form-label text-sm fw-medium">What do you want to learn? (Details)</label>
                                    <textarea class="form-control rounded-3" id="description" name="description" rows="3" required placeholder="Write a short summary of questions or course topics you would like the mentor to address..."></textarea>
                                </div>
                                <div class="col-12 mt-4">
                                    <button type="submit" class="btn btn-primary rounded-pill px-5 shadow-sm py-2 font-outfit fw-bold">Submit Booking Request</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dateInput = document.getElementById('scheduled_date');
    const timeSelect = document.getElementById('scheduled_time');
    const mentorId = <?= $mentor['user_id'] ?>;

    dateInput.addEventListener('change', function() {
        const selectedDate = this.value;
        if (!selectedDate) {
            timeSelect.innerHTML = '<option value="">-- Please select a date first --</option>';
            timeSelect.disabled = true;
            return;
        }

        timeSelect.innerHTML = '<option value="">Loading slots...</option>';
        timeSelect.disabled = true;

        fetch(`${APP_URL}/api/sessions/available-slots?mentor_id=${mentorId}&date=${selectedDate}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(res => res.json())
        .then(data => {
            timeSelect.innerHTML = '';
            if (data.success && data.slots && data.slots.length > 0) {
                timeSelect.innerHTML = '<option value="">-- Select an available slot --</option>';
                data.slots.forEach(slot => {
                    const opt = document.createElement('option');
                    opt.value = slot;
                    opt.textContent = slot;
                    timeSelect.appendChild(opt);
                });
                timeSelect.disabled = false;
            } else {
                timeSelect.innerHTML = '<option value="">No available slots for this date</option>';
            }
        })
        .catch(err => {
            console.error('Error fetching slots:', err);
            timeSelect.innerHTML = '<option value="">Error loading slots. Try another date.</option>';
        });
    });
});
</script>
