{% extends 'base.html.twig' %}
{% set titleName = "Order Details " %}
{% block title %} POWER DATA | Order : {{ order["increment_id"] }} {% endblock %}
{% block page %} {{ order["increment_id"] }} {% endblock %}
{% block breadcrumb %} {% if titleName != "Home" %} {{ titleName }} / {{ order["increment_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["increment_id"] }}
                                    <small class="float-right">{{ order["created_at"]|date }}</small>
                                </h4>
                            </div>
                            <!-- /.col -->
                        </div>
                        <div class="row invoice-info">
                            <div class="col-sm-2 invoice-col">
                                <strong>Client </strong>
                                <address>
                                    {{ order["customer_firstname"] ~" "~ order["customer_lastname"] }}
                                </address>
                            </div>
                            <div class="col-sm-2 invoice-col">
                                <strong>Phone</strong>
                                <address>
                                    {{ order["extension_attributes"]["shipping_assignments"][0]["shipping"]["address"]["telephone"] }}
                                </address>
                            </div>
                            <div class="col-sm-1 invoice-col">
                                <strong>Region</strong>
                                <address>
                                    {{ order["extension_attributes"]["shipping_assignments"][0]["shipping"]["address"]["region"] }}
                                </address>
                            </div>
                            <div class="col-sm-2 invoice-col">
                                <strong>Address</strong>
                                <address>
                                    {{
                                    order["extension_attributes"]["shipping_assignments"][0]["shipping"]["address"]["city"]  ~", "~
                                    order["extension_attributes"]["shipping_assignments"][0]["shipping"]["address"]["street"]|join(', ') }}
                                </address>
                            </div>
                            <div class="col-sm-1 invoice-col">
                                <strong>Status</strong>
                                <address>
                                    {{ order["status"] }}
                                </address>
                            </div>
                            <div class="col-sm-2 invoice-col">
                                <strong>Coupon</strong>
                                <address>
                                    {% if order["coupon_code"] is defined %}
                                    {{ order["coupon_code"] }} <br>
                                    [ {{ order["discount_description"] }} ]
                                    {% endif %}
                                </address>
                            </div>
                            {% if order.status in ["pending","validee" ,"client_ne_repond_pas"] %}
                            <div class="col-sm-2 invoice-col" style=" display: flex; justify-content: flex-end;  place-items: flex-start; ">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-warning">Update Status</button>
                                    <button type="button" class="btn btn-warning dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" role="menu" style="">
                                        <a class="dropdown-item status-magento" href="#" data-order="{{ order["entity_id"] }}" data-status="validee">Commande validée</a>
                                        <a class="dropdown-item status-magento" href="#"  data-order="{{ order["entity_id"] }}" data-status="client_ne_repond_pas">Client Ne Repond Pas</a>
                                        <a class="dropdown-item status-magento" href="#"  data-order="{{ order["entity_id"] }}" data-status="cancel">Cancel</a>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                            <!-- /.col -->
                        </div>
                        <div class="row">
                            <div class="col-12 table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>Sku</th>
                                        <th>Product</th>
                                        <th class="text-center">P.U</th>
                                        <th class="text-center">Qty</th>
                                        <th class="text-center">Discount</th>
                                        <th class="text-center">Subtotal</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% set subtotal = 0 %}
                                   {% for product in order.items %}
                                    <tr class="text-bold"  >
                                        <td> {{ product.sku is defined ? product.sku : '' }}</td>
                                        <td>{{ product.name is defined ? product.name : '' }}</td>
                                        <td class="text-center">{{ product.price_incl_tax is defined ? product.price_incl_tax : '' }}</td>
                                        <td class="text-center">{{ product.qty_ordered is defined ? product.qty_ordered : ''}}</td>
                                        <td class="text-center">{{ product.base_discount_amount is defined ? '-'~product.base_discount_amount : ''}}</td>
                                        <td class="text-center">{{ product.row_total_incl_tax is defined ? product.row_total_incl_tax : ''}}</td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.col -->
                        </div>
                        <div class="row">
                            <!-- accepted payments column -->
                            <div class="col-6">
                                <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">
                                </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>{{ order["base_subtotal_incl_tax"] }}</td>
                                        </tr>
                                        <tr>
                                            <th style="width:50%">Discount:</th>
                                            <td>{{ order["base_discount_amount"] }}</td>
                                        </tr>
                                        <tr>
                                            <th>Shipping:</th>
                                            <td>{{ order["base_shipping_incl_tax"] }}</td>
                                        </tr>
                                        <tr>
                                            <th>Total:</th>
                                            <td>{{ order["grand_total"]  }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <!-- /.col -->
                        </div>
                    </div>
                    <!-- /.invoice -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->




    </section>



{% endblock %}

{% block script %}
    <script>

        $(document).on('click', '.status-magento', function () {
            rowData = $(this);
            var orderId = rowData.attr("data-order");
            var status = rowData.attr("data-status");
            if (confirm(" Are you sure to change status to "+status+" !") == true) {
                $.ajax({
                    url: '/magento/orders/update/status/json',
                    type: "POST",
                    data: {'orderId' : orderId, 'status' : status},
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            console.log(data);
                            toastr.success('Status updated successfully !');
                        } 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 updated This Order');
                    }
                });
            } else {
                console.log("You canceled !"+id)
            }


        });
       //goCompany
    </script>

{% endblock %}