<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

include "../config/koneksi.php";

$existing = null;

if (isset($_POST['register'])) {
    $username = trim((string) ($_POST['username'] ?? ''));
    $email = trim((string) ($_POST['email'] ?? ''));
    $plainPassword = (string) ($_POST['password'] ?? '');
    $confirmPassword = (string) ($_POST['confirm_password'] ?? '');
    $role = strtolower(trim((string) ($_POST['role'] ?? '')));
    $allowedRoles = ['admin', 'pelaksana', 'teknisi'];

    if ($username === '' || $email === '' || $plainPassword === '' || $confirmPassword === '' || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error = "Username, email, password, dan konfirmasi password wajib diisi dengan format yang benar.";
    } elseif (!in_array($role, $allowedRoles, true)) {
        $error = "Role yang dipilih tidak valid.";
    } elseif (strlen($plainPassword) < 6) {
        $error = "Password minimal 6 karakter.";
    } elseif ($plainPassword !== $confirmPassword) {
        $error = "Password dan konfirmasi password harus sama.";
    } else {
        $password = password_hash($plainPassword, PASSWORD_DEFAULT);
        $cek = mysqli_prepare($conn, "SELECT id FROM users WHERE username = ? OR email = ? LIMIT 1");

        if ($cek) {
            mysqli_stmt_bind_param($cek, 'ss', $username, $email);
            mysqli_stmt_execute($cek);
            $result = mysqli_stmt_get_result($cek);
            $existing = $result ? mysqli_fetch_assoc($result) : null;
            mysqli_stmt_close($cek);
        } else {
            $existing = null;
            $error = "Sistem register belum siap. Silakan coba lagi.";
        }

        if (!isset($error)) {
            if ($existing) {
                $error = "Username atau Email sudah digunakan!";
            } else {
                $stmt = mysqli_prepare(
                    $conn,
                    "INSERT INTO users (username, email, password, role)
                     VALUES (?, ?, ?, ?)"
                );

                if ($stmt) {
                    mysqli_stmt_bind_param($stmt, 'ssss', $username, $email, $password, $role);
                    $saved = mysqli_stmt_execute($stmt);
                    mysqli_stmt_close($stmt);

                    if ($saved) {
                        header("Location: login.php?success=1");
                        exit;
                    }

                    $error = "Registrasi gagal, silakan coba lagi.";
                } else {
                    $error = "Sistem register belum siap. Silakan coba lagi.";
                }
            }
        }
    }
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#040e26">
<title>Register PT Alvindo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    :root {
        --alvindo-navy: #040e26;
        --alvindo-accent: #fc5e28;
        --alvindo-ink: #0d1b2c;
        --alvindo-radius: 30px;
    }

    html { scroll-behavior: smooth; }

    body {
        overflow-x: clip;
        margin: 0;
        color: var(--alvindo-ink);
        background: #d9e2ec;
        font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    a { text-decoration: none; }

    #page-viewport {
        margin: 0 auto;
        width: 100%;
        max-width: 1440px;
        background: #07111d;
        transition: max-width 0.35s ease, box-shadow 0.35s ease;
    }

    body.device-preview-active { padding: 28px 0; }

    #page-viewport.device-tablet {
        max-width: 768px;
        box-shadow: 0 30px 70px rgba(15, 23, 42, 0.28);
        border-left: 10px solid #0d1b2c;
        border-right: 10px solid #0d1b2c;
    }

    #page-viewport.device-mobile {
        max-width: 390px;
        box-shadow: 0 30px 70px rgba(15, 23, 42, 0.32);
        border-left: 10px solid #0d1b2c;
        border-right: 10px solid #0d1b2c;
    }

    #page-viewport.device-desktop {
        box-shadow: 0 30px 70px rgba(15, 23, 42, 0.16);
    }

    #page-viewport.device-mobile,
    #page-viewport.device-tablet {
        border-radius: 30px;
        overflow: hidden;
    }

    .page-top-cap {
        overflow: hidden;
        border-radius: var(--alvindo-radius) var(--alvindo-radius) 0 0;
        background: var(--alvindo-navy);
    }

    .auth-topband {
        padding: 10px 0;
        text-align: center;
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
    }

    .auth-topband strong { color: #ffcbb0; }

    .auth-topbar {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--alvindo-navy);
        box-shadow: 0 14px 38px rgba(4, 14, 38, 0.2);
    }

    .auth-topbar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        row-gap: 10px;
        padding: 14px 20px;
        max-width: 1320px;
        margin: 0 auto;
    }

    .auth-topbar-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #fff;
    }

    .auth-topbar-brand img { width: 46px; height: 46px; object-fit: contain; }

    .auth-topbar-brand strong {
        display: block;
        font-size: 0.98rem;
        letter-spacing: 0.02em;
        color: #fff;
    }

    .auth-topbar-brand span {
        display: block;
        font-size: 0.72rem;
        color: var(--alvindo-accent);
        letter-spacing: 0.06em;
    }

    .auth-topbar-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .device-toggle-group {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .device-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.8rem;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .device-chip:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }

    .device-chip.active {
        background: var(--alvindo-accent);
        color: #fff;
        transform: translateY(-1px);
    }

    .auth-topbar-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        min-height: 42px;
        padding: 10px 16px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
        white-space: nowrap;
        transition: transform 0.2s ease, background 0.2s ease;
    }

    .auth-topbar-pill:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.14); }
    .auth-topbar-pill.primary { background: var(--alvindo-accent); border-color: var(--alvindo-accent); }

    @media (max-width: 480px) {
        .device-chip .device-chip-label,
        .auth-topbar-pill .pill-label { display: none; }
        .device-chip { padding: 8px; }
        .auth-topbar-pill { padding: 10px 12px; }
    }

    .auth-shell {
        position: relative;
        background: #07111d;
        overflow: hidden;
    }

    .auth-bg-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        pointer-events: none;
        filter: saturate(1.05) contrast(1.02) brightness(0.5);
    }

    .auth-shell::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(120deg, rgba(4, 14, 38, 0.92) 0%, rgba(4, 14, 38, 0.72) 55%, rgba(4, 14, 38, 0.5) 100%);
    }

    .auth-container {
        position: relative;
        z-index: 2;
        max-width: 1180px;
        margin: 0 auto;
        padding: 64px 20px;
    }

    .auth-grid {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 48px;
        align-items: center;
    }

    .auth-hero { color: #fff; }

    .auth-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(252, 94, 40, 0.14);
        border: 1px solid rgba(252, 94, 40, 0.35);
        color: #ffcbb0;
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 18px;
    }

    .auth-hero h1 {
        font-size: clamp(2rem, 3.4vw, 2.9rem);
        line-height: 1.1;
        letter-spacing: -0.02em;
        margin: 0 0 20px;
    }

    .auth-hero h1 .accent { color: var(--alvindo-accent); }

    .auth-benefits {
        display: grid;
        gap: 14px;
        margin-top: 28px;
    }

    .auth-benefit {
        padding: 16px 18px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.10);
    }

    .auth-benefit strong { display: block; color: #ffcbb0; font-size: 0.92rem; margin-bottom: 4px; }
    .auth-benefit span { color: rgba(238, 245, 255, 0.75); font-size: 0.9rem; }

    .auth-card {
        background: #fff;
        border-radius: 26px;
        box-shadow: 0 30px 70px rgba(1, 7, 18, 0.35);
        overflow: hidden;
    }

    .auth-card-body { padding: 40px 36px; }

    .auth-title { font-weight: 800; color: var(--alvindo-ink); margin-bottom: 6px; }
    .auth-subtitle { color: #64748b; font-size: 0.92rem; margin-bottom: 20px; }

    .auth-chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px;
    }

    .auth-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border-radius: 999px;
        background: rgba(4, 14, 38, 0.05);
        border: 1px solid rgba(4, 14, 38, 0.08);
        color: var(--alvindo-ink);
        font-size: 0.78rem;
        font-weight: 600;
    }

    .auth-social-grid {
        display: grid;
        gap: 10px;
        margin-bottom: 14px;
    }

    .auth-social-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 14px;
        border: 1px solid rgba(4, 14, 38, 0.12);
        background: #f8fbff;
        color: var(--alvindo-ink);
        font-weight: 600;
        font-size: 0.9rem;
        cursor: not-allowed;
        opacity: 0.7;
    }

    .auth-note {
        font-size: 0.78rem;
        color: #94a3b8;
        margin-bottom: 18px;
    }

    .auth-alert { border-radius: 14px; font-size: 0.9rem; }

    .auth-form .input-group { margin-bottom: 14px; }

    .auth-form .form-control {
        border-radius: 14px 0 0 14px;
        min-height: 50px;
        border: 1px solid rgba(4, 14, 38, 0.14);
    }

    .auth-form .input-group-text {
        border-radius: 0 14px 14px 0;
        background: #f8fbff;
        border: 1px solid rgba(4, 14, 38, 0.14);
        border-left: 0;
        color: var(--alvindo-accent);
    }

    .auth-form .btn-primary {
        background: var(--alvindo-accent);
        border-color: var(--alvindo-accent);
        border-radius: 999px;
        min-height: 50px;
        font-weight: 700;
        margin-top: 6px;
    }

    .auth-links {
        text-align: center;
        margin-top: 18px;
        font-size: 0.9rem;
        color: #64748b;
    }

    .auth-links a { color: var(--alvindo-accent); font-weight: 700; margin-left: 4px; }

    .auth-footer-cap {
        overflow: hidden;
        border-radius: 0 0 var(--alvindo-radius) var(--alvindo-radius);
        background: var(--alvindo-navy);
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
        padding: 18px 20px;
        font-size: 0.82rem;
    }

    @media (max-width: 991.98px) {
        .auth-grid { grid-template-columns: 1fr; gap: 32px; }
        .auth-hero { text-align: center; }
        .auth-benefits { text-align: left; }
    }

    @media (max-width: 575.98px) {
        .auth-card-body { padding: 28px 20px; }
        .auth-container { padding: 40px 16px; }
    }

    #page-viewport.sim-tablet .auth-grid,
    #page-viewport.sim-mobile .auth-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }

    #page-viewport.sim-mobile .auth-card-body { padding: 26px 18px; }
    #page-viewport.sim-mobile .auth-container { padding: 32px 14px; }
    #page-viewport.sim-tablet .auth-topbar-inner,
    #page-viewport.sim-mobile .auth-topbar-inner { justify-content: center; text-align: center; }

    /* ===== Mode Siang (light theme) — toggled by data-theme-toggle button.
       Topband/topbar/footer stay navy in both modes (brand consistency,
       same pattern as the homepage); the shell/hero/chips lighten. ===== */
    body[data-theme="light"] {
        background: #eef4fb;
    }

    body[data-theme="light"] .auth-shell::before {
        background: linear-gradient(120deg, rgba(4, 14, 38, 0.72) 0%, rgba(4, 14, 38, 0.50) 55%, rgba(4, 14, 38, 0.28) 100%);
    }

    body[data-theme="light"] .auth-eyebrow {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.32);
        color: #fff;
    }

    body[data-theme="light"] .auth-benefit {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.26);
    }

    body[data-theme="light"] .auth-benefit span {
        color: rgba(255, 255, 255, 0.88);
    }

    body[data-theme="light"] .auth-card {
        box-shadow: 0 30px 70px rgba(15, 23, 42, 0.22);
    }

    body[data-theme="light"] .device-toggle-group {
        background: rgba(252, 94, 40, 0.12);
        border-color: rgba(252, 94, 40, 0.32);
    }

    body[data-theme="light"] .auth-topbar-pill.primary {
        background: #fc5e28;
        border-color: #fc5e28;
    }
