@extends('layouts.home_layout')
@php
    $pageTitle = "Cattle Tag Scanner";
@endphp
@section('title', $pageTitle)

@section('style')
    <link rel="stylesheet" href="{{ asset('app-assets/css/select2.min.css') }}" >
@endsection

@section('content')
    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
                    <h3 class="content-header-title mb-0 d-inline-block">{{$pageTitle}}</h3>
                    {{-- <div class="row breadcrumbs-top d-inline-block">
                        <div class="breadcrumb-wrapper col-12">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                                <li class="breadcrumb-item active">Animation</li>
                            </ol>
                        </div>
                    </div> --}}
                </div>
				{{-- <div class="content-header-right col-md-6 col-12">
					<div class="dropdown float-md-right">
                        @if (is_permit('feed_s'))
						    <button class="btn btn-danger round btn-glow px-2 mb-1" id="" type="button" data-toggle="modal" data-target="#modal">Add New</button>
                        @endif
					</div>
				</div> --}}
            </div>
            <div class="content-body">
				@include('common.alert_msg')
                <!-- Button animation start -->
                <section id="btnAnimation" class="btnAnimation">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Scanner</h4>
                                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                                    <div class="heading-elements">
                                        <ul class="list-inline mb-0">
                                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card-content collapse show">
                                    <div class="card-body">
                                        <div id="reader" class="m-auto" style="width:600px;"></div>
                                        {{-- <div id="reader" style="height:300px;"></div> --}}
                                        {{-- <div id="reader" ></div> --}}
                                        {{-- <video id="preview"></video> --}}
                                        <div class="insertForm">
                                            
                                            <div class="row">
                                                <div class="col-sm-12 col-md-4">
                                                    <input type="hidden" class="form-control" id="row_id" name="row_id">
                                                    <div class="form-group">
                                                        <label for="qr_code" class="col-form-label">QR Code <span class="red">*</span></label>
                                                        <input type="text" class="form-control keyup_input" id="qr_code" name="qr_code">
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-4">
                                                    <div class="form-group">
                                                        <label for="readable_code" class="col-form-label">Tag Number <span class="red">*</span></label>
                                                        <input type="text" class="form-control keyup_input" id="readable_code" name="readable_code">
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-4">
                                                    <div class="form-group">
                                                        <label for="" class="col-form-label">&nbsp;</label>
                                                        <div class="row text-center">
                                                            @if (is_permit('tagReader_s'))
                                                                <button type="button" class="btn btn-primary saveBtn" id="saveBtn" title="Click Enter" onclick="saveScanData();" >Save</button>&nbsp;
                                                                <button type="button" class="btn btn-secondary" id="resetBtn" title="Click Esc" onclick="resetScanData();">Reset</button>&nbsp;
                                                            @endif
                                                            @if (is_permit('tagReader_l'))
                                                                <button type="button" class="btn btn-dark" id="searchBtn" onclick="getDataList();">Search</button>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>  
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12" id="set_list_table">
                            {{--  --}}
                        </div>
                    </div>
                </section>
                <!-- Card animation end -->
            </div>
        </div>
    </div>
@endsection


