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

{% block content %}

<div class="container-fluid">

    <div class="d-sm-flex align-items-center justify-content-between mb-3">
        <div>
            <h1 class="h4 mb-1 text-gray-800">Restaurant Order #{{ order.order_no }}</h1>
            <p class="mb-0 text-muted">Order detail, item lines and payment summary.</p>
        </div>

        <div>
            <a href="{% url 'restaurant:sales:list' %}" class="btn btn-light btn-sm">
                <i class="fas fa-arrow-left mr-1"></i> Back to Report
            </a>

            <a href="{% url 'restaurant:sales:pos' %}?mode={{ mode }}&order_no={{ order.order_no }}" class="btn btn-warning btn-sm">
                <i class="fas fa-edit mr-1"></i> Edit
            </a>

            <a href="{% url 'restaurant:sales:preprint_html' order.order_no '80' %}" target="_blank" class="btn btn-info btn-sm">
                <i class="fas fa-print mr-1"></i> Print
            </a>

        </div>
    </div>

    <div class="row mb-3">

        <div class="col-md-8">
            <div class="card shadow-sm h-100">
                <div class="card-header py-2">
                    <strong>Order Information</strong>
                </div>

                <div class="card-body">
                    <div class="row">

                        <div class="col-md-4 mb-2">
                            <small class="text-muted d-block">Order Type</small>
                            <strong>{{ order.order_type }}</strong>
                        </div>

                        <div class="col-md-4 mb-2">
                            <small class="text-muted d-block">Status</small>
                            <strong>{{ order.status|default:"-" }}</strong>
                        </div>

                        <div class="col-md-4 mb-2">
                            <small class="text-muted d-block">Pay Mode</small>
                            <strong>{{ order.pay_mode|default:"-"|upper }}</strong>
                        </div>

                        <div class="col-md-4 mb-2">
                            <small class="text-muted d-block">Customer / Table</small>
                            <strong>{{ customer_title }}</strong>
                        </div>

                        <div class="col-md-4 mb-2">
                            <small class="text-muted d-block">Phone</small>
                            <strong>{{ order.customer_phone|default:"-" }}</strong>
                        </div>

                        {% if order.order_type == "DELIVERY" %}
                            <div class="col-md-4 mb-2">
                                <small class="text-muted d-block">Delivery Person</small>
                                <strong>
                                    {% if delivery_person_name %}
                                        {{ delivery_person_name }}
                                    {% else %}
                                        Unassigned
                                    {% endif %}
                                </strong>
                            </div>
                        {% endif %}

                        <div class="col-md-4 mb-2">
                            <small class="text-muted d-block">Created At</small>
                            <strong>
                                {% if order.created_at %}
                                    {{ order.created_at|date:"d-M-Y h:i A" }}
                                {% else %}
                                    -
                                {% endif %}
                            </strong>
                        </div>

                        <div class="col-md-12 mb-2">
                            <div class="col-md-12 mb-2">
                              <small class="text-muted d-block">Address</small>
                              <strong>{{ order.customer_address|default:"-" }}</strong>
                            </div>

                            <div class="col-md-12 mb-2">
                              <small class="text-muted d-block">Remarks</small>
                              <strong>{{ order.remarks|default:"-" }}</strong>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow-sm h-100">
                <div class="card-header py-2">
                    <strong>Payment Summary</strong>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Subtotal</span>
                        <strong>Rs {{ totals.subtotal|floatformat:0 }}</strong>
                    </div>

                    <div class="d-flex justify-content-between mb-2">
                        <span>Discount</span>
                        <strong>Rs {{ totals.flat_discount|floatformat:0 }}</strong>
                    </div>

                    <div class="d-flex justify-content-between mb-2">
                        <span>Charges</span>
                        <strong>Rs {{ totals.other_charges|floatformat:0 }}</strong>
                    </div>

                    <div class="d-flex justify-content-between mb-2">
                        <span>Service</span>
                        <strong>Rs {{ totals.service_amount|floatformat:0 }}</strong>
                    </div>

                    <div class="d-flex justify-content-between mb-2">
                        <span>Tax</span>
                        <strong>Rs {{ totals.tax_amount|floatformat:0 }}</strong>
                    </div>

                    <hr>

                    <div class="d-flex justify-content-between mb-2">
                        <span>Total</span>
                        <strong>Rs {{ grand_total|floatformat:0 }}</strong>
                    </div>

                    <div class="d-flex justify-content-between mb-2 text-success">
                        <span>Received</span>
                        <strong>Rs {{ received|floatformat:0 }}</strong>
                    </div>

                    <div class="d-flex justify-content-between mb-2 text-danger">
                        <span>Due</span>
                        <strong>Rs {{ due|floatformat:0 }}</strong>
                    </div>

                    <div class="mt-2">
                        {% if payment_status == "Paid" %}
                            <span class="badge badge-success">Paid</span>
                        {% elif payment_status == "Partial" %}
                            <span class="badge badge-warning">Partial Received</span>
                        {% else %}
                            <span class="badge badge-danger">No Payment</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Items -->
    <div class="card shadow-sm mb-3">
        <div class="card-header py-2">
            <strong>Items</strong>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm table-hover mb-0">
                    <thead class="thead-light">
                        <tr>
                            <th>#</th>
                            <th>Product</th>
                            <th class="text-right">Qty</th>
                            <th class="text-right">Rate</th>
                            <th class="text-right">Discount</th>
                            <th class="text-right">Total</th>
                            <th>Note</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for row in item_rows %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ row.product_name }}</td>
                                <td class="text-right">{{ row.qty|floatformat:2 }}</td>
                                <td class="text-right">{{ row.rate|floatformat:0 }}</td>
                                <td class="text-right">{{ row.discount|floatformat:0 }}</td>
                                <td class="text-right font-weight-bold">{{ row.line_total|floatformat:0 }}</td>
                                <td>{{ row.item.note|default:"-" }}</td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="7" class="text-center text-muted py-4">No items found.</td>
                            </tr>
                        {% endfor %}
                    </tbody>

                </table>
            </div>
        </div>
    </div>

    <!-- Payments -->
    <div class="card shadow-sm">
        <div class="card-header py-2">
            <strong>Payment Details</strong>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm table-hover mb-0">
                    <thead class="thead-light">
                        <tr>
                            <th>#</th>
                            <th>Bank / Cash Account</th>
                            <th class="text-right">Amount</th>
                            <th>Transaction Type</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for pay in payment_details %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ pay.bank_name }}</td>
                                <td class="text-right font-weight-bold">Rs {{ pay.amount|floatformat:0 }}</td>
                                <td>{{ pay.transaction_type }}</td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">No payment rows found.</td>
                            </tr>
                        {% endfor %}
                    </tbody>

                </table>
            </div>
        </div>
    </div>

</div>

{% endblock %}