{% extends "base.html" %}

{% block title %}{{ order.order_number }}{% endblock %}
{% block page_title %}{{ order.order_number }}{% endblock %}
{% block page_subtitle %}{{ order.customer.name }} — {{ order.get_status_display }}{% endblock %}

{% block content %}
{% include "partials/breadcrumb.html" %}

<div class="flex flex-wrap gap-3 mb-6">
    {% if can_edit %}
    <a href="{% url 'orders:edit' order.pk %}" class="btn-primary">Edit Order</a>
    {% endif %}
    <a href="{% url 'orders:list' %}" class="btn-secondary">Back to Orders</a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <div class="card">
        <h3 class="text-lg font-semibold mb-4">Customer Details</h3>
        <dl class="space-y-2 text-sm">
            <div><dt class="text-slate-500 inline">Name: </dt><dd class="inline font-medium"><a href="{% url 'customers:detail' order.customer.pk %}" class="text-brand-600 hover:underline">{{ order.customer.name }}</a></dd></div>
            <div><dt class="text-slate-500 inline">Mobile: </dt><dd class="inline">{{ order.customer.mobile_number }}</dd></div>
            <div><dt class="text-slate-500 inline">WhatsApp: </dt><dd class="inline">{{ order.customer.whatsapp_number|default:"—" }}</dd></div>
            <div><dt class="text-slate-500 inline">Alternate: </dt><dd class="inline">{{ order.customer.alternate_number|default:"—" }}</dd></div>
            <div><dt class="text-slate-500 inline">Address: </dt><dd class="inline">{{ order.customer.address|default:"—" }}</dd></div>
        </dl>
    </div>
    <div class="card">
        <h3 class="text-lg font-semibold mb-4">Order Info</h3>
        <dl class="space-y-2 text-sm">
            <div><dt class="text-slate-500 inline">Order Date: </dt><dd class="inline">{{ order.order_date|date:"d M Y" }}</dd></div>
            <div><dt class="text-slate-500 inline">Status: </dt><dd class="inline badge badge-counter">{{ order.get_status_display }}</dd></div>
            <div><dt class="text-slate-500 inline">Expected Delivery: </dt><dd class="inline">{{ order.expected_delivery_date|date:"d M Y" }}</dd></div>
            <div><dt class="text-slate-500 inline">Payment Mode: </dt><dd class="inline">{{ order.get_payment_mode_display }}</dd></div>
            <div><dt class="text-slate-500 inline">Created: </dt><dd class="inline">{{ order.created_at|date:"d M Y, H:i" }}</dd></div>
            <div><dt class="text-slate-500 inline">Remarks: </dt><dd class="inline">{{ order.remarks|default:"—" }}</dd></div>
        </dl>
    </div>
</div>

