{% extends 'base.html' %}
{% load humanize %}

{% block title %}Sale {{ sale.invoice_number }} - Ghana Wholesale{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-file-invoice"></i> Sale {{ sale.invoice_number }}</h2>
    <div class="btn-group">
        <a href="{% url 'sale_list' %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to List
        </a>
        <a href="{% url 'print_receipt' sale.pk %}" class="btn btn-success">
            <i class="fas fa-print"></i> Print Receipt
        </a>
        {% if sale.status == 'draft' or sale.status == 'pending' %}
        <a href="{% url 'void_sale' sale.pk %}" class="btn btn-danger">
            <i class="fas fa-ban"></i> Void Sale
        </a>
        {% endif %}
    </div>
</div>

<div class="row">
    <!-- Sale Details -->
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-info-circle"></i> Sale Information</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-sm">
                            <tr>
                                <th width="40%">Invoice Number:</th>
                                <td><strong>{{ sale.invoice_number }}</strong></td>
                            </tr>
                            <tr>
                                <th>Date & Time:</th>
                                <td>{{ sale.created_at|date:"d M Y, H:i:s" }}</td>
                            </tr>
                            <tr>
                                <th>Shop:</th>
                                <td>{{ sale.shop.name }} ({{ sale.shop.code }})</td>
                            </tr>
                            <tr>
                                <th>Cashier:</th>
                                <td>{{ sale.cashier.get_full_name|default:sale.cashier.username }}</td>
                            </tr>
                            <tr>
                                <th>Assistant:</th>
                                <td>
                                    {% if sale.assistant %}
                                    {{ sale.assistant.get_full_name|default:sale.assistant.username }}
                                    {% else %}
                                    <span class="text-muted">Not assigned</span>
                                    {% endif %}
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-sm">
                            <tr>
                                <th width="40%">Customer:</th>
                                <td>
                                    {% if sale.customer %}
                                    {{ sale.customer.name }} ({{ sale.customer.phone }})
                                    {% else %}
                                    <span class="text-muted">Walk-in Customer</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Status:</th>
                                <td>
                                    {% if sale.status == 'draft' %}
                                    <span class="badge bg-secondary">Draft</span>
                                    {% elif sale.status == 'pending' %}
                                    <span class="badge bg-warning">Pending Payment</span>
                                    {% elif sale.status == 'completed' %}
                                    <span class="badge bg-success">Completed</span>
                                    {% elif sale.status == 'cancelled' %}
                                    <span class="badge bg-danger">Cancelled</span>
                                    {% elif sale.status == 'refunded' %}
                                    <span class="badge bg-info">Refunded</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Payment Method:</th>
                                <td>
                                    <span class="badge bg-{% if sale.payment_method == 'cash' %}success{% elif sale.payment_method == 'mobile_money' %}info{% elif sale.payment_method == 'card' %}warning{% else %}danger{% endif %}">
                                        {{ sale.get_payment_method_display }}
                                    </span>
                                    {% if sale.mobile_money_number %}
                                    <br><small>{{ sale.mobile_money_number }}</small>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>VAT Invoice:</th>
                                <td>
                                    {% if sale.vat_invoice %}
                                    <span class="badge bg-success">Yes</span>
                                    {% if sale.vat_number %}({{ sale.vat_number }}){% endif %}
                                    {% else %}
                                    <span class="badge bg-secondary">No</span>
                                    {% endif %}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                
                {% if sale.notes %}
                <div class="mt-3">
                    <h6>Notes:</h6>
                    <p class="mb-0">{{ sale.notes|linebreaks }}</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Sale Items -->
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-list"></i> Sale Items ({{ sale.items_count }})</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th class="text-end">Quantity</th>
                                <th class="text-end">Unit Price</th>
                                <th class="text-end">Discount</th>
                                <th class="text-end">Total Price</th>
                                <th class="text-end">Profit</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in sale.items.all %}
                            <tr>
                                <td>
                                    <strong>{{ item.product.name }}</strong>
                                    <br>
                                    <small class="text-muted">{{ item.product.sku }}</small>
                                </td>
                                <td class="text-end">{{ item.quantity }} {{ item.product.unit }}</td>
                                <td class="text-end text-danger">GH₵ {{ item.unit_price|floatformat:2 }}</td>
                                <td class="text-end text-danger">-GH₵ {{ item.discount|floatformat:2 }}</td>
                                <td class="text-end text-success">GH₵ {{ item.total_price|floatformat:2 }}</td>
                                <td class="text-end">
                                    <span class="badge bg-{% if item.profit > 0 %}success{% else %}danger{% endif %}">
                                        GH₵ {{ item.profit|floatformat:2 }}
                                    </span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Financial Summary -->
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-money-bill-wave"></i> Financial Summary</h5>
            </div>
            <div class="card-body">
                <div class="text-center mb-4">
                    <div class="display-4 fw-bold text-success">GH₵ {{ sale.total_amount|floatformat:2 }}</div>
                    <small class="text-muted">Total Sale Amount</small>
                </div>
                
                <table class="table table-sm">
                    <tr>
                        <th>Subtotal:</th>
                        <td class="text-end">GH₵ {{ sale.subtotal|floatformat:2 }}</td>
                    </tr>
                    <tr>
                        <th>Discount:</th>
                        <td class="text-end text-danger">-GH₵ {{ sale.discount_amount|floatformat:2 }}</td>
                    </tr>
                    <tr>
                        <th>VAT (15%):</th>
                        <td class="text-end">GH₵ {{ sale.tax_amount|floatformat:2 }}</td>
                    </tr>
                    <tr class="table-light">
                        <th><strong>Total Amount:</strong></th>
                        <td class="text-end fw-bold text-success">GH₵ {{ sale.total_amount|floatformat:2 }}</td>
                    </tr>
                    <tr>
                        <th>Amount Paid:</th>
                        <td class="text-end text-success">GH₵ {{ sale.amount_paid|floatformat:2 }}</td>
                    </tr>
                    <tr>
                        <th>Balance:</th>
                        <td class="text-end">
                            {% if sale.balance > 0 %}
                            <span class="badge bg-warning">GH₵ {{ sale.balance|floatformat:2 }}</span>
                            {% else %}
                            <span class="badge bg-success">Paid in Full</span>
                            {% endif %}
                        </td>
                    </tr>
                </table>
                
                {% if sale.status == 'draft' %}
                <div class="alert alert-warning mt-3">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Draft Sale:</strong> This sale is still a draft. 
                    <a href="{% url 'process_payment' sale.pk %}" class="alert-link">Process Payment</a> to complete it.
                </div>
                {% elif sale.status == 'pending' %}
                <div class="alert alert-info mt-3">
                    <i class="fas fa-info-circle"></i>
                    <strong>Pending Payment:</strong> Balance of GH₵ {{ sale.balance|floatformat:2 }} is pending.
                    <a href="{% url 'process_payment' sale.pk %}" class="alert-link">Process Payment</a>
                </div>
                {% elif sale.status == 'completed' %}
                <div class="alert alert-success mt-3">
                    <i class="fas fa-check-circle"></i>
                    <strong>Completed:</strong> Sale fully paid and completed.
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Receipt Information -->
        {% if receipt %}
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-print"></i> Receipt Information</h5>
            </div>
            <div class="card-body">
                <table class="table table-sm">
                    <tr>
                        <th>Receipt Number:</th>
                        <td>{{ receipt.receipt_number }}</td>
                    </tr>
                    <tr>
                        <th>Printed At:</th>
                        <td>{{ receipt.printed_at|date:"d M Y, H:i" }}</td>
                    </tr>
                    <tr>
                        <th>Printed By:</th>
                        <td>{{ receipt.printed_by.get_full_name|default:receipt.printed_by.username }}</td>
                    </tr>
                </table>
                
                <div class="d-grid gap-2">
                    <a href="{% url 'print_receipt' sale.pk %}" class="btn btn-success">
                        <i class="fas fa-print"></i> Print Receipt
                    </a>
                </div>
            </div>
        </div>
        {% elif sale.status == 'completed' %}
        <div class="card mb-4">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0"><i class="fas fa-print"></i> Generate Receipt</h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i>
                    No receipt generated yet for this completed sale.
                </div>
                
                <div class="d-grid gap-2">
                    <a href="{% url 'print_receipt' sale.pk %}" class="btn btn-success">
                        <i class="fas fa-print"></i> Generate & Print Receipt
                    </a>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Actions -->
        <div class="card">
            <div class="card-header bg-dark text-white">
                <h5 class="mb-0"><i class="fas fa-cog"></i> Actions</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{% url 'print_receipt' sale.pk %}" class="btn btn-success">
                        <i class="fas fa-print"></i> Print Receipt
                    </a>
                    
                    {% if sale.status == 'draft' or sale.status == 'pending' %}
                    <a href="{% url 'process_payment' sale.pk %}" class="btn btn-primary">
                        <i class="fas fa-money-bill-wave"></i> Process Payment
                    </a>
                    <a href="{% url 'void_sale' sale.pk %}" class="btn btn-danger">
                        <i class="fas fa-ban"></i> Void/Cancel Sale
                    </a>
                    {% endif %}
                    
                    <a href="{% url 'pos_dashboard' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-cash-register"></i> Back to POS
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}