@extends('layouts.template')
@section('nom', ' VALIDATION DINSCRIPTION')
@section('name', 'Validation d\'inscription')
@section('bottom-header')
    @include('partials.bottom-header')
@endsection

@section('css')
    <link href="{{ asset('assets/libs/jquery-steps/jquery.steps.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/extra-libs/sweetalert2/dist/sweetalert2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/animate.min.css') }}" rel="stylesheet">

    <style>
        .animate__animated.animate__heartBeat {
            --animate-duration: 5s;
        }
    </style>
    
@endsection
@section('contenu')

<div class="card mx-auto mt-5" style="width: 80%;">
    <ul class="list-group list-group-flush ">
        <li class="list-group-item pb-4 pt-4 d-flex justify-content-between me-0 pe-0" style="color: {{ session('couleurText1')}}; background-color: {{ session('etablissementCouleur1')}}">
                <h3 class="mt-2">gestStudentQrcode</h3>
                <div  class="row  pb-1 mt-0 g-0 align-items-end justify-content-md-end ms-auto ">
                    <div class="col-md-4 col-12 col me-5 ">
                        <select id="camera-select" class="form-control">
                            <option value="">camera 1(facing: unknown)</option>
                        </select>
                    </div>
                    <div class="col-md-3  col-12   ms-auto">
                        <input type="text" name="" id="image-url" placeholder="URL de l'image" class="form-control align">
                    </div>
                    <div class="col-md-4 col-12 col fs-7 ms-auto">
                        <button title="Decode Image" class="btn btn-secondary btn-sm" id="chargeFile" type="button" data-toggle="tooltip"><span class="mdi mdi-upload"></span></button>
                        <button title="Image shoot" class="btn btn-info btn-sm disabled" id="shoot" type="button" data-toggle="tooltip"><span class="mdi mdi-file-image"></span></button>
                        <button title="Play" class="btn btn-success btn-sm animate__animated animate__heartBeat" id="play" type="button" data-toggle="tooltip"><span class="mdi mdi-play"></span></button>
                        <button title="Pause" class="btn btn-warning btn-sm" id="pause" type="button" data-toggle="tooltip"><span class="mdi mdi-pause"></span></button>
                        <button title="Stop streams" class="btn btn-danger btn-sm" id="stop" type="button" data-toggle="tooltip"><span class="mdi mdi-stop"></span></button>
                    </div>
                </div>
        </li>
        <li class="list-group-item justify-content-md-center">
            <div class="card-body text-center" style="height: 700px; padding: 25px;">
                <div class="row">
                    <div class="col-md-6" >
                        <div class="well" style="position: relative;display: inline-block;">
                            <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="well mb-5" style="width: 100%;">
                            <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" style="text-align: center;">
                        <div id="result" class="thumbnail">
                            <div class="well mb-5" style="position: relative;display: inline-block;">
                                <img id="scanned-img" src="" width="310" height="240">
                            </div>
                            <div class="caption">
                                <h3>Valeur QRCode : </h3>
                                <p id="scanned-QR"><span style="text-decoration:underline;color:#FF0000">Aucune lecture!!!</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>


<form id="form-code" action="{{ route('val_auto_suite') }}" method="POST" style="display: none">
    @csrf
    <input type="text" id="mycode" name="moncodeqr" target="_blank">
</form>
@endsection

@section('script')
    <script type="text/javascript">
        $("nav > ul > li:last-child").addClass("selected");
    </script>
    {{-- <script src="{{ asset('assets/libs/jquery/dist/jquery.min.js') }}"></script> --}}
    <script src=" {{asset('js/filereader.js')}} "></script>
    <script src=" {{asset('js/qrcodelib.js')}} "></script>
    <script src=" {{asset('js/webcodecamjs.js')}} "></script>
    <script src=" {{asset('js/webcam.js')}} "></script>
    {{-- <script src=" {{asset('js/main.js')}} "></script> --}}
@endsection