<?php
/**
 * De Fitclub — Gratis proefles inplannen
 */
define('DB_ACCESS', true);
require_once __DIR__ . '/db.php';

session_start();

// ── CSRF token ────────────────────────────────────────────────────────────────
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$csrfToken = $_SESSION['csrf_token'];

// ── POST handler ──────────────────────────────────────────────────────────────
$formStatus  = null; // 'success' | 'error'
$formMessage = '';
$formData    = [];   // repopulate on error

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    // CSRF check
    if (!hash_equals($csrfToken, $_POST['csrf_token'] ?? '')) {
        $formStatus  = 'error';
        $formMessage = 'Beveiligingsfout. Vernieuw de pagina en probeer het opnieuw.';
    } else {
        // Collect & sanitise
        $club        = trim($_POST['club']         ?? '');
        $bookingType = trim($_POST['booking_type'] ?? 'met_trainer');
        $date        = trim($_POST['date']         ?? '');
        $timeSlot    = trim($_POST['time_slot']    ?? '');
        $naam        = trim($_POST['naam']         ?? '');
        $email       = trim($_POST['email']        ?? '');
        $telefoon    = trim($_POST['telefoon']     ?? '');

        // Normalise booking_type
        if (!in_array($bookingType, ['kickstart', 'zonder_trainer'], true)) {
            $bookingType = 'kickstart';
        }

        $formData = compact('club', 'bookingType', 'date', 'timeSlot', 'naam', 'email', 'telefoon');

        $errors = [];

        // Validate club
        if (!array_key_exists($club, CLUBS)) {
            $errors[] = 'Selecteer een geldige vestiging.';
        }

        // Validate date
        if (!preg_match('/^\d{4}-\d{2}-\d{2}$/', $date)) {
            $errors[] = 'Selecteer een geldige datum.';
        } else {
            $ts = strtotime($date);
            if ($ts === false || date('Y-m-d', $ts) !== $date) {
                $errors[] = 'Ongeldige datum.';
            } elseif ($date < date('Y-m-d')) {
                $errors[] = 'De datum mag niet in het verleden liggen.';
            } elseif (strtotime($date . ' ' . $timeSlot . ':00') <= time()) {
                $errors[] = 'Dit tijdvak is al begonnen. Kies een later tijdvak.';
            } elseif ($bookingType === 'kickstart' && strtotime($date . ' ' . $timeSlot . ':00') <= strtotime('+12 hours')) {
                $errors[] = 'Een Kickstart sessie moet minimaal 12 uur van tevoren worden ingepland.';
            } elseif ($date > date('Y-m-d', strtotime('+30 days'))) {
                $errors[] = 'De datum mag maximaal 30 dagen vooruit zijn.';
            }
        }

        // Validate time slot
        if (!in_array($timeSlot, TIME_SLOTS, true)) {
            $errors[] = 'Selecteer een geldig tijdvak.';
        }

        // Validate personal details
        if (mb_strlen($naam) < 2 || mb_strlen($naam) > 120) {
            $errors[] = 'Vul je volledige naam in (minimaal 2 tekens).';
        }
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $errors[] = 'Vul een geldig e-mailadres in.';
        }
        $phoneCleaned = preg_replace('/[\s\-\(\)\.]+/', '', $telefoon);
        if (!preg_match('/^(\+31|0031|0)[0-9]{9}$/', $phoneCleaned)) {
            $errors[] = 'Vul een geldig telefoonnummer in (bijv. 06-12345678).';
        }

        if (!empty($errors)) {
            $formStatus  = 'error';
            $formMessage = implode(' ', $errors);
        } else {
            // Double-check slot availability in DB
            try {
                $pdo = getDb();

                // Ensure booking_type column exists (graceful migration)
                try {
                    $pdo->exec("ALTER TABLE bookings ADD COLUMN IF NOT EXISTS booking_type VARCHAR(20) NOT NULL DEFAULT 'met_trainer'");
                } catch (PDOException $alterEx) {
                    // Column may already exist or DB doesn't support IF NOT EXISTS — ignore
                }

                $dayOfWeek = (int)date('N', strtotime($date)) - 1;
                $dowOffset = $dayOfWeek;
                $weekStart = date('Y-m-d', strtotime('-' . $dowOffset . ' days', strtotime($date)));

                if ($bookingType === 'kickstart') {
                    // Voor kickstart: trainer moet beschikbaar zijn in week_availability voor deze week
                    $stmtAvail = $pdo->prepare("
                        SELECT 1 FROM week_availability
                        WHERE club = :club AND week_start = :week AND day_of_week = :dow AND time_slot = :ts AND is_available = 1
                        LIMIT 1
                    ");
                    $stmtAvail->execute([':club' => $club, ':week' => $weekStart, ':dow' => $dayOfWeek, ':ts' => $timeSlot]);
                    $slotOpen = $stmtAvail->fetchColumn();

                    if (!$slotOpen) {
                        $formStatus  = 'error';
                        $formMessage = 'Dit tijdvak is helaas niet meer beschikbaar. Kies een ander tijdvak.';
                    }
                } else {
                    // zonder_trainer: any TIME_SLOTS slot is valid — already validated above
                    $slotOpen = true;
                }

                if ($slotOpen !== false && $formStatus !== 'error') {
                    // Check: zelfde email of telefoon al geboekt in afgelopen 3 maanden?
                    $phoneCleaned2 = preg_replace('/[\s\-\(\)\.]+/', '', $telefoon);
                    $stmtRecent = $pdo->prepare("
                        SELECT 1 FROM bookings
                        WHERE (email = :email OR REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(telefoon,' ',''),'-',''),'(',''),')',''),'.','') = :tel)
                          AND created_at >= DATE_SUB(NOW(), INTERVAL 3 MONTH)
                        LIMIT 1
                    ");
                    $stmtRecent->execute([':email' => $email, ':tel' => $phoneCleaned2]);
                    if ($stmtRecent->fetchColumn()) {
                        $formStatus  = 'recent';
                        $formMessage = htmlspecialchars($naam);
                    }

                    if ($formStatus !== 'recent') {
                    // Check not already booked
                    $stmtBooked = $pdo->prepare("
                        SELECT 1 FROM bookings
                        WHERE club = :club AND booking_date = :date AND time_slot = :ts
                        LIMIT 1
                    ");
                    $stmtBooked->execute([':club' => $club, ':date' => $date, ':ts' => $timeSlot]);
                    $alreadyBooked = $stmtBooked->fetchColumn();

                    if ($alreadyBooked) {
                        $formStatus  = 'error';
                        $formMessage = 'Dit tijdvak is zojuist geboekt door iemand anders. Kies een ander tijdvak.';
                    } elseif ($bookingType === 'kickstart') {
                        // Kickstart is betaald → sla op in sessie en ga naar betaling
                        $_SESSION['kickstart_pending'] = [
                            'club'      => $club,
                            'date'      => $date,
                            'time_slot' => $timeSlot,
                            'naam'      => $naam,
                            'email'     => $email,
                            'telefoon'  => $telefoon,
                        ];
                        header('Location: kickstart-betaling.php');
                        exit;
                    } else {
                        // Insert booking
                        try {
                            $stmtInsert = $pdo->prepare("
                                INSERT INTO bookings (club, booking_date, time_slot, naam, email, telefoon, booking_type)
                                VALUES (:club, :date, :ts, :naam, :email, :telefoon, :booking_type)
                            ");
                            $stmtInsert->execute([
                                ':club'         => $club,
                                ':date'         => $date,
                                ':ts'           => $timeSlot,
                                ':naam'         => $naam,
                                ':email'        => $email,
                                ':telefoon'     => $telefoon,
                                ':booking_type' => $bookingType,
                            ]);
                        } catch (PDOException $insertEx) {
                            // Fallback: zonder nieuwe kolommen
                            $stmtInsert = $pdo->prepare("
                                INSERT INTO bookings (club, booking_date, time_slot, naam, email, telefoon)
                                VALUES (:club, :date, :ts, :naam, :email, :telefoon)
                            ");
                            $stmtInsert->execute([
                                ':club'     => $club,
                                ':date'     => $date,
                                ':ts'       => $timeSlot,
                                ':naam'     => $naam,
                                ':email'    => $email,
                                ':telefoon' => $telefoon,
                            ]);
                        }

                        $bookingId  = $pdo->lastInsertId();
                        $clubName   = CLUBS[$club];
                        // Dutch date string
                        $dayNl   = ['Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag','Zondag'];
                        $monthNl = ['','januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december'];
                        $dateNl  = $dayNl[(int)date('N', strtotime($date))-1]
                                 . ' ' . date('j', strtotime($date))
                                 . ' ' . $monthNl[(int)date('n', strtotime($date))]
                                 . ' ' . date('Y', strtotime($date));

                        $bookingTypeLabel = $bookingType === 'zonder_trainer' ? 'Zonder trainer (zelfstandig)' : 'Met trainer (begeleid)';

                        // ── Confirmation e-mail to visitor ────────────────
                        $confirmHtml = '
<!DOCTYPE html>
<html lang="nl">
<head><meta charset="UTF-8"><style>
  body{font-family:Arial,sans-serif;background:#0d0d0d;color:#f0ebe3;margin:0;padding:0;}
  .wrap{max-width:600px;margin:0 auto;padding:40px 20px;}
  .logo{font-size:1.3rem;font-weight:700;letter-spacing:0.15em;color:#f0ebe3;margin-bottom:4px;}
  .logo-sub{font-size:0.72rem;color:#c9a84c;letter-spacing:0.28em;margin-bottom:36px;display:block;}
  h1{font-size:1.5rem;font-weight:700;margin-bottom:8px;color:#f0ebe3;}
  p{font-size:0.9rem;color:#9a9080;line-height:1.75;margin:0 0 16px;}
  .detail-box{background:#1e1a16;border:1px solid rgba(201,168,76,0.18);border-radius:4px;padding:24px 28px;margin:28px 0;}
  .detail-row{display:flex;gap:12px;margin-bottom:12px;font-size:0.88rem;}
  .detail-label{min-width:110px;color:#5a5248;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;flex-shrink:0;}
  .detail-val{color:#f0ebe3;}
  .gold{color:#c9a84c;}
  .divider{height:1px;background:rgba(201,168,76,0.1);margin:24px 0;}
  .bring-list{list-style:none;padding:0;margin:0;}
  .bring-list li{padding:6px 0;font-size:0.87rem;color:#9a9080;line-height:1.6;}
  .bring-list li::before{content:"— ";color:#c9a84c;}
  .footer-note{font-size:0.78rem;color:#5a5248;margin-top:36px;padding-top:20px;border-top:1px solid rgba(201,168,76,0.07);}
  .footer-note a{color:#c9a84c;text-decoration:none;}
</style>
</head>
<body><div class="wrap">
  <div class="logo">DE FITCLUB</div>
  <span class="logo-sub">— Sterk in 30 Minuten —</span>

  <h1>Jouw proefles is bevestigd!</h1>
  <p>Hoi ' . htmlspecialchars($naam) . ',<br>
  Geweldig dat je een gratis proefles hebt ingepland bij <strong class="gold">' . htmlspecialchars($clubName) . '</strong>. We kijken ernaar uit om je te ontmoeten!</p>

  <div class="detail-box">
    <div class="detail-row"><span class="detail-label">Vestiging</span><span class="detail-val gold">' . htmlspecialchars($clubName) . '</span></div>
    <div class="detail-row"><span class="detail-label">Datum</span><span class="detail-val">' . htmlspecialchars($dateNl) . '</span></div>
    <div class="detail-row"><span class="detail-label">Tijd</span><span class="detail-val">' . htmlspecialchars($timeSlot) . ' uur</span></div>
    <div class="detail-row"><span class="detail-label">Type</span><span class="detail-val">' . htmlspecialchars($bookingTypeLabel) . '</span></div>
    <div class="detail-row"><span class="detail-label">Naam</span><span class="detail-val">' . htmlspecialchars($naam) . '</span></div>
    <div class="detail-row"><span class="detail-label">Boeking #</span><span class="detail-val">' . (int)$bookingId . '</span></div>
  </div>

  <p><strong>Wat kun je verwachten?</strong><br>
  Jouw proefles duurt circa 30 minuten. ' . ($bookingType === 'met_trainer' ? 'Een trainer begeleidt je stap voor stap door het circuit — geen ervaring nodig.' : 'Je traint zelfstandig door het circuit, begeleid door jouw Virtual Coach.') . '</p>

  <div class="divider"></div>

  <p><strong>Wat neem je mee?</strong></p>
  <ul class="bring-list">
    <li>Sportkleding die je vrij laat bewegen</li>
    <li>Sportschoenen (geen hoge hakken of slippers)</li>
    <li>Een handdoekje</li>
    <li>Een drinkfles met water</li>
    <li>Jouw telefoon (voor de app-intake)</li>
  </ul>

  <div class="divider"></div>

  <p>Heb je vragen of wil je jouw afspraak verzetten? Neem contact met ons op via <a href="mailto:info@defitclub.nl" style="color:#c9a84c;">info@defitclub.nl</a>.</p>

  <div class="footer-note">
    © ' . date('Y') . ' De Fitclub · <a href="https://www.defitclub.nl">www.defitclub.nl</a><br>
    Dit is een automatisch verzonden bevestiging. Bewaar deze e-mail als referentie.
  </div>
</div></body></html>';

                        sendMail($email, 'Bevestiging proefles — ' . $clubName, $confirmHtml);

                        // ── Notification e-mail to Stephan ────────────────
                        $notifyHtml = '
<!DOCTYPE html>
<html lang="nl">
<head><meta charset="UTF-8"><style>
  body{font-family:Arial,sans-serif;background:#0d0d0d;color:#f0ebe3;margin:0;padding:0;}
  .wrap{max-width:580px;margin:0 auto;padding:36px 20px;}
  .logo{font-size:1.1rem;font-weight:700;letter-spacing:0.14em;color:#f0ebe3;margin-bottom:32px;}
  h1{font-size:1.3rem;font-weight:700;margin-bottom:20px;color:#c9a84c;}
  .detail-box{background:#1e1a16;border:1px solid rgba(201,168,76,0.18);border-radius:4px;padding:22px 26px;}
  .detail-row{display:flex;gap:10px;margin-bottom:10px;font-size:0.87rem;}
  .detail-label{min-width:110px;color:#5a5248;font-size:0.76rem;letter-spacing:0.12em;text-transform:uppercase;flex-shrink:0;}
  .detail-val{color:#f0ebe3;}
</style>
</head>
<body><div class="wrap">
  <div class="logo">DE FITCLUB — Backoffice Notificatie</div>
  <h1>Nieuwe proefles-boeking</h1>
  <div class="detail-box">
    <div class="detail-row"><span class="detail-label">Boeking #</span><span class="detail-val">' . (int)$bookingId . '</span></div>
    <div class="detail-row"><span class="detail-label">Naam</span><span class="detail-val">' . htmlspecialchars($naam) . '</span></div>
    <div class="detail-row"><span class="detail-label">E-mail</span><span class="detail-val">' . htmlspecialchars($email) . '</span></div>
    <div class="detail-row"><span class="detail-label">Telefoon</span><span class="detail-val">' . htmlspecialchars($telefoon) . '</span></div>
    <div class="detail-row"><span class="detail-label">Vestiging</span><span class="detail-val">' . htmlspecialchars($clubName) . '</span></div>
    <div class="detail-row"><span class="detail-label">Datum</span><span class="detail-val">' . htmlspecialchars($dateNl) . '</span></div>
    <div class="detail-row"><span class="detail-label">Tijd</span><span class="detail-val">' . htmlspecialchars($timeSlot) . ' uur</span></div>
    <div class="detail-row"><span class="detail-label">Type</span><span class="detail-val">' . htmlspecialchars($bookingTypeLabel) . '</span></div>
    <div class="detail-row"><span class="detail-label">Aangemeld op</span><span class="detail-val">' . date('d-m-Y H:i') . '</span></div>
  </div>
</div></body></html>';

                        // ── Notificatiemails (nooit fataal voor de pagina) ─
                        try {
                            $dtStart = date('Ymd', strtotime($date)) . 'T' . str_replace(':', '', $timeSlot) . '00';
                            $dtEnd   = date('Ymd', strtotime($date)) . 'T' . date('Hi', strtotime($timeSlot) + 1800) . '00';
                            $dtStamp = gmdate('Ymd\THis\Z');
                            $uid     = 'proefles-' . $bookingId . '@defitclub.nl';
                            $icsBody = "BEGIN:VCALENDAR\r\nVERSION:2.0\r\nPRODID:-//De Fitclub//Proefles//NL\r\nCALSCALE:GREGORIAN\r\nMETHOD:REQUEST\r\n"
                                     . "BEGIN:VEVENT\r\n"
                                     . "UID:{$uid}\r\n"
                                     . "DTSTAMP:{$dtStamp}\r\n"
                                     . "DTSTART:{$dtStart}\r\n"
                                     . "DTEND:{$dtEnd}\r\n"
                                     . "SUMMARY:Proefles - " . addcslashes($naam, "\\,;") . "\r\n"
                                     . "DESCRIPTION:Naam: " . addcslashes($naam, "\\,;") . "\\nEmail: " . addcslashes($email, "\\,;") . "\\nTel: " . addcslashes($telefoon, "\\,;") . "\\nType: " . addcslashes($bookingTypeLabel, "\\,;") . "\r\n"
                                     . "LOCATION:" . addcslashes($clubName, "\\,;") . "\r\n"
                                     . "END:VEVENT\r\nEND:VCALENDAR";

                            $icsSubject  = 'Nieuwe proefles: ' . $naam . ' - ' . $clubName;
                            $icsFilename = 'proefles-' . $bookingId . '.ics';

                            // Selecteer beste trainer na de insert
                            $dayOfWeekForTrainer = (int)date('N', strtotime($date)) - 1;
                            $selectedTrainer = selectTrainer($pdo, $club, $dayOfWeekForTrainer, $timeSlot);
                            $trEmail = $selectedTrainer['email'] ?? null;

                            // Stuur notificatie via bewezen sendMail(), .ics als aparte poging
                            foreach (array_unique(array_filter([NOTIFY_EMAIL, $trEmail])) as $ontvanger) {
                                $verzonden = sendMailWithIcs($ontvanger, $icsSubject, $notifyHtml, $icsBody, $icsFilename);
                                if (!$verzonden) {
                                    // Fallback: zonder .ics bijlage
                                    sendMail($ontvanger, $icsSubject, $notifyHtml);
                                }
                            }
                        } catch (\Throwable $e) { /* mailfout mag nooit de pagina breken */ }

                        // Regenerate CSRF token after successful booking
                        $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
                        $csrfToken = $_SESSION['csrf_token'];

                        $formStatus  = 'success';
                        $formMessage = htmlspecialchars($naam);
                        $formData    = [
                            'club'             => $club,
                            'clubName'         => $clubName,
                            'date'             => $dateNl,
                            'timeSlot'         => $timeSlot,
                            'bookingType'      => $bookingType,
                            'bookingTypeLabel' => $bookingTypeLabel,
                        ];
                    }
                    } // einde if ($formStatus !== 'recent')
                }
            } catch (PDOException $e) {
                $formStatus  = 'error';
                $formMessage = 'Er is een technisch probleem opgetreden. Probeer het opnieuw of neem contact met ons op.';
            }
        }
    }
}

$today30 = date('Y-m-d', strtotime('+30 days'));
?>
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gratis Proefles Inplannen — De Fitclub</title>
<meta name="description" content="Plan gratis een proefles in bij De Fitclub in Leiden, Zoeterwoude of Oegstgeest. Ervaar 30 minuten circuittraining met jouw eigen Virtual Coach.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://www.defitclub.nl/proefles">

<meta property="og:type"        content="website">
<meta property="og:url"         content="https://www.defitclub.nl/proefles">
<meta property="og:title"       content="Gratis Proefles Inplannen — De Fitclub">
<meta property="og:description" content="Plan gratis een proefles in. 30 minuten circuittraining met jouw eigen Virtual Coach.">
<meta property="og:locale"      content="nl_NL">
<meta property="og:site_name"   content="De Fitclub">

<link rel="stylesheet" href="style.css?v=4">
<style>
/* ── Booking page specific ──────────────────────────────────────────────── */
.proefles-hero {
  padding: 160px 60px 80px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.08) 0%, transparent 55%),
    var(--black);
  position: relative;
  overflow: hidden;
}
.proefles-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 3px 22px at 20% 30%, rgba(61,90,62,0.35) 0%, transparent 100%),
    radial-gradient(ellipse 4px 28px at 60% 15%, rgba(61,90,62,0.28) 0%, transparent 100%),
    radial-gradient(ellipse 3px 18px at 80% 25%, rgba(61,90,62,0.3) 0%, transparent 100%);
  animation: sway 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.proefles-hero .sec-label  { margin-bottom: 16px; }
.proefles-hero .page-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(2.2rem,5vw,3.5rem);
  letter-spacing: 0.05em;
  line-height: 1.12;
  margin-bottom: 18px;
}
.proefles-hero .page-sub {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 520px;
  margin: 0 auto;
}

/* ── Booking form area ──────────────────────────────────────────────────── */
.booking-section {
  padding: 0 60px 100px;
  max-width: 900px;
  margin: 0 auto;
}

/* Steps indicator */
.steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 50px 0 52px;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 1;
  max-width: 140px;
}
.step-item::after {
  content: '';
  position: absolute;
  top: 15px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 1px;
  background: rgba(201,168,76,0.15);
}
.step-item:last-child::after { display: none; }
.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.2);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}
.step-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.3s;
}
.step-item.active .step-num {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  font-weight: 600;
}
.step-item.active .step-label { color: var(--gold); }
.step-item.done .step-num {
  background: rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.4);
  color: var(--gold);
}
.step-item.done .step-label { color: var(--text-muted); }

/* Form card / step container */
.form-step {
  display: none;
}
.form-step.active { display: block; }

.step-card {
  background: var(--surface);
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: 6px;
  padding: 44px 44px;
  position: relative;
  overflow: hidden;
}
.step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.step-card h2 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.step-card .step-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 32px;
}

/* Club cards (step 1) */
.club-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.club-select-card {
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: 4px;
  padding: 28px 20px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--card);
}
.club-select-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.club-select-card:hover { border-color: rgba(201,168,76,0.3); background: var(--surface); }
.club-select-card:hover::before { opacity: 1; }
.club-select-card.selected {
  border-color: var(--gold);
  background: rgba(201,168,76,0.08);
}
.club-select-card.selected::before { opacity: 1; }
.club-select-card h3 {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--text);
}
.club-select-card .club-city-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.club-select-card p {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.club-select-card .check-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px auto 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.club-select-card.selected .check-mark { opacity: 1; }

/* Trainer type cards (step 2) */
.trainer-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.trainer-select-card {
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: 4px;
  padding: 32px 28px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  background: var(--card);
}
.trainer-select-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.trainer-select-card:hover { border-color: rgba(201,168,76,0.3); background: var(--surface); }
.trainer-select-card:hover::before { opacity: 1; }
.trainer-select-card.selected {
  border-color: var(--gold);
  background: rgba(201,168,76,0.08);
}
.trainer-select-card.selected::before { opacity: 1; }
.trainer-select-card .trainer-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  display: block;
}
.trainer-select-card h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: 8px;
}
.trainer-select-card .trainer-type-badge {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.3);
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 14px;
}
.trainer-select-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.trainer-select-card .check-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.trainer-select-card.selected .check-mark { opacity: 1; }
.no-cost-note { font-size:0.75rem; color:#6fcf97; margin-top:10px; margin-bottom:0; letter-spacing:0.03em; }

/* Date & time picker (step 3) */
.date-time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.form-group { margin-bottom: 22px; }
.form-group label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.form-group input[type="date"],
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
  width: 100%;
  background: var(--card);
  border: 1px solid rgba(201,168,76,0.14);
  border-radius: 3px;
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.3s;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.form-group input:focus { border-color: rgba(201,168,76,0.45); }
.form-group input::placeholder { color: var(--text-dim); }
.form-group select {
  width: 100%;
  background: var(--card);
  border: 1px solid rgba(201,168,76,0.14);
  border-radius: 3px;
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.3s;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.form-group select:focus { border-color: rgba(201,168,76,0.45); }
.form-group select option { background: #1e1a16; color: var(--text); }

/* colorscheme for native date input */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) opacity(0.7);
  cursor: pointer;
}

.slots-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: block;
}
.slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.slot-btn-pub {
  padding: 10px 16px;
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 3px;
  background: var(--card);
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 72px;
  text-align: center;
}
.slot-btn-pub:hover { border-color: rgba(201,168,76,0.4); color: var(--text); }
.slot-btn-pub.selected {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  font-weight: 600;
}
.slots-loading {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-style: italic;
  padding: 8px 0;
}
.slots-empty {
  font-size: 0.82rem;
  color: var(--text-dim);
  padding: 8px 0;
  line-height: 1.6;
}
.selected-summary {
  display: none;
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 3px;
  padding: 14px 18px;
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.selected-summary.visible { display: block; }
.selected-summary strong { color: var(--gold); }

/* Personal details (step 4) */
.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.details-grid .full-width { grid-column: 1 / -1; }

/* Navigation buttons */
.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  gap: 12px;
}
.btn-prev {
  background: transparent;
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--text-muted);
  padding: 12px 26px;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
}
.btn-prev:hover { border-color: rgba(201,168,76,0.4); color: var(--text); }
.btn-next {
  background: var(--gold);
  color: var(--black);
  border: none;
  padding: 13px 32px;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
}
.btn-next:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-next:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* Error / success messages */
.form-error {
  background: rgba(200,60,60,0.1);
  border: 1px solid rgba(200,60,60,0.22);
  border-radius: 3px;
  padding: 14px 18px;
  font-size: 0.85rem;
  color: #e09090;
  margin-bottom: 24px;
  line-height: 1.55;
}
.form-success {
  background: var(--surface);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 6px;
  padding: 54px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.form-success::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.35);
  background: rgba(201,168,76,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 1.6rem;
}
.form-success h2 {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.form-success p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 440px;
  margin: 0 auto 10px;
}
.success-details {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.16);
  border-radius: 4px;
  padding: 20px 28px;
  display: inline-block;
  margin: 22px 0 28px;
  text-align: left;
}
.success-details .s-row {
  display: flex;
  gap: 12px;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.success-details .s-row:last-child { margin-bottom: 0; }
.success-details .s-label { min-width: 80px; color: var(--text-dim); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.success-details .s-val   { color: var(--text); }

/* Responsive */
@media (max-width: 768px) {
  .proefles-hero { padding: 140px 24px 60px; }
  .booking-section { padding: 0 24px 70px; }
  .step-card { padding: 30px 24px; }
  .club-cards-grid    { grid-template-columns: 1fr; }
  .trainer-cards-grid { grid-template-columns: 1fr; }
  .date-time-grid     { grid-template-columns: 1fr; }
  .details-grid       { grid-template-columns: 1fr; }
  .steps-bar          { gap: 0; }
  .step-label         { display: none; }
}
</style>
<script>
(function(){var t=localStorage.getItem('theme');if(t==='light')document.documentElement.setAttribute('data-theme','light');})();
function toggleTheme(){var h=document.documentElement,isDark=h.getAttribute('data-theme')!=='light';h.setAttribute('data-theme',isDark?'light':'dark');localStorage.setItem('theme',isDark?'light':'dark');_syncBtn();}
function _syncBtn(){var b=document.getElementById('themeBtn');if(!b)return;var d=document.documentElement.getAttribute('data-theme')!=='light';b.textContent=d?'☀':'☾';b.title=d?'Licht thema':'Donker thema';}
document.addEventListener('DOMContentLoaded',_syncBtn);
</script>
</head>
<body>

<!-- NAV -->
<nav id="nav" class="scrolled">
  <a href="index.html" class="nav-logo">
    <div class="nav-logo-main">DE FITCLUB</div>
    <span class="nav-logo-sub">— Sterk in 30 Minuten —</span>
  </a>
  <ul class="nav-links">
    <li><a href="index.html">Home</a></li>
    <li><a href="clubs.html">Onze Clubs</a></li>
    <li><a href="prijzen.html">Prijzen</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="proefles.php" class="active">Proefles</a></li>
    <li><a href="https://leden.defitclub.nl" target="_blank" class="nav-cta">Word Lid</a></li>
  </ul>
  <div class="nav-hamburger" onclick="openMenu()">
    <span></span><span></span><span></span>
  </div>
</nav>

<!-- MOBILE MENU -->
<div class="mobile-menu" id="mobileMenu">
  <button class="mobile-close" onclick="closeMenu()">✕</button>
  <a href="index.html" onclick="closeMenu()">Home</a>
  <a href="clubs.html" onclick="closeMenu()">Onze Clubs</a>
  <a href="prijzen.html" onclick="closeMenu()">Prijzen</a>
  <a href="contact.html" onclick="closeMenu()">Contact</a>
  <a href="proefles.php" class="active" onclick="closeMenu()">Proefles</a>
  <a href="https://leden.defitclub.nl" target="_blank" class="nav-cta" onclick="closeMenu()">Word Lid</a>
</div>

<!-- PAGE HERO -->
<div class="proefles-hero">
  <p class="sec-label">Gratis &amp; vrijblijvend</p>
  <h1 class="page-title">Plan je proefles</h1>
  <p class="page-sub">Ervaar zelf hoe 30 minuten circuittraining voelt. Kies een vestiging, zelfstandig starten of een Kickstart sessie met coach, een datum en tijdstip — wij zorgen voor de rest.</p>
</div>

<!-- BOOKING FORM -->
<div class="booking-section">

  <?php if ($formStatus === 'recent'): ?>
  <!-- RECENT BOOKING STATE -->
  <div class="form-success">
    <div class="success-icon" style="color:var(--gold)">👋</div>
    <h2>Hé <?= htmlspecialchars($formMessage) ?>, welkom terug!</h2>
    <p>Je hebt recent al een proefles bij ons gedaan — was het bevallen?</p>
    <p style="margin-top:8px;">Word dan lid voor maar <strong style="color:var(--gold)">€1,- per dag</strong> en train wanneer jij wilt.</p>
    <div style="margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
      <a href="leden" class="btn-gold">Word lid — vanaf €1/dag</a>
      <a href="index.html" class="btn-outline">Terug naar home</a>
    </div>
  </div>

  <?php elseif ($formStatus === 'success'): ?>
  <!-- SUCCESS STATE -->
  <div class="form-success">
    <div class="success-icon">✓</div>
    <h2>Je proefles is bevestigd!</h2>
    <p>Hoi <strong><?= htmlspecialchars($formMessage) ?></strong>, bedankt voor je aanmelding. We kijken ernaar uit je te ontmoeten!</p>
    <div class="success-details">
      <div class="s-row"><span class="s-label">Vestiging</span><span class="s-val"><?= htmlspecialchars($formData['clubName']) ?></span></div>
      <div class="s-row"><span class="s-label">Datum</span><span class="s-val"><?= htmlspecialchars($formData['date']) ?></span></div>
      <div class="s-row"><span class="s-label">Tijd</span><span class="s-val"><?= htmlspecialchars($formData['timeSlot']) ?> uur</span></div>
      <div class="s-row"><span class="s-label">Type</span><span class="s-val"><?= htmlspecialchars($formData['bookingTypeLabel']) ?></span></div>
    </div>
    <p>Je ontvangt een bevestiging per e-mail met alle details en wat je mee moet nemen.</p>
    <div style="margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
      <a href="index.html" class="btn-outline">Terug naar home</a>
    </div>
  </div>

  <?php else: ?>
  <!-- MULTI-STEP FORM -->

  <!-- Steps indicator -->
  <div class="steps-bar" id="stepsBar">
    <div class="step-item active" id="stepIndicator1">
      <div class="step-num">1</div>
      <span class="step-label">Vestiging</span>
    </div>
    <div class="step-item" id="stepIndicator2">
      <div class="step-num">2</div>
      <span class="step-label">Type les</span>
    </div>
    <div class="step-item" id="stepIndicator3">
      <div class="step-num">3</div>
      <span class="step-label">Datum &amp; tijd</span>
    </div>
    <div class="step-item" id="stepIndicator4">
      <div class="step-num">4</div>
      <span class="step-label">Gegevens</span>
    </div>
  </div>

  <?php if ($formStatus === 'error'): ?>
    <div class="form-error" id="formError"><?= htmlspecialchars($formMessage) ?></div>
  <?php endif; ?>

  <form method="post" action="proefles.php" id="bookingForm" novalidate>
    <input type="hidden" name="csrf_token"    value="<?= htmlspecialchars($csrfToken) ?>">
    <input type="hidden" name="club"          id="hiddenClub"        value="<?= htmlspecialchars($formData['club']        ?? '') ?>">
    <input type="hidden" name="booking_type"  id="hiddenBookingType" value="<?= htmlspecialchars($formData['bookingType'] ?? '') ?>">
    <input type="hidden" name="date"          id="hiddenDate"        value="<?= htmlspecialchars($formData['date']        ?? '') ?>">
    <input type="hidden" name="time_slot"     id="hiddenTimeSlot"    value="<?= htmlspecialchars($formData['timeSlot']    ?? '') ?>">

    <!-- ── STEP 1: Vestiging ────────────────────────────────────────────── -->
    <div class="form-step active" id="step1">
      <div class="step-card">
        <h2>Kies je vestiging</h2>
        <p class="step-desc">Bij welke De Fitclub wil je jouw gratis proefles doen?</p>

        <div class="form-group" style="max-width:400px;margin:28px 0 36px;">
          <label for="clubSelect">Vestiging</label>
          <select id="clubSelect" onchange="selectClubDropdown(this.value)">
            <option value="">— Kies een vestiging —</option>
            <?php $sortedClubs = CLUBS; asort($sortedClubs); foreach ($sortedClubs as $slug => $name): ?>
            <option value="<?= $slug ?>" <?= ($formData['club'] ?? '') === $slug ? 'selected' : '' ?>><?= htmlspecialchars($name) ?></option>
            <?php endforeach; ?>
          </select>
        </div>

        <div class="form-nav">
          <span></span>
          <button type="button" class="btn-next" onclick="goToStep(2)" id="btnStep1Next"
                  <?= empty($formData['club']) ? 'disabled' : '' ?>>
            Volgende stap →
          </button>
        </div>
      </div>
    </div>

    <!-- ── STEP 2: Type les ──────────────────────────────────────────────── -->
    <div class="form-step" id="step2">
      <div class="step-card">
        <h2>Hoe wil je starten?</h2>
        <p class="step-desc">Kies of je zelfstandig wilt starten of met een persoonlijke Kickstart sessie.</p>

        <div class="trainer-cards-grid">
          <?php $preZonder = ($formData['bookingType'] ?? '') === 'zonder_trainer' ? ' selected' : ''; ?>
          <div class="trainer-select-card<?= $preZonder ?>"
               data-type="zonder_trainer"
               onclick="selectBookingType('zonder_trainer', this)">
            <span class="trainer-icon">🏋️</span>
            <h3>Zelfstandig starten</h3>
            <span class="trainer-type-badge">Gratis</span>
            <p>Train op eigen tempo, begeleid door jouw Virtual Coach. Alle tijdvakken tussen 09:00 en 21:00 zijn beschikbaar — kies wanneer het jou uitkomt.</p>
            <p class="no-cost-note">✓ Geen inschrijfkosten</p>
            <div class="check-mark">✓</div>
          </div>

          <?php $preKickstart = ($formData['bookingType'] ?? '') === 'kickstart' ? ' selected' : ''; ?>
          <div class="trainer-select-card<?= $preKickstart ?>"
               data-type="kickstart"
               onclick="selectBookingType('kickstart', this)"
               style="border-color:rgba(201,168,76,0.25);">
            <span class="trainer-icon">⚡</span>
            <h3>Kickstart sessie</h3>
            <span class="trainer-type-badge" style="font-size:0.78rem;padding:4px 14px;">€ 29,99</span>
            <p>Persoonlijke intake + eerste training samen met een coach. Jij weet zeker dat je goed begint en sneller resultaat boekt. Eenmalig — daarna train je zelfstandig.</p>
            <p class="no-cost-note">✓ Geen inschrijfkosten</p>
            <div class="check-mark">✓</div>
          </div>
        </div>

        <div class="form-nav">
          <button type="button" class="btn-prev" onclick="goToStep(1)">← Terug</button>
          <button type="button" class="btn-next" onclick="goToStep(3)" id="btnStep2Next"
                  <?= empty($formData['bookingType']) ? 'disabled' : '' ?>>
            Volgende stap →
          </button>
        </div>
      </div>
    </div>

    <!-- ── STEP 3: Datum & Tijd ─────────────────────────────────────────── -->
    <div class="form-step" id="step3">
      <div class="step-card">
        <h2>Kies datum &amp; tijdstip</h2>
        <p class="step-desc">Selecteer een datum en een beschikbaar tijdvak.</p>

        <div class="date-time-grid">
          <!-- Date picker -->
          <div class="form-group">
            <label for="datePicker">Datum</label>
            <input
              type="date"
              id="datePicker"
              min="<?= date('Y-m-d') ?>"
              max="<?= $today30 ?>"
              value="<?= htmlspecialchars($formData['date'] ?? date('Y-m-d')) ?>"
              onchange="onDateChange(this.value)"
            >
          </div>

          <!-- Time slots -->
          <div>
            <span class="slots-label">Beschikbare tijdvakken</span>
            <div id="slotsContainer">
              <p class="slots-loading">Tijdvakken laden…</p>
            </div>
          </div>
        </div>

        <!-- Selection summary -->
        <div class="selected-summary" id="dtSummary">
          Geselecteerd: <strong id="summaryDate"></strong> om <strong id="summaryTime"></strong>
        </div>

        <div class="form-nav">
          <button type="button" class="btn-prev" onclick="goToStep(2)">← Terug</button>
          <button type="button" class="btn-next" onclick="goToStep(4)" id="btnStep3Next" disabled>
            Volgende stap →
          </button>
        </div>
      </div>
    </div>

    <!-- ── STEP 4: Persoonlijke gegevens ────────────────────────────────── -->
    <div class="form-step" id="step4">
      <div class="step-card">
        <h2>Jouw gegevens</h2>
        <p class="step-desc">Vul je gegevens in zodat we je proefles kunnen bevestigen.</p>

        <div class="selected-summary visible" id="step4Summary">
          <strong id="step4SummaryText"></strong>
        </div>

        <div class="details-grid">
          <div class="form-group full-width">
            <label for="naam">Volledige naam *</label>
            <input
              type="text"
              id="naam"
              name="naam"
              placeholder="Voornaam Achternaam"
              value="<?= htmlspecialchars($formData['naam'] ?? '') ?>"
              maxlength="120"
              required
            >
          </div>
          <div class="form-group">
            <label for="email">E-mailadres *</label>
            <input
              type="email"
              id="email"
              name="email"
              placeholder="naam@voorbeeld.nl"
              value="<?= htmlspecialchars($formData['email'] ?? '') ?>"
              maxlength="180"
              required
            >
          </div>
          <div class="form-group">
            <label for="telefoon">Telefoonnummer *</label>
            <input
              type="tel"
              id="telefoon"
              name="telefoon"
              placeholder="06-12345678"
              value="<?= htmlspecialchars($formData['telefoon'] ?? '') ?>"
              maxlength="30"
              required
            >
          </div>
        </div>

        <p style="font-size:0.76rem;color:var(--text-dim);margin-top:4px;line-height:1.65;">
          Je gegevens worden uitsluitend gebruikt voor de bevestiging van je proefles en worden niet gedeeld met derden.
        </p>

        <div class="form-nav">
          <button type="button" class="btn-prev" onclick="goToStep(3)">← Terug</button>
          <button type="submit" class="btn-next" id="btnSubmit">
            Bevestig je proefles →
          </button>
          <script>
          // Pas submit-knoptekst aan op basis van gekozen type
          document.getElementById('bookingForm').addEventListener('change', function() {}, false);
          function updateSubmitBtn() {
            var btn = document.getElementById('btnSubmit');
            if (!btn) return;
            btn.textContent = (selectedType === 'kickstart')
              ? 'Doorgaan naar betaling (€29,99) →'
              : 'Bevestig je proefles →';
          }
          </script>
        </div>
      </div>
    </div>
  </form>

  <?php endif; ?>
</div>

<div class="gold-rule"></div>

<!-- FOOTER -->
<footer>
  <div class="footer-grid">
    <div class="ft-brand">
      <div class="ft-brand-main">DE FITCLUB</div>
      <span class="ft-brand-sub">— Sterk in 30 Minuten —</span>
      <p>30 minuten circuit, jouw Virtual Coach, altijd open. Binnenkort in Leiden, Zoeterwoude en Oegstgeest.</p>
    </div>
    <div class="ft-col">
      <h5>Navigatie</h5>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="clubs.html">Onze Clubs</a></li>
        <li><a href="prijzen.html">Prijzen</a></li>
        <li><a href="proefles.php">Proefles</a></li>
      </ul>
    </div>
    <div class="ft-col">
      <h5>Contact</h5>
      <ul>
        <li>info@defitclub.nl</li>
        <li>Leidse regio</li>
        <li>Opening mei/juni 2026</li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <p>© <?= date('Y') ?> De Fitclub. Alle rechten voorbehouden.</p>
    <p>Privacy · Algemene voorwaarden · KVK: xxxxxxxx</p>
  </div>
</footer>

<script>
// ── State ─────────────────────────────────────────────────────────────────────
let currentStep      = 1;
let selectedClub     = <?= json_encode($formData['club']        ?? '') ?>;
let selectedType     = <?= json_encode($formData['bookingType'] ?? '') ?>;
let selectedDate     = <?= json_encode($formData['date'] ?? '') ?>;
let selectedTime     = <?= json_encode($formData['timeSlot']    ?? '') ?>;
let slotsRequest     = null;

const clubNames  = <?= json_encode(array_map(fn($v) => $v, CLUBS)) ?>;
const clubCities = <?= json_encode(array_map(fn($n) => str_starts_with($n,'De Fitclub ') ? substr($n,11) : $n, CLUBS)) ?>;
const typeLabels = { kickstart:'Kickstart sessie (€29,99)', zonder_trainer:'Zelfstandig starten (gratis)' };

// ── On page load: restore state if repopulating after error ───────────────────
document.addEventListener('DOMContentLoaded', () => {
  <?php if ($formStatus === 'error' && !empty($formData['club'])): ?>
  // Restore to step 4 after form error
  updateStepIndicators(4);
  showStep(4);
  currentStep = 4;
  updateStep4Summary();
  if (selectedDate && selectedClub && selectedType) {
    loadSlots(selectedClub, selectedDate, selectedType);
  }
  <?php endif; ?>

  // Init date picker restoration
  if (selectedDate) {
    const dp = document.getElementById('datePicker');
    if (dp) dp.value = selectedDate;
    updateDtSummary();
    checkStep3Next();
  }

  // Nav scroll
  window.addEventListener('scroll', () => {
    document.getElementById('nav').classList.toggle('scrolled', window.scrollY > 50);
  });
});

// ── Navigation ────────────────────────────────────────────────────────────────
function goToStep(n) {
  if (n === 2 && !selectedClub) {
    alert('Selecteer eerst een vestiging.');
    return;
  }
  if (n === 3 && !selectedType) {
    alert('Selecteer eerst een trainingstype.');
    return;
  }
  if (n === 4 && (!selectedDate || !selectedTime)) {
    alert('Selecteer eerst een datum en tijdstip.');
    return;
  }

  showStep(n);
  updateStepIndicators(n);
  currentStep = n;

  if (n === 3) {
    const dp = document.getElementById('datePicker');
    if (!selectedDate) {
      const today = new Date().toISOString().split('T')[0];
      selectedDate = today;
      document.getElementById('hiddenDate').value = today;
      if (dp) dp.value = today;
    }
    if (selectedClub && selectedType) {
      loadSlots(selectedClub, selectedDate, selectedType);
    }
  }
  if (n === 4) {
    updateStep4Summary();
  }

  // Scroll to top of form
  document.getElementById('stepsBar')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function showStep(n) {
  document.querySelectorAll('.form-step').forEach((el, i) => {
    el.classList.toggle('active', i + 1 === n);
  });
}

function updateStepIndicators(n) {
  [1, 2, 3, 4].forEach(i => {
    const el = document.getElementById('stepIndicator' + i);
    if (!el) return;
    el.classList.remove('active', 'done');
    if (i === n) el.classList.add('active');
    if (i < n)  el.classList.add('done');
  });
}

// ── Step 1: Club selection ────────────────────────────────────────────────────
function selectClubDropdown(slug) {
  selectedClub = slug;
  document.getElementById('hiddenClub').value = slug;
  document.getElementById('btnStep1Next').disabled = !slug;

  // Reset downstream selections if club changes
  selectedTime = '';
  document.getElementById('hiddenTimeSlot').value = '';
  updateDtSummary();
  checkStep3Next();
}

// ── Step 2: Booking type selection ───────────────────────────────────────────
function selectBookingType(type, card) {
  selectedType = type;
  document.getElementById('hiddenBookingType').value = type;

  document.querySelectorAll('.trainer-select-card').forEach(c => c.classList.remove('selected'));
  card.classList.add('selected');

  document.getElementById('btnStep2Next').disabled = false;
  updateSubmitBtn();

  // Reset time slot if type changes (available slots will differ)
  selectedTime = '';
  document.getElementById('hiddenTimeSlot').value = '';
  updateDtSummary();
  checkStep3Next();
}

// ── Step 3: Date & time ───────────────────────────────────────────────────────
function onDateChange(val) {
  selectedDate = val;
  document.getElementById('hiddenDate').value = val;

  selectedTime = '';
  document.getElementById('hiddenTimeSlot').value = '';
  updateDtSummary();
  checkStep3Next();

  if (val && selectedClub && selectedType) {
    loadSlots(selectedClub, val, selectedType);
  } else {
    document.getElementById('slotsContainer').innerHTML =
      '<p class="slots-loading">Selecteer eerst een datum.</p>';
  }
}

function loadSlots(club, date, type) {
  const container = document.getElementById('slotsContainer');
  container.innerHTML = '<p class="slots-loading">Tijdvakken laden\u2026</p>';

  if (slotsRequest) slotsRequest.abort();
  const ctrl = new AbortController();
  slotsRequest = ctrl;

  const url = 'get-slots.php?club=' + encodeURIComponent(club)
            + '&date=' + encodeURIComponent(date)
            + '&type=' + encodeURIComponent(type || 'met_trainer');

  fetch(url, { signal: ctrl.signal })
  .then(r => r.json())
  .then(slots => {
    slotsRequest = null;
    if (!Array.isArray(slots) || slots.length === 0) {
      container.innerHTML = '<p class="slots-empty">Geen beschikbare tijdvakken voor deze datum.<br>Kies een andere datum of vestiging.</p>';
      selectedTime = '';
      document.getElementById('hiddenTimeSlot').value = '';
      updateDtSummary();
      checkStep3Next();
      return;
    }

    let html = '<div class="slots-grid">';
    slots.forEach(slot => {
      const isSelected = slot === selectedTime ? ' selected' : '';
      html += `<button type="button" class="slot-btn-pub${isSelected}" data-time="${slot}" onclick="selectTime('${slot}', this)">${slot}</button>`;
    });
    html += '</div>';
    container.innerHTML = html;
  })
  .catch(err => {
    if (err.name === 'AbortError') return;
    container.innerHTML = '<p class="slots-empty">Kon tijdvakken niet laden. Probeer het opnieuw.</p>';
  });
}

function selectTime(time, btn) {
  selectedTime = time;
  document.getElementById('hiddenTimeSlot').value = time;

  document.querySelectorAll('.slot-btn-pub').forEach(b => b.classList.remove('selected'));
  btn.classList.add('selected');

  updateDtSummary();
  checkStep3Next();
}

function updateDtSummary() {
  const summary = document.getElementById('dtSummary');
  const sumDate = document.getElementById('summaryDate');
  const sumTime = document.getElementById('summaryTime');

  if (selectedDate && selectedTime) {
    sumDate.textContent = formatDateNl(selectedDate);
    sumTime.textContent = selectedTime + ' uur';
    summary.classList.add('visible');
  } else {
    summary.classList.remove('visible');
  }
}

function checkStep3Next() {
  const btn = document.getElementById('btnStep3Next');
  if (btn) btn.disabled = !(selectedDate && selectedTime);
}

function updateStep4Summary() {
  const el = document.getElementById('step4SummaryText');
  if (!el) return;
  const cName  = clubNames[selectedClub] || selectedClub;
  const tLabel = typeLabels[selectedType] || selectedType;
  el.innerHTML = `${cName} &nbsp;&middot;&nbsp; ${tLabel} &nbsp;&middot;&nbsp; ${formatDateNl(selectedDate)} &nbsp;&middot;&nbsp; ${selectedTime} uur`;
}

// ── Helpers ───────────────────────────────────────────────────────────────────
function formatDateNl(dateStr) {
  if (!dateStr) return '';
  const d      = new Date(dateStr + 'T12:00:00');
  const days   = ['Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag'];
  const months = ['januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december'];
  return days[d.getDay()] + ' ' + d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear();
}

// ── Mobile menu ───────────────────────────────────────────────────────────────
function openMenu()  { document.getElementById('mobileMenu').classList.add('open'); }
function closeMenu() { document.getElementById('mobileMenu').classList.remove('open'); }
</script>
</body>
</html>
