@extends('layouts.user')
@section('pageTitle')
    Qr işlemleri
@endsection
@section('content')
    <div class="w-full pt-2 overflow-y-auto h-[calc(100vh-150px)]">
        <div class="flex flex-col justify-center px-6 sm:px-12">
            <div class="grid grid-cols-2 gap-4 mt-2">
                <div class="flex justify-center items-center">
                    <button id="entry"
                        class="inline-flex flex-col items-center justify-center gap-2 text-white rounded-full border-2 border-teheme_third_black bg-theme_secondary_black/90 focus:outline-none font-medium text-sm p-2 w-[100px] h-[96px] text-center me-2 mb-2"
                        onclick="startcam('loginForm', 'location_id_login')">
                        <img class="w-10" src="{{ asset('assets/cikis2.svg') }}" alt="">
                        Giriş Yap
                    </button>
                </div>
                <div class="flex justify-center items-center">
                    <button id="exit" onclick="startcam('exitForm', 'location_id_logout')"
                        class="inline-flex flex-col items-center justify-center gap-2 text-white rounded-full border-2 border-teheme_third_black bg-theme_secondary_black/90 focus:outline-none font-medium text-sm p-2 w-[100px] h-[96px] text-center me-2 mb-2">
                        <img class="w-10" src="{{ asset('assets/giris2.svg') }}" alt="">
                        Çıkış Yap
                    </button>
                </div>
                <div class="mt-2 col-span-2">
                    <p class="text-sm text-gray-400">
                        <i class="fa-solid fa-circle-info mr-1 text-lg text-red-700"></i>
                        İşe giriş ve çıkışlarınızda QR kodu okutmayı unutmayınız.
                    </p>
                    <p class="text-sm text-gray-400 mt-2">
                        <i class="fa-solid fa-circle-info mr-1 text-lg text-red-700"></i>
                        Qr kodlarınızı okutabilmeniz için kamera erişim izninizi vermeyi unutmayınız.
                    </p>
                </div>
                <form id="loginForm" action="{{ route('user.scan-qr-login') }}" method="POST" class="flex flex-col"
                    onsubmit="showLoading()">
                    @csrf
                    <input type="text" class="hidden" name="location_id" id="location_id_login">
                </form>
                <form id="exitForm" action="{{ route('user.scan-qr-logout') }}" method="POST" class="flex flex-col"
                    onsubmit="showLoading()">
                    @csrf
                    <input type="text" class="hidden" name="location_id" id="location_id_logout">
                </form>
            </div>
            <div class="flex justify-center items-center mt-2 p-6">
                <div id="qr-reader">
                    <video id="video" class="w-full max-w-sm rounded-2xl mb-6" autoplay></video>
                </div>
                <span id="qr-content"></span>
            </div>
        </div>
    </div>
    @if (session('error'))
        <x-toast color="red-700">
            <x-slot name="message">
                {{ session('error') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-exclamation"></i>
            </x-slot>
        </x-toast>
    @endif
    @if (session('success'))
        <x-toast color="green-700">
            <x-slot name="message">
                {{ session('success') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-check"></i>
            </x-slot>
        </x-toast>
    @endif
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
@endsection
@section('javascript')
    <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
    <script>
        function startcam(formId, locationId) {
            var video = document.getElementById('video');
            var mediaConfig = {
                video: {
                    facingMode: 'environment'
                }
            };

            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia(mediaConfig)
                    .then(function(stream) {
                        video.srcObject = stream;
                        video.play();
                        scanQRCode(formId, locationId);
                    })
                    .catch(function(err) {
                        console.log('An error has occurred!', err);
                    });
            } else if (navigator.getUserMedia) {
                navigator.getUserMedia(mediaConfig, function(stream) {
                    video.srcObject = stream;
                    video.play();
                    scanQRCode(formId, locationId);
                }, errBack);
            } else if (navigator.webkitGetUserMedia) {
                navigator.webkitGetUserMedia(mediaConfig, function(stream) {
                    video.srcObject = stream;
                    video.play();
                    scanQRCode(formId, locationId);
                }, errBack);
            } else if (navigator.mozGetUserMedia) {
                navigator.mozGetUserMedia(mediaConfig, function(stream) {
                    video.srcObject = stream;
                    video.play();
                    scanQRCode(formId, locationId);
                }, errBack);
            }

            function scanQRCode(formId, locationId) {
                var scanning = true;

                video.addEventListener('loadeddata', function() {
                    setInterval(function() {
                        if (scanning) {
                            var canvas = document.createElement('canvas');
                            canvas.width = video.videoWidth;
                            canvas.height = video.videoHeight;
                            var context = canvas.getContext('2d');
                            context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

                            var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
                            var code = jsQR(imageData.data, canvas.width, canvas.height);

                            if (code) {
                                $('#' + locationId).val(code.data);
                                $('#' + formId).submit();
                                scanning = false;
                            }
                        }
                    }, 1000); // Her saniyede bir QR kodu tara
                });
            }
        }
    </script>
@endsection