@section('script')
    <script src="{{ asset('app-assets/js/select2.min.js') }}"></script>
    <script src="{{ asset('app-assets/js/html5-qrcode.min.js') }}"></script>

    {{-- <script src="https://unpkg.com/html5-qrcode"></script> --}}
    {{-- <script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script> --}}
    {{-- https://github.com/mebjas/html5-qrcode#extra-optional-configuration-in-start-method --}}
    <script>
        var qrCodeArr = [];
        function onScanSuccess(decodedText, decodedResult) {
            // handle the scanned code as you like, for example:
            // console.log(`Code matched = ${decodedText}`, decodedResult);
            // console.log(qrCodeArr.indexOf(decodedResult));
            if(qrCodeArr.indexOf(decodedResult) < 0) {
                qrCodeArr.push(decodedResult);
            }
            if(qrCodeArr.indexOf(decodedResult) == 0) {
                console.log(qrCodeArr[0]);
                if(!$('#qr_code').val()) {
                    $('#qr_code').val(qrCodeArr[0].decodedText);
                    $('#readable_code').focus();
                }
            }

            // html5QrcodeScanner.clear();
        }

        function onScanFailure(error) {
            // handle scan failure, usually better to ignore and keep scanning.
            // for example:
            console.warn(`Code scan error = ${error}`);
        }

        let html5QrcodeScanner = new Html5QrcodeScanner(
            "reader",
            { 
                fps: 50, // Item Scan per second
                qrbox: {
                    width: 300, // Scan area width
                    height: 300  // Scan area Height
                } 
            },
            /* verbose= */ 
            false
        );

        html5QrcodeScanner.render(onScanSuccess);
        // html5QrcodeScanner.render(onScanSuccess, onScanFailure);
    </script>
    <script>
        var dataLink = '';

        function resetScanData() {
            $('.saveBtn').text('Save');
            $('#row_id').val('');
            $('#qr_code').val('');
            $('#readable_code').val('');
            qrCodeArr = [];
        }

        function saveScanData() {
            var row_id = $('#row_id').val();
            var qr_code = $('#qr_code').val();
            if(!qr_code) {
                alert('QR Code Field is Required.'); return false;
            }
            var readable_code = $('#readable_code').val();
            if(!readable_code) {
                alert('Tag Number Field is Required.'); return false;
            }

            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type    : "post",
                url     : "{{ url('/tagReader_s') }}",
                data    : {
                    row_id : row_id,
                    qr_code : qr_code,
                    readable_code : readable_code
                },
                dataType: "json",
                success : function(response){
                    if(response.type == 'error') {
                        alert(response.message);
                    } else {
                        resetScanData();
                        getDataList();
                    }
                },
                error : function(response){
                    alert(response.error)
                }
            });
        }

        function getDataList() {
            var qr_code       = $('#qr_code').val() || 0;
            var readable_code = $('#readable_code').val() || 0;
            if (dataLink == '') {
                dataLink = "{{ url('/tagReader_l') }}";
            }
            if(readable_code != 0) {
                dataLink = "{{ url('/tagReader_l') }}";
            }

            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('#set_list_table').html('');
            $.ajax({
                type    : "get",
                url     : dataLink,
                data    : {
                    qr_code : qr_code,
                    readable_code : readable_code
                },
                dataType: "json",
                success : function(response){
                    $('#set_list_table').html(response.view);
                },
                error : function(response){
                    alert(response.error)
                }
            });
        }

        $(document).on('click', '.pagination li a', function(e) {
            dataLink = $(this).attr('href');
            // alert(dataLink);
            getDataList();
            e.preventDefault();
        });

        $(document).on('click', '.edit_row', function(e) {
            var row_id = $(this).data('id');

            resetScanData();

            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type    : "get",
                url     : "{{ url('/tagReader_e') }}/" + row_id,
                dataType: "json",
                success : function(response){
                    $('.saveBtn').text('Update');
                    $('#readable_code').focus();

                    var r_val = response.row;
                    $('#row_id').val(r_val.id);
                    $('#qr_code').val(r_val.qr_code);
                    $('#readable_code').val(r_val.readable_code);


                    // var op1 = '';
                    // $.each(data, function(i, v) { 
                    //     var name = (v.code) ? v.name + '_' + v.code : v.name;
                    //     op1 += '<option value="'+v.apwl_id_ledger_id+'">' +name+ '</option>';
                    // });
                    //this_tr.find('.apwl_id').html('<option value="">--Select One--</option>'+op1);
                },
                error : function(response){
                    alert("Error")
                }
            });
            e.preventDefault();
        });

        /*$(document).on('click', '.delete_row', function(e) {
            var thisEle = $(this);
            if(confirm('Are you sure to delete?')) {
                delete_form.parents('.delete_form').submit();
            } else {
                return false;
            }
            e.preventDefault();
        });*/

        @if (is_permit('tagReader_l'))
            getDataList();
        @endif
    </script>
    <script>
        $(document).on('keyup', '.keyup_input', function(e) {
            if (event.keyCode === 13) { // 13 = Ctrl
               e.preventDefault();
               document.getElementById("saveBtn").click();
            }
        });

        $(document).keydown(function (e) {
            // if (e.ctrlKey && e.keyCode == 13) { // 13 = Ctrl
            // alert(e.keyCode);
            if (e.keyCode == 27) { // 27 = Esc
                resetScanData();
            }
            // e.preventDefault();
        });
    </script>
@endsection