@extends('layouts/frontend/layoutFrontend')

@section('title', 'Skeniranje')

@section('page-style')
<!-- Page -->
<link
    href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap"
    rel="stylesheet">
<link
    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
    rel="stylesheet">
<link rel="stylesheet" href="{{asset('assets/vendor/frontend/css/all.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/frontend/css/slick.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/frontend/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/frontend/css/style.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/frontend/css/style.css')}}">

@endsection

@section('page-script')
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{asset('assets/vendor/frontend/js/jquery.min.js')}}"></script>
<script src="{{asset('assets/vendor/frontend/js/slick.min.js')}}"></script>
<script src="{{asset('assets/vendor/frontend/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('assets/vendor/frontend/js/modal.js')}}"></script>
<script src="{{asset('assets/vendor/frontend/js/custom.js')}}"></script>
<script src="{{asset('assets/vendor/frontend/js/skener.js')}}"></script>
@endsection


@section('content')

<div class="site-content">
    <!-- Preloader start -->
    <div class="loader-mask">
        <div class="loader">
        </div>
    </div>
    <!-- Preloader end -->
    <input type="text" id="id_korisnik" value="{{ Auth::user()->id }}" hidden>
    @csrf
    <!-- Homescreen content start -->
    <section id="homescreen">
        <div id="qr-reader" style="width:100%"></div>
    </section>
    <style>
    #html5qr-code-full-region {
        img[alt="Info icon"] {
            display: none;
        }
    }

    #html5-qrcode-button-camera-permission {
        text-indent: -9999px;
        line-height: 0;
        margin-bottom: 10px;
    }

    #html5-qrcode-button-camera-permission:after {
        content: "Klikni za početak skeniranja";
        text-indent: 0;
        display: block;
        line-height: initial;
    }

    #html5-qrcode-button-camera-permission {
        background-color: #685dd8;
        /* Plava boja */
        color: white;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 12px;
        border: none;
    }

    #html5-qrcode-button-camera-permission:hover {
        background-color: #0056b3;
        /* Tamnija plava boja na hover */
    }


    #html5-qrcode-anchor-scan-type-change {
        font-size: 0;
    }

    #html5-qrcode-anchor-scan-type-change:after {
        font-size: 1rem;
        content: "Promjeni vrstu skeniranja";
        cursor: pointer;
    }

    #html5-qrcode-button-file-selection {
        text-indent: -9999px;
        line-height: 0;
        margin-bottom: 0 !important;
    }

    #html5-qrcode-button-file-selection:after {
        content: "Odaberi datoteku";
        text-indent: 0;
        display: block;
        line-height: initial;
    }

    #html5qr-code-full-region__dashboard_section {
        div:first-of-type {
            div:last-of-type {
                div {
                    text-indent: -9999px;
                    line-height: 0;
                }

                div:after {
                    content: "Možete povući i spustiti fotografiju.";
                    text-indent: 0;
                    display: block;
                    line-height: initial;
                }
            }
        }
    }

    #html5qr-code-full-region__header_message {
        text-indent: -9999px;
        line-height: 0;
    }

    #html5qr-code-full-region__header_message:after {
        content: "QR kod nije moguće pročitati na prenesenoj fotografiji";
        text-indent: 0;
        display: block;
        line-height: initial;
    }
    </style>
    <div class="dark-overlay"></div>
    @endsection