{% 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 %}

     {% if batch.status > 1 %}
         <!-- 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 -->
     {% endif %}
     <!-- 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-check-square"></i> Completed </button>
                         {% endif %}
                     </div>
                     <!-- /.col -->
                 </div>

             </div>

             <div class="card card-solid">
                 <div class="card-body">
                     <table id="example1" class="table table-bordered table-striped">
                         <thead>
                         <tr>
                             <th class="null"></th>
                             <th class="text-center">Num</th>
                             <th class="text-center">Track ID</th>
                             <th class="text-center">Dolibar Id</th>
                             <th class="text-center">Total</th>
                             <th class="text-center">Created At</th>
                             <th class="text-center">Status</th>
                             <th class="text-center">Action</th>
                         </tr>
                         </thead>
                         <tbody>


                         {% set index = 1 %}
                         {% for order in returnBatchOrders %}
                             <tr  id="order-{{ order.id }}">
                                 <td class="null"></td>
                                 <td class="text-center">{{ index }}</td>
                                 <td class="text-center">{{ order.reference }}</td>
                                 <td class="text-center">
                                     {% if order.dolibarId is defined %}
                                     <a target="_blank" rel="noopener, noreferrer" href="https://{{ domain }}/commande/card.php?id={{ order.dolibarId }}" >
                                         {{ order.dolibarId }} </a>
                                     {% endif %}
                                 </td>
                                 <td class="text-center">{{ order.totalTtc }}</td>
                                 <td class="text-center">{{ order.createdAt|date("d/m/Y") }}</td>
                                 <td class="text-center">
                                     <button class="btn
                                                btn-{{ constant('App\\Entity\\Power\\ReturnBatchOrder::STATUS_TO_CSS')[order.status]  }}
                                                 btn-sm" >
                                         {{ constant('App\\Entity\\Power\\ReturnBatchOrder::STATUS_TITLE')[order.status]  }}
                                     </button>
                                 </td>
                                 <td class="text-center">
                                     {% if order.orderParent is not null %}
                                     <button class="btn btn-info  btn-sm detailsOrder" data-id="{{ order.orderParent.id }}" > <i class="fas fa-window-restore"></i> Products</button>
                                     <a class="btn btn-primary btn-sm viewbatch" data-id="{{ order.orderParent.id }}" href="{{  path('app_admin_power_batch_order_details', {'id' : order.orderParent.id, 'batch': order.orderParent.batch.id })  }}">
                                         <i class="fas fa-external-link-alt"> </i>
                                         View
                                     </a >
                                     {% endif %}
                                 </td>
                             </tr>
                             {% set index = index + 1 %}
                         {% endfor %}

                         </tbody>
                         <tfoot>
                         <tr>
                             <th class="null"></th>
                             <th class="text-center">Num</th>
                             <th class="text-center">Track ID</th>
                             <th class="text-center">Dolibar Id</th>
                             <th class="text-center">Total</th>
                             <th class="text-center">Created At</th>
                             <th class="text-center">Status</th>
                             <th class="text-center">Action</th>
                         </tr>
                         </tfoot>
                     </table>
                 </div>
             </div>
         </div>
     </section>





     <div class="modal fade " id="modal-details">
         <div class="modal-dialog ">
             <div class="modal-content">
                 <div class="modal-header">
                     <h4 class="modal-title text-center" id="modalTitleSearch" >More Details for Order : <span id="orderIdDetails"></span>  </h4>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>
                 <div id="dataBody" style="height: 500px; overflow: auto;">

                 </div>

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

     <div class="modal fade " id="modal-products-list">
         <div class="modal-dialog modal-xl">
             <div class="modal-content">
                 <div class="modal-header">
                     <h4 class="modal-title text-center"  >List of all products </h4>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>
                 <div id="dataBodyProducts" style="max-height: 600px; overflow: auto;">

                 </div>

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


 {% 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 -->


     <!-- Select2 -->
     <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js' ) }} "></script>

     <script>
         $(document).on('click', '.detailsOrder', function () {
             rowData = $(this);
             var orderId = rowData.attr("data-id");
             $.ajax({
                 url: '/admin/power/batch/order/detail/json',
                 type: "GET",
                 data: {'orderId' : orderId},
                 dataType: "json",
                 async: true,
                 success: function (data) {
                     if (data.success) {
                         console.log(data);
                         $('#dataBody').html(data.template);
                         $('#orderIdDetails').html(orderId);
                         $('#modal-details').modal('show');
                     } 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 import This Order');
                 }
             });


         });

         $(document).on('click', '#btnGetProductsList', function () {
             rowData = $(this);
             var batchId = rowData.attr("data-batch-id");
             $('#dataBodyProducts').html('<h2 class="text-center"> Data is loading  <i class="fas fa-spinner fa-spin mr-2 " ></i> </h2>');
             $('#modal-products-list').modal('show');
             $.ajax({
                 url: '/admin/power/batch/'+batchId+'/get/pdf/rendred',
                 type: "GET",
                 data: {'batchId' : batchId},
                 dataType: "json",
                 async: true,
                 success: function (data) {
                     if (data.success) {
                         $('#dataBodyProducts').html(data.template);
                     } 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 import This Order');
                 }
             });


         });

         $(document).on('click', '#btn-add-batch', function () {
             $('#productOldData').hide();
             $('#add-order-form')[0].reset();
             $("#create_order_canal").val('').trigger('change') ;
             $("#create_order_region").val('').trigger('change') ;
             $('.oneLineProduct').each(function(){
                 if($(this).attr('data-id') == 1){
                     $('#oneLineProduct-1').attr('data-validated', false);
                     $('#reference-1').removeClass('blockEdit');
                     $('#qty-1').removeClass('blockEdit');
                     $('#price-1').addClass('blockEdit');
                     $('#price-1').attr('disabled',true);
                     $('#btnAdd-1').show();
                     $('#checkValidation').show();
                     $('#create_order_submit').hide();
                 }else{
                     $(this).remove();
                 }
             });
             $('#create_order_submit').attr('data-old-order', 0);
             $('#create_order_submit').attr('data-old-index', 0);
             $('#create_order_submit').html('Create In Dolibarr');
             $('#modalTitle').html('Add new Order');
             $('#modal-add-order').modal('show');


         });


         function deleteOrder(orderId) {
             if (confirm("Press a button!") == true) {

                 $.ajax({
                     url: '/admin/power/batch/order/delete/json',
                     type: "POST",
                     data: {'orderId' : orderId},
                     dataType: "json",
                     async: true,
                     success: function (data) {
                         if (data.success) {
                             $('#order-'+orderId).remove();
                             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)
             }
         }
         function updateOrder(orderId, index) {
             if (confirm("Press a button!") == true) {

                 $.ajax({
                     url: '/admin/power/batch/get/order/json',
                     type: "POST",
                     data: {'batchId' : {{ batch.id }} , 'orderId' : orderId},
                     dataType: "json",
                     async: true,
                     success: function (data) {
                         if (data.success) {
                             $('#linesOldProduct').html("");
                             $('#productOldData').hide();
                             if (data.order.data.length > 1 ){
                                 $('#linesOldProduct').html("");
                                 $('#linesOldProduct').append(data.contents);
                                 $('#productOldData').show();
                             }
                             $('#add-order-form')[0].reset();
                             $("#create_order_canal").val('').trigger('change') ;
                             $("#create_order_region").val('').trigger('change') ;
                             $('.oneLineProduct').each(function(){
                                 if($(this).attr('data-id') == 1){
                                     $('#oneLineProduct-1').attr('data-validated', false);
                                     $('#reference-1').removeClass('blockEdit');
                                     $('#qty-1').removeClass('blockEdit');
                                     $('#price-1').addClass('blockEdit');
                                     $('#price-1').attr('disabled',true);
                                     $('#btnAdd-1').show();
                                     $('#checkValidation').show();
                                     $('#create_order_submit').hide();
                                 }else{
                                     $(this).remove();
                                 }
                             });
                             //#modal-add-order
                             $("#create_order_canal option[value='" + data.order.canal + "']:not(:disabled)").prop("selected", true).trigger('change');
                             $('#create_order_subscriber').val(data.order.subscriber);
                             $('#voucher').val(data.order.voucher);
                             $('#create_order_shippingPrice').val(data.order.shippingPrice);
                             $('#create_order_fullName').val(data.order.fullName);
                             $('#create_order_phone').val(data.order.phone);
                             $('#create_order_phoneTwo').val(data.order.phoneTwo);
                             $('#create_order_address').val(data.order.address);
                             $("#create_order_region option[value='" + data.order.region + "']:not(:disabled)").prop("selected", true).trigger('change');
                             $('#create_order_city').val(data.order.city);
                             // lines
                             $('#reference-1').val(data.order.data[0].reference);
                             $('#qty-1').val(data.order.data[0].qty);
                             $('#price-1').val(data.order.data[0].price);

                             // id="create_order_submit" data-old-order="0" data-old-index="0"
                             $('#create_order_submit').attr('data-old-order', orderId);
                             $('#create_order_submit').attr('data-old-index', index);
                             $('#create_order_submit').html('Update');
                             $('#modalTitle').html('Update order n° '+orderId);

                             $('#modal-add-order').modal('show');

                             toastr.success('Data imported for order '+orderId);
                         } 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 get This Order');
                     }
                 });

             } else {
                 console.log("You canceled !"+id)
             }
         }
         $(document).on('click', '.btn_down_line', function () {
             rowData = $(this);
             var reference = rowData.attr("data-reference");
             var qty = rowData.attr("data-qty");
             // line-product-reference
             // line-product-qty
             var referenceInputs = $('.line-product-reference').filter(':empty');
             var qtyInputs = $('.line-product-qty').filter(':empty'); //:first
              if(referenceInputs.length > 0){
                  referenceInputs.val(reference).removeClass('line-product-reference').trigger('change') ;
                  qtyInputs.val(qty).removeClass('line-product-qty').trigger('change') ;
                  $('#btnDown-'+reference).hide();
              }
         });
     </script>



 {% endblock %}