{% load i18n %}
{% load django_ledger %}
{% load widget_tweaks %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        window.showPOModal = function(title, actionUrl, buttonText) {
            const modalEl = document.getElementById('POModal');
            if (!modalEl) {
                console.error('Modal element not found');
                return;
            }

            const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
            document.getElementById('POModalTitle').textContent = title;

            document.getElementById('POModalBody').innerHTML = `
            <div class="d-flex justify-content-center gap-3 py-3">
                <a class="btn btn-phoenix-primary px-4" href="${actionUrl}">
                    <i class="fas fa-check-circle me-2"></i>${buttonText}
                </a>
                <button class="btn btn-phoenix-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Cancel
                </button>
            </div>
        `;

            modal.show();
        };
    });
</script>

{% if not create_po %}
    {% if style == 'po-detail' %}
        <div class="card shadow-sm border-0 mb-2">
            <div class="card-header bg-light">
                <div class="d-flex align-items-center">
                    <span class="me-3 text-primary">
                        {% icon 'uil:bill' 36 %}
                    </span>
                    <h2 class="h3 mb-0">
                        {{ po_model.po_number }}
                    </h2>
                </div>
            </div>

            <div class="card-body">
                <h3 class="h4 mb-4">
                    <span class="badge bg-{% if po_model.is_draft %}success{% elif po_model.is_approved %}success{% elif po_model.is_fulfilled %}primary{% else %}warning{% endif %}">
                        {{ po_model.get_po_status_display }}
                    </span>
                </h3>

                {# Display PO Contract Information #}
                {% if po_model.is_contract_bound %}
                    <div class="alert alert-info d-flex align-items-center mb-4">
                        <i class="fas fa-file-contract me-3 fs-4"></i>
                        <div>
                            <h4 class="h6 mb-1">{% trans 'Contract' %}</h4>
                            <p class="mb-0">{{ po_model.ce_model.estimate_number }}</p>
                        </div>


                        <a href="{% url 'estimate_detail' po_model.ce_model_id %}"
                           class="btn btn-sm btn-outline-info ms-auto">

                            {% trans 'View Contract' %}
                        </a>
                    </div>
                {% endif %}

                <div class="row g-3 mb-4">
                    {% if po_model.is_draft %}
                        <div class="col-md-6">
                            <div class="card border-light h-100">
                                <div class="card-body">
                                    <h5 class="h6 text-muted mb-2">{% trans 'Draft Date' %}</h5>
                                    <p class="h5">{{ po_model.date_draft|date }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card border-light h-100">
                                <div class="card-body">
                                    <h5 class="h6 text-muted mb-2">{% trans 'Purchase Order Amount' %}</h5>
                                    <p class="h5">{% currency_symbol %}{{ po_model.po_amount|currency_format }}</p>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    {% if po_model.is_review %}
                        <div class="col-md-6">
                            <div class="card border-light h-100">
                                <div class="card-body">
                                    <h5 class="h6 text-muted mb-2">{% trans 'Review Date' %}</h5>
                                    <p class="h5">{{ po_model.date_in_review|date }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card border-light h-100">
                                <div class="card-body">
                                    <h5 class="h6 text-muted mb-2">{% trans 'Purchase Order Amount' %}</h5>
                                    <p class="h5">{% currency_symbol %}{{ po_model.po_amount|currency_format }}</p>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    {% if po_model.is_approved %}
                        <div class="col-md-4">
                            <div class="card border-light h-100">
                                <div class="card-body">
                                    <h5 class="h6 text-muted mb-2">{% trans 'Approved Date' %}</h5>
                                    <p class="h5">{{ po_model.date_approved|date }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-light h-100">
                                <div class="card-body">
                                    <h5 class="h6 text-muted mb-2">{% trans 'PO Amount' %}</h5>
                                    <p class="h5">{{ po_model.po_amount|currency_format }}{% currency_symbol %}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card border-light h-100">
                                <div class="card-body">
                                    <h5 class="h6 text-muted mb-2">{% trans 'Received Amount' %}</h5>
                                    <p class="h5 text-success">{{ po_model.po_amount_received|currency_format }}{% currency_symbol %}</p>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    {% if po_model.is_fulfilled %}
                        <div class="col-md-6">
                            <div class="card border-light h-100">
                                <div class="card-body">
                                    <h5 class="h6 text-muted mb-2">{% trans 'Fulfilled Date' %}</h5>
                                    <p class="h5">{{ po_model.date_fulfilled|date }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card border-light h-100">
                                <div class="card-body">
                                    <h5 class="h6 text-muted mb-2">{% trans 'PO Amount' %}</h5>
                                    <div class="d-flex align-items-center">
                                        <p class="h5 mb-0 me-2">{% currency_symbol %}{{ po_model.po_amount|currency_format }}</p>
                                        <span class="badge bg-success">
                                            <i class="fas fa-check-circle me-1"></i>{% trans 'Fulfilled' %}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="card-footer bg-light">
                <div class="d-flex flex-wrap gap-2 justify-content-between">
                    <a href="{% url 'purchase_order_update' dealer_slug=request.dealer.slug entity_slug=entity_slug po_pk=po_model.pk %}"
                       class="btn btn-phoenix-primary">
                        <i class="fas fa-edit me-2"></i>{% trans 'Update' %}
                    </a>

                    <div class="d-flex flex-wrap gap-2">
                        {# Status Action Buttons #}
                        {% if po_model.can_draft %}
                            <button class="btn btn-phoenix-secondary"
                                    onclick="showPOModal('Draft PO', '{% url 'po-action-mark-as-draft' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Draft')">
                                <i class="fas fa-file me-2"></i>{% trans 'Mark as Draft' %}
                            </button>
                        {% endif %}

                        {% if po_model.can_review %}
                            <button class="btn btn-phoenix-warning"
                                    onclick="showPOModal('Review PO', '{% url 'po-action-mark-as-review' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Review')">
                                <i class="fas fa-search me-2"></i>{% trans 'Mark as Review' %}
                            </button>
                        {% endif %}

                        {% if po_model.can_approve %}
                            <button class="btn btn-phoenix-success"
                                    onclick="showPOModal('Approve PO', '{% url 'po-action-mark-as-approved' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Approved')">
                                <i class="fas fa-check-circle me-2"></i>{% trans 'Mark as Approved' %}
                            </button>
                        {% endif %}

                        {% if po_model.can_fulfill %}
                            <button class="btn btn-phoenix-primary"
                                    onclick="showPOModal('Fulfill PO', '{% url 'po-action-mark-as-fulfilled' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Fulfilled')">
                                <i class="fas fa-truck me-2"></i>{% trans 'Mark as Fulfilled' %}
                            </button>

                        {% endif %}

                            {# Danger Action Buttons #}
                        {% if po_model.can_delete %}
                            <button class="btn btn-outline-danger"
                                    onclick="showPOModal('Delete PO', '{% url 'po-delete' request.dealer.slug entity_slug po_model.pk %}', 'Delete')">
                                <i class="fas fa-ban me-2"></i>{% trans 'Delete' %}
                            </button>
                        {% endif %}

                        {% if po_model.can_void %}
                            <button class="btn btn-outline-danger"
                                    onclick="showPOModal('Void PO', '{% url 'po-action-mark-as-void' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Void')">
                                <i class="fas fa-times-circle me-2"></i>{% trans 'Void' %}
                            </button>
                        {% endif %}

                        {% if po_model.can_cancel %}
                            <button class="btn btn-outline-danger"
                                    onclick="showPOModal('Cancel PO', '{% url 'po-action-mark-as-canceled' request.dealer.slug entity_slug po_model.pk %}', 'Mark As Cancelled')">
                                <i class="fas fa-ban me-2"></i>{% trans 'Cancel' %}
                            </button>

                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% else %}
    <div class="card border-0 shadow-sm text-center py-5">
        <div class="card-body">
            <a href="{% url 'purchase_order_create' request.dealer.slug %}" class="text-decoration-none">
                <span class="text-muted mb-3 d-inline-block">{% icon "ic:baseline-add-circle-outline" 48 %}</span>
                <h3 class="h4 text-muted">{% trans 'New Purchase Order' %}</h3>
            </a>
        </div>
    </div>
{% endif %}