<?php
require_once "config/db.php";

$sql = "
SELECT 
    s.id_seance,
    a.nom_activite,
    c.prenom AS coach,
    s.date_heure_debut,
    s.duree_minutes,
    s.capacite_max
FROM Seance s
JOIN Activite a ON a.id_activite = s.id_activite
LEFT JOIN Coach c ON c.id_coach = s.id_coach
";

$stmt = $pdo->query($sql);
$events = [];

while($r = $stmt->fetch()){
    $events[] = [
        "id" => $r['id_seance'],
        "title" => $r['nom_activite'],
        "start" => $r['date_heure_debut'],
        "extendedProps" => [
            "coach" => $r['coach'],
            "duree" => $r['duree_minutes'],
            "capacite" => $r['capacite_max']
        ]
    ];
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Planning – Salle Colvert</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.css" rel="stylesheet">

<style>
body{
    background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
    color:white;
}
#calendar{
    background:white;
    border-radius:15px;
    padding:15px;
}
</style>
</head>

<body class="p-4">
<?php
$hero_title = "📅 Planning des séances";
$hero_subtitle = "Découvrez nos cours";
include "includes/hero_banner.php";
?>
<div class="mb-4">
    <a href="dashboard.php" class="btn btn-outline-light">
        ← Retour au dashboard
    </a>
</div>

<h2 class="text-center mb-4">📅 Planning des séances</h2>

<div id="calendar"></div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function(){

    let calendar = new FullCalendar.Calendar(
        document.getElementById('calendar'), {
            initialView: 'dayGridMonth',
            locale: 'fr',
            events: <?= json_encode($events) ?>,
            eventClick: function(info){
                document.getElementById('titreSeance').innerText = info.event.title;
                document.getElementById('coach').innerText = info.event.extendedProps.coach ?? '—';
                document.getElementById('duree').innerText = info.event.extendedProps.duree;
                document.getElementById('capacite').innerText = info.event.extendedProps.capacite;

                new bootstrap.Modal(document.getElementById('modalSeance')).show();
            }
        }
    );

    calendar.render();
});
</script>

</body>
</html>
