{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load django_ledger %}
{% load custom_filters %}
{% block content %}
    <div class="container-fluid mt-4">
        <div class="row g-1">
            <div class="col-lg-12 mb-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>
            </div>
            <div class="col-lg-12">
                <div class="table-responsive">{% po_item_table1 po_items %}</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 %}