@extends('layouts.app')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-body text-center py-5">
                @if(session('error_scan'))
                    <div class="alert alert-danger alert-dismissible fade show text-start mb-4" role="alert" style="border-radius: 10px;">
                        <i class="fa-solid fa-triangle-exclamation me-2"></i> {!! session('error_scan') !!}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                
                <i class="fa-solid fa-qrcode mb-4" style="font-size: 80px; color: #e0e0e0;"></i>
                <h4 style="font-weight: 700; color: #333; margin-bottom: 15px;">Mulai Tugas Kebersihan</h4>
                <p class="text-muted mx-auto" style="max-width: 400px; font-size: 15px; margin-bottom: 30px;">
                    Silakan scan QR code di ruangan untuk mulai mengisi form kebersihan.
                </p>
                
                <div class="d-grid gap-3 mx-auto" style="max-width: 300px;">
                    <!-- Tombol Buka Kamera Scanner -->
                    <button type="button" class="btn py-3 text-white" style="background-color: #0d8a72; border-radius: 12px; font-weight: 600; font-size: 16px;" data-bs-toggle="modal" data-bs-target="#scannerModal">
                        <i class="fa-solid fa-camera me-2"></i> Scan QR Code Ruangan
                    </button>
                    
                </div>

                <!-- Modal Scanner -->
                <div class="modal fade" id="scannerModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header border-0 pb-0">
                                <h5 class="modal-title" style="font-weight: 600;">Arahkan Kamera ke QR Code</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="closeModalBtn"></button>
                            </div>
                            <div class="modal-body text-center pt-2">
                                <div id="reader" style="width: 100%; max-width: 400px; margin: 0 auto; border-radius: 10px; overflow: hidden; border: 2px solid #0d8a72;"></div>
                                <p class="text-muted mt-3 mb-0" style="font-size: 13px;">Pastikan QR Code berada di dalam kotak pemindai.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
                <script>
                    // Logika Scanner Kamera
                    let html5QrCode = null;

                    document.getElementById('scannerModal').addEventListener('shown.bs.modal', function () {
                        if (!html5QrCode) {
                            html5QrCode = new Html5Qrcode("reader");
                            html5QrCode.start(
                                { facingMode: "environment" },
                                {
                                    fps: 10,
                                    qrbox: { width: 250, height: 250 }
                                },
                                onScanSuccess,
                                onScanFailure
                            ).catch((err) => {
                                console.error("Error starting scanner", err);
                            });
                        }
                    });

                    document.getElementById('scannerModal').addEventListener('hidden.bs.modal', function () {
                        if (html5QrCode) {
                            html5QrCode.stop().then(() => {
                                html5QrCode.clear();
                                html5QrCode = null;
                            }).catch((err) => {
                                console.error("Failed to clear html5QrCode. ", err);
                            });
                        }
                    });

                    function onScanSuccess(decodedText, decodedResult) {
                        if (html5QrCode) {
                            html5QrCode.stop().then(() => {
                                html5QrCode.clear();
                                html5QrCode = null;
                            });
                        }
                        
                        let code = decodedText;
                        if(decodedText.includes('/')) {
                            let parts = decodedText.split('/');
                            code = parts[parts.length - 1];
                        }
                        
                        window.location.href = "{{ url('/scan') }}/" + code;
                    }

                    function onScanFailure(error) {
                        // ignore background errors
                    }

                </script>
            </div>
        </div>
    </div>
</div>
@endsection