@extends('layouts.user')
@section('pageTitle')
    Qr işlemleri
@endsection
@section('content')
    @if (session('error'))
        @include('components.error-modal')
    @endif
    @if (session('success'))
        @include('components.success-modal')
    @endif
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
    <div class="container-user">
        <div class="flex flex-col justify-center">
            <div class="grid grid-cols-2 gap-4">
                {{-- <button id="start" onclick="startScan()" class="button-2 text-gray-300 mt-4">Kamera Aç</button>
                <button id="stop" onclick="stopScan()" class="button-2 text-gray-300 mt-4">Kamera Kapat</button> --}}
                <form id="loginForm" action="{{ route('user.scan-qr-login') }}" method="POST" class="flex flex-col" onsubmit="showLoading()">
                    @csrf
                    <button id="entry" class="button-2 text-gray-300  mt-4">Giriş Yap</button>
                    <input type="text" class="hidden" name="location_id" id="location_id_login">
                </form>
                <form action="{{ route('user.scan-qr-logout') }}" method="POST" class="flex flex-col" onsubmit="showLoading()">
                    @csrf
                    <button id="exit" onclick="stopScan()" class="button-2 text-gray-300 mt-4 ">Çıkış Yap</button>

                    <input type="text" class="hidden" name="location_id" id="location_id_logout">
                </form>
            </div>
            <div class="flex justify-center items-center mt-8">
                <div id="qr-reader">
                    <video id="video" class="w-full rounded-2xl mb-6" autoplay></video>
                </div>
                <span id="qr-content"></span>
            </div>
        </div>
    </div>
@endsection
@section('javascript')
    <script src="https://cdn.rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
    <script>
        let scanner; // Scanner nesnesini global olarak tanımlıyoruz

        // $(document).ready(function() {
        //     const qrReader = document.getElementById('qr-reader');
        //     const qrContent = document.getElementById('qr-content');
        //     const video = document.getElementById('video');

        //     Instascan.Camera.getCameras()
        //         .then(function(cameras) {
        //             if (cameras.length > 0) {
        //                 const backCamera = cameras.find(camera => camera.name.includes('back')) || cameras[0];

        //                 const selectedCamera = backCamera;

        //                 const scanner = new Instascan.Scanner({
        //                     video: video
        //                 });

        //                 scanner.addListener('scan', function(content) {
        //                     $('#stop').click();
        //                     $('#location_id_login').val(content);
        //                     $('#location_id_logout').val(content);

        //                     // $('#loginForm').submit();
        //                 });

        //                 console.log("Cameras", cameras);
        //                 scanner.start(selectedCamera);
        //             } else {
        //                 console.error('Kamera bulunamadı.');
        //             }
        //         })
        //         .catch(function(e) {
        //             console.error(e);
        //         });
        // });

        let capture;
        let video;

        function setup() {
            createCanvas(displayWidth, displayHeight);

            // Video capture öğesini oluştur
            video = createCapture({
                audio: false,
                video: {
                facingMode: {
                    exact: "environment"
                }
                }
            });

            video.size(displayWidth, displayHeight);
            video.hide(); // Video öğesini gizle
        }

        function draw() {
            background(255);

            // Videoyu canvas'a çiz
            image(video, 0, 0, displayWidth, displayHeight);

            // Canvas üzerindeki görüntüyü al ve QR kodu okuma işlemini gerçekleştir
            loadPixels();
            const code = jsQR(pixels, video.width, video.height);

            if (code) {
                console.log("QR Kodu İçeriği:", code.data);
            }
        }



        function stopScan() {
            const qrReader = document.getElementById('qr-reader');
            qrReader.style.display = 'none'; // Kamera kapatıldığında gizle
            if (scanner) {
                scanner.stop(); // Scanner'ı durdur
            }
        }
    </script>

    <!-- qr genertor scripts -->
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"
        integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.js"
        integrity="sha512-is1ls2rgwpFZyixqKFEExPHVUUL+pPkBEPw47s/6NDQ4n1m6T/ySeDW3p54jp45z2EJ0RSOgilqee1WhtelXfA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript">
        function generateQRCode(id) {
            var qr = new QRCode(document.getElementById("qrcode"), {
                width: 200,
                height: 200,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
            qr.makeCode('[{ "id" => "' + id +
                '" }]');
            document.getElementById("qrcode").style.display = "block";
        }
    </script> --}}
@endsection