{% extends 'frontend/layouts/index.html.twig' %}

{% block title %}View Order{% endblock %}

{% set active = 'app_front_my_orders' %}

{% set breadcrumbs = [
    {
        'link': path('app_front_dashboard'), 'title': 'Home'
    },
    {
        'link': path('app_front_my_orders'), 'title': 'My Orders',
    },
    {
        'title': 'View',
    }
] %}

{% block content %}
    <div class="card mb-4">
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-6">
                    <h1>Order Details</h1>
                </div>
                <div class="col-md-6 text-end">
                    <a href="{{ path('app_front_my_orders') }}" class="btn btn-primary">Back</a>
                </div>
            </div>

            <div class="table-responsive mb-4">
                <table class="table border-1">
                    <tbody>
                        <tr>
                            <th class="w-25">Name</th>
                            <td class="w-75">{{ order.customerfirstname ?? "" }} {{ order.customerlastname ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>Email Id</th>
                            <td>{{ order.customeremailid ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>Mobile Number</th>
                            <td>{{ order.customerphonenumber ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>Billing Address</th>
                            <td>{{ order.customerbillingaddress ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>Country Name</th>
                            <td>{{ order.customercountry.name ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>State Name</th>
                            <td>{{ order.customerstate.name ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>City Name</th>
                            <td>{{ order.customercity ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>Postal Code</th>
                            <td>{{ order.postalcode ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>Status</th>
                            <td>
                                {% set badgeClass = '' %}
                                {% set statusText = order.status is not null ? order.status : 'N/A' %}

                                {% if statusText|lower == 'completed' %}
                                    {% set badgeClass = 'badge bg-success' %}
                                {% elseif statusText|lower == 'pending' %}
                                    {% set badgeClass = 'badge bg-warning' %}
                                {% else %}
                                    {% set badgeClass = 'badge bg-danger' %}
                                {% endif %}

                                <span class="{{ badgeClass }}">{{ statusText|upper }}</span>
                            </td>
                        </tr>
                        <tr>
                            <th>Order Date</th>
                            <td data-utc-time="{{ order.createdat ? order.createdat|date("Y-m-d\\TH:i:s")}}">{{ order.createdat ? order.createdat|date("Y-m-d\\TH:i:s") : "" }}</td>
                        </tr>
                        <tr>
                            <th>Product Name</th>
                            <td>{{ order.productid.name ?? "" }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3 class="mb-3">Payment Details</h3>

            <div class="card">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Payment Date</th>
                                <th>Payment Method</th>
                                <th>Actual Price</th>
                                <th>Discount(%)</th>
                                <th>Discount Price</th>
                                <th>Tax Price (19%) </th>
                                <th>Total Payable Amount</th>
                                <th>Payment Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for payment in order.getPayments %}
                                <tr>
                                    <td>{{ payment.createdat | date("d-m-Y") }}</td>
                                    <td>{{ payment.paymentmethod ? payment.paymentmethod|upper : "N/A" }}</td>
                                    <td>{{ payment.getActualPrice | number_format(2, ',', '.') | default('0.00') }} <i class="ph ph-currency-eur"></i></td>
                                    <td>{{ payment.getDiscount }} <i class="ph ph-percent"></i></td>
                                    <td>{{ payment.getPriceWithDiscount | number_format(2, ',', '.') | default('0.00') }} <i class="ph ph-currency-eur"></i></td>
                                    <td>{{ payment.getTaxPrice | number_format(2, ',', '.') | default('0.00') }} <i class="ph ph-currency-eur"></i></td>
                                    <td>{{ payment.paymentAmount | number_format(2, ',', '.') | default('0.00') }} <i class="ph ph-currency-eur"></i></td>
                                    <td>
                                        {% set badgeClass = '' %}
                                        {% set paymentStatusText = payment.paymentstatus is not null ? payment.paymentstatus : 'N/A' %}

                                        {% if paymentStatusText|lower == 'success' %}
                                            {% set badgeClass = 'badge bg-success' %}
                                        {% elseif paymentStatusText|lower == 'pending' %}
                                            {% set badgeClass = 'badge bg-warning' %}
                                        {% else %}
                                            {% set badgeClass = 'badge bg-danger' %}
                                        {% endif %}

                                        <span class="{{ badgeClass }}">{{ paymentStatusText|upper }}</span>
                                    </td>
                                </tr>
                            {% else %}
                                <tr class="w-100 text-center">
                                    <td class="border-none" colspan="4"><center>No Records found</center></td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>{% block javascripts %}
    <script src="{{ asset('assets/js/timezone.js') }}"></script>
{% endblock %}
    </div>
{% endblock %}