{% extends 'base.html.twig' %}
{% set titleName = "Live Details " %}
{% block title %} POWER DATA | Live : {{ 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 p-3 mb-3  " style=" background: var(--cyan);border-radius: 5px" >
                 <div class="row">
                     <div class="col-12">
                         <h4>
                             <i class="fas fa-globe"></i>
                             <small class="float-right">Date:  {{ batch.createdAt|date }}</small>
                         </h4>
                     </div>
                     <!-- /.col -->
                 </div>

                 <div class="row invoice-info">
                     <div class="col-sm-3 invoice-col">
                         <strong>Created By </strong>
                         <address>
                             {{ batch.createdBy.firstName }} {{ batch.createdBy.lastName }}
                         </address>
                     </div>
                     <div class="col-sm-3 invoice-col">
                         <strong>Shipper</strong>
                         <address>
                             {{ batch.shipper.name }}
                         </address>
                     </div>
                     <div class="col-sm-3 invoice-col">
                         <strong>Status</strong>
                         <address>
                             {{ batch.arrayOfStatus[batch.status] }}
                         </address>
                     </div>
                     <div class="col-sm-3 invoice-col">
                         {% if batch.status == 1 %}
                         {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_LIVE_MANAGER') %}
                             <button id="btn-add-batch" type="button" class="btn  float-right btn-warning btn-sm " > <!-- data-toggle="modal" data-target="#modal-add-order" -->
                                 <i class="far fa-edit"></i> Add Contact
                             </button>
                             <button id="btn-live-products" type="button" class="btn mr-1 float-right btn-primary btn-sm " data-toggle="modal" data-target="#modal-live-products" > <!-- data-toggle="modal" data-target="#modal-add-order" -->
                                 <i class="fas fa-columns"></i> Products
                             </button>
                             <a href="{{ path('app_admin_power_live_validate',{ 'id':batch.id } ) }}" onclick="return confirm('Are you sure you wish to Validate this Live !?\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>
                                 Validate
                             </a>
                         {% endif %}
                         {% elseif batch.status == 2  %}
                             <button class="btn btn-success btn-sm " ><i class="fas fa-shipping-fast"></i> Validated </button>
                         {% endif %}
                     </div>
                     <!-- /.col -->
                 </div>

             </div>

             <div class="card card-solid">
                 {% if batch.status == 1 %}
                 <!-- /.card-header -->
                 <div class="card-body table-responsive p-0" style="height: 63vh;">
                             <table class="table table-head-fixed table-striped"> <!-- text-nowrap -->
                                 <thead>
                                 <tr>
                                     <th  class="text-center">Num</th>
                                     <th class="text-center">FullName</th>
                                     <th class="text-center">Phone</th>
                                     <th class="text-center">Shipping</th>
                                     <th class="text-center">Created At</th>
                                     <th class="text-center">Canal</th>
                                     <th class="text-center">Action</th>
                                 </tr>
                                 </thead>
                                 <tbody id="listOfOrders">
                                 {% set index = 1 %}
                                 {% for order in batch.liveLines %}
                                     <tr  id="line-{{ order.id }}">
                                         <td class="text-center">{{ index }}</td>
                                         <td class="text-center">{{ order.fullName }}</td>
                                         <td class="text-center">{{ order.phone }}</td>
                                         <td class="text-center">{{ order.shippingPrice }}</td>
                                         <td class="text-center">{{ order.createdAt|date("d/m/Y H:i") }}</td>
                                         <td class="text-center">{{ order.canal.name is defined ? order.canal.name :'' }}</td>
                                         <td class="text-center">

                                             <button class="btn btn-info  btn-sm detailsOrder" data-id="{{ order.id }}" > <i class="fas fa-window-restore"></i> Products</button>
                                             {% if (is_granted('ROLE_ADMIN') or is_granted('ROLE_LIVE_MANAGER') ) and (batch.status == 1 or batch.status == 2) and order.status.category < 4  %}
                                                 <button class="btn btn-warning btn-sm updateOrder "  onclick="updateOrder({{ order.id}}, {{ index }});" data-id="{{ order.id }}">
                                                     <i class="fas fa-pencil-alt">
                                                     </i>
                                                     Update
                                                 </button>
                                                 <button class="btn btn-danger btn-sm deleteOrder "  onclick="deleteOrder({{ order.id }});" data-id="{{ order.id }}">
                                                     <i class="fas fa-trash">
                                                     </i>
                                                     Delete
                                                 </button>

                                             {% endif %}


                                         </td>
                                     </tr>
                                     {% set index = index + 1 %}
                                 {% endfor %}
                                 </tbody>
                             </table>
                 </div>
                 <!-- /.card-body -->
                 {% else %}

                 <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">Full Name</th>
                             <th class="text-center">Phone</th>
                             <th class="text-center">Shipping</th>
                             <th class="text-center">Created At</th>
                             <th class="text-center">Canal</th>
                             <th class="text-center">Action</th>
                         </tr>
                         </thead>
                         <tbody>


                         {% set index = 1 %}
                         {% for order in batch.liveLines %}
                             <tr  id="order-{{ order.id }}">
                                 <td class="null"></td>
                                 <td class="text-center">{{ index }}</td>
                                 <td class="text-center">{{ order.fullName }}</td>
                                 <td class="text-center">{{ order.phone }}</td>
                                 <td class="text-center">{{ order.shippingPrice }}</td>
                                 <td class="text-center">{{ order.createdAt|date("d/m/Y H:i") }}</td>
                                 <td class="text-center">{{ order.canal.name is defined ? order.canal.name :'' }}</td>
                                 <td class="text-center">

                                     <button class="btn btn-info  btn-sm detailsOrder" data-id="{{ order.id }}" > <i class="fas fa-window-restore"></i> Products</button>
                                     {% if (is_granted('ROLE_ADMIN') or is_granted('ROLE_LIVE_MANAGER') ) and (batch.status == 1)  %}
                                         <button class="btn btn-danger btn-sm deleteOrder "  onclick="deleteOrder({{ order.id }});" data-id="{{ order.id }}">
                                             <i class="fas fa-trash">
                                             </i>
                                             Delete
                                         </button>

                                     {% 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">Full Name</th>
                             <th class="text-center">Phone</th>
                             <th class="text-center">Shipping</th>
                             <th class="text-center">Created At</th>
                             <th class="text-center">Canal</th>
                             <th class="text-center">Action</th>
                         </tr>
                         </tfoot>
                     </table>
                 </div>
                 {% endif %}


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


     {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_LIVE_MANAGER') %}

             <div class="modal fade" id="modal-add-order" >
                 <div class="modal-dialog modal-xl" >
                     <div class="modal-content" style="  background: blanchedalmond; ">
                         <div class="modal-header" id="modal-header-create">
                             <h4 class="modal-title text-center" id="modalTitle">Add Line</h4>
                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                             </button>
                         </div>

                         <form name="add-order" method="post" id="add-order-form" enctype="multipart/form-data" data-batch-id="{{ batch.id }}">
                         <div class="card-body">
                             <div class="form-row">
                                 <div class="form-group col-12 col-md-12">
                                     <label for="role" >Canal</label>
                                     <select class="select2 form-control" name="canal" id="create_order_canal" required style="width: 100%;">
                                         <option value="">Please choice one</option>
                                         {% for canal in canals %}
                                             <option  value="{{ canal.id }}" >{{ canal.name }}</option>
                                         {% endfor %}
                                     </select>
                                 </div>
                             </div>
                             {% if  batch.shipper.type in ["first" ,"tunisiaExpress","jax"] %}

                                 <fieldset id="firstData"  class="form-group  border{{ batch.shipper.type|capitalize }}  p-3">
                                     <legend class="w-auto px-2">{{ batch.shipper.type|capitalize }} Data</legend>
                                 <div class="form-row ">
                                     <div class="form-group col-12 col-md-2">
                                         <label for="role" >Shipping Price</label>
                                         <input type="text" id="create_order_shippingPrice" name="shippingPrice" placeholder="Type a shipping price" class="form-control" >
                                     </div>
                                     <div class="form-group col-12 col-md-4">
                                         <label for="role" >Full Name</label>
                                         <input type="text" id="create_order_fullName" name="fullName" placeholder="Type FullName " class="form-control">
                                     </div>
                                     <div class="form-group col-12 col-md-3">
                                         <label for="role" >Phone</label>
                                         <input type="text" id="create_order_phone" name="phone" placeholder="Type phone" class="form-control"  required="">
                                     </div>
                                 {% if  batch.shipper.type in ["first" ,"jax"] %}
                                     <div class="form-group col-12 col-md-3">
                                         <label for="role" >Phone Two</label>
                                         <input type="text" id="create_order_phoneTwo" name="phoneTwo" maxlength="50" class="form-control">
                                     </div>
                                 {% endif %}
                                 </div>
                                 <div class="form-row ">
                                     <div class="form-group col-12 col-md-6">
                                         <label for="role" >Address</label>
                                         <input type="text" id="create_order_address" name="address" placeholder="Type the adress" class="form-control" >
                                     </div>
                                     <div class="form-group col-12 col-md-3">
                                         <label for="role" >Region</label>
                                         <select class="form-control select2" name="region" id="create_order_region"  style="width: 100%;">
                                             <option value="">Please choice one</option>
                                 {% if  batch.shipper.type == "first" %}
                                            <!--  First -->
                                             <option value="Beja"> Beja</option>
                                             <option value="Le Kef">Le Kef</option>
                                             <option value="Mahdia">Mahdia</option>
                                             <option value="La Manouba">La Manouba</option>
                                             <option value="Medenine">Medenine</option>
                                             <option value="Tataouine">Tataouine</option>
                                             <option value="Tozeur">Tozeur</option>
                                             <option value="Tunis">Tunis</option>
                                             <option value="Jendouba">Jendouba</option>
                                             <option value="Bizerte">Bizerte</option>
                                             <option value="Siliana">Siliana</option>
                                             <option value="Kairouan">Kairouan</option>
                                             <option value="Kasserine">Kasserine</option>
                                             <option value="Sidi Bouzid">Sidi Bouzid</option>
                                             <option value="Sousse">Sousse</option>
                                             <option value="Monastir">Monastir</option>
                                             <option value="Ariana">Ariana</option>
                                             <option value="Sfax">Sfax</option>
                                             <option value="Gafsa">Gafsa</option>
                                             <option value="Zaghouan">Zaghouan</option>
                                             <option value="Kebili">Kebili</option>
                                             <option value="Gabes">Gabes</option>
                                             <option value="Ben Arous">Ben Arous</option>
                                             <option value="Nabeul">Nabeul</option>
                                     {% elseif  batch.shipper.type == "tunisiaExpress" %}
                                             <!--  Tunisia Express -->
                                             <option  class="region-tunisiaExpress" value="8"> Beja</option>
                                             <option  class="region-tunisiaExpress" value="10">Le Kef</option>
                                             <option  class="region-tunisiaExpress" value="17">Mahdia</option>
                                             <option  class="region-tunisiaExpress" value="4">La Manouba</option>
                                             <option  class="region-tunisiaExpress" value="23">Medenine</option>
                                             <option  class="region-tunisiaExpress" value="24">Tataouine</option>
                                             <option  class="region-tunisiaExpress" value="20">Tozeur</option>
                                             <option  class="region-tunisiaExpress" value="1">Tunis</option>
                                             <option  class="region-tunisiaExpress" value="9">Jendouba</option>
                                             <option  class="region-tunisiaExpress" value="7">Bizerte</option>
                                             <option  class="region-tunisiaExpress" value="11">Siliana</option>
                                             <option  class="region-tunisiaExpress" value="12">Kairouan</option>
                                             <option  class="region-tunisiaExpress" value="13">Kasserine</option>
                                             <option  class="region-tunisiaExpress" value="14">Sidi Bouzid</option>
                                             <option  class="region-tunisiaExpress" value="15">Sousse</option>
                                             <option  class="region-tunisiaExpress" value="16">Monastir</option>
                                             <option  class="region-tunisiaExpress" value="2">Ariana</option>
                                             <option  class="region-tunisiaExpress" value="18">Sfax</option>
                                             <option  class="region-tunisiaExpress" value="19">Gafsa</option>
                                             <option  class="region-tunisiaExpress" value="6">Zaghouan</option>
                                             <option  class="region-tunisiaExpress" value="21">Kebili</option>
                                             <option  class="region-tunisiaExpress" value="22">Gabes</option>
                                             <option  class="region-tunisiaExpress" value="3">Ben Arous</option>
                                             <option  class="region-tunisiaExpress" value="5">Nabeul</option>

                                     {% elseif  batch.shipper.type == "jax" %}
                                         <!--  Jax -->
                                         <option  class="region-jax" value="12"> Beja</option>
                                         <option  class="region-jax" value="9">Le Kef</option>
                                         <option  class="region-jax" value="18">Mahdia</option>
                                         <option  class="region-jax" value="11">La Manouba</option>
                                         <option  class="region-jax" value="21">Medenine</option>
                                         <option  class="region-jax" value="8">Tataouine</option>
                                         <option  class="region-jax" value="7">Tozeur</option>
                                         <option  class="region-jax" value="4">Tunis</option>
                                         <option  class="region-jax" value="6">Jendouba</option>
                                         <option  class="region-jax" value="5">Bizerte</option>
                                         <option  class="region-jax" value="19">Siliana</option>
                                         <option  class="region-jax" value="16">Kairouan</option>
                                         <option  class="region-jax" value="22">Kasserine</option>
                                         <option  class="region-jax" value="10">Sidi Bouzid</option>
                                         <option  class="region-jax" value="23">Sousse</option>
                                         <option  class="region-jax" value="17">Monastir</option>
                                         <option  class="region-jax" value="15">Ariana</option>
                                         <option  class="region-jax" value="3">Sfax</option>
                                         <option  class="region-jax" value="2">Gafsa</option>
                                         <option  class="region-jax" value="14">Zaghouan</option>
                                         <option  class="region-jax" value="24">Kebili</option>
                                         <option  class="region-jax" value="13">Gabes</option>
                                         <option  class="region-jax" value="20">Ben Arous</option>
                                         <option  class="region-jax" value="1">Nabeul</option>
                                     {% endif %}

                                         </select>
                                     </div>
                                 {% if  batch.shipper.type in ["first" ,"jax"] %}
                                     <div class="form-group col-12 col-md-3">
                                         <label for="role" >City</label>
                                         <input type="text" id="create_order_city" name="city" placeholder="Type a city" class="form-control" >
                                     </div>
                                 {% endif %}
                                 {% if  batch.shipper.type == "tunisiaExpress" %}
                                     <div class="form-group col-12 col-md-3">
                                         <label for="role" >Post Code</label>
                                         <input type="text" id="create_order_postCode" name="postCode" placeholder="Type a post code" class="form-control" >
                                     </div>
                                 {% endif %}


                                 </div>
                             </fieldset>
                             {% endif %}


                             <fieldset id="productOldData"  class="form-group  border p-3">
                                 <legend class="w-auto px-2">Old Product</legend>
                                 <div class="linesOldProduct" id="linesOldProduct" >

                                 </div>
                             </fieldset>


                             <fieldset id="productData"  class="form-group  border p-3">
                                 <legend class="w-auto px-2">Product Data</legend>
                                 <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-6 "  >
                                             <label for="role" >Reference</label>
                                             <select class="select2 form-control" name="reference-1"   id="reference-1"   style="width: 100%;">
                                                 <option value="">Please choice one</option>
                                                 {% for product in batch.products %}
                                                     <option  value="{{ product.reference }}" >{{ product.name }}</option>
                                                 {% endfor %}
                                             </select>
                                         </div>
                                         <div class="form-group col-12 col-md-4">
                                             <label for="role" >Qty</label>
                                             <input class="form-control"  type="number" name="qty-1" id="qty-1"  >
                                         </div>
                                         <div class="form-group col-md-2 add_del_btn_outer" style="display: flex;place-items: flex-end;">
                                             <a   data-id="1"  class="btn_round btn-success compteurProduct" id="compteur-1" >
                                                 1
                                             </a>
                                             <a  id="btnAdd-1" data-id="1"   class="btn_round btn_round_add add_node_btn_frm_field" title="Copy or clone this row">
                                                 <i class="fas fa-plus"></i>
                                             </a>
                                             <!--
                                             <button  data-id="1"  class="btn_round btn_round_delete removeLine" >
                                                 <i class="fas fa-trash-alt"></i>
                                             </button>
                                             -->
                                         </div>
                                     </div>

                                 </div>
                             </fieldset>
                             <div class="form-row ">
                                 <div class="form-group col-12">
                                     <label for="admin_create_account_firstname">Notes</label>
                                     <textarea id="create_order_notes" name="notes" class="form-control"></textarea>
                                 </div>
                             </div>

                         </div>
                         <!-- /.card-body -->

                         <div class="modal-footer justify-content-between">
                             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                             <button type="submit" id="create_order_submit" data-old-order="0" data-old-index="0"     name="submit" class="action-button-previous finish bg-teal float-right btn" >Create</button>
                              
                         </div>

                         </form>



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

     {% endif %}

     <div class="modal fade  " id="modal-live-products">
         <div class="modal-dialog modal-xl">
             <div class="modal-content">
                 <div class="modal-header">
                     <h4 class="modal-title text-center" id="modalTitleSearch" >List of products live </h4>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>
                 <div  style="height: 500px; overflow: auto;">
                     <div class="row">
                         <div class="col-12">
                             <div class="card card-success">
                                 <div class="card-body">
                                     <form action="" name="add-product-live">
                                         <div class="row">
                                             <div class="col-3">
                                                 <input class="form-control" type="text" id="reference-input-live-product"  name="reference-input" placeholder="Reference">
                                             </div>
                                             <div class="col-6">
                                                 <input class="form-control" type="text" id="name-input-live-product"  name="name-input" placeholder="Name">
                                             </div>
                                             <div class="col-3">
                                                 <button type="submit" id="addProductLive" class="btn btn-primary btn-block d-none"> <i class="fas fa-cloud-upload-alt">  </i> Add</button>
                                                 <button type="submit" id="checkProductLive" class="btn btn-warning  " style="    display: block;  width: 100%;">
                                                     <i class="fas fa-check">  </i>
                                                     Check
                                                 </button>
                                             </div>
                                         </div>
                                     </form>
                                 </div>
                                 <!-- /.card-body -->
                             </div>
                         </div>
                         <div class="col-12">
                             <table class="table table-head-fixed table-striped"> <!-- text-nowrap -->
                                 <thead>
                                 <tr>
                                     <th  class="text-center">Num</th>
                                     <th class="text-center">Reference</th>
                                     <th class="text-center">Name</th>
                                     <th class="text-center">Action</th>
                                 </tr>
                                 </thead>
                                 <tbody id="listOfProductsLive">
                                 {% set index = 1 %}
                                 {% for product in batch.products %}
                                     <tr  id="product-{{ product.reference }}">
                                         <td class="text-center">{{ index }}</td>
                                         <td class="text-center">{{ product.reference }}</td>
                                         <td class="text-center">{{ product.name }}</td>
                                         <td class="text-center">
                                             <button class="btn btn-danger btn-sm deleteOrder "  onclick="deleteProductLive({{ batch.id }}, '{{ product.reference }}');" data-id="{{ product.reference }}">
                                                 <i class="fas fa-trash">  </i>
                                                 Delete
                                             </button>
                                         </td>
                                     </tr>
                                     {% set index = index + 1 %}
                                 {% endfor %}
                                 </tbody>
                             </table>
                         </div>
                     </div>
                 </div>

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



     <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 Contact : <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 %}
     {% if batch.status > 1 %}
     <!-- 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 -->
     {% endif %}


     <!-- Select2 -->
     <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js' ) }} "></script>
     <script>
         $('.selectShipper option:first-child').html('Please choice one');
         //Bootstrap Duallistbox
         //  var box = $('.duallistbox').bootstrapDualListbox()
     </script>
     <!-- Order Manager  -->
     <script>
         var ProductList = [];
         $(document).on('click', '.btn_round_add', function(event){
             rowData = $(this);
             var currentId = rowData.attr("data-id");
             var nextId = currentId + 1 ;
             var reference =  $('#reference-'+currentId).val().replace(' ','').trim();
             var qty =  $('#qty-'+currentId).val();
             if (reference.length < 13){
                 toastr.error('Please check Barcode');
                 event.preventDefault() ;
                 return ;
             }
             // Check if the product exists before adding
             if ($('#oneLineProduct-'+currentId).attr('data-validated') === 'false'){
                 if ($.inArray(reference, ProductList) === -1) {
                     ProductList.push(reference);
                 } else {
                     toastr.error(`${reference} already exists!`);
                     event.preventDefault() ;
                     return ;
                 }
             }


             ProductList = ProductList.filter(item => item !== '');

             if(qty > 0 ){
                 var numberOfLines = $('.btn_round_add').length
                 $('#barcodeSearchData').val(reference);
                 $.ajax({
                     url: '/admin/power/live/line/render/json',
                     type: "POST",
                     data: {'currentId' : currentId, 'live' : {{ batch.id }}, 'referenceSelected' : ProductList },
                     dataType: "json",
                     async: true,
                     success: function (data) {
                         if (data.success) {

                             $('#oneLineProduct-'+currentId).attr('data-validated', true);
                             $('#reference-'+currentId).addClass('blockEdit');
                             $('#qty-'+currentId).addClass('blockEdit');
                             $('#btnAdd-'+currentId).hide(); 
                              
                             $('#linesProduct').append(data.template);

                         } 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('Please check Quantity');
             }

         });
         $(document).on('click', '.removeLine', function(event){
             rowData = $(this);
             var currentId = rowData.attr("data-id");
             ProductList = ProductList.filter(item => item !== $('#reference-'+currentId).val());
             $('#oneLineProduct-'+currentId).remove();
             var idLastLine =  $('#linesProduct .oneLineProduct:last-child').attr("data-id");
             $('#btnAdd-'+idLastLine).show();

             if($('#oneLineProduct-'+idLastLine).attr('data-validated') === "true"){
                 $('#create_order_submit').show(); 
             }


         });
     </script>

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

     <!-- Add Order Script -->
     <script>
         // add contact
         $(document).on('submit', '#add-order-form', function (event) {
             console.log('-------------- add ------------------->');
             let create = true ;
             var Form = $('#add-order-form');
             event.preventDefault();
             {% if  batch.shipper.type == "tunisiaExpress" %}
                 var phone = $('#create_order_phone').val();
                 var regex = /^\d{1,8}$/;
                 if (regex.test(phone)) {
                 } else {
                     create = false ;
                     alert('Tunisia Express Rule : ' +
                         'Invalid phone number! Please enter a phone number with exactly 8 digits.');
                 }
             {% endif %}

             var form = $('#add-order-form')[0];
             var data = new FormData(this);
             var batchId = $('#add-order-form').attr('data-batch-id');
             //data.append("batch", batchId);
             var indexLine  = $('#listOfOrders tr').length +1 ;
             var oldOrder = $('#create_order_submit').attr('data-old-order');
             var oldIndex = $('#create_order_submit').attr('data-old-index');
             var update = false ;
             var subUrl = '' ;
             if (oldOrder > 0 && oldIndex > 0){
                  subUrl = '/'+oldOrder+'/'+oldIndex;
                  update = true ;
             }
             if (create == true){
                 $.ajax({
                     url: '/admin/power/live/' + batchId + '/add/line/' + indexLine + subUrl,
                     type: "POST",
                     data: data,
                     processData: false,
                     contentType: false,
                     dataType: "json",
                     async: true,
                     success: function (data) {
                         // console.log(data);
                         if (data.success) {
                             ProductList = [];
                             if (update){
                                 $('#line-'+oldOrder).replaceWith(data.template);
                             }else {
                                 $('#listOfOrders').append(data.template);
                             }

                             // initializeTodoList();
                             $.each(data.messageSuccess, function(index, value) {
                                 toastr.success(value);
                             });
                             $.each(data.messageError, function(index, value) {
                                 toastr.error(value);
                             });
                             if (data.messageError.length == 0){
                                 $('#modal-add-order').modal('hide');
                                 $('#add-order-form')[0].reset();


                                 $('.oneLineProduct').each(function(){
                                     if($(this).attr('data-id') == 1){
                                         $('#oneLineProduct-1').attr('data-validated', false);
                                         $('#reference-1').removeClass('blockEdit');
                                         $('#reference-1').val('');
                                         $('option').removeAttr('selected');
                                         $('#qty-1').removeClass('blockEdit');
                                         $('#price-1').addClass('blockEdit');
                                         $('#price-1').attr('disabled',true);
                                         $('#btnAdd-1').show(); 
                                          
                                     }else{
                                         $(this).remove();
                                     }
                                 });




                             }

                         } else {

                             toastr.error('An error has occurred when adding this Contact : ' + data.message);
                         }


                     },
                     error: function () {
                         toastr.error('An error has occurred when creating this Contact');
                     }
                 });
             }

         });
     </script>

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


         });

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


         });

         $(document).on('click', '#btn-add-batch', function () {
             ProductList = [];
             $('#productOldData').hide();
             $('#add-order-form')[0].reset();
             $('#reference-1').val('').trigger('change');
             $('#qty-1').val('').trigger('change');
             $("#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');
                     $('#btnAdd-1').show();

                 }else{
                     $(this).remove();
                 }
             });
             $('#create_order_submit').attr('data-old-order', 0);
             $('#create_order_submit').attr('data-old-index', 0);
             $('#create_order_submit').html('Create');
             $('#modalTitle').html('Add new Contact');
             $('#modal-add-order').modal('show');


         });







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

                 $.ajax({
                     url: '/admin/power/live/line/delete/json',
                     type: "POST",
                     data: {'lineId' : lineId},
                     dataType: "json",
                     async: true,
                     success: function (data) {
                         if (data.success) {
                             $('#line-'+lineId).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 Contact');
                     }
                 });

             } else {
                 console.log("You canceled !"+id)
             }
         }
         function updateOrder(lineId, index) {
             if (confirm("Press a button!") == true) {

                 $.ajax({
                     url: '/admin/power/live/get/line/json',
                     type: "POST",
                     data: {'liveId' : {{ batch.id }} , 'lineId' : lineId },
                     dataType: "json",
                     async: true,
                     success: function (data) {
                         if (data.success) {
                             $('#linesOldProduct').html("");
                             $('#productOldData').hide();
                             if (data.line.products.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');
                                     $('#btnAdd-1').show();

                                 }else{
                                     $(this).remove();
                                 }
                             });
                             //#modal-add-order
                             $("#create_order_canal option[value='" + data.line.canal + "']:not(:disabled)").prop("selected", true).trigger('change');
                             $('#create_order_subscriber').val(data.line.subscriber);
                             $('#voucher').val(data.line.voucher);
                             $('#create_order_shippingPrice').val(data.line.shippingPrice);
                             $('#create_order_fullName').val(data.line.fullName);
                             $('#create_order_phone').val(data.line.phone);
                             $('#create_order_phoneTwo').val(data.line.phoneTwo);
                             $('#create_order_address').val(data.line.address);
                             $('#create_order_notes').val(data.line.notes);
                             $("#create_order_region option[value='" + data.line.region + "']:not(:disabled)").prop("selected", true).trigger('change');
                             $('#create_order_city').val(data.line.city);
                             // lines
                             if (data.line.products.length > 0){
                                 $("#reference-1 option[value='" + data.line.products[0].reference + "']:not(:disabled)").prop("selected", true).trigger('change');
                                 $('#qty-1').val(data.line.products[0].qty);
                             }

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

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

                             toastr.success('Data imported for line '+lineId);
                         } 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 Contact');
                     }
                 });

             } 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");
             var qtyInputs = $('.line-product-qty').filter(':empty'); //:first
              if(qtyInputs.length > 0){
                  var idQty = qtyInputs.attr("id");
                  var idReference = idQty.replace("qty","reference");
                  $("#"+idReference+" option[value='" + reference + "']:not(:disabled)").prop("selected", true).trigger('change');
                  $("#"+idReference).removeClass('line-product-reference').trigger('change') ;
                  qtyInputs.val(qty).removeClass('line-product-qty').trigger('change') ;
                  $('#btnDown-'+reference).hide();
              }
         });
     </script>

     <style>
         .custom-toast-default{
             background: #e72e40 !important;
         }
         .custom-toast-order{
             background: #b601fd !important;
         }
         .custom-toast-contact{
             background: #2ee7b6 !important;
         }
         h2#swal2-title {
             color: white;
         }

         /* Highlight Effekt */
         .highlight {
             animation: blink 1s infinite alternate;
             background-color: #ffe066;
         }

         /* Blinken Animation */
         @keyframes blink {
             0% { background-color: #ffe066; }
             100% { background-color: transparent; }
         }

     </style>
     <script>
         function deleteProductLive(liveId, reference) {
             if (confirm("Press a button!") == true) {

                 $.ajax({
                     url: '/admin/power/live/delete/product/json',
                     type: "POST",
                     data: {'liveId' : liveId,'reference' : reference},
                     dataType: "json",
                     async: true,
                     success: function (data) {
                         if (data.success) {
                             $('#product-'+reference).remove();


                             // Re-index the remaining items
                             $("#listOfProductsLive tr").each(function (index) {
                                 // Update the displayed number
                                 $(this).find("td: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 Contact');
                     }
                 });

             } else {
                 console.log("You canceled !"+id)
             }
         }

         $(document).on('click', '#checkProductLive', function(event){
             event.preventDefault();
             var reference =  $('#reference-input-live-product').val().replace(' ','').trim();
             if (reference.length < 13){
                 toastr.error('Please check Reference');
                 event.preventDefault() ;
                 return ;
             }
             $('#checkProductLive i').removeClass('fa-check');
             $('#checkProductLive i').addClass('fa-spinner');
             $('#checkProductLive i').addClass('fa-spin');
             $.ajax({
                 url: '/admin/power/live/manage/product/by/reference/json',
                 type: "POST",
                 data: {'reference' : reference , 'liveId' : {{ batch.id }} },
                 dataType: "json",
                 async: true,
                 success: function (data) {
                     if (data.success) {
                         $('#reference-input-live-product').addClass('blockEdit');
                         $('#name-input-live-product').val(data.name);
                         $('#checkProductLive').hide();
                         $('#addProductLive').removeClass('d-none').show();

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

                     $('#checkProductLive i').addClass('fa-check');
                     $('#checkProductLive i').removeClass('fa-spinner');
                     $('#checkProductLive i').removeClass('fa-spin');

                 },
                 error: function (data) {

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

         });

         $(document).on('click', '#addProductLive', function(event){
             event.preventDefault();
             var reference =  $('#reference-input-live-product').val().replace(' ','').trim();
             var name =  $('#name-input-live-product').val();
             var index =  $('#listOfProductsLive').children().length;
             $('#addProductLive i').removeClass('fa-cloud-upload-alt');
             $('#addProductLive i').addClass('fa-spinner');
             $('#addProductLive i').addClass('fa-spin');
             $.ajax({
                 url: '/admin/power/live/manage/product/by/reference/json',
                 type: "POST",
                 data: {'index' : index+1 ,'name' : name ,'reference' : reference , 'liveId' : {{ batch.id }} },
                 dataType: "json",
                 async: true,
                 success: function (data) {
                     if (data.success) {
                         $('#reference-input-live-product').removeClass('blockEdit');
                         $('#reference-input-live-product').val('');
                         $('#name-input-live-product').val('');
                         $('#checkProductLive').show();
                         $('#addProductLive').hide();

                         $('#listOfProductsLive').append(data.template);


                     } else {
                         toastr.error(data.message);
                         if (data.message == 404){
                             toastr.error(data.message);
                             $(location).attr('href','/login');
                         }
                     }
                     $('#addProductLive i').addClass('fa-cloud-upload-alt');
                     $('#addProductLive i').removeClass('fa-spinner');
                     $('#addProductLive i').removeClass('fa-spin');
                 },
                 error: function (data) {

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

         });


         $(document).ready(function () {


             $("#create_order_phone").on("input", function () {
                 let phone = $(this).val();
                 var oldOrder = $('#create_order_submit').attr('data-old-order');
                 if (phone.length >= 8) {
                     $.ajax({
                         url: "/admin/power/live/line/check-phone",
                         type: "POST",
                         contentType: "application/json",
                         data: JSON.stringify({ phone: phone, id: oldOrder  }),
                         success: function (response) {
                             if (response.exists) {
                                  var msgFire = ' This phone number already has an order and contact today! ' ;
                                 var customPopupClass = 'custom-toast-default'; // default class
                                 if (response.order && !response.line) {
                                     msgFire = ' This phone number already has an order today! ' ;
                                     customPopupClass = 'custom-toast-order'; // class for order only
                                 }
                                 if (!response.order && response.line) {
                                     msgFire = ' This phone number already has an contact today! ' ;
                                     customPopupClass = 'custom-toast-contact'; // class for contact only
                                 }
                                 Swal.fire({
                                     toast: true,
                                     position: 'center',
                                     showConfirmButton: true,
                                     timer: 180000,
                                     customClass: {
                                         popup: customPopupClass // set dynamic class here
                                     },
                                     icon: 'warning',
                                     title: msgFire
                                 });


                             }
                         },
                         error: function (xhr) {
                             console.error("Error:", xhr.responseText);
                         }
                     });
                 }
             });
             $("#create_order_phoneTwo").on("input", function () {
                 let phone = $(this).val();
                 var oldOrder = $('#create_order_submit').attr('data-old-order');
                 if (phone.length >= 8) {
                     $.ajax({
                         url: "/admin/power/live/line/check-phone",
                         type: "POST",
                         contentType: "application/json",
                         data: JSON.stringify({ phone: phone, id: oldOrder  }),
                         success: function (response) {
                             if (response.exists) {
                                 var msgFire = ' This phone number already has an order and contact today! ' ;
                                 var customPopupClass = 'custom-toast-default'; // default class
                                 if (response.order && !response.line) {
                                     msgFire = ' This phone number already has an order today! ' ;
                                     customPopupClass = 'custom-toast-order'; // class for order only
                                 }
                                 if (!response.order && response.line) {
                                     msgFire = ' This phone number already has an contact today! ' ;
                                     customPopupClass = 'custom-toast-contact'; // class for contact only
                                 }
                                 Swal.fire({
                                     toast: true,
                                     position: 'center',
                                     showConfirmButton: true,
                                     timer: 180000,
                                     customClass: {
                                         popup: customPopupClass // set dynamic class here
                                     },
                                     icon: 'warning',
                                     title: msgFire
                                 });


                             }
                         },
                         error: function (xhr) {
                             console.error("Error:", xhr.responseText);
                         }
                     });
                 }
             });
         });


     </script>

     <script>
         $(document).ready(function() {
             var hash = window.location.hash;
             if (hash) {
                 var $target = $(hash);
                 if ($target.length) {
                     var $container = $('.table-responsive');

                     // Scroll im Container, nicht in body
                     $container.animate({
                         scrollTop: $container.scrollTop() + $target.position().top - 100 // -100 für kleine Puffer oben
                     }, 500, function() {
                         // Nach dem Scroll Highlight Effekt
                         $target.addClass('highlight');

                         setTimeout(function() {
                             $target.removeClass('highlight');
                         }, 20000);
                     });
                 }
             }
         });
     </script>

 {% endblock %}