@extends('layouts.app')

@section('title', 'Portal Siswa · SmartPenF')

@section('content')
{{-- Google Font: Plus Jakarta Sans --}}
<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=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap" rel="stylesheet">

{{-- html5-qrcode library --}}
<script src="{{ asset('js/html5-qrcode.min.js') }}"></script>
<script>
    if (typeof Html5Qrcode === 'undefined') {
        document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.8/html5-qrcode.min.js"><\/script>');
    }
</script>

<style>
/* ── Root Font ─────────────────────────────────────────────────── */
.sp-login-root, .sp-login-root * {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
    box-sizing: border-box;
}

/* ── Full-Page Layout ──────────────────────────────────────────── */
.sp-login-root {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    background: #f1f5f9;
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .sp-login-root {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Left Hero Panel (Desktop) ─────────────────────────────────── */
.sp-hero-panel {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 3.5rem 4rem;
    background: linear-gradient(145deg, #0f172a 0%, #1e3a5f 50%, #1769d2 100%);
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .sp-hero-panel {
        display: flex;
    }
}
.sp-hero-panel::before {
    content: '';
    position: absolute;
    top: -120px; right: -80px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,179,237,.18) 0%, transparent 70%);
    pointer-events: none;
}
.sp-hero-panel::after {
    content: '';
    position: absolute;
    bottom: -100px; left: -60px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,.15) 0%, transparent 70%);
    pointer-events: none;
}
.sp-hero-pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(255,255,255,.03) 0%, transparent 50%),
        repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,.01) 40px, rgba(255,255,255,.01) 41px);
}
.sp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 100px;
    color: #bfdbfe;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}
.sp-hero-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #60a5fa;
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(.85); }
}
.sp-hero-brand {
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.02em;
    position: relative;
    z-index: 2;
}
.sp-hero-brand span {
    color: #60a5fa;
}
.sp-hero-tagline {
    color: #93c5fd;
    font-size: .95rem;
    font-weight: 500;
    margin-top: .6rem;
    line-height: 1.6;
    max-width: 340px;
    position: relative;
    z-index: 2;
}
.sp-hero-features {
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    position: relative;
    z-index: 2;
}
.sp-hero-features li {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #bfdbfe;
    font-size: .82rem;
    font-weight: 600;
}
.sp-feat-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #93c5fd;
}

/* ── Right Form Panel ──────────────────────────────────────────── */
.sp-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1.25rem;
    min-height: 100vh;
    position: relative;
}
@media (min-width: 640px) {
    .sp-form-panel {
        padding: 2.5rem 2rem;
    }
}

/* ── Form Card ─────────────────────────────────────────────────── */
.sp-card-wrap {
    width: 100%;
    max-width: 420px;
}

/* Mobile Brand Header (hidden on desktop hero) */
.sp-mobile-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}
@media (min-width: 1024px) {
    .sp-mobile-brand {
        display: none;
    }
}
.sp-mobile-brand img {
    height: 52px;
    width: auto;
    margin: 0 auto .75rem;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}
.sp-mobile-logo-text {
    font-size: 1.75rem;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.03em;
    line-height: 1;
}
.sp-mobile-logo-text span {
    color: #1769d2;
}
.sp-mobile-sub {
    font-size: .78rem;
    color: #64748b;
    font-weight: 500;
    margin-top: .3rem;
}

/* Card container */
.sp-form-card {
    background: #fff;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 60px -15px rgba(15,23,42,.12), 0 4px 16px -4px rgba(15,23,42,.08);
    overflow: hidden;
    position: relative;
}
.sp-card-top-bar {
    height: 4px;
    background: linear-gradient(90deg, #1769d2, #6366f1, #0ea5e9);
}
.sp-card-body {
    padding: 1.75rem 1.75rem 1.5rem;
}
@media (min-width: 480px) {
    .sp-card-body {
        padding: 2rem 2rem 1.75rem;
    }
}

.sp-card-heading {
    text-align: center;
    margin-bottom: 1.5rem;
}
.sp-card-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.025em;
    line-height: 1.2;
}
.sp-card-subtitle {
    font-size: .78rem;
    color: #64748b;
    font-weight: 500;
    margin-top: .35rem;
    line-height: 1.5;
}

