{% extends 'base.html' %}
{% load crispy_forms_filters %}
{% load i18n %}
{% load custom_filters %}
{% load num2words_tags %}
{% block title %}
    {% trans 'Car Transfer Details' %}
{% endblock %}
{% block content %}
    <!-- Approve Modal -->
    <div class="modal fade"
         id="approveCardModal"
         tabindex="-1"
         aria-labelledby="approveModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-light" id="approveModalLabel">{% trans 'Car Transfer Approve' %}</h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">{% trans 'Are you sure?' %}</div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-sm btn-phoenix-danger"
                            data-bs-dismiss="modal">{% trans 'No' %}</button>
                    <form method="POST"
                          action="{% url 'transfer_confirm' transfer.car.pk transfer.pk %}"
                          class="d-inline">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-phoenix-success btn-sm">{% trans 'Confirm' %}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Cancel Modal -->
    <div class="modal fade"
         id="cancelCardModal"
         tabindex="-1"
         aria-labelledby="cancelModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-light" id="cancelModalLabel">{% trans 'Cancel Transfer' %}</h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">{% trans 'Are you sure' %}?</div>
                <div class="p-1">
                    <div class="d-flex gap-1">
                        <button type="button"
                                class="btn btn-sm btn-phoenix-danger"
                                data-bs-dismiss="modal">{% trans 'No' %}</button>
                        <a href="{% url 'transfer_confirm' transfer.car.pk transfer.pk %}?action=cancel"
                           type="button"
                           type="submit"
                           class="btn btn-phoenix-success btn-sm">{% trans 'Yes' %}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-3">
        <div class="col-12">
            <h3 class="my-3">{% trans 'Transfer Details' %}</h3>
            <div class="transfer-details">
                <p>
                    <strong>{% trans "Date" %} :</strong> {{ transfer.created_at }}
                </p>
                <p>
                    <strong>{% trans "From" %} :</strong> {{ transfer.from_dealer }}
                </p>
                <p>
                    <strong>{% trans "To" %} :</strong> {{ transfer.to_dealer }}
                </p>
            </div>
            <!-- Items Table -->
            <div class="table table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>{% trans "VIN" %}</th>
                            <th>{% trans "Car" %}</th>
                            <th class="text-center">{% trans "Price" %}</th>
                            <th class="text-center">{% trans "VAT" %}</th>
                            <th class="text-center">{% trans "Total" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{ transfer.car.vin }}</td>
                            <td>{{ transfer.car }}</td>
                            <td class="text-center">
                                {{ transfer.car.selling_price }}&nbsp;<span class="icon-saudi_riyal"></span>
                            </td>
                            <td class="text-center">
                                {{ transfer.car.vat_amount }}&nbsp;<span class="icon-saudi_riyal"></span>
                            </td>
                            <td class="text-center">
                                {{ transfer.total_price }}&nbsp;<span class="icon-saudi_riyal"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- Total -->
            <div class="transfer-total">
                <p>
                    <strong>{% trans "Total Amount" %}:</strong> <span class="text-danger-darker fw-bold fs-8">{{ transfer.total_price }}&nbsp;<span class="icon-saudi_riyal"></span></span>
                </p>
                <p>
                    <strong>{% trans "Total Amount written" %}:</strong> <span>{{ transfer.total_price|num_to_words:"ar" }}&nbsp;<span class="icon-saudi_riyal"></span> {{ _("only") }}</span>
                </p>
            </div>
        </div>
        <div class="col-12"></div>
    </div>
    <div class="row g-1">
        <div class="col-12">
            <div class="d-flex gap-1">
                {% if not action == 'cancel' %}
                    <button type="button"
                            class="btn btn-sm btn-phoenix-success w-100"
                            data-bs-toggle="modal"
                            data-bs-target="#approveCardModal">{% trans 'Approve' %}</button>
                {% endif %}
                <button type="button"
                        class="btn btn-sm btn-phoenix-warning w-100"
                        data-bs-toggle="modal"
                        data-bs-target="#cancelCardModal">{% trans 'Cancel Transfer' %}</button>
            </div>
        </div>
    </div>
    <!-- JavaScript Section -->
{% endblock %}