{% extends 'base.html.twig' %}
{% set titleName = "Lot : " ~ lot.numberOfLot %}
{% block title %} POWER DATA | {{titleName}} {% endblock %}
{% block page %}{{titleName}}{% endblock %}
{% block breadcrumb %} {% if titleName != "Home" %} {{titleName}} {% endif %} {% endblock %}
{% block content %}
<!-- Main content -->
<section class="content">
    <div class="row {{ lot.valid == true ? 'bg-lime' : ''}}  " >
        <div class="col-12">
            <h5 class="text-center">
                <span style="float:left;">Lot  : {{ lot.numberOfLot }}

           <a href="{{ path('app_dolibarr_orders_lot_details',{ 'id':lot.id }) }}"  class="btn btn-primary   btn-sm "     >View</a>

                </span>

                {% if lot.valid != true %}
                <span> <button class="btn btn-outline-success " id="chekingBtn" data-toggle="modal" data-target="#modal-checking"> Checking</button> </span>
                {% endif %}
                {% if sorted != true %}
                <span style="background: red; padding: 2px 10px; color: white ; border-radius: 20px;"> ALERT : This list is not in order by emplacement</span>
                {% endif %}
                <span style="float:right;">Created At : {{ lot.createdAt|date() }}</span>
            </h5>
        </div>
        {% if lot.valid == true %}
        <div class="col-12">
            <h5 class="text-center">
                {% if lot.validatedBy is not null %}
                <span style="float:left;">Validate By : {{ lot.validatedBy.firstname~' '~lot.validatedBy.lastname }}</span>
                {% endif %}
                <span class="bg-success" style=" padding: 2px 10px; color: white ; border-radius: 20px;"> This Lot is Valid</span>
                {% if lot.validatedBy is not null %}
                <span style="float:right;">Validate At : {{ lot.validatedAt|date() }}</span>
                {% endif %}
            </h5>
        </div>
        {% endif %}
    </div>
    <table class="table table-bordered">
        <thead>
        <tr style="text-align: center">
            <th>SKU</th>
            <th>Image</th>
            <th>Qty</th>
            <th>Orders</th>
        </tr>
        </thead>
    {% for sku,value  in arrayOfOrdersSku %}

        {% set mainImage =  arrayOfJumiaProduct[sku] is defined ? arrayOfJumiaProduct[sku]['mainImage'] : 'no image' %}
        {% set name =  arrayOfJumiaProduct[sku] is defined ? arrayOfJumiaProduct[sku]['Name'] : 'no name' %}
        <tbody>
        <tr>
            <td style="vertical-align: middle; text-align: left; width: 50%">
                <h5 style="width: 95%">{{ name }}</h5>
                <p>{{ sku }}</p>
                {% if value['service'] is defined %}
                <p style="color: {{ value['service']['color'] }}"> <strong>Service</strong> : {{ value['service']['Name'] }} {{ value['service']['barcode'] }} </p>
                {% endif %}
            </td>
            <td style="width: 150px"><img width="160" height="160" src="{{ mainImage }}" alt=""></td>
            <td style="vertical-align: middle; text-align: center;"><h4>{{ value['qty'] }}</h4></td>
            <td>
                {% for order  in value['orders'] %}
                <span class="badge bg-warning"> {{ order }} </span>
                {% endfor %}
            </td>
        </tr>
        </tbody>


    {% endfor %}

</table>
</section>
    <div class="modal fade " id="modal-checking">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-center" id="modalTitleSearch" >Checking LOT : {{ lot.numberOfLot }}<span id="numberOfLot"></span>  </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div  class="modal-body" id="searchBody" >
                    <div class="form-row">
                        <div class="col-8">
                            <input type="text" placeholder="Type a barcode"  class="form-control" id="barcode">
                        </div>
                        <div class="col-4">
                          <!--  <button class="btn btn-block btn-primary" id="firstCheck"> check</button> -->
                            <a href="{{ path('app_dolibarr_orders_update_status_lot',{id:lot.id}) }}" class="btn btn-block btn-success d-none" id="validateBtn">Validate</a>
                        </div>

                    </div>
                    <div class="row mt-3" style="height: 500px; overflow: auto;">
                        <div class="col-8">
                            <ul class="list-group " id="listValide">
                                <li class="list-group-item bg-dark align-items-center" >
                                    <span class="barcode"> Barcode : Product Name </span>
                                    <span class="badge badge-warning badge-btn float-right  badge-pill">FIX</span>
                                    <span class="badge badge-info badge-pill badge-btn float-right mr-4 ">Qty</span>
                                </li> 
                                {% for barcode,value  in arrayOfProductByBarcode %}
                                    {% set bracodeNew = barcode|slice(0, 3)~ "******" ~ barcode|slice(-4) %}
                                    <li class="list-group-item      align-items-center" id="{{ barcode }}" data-id="{{ barcode }}">
                                        <span class="barcode" >{{ bracodeNew }} : {{ arrayOfDolibarrProductByBarcode[barcode]['Name'] }}
                                            {% if value.serviceParent is defined  %} <br> <p style="color: {{ value.serviceParent['color'] }};"> [{{ value.serviceParent['Name'] }}]</p>   {% endif %}
                                        </span>
                                        <span class="badge badge-warning badge-btn float-right  badge-pill" data-qty="{{ value.qty }}">{{ value.qty }}</span>
                                        <span class="badge badge-info badge-pill badge-btn float-right mr-5 qty" data-qty="0">0</span>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="col-4">
                            <ul class="list-group " id="listNotValide">
                                <li class="list-group-item bg-dark align-items-center" >
                                    <span class="barcode"> Barcode</span>
                                    <span class="badge badge-warning badge-btn float-right  badge-pill">Qty</span>
                                </li>
                            </ul>
                        </div>
                    </div>


                </div>





            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-danger" style="display: none;" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content bg-danger">
                <div class="modal-header">
                    <h4 class="modal-title text-center">PRODUCT HORS LISTE</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Ce produit est hors list ...</p>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-warning" style="display: none;" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content bg-warning">
                <div class="modal-header">
                    <h4 class="modal-title text-center">PRODUCT COMPLET</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Ce produit est atteint le maximum !!</p>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

