@extends('layouts.base')

@section('title', 'Starter Page')

@section('css')
    {{-- include page's specific styles here  --}}
@endsection

@section('content')
    <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: 700px; 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')
    {{-- include page's specific scripts here --}}
    <script type="text/javascript" src="{{ asset('dist/js/filereader.js') }}"></script>
    <script type="text/javascript" src="{{ asset('dist/js/qrcodelib.js') }}"></script>
    <script type="text/javascript" src="{{ asset('dist/js/webcodecamjs.js') }}"></script>
    <script type="text/javascript" src="{{ asset('dist/js/webcam.js') }}"></script>
    @if (Session::get('error'))
        <script>
            window.close();
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                html: "<p>AUTHENTIFICATION ECHEC. LE CODE <font = color=\"blue\">{{ Session::get('code') }}</font> N'EXISTE PAS DANS LA BASE.</p>"
            });
        </script>
    @endif
@endsection