@extends('layouts.app')

@section('title', 'Scan QR Code Aset')

@section('content')

<div class="scan-page">

    {{-- =====================================================
         HEADER
    ====================================================== --}}

    <div class="scan-header">

        <div>

            <h3 class="mb-1">

                <i class="bi bi-qr-code-scan me-2"></i>

                Scan QR Code Aset

            </h3>

            <p class="text-muted mb-0">

                Arahkan kamera perangkat ke QR Code aset laboratorium.

            </p>

        </div>

    </div>


    {{-- =====================================================
         CARD SCANNER
    ====================================================== --}}

    <div class="card scan-card shadow-sm border-0">

        <div class="card-body">


            {{-- INFORMASI --}}

            <div class="scan-info">

                <i class="bi bi-camera"></i>

                <div>

                    <strong>
                        Pemindaian QR Code
                    </strong>

                    <p class="mb-0 text-muted">

                        Pastikan QR Code terlihat jelas dan berada
                        di dalam kotak pemindaian.

                    </p>

                </div>

            </div>


            {{-- =================================================
                 READER
            ================================================== --}}

            <div class="scanner-wrapper">

                <div id="reader"></div>

            </div>


            {{-- =================================================
                 PETUNJUK
            ================================================== --}}

            <div class="scan-help">

                <i class="bi bi-info-circle me-1"></i>

                Izinkan akses kamera jika browser meminta izin.

            </div>


            {{-- STATUS --}}

            <div
                id="scan-status"
                class="text-center text-muted mt-3">

                Menyiapkan kamera...

            </div>

        </div>

    </div>

</div>


{{-- =====================================================
     CSS RESPONSIVE
====================================================== --}}

@push('styles')

<style>

    /* =====================================================
       HALAMAN
    ====================================================== */

    .scan-page {

        width: 100%;

    }


    /* =====================================================
       HEADER
    ====================================================== */

    .scan-header {

        margin-bottom: 20px;

    }


    .scan-header h3 {

        font-weight: 600;

        color: #172b4d;

    }


    .scan-header p {

        font-size: 14px;

    }


    /* =====================================================
       CARD
    ====================================================== */

    .scan-card {

        width: 100%;

        max-width: 700px;

        margin: 0 auto;

        border-radius: 12px;

    }


    /* =====================================================
       INFORMASI
    ====================================================== */

    .scan-info {

        display: flex;

        align-items: flex-start;

        gap: 12px;

        padding: 15px;

        margin-bottom: 20px;

        background: #f8f9fa;

        border-radius: 10px;

    }


    .scan-info > i {

        font-size: 24px;

        color: #0d6efd;

        flex-shrink: 0;

    }


    .scan-info strong {

        display: block;

        margin-bottom: 3px;

    }


    .scan-info p {

        font-size: 13px;

    }


    /* =====================================================
       SCANNER
    ====================================================== */

    .scanner-wrapper {

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

    }


    #reader {

        width: 100%;

        max-width: 500px;

        margin: 0 auto;

    }


    /* =====================================================
       VIDEO KAMERA
    ====================================================== */

    #reader video {

        width: 100% !important;

        height: auto !important;

        border-radius: 10px;

    }


    /* =====================================================
       AREA SCAN
    ====================================================== */

    #reader__scan_region {

        width: 100% !important;

        border-radius: 10px;

    }


    /* =====================================================
       DASHBOARD HTML5 QR
    ====================================================== */

    #reader__dashboard {

        padding: 10px !important;

    }


    #reader__dashboard_section {

        padding: 5px !important;

    }


    #reader__dashboard_section_csr {

        text-align: center;

    }


    /* =====================================================
       BUTTON
    ====================================================== */

    #reader button {

        border: none;

        border-radius: 7px;

        padding: 8px 15px;

        margin: 5px;

        background: #0d6efd;

        color: white;

        cursor: pointer;

    }


    #reader button:hover {

        background: #0b5ed7;

    }


    /* =====================================================
       SELECT CAMERA
    ====================================================== */

    #reader select {

        max-width: 100%;

        padding: 8px;

        border: 1px solid #ced4da;

        border-radius: 7px;

    }


    /* =====================================================
       PETUNJUK
    ====================================================== */

    .scan-help {

        margin-top: 20px;

        padding: 12px;

        text-align: center;

        font-size: 13px;

        color: #6c757d;

        background: #f8f9fa;

        border-radius: 8px;

    }


    /* =====================================================
       STATUS
    ====================================================== */

    #scan-status {

        font-size: 13px;

    }


    /* =====================================================
       TABLET
    ====================================================== */

    @media (max-width: 767.98px) {

        .scan-header h3 {

            font-size: 21px;

        }


        .scan-header p {

            font-size: 13px;

        }


        .scan-card {

            max-width: 100%;

        }


        .scan-card .card-body {

            padding: 15px;

        }


        #reader {

            max-width: 100%;

        }

    }


    /* =====================================================
       HP
    ====================================================== */

    @media (max-width: 575.98px) {

        .scan-header {

            margin-bottom: 15px;

        }


        .scan-header h3 {

            font-size: 19px;

        }


        .scan-header p {

            font-size: 12px;

        }


        .scan-info {

            padding: 12px;

            gap: 10px;

        }


        .scan-info > i {

            font-size: 21px;

        }


        .scan-info p {

            font-size: 12px;

        }


        .scan-card .card-body {

            padding: 10px;

        }


        #reader {

            max-width: 100%;

        }


        .scan-help {

            font-size: 12px;

            margin-top: 15px;

        }

    }


    /* =====================================================
       HP SANGAT KECIL
    ====================================================== */

    @media (max-width: 400px) {

        .scan-header h3 {

            font-size: 18px;

        }


        .scan-info {

            align-items: center;

        }


        .scan-info p {

            display: none;

        }

    }