<div class="table-scroll-card card mb-6">
    <h3 class="text-lg font-semibold p-4 pb-0">Order Items</h3>
    <div class="table-scroll p-4 pt-2">
        <table>
            <thead>
                <tr><th>Item</th><th>Qty</th><th>Unit Price</th><th>Line Total</th></tr>
            </thead>
            <tbody>
                {% for line in order.line_items.all %}
                <tr>
                    <td>{{ line.item.item_name }}</td>
                    <td>{{ line.quantity }}</td>
                    <td>₹{{ line.manual_price }}</td>
                    <td>₹{{ line.line_total }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="card text-center"><p class="text-sm text-slate-500">Subtotal</p><p class="text-xl font-bold">₹{{ order.subtotal }}</p></div>
    <div class="card text-center"><p class="text-sm text-slate-500">Discount</p><p class="text-xl font-bold text-amber-700">₹{{ order.discount_amount }}</p></div>
    <div class="card text-center"><p class="text-sm text-slate-500">Grand Total</p><p class="text-xl font-bold text-brand-600">₹{{ order.grand_total }}</p></div>
    <div class="card text-center"><p class="text-sm text-slate-500">Balance</p><p class="text-xl font-bold">₹{{ order.balance_amount }}</p></div>
</div>

<div class="card mb-6">
    <div class="flex flex-wrap justify-between items-center gap-3 mb-4">
        <h3 class="text-lg font-semibold">Payments</h3>
        {% if can_manage_payments %}
        <a href="{% url 'payments:create' %}?order_id={{ order.pk }}" class="btn-primary">Add Payment</a>
        {% endif %}
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4 text-sm">
        <div class="card bg-slate-50"><p class="text-slate-500">Grand Total</p><p class="text-xl font-bold">₹{{ order.grand_total }}</p></div>
        <div class="card bg-slate-50"><p class="text-slate-500">Total Paid</p><p class="text-xl font-bold text-green-700">₹{{ order.total_paid }}</p></div>
        <div class="card bg-slate-50"><p class="text-slate-500">Balance</p><p class="text-xl font-bold text-red-600">₹{{ order.balance_amount }}</p></div>
    </div>
    <p class="text-sm mb-3">Payment Status: <span class="badge badge-counter">{{ order.get_payment_status_display }}</span></p>
    {% if payments %}
    <div class="table-scroll">
        <table>
            <thead><tr><th>Payment #</th><th>Amount</th><th>Mode</th><th>Date</th><th>Received By</th></tr></thead>
            <tbody>
                {% for p in payments %}
                <tr>
                    <td><a href="{% url 'payments:detail' p.pk %}" class="text-brand-600">{{ p.payment_number }}</a></td>
                    <td>₹{{ p.amount_paid }}</td>
                    <td>{{ p.get_payment_mode_display }}</td>
                    <td>{{ p.payment_date|date:"d M Y" }}</td>
                    <td>{{ p.received_by.get_full_name|default:p.received_by.username|default:"—" }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="text-sm text-slate-500">No payments recorded yet.</p>
    {% endif %}
</div>

<div class="card mb-6">
    <h3 class="text-lg font-semibold mb-4">Invoice</h3>
    {% if latest_bill %}
    <dl class="text-sm space-y-2 mb-4">
        <div><dt class="text-slate-500 inline">Bill Number: </dt><dd class="inline font-medium">{{ latest_bill.bill_number }}</dd></div>
        <div><dt class="text-slate-500 inline">Generated: </dt><dd class="inline">{{ latest_bill.generated_at|date:"d M Y, H:i" }}</dd></div>
        <div><dt class="text-slate-500 inline">WhatsApp Sent: </dt><dd class="inline">{% if latest_bill.sent_on_whatsapp %}Yes{% else %}No{% endif %}</dd></div>
    </dl>
    {% else %}
    <p class="text-sm text-slate-500 mb-4">No invoice generated yet.</p>
    {% endif %}
    <div class="flex flex-wrap gap-3">
        {% if can_manage_billing and not latest_bill %}
        <a href="{% url 'orders:generate_invoice' order.pk %}" class="btn-primary">Generate Invoice</a>
        {% endif %}
        {% if latest_bill and can_view_billing %}
        <a href="{% url 'orders:preview_invoice' order.pk %}" class="btn-secondary" target="_blank">Preview Invoice</a>
        <a href="{% url 'orders:download_invoice' order.pk %}" class="btn-secondary">Download Invoice</a>
        {% endif %}
    </div>
</div>

<div class="card mb-6">
    <h3 class="text-lg font-semibold mb-4">Before-Cleaning Photos</h3>
    {% if before_photos %}
    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
        {% for photo in before_photos %}
        <div class="border rounded-lg p-2">
            <img src="{{ photo.photo.url }}" alt="{{ photo.get_photo_type_display }}" class="w-full rounded-lg object-cover" style="max-height:200px">
            <p class="text-sm font-medium mt-2">{{ photo.get_photo_type_display }}</p>
            <p class="text-xs text-slate-500">{{ photo.uploaded_at|date:"d M Y, H:i" }}</p>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p class="text-slate-500 text-sm">No before-cleaning photos uploaded yet.</p>
    {% endif %}
</div>

<div class="card mb-6">
    <h3 class="text-lg font-semibold mb-4">After-Cleaning Photos</h3>
    {% if after_photos %}
    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
        {% for photo in after_photos %}
        <div class="border rounded-lg p-2">
            <img src="{{ photo.photo.url }}" alt="{{ photo.get_photo_type_display }}" class="w-full rounded-lg object-cover" style="max-height:200px">
            <p class="text-sm font-medium mt-2">{{ photo.get_photo_type_display }}</p>
            <p class="text-xs text-slate-500">{{ photo.uploaded_at|date:"d M Y, H:i" }}</p>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p class="text-slate-500 text-sm">No after-cleaning photos uploaded yet.</p>
    {% endif %}
</div>

{% if can_view_ai %}
<div class="card mb-6">
    <h3 class="text-lg font-semibold mb-4">AI Damage Detection</h3>
    <p class="text-sm text-slate-500 mb-4">AI assisted comparison of before and after cleaning photos. Manual verification recommended for any possible visible difference.</p>
    <div class="flex flex-wrap gap-3">
        <a href="{% url 'damage_detection:upload_after' order.pk %}" class="btn-secondary">Upload After Cleaning Photos</a>
        <a href="{% url 'damage_detection:run_analysis' order.pk %}" class="btn-primary">Generate AI Damage Report</a>
        {% if ai_reports %}
        <a href="{% url 'damage_detection:report_list' %}?q={{ order.order_number }}" class="btn-secondary">View AI Reports</a>
        {% endif %}
    </div>

    {% if ai_reports %}
    <div class="mt-6">
        <h4 class="text-sm font-semibold text-slate-700 mb-3">Latest AI Assisted Comparison Reports</h4>
        <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                        <th>Photo Type</th>
                        <th>Similarity</th>
                        <th>Status</th>
                        <th>Difference</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for report in ai_reports %}
                    <tr>
                        <td>{{ report.before_photo.get_photo_type_display|default:"—" }}</td>
                        <td>{{ report.similarity_score }}%</td>
                        <td>
                            {% if report.status == 'no_damage' %}
                            <span class="badge badge-counter">No Damage Detected</span>
                            {% elif report.status == 'possible_damage' %}
                            <span class="badge" style="background:#fef2f2;color:#b91c1c;">Possible Damage</span>
                            {% else %}
                            <span class="badge" style="background:#fffbeb;color:#b45309;">Manual Verification</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if report.difference_image %}
                            <img src="{{ report.difference_image.url }}" alt="Difference preview" class="rounded border" style="max-height:60px;max-width:80px;object-fit:cover">
                            {% else %}—{% endif %}
                        </td>
                        <td>
                            <a href="{% url 'damage_detection:report_detail' report.pk %}" class="table-action-link text-brand-600">View Report</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
</div>
{% endif %}

{% if related_logs %}
<div class="card">
    <h3 class="text-lg font-semibold mb-4">Related Activity</h3>
    <ul class="text-sm space-y-2">
        {% for log in related_logs %}
        <li class="border-b border-slate-100 pb-2">
            <span class="text-slate-500">{{ log.created_at|date:"d M Y, H:i" }}</span> —
            {{ log.get_action_display }}: {{ log.description }}
        </li>
        {% endfor %}
    </ul>
</div>
{% endif %}
{% endblock %}