{% extends 'base.html' %}
{% load trans from i18n %}
{% load static %}
{% load custom_filters %}
{% load django_ledger %}

{% block content %}
    <div class="container-fluid mt-4">
        <div class="row g-1">
            
            <div class="col-lg-12">
                <div class="d-flex flex-column gap-3">
                    <div class="card">
                        <div class="card-body">
                            {% include 'purchase_orders/includes/card_po.html' with dealer_slug=request.dealer.slug po_model=po_model entity_slug=entity_slug style='po-detail' %}
                        </div>
                    </div>

                    <a class="btn btn-phoenix-primary w-100 py-2"
                       href="{% url 'purchase_order_list' request.dealer.slug %}">
                        <i class="fas fa-list me-2"></i>{% trans 'PO List' %}
                    </a>
                </div>
            </div>

            
            <div class="col-lg-12">
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-md-6 border-end">
                                <div class="p-2">
                                    <h6 class="text-muted mb-2">{% trans 'PO Amount' %}</h6>
                                    <h3 class="fw-light mb-0">
                                        {% currency_symbol %}{{ po_model.po_amount | absolute | currency_format }}
                                    </h3>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-2">
                                    <h6 class="text-muted mb-2">{% trans 'Amount Received' %}</h6>
                                    <h3 class="fw-light mb-0 text-success">
                                        {% currency_symbol %}{{ po_model.po_amount_received | currency_format }}
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
        
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h3 class="h4 fw-light mb-2">{{ po_model.po_title }}</h3>

                        <div class="table-responsive">
                            {% po_item_table1 po_items %}
                        </div>
                    </div>
                </div>
                
            </div>
        </div> 

    </div> 

    {% include "purchase_orders/includes/mark_as.html" %}
{% endblock %}

{% block customJS %}
    <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">
                    <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>
{% endblock customJS %}