{% 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' ) }} ">
     <style>
         .classGrised{
             pointer-events: none; background: #b0b3b5 ;
         }
     </style>
 {% endblock %}

{% set classCol = 'col-md-3' %}
{% set showNext = 0 %}
{% 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  >
                {% if inventory.status == constant('App\\Entity\\Power\\Inventory::STATUS_PROCESSING_COUNTING_TWO')
                    or inventory.status == constant('App\\Entity\\Power\\Inventory::STATUS_PROCESSING_COUNTING_THREE')  %}
                {% set classCol = 'col-md-2' %}
                {% set showNext = 1 %}
                {% endif %}
            <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>
                {% if showNext == 1 %}
                <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>
                    <br>
                   <span>Problem : <span id="nextProblem" style=" border-radius: 8px; border: 3px solid; padding: 0 8px 0 8px;" class="  border-warning ">{{ productJson.problem is defined ? productJson.problem : '' }}</span>
                                   <span   id="correctData" style=" border-radius: 8px; border: 3px solid; padding: 0 8px 0 8px;" class="
                                    {{ productJson.problem is defined and productJson.problem != 'Quantity' and  productJson.problem != 'Emplacement'? ' d-none '  : '' }}
                                    border-success ">
                                {{ productJson.totalQty is defined and productJson.problem == 'Quantity' ? ' Correct Emplacement => ' ~ productJson.allEmp : '' }}
                                {{ productJson.allEmp is defined and productJson.problem == 'Emplacement' ? ' Correct Quantity  => ' ~ productJson.totalQty : '' }}
                                  </span>
                   </span>
                </p>
                {% endif %}
                <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 {{ classCol }}">
                            <input class="form-control"  type="number" name="qty" id="qty" placeholder="qty" required>
                        </div>
                        <div class="form-group col-12 {{ classCol }}">
                            <input class="form-control btn btn-success"  type="submit" name="submit" id="sendLine" value="Send"  required>
                        </div>

                        {% if showNext == 1 %}

                        <div id="colToOutOfStock" class="form-group col-12 col-md-2 d-none">
                            <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 {{ classCol }}">
                            <a class="form-control btn btn-secondary"   id="getNextProduct"  > Next <i class="fas fa-angle-double-right"> </i></a>
                        </div>
                        {% endif %}

                    </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 %}
    {% if inventory.status == constant('App\\Entity\\Power\\Inventory::STATUS_PROCESSING_COUNTING_TWO')
        or inventory.status == constant('App\\Entity\\Power\\Inventory::STATUS_PROCESSING_COUNTING_THREE')  %}
        {% set classCol = 'col-md-2' %}
        {% set showNext = 1 %}
    {% endif %}
    <!-- 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 is_granted('ROLE_ADMIN')  %} {% else %}
            if (barcode.length < 13){
                toastr.error('Please check Barcode');
            }
            {% endif %}
            if (emplacement.length < 1){
                toastr.error('Please check Emplacement');
            }

            {% if showNext == 1 %}
            $('#colToOutOfStock').addClass('d-none');
            var currentBarcode = $('#nextData').attr('data-barcode') ;
            if (currentBarcode !== barcode){
                toastr.error('Please check Current Barcode : '+barcode);
            }
            {% endif %}
            if( {% if is_granted('ROLE_ADMIN')  %} {% else %} barcode.length >= 13 &&  {% endif %}emplacement.length > 0 {% if showNext == 1 %} && currentBarcode  === barcode {% endif %} ){
                $.ajax({
                    url: '/admin/power/inventory/add/line/json',
                    type: "POST",
                    data: {'inventory' : inventoryId, 'barcode' : barcode,'emplacement' : emplacement, 'qty' : qty,  },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            {% if showNext == 1 %}
                            $('#colToOutOfStock').addClass('d-none');
                            {% endif %}
                            $('#barcode-input').val('').focus();
                            $('#emplacement-input').val('');
                            $('#qty').val('');
                            $('#percentLine').html(data.percent);
                            $('#emplacement-input').val('').removeClass('classGrised');
                            $('#qty').val('').removeClass('classGrised');
                            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');
                    }
                });
            }

        });

        {% if showNext == 1 %}
        $(document).on('click', '#getNextProduct', function(event){
            event.preventDefault() ;
            $('#colToOutOfStock').addClass('d-none');
                var inventoryId = {{ inventory.id }};
                $.ajax({
                    url: '/admin/power/inventory/get/next/product/json',
                    type: "POST",
                    data: {'inventory' : inventoryId  },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            if(data.productJson !== null){
                                $('#colToOutOfStock').addClass('d-none');
                                $('#nextData').removeClass('d-none');
                                var barcodeProduct = data.productJson.barcode !== null ? data.productJson.barcode.toString() : '';
                                var labelProduct = data.productJson.label !== null ? ' => ' +data.productJson.label : '';
                                var problem = data.productJson.problem !== null ?  data.productJson.problem : '';
                                var totalQty = data.productJson.totalQty !== null ? ' Correct Quantity  => ' +data.productJson.totalQty : '';
                                var allEmp = data.productJson.allEmp !== null ? ' Correct Emplacement => ' +data.productJson.allEmp : '';
                                $('#nextBarcode').html(barcodeProduct + ' ' +labelProduct);
                                $('#nextData').attr('data-barcode',barcodeProduct) ;

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

                                if (data.productJson.image !== null){
                                    $("#nextImage").attr("src",data.productJson.image).removeClass('d-none');
                                }else{
                                    $("#nextImage").addClass('d-none');
                                }
                                $('#nextProblem').html(problem);
                                if(problem === 'Quantity'){
                                    $('#qty').val('').removeClass('classGrised');
                                    $('#correctData').html(allEmp).removeClass('d-none');
                                    $('#emplacement-input').val(data.productJson.allEmp).addClass('classGrised');
                                }else if (problem === 'Emplacement'){
                                    $('#emplacement-input').val('').removeClass('classGrised');
                                    $('#correctData').html(totalQty).removeClass('d-none');
                                    $('#qty').val(data.productJson.totalQty).addClass('classGrised');
                                    if(data.productJson.totalQty === 0){
                                        $('#btnToOutOfStock').attr('data-barcode',barcodeProduct) ;
                                        $('#colToOutOfStock').removeClass('d-none');
                                    }

                                }else{
                                    $("#correctData").addClass('d-none').html(allEmp);
                                    $('#qty').val('').removeClass('classGrised');
                                    $('#emplacement-input').val('').removeClass('classGrised');
                                }


                                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');
                    }
                });

        });
        {% endif %}

        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 },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            $('#colToOutOfStock').addClass('d-none');
                            $('#nextData').removeClass('d-none');
                            $('#barcode-input').val('').focus();
                            $('#emplacement-input').val('');
                            $('#qty').val('');
                            toastr.success('Line added successfully ');
                        } 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 %}