@extends('layouts.app')
@section('title','Scan Absensi')
@section('topbar-title','Scan QR Absensi')

@section('styles')
<style>
.scan-wrapper {
    background: linear-gradient(135deg, #0a6e6e, #0d9488, #14b8a6);
    border-radius: 20px; padding: 1.5rem;
    text-align: center; position: relative; overflow: hidden;
}
#qr-video-wrapper {
    position: relative; max-width: 300px;
    margin: 0 auto; border-radius: 16px;
    overflow: hidden; background: #000; aspect-ratio: 1;
}
#qr-video { width:100%; height:100%; object-fit:cover; display:block; }
.scan-frame { position:absolute; inset:0; pointer-events:none; }
.scan-frame::before, .scan-frame::after {
    content:''; position:absolute; width:50px; height:50px;
    border-color:rgba(255,255,255,.9); border-style:solid;
}
.scan-frame::before { top:12px; left:12px; border-width:3px 0 0 3px; border-radius:6px 0 0 0; }
.scan-frame::after  { bottom:12px; right:12px; border-width:0 3px 3px 0; border-radius:0 0 6px 0; }
.corner-tr { position:absolute; top:12px; right:12px; width:50px; height:50px; border:3px solid rgba(255,255,255,.9); border-width:3px 3px 0 0; border-radius:0 6px 0 0; }
.corner-bl { position:absolute; bottom:12px; left:12px; width:50px; height:50px; border:3px solid rgba(255,255,255,.9); border-width:0 0 3px 3px; border-radius:0 0 0 6px; }
.scan-line {
    position:absolute; left:12px; right:12px; height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
    animation:scanDown 1.8s ease-in-out infinite;
    box-shadow:0 0 8px rgba(255,255,255,.6);
}
@keyframes scanDown { 0%{top:12px} 50%{top:calc(100% - 14px)} 100%{top:12px} }
.scan-status-bar {
    margin-top:.85rem; padding:.6rem 1rem; border-radius:10px;
    font-size:.82rem; font-weight:600; display:none;
}
.scan-status-bar.show   { display:block; }
.scan-status-bar.detect { background:rgba(255,255,255,.2); color:white; }
.scan-status-bar.ok     { background:rgba(22,163,74,.9); color:white; }
.scan-status-bar.err    { background:rgba(220,38,38,.85); color:white; }
.scan-alt { background:#f0fdfa; border:2px dashed rgba(20,184,166,.4); border-radius:14px; padding:1.25rem; }
.step-item { display:flex; align-items:flex-start; gap:.7rem; padding:.6rem; border-radius:10px; }
.step-dot { width:26px; height:26px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,#0d9488,#2dd4bf); color:white; font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.5} }
.notif-box {
    border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: 1rem;
    display: flex; align-items: flex-start; gap: .75rem;
    animation: slideDown .35s cubic-bezier(.22,1,.36,1);
}
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }
.notif-error   { background:#fef2f2; border:1.5px solid rgba(220,38,38,.2); color:#b91c1c; }
.notif-success { background:#f0fdf4; border:1.5px solid rgba(22,163,74,.2);  color:#15803d; }
.notif-warning { background:#fffbeb; border:1.5px solid rgba(217,119,6,.2);  color:#92400e; }
</style>
@endsection

@section('content')

@if(session('qr_error'))
<div class="notif-box notif-error">
    <i class="bi bi-exclamation-octagon-fill flex-shrink-0 mt-1" style="font-size:1.2rem;"></i>
    <div>
        <div style="font-weight:700;margin-bottom:.2rem;">Absensi Gagal</div>
        <div style="font-size:.85rem;">{!! session('qr_error') !!}</div>
    </div>
    <button type="button" onclick="this.parentElement.remove()"
            style="background:none;border:none;color:inherit;margin-left:auto;font-size:1.1rem;cursor:pointer;opacity:.6;">
        <i class="bi bi-x-lg"></i>
    </button>
</div>
@endif

@if(session('qr_success'))
<div class="notif-box notif-success">
    <i class="bi bi-check-circle-fill flex-shrink-0 mt-1" style="font-size:1.2rem;"></i>
    <div>
        <div style="font-weight:700;margin-bottom:.2rem;">Absensi Berhasil!</div>
        <div style="font-size:.85rem;">{!! session('qr_success') !!}</div>
    </div>
    <button type="button" onclick="this.parentElement.remove()"
            style="background:none;border:none;color:inherit;margin-left:auto;font-size:1.1rem;cursor:pointer;opacity:.6;">
        <i class="bi bi-x-lg"></i>
    </button>
</div>
@endif

<div class="page-header">
    <div class="page-title">Scan QR Absensi</div>
    <div class="page-sub">Arahkan kamera ke QR Code — sistem otomatis mendeteksi jadwal</div>
</div>

<div class="row justify-content-center g-4">
    <div class="col-lg-5">
        <div class="scan-wrapper">
            <div style="font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:.75rem;">
                <i class="bi bi-camera-fill me-1"></i>Scanner Aktif
            </div>
            <div id="qr-video-wrapper">
                <video id="qr-video" autoplay muted playsinline></video>
                <div class="scan-frame">
                    <div class="scan-line"></div>
                    <div class="corner-tr"></div>
                    <div class="corner-bl"></div>
                </div>
                <div id="cam-placeholder" style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.6);color:rgba(255,255,255,.7);">
                    <div class="spinner-border mb-2" style="width:1.5rem;height:1.5rem;border-width:2px;"></div>
                    <div style="font-size:.75rem;">Memuat kamera...</div>
                </div>
            </div>
            <div id="scan-status" class="scan-status-bar"></div>
            <div style="font-size:.75rem;color:rgba(255,255,255,.6);margin-top:.75rem;">
                <i class="bi bi-info-circle me-1"></i>Pastikan dalam jam kuliah yang terjadwal
            </div>
        </div>

        <div class="content-card mt-3">
            <div class="content-card-header">
                <i class="bi bi-calendar-check-fill" style="color:#0d9488;"></i>
                <span class="title">Jadwal Hari Ini</span>
                <span class="ms-auto" style="font-size:.75rem;color:#5a7a7a;">
                    {{ \Carbon\Carbon::now()->locale('id')->isoFormat('dddd, D MMMM') }}
                </span>
            </div>
            <div class="content-card-body p-0">
                @php
                    $jadwalHariIni = $processedJadwal ?? collect();
                @endphp
                
                @if(count($jadwalHariIni) == 0)
                    <div class="p-4 text-center" style="color:#5a7a7a;font-size:.83rem;">
                        <i class="bi bi-calendar-x d-block fs-2 mb-2 opacity-25"></i>
                        Tidak ada jadwal untuk hari ini.
                    </div>
                @else
                    @foreach($jadwalHariIni as $j)
                    <div class="d-flex align-items-center gap-3 p-3 border-bottom">
                        <div style="width:40px;height:40px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
                            background:{{ $j->aktif && !$j->sudah_absen ? 'linear-gradient(135deg,#0d9488,#2dd4bf)' : '#f1f5f9' }};">
                            <i class="bi bi-book-fill" style="color:{{ $j->aktif && !$j->sudah_absen ? 'white' : '#94a3b8' }};"></i>
                        </div>
                        <div class="flex-grow-1">
                            <div style="font-weight:700;font-size:.85rem;">{{ $j->mataKuliah->nama ?? '-' }}</div>
                            <div style="font-size:.72rem;color:#5a7a7a;">
                                {{ substr($j->jam_mulai, 0, 5) }} – {{ substr($j->jam_selesai, 0, 5) }} · {{ $j->ruangan }}
                            </div>
                            <div style="font-size:.68rem;color:#0d9488;font-weight:600;">
                                Batas Scan: {{ $j->batas_absen_mulai }} – {{ $j->batas_absen_akhir }} WIB
                            </div>
                        </div>
                        @if($j->sudah_absen)
                            <span class="badge bg-{{ $j->status_absen == 'alpha' ? 'danger' : 'success' }} bg-opacity-10 text-{{ $j->status_absen == 'alpha' ? 'danger' : 'success' }} px-3 py-2 rounded-pill" style="font-size:.65rem; font-weight:800;">
                                {{ strtoupper($j->status_absen) }}
                            </span>
                        @elseif($j->aktif)
                            <span style="background:rgba(22,163,74,.12);color:#15803d;padding:.3rem .7rem;border-radius:99px;font-size:.65rem;font-weight:800;animation:blink 1.5s infinite;">● SCAN SEKARANG</span>
                        @elseif($j->ditutup)
                            <span style="background:rgba(220,38,38,.1);color:#b91c1c;padding:.3rem .7rem;border-radius:99px;font-size:.65rem;font-weight:800;">✕ ABSEN DITUTUP</span>
                        @else
                            <span style="background:#f1f5f9;color:#64748b;padding:.3rem .7rem;border-radius:99px;font-size:.65rem;font-weight:800;">BELUM MULAI</span>
                        @endif
                    </div>
                    @endforeach
                @endif
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="scan-alt mb-3">
            <div style="font-weight:700;font-size:.88rem;margin-bottom:.5rem;">
                <i class="bi bi-keyboard me-2" style="color:#0d9488;"></i>Input Token Manual
            </div>
            <div style="font-size:.78rem;color:#5a7a7a;margin-bottom:.75rem;">
                Jika kamera tidak bisa scan, ketik token QR di sini.
            </div>
            <div class="input-group">
                <input type="text" id="tokenInput" class="form-control"
                       placeholder="Tempel token QR..." style="font-size:.85rem;">
                <button type="button" class="btn btn-primary fw-bold" onclick="submitToken()">
                    <i class="bi bi-arrow-right-circle-fill"></i>
                </button>
            </div>
        </div>

        <div class="content-card">
            <div class="content-card-header">
                <i class="bi bi-lightning-charge-fill" style="color:#d97706;"></i>
                <span class="title">Cara Kerja</span>
            </div>
            <div class="p-3">
                <div class="step-item">
                    <div class="step-dot">1</div>
                    <div style="font-size:.82rem;">Arahkan kamera ke <strong>QR Code</strong> yang ditampilkan.</div>
                </div>
                <div class="step-item">
                    <div class="step-dot">2</div>
                    <div style="font-size:.82rem;">Sistem <strong>otomatis mendeteksi</strong> matkul berdasarkan jam.</div>
                </div>
                <div class="step-item">
                    <div class="step-dot">3</div>
                    <div style="font-size:.82rem;">Absensi langsung <strong>tercatat</strong> sebagai Hadir.</div>
                </div>
                <div class="step-item" style="background:#fef2f2;border-radius:8px;border-left:3px solid #dc2626;">
                    <div class="step-dot" style="background:linear-gradient(135deg,#dc2626,#f87171);">!</div>
                    <div style="font-size:.78rem;color:#b91c1c;">
                        Absensi <strong>hanya bisa</strong> dilakukan tepat pada jam mulai, dan akan tertutup jika melebihi <strong>15 menit</strong> atau jika jam kelas telah usai.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
<script>
(function () {
    var statusBar   = document.getElementById('scan-status');
    var placeholder = document.getElementById('cam-placeholder');
    var video       = document.getElementById('qr-video');
    var canvas      = document.createElement('canvas');
    var ctx         = canvas.getContext('2d', { willReadFrequently: true });
    var scanning    = false;
    var animFrame   = null;
    var stream      = null;

    function showStatus(msg, type) {
        statusBar.className = 'scan-status-bar show ' + type;
        statusBar.innerHTML = msg;
    }

    function isArnQr(data) {
        return /\/absensi\/scan\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i.test(data);
    }

    function tick() {
        if (video.readyState === video.HAVE_ENOUGH_DATA && video.videoWidth > 0 && video.videoHeight > 0) {
            canvas.width  = video.videoWidth;
            canvas.height = video.videoHeight;
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

            if (imageData.width < 100 || imageData.height < 100) {
                animFrame = requestAnimationFrame(tick);
                return;
            }

            var code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'dontInvert' });

            if (code && code.data && code.data.length > 10) {
                if (isArnQr(code.data)) {
                    scanning = false;
                    cancelAnimationFrame(animFrame);
                    showStatus('QR ARN Terdeteksi! Memproses absensi...', 'ok');
                    if (navigator.vibrate) { navigator.vibrate([100, 50, 100]); }
                    if (stream) { stream.getTracks().forEach(function(t) { t.stop(); }); }
                    setTimeout(function() { window.location.href = code.data; }, 400);
                    return;
                } else {
                    scanning = false;
                    cancelAnimationFrame(animFrame);
                    showStatus('QR tidak valid! Hanya QR dari ARN System yang diterima.', 'err');
                    setTimeout(function() {
                        scanning  = true;
                        animFrame = requestAnimationFrame(tick);
                        showStatus('Kamera aktif — arahkan ke QR Code ARN', 'detect');
                    }, 2500);
                    return;
                }
            }
        }
        if (scanning) { animFrame = requestAnimationFrame(tick); }
    }

    function startCamera() {
        navigator.mediaDevices.getUserMedia({
            video: { facingMode: { ideal: 'environment' }, width:  { min: 640, ideal: 1280, max: 1920 }, height: { min: 480, ideal: 720,  max: 1080 } },
            audio: false
        }).then(function(s) {
            stream = s;
            video.srcObject = stream;
            video.setAttribute('playsinline', true);
            video.setAttribute('autoplay',    true);
            video.setAttribute('muted',       true);

            video.onloadedmetadata = function() {
                video.play().then(function() {
                    if (placeholder) { placeholder.style.display = 'none'; }
                    showStatus('Kamera aktif — arahkan ke QR Code ARN', 'detect');
                    scanning  = true;
                    animFrame = requestAnimationFrame(tick);
                });
            };
        }).catch(function(err) {
            console.error('Camera error:', err);
            if (placeholder) {
                placeholder.style.display = 'flex';
                placeholder.innerHTML = '<div style="color:rgba(255,255,255,.8);font-size:.8rem;padding:1rem;text-align:center;"><i class="bi bi-camera-video-off d-block mb-2" style="font-size:2rem;"></i>Kamera tidak dapat diakses.<br><small>Gunakan HTTPS atau coba browser lain.</small></div>';
            }
            showStatus('Kamera gagal — gunakan token manual', 'err');
        });
    }

    startCamera();

    window.addEventListener('pagehide', function() {
        scanning = false;
        if (animFrame) { cancelAnimationFrame(animFrame); }
        if (stream)    { stream.getTracks().forEach(function(t) { t.stop(); }); }
    });
    window.addEventListener('beforeunload', function() {
        scanning = false;
        if (animFrame) { cancelAnimationFrame(animFrame); }
        if (stream)    { stream.getTracks().forEach(function(t) { t.stop(); }); }
    });
})();

function submitToken() {
    var token = document.getElementById('tokenInput').value.trim();
    if (!token) { document.getElementById('tokenInput').focus(); return; }
    var match = token.match(/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i);
    if (!match) { alert('Token tidak valid. Masukkan token UUID dari sistem ARN.'); return; }
    window.location.href = '/absensi/scan/' + match[0];
}

document.getElementById('tokenInput').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') { submitToken(); }
});
</script>
@endsection