<?php
/**
 * Batch Schedule Page
 *
 * Uses existing header/footer layout.
 * Expected variables: $courses, $batches, $basePath, $settings, $csrfToken
 */

$basePath = defined('BASE_PATH') ? BASE_PATH : '/gmind';
include __DIR__ . '/../layouts/header.php';
?>

<!-- Batch Schedule Hero -->
<section class="inner-hero" style="background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); color: #fff; padding: 60px 20px; text-align: center;">
    <div class="container">
        <h1 style="font-size: 2.2rem; margin: 0 0 10px;">Batch Schedule</h1>
        <p style="font-size: 1.1rem; opacity: 0.9; margin: 0;">Upcoming batches and seat availability</p>
    </div>
</section>

<!-- Batch Schedule Content -->
<section style="padding: 40px 20px;">
    <div class="container">
        <!-- Filters -->
        <div style="display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;">
            <form method="GET" action="<?= $basePath ?>/batch-schedule" style="display: flex; gap: 12px; flex-wrap: wrap;">
                <select name="course_id"
                    style="padding: 8px 14px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: .9rem; min-width: 180px;">
                    <option value="0">All Courses</option>
                    <?php foreach ($courses as $course): ?>
                    <option value="<?= (int) $course['id'] ?>" <?= ((int)($_GET['course_id'] ?? 0) === (int)$course['id']) ? 'selected' : '' ?>>
                        <?= htmlspecialchars($course['name'], ENT_QUOTES, 'UTF-8') ?>
                    </option>
                    <?php endforeach; ?>
                </select>

                <select name="shift"
                    style="padding: 8px 14px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: .9rem; min-width: 150px;">
                    <option value="">All Shifts</option>
                    <option value="morning" <?= ($_GET['shift'] ?? '') === 'morning' ? 'selected' : '' ?>>Morning</option>
                    <option value="afternoon" <?= ($_GET['shift'] ?? '') === 'afternoon' ? 'selected' : '' ?>>Afternoon</option>
                    <option value="evening" <?= ($_GET['shift'] ?? '') === 'evening' ? 'selected' : '' ?>>Evening</option>
                    <option value="weekend" <?= ($_GET['shift'] ?? '') === 'weekend' ? 'selected' : '' ?>>Weekend</option>
                </select>

                <button type="submit"
                    style="padding: 8px 20px; background: #2563eb; color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer;">
                    Filter
                </button>
                <a href="<?= $basePath ?>/batch-schedule"
                    style="padding: 8px 20px; background: #e2e8f0; color: #1e293b; border-radius: 8px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center;">
                    Reset
                </a>
            </form>
        </div>

        <!-- Batch Table -->
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08);">
                <thead>
                    <tr>
                        <th style="background: #2563eb; color: #fff; padding: 14px 16px; text-align: left; font-size: .875rem;">Course</th>
                        <th style="background: #2563eb; color: #fff; padding: 14px 16px; text-align: left; font-size: .875rem;">Batch</th>
                        <th style="background: #2563eb; color: #fff; padding: 14px 16px; text-align: left; font-size: .875rem;">Timing</th>
                        <th style="background: #2563eb; color: #fff; padding: 14px 16px; text-align: left; font-size: .875rem;">Shift</th>
                        <th style="background: #2563eb; color: #fff; padding: 14px 16px; text-align: left; font-size: .875rem;">Start Date</th>
                        <th style="background: #2563eb; color: #fff; padding: 14px 16px; text-align: left; font-size: .875rem;">Seats</th>
                        <th style="background: #2563eb; color: #fff; padding: 14px 16px; text-align: left; font-size: .875rem;">Trainer</th>
                        <th style="background: #2563eb; color: #fff; padding: 14px 16px; text-align: left; font-size: .875rem;">Action</th>
                    </tr>
                </thead>
                <tbody>
                <?php if (!empty($batches)): ?>
                    <?php foreach ($batches as $batch): ?>
                        <?php
                        $seatClass = $batch['available_seats'] <= 0 ? '#ef4444' : ($batch['available_seats'] <= 5 ? '#f59e0b' : '#10b981');
                        $seatText = $batch['available_seats'] <= 0 ? 'Full' : $batch['available_seats'] . ' / ' . $batch['total_seats'];
                        $shiftColors = ['morning' => '#d97706', 'afternoon' => '#dc2626', 'evening' => '#7c3aed', 'weekend' => '#059669'];
                        $shiftColor = $shiftColors[$batch['shift']] ?? '#64748b';
                        ?>
                    <tr style="border-bottom: 1px solid #f1f5f9;">
                        <td style="padding: 12px 16px; font-size: .9rem;"><?= htmlspecialchars($batch['course_name'], ENT_QUOTES, 'UTF-8') ?></td>
                        <td style="padding: 12px 16px; font-size: .9rem; font-weight: 600;"><?= htmlspecialchars($batch['batch_name'], ENT_QUOTES, 'UTF-8') ?></td>
                        <td style="padding: 12px 16px; font-size: .9rem;"><?= htmlspecialchars($batch['timing'], ENT_QUOTES, 'UTF-8') ?></td>
                        <td style="padding: 12px 16px; font-size: .9rem;">
                            <span style="display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; text-transform: uppercase; color: <?= $shiftColor ?>; background: <?= $shiftColor ?>15;">
                                <?= htmlspecialchars(ucfirst($batch['shift']), ENT_QUOTES, 'UTF-8') ?>
                            </span>
                        </td>
                        <td style="padding: 12px 16px; font-size: .9rem;"><?= htmlspecialchars($batch['start_date'], ENT_QUOTES, 'UTF-8') ?></td>
                        <td style="padding: 12px 16px; font-size: .9rem;">
                            <span style="display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .8rem; font-weight: 600; color: <?= $seatClass ?>; background: <?= $seatClass ?>15;">
                                <?= $seatText ?>
                            </span>
                        </td>
                        <td style="padding: 12px 16px; font-size: .9rem;"><?= htmlspecialchars($batch['trainer_name'] ?? '-', ENT_QUOTES, 'UTF-8') ?></td>
                        <td style="padding: 12px 16px; font-size: .9rem;">
                            <?php if ($batch['available_seats'] > 0): ?>
                            <button onclick="openBookingModal(<?= (int) $batch['id'] ?>, '<?= htmlspecialchars(addslashes($batch['batch_name']), ENT_QUOTES, 'UTF-8') ?>')"
                                style="padding: 4px 12px; border-radius: 6px; font-size: .8rem; cursor: pointer; border: none; font-weight: 600; background: #d1fae5; color: #065f46;">
                                Book Seat
                            </button>
                            <?php else: ?>
                            <span style="padding: 4px 12px; border-radius: 6px; font-size: .8rem; font-weight: 600; background: #fee2e2; color: #991b1b;">Full</span>
                            <?php endif; ?>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="8" style="text-align: center; padding: 40px; color: #64748b;">
                            No batches available at the moment. Please check back soon!
                        </td>
                    </tr>
                <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</section>

