<?php
/**
 * Registration Page — Gmind Institute
 *
 * Registration form with name, email, phone, password,
 * confirm password, CSRF token, and login link.
 *
 * Expected PHP variables:
 *   $csrfToken   — CSRF token string
 *   $errors      — array of validation errors (optional)
 *   $old         — array of old input values (optional)
 */

$errors    = $errors    ?? [];
$old       = $old       ?? [];
$csrfToken = $csrfToken ?? '';
$basePath = defined('BASE_PATH') ? BASE_PATH : '/gmind';
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Gmind Institute — Student Registration">
    <title><?= __('auth.register') ?> — Gmind Institute</title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="<?= $basePath ?>/images/favicon.png">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Poppins:wght@600;700&display=swap" rel="stylesheet">

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="<?= $basePath ?>/css/style.css">
</head>
<body class="auth-body">

    <div class="auth-container">
        <!-- Branding -->
        <div class="auth-brand">
            <a href="<?= $basePath ?>/" aria-label="Gmind Institute — Home">
                <span class="logo-text">GMIND</span>
                <span class="logo-subtext">INSTITUTE</span>
            </a>
        </div>

        <div class="auth-card">
            <h1><?= __('auth.create_account') ?></h1>
            <p class="auth-subtitle"><?= __('auth.register_subtitle') ?></p>

            <?php if (!empty($errors)): ?>
            <div class="alert alert-error" role="alert">
                <?php foreach ($errors as $error): ?>
                <p><?= htmlspecialchars($error, ENT_QUOTES, 'UTF-8') ?></p>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>

            <form method="POST" action="<?= $basePath ?>/register" class="auth-form" novalidate>
                <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken, ENT_QUOTES, 'UTF-8') ?>">

                <div class="form-group">
                    <label for="full_name"><?= __('auth.full_name') ?> <span class="required">*</span></label>
                    <div class="input-icon-wrapper">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                        <input type="text" id="full_name" name="full_name" required placeholder="<?= __('auth.full_name_placeholder') ?>" value="<?= htmlspecialchars($old['full_name'] ?? '', ENT_QUOTES, 'UTF-8') ?>" autocomplete="name">
                    </div>
                </div>

                <div class="form-group">
                    <label for="email"><?= __('auth.email') ?> <span class="required">*</span></label>
                    <div class="input-icon-wrapper">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                        <input type="email" id="email" name="email" required placeholder="<?= __('auth.email_placeholder') ?>" value="<?= htmlspecialchars($old['email'] ?? '', ENT_QUOTES, 'UTF-8') ?>" autocomplete="email">
                    </div>
                </div>

                <div class="form-group">
                    <label for="phone"><?= __('auth.phone') ?> <span class="required">*</span></label>
                    <div class="input-icon-wrapper">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
                        <input type="tel" id="phone" name="phone" required placeholder="<?= __('auth.phone_placeholder') ?>" value="<?= htmlspecialchars($old['phone'] ?? '', ENT_QUOTES, 'UTF-8') ?>" autocomplete="tel">
                    </div>
                </div>

                <div class="form-group">
                    <label for="password"><?= __('auth.password') ?> <span class="required">*</span></label>
                    <div class="input-icon-wrapper">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
                        <input type="password" id="password" name="password" required placeholder="<?= __('auth.password_placeholder') ?>" autocomplete="new-password">
                    </div>
                </div>

                <div class="form-group">
                    <label for="confirm_password"><?= __('auth.confirm_password') ?> <span class="required">*</span></label>
                    <div class="input-icon-wrapper">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
                        <input type="password" id="confirm_password" name="confirm_password" required placeholder="<?= __('auth.confirm_password_placeholder') ?>" autocomplete="new-password">
                    </div>
                </div>

                <button type="submit" class="btn-primary btn-submit"><?= __('auth.register_btn') ?></button>
            </form>

            <div class="auth-links">
                <p><?= __('auth.has_account') ?> <a href="<?= $basePath ?>/login" class="auth-link"><?= __('auth.login') ?></a></p>
            </div>
        </div>

        <div class="auth-back">
            <a href="<?= $basePath ?>/">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
                <?= __('auth.back_to_website') ?>
            </a>
        </div>
    </div>

</body>
</html>
