{% extends 'base.html.twig' %}
{% set titleName = "Live - Orders" %}
{% block title %} POWER DATA | {{titleName}} {% endblock %}
{% block page %}{{titleName}}{% endblock %}
{% block breadcrumb %} {% if titleName != "Home" %} {{titleName}} {% endif %} {% endblock %}
 {% block css %}
     <!-- DataTables -->
     <link rel="stylesheet" href=" {{ asset( 'assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css' ) }} " >
     <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
     <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
     <!-- END DataTables -->
     <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css' ) }} ">
     <!-- daterange picker -->
     <link rel="stylesheet" href="{{ asset('assets/plugins/daterangepicker/daterangepicker.css' ) }} ">
     <!-- Select2 -->
     <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css' ) }} ">
     <link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css' ) }} ">


 {% endblock %}
{% block content %}
    <style>
        .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
            background-color: #0074f0!important;
            color: #fff;
        }
        .null {
            width: 0 !important;
            padding: 0 !important;
            color: transparent !important;
        }
        .compteurProduct {
            font-size: 17px;
            font-weight: bold;
            color: white !important;
        }
        .blockEdit{
            pointer-events: none;
            background: rgb(213, 217, 221);
        }

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

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

        .btn_round {
            color: black;
            width: 30px;
            height: 30px;
            display: inline-block;
            border-radius: 50%;
            text-align: center;
            line-height: 29px;
            margin-left: 10px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .btn_round_add:hover {
            color: #fff;
            background: var(--dark);
            border: 1px solid var(--dark);
        }
        .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);
        }
        /* bug display none Select shipper then option*/
        li[aria-disabled='true'] {
            display: none;
        }


    </style>
    <!-- Start style Rating -->
    <style>
        .stars {
            width: fit-content;
            margin: 0 auto;
            cursor: pointer;
        }
        .star {
            /*color: #91a6ff !important;*/
            color: #ffc107bf !important;
        }
        .rate {
            height: 50px;
            margin-left: -5px;
            padding: 5px;
            font-size: 25px;
            position: relative;
            cursor: pointer;
        }
        .rate input[type="radio"] {
            opacity: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,0%);
            pointer-events: none;
        }
        .star-over::after {
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            font-size: 16px;
            content: "\f005";
            display: inline-block;
            color: #ffc107bf;
            z-index: 1;
            position: absolute;
            top: 15px;
            left: 10px;
        }

        .rate:nth-child(1) .face::after {
            content: "\f119"; /* ☹ */
        }
        .rate:nth-child(2) .face::after {
            content: "\f11a"; /* 😐 */
        }
        .rate:nth-child(3) .face::after {
            content: "\f118"; /* 🙂 */
        }
        .rate:nth-child(4) .face::after {
            content: "\f580"; /* 😊 */
        }
        .rate:nth-child(5) .face::after {
            content: "\f59a"; /* 😄 */
        }
        .face {
            opacity: 0;
            position: absolute;
            width: 35px;
            height: 35px;
            /*  background: #91a6ff;*/
            background: #17a2b8;
            border-radius: 5px;
            top: -35px;
            left: 2px;
            transition: 0.2s;
            pointer-events: none;
        }
        .face::before {
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            content: "\f0dd";
            display: inline-block;
            /*color: #91a6ff;*/
            color: #17a2b8;
            z-index: 1;
            position: absolute;
            left: 9px;
            bottom: -15px;
        }
        .face::after {
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            display: inline-block;
            color: #fff;
            z-index: 1;
            position: absolute;
            left: 5px;
            top: -1px;
        }

        .rate:hover .face {
            opacity: 1;
        }

        /* Not sure if I like this or not. */
        /* Makes the emoji stay displayed */
        /* input[type="radio"]:checked + .face {
            opacity: 1 !important;
        } */
    </style>
    <!-- End style Rating   -->
    <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>
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- /.card -->
            <form action="" method="post" name="formFilter">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12 col-md-2">
                                        <label>Date range</label>
                                        <div class="input-group">
                                            <div class="input-group-prepend">   <span class="input-group-text">   <i class="far fa-calendar-alt"></i>  </span>  </div>
                                            <input type="text" class="form-control float-right" name="dateInterval" id="reservation"   {% if filter["dateInterval"] is defined  %}  value="{{ filter["dateInterval"] }}" {% endif  %}  placeholder="Date range">
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-2">
                                        <label for="exampleInputPassword1">Tentative</label>
                                        <input type="number"     class="form-control"  name="tentative" id="exampleInputPassword1"     {% if filter["tentative"] is defined  %}  value="{{ filter["tentative"] }}" {% endif  %} placeholder="Tentative">
                                    </div>

                                    <div class="form-group col-12 col-md-2">
                                        <label for="role" >Status</label>
                                        <select class="select2 form-control" name="statusFilter"  style="width: 100%;">
                                            <option value="">Please choice one</option>
                                            <option value="all">ALL</option>
                                            {% for status in statusFilterList %}
                                                <option  value="{{ status.id }}" data-bg="{{ constant('App\\Entity\\Power\\LineStatus::ARRAY_OF_CATEGORY')[status.category]["bg"] }}"       {% if filter["statusFilter"] is defined and status.id == filter["statusFilter"] %}  selected {% endif  %}      >{{ status.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-2">
                                        <label for="exampleInputPassword1" style=" color: transparent; ">.</label>
                                        <button  name="filter" value="filter" type="submit" class="btn btn-info btn-block "><i class="fa fa-filter"></i> Filter</button>

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

                </div>
            </form>
            <div class="row">
                <div class="col-12">

                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title d-none">DataTable with default features</h3>
                            <button type="button" id="create_all_in_dolibarr" class="btn   btn-sm mr-1 btn-add-plan btn-warning float-right">
                                <i class="fas fa-upload" id="importIcon-last"></i>
                                <i class="fas fa-spinner fa-spin mr-2 " id="loadingIcon-last" style="display: none;"></i>
                                Create all line in dolibarr : <span id="counterConfirmedLines">00</span>
                            </button>
                        </div>
                        <!-- /.card-header -->
                        <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">Live</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">Tentative</th>
                                    <th class="text-center">Status</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% set index = 1 %}
                                {% for order in orders %}
                                    <tr  id="order-{{ order.id }}" style="background: {{ constant('App\\Entity\\Power\\LineStatus::ARRAY_OF_CATEGORY')[order.status.category]["bg"] }}">
                                        <td class="null"></td>
                                        <td class="text-center">{{ index }}</td>
                                        <td class="text-center">
                                            <a target="_blank" rel="noopener, noreferrer" href="{{  path('app_admin_power_live_batches_details', {'id' : order.live.id  })  }} " >
                                                {{ order.live.numberOfLot }} </a>

                                        </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">
                                            <a title="Get history"  data-id="{{ order.id }}"  class="btn_round btn-dark compteurProduct tentativeHistory" id="nbr-tentative-live-{{ order.id }}" >
                                                {{ order.nbrTentative }}
                                            </a>
                                            <a   id="nbr-tentative-live-btn-{{ order.id }}"
                                                 data-id="{{ order.id }}"
                                                 onclick="tentative({{ order.id }});"
                                                 class="btn_round btn_round_add add_node_btn_frm_field"
                                                 title="Add tentative">
                                                <i class="fas fa-plus"></i>
                                            </a>
                                        </td>
                                        <td class="text-center">{{ order.status.name }}</td>
                                        <td class="project-actions text-center">
                                            <button class="btn btn-info  btn-sm detailsOrder" data-id="{{ order.id }}" > <i class="fas fa-window-restore"></i> Products</button>
                                            {% if order.status.category < 4 %}
                                            <button id="btn-duplicate-{{ order.id }}" class="btn btn-warning btn-sm duplicateOrder "  onclick="updateOrder({{ order.id}}, {{ index }});" data-id="{{ order.id }}">
                                                <i class="fas fa-copy">
                                                </i>
                                                Update
                                            </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">Live</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">Tentative</th>
                                    <th class="text-center">Status</th>
                                    <th>Action</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->



    <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-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 Order</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="row m-0">
                    <div class="col-8 p-0">
                        <form name="add-order" method="post" id="add-order-form" enctype="multipart/form-data" >
                            <div class="card-body" style="    padding: 0.8rem; border-right: inset;">
                                <div class="form-row">
                                    <div class="form-group col-12 col-md-4">
                                        <label for="admin_create_account_firstname">Shipper</label>
                                        <select class="form-control select2 " name="shipper" disabled id="shipper_type" required  style="width: 100%;">
                                            <option value="">Please choice one</option>
                                            {% for shipper in shippers %}
                                                <option data-type="{{ shipper.type }}" value="{{ shipper.id }}" >{{ shipper.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="form-group col-12 col-md-4">
                                        <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 class="form-group col-12 col-md-4">
                                        <label for="role" >Status</label>
                                        <select class="select2 form-control" name="statusLine" id="create_order_status" required style="width: 100%;">
                                            <option value="" data-category="">Please choice one</option>
                                            {% for status in statusList %}
                                                <option  value="{{ status.id }}" data-category="{{ status.category }}" >{{ status.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <fieldset id="firstData"  class="form-group   p-3">
                                    <legend class="w-auto px-2" >First 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" required="">
                                        </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" required="">
                                        </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>
                                        <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>
                                    </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" required="">
                                        </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>
                                                <!--  First -->
                                                <option  class="region-first " value="Beja"> Beja First</option>
                                                <option  class="region-first" value="Le Kef">Le Kef</option>
                                                <option  class="region-first" value="Mahdia">Mahdia</option>
                                                <option  class="region-first" value="La Manouba">La Manouba</option>
                                                <option  class="region-first" value="Medenine">Medenine</option>
                                                <option  class="region-first" value="Tataouine">Tataouine</option>
                                                <option  class="region-first" value="Tozeur">Tozeur</option>
                                                <option  class="region-first" value="Tunis">Tunis</option>
                                                <option  class="region-first" value="Jendouba">Jendouba</option>
                                                <option  class="region-first" value="Bizerte">Bizerte</option>
                                                <option  class="region-first" value="Siliana">Siliana</option>
                                                <option  class="region-first" value="Kairouan">Kairouan</option>
                                                <option  class="region-first" value="Kasserine">Kasserine</option>
                                                <option  class="region-first" value="Sidi Bouzid">Sidi Bouzid</option>
                                                <option  class="region-first" value="Sousse">Sousse</option>
                                                <option  class="region-first" value="Monastir">Monastir</option>
                                                <option  class="region-first" value="Ariana">Ariana</option>
                                                <option  class="region-first" value="Sfax">Sfax</option>
                                                <option  class="region-first" value="Gafsa">Gafsa</option>
                                                <option  class="region-first" value="Zaghouan">Zaghouan</option>
                                                <option  class="region-first" value="Kebili">Kebili</option>
                                                <option  class="region-first" value="Gabes">Gabes</option>
                                                <option  class="region-first" value="Ben Arous">Ben Arous</option>
                                                <option  class="region-first" value="Nabeul">Nabeul</option>
                                                <!--  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>
                                                <!--  Jax -->
                                                <option  class="region-jax" value="12"> Beja Jax</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>
                                            </select>
                                        </div>
                                        <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" required="">
                                        </div>
                                        <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" required="">
                                        </div>



                                    </div>
                                </fieldset>
                                <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-4">
                                                <label for="role" >Reference</label>
                                                <input class="form-control "  type="text" name="reference-1"  placeholder="Reference Dolibarr" id="reference-1" required>
                                            </div>
                                            <div class="form-group col-12 col-md-3">
                                                <label for="role" >Qty</label>
                                                <input class="form-control"  type="number" name="qty-1" id="qty-1" required>
                                            </div>
                                            <div class="form-group col-12 col-md-3">
                                                <label for="role" >Price</label>
                                                <input class="form-control blockEdit"  type="number" name="price-1" id="price-1" step="any" required disabled>
                                            </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>
                                <a id="update_only_status" class=" btn btn-default  bg-navy float-right btn">Change Status</a>
                                <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" style="display: none;">Create</button>
                                <a id="checkValidation" class=" btn btn-default action-button-previous finish bg-secondary float-right btn">Insertion terminée</a>
                            </div>

                        </form></div>
                    <div class="col-4 p-0" id="history-content-lines" style="
                    max-height: 45rem;
                    overflow-y: auto;
                    overflow-x: hidden;
                    border: 1px solid #ccc;
                    padding: 10px;
">
                    </div>
                </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 -->

    <!-- Bootstrap4 Duallistbox -->
    <script src="{{ asset('assets/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js' ) }} "></script>

    <!-- Select2 -->
    <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js' ) }} "></script>
    <!-- date-range-picker -->
    <script src="{{ asset('assets/plugins/daterangepicker/daterangepicker.js' ) }} "></script>
    <script src="{{ asset('assets/plugins/chart.js/Chart.min.js' ) }} "></script>

    <script>
        $(function () {
            $('.select2').select2()
            /* bug display none Select shipper then option*/
            $(".select2 option[data-status='0']").prop("disabled", true);

            //Initialize Select2 Elements
            $('.select2bs4').select2({
                theme: 'bootstrap4'
            })
            //Date picker
            $('#dateRemember').datetimepicker({
                format: 'L'
            });

            //Date range picker
            $('#reservation').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    format: 'YYYY-MM-DD',
                    cancelLabel: 'Clear'
                }
            })
            $('#reservation').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD') + ' => ' + picker.endDate.format('YYYY-MM-DD'));
            });

            $('#reservation').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });

            $("input[data-bootstrap-switch]").each(function(){
                $(this).bootstrapSwitch('state', $(this).prop('checked'));
            })
        });
    </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) {
                        $('#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 Order');
                }
            });


        });
        function tentative(orderId) {

            if (confirm(" Are you sure to add tentative to this order !") == true) {

                $.ajax({
                    url: '/admin/power/live/line/increment/nbr/tentative/json',
                    type: "POST",
                    data: {'orderId' : orderId},
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            toastr.success(data.message);
                            $('#nbr-tentative-live-'+orderId).html(data.data.liveNbrTentative);
                        } 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 add tentative to This Order');
                    }
                });

            } else {
                console.log("You canceled !"+id)
            }
        }
        $(document).on('click', '.tentativeHistory', function () {
            rowData = $(this);
            var lineId = rowData.attr("data-id");
            $.ajax({
                url: '/admin/power/get/line/tentative/history/json',
                type: "GET",
                data: {'lineId' : lineId},
                dataType: "json",
                async: true,
                success: function (data) {
                    if (data.success) {
                        $('#dataBody').html(data.template);
                        $('#modalTitleSearch').html('Tentative history for this contact : '+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 Order');
                }
            });
        });
    </script>

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

    <!-- start create order -->
    <script>
        // Sorting function
        function sortHistoryContentLines() {
            let container = $("#history-content-lines");
            let cards = container.children(".card").toArray();

            // Sort based on the number of rows in tbody
            cards.sort((a, b) => {
                let rowsA = $(a).find("tbody tr").length;
                let rowsB = $(b).find("tbody tr").length;
                return rowsA - rowsB; // Smallest first
            });

            // Append sorted elements back
            $(container).append(cards);
        }
        // shipper control
        function changeAttribut(first, tunisiaExpress, jax) {
            $("#create_order_region option:selected").prop('selected', false);
            // first
            $("#create_order_shippingPrice").prop('required', (first || tunisiaExpress || jax ) );
            $("#create_order_fullName").prop('required',   (first || tunisiaExpress || jax  ) );
            $("#create_order_phone").prop('required',  (first || tunisiaExpress || jax  ) );
            $("#create_order_phoneTwo").prop('required',  first );
            $("#create_order_address").prop('required', (first || tunisiaExpress || jax  ) );
            $("#create_order_region").prop('required', (first || tunisiaExpress || jax  ) );
            $("#create_order_city").prop('required', first || jax);
            $("#create_order_postCode").prop('required', tunisiaExpress);



            if (first){
                $('#firstData').addClass('borderFirst');
                $('#firstData').removeClass('borderTunisiaExpress');
                $('#firstData').removeClass('borderJax');
                $('#firstData legend').html('First Data');
                $("#create_order_city").parent().show();
                $("#create_order_phoneTwo").parent().show();
                $("#create_order_postCode").parent().hide();

                $(".region-first").attr('disabled',false);
                $(".region-tunisiaExpress").attr('disabled',true);
                $(".region-jax").attr('disabled',true);
            }else if(tunisiaExpress){
                $('#firstData').removeClass('borderFirst');
                $('#firstData').addClass('borderTunisiaExpress');
                $('#firstData').removeClass('borderJax');
                $('#firstData legend').html('Tunisia Express Data');
                $("#create_order_city").parent().hide();
                $("#create_order_phoneTwo").parent().hide();
                $("#create_order_postCode").parent().show();

                $(".region-first").attr('disabled',true);
                $(".region-tunisiaExpress").attr('disabled',false);
                $(".region-jax").attr('disabled',true);

            }else if(jax){
                $('#firstData').removeClass('borderFirst');
                $('#firstData').removeClass('borderTunisiaExpress');
                $('#firstData').addClass('borderJax');
                $('#firstData legend').html('Jax Data');
                $("#create_order_city").parent().show();
                $("#create_order_phoneTwo").parent().show();
                $("#create_order_postCode").parent().hide();

                /* bug display none Select shipper then option , use disabled place of Hide*/
                $(".region-first").attr('disabled',true);
                $(".region-tunisiaExpress").attr('disabled',true);
                $(".region-jax").attr('disabled',false);


            }

            if ( first || tunisiaExpress || jax ) {
                $('#firstData').show();

            } else {
                $('#firstData').hide();
            }

        }

        $('#firstData').hide();
        changeAttribut(false, false, false)
        $(document).on('change','#shipper_type', function () {
            var   typeShipper = $('#shipper_type').find('option:selected').attr('data-type');

            if(typeShipper === "first" ){
                changeAttribut(true, false, false)
            }else if(typeShipper === "tunisiaExpress" ){
                changeAttribut(false, true, false)
            }else if(typeShipper === "jax" ){
                changeAttribut(false, false, true)

            }else{
                changeAttribut(false, false, false)
            }

            $(document).ready(function() {
                $('#create-order-form').submit(function(event) {
                    var   typeShipper = $('#shipper_type').find('option:selected').attr('data-type');
                    if(typeShipper === "tunisiaExpress" ){
                        var phone = $('#create_order_phone').val();
                        var regex = /^\d{1,8}$/;
                        if (regex.test(phone)) {
                        } else {
                            event.preventDefault();
                            alert('Tunisia Express Rule : ' +
                                'Invalid phone number! Please enter a phone number with exactly 8 digits ');
                        }
                    }

                });
            });




            /*
            if (this.value == "aramex") {
                changeAttribut(true, false)
            } else if (this.value == 'first') {
                changeAttribut(false, true)
            } else {
                changeAttribut(false, false)
            }*/
            // $('#modal-header').addClass(this.value);
        });
        // #linesProduct oneLineProduct
        $('#create_order_submit').hide();
        $('#checkValidation').show();
        $(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');
            }
            if(qty > 0 ){
                var numberOfLines = $('.btn_round_add').length
                $('#barcodeSearchData').val(reference);
                $.ajax({
                    url: '/admin/power/order/get/product/by/reference/json',
                    type: "POST",
                    data: {'currentId' : currentId, 'reference' : reference, 'qty' : qty },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {

                            $('#oneLineProduct-'+currentId).attr('data-validated', true);
                            $('#reference-'+currentId).addClass('blockEdit');
                            $('#qty-'+currentId).addClass('blockEdit');
                            $('#price-'+currentId).val(data.price);
                            $('#price-'+currentId).removeClass('blockEdit');
                            $('#price-'+currentId).removeAttr('disabled');
                            $('#btnAdd-'+currentId).hide();
                            $('#checkValidation').show();
                            $('#create_order_submit').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");

            var reference =  $('#reference-'+currentId).val().replace(' ','').trim();
            $('#btnDown-'+reference).show();

            $('#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();
                $('#checkValidation').hide();
            }

        });
        $(document).on('click', '#checkValidation', function(event){
            rowData = $(this);
            var idLastLine =  $('#linesProduct .oneLineProduct:last-child').attr("data-id");
            var reference =  $('#reference-'+idLastLine).val().replace(' ','').trim();
            var qty =  $('#qty-'+idLastLine).val();
            if(qty > 0 ){
                var numberOfLines = $('.btn_round_add').length
                $('#barcodeSearchData').val(reference);
                $.ajax({
                    url: '/admin/power/order/get/product/by/reference/json',
                    type: "POST",
                    data: {'currentId' : idLastLine, 'reference' : reference, 'qty' : qty },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {

                            $('#oneLineProduct-'+idLastLine).attr('data-validated', true);
                            $('#reference-'+idLastLine).addClass('blockEdit');
                            $('#price-'+idLastLine).val(data.price);
                            $('#price-'+idLastLine).removeClass('blockEdit');
                            $('#price-'+idLastLine).removeAttr('disabled');
                            $('#qty-'+idLastLine).addClass('blockEdit');
                            $('#create_order_submit').show();
                            $('#checkValidation').hide();

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

            if (reference.length < 13){
                toastr.error('Please check Barcode');
            }
        });
        function updateOrder(lineId, index) {
            if (confirm("Press a button!") == true) {

                $.ajax({
                    url: '/admin/power/get/line/json',
                    type: "POST",
                    data: {'lineId' : lineId },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            $('#linesOldProduct').html("");
                            $('#productOldData').hide();
                            if (data.line.products.length > 0 ){
                                $('#linesOldProduct').html("");
                                $('#linesOldProduct').append(data.contents);
                                $('#productOldData').show();
                            }
                            $('#history-content-lines').html(data.historyContents);
                            sortHistoryContentLines();

                            $('#add-order-form')[0].reset();
                            $("#create_order_canal").val('').trigger('change') ;
                            $("#create_order_status").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.line.canal + "']:not(:disabled)").prop("selected", true).trigger('change');
                            $("#create_order_status option[value='" + data.line.status + "']:not(:disabled)").prop("selected", true).trigger('change');
                            $("#shipper_type option[value='" + data.line.shipper + "']:not(:disabled)").prop("selected", true).trigger('change');
                            $("#create_order_clientDolibarr option[value='" + data.line.clientDolibarrId + "']:not(:disabled)").prop("selected", true).trigger('change');
                            var   typeShipper = $('#shipper_type').find('option:selected').attr('data-type');

                            if(typeShipper === "first" ){
                                changeAttribut(true, false, false)
                            }else if(typeShipper === "tunisiaExpress" ){
                                changeAttribut(false, true, false)
                            }else if(typeShipper === "jax" ){
                                changeAttribut(false, false, true)

                            }else{
                                changeAttribut(false, false, false)
                            }
                            
                            
                            
                            $("#create_order_canal option[value='" + data.line.canal + "']:not(:disabled)").prop("selected", true).trigger('change');
                            $("#create_order_status option[value='" + data.line.status + "']:not(:disabled)").prop("selected", true).trigger('change');

                            $('#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){
                                if (typeof data.line.products[0].reference !== "undefined" ){
                                    $('#reference-1').val(data.line.products[0].reference);
                                }else {
                                    $('#reference-1').val(data.line.products[0].barcode);
                                }
                                $('#qty-1').val(data.line.products[0].qty);
                                $('#price-1').val(data.line.products[0].price);
                            }

                            // 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 order 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 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();
            }
        });


        $(document).on('submit', '#add-order-forms', function (event) {
            let create = true ;
            var Form = $('#add-order-form');
            event.preventDefault();

            var form = $('#add-order-form')[0];
            var data = new FormData(this);
            var oldOrder = $('#create_order_submit').attr('data-old-order');

            if (create == true){
                $.ajax({
                    url: '/crm/order/duplicate/order/' + oldOrder ,
                    type: "POST",
                    data: data,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        console.log(data);
                        if (data.success) {
                            $('#btn-duplicate-'+oldOrder).remove()
                            $('#order-close-'+oldOrder).remove();

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




                            }

                        } else {

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


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

        });
        $(document).on('submit', '#add-order-form', function (event) {
            let create = true ;
            var Form = $('#add-order-form');
            event.preventDefault();

            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;
                update = true ;
            }
            if (create == true){
                $.ajax({
                    url: '/admin/power/update/line'+ 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');
                                        $('#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();
                                    }
                                });




                            }

                        } else {

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


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

        });

        // update status only
       // create_order_status
        $(document).on('click', '#update_only_status', function (event) {

            if (confirm(" Are you sure to update status for this order !") == true) {
                var oldOrder = $('#create_order_submit').attr('data-old-order');
                var oldIndex = $('#create_order_submit').attr('data-old-index');
                var status = $('#create_order_status').val();
                if (status.length < 1) {
                    toastr.error('Please check Status');
                    event.preventDefault();
                    return;
                }
                $.ajax({
                    url: '/admin/power/update/status/line',
                    type: "POST",
                    data: {'id': oldOrder, 'index': oldIndex, 'status': status},
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        // console.log(data);
                        if (data.success) {

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


                            }

                        } else {

                            toastr.error('An error has occurred : ' + data.message);
                        }


                    },
                    error: function () {
                        toastr.error('An error has occurred when creating this Order');
                    }
                });
            }else {
                event.preventDefault();
                return;
            }
        });
        $(document).on('change','#create_order_status', function () {
            var   lineStatusCategory = $('#create_order_status').find('option:selected').attr('data-category');
            if(lineStatusCategory === '1' ){
                $('#update_only_status').hide();
            }else {
                $('#update_only_status').show();
            }

        });


    </script>

    <!-- end create order -->

    <script>
        $(document).on('click', '#create_all_in_dolibarr', function(){
            if (confirm(" Are you sure to create all line in dolibarr !") == true) {
                rowData = $(this);
                $('#loadingIcon-last').show();
                $('#importIcon-last').hide();
                $.ajax({
                    url: '/admin/power/all/lines/to/dolibarr/json',
                    type: "POST",
                    data: {},
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        // console.log(data);
                        if (data.success) {
                            // initializeTodoList();
                            toastr.success('All line created in dolibarr ...');
                            toastr.success(data.data);
                            $('#loadingIcon-last').hide();
                            $('#importIcon-last').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 creating line in dolibarr ');
                    },
                    complete: function () {
                        $('#loadingIcon-last').hide();
                        $('#importIcon-last').show();
                    }
                });
            }else {
                return;
            }
        });

        $(document).ready(function () {

            // Function to fetch confirmed orders count
            function updateConfirmedLineCount() {
                var Toast = Swal.mixin({
                    toast: true,
                    position: 'center',
                    showConfirmButton: true,
                    timer: 180000,
                    customClass: {
                        popup: 'custom-toast-popup', // Apply a custom class for the background
                    }
                });
                $.ajax({
                    url: '/admin/power/get/confirmed/line/json', // The URL of your endpoint
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            $('#counterConfirmedLines').text(data.line); // Update the counter with the new count
                            if (data.line>9){
                                Toast.fire({
                                    icon: 'warning',
                                    title: ' - You need to Create all line in dolibarr ! '
                                });
                                // Add custom CSS (you can also add it in an external CSS file)
                                var style = document.createElement('style');
                                style.innerHTML = `
                                        .custom-toast-popup {
        background-color: #ff5722; /* Custom background color */
        color: white;  /* Text color */
        border-radius: 15px; /* Optional for rounded corners */
        animation: dance 2s ease-in-out infinite !important;
    }
    @keyframes dance {
        0% {
            transform: translateX(0) rotate(0deg);
        }
        25% {
            transform: translateX(-15px) rotate(-10deg); /* Reduced movement */
        }
        50% {
            transform: translateX(15px) rotate(10deg);  /* Reduced movement */
        }
        75% {
            transform: translateX(-15px) rotate(-10deg); /* Reduced movement */
        }
        100% {
            transform: translateX(0) rotate(0deg);  /* Back to original position */
        }
    }
                                    `;
                                document.head.appendChild(style);

                            }
                        } else {
                            console.log('Error fetching confirmed lines.');
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log('Request failed: ' + textStatus);
                    }
                });
            }

            // Update the counter every minute (60000 milliseconds)
            // Update the counter every 5 minute (300000 milliseconds)
            setInterval(updateConfirmedLineCount, 180000);

            // Optionally, call it once on page load to initialize the counter
            updateConfirmedLineCount();
        });

        $(document).ready(function () {
            $(document).on('select2:open', function () {
                setTimeout(function () { // Wait for Select2 to fully render
                    $("select[name='statusFilter'] option").each(function () {
                        var optionValue = $(this).attr("value"); // Get option value
                        var bgColor = $(this).attr("data-bg"); // Get data-bg attribute

                        if (optionValue && bgColor) {
                            // Build the correct ID selector for the corresponding <li>
                            var liSelector = "[id^='select2-statusFilter'][id$='-" + optionValue + "']";

                            // Apply the background style to the matching <li>
                            $(liSelector).css({
                                "background": bgColor,
                            });
                        }
                    });
                }, 50); // Small delay to ensure Select2 has rendered the list
            });
        });





    </script>
{% endblock %}