</style>
</head>

<body data-theme="dark" class="hold-transition auth-page auth-register-page">
<script>
    (function () {
        try {
            var saved = localStorage.getItem('sikompro-theme');
            var theme = (saved === 'light' || saved === 'dark')
                ? saved
                : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
            document.documentElement.setAttribute('data-theme', theme);
            document.body.setAttribute('data-theme', theme);
        } catch (e) {}
    })();
</script>

<div id="page-viewport" class="device-desktop">

    <div class="page-top-cap">
        <div class="auth-topband">
            <strong>Support 24/7</strong> &middot; Sistem komplain, absensi, dan gaji &middot; Siap untuk Desktop, Tablet, dan Mobile
        </div>
    </div>

    <header class="auth-topbar" id="auth-topbar">
        <div class="auth-topbar-inner">
            <a class="auth-topbar-brand" href="../index.php">
                <img src="../assets/alvindo-logo.svg" alt="PT Alvindo Bangun Sarana Mandiri">
                <div>
                    <strong>PT ALVINDO</strong>
                    <span>BANGUN SARANA MANDIRI</span>
                </div>
            </a>
            <div class="auth-topbar-actions">
                <div class="device-toggle-group" role="group" aria-label="Simulasi tampilan perangkat">
                    <button type="button" class="device-chip active" data-device="desktop" aria-pressed="true">
                        <i class="fa fa-desktop"></i> <span class="device-chip-label">Desktop</span>
                    </button>
                    <button type="button" class="device-chip" data-device="tablet" aria-pressed="false">
                        <i class="fa fa-tablet"></i> <span class="device-chip-label">Tablet</span>
                    </button>
                    <button type="button" class="device-chip" data-device="mobile" aria-pressed="false">
                        <i class="fa fa-mobile"></i> <span class="device-chip-label">Mobile</span>
                    </button>
                </div>
                <button class="auth-topbar-pill primary" type="button" data-theme-toggle>
                    <i data-theme-toggle-icon class="fa fa-adjust"></i>
                    <span data-theme-toggle-label class="pill-label">Mode Malam</span>
                </button>
            </div>
        </div>
    </header>

    <main>
        <section class="auth-shell">
            <video class="auth-bg-video" autoplay muted loop playsinline preload="auto" poster="../assets/colorlib/service-preview-colorlib-com/images/services-2.jpg">
                <source src="../assets/video/auth-loop.mp4" type="video/mp4">
            </video>
            <div class="auth-container">
                <div class="auth-grid">
                    <section class="auth-hero">
                        <div class="auth-eyebrow">Buat akun baru dengan cepat</div>
                        <h1><span class="accent">Register</span> yang rapi, modern, dan nyaman di HP.</h1>

                        <div class="auth-benefits">
                            <div class="auth-benefit">
                                <strong>Mobile first</strong>
                                <span>Setiap field dibuat tinggi dan mudah disentuh di layar kecil.</span>
                            </div>
                            <div class="auth-benefit">
                                <strong>Validasi jelas</strong>
                                <span>Pesan error tampil tegas jika username atau email sudah dipakai.</span>
                            </div>
                            <div class="auth-benefit">
                                <strong>Langsung siap</strong>
                                <span>Password disimpan dengan hash aman, bukan teks biasa.</span>
                            </div>
                        </div>
                    </section>

                    <section class="auth-card">
                        <div class="auth-card-body">
                            <h2 class="auth-title">Register PT Alvindo</h2>
                            <p class="auth-subtitle">Isi data akun baru untuk admin, pelaksana, atau teknisi tanpa nomor telepon.</p>

                            <div class="auth-chip-row">
                                <span class="auth-chip"><i class="fas fa-user-plus"></i> Buat akun</span>
                                <span class="auth-chip"><i class="fas fa-lock"></i> Hash aman</span>
                                <span class="auth-chip"><i class="fas fa-mobile-screen-button"></i> Mobile friendly</span>
                            </div>

                            
                            <?php if (isset($error)): ?>
                                <div class="alert alert-danger auth-alert"><?= $error ?></div>
                            <?php endif; ?>

                            <form method="POST" class="auth-form">
                                <div class="input-group">
                                    <input type="text" name="username" class="form-control" placeholder="Username" required>
                                    <div class="input-group-append">
                                        <div class="input-group-text"><span class="fas fa-user"></span></div>
                                    </div>
                                </div>

                                <div class="input-group">
                                    <input type="email" name="email" class="form-control" placeholder="Email" required>
                                    <div class="input-group-append">
                                        <div class="input-group-text"><span class="fas fa-envelope"></span></div>
                                    </div>
                                </div>

                                <div class="input-group">
                                    <input type="password" name="password" class="form-control" placeholder="Password" required>
                                    <div class="input-group-append">
                                        <div class="input-group-text"><span class="fas fa-lock"></span></div>
                                    </div>
                                </div>

                                <div class="input-group">
                                    <input type="password" name="confirm_password" class="form-control" placeholder="Konfirmasi Password" required>
                                    <div class="input-group-append">
                                        <div class="input-group-text"><span class="fas fa-lock"></span></div>
                                    </div>
                                </div>

                                <div class="input-group">
                                    <select name="role" class="form-control" required>
                                        <option value="">-- Pilih Role --</option>
                                        <option value="admin">Admin</option>
                                        <option value="pelaksana">Pelaksana</option>
                                        <option value="teknisi">Teknisi</option>
                                    </select>
                                    <div class="input-group-append">
                                        <div class="input-group-text"><span class="fas fa-users"></span></div>
                                    </div>
                                </div>

                                <button type="submit" name="register" class="btn btn-primary btn-block">
                                    <i class="fas fa-user-check"></i> Daftar Sekarang
                                </button>
                            </form>

                            <div class="auth-links">
                                <span>Sudah punya akun?</span>
                                <a href="login.php">Login</a>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
    </main>

    <footer class="auth-footer-cap">
        <p class="mb-0">Copyright &copy; <script>document.write(new Date().getFullYear());</script> PT Alvindo Bangun Sarana Mandiri</p>
    </footer>

</div><!-- /#page-viewport -->

<script>
document.addEventListener('DOMContentLoaded', function () {
    const viewport = document.getElementById('page-viewport');
    const chips = document.querySelectorAll('.device-chip[data-device]');
    if (!viewport || !chips.length) return;

    function applyDevice(device) {
        viewport.classList.remove('device-desktop', 'device-tablet', 'device-mobile', 'sim-tablet', 'sim-mobile');
        viewport.classList.add('device-' + device);
        if (device === 'tablet') viewport.classList.add('sim-tablet');
        if (device === 'mobile') viewport.classList.add('sim-mobile');
        document.body.classList.toggle('device-preview-active', device !== 'desktop');

        chips.forEach((chip) => {
            const isActive = chip.getAttribute('data-device') === device;
            chip.classList.toggle('active', isActive);
            chip.setAttribute('aria-pressed', isActive ? 'true' : 'false');
        });
    }

    chips.forEach((chip) => {
        chip.addEventListener('click', function () {
            applyDevice(this.getAttribute('data-device'));
            viewport.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
    });
});
</script>

<script src="../assets/sikompro-theme.js"></script>

</body>
</html>
