@extends('layouts.backend.main')

@section('contents')
    <div class="row justify-content-center">
        <div class="col col-md-6">
            <div class="card shadow-none border-0">
                <div id="qr-reader" class="w-100 border-0"></div>
                <div id="qr-reader-results"></div>
            </div>
        </div>
    </div>
@endsection

@section('headers')
    <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
        <div class="container-fluid px-4">
            <div class="page-header-content">
                <div class="row align-items-center justify-content-between pt-3">
                    <div class="col-auto mb-3">
                        <h1 class="page-header-title">
                            {{ $title }}
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </header>
@endsection


@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ asset('assets/vendor/html5-qrcode/html5-qrcode.min.js') }}" type="text/javascript"></script>
    <script>
        (() => {
            'use strict'

            document.querySelector('body').classList.add('sidenav-toggled')

            const docReady = ((fn) => {
                if (document.readyState === "complete" || document.readyState === "interactive")
                    setTimeout(fn, 1)
                else
                    document.addEventListener("DOMContentLoaded", fn)
            })

            docReady(function() {
                var resultContainer = document.getElementById('qr-reader-results')
                var lastResult, countResults = 0

                function onScanSuccess(decodedText, decodedResult) {
                    if (decodedText !== lastResult) {
                        ++countResults
                        lastResult = decodedText
                        console.log(`Scan result ${decodedText}`, decodedResult)
                        const xhr = new XMLHttpRequest()
                        xhr.open("POST", '{{ route('checkin.action') }}', true)
                        xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8')
                        xhr.send(
                            JSON.stringify({
                                code: decodedText,
                                _token: "{{ csrf_token() }}"
                            })
                        )
                        xhr.onload = function(e) {
                            if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
                                var response = JSON.parse(xhr.responseText);
                                // console.log(response);
                                if (response.success == true) {
                                    Swal.fire({
                                        icon: "success",
                                        title: "Welcome " + response.name,
                                        timer: 2000,
                                        showConfirmButton: false,
                                    });
                                }
                            }
                        }

                    }
                }

                var html5QrcodeScanner = new Html5QrcodeScanner(
                    "qr-reader", {
                        fps: 10,
                        qrbox: 250
                    });
                html5QrcodeScanner.render(onScanSuccess)
            })
        })();
    </script>
@endpush
@push('styles')
    <style>
        #html5-qrcode-anchor-scan-type-change {
            display: none !important;
        }

        #html5-qrcode-button-camera-start,
        #html5-qrcode-button-camera-stop,
        #html5-qrcode-button-camera-permission {
            border: 1px #f2f6fc solid;
            background: #f2f6fc;
            border-radius: 0.26em;
            padding: 0.5em 1em;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        #html5-qrcode-button-camera-start,
        #html5-qrcode-button-camera-stop:hover,
        #html5-qrcode-button-camera-permission:hover {
            background: #ced1d6;
        }
    </style>
@endpush