{% extends "base.html" %}
{% load static %}

{% block title %}Sale {{ sale.sale_number }} - POS System{% endblock %}

{% block page_pretitle %}
<div class="page-pretitle">
    <span class="badge badge-purple-light">
        <i class="ti ti-building-store me-1"></i>POS System
    </span>
</div>
{% endblock %}

{% block page_title %}
<i class="ti ti-receipt me-2"></i>Sale {{ sale.sale_number }}
{% endblock %}

{% block page_actions %}
<a href="{% url 'pos:sale_list' %}" class="btn btn-outline-secondary">
    <i class="ti ti-arrow-left me-1"></i> Back to Sales
</a>
{% if sale.status != 'COMPLETED' %}
<a href="{% url 'pos:sale_update' sale.id %}" class="btn btn-primary">
    <i class="ti ti-edit"></i> Edit Sale
</a>
{% endif %}
<a href="{% url 'pos:terminal_receipt' sale.id %}" target="_blank" class="btn btn-success">
    <i class="ti ti-printer"></i> Print Receipt
</a>
<button onclick="window.print()" class="btn btn-outline-primary">
    <i class="ti ti-printer"></i> Print Page
</button>
{% endblock %}

{% block content %}
<div class="animate-fade-in-up">
    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Sale Information -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-gradient-primary text-white">
                    <div class="d-flex align-items-center justify-content-between">
                        <h3 class="card-title mb-0">
                            <i class="ti ti-info-circle me-2"></i>Sale Information
                        </h3>
                        {% if sale.status == 'DRAFT' %}
                        <span class="badge bg-secondary">
                            <i class="ti ti-file-text me-1"></i>Draft
                        </span>
                        {% elif sale.status == 'COMPLETED' %}
                        <span class="badge bg-success">
                            <i class="ti ti-check me-1"></i>Completed
                        </span>
                        {% elif sale.status == 'CANCELLED' %}
                        <span class="badge bg-danger">
                            <i class="ti ti-x me-1"></i>Cancelled
                        </span>
                        {% endif %}
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded mb-3">
                                <div class="text-muted small mb-1">
                                    <i class="ti ti-receipt me-1"></i>Sale Number
                                </div>
                                <div class="h5 mb-0">{{ sale.sale_number }}</div>
                            </div>
                            <div class="p-3 bg-light rounded">
                                <div class="text-muted small mb-1">
                                    <i class="ti ti-calendar me-1"></i>Sale Date
                                </div>
                                <div class="h5 mb-0">{{ sale.sale_date|date:"d M Y H:i" }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded mb-3">
                                <div class="text-muted small mb-1">
                                    <i class="ti ti-user me-1"></i>Customer
                                </div>
                                <div class="h5 mb-0">
                                    {% if sale.customer %}
                                    <a href="{% url 'contact_detail' sale.customer.id %}" class="text-reset">
                                        {{ sale.customer.name }}
                                    </a>
                                    {% else %}
                                    <span class="text-muted">Walk-in Customer</span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="p-3 bg-light rounded">
                                <div class="text-muted small mb-1">
                                    <i class="ti ti-building-bank me-1"></i>Bank Account
                                </div>
                                <div class="h5 mb-0">
                                    {% if sale.bank_account %}
                                    {{ sale.bank_account.name }}
                                    {% else %}
                                    <span class="text-muted">—</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    {% if sale.notes %}
                    <div class="p-3 bg-light rounded">
                        <div class="text-muted small mb-2">
                            <i class="ti ti-notes me-1"></i>Notes
                        </div>
                        <div>{{ sale.notes|linebreaks }}</div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Sale Items -->
            <div class="card shadow-sm">
                <div class="card-header bg-gradient-info text-white">
                    <h3 class="card-title mb-0">
                        <i class="ti ti-package me-2"></i>Sale Items
                    </h3>
                </div>
                <div class="table-responsive">
                    <table class="table table-modern">
                        <thead>
                            <tr>
                                <th><i class="ti ti-package me-1"></i>Product</th>
                                <th class="text-end"><i class="ti ti-calculator me-1"></i>Quantity</th>
                                <th class="text-end"><i class="ti ti-tag me-1"></i>Unit Price</th>
                                <th class="text-end"><i class="ti ti-cash me-1"></i>Subtotal</th>
                                <th class="text-end"><i class="ti ti-percentage me-1"></i>SST</th>
                                <th class="text-end"><i class="ti ti-sum me-1"></i>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in sale.items.all %}
                            <tr>
                                <td>
                                    <a href="{% url 'pos:product_detail' item.product.id %}" class="text-reset">
                                        <div class="fw-bold">{{ item.product.name }}</div>
                                        <div class="text-muted small">
                                            <i class="ti ti-barcode me-1"></i>{{ item.product.sku }}
                                        </div>
                                    </a>
                                </td>
                                <td class="text-end fw-medium">{{ item.quantity|floatformat:0 }}</td>
                                <td class="text-end">RM {{ item.unit_price|floatformat:2 }}</td>
                                <td class="text-end fw-medium">RM {{ item.subtotal|floatformat:2 }}</td>
                                <td class="text-end">
                                    {% if item.sst_amount > 0 %}
                                    <div>RM {{ item.sst_amount|floatformat:2 }}</div>
                                    <small class="text-muted">({{ item.sst_percentage }}%)</small>
                                    {% else %}
                                    <span class="text-muted">—</span>
                                    {% endif %}
                                </td>
                                <td class="text-end fw-bold text-success">RM {{ item.total|floatformat:2 }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot class="table-light">
                            <tr>
                                <td colspan="3" class="text-end fw-bold">Subtotal:</td>
                                <td class="text-end fw-bold">RM {{ sale.subtotal|floatformat:2 }}</td>
                                <td colspan="2"></td>
                            </tr>
                            {% if sale.total_sst > 0 %}
                            <tr>
                                <td colspan="3" class="text-end fw-bold">Total SST:</td>
                                <td class="text-end fw-bold">RM {{ sale.total_sst|floatformat:2 }}</td>
                                <td colspan="2"></td>
                            </tr>
                            {% endif %}
                            <tr class="table-active">
                                <td colspan="3" class="text-end fw-bold fs-4">GRAND TOTAL:</td>
                                <td class="text-end fw-bold text-primary fs-4">RM {{ sale.total_amount|floatformat:2 }}</td>
                                <td colspan="2"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Summary -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-gradient-success text-white">
                    <h3 class="card-title mb-0">
                        <i class="ti ti-calculator me-2"></i>Summary
                    </h3>
                </div>
                <div class="card-body">
                    <div class="mb-3 d-flex justify-content-between">
                        <span class="text-muted">
                            <i class="ti ti-cash me-1"></i>Subtotal:
                        </span>
                        <span class="fw-bold">RM {{ sale.subtotal|floatformat:2 }}</span>
                    </div>
                    {% if sale.total_sst > 0 %}
                    <div class="mb-3 d-flex justify-content-between">
                        <span class="text-muted">
                            <i class="ti ti-percentage me-1"></i>SST:
                        </span>
                        <span class="fw-bold">RM {{ sale.total_sst|floatformat:2 }}</span>
                    </div>
                    {% endif %}
                    <div class="mb-3 d-flex justify-content-between border-top pt-3">
                        <span class="fw-bold fs-5">
                            <i class="ti ti-sum me-1"></i>Total:
                        </span>
                        <span class="fw-bold text-primary fs-4">RM {{ sale.total_amount|floatformat:2 }}</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">
                            <i class="ti ti-package me-1"></i>Items:
                        </span>
                        <span class="badge badge-primary-light">{{ sale.items.count }}</span>
                    </div>
                </div>
            </div>

            <!-- Linked Invoice -->
            {% if sale.invoice %}
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-gradient-info text-white">
                    <h3 class="card-title mb-0">
                        <i class="ti ti-file-invoice me-2"></i>Linked Invoice
                    </h3>
                </div>
                <div class="card-body">
                    <div class="p-3 bg-light rounded">
                        <div class="text-muted small mb-2">Invoice Number</div>
                        <a href="{% url 'invoice_detail' sale.invoice.id %}" class="btn btn-primary btn-sm w-100">
                            <i class="ti ti-file-invoice me-1"></i>{{ sale.invoice.invoice_number }}
                            <i class="ti ti-external-link ms-1"></i>
                        </a>
                        <div class="text-muted small mt-2">
                            <i class="ti ti-calendar me-1"></i>{{ sale.invoice.invoice_date|date:"d M Y" }}
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Status Card -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-gradient-warning text-white">
                    <h3 class="card-title mb-0">
                        <i class="ti ti-flag me-2"></i>Status
                    </h3>
                </div>
                <div class="card-body">
                    {% if sale.status == 'DRAFT' %}
                    <div class="alert alert-warning mb-0">
                        <i class="ti ti-alert-triangle me-1"></i>
                        <strong>Draft Sale</strong>
                        <p class="small mb-0 mt-1">This sale is still in draft. Complete it to update inventory.</p>
                    </div>
                    {% elif sale.status == 'COMPLETED' %}
                    <div class="alert alert-success mb-0">
                        <i class="ti ti-check-circle me-1"></i>
                        <strong>Completed</strong>
                        <p class="small mb-0 mt-1">This sale has been completed and inventory updated.</p>
                    </div>
                    {% elif sale.status == 'CANCELLED' %}
                    <div class="alert alert-danger mb-0">
                        <i class="ti ti-x-circle me-1"></i>
                        <strong>Cancelled</strong>
                        <p class="small mb-0 mt-1">This sale has been cancelled.</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card shadow-sm">
                <div class="card-header bg-gradient-primary text-white">
                    <h3 class="card-title mb-0">
                        <i class="ti ti-click me-2"></i>Quick Actions
                    </h3>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'pos:terminal_receipt' sale.id %}" target="_blank" class="btn btn-success">
                            <i class="ti ti-printer"></i> Print Terminal Receipt
                        </a>
                        {% if sale.status != 'COMPLETED' %}
                        <a href="{% url 'pos:sale_update' sale.id %}" class="btn btn-primary">
                            <i class="ti ti-edit"></i> Edit Sale
                        </a>
                        {% endif %}
                        <button onclick="window.print()" class="btn btn-outline-primary">
                            <i class="ti ti-printer"></i> Print This Page
                        </button>
                        <a href="{% url 'pos:sale_list' %}" class="btn btn-outline-secondary">
                            <i class="ti ti-arrow-left"></i> Back to Sales
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}