{% extends 'base.html.twig' %}
{% set titleName = "Order Details " %}
{% block title %} POWER DATA | Order : {{ order.id }} {% endblock %}
{% block page %} {{ order.id }} {% endblock %}
{% block breadcrumb %} {% if titleName != "Home" %} {{ titleName }} / {{ order.id }} {% endif %} {% endblock %}
{% block css %}


{% endblock %}

{% block content %}
    <!-- Main Alert -->
    <section class="content">
        <div class="container-fluid">

            {% for message in app.flashes('success') %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
            {% for message in app.flashes('error') %}
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <!-- Main content -->
                    <div class="invoice p-3 mb-3">
                        <div class="row">
                            <div class="col-12">
                                <h4>
                                    <i class="fas fa-globe"></i> {{ order.clientDolibarrName }}
                                    <small class="float-right">{{ order.createdAt|date }}</small>
                                </h4>
                            </div>
                            <!-- /.col -->
                        </div>
                        <div class="row invoice-info">
                            <div class="col-sm-2 invoice-col">
                                <strong>Created By </strong>
                                <address>
                                    {{ order.createdBy.firstName }} {{ order.createdBy.lastName }}
                                </address>
                            </div>
                            <div class="col-sm-2 invoice-col">
                                <strong>Shipper</strong>
                                <address>
                                    {{ order.shipper.name }}
                                </address>
                            </div>
                            <div class="col-sm-1 invoice-col">
                                <strong>Status</strong>
                                <address>
                                    {{ order.arrayOfStatus[order.status] }}
                                </address>
                            </div>
                            <div class="col-sm-1 invoice-col">
                                <strong>Dolibarr Id</strong>
                                <address>
                                    {{ order.dolibarId }}
                                </address>
                            </div>
                            {% if order.canal.name is defined %}
                            <div class="col-sm-1 invoice-col">
                                <strong>Canal</strong>
                                <address>
                                    <a href="#{{ order.canal.id }}">{{ order.canal.name }}</a>
                                </address>
                            </div>
                            {% endif %}

                            {% if order.trackingCode is not null %}
                            <div class="col-sm-1 invoice-col">
                                <strong>Track Id</strong>
                                <address>
                                    {{ order.trackingCode }}
                                </address>
                            </div>
                            {% endif %}
                            <div class="col-sm-3 invoice-col ">
                                {% if order.status == 1 %}
                                    {% if (is_granted('ROLE_ADMIN') or is_granted('ROLE_ORDER_MANAGER') or is_granted('ROLE_ORDER_DELETE')) %}

                                        <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 %}
                                {% elseif order.status == 3  %}
                                    {% if order.shipper.type  in ['first','tunisiaExpress', "jax"]  %}
                                        <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#modal-resendToFirst">
                                            Renvoyer
                                        </button>
                                    {% endif %}
                                {% elseif order.status == 4  %}
                                    {% if order.shipper.type == 'first'  %}
                                        <a target="_blank" rel="noopener, noreferrer" class="btn" href="{{ order.urlFirstPdf }}" style="color: #10AD47;  border: solid 1px #10AD47;  float: left; ">
                                            <img src="/assets/img/first.png" style="width: 40px; height: 1.4rem;"> Print&nbsp; <i class="fas fa-print"></i> &nbsp;</a>
                                    {% endif %}
                                    {% if order.shippingStatus is null and order.trackingCode  is not null and order.shipper.type == 'tunisiaExpress' %}
                                        <button type="button" class="btn btn-dark float-right"  >
                                             Not yet validated
                                        </button>
                                    {% endif %}
                                {% endif %}

                                {% if order.shippingStatus is not null %}
                                    <button type="button" class="btn btn-warning float-right"  >
                                        {{ order.shippingStatus }}
                                    </button>
                                {% endif %}
                            </div>
                            <!-- /.col -->
                        </div>
                        <div class="row">
                            <div class="col-12 table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>Barcode</th>
                                        <th>Product</th>
                                        <th>P.U</th>
                                        <th>Qty</th>
                                        <th>Subtotal</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% set subtotal = 0 %}
                                   {% for product in order.data %}
                                       {% set subtotal = subtotal + ( product.price * product.qty) %}
                                    <tr class="text-bold"  >
                                        <td> {{ product.barcode is defined ? product.barcode : '' }}</td>
                                        <td>{{ product.name is defined ? product.name : '' }}</td>
                                        <td>{{ product.price is defined ? product.price : '' }}</td>
                                        <td>{{ product.qty is defined ? product.qty : ''}}</td>
                                        <td>{{ product.price * product.qty }}</td>
                                    </tr>
                                    {% endfor %}
                                    {%  if order.voucher is not null and order.voucher.application == constant('App\\Entity\\Power\\Voucher::APPLICATION_TYPE_PRODUCT') %}
                                        {% set voucherAmount = 0 %}
                                        {%  if order.voucher.discountType == constant('App\\Entity\\Power\\Voucher::DISCOUNT_TYPE_FIX')  %}
                                            {% set voucherAmount = order.voucher.discountValue %}
                                            {% set subtotal = subtotal - order.voucher.discountValue %}
                                        {% elseif order.voucher.discountType == constant('App\\Entity\\Power\\Voucher::DISCOUNT_TYPE_PERCENT') %}
                                            {% set voucherAmount = subtotal * (order.voucher.discountValue/100) %}
                                            {% set subtotal = subtotal - (subtotal * (order.voucher.discountValue/100)) %}
                                        {% endif %}
                                    {% if subtotal < 0 %}
                                        {% set subtotal = 0 %}
                                    {% endif %}

                                        <tr class="text-bold  " style="background: palegoldenrod;" >
                                            <td> {{ order.voucher.code }}</td>
                                            <td>{{ order.voucher.name}}</td>
                                            <td>  </td>
                                            <td>  </td>
                                            <td>-{{  voucherAmount }}</td>
                                        </tr>
                                    {%  elseif order.voucher is not null and order.voucher.application == constant('App\\Entity\\Power\\Voucher::APPLICATION_TYPE_SHIPPING') %}

                                        <tr class="text-bold  " style="background: palegoldenrod;" >
                                            <td> {{ order.voucher.code }}</td>
                                            <td>{{ order.voucher.name}}</td>
                                            <td>  </td>
                                            <td>  </td>
                                            <td> </td>
                                        </tr>
                                    {% endif %}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.col -->
                        </div>
                        <div class="row">
                            <!-- accepted payments column -->
                            <div class="col-6">
                                <p class="lead">Note :</p>
                                <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">
                                    {{ order.notes }}
                                </p>
                            </div>
                            <!-- /.col -->
                            <div class="col-6">
                                <p class="lead">Details</p>

                                <div class="table-responsive">
                                    <table class="table">
                                        <tr>
                                            <th style="width:50%">Subtotal:</th>
                                            <td>{{ subtotal }}</td>
                                        </tr>
                                        <tr>
                                            <th>Shipping:</th>
                                            <td>{{ order.shippingPrice }}</td>
                                        </tr>
                                        <tr>
                                            <th>Total:</th>
                                            <td>{{ subtotal + order.shippingPrice  }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <!-- /.col -->
                        </div>
                    </div>
                    {% if tunisiaExpressData is not null %}
                    <div class="invoice p-3 mb-3">
                        <div class="row">
                            <div class="col-12">
                                <h4>
                                    <i class="fas fa-truck"></i> Tunisia Express History
                                </h4>
                            </div>
                            <div class="col-12">
                                    <div class="table-responsive" style="height: 35vh;">
                                        <table class="table table-head-fixed table-striped">
                                            <thead>
                                            <tr>
                                                <th>id</th>
                                                <th>Code</th>
                                                <th>Label</th>
                                                <th>Date</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {% for item in tunisiaExpressData|reverse %}
                                                <tr class="text-bold"  >
                                                    <td> {{ item.id is defined ?  item.id : '' }}</td>
                                                    <td> {{ item.status_code is defined ?  item.status_code : '' }}</td>
                                                    <td> {{ item.status_label is defined ?  item.status_label : '' }}</td>
                                                    <td> {{ item.update_date is defined ?  item.update_date : '' }}</td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    <!-- /.invoice -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->




    </section>

    {% if  order.status == 3 and order.shipper.type == 'first' %}
        <style>
            .borderFirst {
                border: 3px solid var(--green)!important;
            }
        </style>
        <div class="modal fade" id="modal-resendToFirst">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Edit Shipper details</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form method="post" action="" name="form-update-shipper-details">
                    <div class="modal-body">
                        <fieldset id="firstData" class="form-group  borderFirst  p-3" style="">
                            <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" value="{{ order.shippingPrice is defined ? order.shippingPrice : ''  }}" style="pointer-events: none; background: rgb(213, 217, 221);"  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"  value="{{ order.fullName is defined ? order.fullName : ''  }}"  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"  value="{{ order.phone is defined ? order.phone : ''  }}"  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"  value="{{ order.phoneTwo is defined ? order.phoneTwo : ''  }}"  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"  value="{{ order.address is defined ? order.address : ''  }}"  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" name="region" id="create_order_region" required="">
                                        <option value="">Please choice one</option>
                                        <option value="Beja" {{ order.region == 'Beja' ? 'selected' : ''  }}  > Beja</option>
                                        <option value="Le Kef"  {{ order.region == 'Le Kef' ? 'selected' : ''  }}  >Le Kef</option>
                                        <option value="Mahdia"  {{ order.region == 'Mahdia' ? 'selected' : ''  }} >Mahdia</option>
                                        <option value="La Manouba"  {{ order.region == 'La Manouba' ? 'selected' : ''  }} >La Manouba</option>
                                        <option value="Medenine" {{ order.region == 'Medenine' ? 'selected' : ''  }} >Medenine</option>
                                        <option value="Tataouine"  {{ order.region == 'Tataouine' ? 'selected' : ''  }} >Tataouine</option>
                                        <option value="Tozeur" {{ order.region == 'Tozeur' ? 'selected' : ''  }} >Tozeur</option>
                                        <option value="Tunis" {{ order.region == 'Tunis' ? 'selected' : ''  }} >Tunis</option>
                                        <option value="Jendouba" {{ order.region == 'Jendouba' ? 'selected' : ''  }} >Jendouba</option>
                                        <option value="Bizerte" {{ order.region == 'Bizerte' ? 'selected' : ''  }} >Bizerte</option>
                                        <option value="Siliana" {{ order.region == 'Siliana' ? 'selected' : ''  }} >Siliana</option>
                                        <option value="Kairouan" {{ order.region == 'Kairouan' ? 'selected' : ''  }} >Kairouan</option>
                                        <option value="Kasserine" {{ order.region == 'Kasserine' ? 'selected' : ''  }} >Kasserine</option>
                                        <option value="Sidi Bouzid" {{ order.region == 'Sidi Bouzid' ? 'selected' : ''  }} >Sidi Bouzid</option>
                                        <option value="Sousse" {{ order.region == 'Sousse' ? 'selected' : ''  }} >Sousse</option>
                                        <option value="Monastir" {{ order.region == 'Monastir' ? 'selected' : ''  }} >Monastir</option>
                                        <option value="Ariana" {{ order.region == 'Ariana' ? 'selected' : ''  }} >Ariana</option>
                                        <option value="Sfax" {{ order.region == 'Sfax' ? 'selected' : ''  }} >Sfax</option>
                                        <option value="Gafsa" {{ order.region == 'Gafsa' ? 'selected' : ''  }} >Gafsa</option>
                                        <option value="Zaghouan" {{ order.region == 'Zaghouan' ? 'selected' : ''  }} >Zaghouan</option>
                                        <option value="Kebili" {{ order.region == 'Kebili' ? 'selected' : ''  }} >Kebili</option>
                                        <option value="Gabes" {{ order.region == 'Gabes' ? 'selected' : ''  }} >Gabes</option>
                                        <option value="Ben Arous" {{ order.region == 'Ben Arous' ? 'selected' : ''  }} >Ben Arous</option>
                                        <option value="Nabeul" {{ order.region == 'Nabeul' ? 'selected' : ''  }} >Nabeul</option>
                                    </select>
                                </div>
                                <div class="form-group col-12 col-md-3">
                                    <label for="role">City</label>
                                    <input type="text"  value="{{ order.city is defined ? order.city : '' }}"  id="create_order_city" name="city" placeholder="Type a city" class="form-control" required="">
                                </div>

                            </div>
                        </fieldset>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button name="update-shipper-details" value="true" type="submit" class="btn btn-primary">Renvoyer</button>
                    </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
    {% elseif  order.status == 3   and order.shipper.type == 'tunisiaExpress'  %}

        <style>
            .borderTunisiaExpress{
                border: 3px solid var(--red)!important;
            }
        </style>
        <div class="modal fade" id="modal-resendToFirst">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Edit Shipper details</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form method="post" action="" name="form-update-shipper-details">
                        <div class="modal-body">
                            <fieldset id="firstData" class="form-group  borderTunisiaExpress  p-3" style="">
                                <legend class="w-auto px-2">Tunisia Express Data</legend>
                                <div class="form-row ">
                                    <div class="form-group col-12 col-md-2">
                                        <label for="role">Shipping Price</label>
                                        <input type="text" value="{{ order.shippingPrice is defined ? order.shippingPrice : ''  }}" style="pointer-events: none; background: rgb(213, 217, 221);"   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"  value="{{ order.fullName is defined ? order.fullName : ''  }}"  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"  value="{{ order.phone is defined ? order.phone : ''  }}"  id="create_order_phone" name="phone" placeholder="Type phone" class="form-control" required="">
                                    </div>
                                </div>
                                <div class="form-row ">
                                    <div class="form-group col-12 col-md-6">
                                        <label for="role">Address</label>
                                        <input type="text"  value="{{ order.address is defined ? order.address : ''  }}"  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" name="region" id="create_order_region" required="">
                                            <option value="">Please choice one</option>
                                            <option  class="region-tunisiaExpress" value="8"  {{ order.region == '8' ? 'selected' : ''  }}  > Beja</option>
                                            <option  class="region-tunisiaExpress" value="10"  {{ order.region == '10' ? 'selected' : ''  }}  >Le Kef</option>
                                            <option  class="region-tunisiaExpress" value="17"  {{ order.region == '17' ? 'selected' : ''  }}  >Mahdia</option>
                                            <option  class="region-tunisiaExpress" value="4"  {{ order.region == '4' ? 'selected' : ''  }}  >La Manouba</option>
                                            <option  class="region-tunisiaExpress" value="23"  {{ order.region == '23' ? 'selected' : ''  }}  >Medenine</option>
                                            <option  class="region-tunisiaExpress" value="24"  {{ order.region == '24' ? 'selected' : ''  }}  >Tataouine</option>
                                            <option  class="region-tunisiaExpress" value="20"  {{ order.region == '20' ? 'selected' : ''  }}  >Tozeur</option>
                                            <option  class="region-tunisiaExpress" value="1"  {{ order.region == '1' ? 'selected' : ''  }}  >Tunis</option>
                                            <option  class="region-tunisiaExpress" value="9"  {{ order.region == '9' ? 'selected' : ''  }}  >Jendouba</option>
                                            <option  class="region-tunisiaExpress" value="7"  {{ order.region == '7' ? 'selected' : ''  }}  >Bizerte</option>
                                            <option  class="region-tunisiaExpress" value="11"  {{ order.region == '11' ? 'selected' : ''  }}  >Siliana</option>
                                            <option  class="region-tunisiaExpress" value="12"  {{ order.region == '12' ? 'selected' : ''  }}  >Kairouan</option>
                                            <option  class="region-tunisiaExpress" value="13"  {{ order.region == '13' ? 'selected' : ''  }}  >Kasserine</option>
                                            <option  class="region-tunisiaExpress" value="14"  {{ order.region == '14' ? 'selected' : ''  }}  >Sidi Bouzid</option>
                                            <option  class="region-tunisiaExpress" value="15"  {{ order.region == '15' ? 'selected' : ''  }}  >Sousse</option>
                                            <option  class="region-tunisiaExpress" value="16"  {{ order.region == '16' ? 'selected' : ''  }}  >Monastir</option>
                                            <option  class="region-tunisiaExpress" value="2"  {{ order.region == '2' ? 'selected' : ''  }}  >Ariana</option>
                                            <option  class="region-tunisiaExpress" value="18"  {{ order.region == '18' ? 'selected' : ''  }}  >Sfax</option>
                                            <option  class="region-tunisiaExpress" value="19"  {{ order.region == '19' ? 'selected' : ''  }}  >Gafsa</option>
                                            <option  class="region-tunisiaExpress" value="6"  {{ order.region == '6' ? 'selected' : ''  }}  >Zaghouan</option>
                                            <option  class="region-tunisiaExpress" value="21"  {{ order.region == '21' ? 'selected' : ''  }}  >Kebili</option>
                                            <option  class="region-tunisiaExpress" value="22"  {{ order.region == '22' ? 'selected' : ''  }}  >Gabes</option>
                                            <option  class="region-tunisiaExpress" value="3"  {{ order.region == '3' ? 'selected' : ''  }}  >Ben Arous</option>
                                            <option  class="region-tunisiaExpress" value="5"  {{ order.region == '5' ? 'selected' : ''  }}  >Nabeul</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-12 col-md-3">
                                        <label for="role" >Post Code</label>
                                        <input type="text" value="{{ order.postCode is defined ? order.postCode : '' }}"   id="create_order_postCode" name="postCode" placeholder="Type a post code"   class="form-control" required="">
                                    </div>

                                </div>
                            </fieldset>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button name="update-shipper-details" id="btn-order-update-shipper-details" value="true" type="submit" class="btn btn-primary">Renvoyer</button>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
    {% elseif  order.status == 3   and order.shipper.type == 'jax'  %}

        <style>
            .borderJax{
                border: 3px solid var(--blue)!important;
            }
        </style>
        <div class="modal fade" id="modal-resendToFirst">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Edit Shipper details</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form method="post" action="" name="form-update-shipper-details">
                        <div class="modal-body">
                            <fieldset id="firstData" class="form-group  borderJax  p-3" style="">
                                <legend class="w-auto px-2">Tunisia Express Data</legend>
                                <div class="form-row ">
                                    <div class="form-group col-12 col-md-2">
                                        <label for="role">Shipping Price</label>
                                        <input type="text" value="{{ order.shippingPrice is defined ? order.shippingPrice : ''  }}" style="pointer-events: none; background: rgb(213, 217, 221);"   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"  value="{{ order.fullName is defined ? order.fullName : ''  }}"  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"  value="{{ order.phone is defined ? order.phone : ''  }}"  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"  value="{{ order.phoneTwo is defined ? order.phoneTwo : ''  }}"  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"  value="{{ order.address is defined ? order.address : ''  }}"  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" name="region" id="create_order_region" required="">
                                            <option value="">Please choice one</option>

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

                                        </select>
                                    </div>
                                    <div class="form-group col-12 col-md-3">
                                        <label for="role">City</label>
                                        <input type="text"  value="{{ order.city is defined ? order.city : '' }}"  id="create_order_city" name="city" placeholder="Type a city" class="form-control" required="">
                                    </div>

                                </div>
                            </fieldset>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button name="update-shipper-details" id="btn-order-update-shipper-details" value="true" type="submit" class="btn btn-primary">Renvoyer</button>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
    {% endif %}



{% endblock %}

{% block script %}

    {% if  order.shipper.type == "tunisiaExpress" %}
        <script>
            $(document).ready(function() {
                $(document).on('click', '#btn-order-update-shipper-details', function (event) {
                    console.log('-------------- add ------------------->');
                    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 ');
                    }

                });
            });
        </script>
    {% endif %}

{% endblock %}