/* ── Segmented Tab ─────────────────────────────────────────────── */
.sp-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f1f5f9;
    border-radius: 14px;
    padding: 5px;
    margin-bottom: 1.25rem;
}
.sp-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 10px;
    border: none;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s ease;
    background: transparent;
    color: #64748b;
}
.sp-tab-btn.active {
    background: #fff;
    color: #1769d2;
    box-shadow: 0 1px 6px rgba(15,23,42,.1), 0 2px 4px rgba(15,23,42,.06);
}
.sp-tab-btn:not(.active):hover {
    color: #334155;
}
.sp-tab-btn i {
    font-size: .9rem;
}

/* ── Camera Viewfinder ─────────────────────────────────────────── */
.sp-scanner-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0f172a;
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
    border: 1px solid #1e293b;
    box-shadow: inset 0 2px 12px rgba(0,0,0,.3);
}
#qr-reader {
    border: none !important;
    width: 100% !important;
    background: transparent !important;
}
#qr-reader video {
    width: 100% !important;
    height: auto !important;
    max-height: 240px !important;
    object-fit: cover !important;
    border-radius: 15px !important;
}
#qr-reader__scan_region { background: transparent !important; }
#qr-reader__scan_region img,
#qr-reader__dashboard,
#qr-reader__status_span { display: none !important; }

/* Scan corners */
.sp-scan-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}
.sp-corner {
    position: absolute;
    width: 22px; height: 22px;
    border-color: #60a5fa;
    border-style: solid;
    border-width: 0;
}
.sp-corner.tl { top: 12px; left: 12px; border-top-width: 2.5px; border-left-width: 2.5px; border-radius: 4px 0 0 0; }
.sp-corner.tr { top: 12px; right: 12px; border-top-width: 2.5px; border-right-width: 2.5px; border-radius: 0 4px 0 0; }
.sp-corner.bl { bottom: 12px; left: 12px; border-bottom-width: 2.5px; border-left-width: 2.5px; border-radius: 0 0 0 4px; }
.sp-corner.br { bottom: 12px; right: 12px; border-bottom-width: 2.5px; border-right-width: 2.5px; border-radius: 0 0 4px 0; }

/* Laser scan line */
@keyframes sp-laser {
    0%   { top: 10%; opacity: .3; }
    50%  { top: 88%; opacity: 1; }
    100% { top: 10%; opacity: .3; }
}
#sp-laser {
    position: absolute;
    left: 10%; right: 10%;
    height: 2px;
    border-radius: 100px;
    background: linear-gradient(90deg, transparent, #38bdf8, #818cf8, #38bdf8, transparent);
    box-shadow: 0 0 10px 2px rgba(56,189,248,.55);
    animation: sp-laser 2.2s ease-in-out infinite;
    z-index: 20;
}

