<?php
define('SHARED_PATH', dirname(__DIR__) . '/shared');
require_once SHARED_PATH . '/includes/site-config.php';
init_site('cursus');
require_once SHARED_PATH . '/includes/config.php';
require_once SHARED_PATH . '/includes/auth.php';
require_once SHARED_PATH . '/includes/db.php';
require_once SHARED_PATH . '/includes/layout.php';

$cursusUser = Auth::isLoggedIn() ? Auth::user() : null;
$cursusRol  = Auth::getModuleRol('cursus');

// Beschikbare organisaties
$beschikbareOrgs = [];
try { $beschikbareOrgs = getDb(DB_CURSUS)->query("SELECT id, naam FROM cursus_organisaties WHERE status = 'actief' ORDER BY naam")->fetchAll(); } catch (Exception $e) {}

render_head([
    'title'       => 'Voor docenten — Cursus | Reanimatie.nl',
    'description' => 'Word docent bij een gecertificeerde cursusorganisatie. Geef reanimatiecursussen, beoordeel deelnemers en reik certificaten uit.',
    'canonical'   => SITE_CURSUS . '/voor-docenten',
    'css'         => ['/css/cursus.css'],
]);
render_topbar([
    ['href' => '/', 'label' => 'Cursussen', 'icon' => 'fa-solid fa-graduation-cap'],
    ['href' => '/voor-organisaties', 'label' => 'Voor organisaties'],
    ['href' => '/voor-docenten', 'label' => 'Voor docenten', 'active' => true],
    ['href' => '/faq', 'label' => 'FAQ'],
]);
?>

<main class="page-content" role="main">

<!-- HERO -->
<section class="module-hero" style="background:linear-gradient(135deg,#0d2137 0%,#1a365d 60%,#2a5298 100%);">
    <div class="container module-hero__content">
        <div class="module-hero__badge"><i class="fa-solid fa-chalkboard-user"></i> Voor docenten</div>
        <h1>Geef cursussen bij een <span class="module-hero__accent">gecertificeerde organisatie</span></h1>
        <p>Sluit u aan als docent, word gekoppeld aan een organisatie, en geef reanimatiecursussen in heel Nederland.</p>
        <a href="#registreren" class="btn btn-primary" style="padding:12px 28px;font-size:1rem;">
            <i class="fa-solid fa-user-plus"></i> Aanmelden als docent
        </a>
    </div>
</section>

<!-- HOE WERKT HET -->
<section class="section">
    <div class="container">
        <div class="section__header">
            <h2>Hoe werkt het?</h2>
            <p>In 3 stappen aan de slag als docent.</p>
        </div>
        <div class="grid-3" data-animate>
            <div class="card" style="text-align:center;">
                <div style="width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;margin:0 auto 16px;">1</div>
                <h4 style="font-weight:600;margin-bottom:6px;">Registreren</h4>
                <p style="font-size:0.85rem;color:var(--text-secondary);">Meld u aan als docent en kies bij welke organisatie u zich wilt aansluiten.</p>
            </div>
            <div class="card" style="text-align:center;">
                <div style="width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;margin:0 auto 16px;">2</div>
                <h4 style="font-weight:600;margin-bottom:6px;">Goedkeuring</h4>
                <p style="font-size:0.85rem;color:var(--text-secondary);">De organisatie keurt uw koppelingsverzoek goed. U ontvangt een bevestiging per e-mail.</p>
            </div>
            <div class="card" style="text-align:center;">
                <div style="width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;margin:0 auto 16px;">3</div>
                <h4 style="font-weight:600;margin-bottom:6px;">Cursussen geven</h4>
                <p style="font-size:0.85rem;color:var(--text-secondary);">U wordt toegewezen aan cursussen. Beoordeel deelnemers en reik certificaten uit.</p>
            </div>
        </div>
    </div>
</section>

<!-- WAT KUNT U DOEN -->
<section class="section section-bg">
    <div class="container" style="max-width:800px;">
        <div class="section__header">
            <h2>Wat kunt u als docent?</h2>
        </div>
        <div style="display:flex;flex-direction:column;gap:16px;">
            <?php
            $features = [
                ['icon' => 'fa-calendar-check', 'title' => 'Toegewezen cursussen', 'desc' => 'Bekijk de cursussen waaraan u bent toegewezen. Zie datum, locatie, aantal inschrijvingen en cursusdetails.'],
                ['icon' => 'fa-users',          'title' => 'Deelnemerslijst',      'desc' => 'Bekijk alle ingeschreven deelnemers per cursus met contactgegevens en betaalstatus.'],
                ['icon' => 'fa-star',           'title' => 'Beoordelen',           'desc' => 'Beoordeel deelnemers na afloop van de cursus. Goedkeuring resulteert automatisch in een certificaat.'],
                ['icon' => 'fa-certificate',    'title' => 'Certificaten',         'desc' => 'Certificaten worden automatisch uitgereikt per e-mail. Geldig voor 1 jaar met automatische herinneringen.'],
                ['icon' => 'fa-building',       'title' => 'Meerdere organisaties','desc' => 'U kunt gekoppeld worden aan meerdere organisaties en zo een breed cursusaanbod geven.'],
            ];
            foreach ($features as $f): ?>
            <div class="card" style="display:flex;align-items:flex-start;gap:16px;padding:20px 24px;">
                <div class="card-icon card-icon-blue" style="flex-shrink:0;"><i class="fa-solid <?= $f['icon'] ?>"></i></div>
                <div>
                    <h4 style="font-weight:600;margin-bottom:4px;"><?= $f['title'] ?></h4>
                    <p style="font-size:0.9rem;color:var(--text-secondary);line-height:1.6;"><?= $f['desc'] ?></p>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- REGISTRATIE -->
