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

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

{% set active = 'app_front_my_payment' %}

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

{% block content %}
    <div class="card mb-4">
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-6">
                    <h1>Payment Details</h1>
                </div>
                <div class="col-md-6 text-end">
                    <a href="{{ path('app_front_my_payment') }}" 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">{{ payment.orderid.customerfirstname ?? "" }} {{ payment.orderid.customerlastname ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>Email Id</th>
                            <td>{{ payment.orderid.customeremailid ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>Mobile Number</th>
                            <td>{{ payment.orderid.customerphonenumber ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>Billing Address</th>
                            <td>{{ payment.orderid.customerbillingaddress ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>Country Name</th>
                            <td>{{ payment.orderid.customercountry.name ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>State Name</th>
                            <td>{{ payment.orderid.customerstate.name ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>City Name</th>
                            <td>{{ payment.orderid.CustomerCity ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>Postal Code</th>
                            <td>{{ payment.orderid.postalcode ?? "" }}</td>
                        </tr>
                        <tr>
                            <th>Product Name</th>
                            <td>{{payment.orderid.productid.name ?? "N/A"}}</td>
                        </tr>
                        <tr>
                            <th>Payment Amount</th>
                            <td>{{payment.PaymentAmount ? payment.PaymentAmount|number_format(2, ',', '.')~"€" : "N/A" }}</td>
                        </tr>
                        <tr>
                            <th>Payment Method</th>
                            <td>{{payment.PaymentMethod ?? "N/A"}}</td>
                        </tr> 
                         <tr>
                            <th>Payment status</th>
                            <td>
                                       {% if payment.paymentstatus is null %}
                                            N/A
                                        {% else %}
                                            {% set badgeClass = '' %}
                                            {% set statusText = payment.paymentstatus is not null ? payment.paymentstatus : 'N/A' %}

                                            {% if statusText == 'success' %}
                                                {% set badgeClass = 'badge bg-success' %}
                                            {% elseif statusText == 'incompleted' or statusText == 'failed' %}
                                                {% set badgeClass = 'badge bg-danger' %}
                                            {% else %}
                                                {% set badgeClass = 'badge bg-warning' %}
                                            {% endif %}
                                            <span class="badge {{ badgeClass }}">{{ statusText|upper }}</span>
                                         {% endif %}
                            </td>
                        </tr> 
                        <tr>
                            <th>Payment Date</th>
                                {% if payment.paymentDate is not null %}
                                <td  data-utc-time="{{ payment.paymentDate|date("Y-m-d\\TH:i:s") }}">{{ payment.paymentDate|date("Y-m-d\\TH:i:s") }}</td>
                                    {% else %}
                                        <td>N/A</td>
                                    {% endif %}
                                </td>
                        </tr> 
                        <tr>
                            <th>Payment Actual Price</th>
                            <td>{{ payment.ActualPrice ? payment.ActualPrice|number_format(2, ',', '.')~"€" : "N/A" }}</td>
                        </tr>
                        <tr>
                            <th>Payment Discount</th>
                            <td>{{payment.Discount~"%" ?? "" }}</td>
                        </tr>
                         <tr>
                            <th>Payment Texes Apply</th>
                            <td>{{ payment.TaxPrice ? payment.TaxPrice|number_format(2, ',', '.')~"€" : "N/A" }}</td>
                        </tr>
                        <tr>
                             <th>Payment Transaction Id</th>
                             <td>{{payment.PaymentIntentId ?? "" }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script src="{{ asset('assets/js/timezone.js') }}"></script>
{% endblock %}