<!-- Booking Modal -->
<div id="bookingModal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:9998; justify-content:center; align-items:center; padding:20px;">
    <div style="background:#fff; border-radius:12px; max-width:500px; width:100%; max-height:90vh; overflow-y:auto; position:relative;">
        <div style="padding:20px 24px; border-bottom:1px solid #e2e8f0; display:flex; justify-content:space-between; align-items:center;">
            <h3 style="margin:0; font-size:1.25rem;">Book Your Seat</h3>
            <button onclick="closeBookingModal()" style="background:none; border:none; font-size:1.5rem; cursor:pointer; color:#64748b;">&times;</button>
        </div>
        <div style="padding:24px;">
            <p id="bookingBatchName" style="font-weight:700; color:#2563eb; margin-bottom:16px;"></p>
            <form id="bookingForm" method="POST" action="<?= $basePath ?>/batch-schedule/book">
                <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken, ENT_QUOTES, 'UTF-8') ?>">
                <input type="hidden" name="batch_id" id="bookingBatchId" value="">

                <div style="margin-bottom:16px;">
                    <label style="display:block; font-weight:600; margin-bottom:6px; font-size:.875rem;">Student Name *</label>
                    <input type="text" name="student_name" required placeholder="Your name"
                        style="width:100%; padding:10px 14px; border:2px solid #e2e8f0; border-radius:8px; font-size:.95rem; box-sizing:border-box;">
                </div>

                <div style="margin-bottom:16px;">
                    <label style="display:block; font-weight:600; margin-bottom:6px; font-size:.875rem;">Contact Number *</label>
                    <input type="tel" name="contact" required pattern="[0-9]{10}" placeholder="10-digit number"
                        style="width:100%; padding:10px 14px; border:2px solid #e2e8f0; border-radius:8px; font-size:.95rem; box-sizing:border-box;">
                </div>

                <div style="margin-bottom:16px;">
                    <label style="display:block; font-weight:600; margin-bottom:6px; font-size:.875rem;">Email (Optional)</label>
                    <input type="email" name="email" placeholder="Email address"
                        style="width:100%; padding:10px 14px; border:2px solid #e2e8f0; border-radius:8px; font-size:.95rem; box-sizing:border-box;">
                </div>

                <button type="submit"
                    style="width:100%; padding:14px; background:linear-gradient(135deg, #10b981, #059669); color:#fff; border:none; border-radius:8px; font-size:1rem; font-weight:700; cursor:pointer;">
                    Book Seat ✓
                </button>
            </form>
        </div>
    </div>
</div>

<script>
function openBookingModal(batchId, batchName) {
    document.getElementById('bookingBatchId').value = batchId;
    document.getElementById('bookingBatchName').textContent = batchName;
    document.getElementById('bookingForm').querySelector('input[name="student_name"]').value = '';
    document.getElementById('bookingForm').querySelector('input[name="contact"]').value = '';
    document.getElementById('bookingForm').querySelector('input[name="email"]').value = '';
    document.getElementById('bookingModal').style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

function closeBookingModal() {
    document.getElementById('bookingModal').style.display = 'none';
    document.body.style.overflow = '';
}

document.getElementById('bookingModal').addEventListener('click', function(e) {
    if (e.target === this) closeBookingModal();
});
</script>

<?php include __DIR__ . '/../layouts/footer.php'; ?>