<section class="section" id="registreren">
    <div class="container" style="max-width:640px;">
        <div class="section__header">
            <h2>Aanmelden als docent</h2>
            <p>Vul het formulier in om u aan te sluiten bij een cursusorganisatie.</p>
        </div>

        <?php if ($cursusUser && $cursusRol && $cursusRol['status'] === 'pending' && $cursusRol['rol'] === 'docent'): ?>
        <div class="card" style="padding:40px;text-align:center;">
            <div class="card-icon card-icon-blue" style="margin:0 auto 20px;width:72px;height:72px;font-size:2rem;"><i class="fa-solid fa-clock"></i></div>
            <h3 style="font-weight:800;margin-bottom:12px;">Koppelingsverzoek in behandeling</h3>
            <p style="color:var(--text-secondary);">Uw aanvraag als docent wordt beoordeeld door de organisatie. U ontvangt een e-mail zodra uw koppeling goedgekeurd is.</p>
        </div>

        <?php elseif ($cursusUser && $cursusRol && $cursusRol['status'] === 'actief' && $cursusRol['rol'] === 'docent'): ?>
        <div class="card" style="padding:40px;text-align:center;">
            <div class="card-icon card-icon-green" style="margin:0 auto 20px;width:72px;height:72px;font-size:2rem;"><i class="fa-solid fa-check"></i></div>
            <h3 style="font-weight:800;margin-bottom:12px;">U bent geregistreerd als docent!</h3>
            <p style="color:var(--text-secondary);margin-bottom:20px;">Ga naar uw portaal om uw cursussen en deelnemers te bekijken.</p>
            <a href="/portaal/" class="btn btn-primary"><i class="fa-solid fa-gauge"></i> Naar portaal</a>
        </div>

        <?php else: ?>
        <div class="card" style="padding:32px;">
            <div id="docentRegAlert" class="alert" style="display:none;"></div>
            <form id="docentRegForm">
                <input type="hidden" name="rol" value="docent">
                <div class="form-group">
                    <label class="form-label">E-mailadres <span style="color:var(--accent)">*</span></label>
                    <input type="email" name="email" class="form-control" placeholder="uw@email.nl" required
                           <?= $cursusUser ? 'value="' . htmlspecialchars($cursusUser['email']) . '"' : '' ?>>
                </div>
                <div class="form-group">
                    <label class="form-label">Volledige naam <span style="color:var(--accent)">*</span></label>
                    <input type="text" name="naam" class="form-control" placeholder="Jan Jansen" required
                           <?= $cursusUser ? 'value="' . htmlspecialchars($cursusUser['naam']) . '"' : '' ?>>
                </div>
                <div class="form-group">
                    <label class="form-label">Certificeringsnummer <span style="color:var(--accent)">*</span></label>
                    <input type="text" name="certificeringsnummer" class="form-control" placeholder="Uw certificeringsnummer" required>
                </div>
                <?php if (!empty($beschikbareOrgs)): ?>
                <div class="form-group">
                    <label class="form-label">Bij welke organisatie wilt u zich aansluiten? <span style="color:var(--accent)">*</span></label>
                    <select name="organisatie_id" class="form-control" required>
                        <option value="">— Selecteer organisatie —</option>
                        <?php foreach ($beschikbareOrgs as $org): ?>
                        <option value="<?= $org['id'] ?>"><?= htmlspecialchars($org['naam']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <?php else: ?>
                <div class="alert alert-info"><i class="fa-solid fa-info-circle"></i> Er zijn momenteel geen actieve organisaties. Neem contact op via info@reanimatie.nl.</div>
                <?php endif; ?>
                <p style="font-size:0.8rem;color:var(--text-muted);margin-bottom:16px;">
                    <i class="fa-solid fa-info-circle"></i> U moet eerst inloggen met uw e-mailadres. Daarna wordt uw koppelingsverzoek ingediend bij de organisatie.
                </p>
                <button type="submit" class="btn btn-primary w-full" style="padding:13px;">
                    <i class="fa-solid fa-paper-plane"></i> Registratie indienen
                </button>
            </form>
        </div>
        <?php endif; ?>
    </div>
</section>

</main>

<?php render_footer(); ?>
<script src="/js/cursus.js?v=<?= filemtime(__DIR__ . '/js/cursus.js') ?>"></script>
