@extends('layout.template')

@section('title', 'GestStudent')
{{-- @section('sidebar')
    <aside class="left-sidebar">

        <div class="scroll-sidebar">

            <nav class="sidebar-nav">
                <ul id="sidebarnav" class="in" style="background-color: {{ session('etablissementCouleur1') }};">

                    <li class="sidebar-item ">
                        <a class="sidebar-link waves-effect " href="{{ route('home') }}" aria-expanded="false">
                            <i class="mdi mdi-av-timer"></i>
                            <span class="hide-menu">Home </span>
                        </a>
                    </li>
                    <li class="sidebar-item focus"> <a class="sidebar-link focus waves-effect waves-dark"
                            href="{{ route('form.auto') }}" aria-expanded="false" style="color:white;"><i
                                class="ti-archive fa-fw"></i><span class="hide-menu">Facturation automatique</span></a>
                    </li>
                </ul>
            </nav>
            <!-- End Sidebar navigation -->
        </div>
        <!-- End Sidebar scroll-->
    </aside>
@endsection --}}

@section('title2')

@endsection

@section('subtitle')
    Facturation automatique
@endsection


@section('main')

    <div class="page-content container-fluid">

        <div class="card" style="width: 90%;margin: auto; margin-top:2%;margin-bottom:10%;">
            <div class="card-header bg-info p-4" style="color: white;">
                <div class="navbar-form navbar-left">
                    <h4 style="color: #313131">gestStudentQrcode</h4>
                </div>
                <div class="navbar-form navbar-right">
                    <select name="" id="camera-select" class="form-select camera-select"></select>
                    <div class="form-group right">
                        <input type="text" name="" id="image-url" placeholder="URL de l'image"
                            class="form-control align">
                        <div class="buton">
                            <button type="button" class="btn btn-secondary btn-sm " id="chargeFile"> <span
                                    class="mdi mdi-upload" data-bs-toggle="tooltip" data-bs-placement="top"
                                    title="Decode image"></span> </button>
                            <button type="button" class="btn btn-info btn-sm" id="shoot" disabled> <span
                                    class="mdi mdi-file-image" data-bs-toggle="tooltip" data-bs-placement="top"
                                    title="Image shoot"></span> </button>
                            <button type="button" class="btn btn-success btn-sm " id="play"> <span
                                    class=" mdi mdi-play" data-bs-toggle="tooltip" data-bs-placement="top"
                                    title="Play"></span> </button>
                            <button type="button" class="btn btn-warning btn-sm " id="pause"> <span
                                    class="mdi mdi-pause" data-bs-toggle="tooltip" data-bs-placement="top"
                                    title="Pause"></span> </button>
                            <button type="button" class="btn btn-danger btn-sm " id="stop"> <span class="mdi mdi-stop"
                                    data-bs-toggle="tooltip" data-bs-placement="top" title="Stop"></span> </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body text-center" style="height: 100%; padding: 25px;">
                <div class="row">
                    <div class="col-md-6 col">
                        <div class="well" style="position: relative;">
                            <canvas width="320" height="240" id="webcodecam-canvas"></canvas>
                            <div class="scanner-laser laser-rightBottom" style="opacity: 0.5;"></div>
                            <div class="scanner-laser laser-rightTop" style="opacity: 0.5;"></div>
                            <div class="scanner-laser laser-leftBottom" style="opacity: 0.5;"></div>
                            <div class="scanner-laser laser-leftTop" style="opacity: 0.5;"></div>
                        </div>
                        <div class="well2">
                            <div class="reglage">
                                <div class="lab text-center fw-bold">
                                    <label id="zoom-value" width="100">Zoom: <span>2</span></label>
                                </div>
                                <div class="inp">
                                    <input id="zoom" type="range" onchange="Page.changeZoom();" min="10"
                                        max="30" value="20">
                                </div>
                                <div class="lab text-center fw-bold">
                                    <label id="brightness-value"" width="100">Brightness: <span>0</span></label>
                                </div>
                                <div class="inp">
                                    <input id="brightness"" type="range" onchange="Page.changeBrightness();"
                                        min="10" max="30" value="20">
                                </div>
                                <div class="lab text-center fw-bold">
                                    <label id="contrast-value" width="100">Contrast: <span>0</span></label>
                                </div>
                                <div class="inp">
                                    <input id="contrast" type="range" onchange="Page.changeContrast();"
                                        min="10" max="30" value="20">
                                </div>
                                <div class="lab text-center fw-bold">
                                    <label id="threshold-value" width="100">Threshold: <span>0</span></label>
                                </div>
                                <div class="inp">
                                    <input id="threshold" type="range" onchange="Page.changeThreshold();"
                                        min="10" max="30" value="20">
                                </div>
                                <div class="text-center">
                                    <label id="sharpness-value" width="100">Sharpness: <span>off</span> </label>
                                    <input id="sharpness" type="checkbox" onchange="Page.changeSharpness();">
                                    <label id="grayscale-value" width="100">grayscale: <span>off</span></label>
                                    <input id="grayscale" type="checkbox" onchange="Page.changeGrayscale();">
                                </div>
                                <div class="text-center">
                                    <label id="flipVertical-value" width="100">Flip Vertical: <span>off</span> </label>
                                    <input id="flipVertical" type="checkbox" onchange="Page.changeVertical();">
                                    <label id="flipHorizontal-value" width="100">Flip Horizontal:
                                        <span>off</span></label>
                                    <input id="flipHorizontal" type="checkbox" onchange="Page.changeHorizontal();">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col">
                        <div class="thumbnail2">
                            <div class="well">
                                <img src="" alt="" width="320" height="240;" id="scanned-img">
                            </div>
                            <div class="caption">
                                <h3>Valeur QRCode</h3>
                                <p id="scanned-QR">
                                    <span style="text-decoration:underline;color:#FF0000">Aucune lecture!!!</span>
                                </p>
                                <a href="code" id="code" style="display: none;"></a>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
@endsection

@section('script')
    @if (Session::has('error'))
        <script type="text/javascript">
            Swal.fire({
                icon: 'error',
                title: 'Une erreur s\'est produite!!!',
                text: "{{ Session::get('error') }}",
                footer: ''
            })
        </script>
        @php
            Session::forget('error');
        @endphp
    @endif
    <script>
        let requeste = async (argument) => {
            document.getElementById('code').href = "{{ url('/') }}/facturation_auto/" + argument;
            document.getElementById('code').click();
        }
    </script>
    <script type="text/javascript" src="dist/js/filereader.js"></script>
    <script type="text/javascript" src="dist/js/qrcodelib.js"></script>
    <script type="text/javascript" src="dist/js/webcodecamjs.js"></script>
    <script type="text/javascript" src="dist/js/webcam.js"></script>

@endsection