{% extends "base.html" %}

{% block title %}Sale #{{ sale.invoice_number }} - AsapLoads POS{% endblock %}

{% block header_title %}Sale Details: #{{ sale.invoice_number }}{% endblock %}

{% block content %}
{% if messages %}
  <div class="container mt-3">
    {% for message in messages %}
      <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endfor %}
  </div>
{% endif %}
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Sale Information</h5>
                <div class="d-flex gap-2">
                    <a href="{% url 'sale_receipt' sale.id %}" class="btn btn-primary btn-sm">
                        <i class="fas fa-receipt"></i> View Receipt
                    </a>
                    {% if sale.payment_status != 'cancelled' and sale.payment_status != 'paid' %}
                        <a href="{% url 'add_payment' sale.id %}" class="btn btn-success btn-sm">
                            <i class="fas fa-dollar-sign"></i> Add Payment
                        </a>
                    {% endif %}
                    {% if sale.payment_status != 'cancelled' and user.role == 'admin' %}
                        <a href="{% url 'cancel_sale' sale.id %}" class="btn btn-danger btn-sm">
                            <i class="fas fa-times"></i> Cancel Sale
                        </a>
                    {% endif %}
                    <a href="{% url 'sale_list' %}" class="btn btn-secondary btn-sm">
                        <i class="fas fa-arrow-left"></i> Back to Sales
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h6 class="mb-3">Sale Details</h6>
                        <table class="table table-sm">
                            <tr>
                                <th style="width: 150px;">Invoice Number:</th>
                                <td>{{ sale.invoice_number }}</td>
                            </tr>
                            <tr>
                                <th>Date:</th>
                                <td>{{ sale.created_at|date:"F d, Y - H:i" }}</td>
                            </tr>
                            <tr>
                                <th>Status:</th>
                                <td>
                                    <span class="badge bg-{% if sale.payment_status == 'paid' %}success{% elif sale.payment_status == 'partial' %}warning{% elif sale.payment_status == 'cancelled' %}danger{% else %}secondary{% endif %}">
                                        {{ sale.payment_status|title }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th>Cashier:</th>
                                <td>{{ sale.cashier.get_full_name }}</td>
                            </tr>
                            <tr>
                                <th>Branch:</th>
                                <td>{{ sale.branch.name }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6 class="mb-3">Customer Information</h6>
                        {% if sale.customer %}
                            <table class="table table-sm">
                                <tr>
                                    <th style="width: 150px;">Name:</th>
                                    <td>{{ sale.customer.full_name }}</td>
                                </tr>
                                <tr>
                                    <th>Email:</th>
                                    <td>{{ sale.customer.email|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <th>Phone:</th>
                                    <td>{{ sale.customer.phone|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <th>Address:</th>
                                    <td>{{ sale.customer.address|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <a href="{% url 'customer_detail' sale.customer.id %}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-user"></i> View Customer
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        {% else %}
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> Walk-in customer (no details provided)
                            </div>
                        {% endif %}
                    </div>
                </div>

                <h6 class="mb-3">Items Purchased</h6>
                <div class="table-responsive mb-4">
                    <table class="table table-sm table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Product</th>
                                <th>Price</th>
                                <th>Quantity</th>
                                <th>Discount</th>
                                <th class="text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in items %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>
                                        {% if item.product %}
                                            <a href="{% url 'product_detail' item.product.id %}">
                                                {{ item.product.name }}
                                            </a>
                                            <br>
                                            <small class="text-muted">SKU: {{ item.product.sku }}</small>
                                        {% else %}
                                            {{ item.product_name }} <span class="text-muted">(deleted)</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ company_settings.currency_symbol }} {{ item.price|floatformat:2 }}</td>
                                    <td>{{ item.quantity }}</td>
                                    <td>
                                        {% if item.discount > 0 %}
                                            {{ item.discount|floatformat:2 }}%
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td class="text-end">{{ company_settings.currency_symbol }} {{ item.total|floatformat:2 }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="5" class="text-end">Subtotal:</th>
                                <th class="text-end">{{ company_settings.currency_symbol }} {{ sale.subtotal|floatformat:2 }}</th>
                            </tr>
                            {% if sale.tax_amount > 0 %}
                                <tr>
                                    <th colspan="5" class="text-end">Tax ({{ sale.tax_rate }}%):</th>
                                    <th class="text-end">{{ company_settings.currency_symbol }} {{ sale.tax_amount|floatformat:2 }}</th>
                                </tr>
                            {% endif %}
                            {% if sale.discount_amount > 0 %}
                                <tr>
                                    <th colspan="5" class="text-end">Discount:</th>
                                    <th class="text-end">-{{ company_settings.currency_symbol }} {{ sale.discount_amount|floatformat:2 }}</th>
                                </tr>
                            {% endif %}
                            <tr class="table-primary">
                                <th colspan="5" class="text-end">Total:</th>
                                <th class="text-end">{{ company_settings.currency_symbol }} {{ sale.total_amount|floatformat:2 }}</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <h6 class="mb-3">Payment Information</h6>
                {% if payments %}
                    <div class="table-responsive mb-4">
                        <table class="table table-sm table-striped">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Date</th>
                                    <th>Method</th>
                                    <th>Reference</th>
                                    <th class="text-end">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for payment in payments %}
                                    <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td>{{ payment.payment_date|date:"F d, Y - H:i" }}</td>
                                        <td>{{ payment.payment_method|title }}</td>
                                        <td>{{ payment.reference_number|default:"-" }}</td>
                                        <td class="text-end">{{ company_settings.currency_symbol }} {{ payment.amount|floatformat:2 }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="4" class="text-end">Total Paid:</th>
                                    <th class="text-end">{{ company_settings.currency_symbol }} {{ sale.amount_paid|floatformat:2 }}</th>
                                </tr>
                                {% if sale.payment_status != 'paid' and sale.payment_status != 'cancelled' %}
                                    <tr class="{% if sale.balance_due > 0 %}table-warning{% else %}table-success{% endif %}">
                                        <th colspan="4" class="text-end">Balance Due:</th>
                                        <th class="text-end">{{ company_settings.currency_symbol }} {{ sale.balance_due|floatformat:2 }}</th>
                                    </tr>
                                {% endif %}
                            </tfoot>
                        </table>
                    </div>
                {% else %}
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i> No payments have been recorded for this sale.
                    </div>
                {% endif %}

                {% if sale.notes %}
                    <h6 class="mb-3">Notes</h6>
                    <div class="card bg-light">
                        <div class="card-body">
                            {{ sale.notes|linebreaks }}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}