{% extends 'base.html.twig' %}
{% set titleName = "Inventory - "~ inventory.number  %}
{% block title %} POWER DATA | {{titleName}} {% endblock %}
{% block page %}<a href="{{ path('app_admin_power_inventory_details', {'id' : inventory.id }) }}">{{titleName}} </a>  {% endblock %}
{% block breadcrumb %} {% if titleName != "Home" %} {{titleName}} {% endif %} {% endblock %}
 {% block css %}
     <!-- DataTables -->
     <link rel="stylesheet" href=" {{ asset( 'assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css' ) }} " >
     <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
     <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
     <!-- END DataTables -->
     <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css' ) }} ">
 {% endblock %}

{% block content %}
    <section class="content">
        <div class="container-fluid">
            {% for message in app.flashes('success') %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
            {% for message in app.flashes('error') %}
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
            <div style="width: 100% ; margin: auto;  " id="reader"></div>
            <hr>
            <form  >
            <fieldset id="productData"  class="form-group  border p-3">
                <legend class="w-auto px-2">Product Line : <span id="percentLine"> -- </span> <span><i class="fas fa-percent"></i></span> </legend>

                <p id="nextData" class="{{ productJson.barcode is defined ? '' : 'd-none' }}" data-barcode="{{ productJson.barcode is defined ? productJson.barcode : '' }}"  >
                   <span>Next product : <span id="nextBarcode">{{ productJson.barcode is defined ? productJson.barcode : '' }} {{ productJson.label is defined ? ' => ' ~ productJson.label : '' }}</span></span>

                </p>
                <div class="linesProduct" id="linesProduct" >
                    <div class="form-row oneLineProduct " data-id="1" id="oneLineProduct-1" data-validated="false" >
                        <div class="form-group col-12 col-md-3">
                            <div class="input-group">
                                <input class="form-control "  autofocus="autofocus" type="text" name="barcode" inputmode="numeric" id="barcode-input" placeholder="Barcode" required>
                                <div class="input-group-prepend openscanner" id="barcode-scanner" >
                                    <span class="input-group-text"> <i class="fa fa-qrcode"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-12   col-md-3">
                            <div class="input-group">
                                <input class="form-control "  type="text" name="emplacement" id="emplacement-input"  placeholder="Emplacement" required >
                                <div class="input-group-prepend openscanner" id="emplacement-scanner" >
                                    <span class="input-group-text"> <i class="fa fa-qrcode"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-12 col-md-2">
                            <input class="form-control"  type="number" name="qty" id="qty" placeholder="qty" required>
                        </div>
                        <div class="form-group col-12 col-md-1">
                            <input class="form-control btn btn-success"  type="submit" name="submit" id="sendLine" value="Valid"  required>
                        </div>
                        <div class="form-group col-12 col-md-2">
                            <a  id="btnToOutOfStock"
                                     data-barcode="{{ productJson.barcode is defined ? productJson.barcode : '' }}"
                                     onclick="toOutOfStock({{ inventory.id }});"
                                     class="toOutOfStockBarcode btn btn-info d-block "><i class="fas fa-strikethrough"> </i> Out Of Stock</a>
                        </div>
                        <div class="form-group col-12 col-md-1">
                            <a class=" btn btn-secondary d-block"   id="getNextProduct"  > Next <i class="fas fa-angle-double-right"> </i></a>
                        </div>
                    </div>

                </div>
            </fieldset>
            </form>
            <img class="{{ productJson.image is defined ? '' : 'd-none' }} " id="nextImage"   src="{{ productJson.image is defined ? productJson.image : '' }}" alt="" style="width: 100%">
        </div>
    </section>


{% endblock %}


{% block script %}
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/pdfmake/vfs_fonts.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>
    <script>
        $(function () {
            $("#example1").DataTable({
                "responsive": true, "lengthChange": true, "autoWidth": false,
                "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
            }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
            $('#example2').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
            });
        });
    </script>
    <!-- end  DataTables  & Plugins -->

    <!-- Bootstrap4 Duallistbox -->
    <script src="{{ asset('assets/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js' ) }} "></script>
    <script>
        $('.selectShipper option:first-child').html('Please choice one');
        //Bootstrap Duallistbox
        //  var box = $('.duallistbox').bootstrapDualListbox()
    </script>
    <script src="{{ asset('assets/js/qrcode/html5-qrcode.min.js') }}"></script>
    <script>


        var html5QrcodeScannerBarcode = new Html5QrcodeScanner(
            "reader",
            { fps: 10, qrbox: {width: 250, height: 250} },
            /* verbose= */ false);

        var html5QrcodeScannerEmplacement = new Html5QrcodeScanner(
            "reader",
            { fps: 10, qrbox: {width: 250, height: 250} },
            /* verbose= */ false);

        function onScanSuccessBarcode(decodedText, decodedResult) {
            // Handle on success condition with the decoded text or result.
            // console.log(`Scan result: ${decodedText}`, decodedResult);
            // var focusedId = $(':focus').attr('id');
            // console.log(focusedId) ;
            // if(focusedId === 'barcode-input'){
            //     $('#barcode-input').val(decodedText);
            //     $('#emplacement-input').focus();
            // }else if(focusedId === 'emplacement-input'){
            //     $('#emplacement-input').val(decodedText);
            //     $('#qty').focus();
            // }
            $('#barcode-input').val(decodedText);
            $('#emplacement-input').focus();
            html5QrcodeScannerBarcode.clear();
        }
        function onScanSuccessEmplacement(decodedText, decodedResult) {
            $('#emplacement-input').val(decodedText);
            $('#qty').focus();
            html5QrcodeScannerEmplacement.clear();
        }

        function onScanFailure(error) {
            console.warn(`Code scan error = ${error}`);
        }


        // $(document).on('click', '.openscanner', function (event) {
        //     html5QrcodeScanner.render(onScanSuccess);
        // });

        $(document).on('click', '#barcode-scanner', function (event) {
            html5QrcodeScannerBarcode.render(onScanSuccessBarcode);
        });

        $(document).on('click', '#emplacement-scanner', function (event) {
            html5QrcodeScannerEmplacement.render(onScanSuccessEmplacement);
        });
        $(document).on('click', '#btncloseqrcode', function (event) {
            html5QrcodeScannerBarcode.clear();
            html5QrcodeScannerEmplacement.clear();
        });

    </script>

    <script>
        $(document).on('click', '#sendLine', function(event){
            event.preventDefault() ;

            rowData = $(this);
            var inventoryId = {{ inventory.id }};
            var barcode =  $('#barcode-input').val().replace(' ','').trim();
            var emplacement =  $('#emplacement-input').val();
            var qty =  $('#qty').val();
            if (barcode.length < 13){
                toastr.error('Please check Barcode');
            }
            if (emplacement.length < 1){
                toastr.error('Please check Emplacement');
            }

            var currentBarcode = $('#nextData').attr('data-barcode') ;
            if (currentBarcode !== barcode){
                toastr.error('Please check Current Barcode : '+barcode);
            }
            if( barcode.length >= 13 && emplacement.length > 0  && currentBarcode  === barcode   ){
                $.ajax({
                    url: '/admin/power/inventory/add/line/json',
                    type: "POST",
                    data: {'inventory' : inventoryId, 'barcode' : barcode,'emplacement' : emplacement, 'qty' : qty, 'sublist' : true },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            $('#barcode-input').val('').focus();
                            $('#emplacement-input').val('');
                            $('#qty').val('');
                            $('#percentLine').html(data.percent);
                            toastr.success('Line added successfully !');


                        } else {
                            toastr.error(data.message);
                            if (data.message == 404){
                                toastr.error(data.message);
                                $(location).attr('href','/login');
                            }
                        }


                    },
                    error: function (data) {

                        // toastr.error('An error has occurred when getting This Product');
                    }
                });
            }

        });

        $(document).on('click', '#getNextProduct', function(event){
            event.preventDefault() ;

                var inventoryId = {{ inventory.id }};
                $.ajax({
                    url: '/admin/power/inventory/get/next/product/json',
                    type: "POST",
                    data: {'inventory' : inventoryId , 'sublist' : true },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            if(data.productJson !== null){
                                $('#nextData').removeClass('d-none');
                                var barcodeProduct = data.productJson.barcode !== null ? data.productJson.barcode.toString() : '';
                                var labelProduct = data.productJson.label !== null ? ' => ' +data.productJson.label : '';
                                $('#nextBarcode').html(barcodeProduct + ' ' +labelProduct);
                                $('#nextData').attr('data-barcode',barcodeProduct) ;
                                $('#btnToOutOfStock').attr('data-barcode',barcodeProduct) ;
                                if (data.productJson.image !== null){
                                    $("#nextImage").attr("src",data.productJson.image).removeClass('d-none');
                                }else{
                                    $("#nextImage").addClass('d-none');
                                }

                                if (data.productJson.barcode !== null){
                                    $('#barcode-input').val(data.productJson.barcode.toString());
                                }else{
                                    $('#barcode-input').val('').focus();
                                }

                                toastr.info('Next barcode is : '+barcodeProduct);
                            }
                            if(data.productJson === null){
                                $("#nextImage").addClass('d-none');
                                $('#nextBarcode').html('You have completed your list of products ! ');
                                toastr.warning('You have completed your list of products ! ');
                            }


                        } else {
                            toastr.error(data.message);
                            if (data.message == 404){
                                toastr.error(data.message);
                                $(location).attr('href','/login');
                            }
                        }


                    },
                    error: function (data) {

                        // toastr.error('An error has occurred when getting This Product');
                    }
                });

        });



        function toOutOfStock(inventory) {
            var barcode =  $('#btnToOutOfStock').attr('data-barcode');
            if (confirm('Confirm to make out of stock this barcode : '+barcode+' !') == true) {

                $.ajax({
                    url: '/admin/power/inventory/to/out/of/stock/json',
                    type: "POST",
                    data: {'inventory' : inventory,'barcode' : barcode, 'sublist' : true },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            toastr.success('Line added successfully ');

                            $.ajax({
                                url: '/admin/power/inventory/get/next/product/json',
                                type: "POST",
                                data: {'inventory' : inventory , 'sublist' : true },
                                dataType: "json",
                                async: true,
                                success: function (data) {
                                    if (data.success) {
                                        if(data.productJson !== null){
                                            $('#nextData').removeClass('d-none');
                                            var barcodeProduct = data.productJson.barcode !== null ? data.productJson.barcode.toString() : '';
                                            var labelProduct = data.productJson.label !== null ? ' => ' +data.productJson.label : '';
                                            $('#nextBarcode').html(barcodeProduct + ' ' +labelProduct);
                                            $('#nextData').attr('data-barcode',barcodeProduct) ;
                                            $('#btnToOutOfStock').attr('data-barcode',barcodeProduct) ;
                                            if (data.productJson.image !== null){
                                                $("#nextImage").attr("src",data.productJson.image).removeClass('d-none');
                                            }else{
                                                $("#nextImage").addClass('d-none');
                                            }


                                            toastr.info('Next barcode is : '+barcodeProduct);
                                        }
                                        if(data.productJson === null){
                                            $("#nextImage").addClass('d-none');
                                            $('#nextBarcode').html('You have completed your list of products ! ');
                                            toastr.warning('You have completed your list of products ! ');
                                        }


                                    } else {
                                        toastr.error(data.message);
                                        if (data.message == 404){
                                            toastr.error(data.message);
                                            $(location).attr('href','/login');
                                        }
                                    }


                                },
                                error: function (data) {

                                    // toastr.error('An error has occurred when getting This Product');
                                }
                            });
                        } else {
                            toastr.error(data.message);
                            if (data.message == 404){
                                toastr.error(data.message);
                                $(location).attr('href','/login');
                            }
                        }


                    },
                    error: function () {
                        toastr.error('An error has occurred when added This line');
                    }
                });

            } else {
                console.log("You canceled !")
            }
        }
    </script>



    <!-- end  script of scanner page -->

{% endblock %}