{% endblock %}

{% block script %}
    {% if lot.valid != true %}
        <script>
            var productByBarcode ;
            var numberOfProduct ;
            $(document).ready(function(){

                $.ajax({
                    url:'{{ path('app_dolibarr_orders_get_pdf_json', {'id':lot.id}) }}',
                    type: "GET",
                    dataType: "json",
                    async: true,
                    success: function (data)
                    {
                        if(data.success){
                            productByBarcode = data.data ;
                            numberOfProduct = data.count ;
                        }

                    }
                });

            });

            setTimeout(() => { console.log(productByBarcode) }, 3000)

            //$(document).on('click', '#firstCheck', function(){ // ol methode
            $(document).on('keypress', '#barcode', function(event){
                console.log('Code Enter '+event.keyCode);
                var test =  $('#barcode').val().replace(' ','').trim();
                $('#barcode').val(test);
                if(event.keyCode === 13 ){
                var newList  = [];
                var problemList  = [];
                var barcode =  $('#barcode').val().trim();
                if(barcode in productByBarcode){
                    var exist =  $("#listValide #"+barcode ).attr('data-id');
                    if(exist){
                        var qtyExist = $("#"+barcode+" .qty" ).attr('data-qty');
                        var newQty = parseInt(qtyExist) + 1 ;
                        if(qtyExist < productByBarcode[barcode] ){
                            $("#"+barcode+" .qty" ).attr('data-qty',newQty)
                            $("#"+barcode+" .qty" ).html(newQty)
                            newList[barcode] = newList[barcode] + 1;
                            if(newQty == productByBarcode[barcode] ){
                                $("#"+barcode).addClass('bg-lime validProduct');
                                // count li with class validProduct
                                if (numberOfProduct === $('.validProduct').length){
                                   $('#validateBtn').removeClass('d-none');
                                }
                            }
                        }else {
                            //alert('Stop This Product is Full ... !')
                            $('#modal-warning').modal('show');
                        }

                    }else {
                        alert('PROBLEME DATABASE')
                    }
                }else {
                    var exist =  $("#listNotValide #nt-"+barcode ).attr('data-id');
                    var qtyExist = $("#nt-"+barcode+" .qty" ).attr('data-qty');
                    var newQty = parseInt(qtyExist) + 1 ;
                    if(exist){
                        $("#nt-"+barcode+" .qty" ).attr('data-qty',newQty)
                        $("#nt-"+barcode+" .qty" ).html(newQty)
                    }else{
                        var element  = '<li class="list-group-item bg-danger d-flex justify-content-between align-items-center" id="nt-'+barcode+'" data-id="'+barcode+'"> '
                            + '<span class="barcode">'+barcode+' : HORS LISTE</span>'
                            +'<span class="badge badge-dark badge-pill badge-btn qty" data-qty="1">1</span></li>';
                        $( "#listNotValide" ).append(element);
                    }
                     //alert('Stop This Product is Not Found')
                    $('#modal-danger').modal('show');
                }
                $('#barcode').val('');

             }

            });








            /*
                function getProductByBarcode() {
                    $.ajax({
                        url:'{{ path('app_dolibarr_orders_get_pdf_json', {'id':lot.id}) }}',
                        type: "GET",
                        dataType: "json",
                        async: true,
                        success: function(data) {
                            return data;
                        },
                        error: function() {
                            alert('Error occured');
                        }
                    });
                }
                const productByBarcode = getProductByBarcode();
            */

        </script>
        <style>
            .badge-btn {
                font-size: 1.5rem;
            }
        </style>
    {% endif %}
{% endblock %}