{% extends 'base.html.twig' %}
{% set titleName = "Batch Details " %}
{% block title %} POWER DATA | Batch : {{ batch.numberOfLot }} {% endblock %}
{% block page %} {{ batch.numberOfLot }} {% endblock %}
{% block breadcrumb %} {% if titleName != "Home" %} {{ titleName }} / {{ batch.numberOfLot }} {% endif %} {% endblock %}


 {% block css %}
     <!-- Select2 -->
     <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css' ) }} ">
     <style>
         .btn-valid:hover  {
             color: #fff !important;
             background-color: #28a745 !important;
             border-color: #28a745 !important;
             box-shadow: none !important;
         }

         .btn-valid:hover .open{
             display: none !important;
         }
         .btn-valid:hover .closeW{
             display: inline-block !important;
         }
         .closeW{
             display: none !important;
         }
     </style>

     <style>
         .null {
             width: 0 !important;
             padding: 0 !important;
             color: transparent !important;
         }
         .compteurProduct {
             font-size: 27px;
             font-weight: bold;
             color: white !important;
         }
         .blockEdit{
             pointer-events: none;
             background: rgb(213, 217, 221);
         }

         .borderFirst{
             border: 3px solid var(--green)!important;
         }

         .borderTunisiaexpress, .borderTunisiaExpress{
             border: 3px solid var(--red)!important;
         }

         .borderJax{
             border: 3px solid var(--blue)!important;
         }

         .btn_round {
             color: black;
             width: 35px;
             height: 35px;
             display: inline-block;
             border-radius: 50%;
             text-align: center;
             line-height: 35px;
             margin-left: 10px;
             border: 1px solid #ccc;
             cursor: pointer;
         }
         .btn_round_add:hover {
             color: #fff;
             background: #28a745;
             border: 1px solid #28a745;
         }
         .btn_round_delete:hover {
             color: #fff;
             background: #dc3545;
             border: 1px solid #dc3545;
         }

         .btn_content_outer {
             display: inline-block;
             width: 85%;
         }
         .close_c_btn {
             width: 30px;
             height: 30px;
             position: absolute;
             right: 10px;
             top: 0px;
             line-height: 30px;
             border-radius: 50%;
             background: #ededed;
             border: 1px solid #ccc;
             color: #ff5c5c;
             text-align: center;
             cursor: pointer;
         }

         .add_icon {
             padding: 10px;
             border: 1px dashed #aaa;
             display: inline-block;
             border-radius: 50%;
             margin-right: 10px;
         }
         .add_group_btn {
             display: flex;
         }
         .add_group_btn i {
             font-size: 32px;
             display: inline-block;
             margin-right: 10px;
         }

         .add_group_btn span {
             margin-top: 8px;
         }
         .add_group_btn,
         .clone_sub_task {
             cursor: pointer;
         }

         .sub_task_append_area .custom_square {
             cursor: move;
         }

         .del_btn_d {
             display: inline-block;
             position: absolute;
             right: 20px;
             border: 2px solid #ccc;
             border-radius: 50%;
             width: 40px;
             height: 40px;
             line-height: 40px;
             text-align: center;
             font-size: 18px;
         }
     </style>
     <style>
         .bg-aramex{
             background: #dc3d24;
             color: white;
         }
         .bg-first{
             background: #00ad47;
             color: #fff;
         }
         .bg-jax{
             background: #183462;
             color: #fff;
         }
         .select2-container--default .select2-selection--single .select2-selection__arrow {
             height: 31px;
             right: 6px;
         }
         .select2-container--default .select2-selection--single {
             border: 1px solid #ced4da;
             padding: 0.46875rem 0.75rem;
             height: calc(2.25rem + 2px);
         }
     </style>
 {% endblock %}

 {% block content %}


     <!-- Main Alert -->
     <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 class="invoice mb-1 p-1">
                 <div class="row">
                     <div class="col-12">
                         <h4>
                             <i class="fas fa-barcode"></i> {{ batch.shipperBorderCode }}
                             <small class="float-right">Date:  {{ batch.createdAt|date }}</small>
                         </h4>
                     </div>
                     <!-- /.col -->
                 </div>

                 <div class="row invoice-info">
                     <div class="col-sm-2 invoice-col">
                         <strong>Created By </strong>
                         <address>
                             {{ batch.createdBy.firstName }} {{ batch.createdBy.lastName }}
                         </address>
                     </div>
                     <div class="col-sm-2 invoice-col">
                         <strong>Shipper</strong>
                         <address>
                             {{ batch.shipper.name }}
                         </address>
                     </div>
                     <div class="col-sm-2 invoice-col">
                         <strong>Status</strong>
                         <address>
                             {{ batch.arrayOfStatus[batch.status] }}
                         </address>
                     </div>
                     <div class="col-sm-2 invoice-col">
                         <strong>N° Package scanned</strong>
                         <address id="itemScanned">
                             {{ batch.returnBatchOrders|length }}
                         </address>
                     </div>
                     <div class="col-sm-2 invoice-col">
                         <strong>N° Package In Border</strong>
                         <address>
                            {{ batch.numberOfPackageReceived }}
                         </address>
                     </div>
                     <div class="col-sm-2 invoice-col">
                         {% if batch.status == 1 %}
                             {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_BATCH_MANAGER') %}
                                 <a href="{{ path('app_admin_power_return_batch_to_completed',{ 'id':batch.id } ) }}"
                                    onclick="return confirm('Are you sure you wish to completed this BATCH !?\n Please Confirm OR Cancel.');"
                                    class="  btn btn-secondary btn-sm btn-valid confirmation"  >
                                     <i class=" open fas fa-pencil-alt"> </i>  <i class=" closeW fas fa-thumbs-up"></i>
                                     To Completed
                                 </a>
                             {% endif %}
                         {% elseif batch.status == 2  %}
                             <button class="btn btn-success btn-sm " ><i class="fas fa-shipping-fast"></i> Completed </button>
                         {% endif %}
                     </div>
                     <!-- /.col -->
                 </div>

             </div>

             <div class="row">


                 <div class="col-md-10 ">

                     <div class="row">
                         <div class="col-md-12">
                             <div class="input-group ">
                                 <input type="search" class="form-control " placeholder="Type your Ref Client, trackId , jumia number ...." id="orderRefClient">
                                 <div class="input-group-append">
                                     <button id="searchOrderFromDolibarr" type="submit" class="btn btn btn-default">
                                         <i class="fa fa-search"></i>
                                     </button>
                                 </div>
                             </div>
                         </div>
                         <!-- /.col -->
                     </div>
                     <div class=" mt-3" id="orderReturnedDetails">
                         <div class="col-md-12 " id="orderReturnedDetailsContents">
                         </div>
                     </div>
                 </div>
                 <div class="col-md-2" id="accordionBarcode" style="height: 320px; overflow-y: scroll;">

                     {% set counterItem = 0 %}
                     {% for item in batch.returnBatchOrders %}
                         {% set counterItem = counterItem + 1 %}
                         <div class="card card-{{ statusToCss[item.status] }} card-outline" id="itemReturned-{{ item.reference }}">
                             <a class="d-block w-100" data-toggle="collapse" href="#collapseOne-{{ item.reference }}">
                                 <div class="card-header" style="  padding: 0.75rem 0.75rem; ">
                                     <h4 class="card-title w-100">
                                         <span>{{ counterItem }}</span><span>.</span> <span>{{ item.reference }}</span>
                                     </h4>
                                 </div>
                             </a>
                             <div id="collapseOne-{{ item.reference }}" class="collapse " data-parent="#accordionBarcode">
                                 <div class="card-body">
                                     {% if item.status > 1 %}
                                         <button
                                                 onclick="deleteReturnedOrder('{{ item.reference }}')"
                                                 data-reference="{{ item.reference }}"
                                                 data-counter="{{ counterItem }}"
                                                 class=" btnDeleteReturnedItem btn btn-block btn-danger btn-sm mt-2  col-6 "    >
                                             <i class="fas fa-trash"> </i>
                                             Delete
                                         </button>
                                     {% endif %}
                                 </div>
                             </div>
                         </div>
                     {% endfor %}
                 </div>

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






 {% endblock %}


 {% block script %}

     <script>
         $(document).on("keydown", "form", function(event) {
             return event.key != "Enter";
         });
     </script>

     <!-- Select2 -->
     <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js' ) }} "></script>
     <script>
         $('.select2 option:first-child').html('Please choice one');
     </script>

     <script>
         $(function () {
             $('.select2').select2()
         });
     </script>


     <script>
         $(document).on('click', '#searchOrderFromDolibarr', function(event){
             var orderRefClient =  $('#orderRefClient').val().replace(' ','').trim();
             $('#orderRefClient').val(orderRefClient);
             if (orderRefClient.length < 5){
                 toastr.error('Please check your input');
                 return null ;
             }
             // $('#orderRefClient').val('');
             $("#marqueSelect").val('').trigger('change') ;
             $('#orderReturnedDetailsContents').html('<h2 class="text-center"> Data is loading  <i class="fas fa-spinner fa-spin mr-2 " ></i> </h2>');

             $.ajax({
                 url: '/admin/power/batch/returns/get/order/by/ref_client/json',
                 type: "POST",
                 data: {'batchId' : {{ batch.id }} , 'orderRefClient' : orderRefClient},
                 dataType: "json",
                 async: true,
                 success: function (data) {
                     // console.log(data);
                     if (data.success) {
                         $('#orderReturnedDetailsContents').html(data.template);
                     } else {

                         $('#orderReturnedDetailsContents').html('<h2 class="text-center"> Order Not Found ! </h2>');
                         if (data.message == 404){
                             toastr.error(data.message);
                             $(location).attr('href','/login');
                         }
                     }


                 },
                 error: function (data) {
                     $('#orderReturnedDetailsContents').html('');
                     toastr.error('An error has occurred when getting This Product');
                 }
             });

         });

         $(document).on('keypress submit', '#orderRefClient', function(event){
             console.log('Code Enter Search'+event.keyCode);
             var orderRefClient =  $('#orderRefClient').val().replace(' ','').trim();
             $('#orderRefClient').val(orderRefClient);
             $("#marqueSelect").val('').trigger('change') ;

             if(event.keyCode === 13 ){
                 if (  orderRefClient.length < 5){
                     toastr.error('Please check your input ');
                     return null ;
                 }
                 //$('#orderRefClient').val('');
                 $('#orderReturnedDetailsContents').html('<h2 class="text-center"> Data is loading  <i class="fas fa-spinner fa-spin mr-2 " ></i> </h2>');

                 $.ajax({
                     url: '/admin/power/batch/returns/get/order/by/ref_client/json',
                     type: "POST",
                     data: {'batchId' : {{ batch.id }} , 'orderRefClient' : orderRefClient},
                     dataType: "json",
                     async: true,
                     success: function (data) {
                         if (data.success) {
                             $('#orderReturnedDetailsContents').html(data.template);
                         } else {

                             $('#orderReturnedDetailsContents').html('<h2 class="text-center"> '+data.message+'  </h2>'); // Order Not Found !
                             if (data.message == 404){
                                 toastr.error(data.message);
                                 $(location).attr('href','/login');
                             }
                         }


                     },
                     error: function (data) {

                         $('#orderReturnedDetailsContents').html('');
                         toastr.error('An error has occurred when getting This Product');
                     }
                 });



             }

         });

         function deleteReturnedOrder(orderRefClient) {
             if (confirm("Press a button!") == true) {

                 $.ajax({
                     url: '/admin/power/return/batch/delete/item',
                     type: "POST",
                     data: {'orderRefClient' : orderRefClient, 'batchId' : {{ batch.id }} },
                     dataType: "json",
                     async: true,
                     success: function (data) {
                         if (data.success) {
                             $('#itemReturned-'+orderRefClient).remove();

                             // Re-index the remaining items
                             $("#accordionBarcode .card").each(function (index) {
                                 // Update the displayed number
                                 $(this).find(".card-title span:first").text(index + 1);

                                 // Update data-counter attributes
                                 $(this).find(".btnDeleteReturnedItem").attr("data-counter", index + 1);
                             });

                             toastr.success(data.message);
                         } 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 delete This Order');
                     }
                 });

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

     <script>
         $(document).on('click','.product-image-thumb', function () {
             var $image_element = $(this).find('img')
             $('.product-image').prop('src', $image_element.attr('src'))
             $('.product-image-thumb.active').removeClass('active')
             $(this).addClass('active')
         });
     </script>





 {% endblock %}