{% extends 'base.html.twig' %}
{% set titleName = "CRM - Salesforce" %}
{% 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>
        .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>Brand</label>
                                     <select class="form-control select2bs4" name="brand" style="width: 100%;">
                                         <option value="">Choice one</option>
                                         {% for brand in brands %}
                                             <option value="{{ brand }}"  {% if filter["brand"]  is defined and filter["brand"] == brand %} selected {% endif %}   >{{ brand }}</option>
                                         {% endfor %}

                                     </select>
                                 </div>
                                 <div class="col-12 col-md-2">
                                     <label>Source</label>
                                     <select class="form-control select2bs4" name="source" style="width: 100%;">
                                         <option value="">Choice one</option>
                                         <option value="website" {% if filter["source"]  is defined and filter["source"] == "website" %} selected {% endif %}   >Website</option>
                                         <option value="socialMedia" {% if filter["source"]  is defined and filter["source"] == "socialMedia" %} selected {% endif %}  >Social Media</option>

                                     </select>
                                 </div>
                                 <div class="col-12 col-md-2">
                                     <label for="exampleInputPassword1">Tentative</label>
                                     <input type="number"     class="form-control"  name="tentativeSales" id="exampleInputPassword1"     {% if filter["tentativeSales"] is defined  %}  value="{{ filter["tentativeSales"] }}" {% endif  %} placeholder="Sales Tentative">
                                 </div>
                                 <div class="col-12 col-md-2">
                                     <label>Closed</label>
                                     <select class="form-control select2bs4" name="closed" style="width: 100%;">
                                         <option value="">Choice one</option>
                                         <option value="yes" {% if filter["closed"]  is defined and filter["closed"] == "yes" %} selected {% endif %}   >Yes</option>
                                         <option value="no" {% if filter["closed"]  is defined and filter["closed"] == "no" %} selected {% endif %}  >No</option>

                                     </select>
                                 </div>
                                 <div class="col-12 col-md-2">
                                     <label>Reviews</label>
                                     <select class="form-control select2bs4" id="reviewsSelect"  name="reviews" style="width: 100%;">
                                         <option value="">Choice one</option>
                                         {% set display = "d-none" %}
                                         <option value="yes" {% if filter["reviews"]  is defined and filter["reviews"] == "yes" %} selected {% set display = "" %} {% endif %}   >Yes</option>
                                         <option value="no" {% if filter["reviews"]  is defined and filter["reviews"] == "no" %} selected {% endif %}  >No</option>

                                     </select>
                                 </div>
                                 <div class="filterReviews {{ display }} col-12 col-md-2">
                                     <label>Process</label>
                                     <div class="input-group">
                                         <div class="input-group-prepend">
                                            <span class="input-group-text">
                                              <input type="checkbox" name="processCheckbox" {% if filter["processCheckbox"] is defined  %}  checked {% endif  %}>
                                            </span>
                                         </div>
                                         <input type="number" name="process" class="form-control" min="1" max="5" {% if filter["process"] is defined  %}  value="{{ filter["process"] }}" {% endif  %} >
                                     </div>
                                 </div>
                                 <div class="filterReviews {{ display }} col-12 col-md-2">
                                     <label>Shipping</label>
                                     <div class="input-group">
                                         <div class="input-group-prepend">
                                            <span class="input-group-text">
                                              <input type="checkbox" name="shippingCheckbox" {% if filter["shippingCheckbox"] is defined  %}  checked {% endif  %}>
                                            </span>
                                         </div>
                                         <input type="number" name="shipping" class="form-control" min="1" max="5" {% if filter["shipping"] is defined  %}  value="{{ filter["shipping"] }}" {% endif  %} >
                                     </div>
                                 </div>
                                 <div class="filterReviews {{ display }} col-12 col-md-2">
                                     <label>Product</label>
                                     <div class="input-group">
                                         <div class="input-group-prepend">
                                            <span class="input-group-text">
                                              <input type="checkbox" name="productCheckbox" {% if filter["productCheckbox"] is defined  %}  checked {% endif  %}>
                                            </span>
                                         </div>
                                         <input type="number" name="product" class="form-control" min="1" max="5" {% if filter["product"] is defined  %}  value="{{ filter["product"] }}" {% endif  %} >
                                     </div>
                                 </div>
                                 <div class="filterReviews {{ display }} col-12 col-md-1">
                                     <label>Possibility</label>
                                     <select class="form-control select2bs4" name="possibility" style="width: 100%;">
                                         <option value="">Choice one</option>
                                         <option value="yes" {% if filter["possibility"]  is defined and filter["possibility"] == "yes" %} selected {% endif %}   >Yes</option>
                                         <option value="no" {% if filter["possibility"]  is defined and filter["possibility"] == "no" %} selected {% endif %}  >No</option>

                                     </select>
                                 </div>
                                 <div class="filterReviews {{ display }} col-12 col-md-1">
                                     <label>Note</label>
                                     <select class="form-control select2bs4" name="haveNote" style="width: 100%;">
                                         <option value="">Choice one</option>
                                         <option value="yes" {% if filter["haveNote"]  is defined and filter["haveNote"] == "yes" %} selected {% endif %}   >Yes</option>
                                         <option value="no" {% if filter["haveNote"]  is defined and filter["haveNote"] == "no" %} selected {% endif %}  >No</option>

                                     </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>

                            {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_BREVO_VISITOR_MANAGER') %}
                                <a href="{{ path('app_admin_power_crm_fidelity') }}" target="_blank" rel="noopener, noreferrer"   class="btn float-right btn-info  btn-sm mr-3"><i class="fas fa-external-link-alt"> </i> CRM </a>
                                <a href="{{ path('app_brevo_visitor') }}" target="_blank" rel="noopener, noreferrer"  class="btn float-right btn-secondary  btn-sm mr-3"><i class="fas fa-external-link-alt"> </i> Visitors </a>
                            {% endif %}
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th class="null"></th>
                                    <th>ID</th>
                                    <th>Delivered At</th>
                                    <th>Shipper</th>
                                    <th>Region</th>
                                    <th title="Shipping Price">S Price</th>
                                    <th title="Total">Total</th>
                                    <th>Source</th>
                                    <th>FullName</th>
                                    <th>Phone</th>
                                    <th>Tentative</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>

                                {% for order in orders %}
                                    <tr id="batchItem-{{ order.id }}">
                                        <td class="null"></td>
                                        <td>{{ order.id }}</td>
                                        <td>{{ order.shippedAt|date("d/m/Y") }} </td>
                                        <td>{{ order.shipper.name }}[{{ order.shipper.type }}] </td>
                                        {% set region = order.region is defined ? order.region : '' %}

                                        {% if order.region is defined and order.shipper.type  == "jax" %}
                                            {% set region = region_jax[region] %}
                                        {% elseif order.region is defined and  order.shipper.type  == "tunisiaExpress" %}
                                            {% set region = region_tunisia_express[region] %}
                                        {% endif %}
                                        <td>{{ region }}</td>
                                        <td> {{ order.shippingPrice }}   </td>
                                        <td>
                                            {% set total = 0 %}
                                            {% for item in order.data %}
                                                {% set total = total + (item.price * item.qty) %}
                                            {% endfor %}
                                            {%  if order.voucher is not null and order.voucher.application == constant('App\\Entity\\Power\\Voucher::APPLICATION_TYPE_PRODUCT') %}
                                                {%  if order.voucher.discountType == constant('App\\Entity\\Power\\Voucher::DISCOUNT_TYPE_FIX')  %}
                                                    {% set total = total - order.voucher.discountValue %}
                                                {% elseif order.voucher.discountType == constant('App\\Entity\\Power\\Voucher::DISCOUNT_TYPE_PERCENT') %}
                                                    {% set total = total - (total * (order.voucher.discountValue/100)) %}
                                                {% endif %}
                                                {% set total = (total < 0) ? 0 : total %}
                                            {% endif %}
                                            {{ total }}
                                        </td>
                                        <td>
                                            {% if order.subscriber is defined and order.subscriber is not null %}
                                                <a target="_blank" rel="noopener, noreferrer"  class="btn btn-primary btn-sm "
                                                   style="   background: #7ddb59;  border-color: #7ce155; "
                                                   href="https://conversations-app.brevo.com/conversations/{{ order.subscriber }}" >
                                                    <i class="fas fa-external-link-alt"> </i>
                                                    Brevo
                                                </a >
                                            {% elseif order.magentoId is defined and order.magentoId is not null %}
                                                Website
                                            {% endif %}

                                        </td>
                                        <td>{{ order.fullName is defined ? order.fullName : ''  }}</td>
                                        <td>{{ order.phone is defined ? order.phone : ''  }}</td>
                                        <td class="text-center">
                                            <a title="Get history"  data-id="{{ order.id }}"  class="btn_round btn-dark compteurProduct tentativeHistory" id="nbr-tentative-crm-{{ order.id }}" >
                                                {{ order.crmSalesNbrTentative }}
                                            </a>
                                            <a   id="nbr-tentative-crm-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>
                                            {% if order.reviews is not null %}
                                            <a title="Get reviews content" style="background: #10AD47"  data-id="{{ order.reviews.id }}"   data-order-id="{{ order.id }}"  class="btn_round  compteurProduct reviewsContent" >
                                                <i class="fas fa-comments"> </i>
                                            </a>
                                            {% endif %}
                                            <a title="Remember At" style="background: #6610f2"  data-id="{{ order.id }}"   data-order-id="{{ order.id }}"  class="btn_round  compteurProduct rememberAt" >

                                                <i class="fas fa-redo"> </i>
                                            </a>
                                        </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>
                                                <a  target="_blank" rel="noopener, noreferrer"  class="btn btn-primary btn-sm viewbatch" data-id="{{ order.id }}" href="{{ path('app_admin_power_crm_order_details_salesforce', {'id' : order.id }) }}">
                                                    <i class="fas fa-external-link-alt"> </i>
                                                    View
                                                </a >

                                            <button id="btn-duplicate-{{ order.id }}" class="btn btn-warning btn-sm duplicateOrder "  onclick="duplicateOrder({{ order.id}}, {{ order.id }});" data-id="{{ order.id }}">
                                                <i class="fas fa-copy">
                                                </i>
                                                Duplicate
                                            </button>
                                            <button class="btn btn-danger  btn-sm " id="order-close-{{ order.id }}"   onclick="closeOrder({{ order.id }});" data-id="{{ order.id }}" > <i class="fas fa-hands-helping"   > </i> Close</button>

                                        </td>

                                    </tr>
                                {% endfor %}

                                </tbody>
                                <tfoot>
                                <tr>
                                    <th class="null"></th>
                                    <th>ID</th>
                                    <th>Delivered At</th>
                                    <th>Shipper</th>
                                    <th>Region</th>
                                    <th title="Shipping Price">S Price</th>
                                    <th title="Total">Total</th>
                                    <th>Source</th>
                                    <th>FullName</th>
                                    <th>Phone</th>
                                    <th>Tentative</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">
                <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>

                <form name="add-order" method="post" id="add-order-form" enctype="multipart/form-data" >
                    <div class="card-body">
                        <div class="form-row">
                            <div class="form-group col-12 col-md-2">
                                <label for="admin_create_account_firstname">Shipper</label>
                                <select class="form-control select2 " name="shipper" 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-3">
                                <label for="create_order_clientDolibarr">Client Dolibarr </label>
                                <select class="form-control select2 " name="create_order_clientDolibarr" id="create_order_clientDolibarr" required  style="width: 100%;">
                                    <option value="">Please choice one</option>
                                    {% for client in clientDolibarr['data'] %}
                                        <option data-id="{{ client["id"] }}" value="{{ client["id"] }}" >{{ client["name"] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group col-12 col-md-3">
                                <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-2">
                                <label for="create_order_subscriber">Subscriber</label>
                                <input type="text" id="create_order_subscriber" name="subscriber" placeholder="Subscriber" class="form-control">
                            </div>
                            <div class="form-group col-12 col-md-2">
                                <label for="admin_create_account_firstname">Voucher</label>
                                <input type="text" id="voucher" name="voucher" placeholder="Code" class="form-control">
                            </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>
                        <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 In Dolibarr</button>
                        <a id="checkValidation" class=" btn btn-default action-button-previous finish bg-secondary float-right btn">Insertion terminée</a>
                    </div>

                </form>



            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade " id="modal-remember">
        <div class="modal-dialog ">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-center"  >Add remember for Order : <span id="orderIdRemember"></span>  </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" action="" id="form-add-remember"  name="form-add-remember"  data-id="">
                    <div class="modal-body">

                        <div class="form-group">
                            <label>Date:</label>
                            <div class="input-group date" id="dateRemember" data-target-input="nearest">
                                <input type="text" name="input-date-remember" class="form-control datetimepicker-input" data-target="#dateRemember" required/>
                                <div class="input-group-append" data-target="#dateRemember" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button id="btn-add-remember" name="btn-add-remember" value="true" type="submit" class="btn btn-primary">Send</button>
                    </div>
                </form>
            </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>

        function closeOrder(orderId) {

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

                $.ajax({
                    url: '/admin/power/crm/close/order/salesforce/json',
                    type: "POST",
                    data: {'orderId' : orderId},
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            $('#order-close-'+orderId).remove();
                            $('#btn-duplicate-'+orderId).remove();
                            $('#btn-add-review-order-'+orderId).remove();
                            $('#nbr-tentative-crm-btn-'+orderId).remove();
                            toastr.success(data.message);
                        } else {
                            toastr.error(data.message);
                            if (data.message == 404){
                                toastr.error(data.message);
                                $(location).attr('href','/login');
                            }
                        }


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

            } else {
                console.log("You canceled !"+id)
            }
        }
        $(document).on('click', '.detailsOrder', function () {
            rowData = $(this);
            var orderId = rowData.attr("data-id");
            $.ajax({
                url: '/admin/power/batch/order/detail/json',
                type: "GET",
                data: {'orderId' : orderId},
                dataType: "json",
                async: true,
                success: function (data) {
                    if (data.success) {
                        console.log(data);
                        $('#dataBody').html(data.template);
                        $('#modalTitleSearch').html('More Details for Order : '+orderId);
                        $('#modal-details').modal('show');
                    } else {
                        toastr.error(data.message);
                        if (data.message == 404){
                            toastr.error(data.message);
                            $(location).attr('href','/login');
                        }
                    }


                },
                error: function () {
                    toastr.error('An error has occurred when import This Order');
                }
            });
        });
        function tentative(orderId) {

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

                $.ajax({
                    url: '/admin/power/crm/order/increment/nbr/tentative/salesforce/json',
                    type: "POST",
                    data: {'orderId' : orderId},
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            toastr.success(data.message);
                            $('#nbr-tentative-crm-'+orderId).html(data.data.crmNbrTentative);
                        } 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 orderId = rowData.attr("data-id");
            $.ajax({
                url: '/admin/power/crm/order/tentative/salesforce/history/json',
                type: "GET",
                data: {'orderId' : orderId},
                dataType: "json",
                async: true,
                success: function (data) {
                    if (data.success) {
                        console.log(data);
                        $('#dataBody').html(data.template);
                        $('#modalTitleSearch').html('Tentative history for Order : '+orderId);
                        $('#modal-details').modal('show');
                    } else {
                        toastr.error(data.message);
                        if (data.message == 404){
                            toastr.error(data.message);
                            $(location).attr('href','/login');
                        }
                    }


                },
                error: function () {
                    toastr.error('An error has occurred when import This Order');
                }
            });
        });
        $(document).on('click', '.reviewsContent', function () {
            rowData = $(this);
            var reviewId = rowData.attr("data-id");
            var orderId = rowData.attr("data-order-id");
            $.ajax({
                url: '/admin/power/crm/order/reviews/content/json',
                type: "GET",
                data: {'reviewId' : reviewId},
                dataType: "json",
                async: true,
                success: function (data) {
                    if (data.success) {
                        console.log(data);
                        $('#dataBody').html(data.template);
                        $('#modalTitleSearch').html('Reviews Content for order : '+orderId);
                        $('#modal-details').modal('show');
                    } else {
                        toastr.error(data.message);
                        if (data.message == 404){
                            toastr.error(data.message);
                            $(location).attr('href','/login');
                        }
                    }


                },
                error: function () {
                    toastr.error('An error has occurred when import This Order');
                }
            });
        });
        //#reviewsSelect
        $(document).on('change','#reviewsSelect', function () {
            if (this.value == "yes") {
                $(document).find('.filterReviews').removeClass('d-none');
            } else  {
                $(document).find('.filterReviews').addClass('d-none');
            }
        });

        $(document).on('click', '.rememberAt', function () {
            $('#form-add-remember').trigger("reset");
            rowData = $(this);
            var orderId = rowData.attr("data-id");
            $('#form-add-remember').attr('data-id', orderId);
            $('#orderIdRemember').html(orderId);
            $('#modal-remember').modal('show');
        });
        $(document).on('submit', '#form-add-remember', function (event) {
            var id = rowData.attr("data-id");
            event.preventDefault();

            var form = $('#form-add-review')[0];
            var dataReview = new FormData(this);
            dataReview.append("orderId", id);

            $.ajax({
                url: '/admin/power/crm/order/remember/json' ,
                type: "POST",
                data: dataReview,
                headers: {"name": "remember"},
                processData: false,
                contentType: false,
                dataType: "json",
                async: true,
                success: function (data) {
                    if (data.success) {
                        $('#modal-remember').modal('hide');
                        // reset data
                        $('#form-add-remember').trigger("reset");


                        toastr.success('Date updated successfully ...');
                    } else {
                        toastr.error('An error has occurred when updating date : ' + data.message);
                    }


                },
                error: function () {
                    toastr.error('An error has occurred when updating date');
                }
            });
            $('#modal-review').modal('hide');

        });
    </script>

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

    <!-- start create order -->
    <script>
        // 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");
            $('#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');
            }
        });
        $(document).on('focusout paste', '#create_order_subscriber', function(event){
            var subscriber = $('#create_order_subscriber').val();
            if ( subscriber.length > 0  ){
                $.ajax({
                    url: '/brevo/visitor/by/thread_id/json',
                    type: "POST",
                    data: {'subscriber' : subscriber },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            $('#create_order_fullName').val(data.visitor.fullName)
                            $('#create_order_phone').val(data.visitor.phone)
                            $('#create_order_address').val(data.visitor.address)
                            $('#create_order_city').val(data.visitor.city)
                            $("#create_order_region option[value='" + data.visitor.region.id + "']:not(:disabled)").prop("selected", true).trigger('change');

                            toastr.success('Visitor imported successfully !');
                        } else {

                            $('#create_order_fullName').val('')
                            $('#create_order_phone').val('')
                            $('#create_order_address').val('')
                            $('#create_order_city').val('')
                            $("#create_order_region option:selected").prop("selected", false).trigger('change');
                            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');
                    }
                });
            }

            if ( subscriber.length < 17  && subscriber.length > 0 ){
                toastr.error('Please check subcriber');
            }
        });
        $(document).on('focusout paste', '#voucher', function(event){
            var code = $('#voucher').val();
            if ( code.length > 0  ){
                $.ajax({
                    url: '/admin/power/voucher/check',
                    type: "POST",
                    data: {'check' : "validation"  ,'code' : code },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            toastr.success('Voucher valid !');
                        } 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');
                    }
                });
            }

            if ( subscriber.length < 17  && subscriber.length > 0 ){
                toastr.error('Please check subcriber');
            }
        });
        function duplicateOrder(orderId, index) {
            if (confirm("Press a button!") == true) {

                $.ajax({
                    url: '/admin/power/crm/get/order/json',
                    type: "POST",
                    data: {'orderId' : orderId},
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            $('#linesOldProduct').html("");
                            $('#productOldData').hide();
                            if (data.order.data.length > 1 ){
                                $('#linesOldProduct').html("");
                                $('#linesOldProduct').append(data.contents);
                                $('#productOldData').show();
                            }
                            $('#add-order-form')[0].reset();
                            $("#create_order_canal").val('').trigger('change') ;
                            $("#create_order_region").val('').trigger('change') ;
                            $("#shipper_type").val('').trigger('change') ;
                            $("#create_order_clientDolibarr").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
                            console.log(data.order)
                            $("#create_order_canal option[value='" + data.order.canal + "']:not(:disabled)").prop("selected", true).trigger('change');
                            $("#shipper_type option[value='" + data.order.shipper + "']:not(:disabled)").prop("selected", true).trigger('change');
                            $("#create_order_clientDolibarr option[value='" + data.order.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_subscriber').val(data.order.subscriber);
                            $('#create_order_shippingPrice').val(data.order.shippingPrice);
                            $('#create_order_fullName').val(data.order.fullName);
                            $('#create_order_phone').val(data.order.phone);
                            $('#create_order_phoneTwo').val(data.order.phoneTwo);
                            $('#create_order_address').val(data.order.address);
                            $("#create_order_region option[value='" + data.order.region + "']:not(:disabled)").prop("selected", true).trigger('change');
                            $('#create_order_city').val(data.order.city);
                            // lines
                            if (typeof data.order.data[0].reference !== "undefined" ){
                                $('#reference-1').val(data.order.data[0].reference);
                            }else {
                                $('#reference-1').val(data.order.data[0].barcode);
                            }
                            $('#qty-1').val(data.order.data[0].qty);
                            $('#price-1').val(data.order.data[0].price);

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

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

                            toastr.success('Data imported for order '+orderId);
                        } else {
                            toastr.error(data.message);
                            if (data.message == 404){
                                toastr.error(data.message);
                                $(location).attr('href','/login');
                            }
                        }


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

            } else {
                console.log("You canceled !"+id)
            }
        }
        $(document).on('submit', '#add-order-form', function (event) {
            console.log('-------------- add ------------------->');
            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');
                    }
                });
            }

        });
        
    </script>

    <!-- end create order -->


{% endblock %}