/* Idle placeholder inside scanner */
.sp-cam-idle {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1rem;
    z-index: 5;
}
.sp-cam-icon-wrap {
    position: relative;
    display: inline-flex;
    margin-bottom: .6rem;
}
.sp-cam-icon-bg {
    width: 54px; height: 54px;
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #93c5fd;
    font-size: 1.5rem;
}
.sp-cam-pulse {
    position: absolute;
    top: -4px; right: -4px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid #0f172a;
}
.sp-cam-pulse::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(59,130,246,.4);
    animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring {
    0%   { transform: scale(1); opacity: .8; }
    100% { transform: scale(2.2); opacity: 0; }
}
.sp-cam-title {
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sp-cam-hint {
    font-size: .7rem;
    color: #94a3b8;
    font-weight: 500;
    margin-top: .25rem;
    line-height: 1.5;
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Scan Status Text ──────────────────────────────────────────── */
.sp-status {
    text-align: center;
    min-height: 18px;
    font-size: .72rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: .85rem;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.sp-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-weight: 800;
    font-size: .84rem;
    color: #fff !important;
    background: linear-gradient(135deg, #1769d2 0%, #1251a3 100%) !important;
    box-shadow: 0 4px 16px rgba(23,105,210,.35), 0 1px 4px rgba(23,105,210,.2);
    transition: all .18s ease;
}
.sp-btn-primary:hover {
    background: linear-gradient(135deg, #1251a3 0%, #0d3d7c 100%) !important;
    box-shadow: 0 6px 22px rgba(23,105,210,.45);
    transform: translateY(-1px);
}
.sp-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(23,105,210,.3);
}
.sp-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 20px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: .78rem;
    color: #e2e8f0 !important;
    background: rgba(255,255,255,.1) !important;
    transition: all .15s ease;
    margin-top: .5rem;
}
.sp-btn-secondary:hover {
    background: rgba(220,38,38,.85) !important;
    color: #fff !important;
}

/* ── Manual Input ──────────────────────────────────────────────── */
.sp-input-label {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #475569;
    margin-bottom: .5rem;
}
.sp-input-wrap {
    position: relative;
}
.sp-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #1769d2;
    font-size: 1rem;
    pointer-events: none;
}
.sp-input {
    width: 100%;
    padding: 13px 14px 13px 42px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: .84rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: .03em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    transition: border-color .15s, box-shadow .15s, background .15s;
    outline: none;
}
.sp-input::placeholder {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
    font-weight: 400;
    color: #94a3b8;
    letter-spacing: 0;
}
.sp-input:focus {
    border-color: #1769d2;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(23,105,210,.12);
}
.sp-input-hint {
    font-size: .7rem;
    color: #94a3b8;
    font-weight: 500;
    margin-top: .4rem;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sp-input-hint i { color: #1769d2; }

/* ── Divider ───────────────────────────────────────────────────── */
.sp-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
    color: #94a3b8;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sp-divider::before,
.sp-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* ── Info Box ──────────────────────────────────────────────────── */
.sp-info-box {
    background: linear-gradient(135deg, #eff6ff, #f0f9ff);
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    padding: .875rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-top: 1.25rem;
}
.sp-info-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: #1769d2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .75rem;
}
.sp-info-text {
    font-size: .72rem;
    color: #1e3a5f;
    font-weight: 600;
    line-height: 1.6;
}

/* ── Error Alert ───────────────────────────────────────────────── */
.sp-error-box {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 12px;
    padding: .75rem .9rem;
    font-size: .75rem;
    font-weight: 600;
    color: #be123c;
    margin-top: 1rem;
}
.sp-error-box i { color: #e11d48; margin-top: 1px; flex-shrink: 0; }

/* ── Footer ────────────────────────────────────────────────────── */
.sp-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .7rem;
    font-weight: 500;
    color: #94a3b8;
}

/* ── Utility ───────────────────────────────────────────────────── */
.sp-hidden { display: none !important; }
</style>

<div class="sp-login-root">
    {{-- ── LEFT: Hero Panel (desktop only) ──────────────── --}}
    <aside class="sp-hero-panel">
        <div class="sp-hero-pattern"></div>

        <div class="sp-hero-badge">
            <div class="sp-hero-dot"></div>
            Portal Ruang Belajar Siswa
        </div>

        <div class="sp-hero-brand">
            SmartPen<span>F</span>
        </div>
        <p class="sp-hero-tagline">
            Platform Pembelajaran Digital untuk Pendidikan Kesetaraan & Pembelajaran Mandiri
        </p>

        <ul class="sp-hero-features">
            <li>
                <div class="sp-feat-icon"><i class="bi bi-qr-code"></i></div>
                Masuk cepat dengan pindai Kartu QR
            </li>
            <li>
                <div class="sp-feat-icon"><i class="bi bi-book-half"></i></div>
                Akses materi, tugas, dan evaluasi
            </li>
            <li>
                <div class="sp-feat-icon"><i class="bi bi-calendar3"></i></div>
                Pantau jadwal & absensi kehadiran
            </li>
            <li>
                <div class="sp-feat-icon"><i class="bi bi-wallet2"></i></div>
                Cek status tagihan dan pembayaran SPP
            </li>
        </ul>
    </aside>

    {{-- ── RIGHT: Form Panel ─────────────────────────────── --}}
    <main class="sp-form-panel">
        <div class="sp-card-wrap">

            {{-- Mobile Brand (hidden on desktop — hero shows it) --}}
            <div class="sp-mobile-brand">
                <img src="{{ asset('images/logo.png') }}" alt="Logo PKBM">
                <div class="sp-mobile-logo-text">SmartPen<span>F</span></div>
                <p class="sp-mobile-sub">Sistem Pembelajaran PKBM Digital</p>
            </div>

            {{-- Main Form Card --}}
            <div class="sp-form-card">
                <div class="sp-card-top-bar"></div>
                <div class="sp-card-body">

                    <div class="sp-card-heading">
                        <h1 class="sp-card-title">Masuk dengan Kartu QR</h1>
                        <p class="sp-card-subtitle">Pindai atau ketik kode QR yang tertera pada kartu pelajar Anda</p>
                    </div>

                    {{-- Segmented Tab --}}
                    <div class="sp-tabs" role="tablist">
                        <button type="button" id="tab-scan-btn" class="sp-tab-btn active" role="tab" aria-selected="true">
                            <i class="bi bi-camera"></i> Pindai Kamera
                        </button>
                        <button type="button" id="tab-manual-btn" class="sp-tab-btn" role="tab" aria-selected="false">
                            <i class="bi bi-keyboard"></i> Ketik Manual
                        </button>
                    </div>

                    {{-- Shared form --}}
                    <form id="qr-login-form" method="POST" action="{{ route('student.login.qr') }}">
                        @csrf
                        {{-- Hidden carrier for the QR value --}}
                        <input id="qr-code-hidden" name="kode_qr" type="hidden" value="">

                        {{-- ═══════════════════════════════
                             PANEL 1: PINDAI KAMERA
                             ═══════════════════════════════ --}}
                        <div id="panel-scan">
                            {{-- Camera viewfinder --}}
                            <div class="sp-scanner-wrap">
                                {{-- html5-qrcode render target --}}
                                <div id="qr-reader"></div>

                                {{-- Corner brackets (always visible as overlay) --}}
                                <div class="sp-scan-corners">
                                    <div class="sp-corner tl"></div>
                                    <div class="sp-corner tr"></div>
                                    <div class="sp-corner bl"></div>
                                    <div class="sp-corner br"></div>
                                </div>

                                {{-- Laser (shown when scanning) --}}
                                <div id="sp-laser" class="sp-hidden"></div>

                                {{-- Idle placeholder --}}
                                <div id="sp-cam-idle" class="sp-cam-idle">
                                    <div class="sp-cam-icon-wrap">
                                        <div class="sp-cam-icon-bg">
                                            <i class="bi bi-camera"></i>
                                        </div>
                                        <div class="sp-cam-pulse"></div>
                                    </div>
                                    <p class="sp-cam-title">Kamera Belum Aktif</p>
                                    <p class="sp-cam-hint">Dukung webcam laptop dan kamera smartphone</p>
                                </div>
                            </div>

                            {{-- Status line --}}
                            <p id="sp-status" class="sp-status" aria-live="polite">
                                Klik tombol di bawah untuk mengaktifkan kamera
                            </p>

                            {{-- Start button --}}
                            <button id="sp-start-btn" type="button" class="sp-btn-primary">
                                <i class="bi bi-camera-fill"></i>
                                <span>Buka Kamera Scanner</span>
                            </button>

                            {{-- Stop button (hidden by default) --}}
                            <button id="sp-stop-btn" type="button" class="sp-btn-secondary sp-hidden">
                                <i class="bi bi-x-circle"></i>
                                <span>Tutup Kamera</span>
                            </button>
                        </div>

                        {{-- ═══════════════════════════════
                             PANEL 2: KETIK MANUAL
                             ═══════════════════════════════ --}}
                        <div id="panel-manual" class="sp-hidden">
                            <label for="qr-code-input" class="sp-input-label">
                                Kode QR / ID Kartu Pelajar
                            </label>
                            <div class="sp-input-wrap">
                                <i class="bi bi-upc-scan sp-input-icon"></i>
                                <input
                                    id="qr-code-input"
                                    name="kode_qr_manual"
                                    type="text"
                                    autocomplete="off"
                                    autocorrect="off"
                                    autocapitalize="characters"
                                    value="{{ old('kode_qr') }}"
                                    placeholder="Contoh: SIS-PKBM1-001"
                                    class="sp-input"
                                    spellcheck="false"
                                >
                            </div>
                            <p class="sp-input-hint">
                                <i class="bi bi-info-circle"></i>
                                Kode tertera di bawah gambar QR pada kartu pelajar Anda.
                            </p>

                            <div style="margin-top: 1.1rem">
                                <button type="submit" id="btn-submit-manual" class="sp-btn-primary">
                                    <span>Verifikasi & Masuk</span>
                                    <i class="bi bi-arrow-right"></i>
                                </button>
                            </div>
                        </div>

                        {{-- Error alert --}}
                        @error('kode_qr')
                            <div class="sp-error-box" role="alert">
                                <i class="bi bi-exclamation-triangle-fill"></i>
                                <span>{{ $message }}</span>
                            </div>
                        @enderror

                    </form>

                    {{-- Info box --}}
                    <div class="sp-info-box">
                        <div class="sp-info-icon">
                            <i class="bi bi-lightbulb-fill"></i>
                        </div>
                        <p class="sp-info-text">
                            Kartu QR diterbitkan resmi oleh PKBM. Hubungi pengelola jika Anda belum memiliki kartu pelajar digital.
                        </p>
                    </div>
                </div>
            </div>

            {{-- Page footer --}}
            <p class="sp-footer">
                &copy; {{ date('Y') }} SmartPenF &middot; Sistem Informasi Pembelajaran PKBM
            </p>
        </div>
    </main>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const tabScanBtn    = document.getElementById('tab-scan-btn');
    const tabManualBtn  = document.getElementById('tab-manual-btn');
    const panelScan     = document.getElementById('panel-scan');
    const panelManual   = document.getElementById('panel-manual');

    const spStartBtn    = document.getElementById('sp-start-btn');
    const spStopBtn     = document.getElementById('sp-stop-btn');
    const spLaser       = document.getElementById('sp-laser');
    const spCamIdle     = document.getElementById('sp-cam-idle');
    const spStatus      = document.getElementById('sp-status');

    const qrInputManual = document.getElementById('qr-code-input');
    const qrInputHidden = document.getElementById('qr-code-hidden');
    const qrForm        = document.getElementById('qr-login-form');
    const btnSubmitManual = document.getElementById('btn-submit-manual');

    let html5QrCode = null;
    let isRunning   = false;

    /* ── Sync manual input on submit ──────────────────── */
    btnSubmitManual.addEventListener('click', function () {
        qrInputHidden.value = qrInputManual.value.trim();
    });
    qrForm.addEventListener('submit', function () {
        if (!qrInputHidden.value && qrInputManual.value) {
            qrInputHidden.value = qrInputManual.value.trim();
        }
    });

    /* ── Tab switching ─────────────────────────────────── */
    function activateScanTab() {
        tabScanBtn.classList.add('active');
        tabManualBtn.classList.remove('active');
        tabScanBtn.setAttribute('aria-selected', 'true');
        tabManualBtn.setAttribute('aria-selected', 'false');
        panelScan.classList.remove('sp-hidden');
        panelManual.classList.add('sp-hidden');
    }

    function activateManualTab() {
        stopScanner();
        tabManualBtn.classList.add('active');
        tabScanBtn.classList.remove('active');
        tabManualBtn.setAttribute('aria-selected', 'true');
        tabScanBtn.setAttribute('aria-selected', 'false');
        panelManual.classList.remove('sp-hidden');
        panelScan.classList.add('sp-hidden');
        setTimeout(() => qrInputManual.focus(), 60);
    }

    tabScanBtn.addEventListener('click', activateScanTab);
    tabManualBtn.addEventListener('click', activateManualTab);

    /* ── QR Success ────────────────────────────────────── */
    function onScanSuccess(decodedText) {
        if (!decodedText) return;
        spStatus.innerHTML = '<span style="color:#059669;font-weight:800;">✅ QR terdeteksi! Menghubungkan...</span>';
        qrInputHidden.value = decodedText;
        qrInputManual.value = decodedText;
        stopScanner();
        setTimeout(() => qrForm.submit(), 280);
    }

    /* ── Camera stop ───────────────────────────────────── */
    function stopScanner() {
        if (html5QrCode && isRunning) {
            html5QrCode.stop().then(() => {
                html5QrCode.clear();
                isRunning = false;
            }).catch(() => { isRunning = false; });
        }
        spStartBtn.classList.remove('sp-hidden');
        spStopBtn.classList.add('sp-hidden');
        spCamIdle.classList.remove('sp-hidden');
        spLaser.classList.add('sp-hidden');
        if (!spStatus.innerHTML.includes('✅')) {
            spStatus.textContent = 'Klik tombol di bawah untuk mengaktifkan kamera';
        }
    }

    /* ── Camera start ──────────────────────────────────── */
    spStartBtn.addEventListener('click', function () {
        if (typeof Html5Qrcode === 'undefined') {
            spStatus.innerHTML = '<span style="color:#dc2626">Memuat modul kamera, coba beberapa saat lagi...</span>';
            return;
        }

        spStatus.innerHTML = '<span style="color:#1769d2;font-weight:700">⏳ Menghubungkan ke kamera...</span>';
        spStartBtn.classList.add('sp-hidden');
        spStopBtn.classList.remove('sp-hidden');
        spCamIdle.classList.add('sp-hidden');
        spLaser.classList.remove('sp-hidden');

        try {
            if (!html5QrCode) html5QrCode = new Html5Qrcode('qr-reader');

            const config = {
                fps: 15,
                qrbox: function(w, h) {
                    const edge = Math.floor(Math.min(w, h) * 0.72);
                    return { width: edge, height: edge };
                }
            };

            Html5Qrcode.getCameras()
                .then(devices => {
                    const backCam = devices && devices.find(d =>
                        /back|belakang|environment/i.test(d.label)
                    );
                    const camId = (backCam || (devices && devices[0]))
                        ? (backCam ? backCam.id : devices[0].id)
                        : null;

                    const startFn = camId
                        ? html5QrCode.start(camId, config, onScanSuccess)
                        : html5QrCode.start({ facingMode: 'user' }, config, onScanSuccess);

                    return startFn;
                })
                .then(() => {
                    isRunning = true;
                    spStatus.innerHTML = '<span style="color:#1769d2;font-weight:700">📷 Arahkan kartu ke kamera</span>';
                })
                .catch(err => {
                    // Fallback: try user-facing cam
                    return html5QrCode.start({ facingMode: 'user' }, config, onScanSuccess)
                        .then(() => {
                            isRunning = true;
                            spStatus.innerHTML = '<span style="color:#1769d2;font-weight:700">📷 Arahkan kartu ke kamera</span>';
                        })
                        .catch(handleCameraError);
                });

        } catch (e) {
            handleCameraError(e);
        }
    });

    function handleCameraError(err) {
        console.error('Camera error:', err);
        stopScanner();
        let msg = 'Tidak dapat membuka kamera. ';
        if (err && err.name === 'NotAllowedError') {
            msg = '🔒 Izin kamera diblokir. Klik ikon gembok di address bar untuk mengizinkan.';
        } else if (err && err.name === 'NotFoundError') {
            msg = 'Kamera tidak terdeteksi. Gunakan tab "Ketik Manual".';
        } else {
            msg += 'Periksa izin kamera atau gunakan tab "Ketik Manual".';
        }
        spStatus.innerHTML = '<span style="color:#dc2626;font-weight:700">' + msg + '</span>';
    }

    spStopBtn.addEventListener('click', stopScanner);
    window.addEventListener('beforeunload', stopScanner);

    @if ($errors->has('kode_qr'))
        activateManualTab();
    @endif
});
</script>
@endsection