</style>

@endpush



{{-- =====================================================
     JAVASCRIPT QR CODE
====================================================== --}}

@push('scripts')

{{-- LIBRARY HTML5 QR CODE --}}

<script src="https://unpkg.com/html5-qrcode"></script>


<script>

document.addEventListener('DOMContentLoaded', function () {


    console.log('Halaman scan siap.');


    const reader = document.getElementById('reader');

    const status = document.getElementById('scan-status');


    if (!reader) {

        console.error('Element #reader tidak ditemukan.');

        return;

    }


    /*
     * Pastikan library berhasil dimuat
     */

    if (typeof Html5QrcodeScanner === 'undefined') {

        console.error(
            'Html5QrcodeScanner tidak ditemukan.'
        );


        status.innerHTML = `

            <span class="text-danger">

                <i class="bi bi-exclamation-triangle me-1"></i>

                Library QR Code gagal dimuat.

                Periksa koneksi internet.

            </span>

        `;

        return;

    }


    console.log(
        'Library HTML5 QR Code berhasil dimuat.'
    );


    /*
     * Jika QR berhasil dibaca
     */

    function suksesScan(decodedText, decodedResult) {


        console.log(
            'QR berhasil dibaca:',
            decodedText
        );


        status.innerHTML = `

            <span class="text-success">

                <i class="bi bi-check-circle me-1"></i>

                QR Code berhasil dibaca.

            </span>

        `;


        /*
         * QR Code yang Anda buat sebelumnya:
         *
         * QrCode::generate(
         *     route('aset.show', $item->id)
         * )
         *
         * Jadi isi QR adalah URL detail aset.
         */


        if (

            decodedText.startsWith('http://') ||

            decodedText.startsWith('https://')

        ) {


            window.location.href = decodedText;


        } else {


            /*
             * Jika suatu saat QR berisi
             * kode aset seperti AST-001
             */

            window.location.href =
                "{{ url('/scan') }}/" +
                encodeURIComponent(decodedText);

        }

    }


    /*
     * Ketika belum menemukan QR
     */

    function gagalScan(errorMessage) {

        /*
         * Tidak perlu menampilkan error
         * karena fungsi ini dipanggil terus
         * selama kamera mencari QR.
         */

        console.log(
            'Mencari QR Code...'
        );

    }


    try {


        /*
         * Membuat scanner
         */

        const scanner = new Html5QrcodeScanner(

            "reader",

            {

                fps: 10,

                qrbox: {

                    width: 250,

                    height: 250

                },

                rememberLastUsedCamera: true,

                showTorchButtonIfSupported: true,

                showZoomSliderIfSupported: true

            },

            false

        );


        /*
         * Jalankan scanner
         */

        scanner.render(

            suksesScan,

            gagalScan

        );


        status.innerHTML = `

            <span class="text-primary">

                <i class="bi bi-camera me-1"></i>

                Kamera siap. Arahkan kamera
                ke QR Code aset.

            </span>

        `;


    } catch (error) {


        console.error(
            'Scanner error:',
            error
        );


        status.innerHTML = `

            <div class="alert alert-danger">

                <i class="bi bi-camera-video-off me-2"></i>

                Kamera tidak dapat dijalankan.

                Silakan periksa izin kamera browser.

            </div>

        `;

    }


});

</script>

@endpush

@endsection