{% extends 'base.html.twig' %}
{% set titleName = "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' ) }} ">
     <!-- Select2 -->
     <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css' ) }} ">
 {% endblock %}
{% block content %}
    <style>
        .null {
            width: 0 !important;
            padding: 0 !important;
            color: transparent !important;
        }
        .compteurProduct {
            font-size: 27px;
            font-weight: bold;
            color: white !important;
        }
        .blockEdit{
            pointer-events: none;
            background: rgb(213, 217, 221);
        }

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

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

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

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

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

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

        .sub_task_append_area .custom_square {
            cursor: move;
        }

        .del_btn_d {
            display: inline-block;
            position: absolute;
            right: 20px;
            border: 2px solid #ccc;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
        }
    </style>
    <style>
        .bg-aramex{
            background: #dc3d24;
            color: white;
        }
        .bg-first{
            background: #00ad47;
            color: #fff;
        }
        .bg-jax{
            background: #183462;
            color: #fff;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 31px;
            right: 6px;
        }
        .select2-container--default .select2-selection--single {
            border: 1px solid #ced4da;
            padding: 0.46875rem 0.75rem;
            height: calc(2.25rem + 2px);
        }
        /* bug display none Select shipper then option*/
        li[aria-disabled='true'] {
            display: none;
        }


    </style>
    <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">
            <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_ORDER_MANAGER') %}
                                {% if clientDolibarrName is not null  %}
                                    <button id="btn-add-batch" type="button" class="btn  float-right btn-success btn-sm " data-toggle="modal" data-target="#modal-add-batch">
                                        Create Order
                                    </button>
                                {% endif %}
                            {% 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>Dolibar ID</th>
                                    <th>Client</th>
                                    <th>Created By</th>
                                    <th>Created At</th>
                                    <th>Status</th>
                                    <th>Shipper</th>
                                    <th>Canal</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> <a target="_blank" rel="noopener, noreferrer" href="https://{{ domain }}/commande/card.php?id={{ order.dolibarId }}" >
                                                {{ order.dolibarId }} </a>
                                        </td>
                                        <td>{{ order.clientDolibarrName }} </td>
                                        <td>{{ order.createdBy.firstName }} {{ order.createdBy.lastName }} </td>
                                        <td>{{ order.createdAt|date("d/m/Y") }} </td>
                                        <td class="batchName">
                                            <button class="btn
                                                {%  if order.status == 1 %}
                                                btn-secondary
                                                {% elseif order.status == 2 %}
                                                btn-warning
                                                {% elseif order.status == 3 %}
                                                btn-outline-success
                                                {% elseif order.status == 4 %}
                                                btn-success
                                                {% endif %}
                                                 btn-sm" >
                                                {%  if order.status == 1 %}
                                                    <i class="fas fa-pencil-alt"> </i>
                                                {% elseif order.status == 2 %}
                                                    <i class="fas   fa-thumbs-up"> </i>
                                                {% elseif order.status == 3 %}
                                                    <i class="fas fa-box"> </i>
                                                {% elseif order.status == 4 %}
                                                    <i class="fas fas fa-box"> </i>
                                                {% endif %}

                                                {{ order.arrayOfStatus[order.status] }}
                                            </button>

                                        </td>
                                        <td>{{ order.shipper.name }} </td>
                                        <td> {{ order.canal.name is defined ? order.canal.name : ''}} </td>
                                        <td class="project-actions text-center">
                                            <a class="btn btn-primary btn-sm viewbatch" data-id="{{ order.id }}" href="{{ path('app_admin_power_order_details', {'id' : order.id }) }}">
                                                <i class="fas fa-external-link-alt"> </i>
                                                View
                                            </a >

                                            {% if (is_granted('ROLE_ADMIN') or is_granted('ROLE_ORDER_MANAGER') or is_granted('ROLE_ORDER_DELETE')) and order.status == 1  %}
                                                {#   <button class="btn btn-info btn-sm editbatch "  data-id="{{ order.id }}">
                                                                <i class="fas fa-pencil-alt">
                                                                </i>
                                                                Edit
                                                            </button> #}

                                                <a class="btn btn-danger btn-sm" href="{{path('app_admin_power_order_delete', {'id' : order.id }) }} " onclick="return confirm('confirm DELETE');" data-id="{{ order.id }}">
                                                    <i class="fas fa-trash">
                                                    </i>
                                                    Delete
                                                </a>

                                            {% endif %}
                                            {% if is_granted('ROLE_ADMIN')  %}

                                                <a class="btn btn-warning btn-sm" href="{{path('app_admin_power_order_delete_forced', {'id' : order.id }) }} " onclick="return confirm('confirm DELETE');" data-id="{{ order.id }}">
                                                    <i class="fas fa-trash"> </i>
                                                    Delete Forced
                                                    <i class="fas fa-hands-wash"> </i>
                                                </a>

                                            {% endif %}
                                        </td>

                                    </tr>
                                {% endfor %}

                                </tbody>
                                <tfoot>
                                <tr>
                                    <th class="null"></th>
                                    <th>ID</th>
                                    <th>Dolibar ID</th>
                                    <th>Client</th>
                                    <th>Created By</th>
                                    <th>Created At</th>
                                    <th>Status</th>
                                    <th>Shipper</th>
                                    <th>Canal</th>
                                    <th>Action</th>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
    {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_ORDER_MANAGER') %}
        {% if clientDolibarrName is not null  %}
            <div class="modal fade" id="modal-add-batch" >
                <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">Create Order</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        {{ form_start(form) }}
                        <div class="card-body">

                            <div class="form-row ">
                                <div class="form-group col-12 col-md-3">
                                    <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="admin_create_account_lastname">Client Dolibarr</label>
                                    {{ form_widget(form.clientDolibarr) }}
                                </div>
                                <div class="form-group col-12 col-md-3">
                                    <label for="admin_create_account_lastname">Canal</label>
                                    {{ form_widget(form.canal) }}
                                </div>
                                <div class="form-group col-12 col-md-3">
                                    <label for="admin_create_account_lastname">Subscriber</label>
                                    {{ form_widget(form.subscriber) }}
                                </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>
                                        {{ form_widget(form.shippingPrice) }}
                                    </div>
                                    <div class="form-group col-12 col-md-4">
                                        <label for="role" >Full Name</label>
                                        {{ form_widget(form.fullName) }}
                                    </div>
                                    <div class="form-group col-12 col-md-3">
                                        <label for="role" >Phone</label>
                                        {{ form_widget(form.phone) }}
                                    </div>
                                    <div class="form-group col-12 col-md-3">
                                        <label for="role" >Phone Two</label>
                                        {{ form_widget(form.phoneTwo) }}
                                    </div>
                                </div>
                                <div class="form-row ">
                                    <div class="form-group col-12 col-md-6">
                                        <label for="role" >Address</label>
                                        {{ form_widget(form.address) }}
                                    </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</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</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>
                                        {{ form_widget(form.city) }}
                                    </div>
                                    <div class="form-group col-12 col-md-3">
                                        <label for="role" >Post Code</label>
                                        {{ form_widget(form.postCode) }}
                                    </div>



                                </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" >Barcode</label>
                                            <input class="form-control "  type="text" name="barcode-1"  id="barcode-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>
                                    {{ form_widget(form.notes) }}
                                </div>
                            </div>

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

                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            {{ form_widget(form.submit) }}
                            <a id="checkValidation" class=" btn btn-default action-button-previous finish bg-secondary float-right btn">Insertion terminée</a>
                        </div>

                        {{ form_end(form) }}



                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
        {% endif %}
    {% endif %}



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

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

        });
    </script>
    <script>
        $('.selectShipper option:first-child').html('Please choice one');
        //Bootstrap Duallistbox
        //  var box = $('.duallistbox').bootstrapDualListbox()
    </script>
    <!-- Order Manager  -->
    <script>
        // #linesProduct oneLineProduct
        $('#create_order_submit').hide();
        $('#checkValidation').hide();
        $(document).on('click', '.btn_round_add', function(event){
            rowData = $(this);
            var currentId = rowData.attr("data-id");
            var nextId = currentId + 1 ;
            var barcode =  $('#barcode-'+currentId).val().replace(' ','').trim();
            var qty =  $('#qty-'+currentId).val();
            if (barcode.length < 13){
                toastr.error('Please check Barcode');
            }
            if(qty > 0 ){
                var numberOfLines = $('.btn_round_add').length
                $('#barcodeSearchData').val(barcode);
                $.ajax({
                    url: '/admin/power/order/get/product/by/barcode/json',
                    type: "POST",
                    data: {'currentId' : currentId, 'barcode' : barcode, 'qty' : qty },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {

                            $('#oneLineProduct-'+currentId).attr('data-validated', true);
                            $('#barcode-'+currentId).addClass('blockEdit');
                            $('#price-'+currentId).val(data.price);
                            $('#price-'+currentId).removeClass('blockEdit');
                            $('#price-'+currentId).removeAttr('disabled');
                            $('#qty-'+currentId).addClass('blockEdit');
                            $('#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 barcode =  $('#barcode-'+idLastLine).val().replace(' ','').trim();
            var qty =  $('#qty-'+idLastLine).val();
            if(qty > 0 ){
                var numberOfLines = $('.btn_round_add').length
                $('#barcodeSearchData').val(barcode);
                $.ajax({
                    url: '/admin/power/order/get/product/by/barcode/json',
                    type: "POST",
                    data: {'currentId' : idLastLine, 'barcode' : barcode, 'qty' : qty },
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {

                            $('#oneLineProduct-'+idLastLine).attr('data-validated', true);
                            $('#barcode-'+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 (barcode.length < 13){
                toastr.error('Please check Barcode');
            }
        });


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

        // client control
        $('#productData').hide();
        $(document).on('change','#create_order_clientDolibarr', function () {
            var   clientDolibarr = $('#create_order_clientDolibarr').val();
            console.log(clientDolibarr);
            if(clientDolibarr === ""){
                $('#productData').hide();
                $('#checkValidation').hide();
            }else{
                $('#productData').show();
                $('#checkValidation').show();
            }



        });

    </script>

    <!-- check subscriber -->
    <script>

        $(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');
            }
        });
    </script>
    <!-- check subscriber -->

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