<?php
// Filename: booking/view_schedule.php
include '../config.php';

requireLogin(); 

$uid = $_SESSION['user_id'];
$u_stmt = $pdo->prepare("SELECT full_name, role, avatar FROM users WHERE id = ?");
$u_stmt->execute([$uid]);
$user_data = $u_stmt->fetch(PDO::FETCH_ASSOC);

$full_name = $user_data['full_name'];
$user_avatar = $user_data['avatar'];

$selected_date = isset($_GET['date']) ? $_GET['date'] : date('Y-m-d');

// FIX: Removed "LEFT JOIN users" - table uses 'teacher_name' column directly
$sql = "SELECT b.*, r.name as room_name 
        FROM bookings b 
        JOIN rooms r ON b.room_id = r.id 
        WHERE b.booking_date = ? AND b.status = 'approved' 
        ORDER BY b.start_time ASC, r.name ASC";

$stmt = $pdo->prepare($sql);
$stmt->execute([$selected_date]);
$bookings = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daily Schedule</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root { --primary-grad: linear-gradient(135deg, #6366f1 0%, #8B5CF6 100%); --bg-color: #f8f9fd; }
        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--bg-color); padding-bottom: 80px; }
        .app-header { background: var(--primary-grad); padding: 20px 20px 80px 20px; border-radius: 0 0 35px 35px; color: white; }
        .avatar-ring { border: 2px solid rgba(255,255,255,0.8); padding: 2px; border-radius: 50%; width: 54px; height: 54px; }
        .avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; }
        .floating-card { background: white; margin: -50px 20px 20px 20px; border-radius: 24px; padding: 15px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); position: relative; z-index: 10; }
        .schedule-item { border-left: 4px solid #6366f1; background: white; border-radius: 12px; padding: 15px; margin-bottom: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
        .schedule-time { font-weight: 700; color: #6366f1; font-size: 0.9rem; margin-bottom: 4px; }
        .room-badge { background: #f1f5f9; color: #475569; padding: 2px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
    </style>
</head>
<body>
    <div class="app-header">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <a href="index.php" class="text-white text-decoration-none opacity-75"><i class="bi bi-arrow-left fs-4"></i> Booking Grid</a>
        </div>
        <div class="d-flex align-items-center">
            <div class="avatar-ring me-3">
                <?php if(!empty($user_avatar)): ?><img src="../<?= $user_avatar ?>" class="avatar-img"><?php else: ?><div class="avatar-img d-flex align-items-center justify-content-center text-primary fw-bold bg-white"><?= substr($full_name,0,1) ?></div><?php endif; ?>
            </div>
            <div>
                <div class="opacity-75 small">Public View</div>
                <h5 class="mb-0 fw-bold">Daily Schedule</h5>
            </div>
        </div>
    </div>
    <div class="floating-card">
        <form id="dateForm" method="GET" class="d-flex justify-content-between align-items-center">
            <a href="?date=<?= date('Y-m-d', strtotime($selected_date . ' -1 day')) ?>" class="btn btn-light rounded-circle shadow-sm" style="width:40px; height:40px; display:flex; align-items:center; justify-content:center;"><i class="bi bi-chevron-left"></i></a>
            <div class="text-center">
                <input type="date" name="date" class="form-control border-0 bg-transparent fw-bold text-dark text-center shadow-none p-0" style="font-size: 1.1rem; cursor: pointer;" value="<?= $selected_date ?>" onchange="document.getElementById('dateForm').submit()">
                <small class="text-muted d-block mt-1"><?= date('l', strtotime($selected_date)) ?></small>
            </div>
            <a href="?date=<?= date('Y-m-d', strtotime($selected_date . ' +1 day')) ?>" class="btn btn-light rounded-circle shadow-sm" style="width:40px; height:40px; display:flex; align-items:center; justify-content:center;"><i class="bi bi-chevron-right"></i></a>
        </form>
    </div>
    <div class="container px-3">
        <?php if (count($bookings) > 0): ?>
            <div class="d-flex justify-content-between align-items-center mb-3 px-2">
                <small class="text-muted fw-bold text-uppercase">Approved Bookings</small>
                <span class="badge bg-primary bg-opacity-10 text-primary rounded-pill"><?= count($bookings) ?> Total</span>
            </div>
            <?php foreach($bookings as $row): ?>
                <div class="schedule-item">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="schedule-time"><i class="bi bi-clock me-1"></i><?= date('h:i A', strtotime($row['start_time'])) ?> - <?= date('h:i A', strtotime($row['end_time'])) ?></div>
                        <span class="room-badge"><?= $row['room_name'] ?></span>
                    </div>
                    <div class="d-flex align-items-center mb-2">
                        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2" style="width:24px; height:24px; font-size:0.7rem;"><?= substr($row['teacher_name'] ?? 'U', 0, 1) ?></div>
                        <div class="fw-bold text-dark small"><?= $row['teacher_name'] ?? 'Unknown' ?></div>
                    </div>
                    <div class="text-muted small fst-italic ps-1 border-start ms-1">"<?= $row['purpose'] ?>"</div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <div class="text-center py-5">
                <div class="bg-light rounded-circle d-inline-flex p-4 mb-3"><i class="bi bi-calendar-check text-muted fs-1 opacity-50"></i></div>
                <h6 class="fw-bold text-muted">All Rooms Free</h6>
                <small class="text-muted opacity-75">No approved bookings for this date.</small>
            </div>
        <?php endif; ?>
    </div>
<?php include '../menu.php'; ?>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>