{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load currency_symbol from django_ledger %}
{% load custom_filters %}
{% load widget_tweaks %}
{% load crispy_forms_tags %}
{% block content %}
    <div class="container-fluid py-4">
        <div class="row g-4">
            <div class="col-12">
                {% include 'purchase_orders/includes/card_po.html' with style='po-detail' dealer_slug=request.dealer.slug po_model=po_model entity_slug=entity_slug %}
            </div>
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <form action="{% url 'purchase_order_update' dealer_slug=request.dealer.slug entity_slug=view.kwargs.entity_slug po_pk=po_model.uuid %}"
                              method="post">
                            <div class="row g-3">
                                <div class="col-12">
                                    {% csrf_token %}
                                    {{ form|crispy }}
                                    <button type="submit" class="btn btn-phoenix-success my-2 me-2">{% trans 'Save PO' %}</button>
                                    <a href="{% url 'purchase_order_detail' request.dealer.slug request.dealer.entity.slug po_model.uuid %}"
                                       class="btn btn-phoenix-secondary my-2">{% trans 'Back to PO Detail' %}</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            {% if po_model.is_contract_bound %}
                <div class="col-12">
                    <div class="card shadow-sm">
                        <div class="card-header bg-light">
                            <h3 class="h4 mb-0">{% trans 'Contract' %} {{ po_model.ce_model.estimate_number }}</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>{% trans 'Item' %}</th>
                                            <th>{% trans 'Quantity' %}</th>
                                            <th>{% trans 'Avg Unit Price' %}</th>
                                            <th>{% trans 'Total Contracted Cost' %}</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th>
                                                <span class="currency">{{ CURRENCY }}</span>{{ ce_cost_estimate__sum | currency_format }}
                                            </th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        {% for i in ce_itemtxs_agg %}
                                            <tr>
                                                <td>{{ i.item_model__name }}</td>
                                                <td>{{ i.ce_quantity__sum }}</td>
                                                <td>
                                                    <span class="currency">{{ CURRENCY }}</span>{{ i.avg_unit_cost | currency_format }}
                                                </td>
                                                <td>
                                                    <span class="currency">{{ CURRENCY }}</span>{{ i.ce_cost_estimate__sum | currency_format }}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">{% po_item_formset_table po_model itemtxs_formset request.user %}</div>
                </div>
            </div>
        </div>
    </div>
    {% include "purchase_orders/includes/mark_as.html" %}
    <div class="modal fade"
         id="mainModal"
         tabindex="-1"
         aria-labelledby="mainModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mainModalLabel">{% trans 'Add' %}</h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="main-modal-body" style="padding: 20px;">
                    <!-- Content will be loaded here via AJAX -->
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block customJS %}
    <script>
        function showPOModal(title, actionUrl, buttonText) {
            const modal = new bootstrap.Modal(document.getElementById('POModal'));
            document.getElementById('POModalTitle').innerText = title;

    // Set the modal body content
            document.getElementById('POModalBody').innerHTML = `
        <a class="btn btn-phoenix-primary" href="${actionUrl}">
            ${buttonText}
        </a>
    `;
            modal.show();
        }
    </script>
{% endblock customJS %}