@extends('layouts.master')
@section('title', 'İşletmelerde Beceri Eğitimi Evrak Kontrol')

@push('script-link')
    <script type="text/javascript" src="{{ asset('qr-code/html5-qrcode.min.js') }}"></script>
@endpush

@section('content')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        @include('imepages.menu')
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item active">Kare Kod ile Evrak Kontrol</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <div class="col-md-12">
            <div class="card ">
                <div class="card-header">

                    <div class="row">                      
                         <div class="col-md-8 col-sm-8 col-xs-12 mt-1">
                            <h5 class="m-0 font-weight-bold text-danger" id="hata"></h5>
                            <h5 class="m-0 font-weight-bold text-info" id="dogru">Qr Kod ile Kontrol</h5>
                        </div>
                        @include('imepages.evrakkontrolbtn')
                    </div>

                </div>
                <div class="card-body col-md-12 ">                   
                    {{-- <div class="col-md-6 offset-md-3 text-center alert alert-transparent" style="font-size:20px;font-style:bold;" role="alert">
                       
                   </div> --}}
                    <div class="rounded shadow-sm border border-white" style="width:45vh;margin:auto;" id="reader"></div>
                   

                </div>
            </div>
        </div>

    </div>
@endsection

@section('js')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="{{ asset('qr-code/qrcode.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    @stack('script-link')

    <style>
        #qrcode img {
            display: inline !important;
        }
        span{
            font-weight: bold;
        }
        #reader__camera_selection{
            margin-bottom: 1em;
  padding: .25em;
  border: 0;
  margin-top: 5px;
  border-bottom: 1px solid currentcolor; 
  font-weight: normal;
  letter-spacing: .10em;
  border-radius: 0;
  &:focus, &:active {
    outline: 0;
    border-bottom-color: red;
  }
        }
        button {
            margin-bottom: 10px;
            background-color: rgb(80, 80, 201);
            color: white;
            border-radius: 1px;
            width:180px;
            height:50px;
            margin-top:10px;
            border: none;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        button:hover {
            background-color: #200f77
        }

        button:active {
            background-color: #06438dea;

            transform: translateY(2px);
        }
    </style>
    <script>
        let html5QrcodeScanner = new Html5QrcodeScanner("reader", {
            fps: 10,
            qrbox: 250
        });

        function onScanSuccess(qrCodeToken) {
            var hata = document.getElementById("hata");
            hata.innerHTML = '';
            var dogru = document.getElementById("dogru");
            dogru.innerHTML = '';
            axios.post('{{ route('qrcodesonuc') }}', {
                    kod: qrCodeToken
                })
                .then(function(response) {
                    console.log(response);
                    dogru.innerHTML = generateSuccessHTMLOutput(response);

                    // location.href = '{{ route('qrcode') }}'
                })
                .catch(function(error) {
                    console.log(error);
                    hata.innerHTML = generateErrorHTMLOutput(error);

                });

        }

        html5QrcodeScanner.render(onScanSuccess);


        function generateSuccessHTMLOutput(response) {
           return 'Bilgilendirme: '+ response.data.message ;
         }

        function generateErrorHTMLOutput(error) {
           
             return  'Bilgilendirme: ' + error.response.data.message ;
        }

        // function generateSuccessHTMLOutput(response) {
        //     return '<h4>Result</h4>' +
        //      '<h5>Status:</h5> ' +
        //         '<pre>' + response.status + ' ' + response.statusText + '</pre>' +
        //         '<h5>Headers:</h5>' +
        //      '<pre>' + JSON.stringify(response.headers, null, '\t') + '</pre>' +
        //      '<h5>Data:</h5>' +
        //         '<pre>' + JSON.stringify(response.data, null, '\t') + '</pre>';
        //  }

        // function generateErrorHTMLOutput(error) {
        //     return '<h4>Result</h4>' +
        //         '<h5>Message:</h5> ' +
        //         '<pre>' + error.message + '</pre>' +
        //         '<h5>Status:</h5> ' +
        //         '<pre>' + error.response.status + ' ' + error.response.statusText + '</pre>' +
        //         '<h5>Headers:</h5>' +
        //         '<pre>' + JSON.stringify(error.response.headers, null, '\t') + '</pre>' +
        //         '<h5>Data:</h5>' +
        //         '<pre>' + JSON.stringify(error.response.data, null, '\t') + '</pre>';
        // }
    </script>
@endsection
@section('css')

@endsection