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

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

{% 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><!-- /.container-fluid -->
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                {% set col = "col-md-12 "%}
                {% if visitor is not null%}
                    {% set col = "col-md-9 "%}
                <div class="col-md-3">

                    <!-- Profile Image -->
                    <div class="card card-primary card-outline">
                        <div class="card-body box-profile">

                            <h3 class="profile-username text-center">{{ visitor.fullName }}</h3>
                            <p  class="text-muted text-center" >
                            <a target="_blank" rel="noopener, noreferrer"
                               href="https://conversations-app.brevo.com/conversations/{{ visitor.threadId }}" >
                                {{ visitor.threadId }}
                            </a >
                            </p>

                            <ul class="list-group list-group-unbordered mb-3">
                                <li class="list-group-item">
                                    <b>Orders Number</b> <a class="float-right"> {{ visitor.nbrCommand }} [ {{ orders|length }} ]</a>
                                </li>
                                <li class="list-group-item">
                                    <b>Phone</b> <a class="float-right"> {{ visitor.phone }}</a>
                                </li>
                                <li class="list-group-item">
                                    <b>Address</b> <a class="float-right"> {{ visitor.address }},  {{ visitor.city }} , {{ visitor.region["value"] }}   </a>
                                </li>
                            </ul>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                {% endif %}
                <!-- /.col -->
                <div class="{{ col }}">
                    <div class="card">
                        <div class="card-header p-2">
                            <ul class="nav nav-pills">
                                <li class="nav-item"><a class="nav-link active" href="#currentOrder" data-toggle="tab">Current Order</a></li>
                                <li class="nav-item"><a class="nav-link" href="#timeline" data-toggle="tab">Old Orders</a></li>
                                <li class="nav-item"><a class="nav-link  d-none" href="#settings" data-toggle="tab">Settings</a></li>
                            </ul>
                        </div><!-- /.card-header -->
                        <div class="card-body">
                            <div class="tab-content">
                                <div class="active tab-pane" id="currentOrder">
                                    <div class="row">
                                        <div class="col-12">
                                            <!-- Main content -->
                                            <div class="invoice p-3 mb-3">
                                                <!-- title row -->
                                                <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>
                                                <!-- info row -->
                                                <div class="row invoice-info">
                                                    <div class="col-sm-4 invoice-col">
                                                        <strong>Shipper</strong>
                                                        <address>
                                                            {{ order.shipper.name }}
                                                        </address>
                                                    </div>
                                                    {% if order.canal.name is defined %}
                                                        <div class="col-sm-4 invoice-col">
                                                            <strong>Canal</strong>
                                                            <address>
                                                                <a href="#{{ order.canal.id }}">{{ order.canal.name }}</a>
                                                            </address>
                                                        </div>
                                                    {% endif %}
                                                    <div class="col-sm-4 invoice-col">
                                                        <address style="  display: flex;  justify-content: end;  gap: 0.5rem; ">

                                                            <a   data-id="{{ order.id }}"  class="btn_round btn-dark compteurProduct" id="nbr-tentative-crm-{{ order.id }}" >
                                                                {{ order.crmSalesNbrTentative }}
                                                            </a>

                                                            {% if order.crmSalesClosed() == 0 %}
                                                            <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>

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

                                                            {% endif %}
                                                        </address>
                                                    </div>
                                                    <!-- /.col -->
                                                </div>

                                                <!-- /.row -->

                                                <!-- Table row -->
                                                <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>
                                                <!-- /.row -->

                                                <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>
                                                <!-- /.row -->

                                            </div>

                                        </div><!-- /.col -->
                                    </div><!-- /.row -->

                                </div>
                                <!-- /.tab-pane -->
                                <div class="tab-pane" id="timeline">
                                    <div class="card-body table-responsive p-0" style="height: 63vh;">
                                        <table class="table table-head-fixed table-striped"> <!-- text-nowrap -->
                                            <thead>
                                            <tr>
                                                <th  class="text-center">Num</th>
                                                <th class="text-center">Id</th>
                                                <th class="text-center">Sub Total</th>
                                                <th class="text-center">Shipping</th>
                                                <th class="text-center">Created At</th>
                                                <th class="text-center" title="Avis Process">Process</th>
                                                <th class="text-center" title="Avis Product">Product</th>
                                                <th class="text-center" title="Avis Shipping">Shipping</th>
                                                <th class="text-center" title="Possibility Of Other Order">New Order</th>
                                            </tr>
                                            </thead>
                                            <tbody id="listOfOrders">
                                            {% set index = 1 %}
                                            {% for order in orders %}
                                                <tr  id="order-{{ order.id }}">
                                                    <td class="text-center">{{ index }}</td>
                                                    <td class="text-center">{{ order.id }}</td>
                                                    <td class="text-center">
                                                        {% 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 class="text-center">{{ order.shippingPrice }}</td>
                                                    <td class="text-center">{{ order.createdAt|date("d/m/Y") }}</td>
                                                    {% if order.reviews is not null %}
                                                    <td class="text-center">{{ order.reviews.feedbackProcess}}</td>
                                                    <td class="text-center">{{ order.reviews.feedbackProduct}}</td>
                                                    <td class="text-center">{{ order.reviews.feedbackShipping}}</td>
                                                    <td class="text-center">{{ order.reviews.possibilityOfOtherOrder == 0 ? "No" : "Yes"  }}</td>
                                                    {% else %}
                                                        <td class="text-center"> -- </td>
                                                        <td class="text-center"> -- </td>
                                                        <td class="text-center"> -- </td>
                                                        <td class="text-center"> -- </td>
                                                    {% endif %}
                                                </tr>
                                                {% set index = index + 1 %}
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!-- /.tab-pane -->
                                <div class="tab-pane d-none" id="settings">

                                </div>
                                <!-- /.tab-pane -->
                            </div>
                            <!-- /.tab-content -->
                        </div><!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>

{% endblock %}

{% block script %}

    <script>
        $(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);
                        $('#orderIdDetails').html(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 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) {
                            $('#btn-add-review-order-'+orderId).remove();
                            $('#order-close-'+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)
            }
        }

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

    </script>


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


{% endblock %}