{% extends "base.html" %}
{% load i18n %}
{% load custom_filters %}

{% block title %}{{ page_title }} - {{ sale_order.formatted_order_id }}{% endblock %}

{% block content %}
    <div class="container mt-4">
        <div class="card">
            <div class="card-header">
                <h2 class="mb-0">
                    {% trans "Sales Order" %} #{{ sale_order.formatted_order_id }}
                    <span class="badge bg-{{ sale_order.status|status_badge_color }} float-end">
                        {{ status_choices|get_item:sale_order.status }}
                    </span>
                </h2>
            </div>

            <div class="card-body">
            <!-- Basic Information -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h4>{% trans "Customer Information" %}</h4>
                        <p>
                            <strong>{% trans "Name" %}:</strong> {{ sale_order.full_name }}<br>
                            {% if sale_order.customer %}
                                <strong>{% trans "Contact" %}:</strong> {{ sale_order.customer.phone_number }}<br>
                                <strong>{% trans "Email" %}:</strong> {{ sale_order.customer.email }}
                            {% endif %}
                        </p>
                    </div>

                    <div class="col-md-6">
                        <h4>{% trans "Order Details" %}</h4>
                        <p>
                            <strong>{% trans "Order Date" %}:</strong> {{ sale_order.order_date|date }}<br>
                            <strong>{% trans "Dealer" %}:</strong> {{ sale_order.dealer.name }}<br>
                            <strong>{% trans "Created By" %}:</strong> {{ sale_order.created_by }}
                        </p>
                    </div>
                </div>

            <!-- Estimate Information -->
                {% if sale_order.estimate %}
                    <div class="row mb-4">
                        <div class="col-12">
                            <h4>{% trans "Estimate Information" %}</h4>
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <p>
                                                <strong>{% trans "Estimate Number" %}:</strong> {{ sale_order.estimate.estimate_number }}<br>
                                                <strong>{% trans "Date" %}:</strong> {{ sale_order.estimate.created|date }}<br>
                                                <strong>{% trans "Status" %}:</strong> <span class="badge {% if sale_order.estimate.status == 'draft' %}bg-warning{% elif sale_order.estimate.status == 'in_review' %}bg-info{% elif sale_order.estimate.status == 'approved' %}bg-primary{% elif sale_order.estimate.status == 'completed' %}bg-success{% elif sale_order.estimate.status == 'canceled' %}bg-danger{% endif %}">{{ sale_order.estimate.get_status_display }}</span>
                                            </p>
                                        </div>
                                        <div class="col-md-6">

                                        </div>
                                    </div>
                                    {% if sale_order.estimate.notes %}
                                        <div class="mt-3">
                                            <strong>{% trans "Notes" %}:</strong>
                                            <div class="border p-2 mt-1">{{ sale_order.estimate.notes|linebreaks }}</div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}

            <!-- Invoice Information -->
                {% if sale_order.invoice %}
                    <div class="row mb-4">
                        <div class="col-12">
                            <h4>{% trans "Invoice Information" %}</h4>
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <p>
                                                <strong>{% trans "Invoice Number" %}:</strong> {{ sale_order.invoice.invoice_number }}<br>
                                                <strong>{% trans "Date" %}:</strong> {{ sale_order.invoice.created|date }}<br>
                                                <strong>{% trans "Status" %}:</strong>
                                                <span class="badge {% if sale_order.invoice.invoice_status == 'draft' %}bg-warning{% elif sale_order.invoice.invoice_status == 'in_review' %}bg-info{% elif sale_order.invoice.invoice_status == 'approved' %}bg-primary{% elif sale_order.invoice.invoice_status == 'paid' %}bg-success{% elif sale_order.invoice.invoice_status == 'declined' %}bg-danger{% endif %}">
                                                    {{ sale_order.invoice.invoice_status|capfirst }}
                                                </span>
                                            </p>
                                        </div>
                                        <div class="col-md-6">
                                            <p>
                                                <table>
                                                    <tbody>
                                                        <tr>
                                                            <td style="padding-right: 0.5rem;"><strong>{% trans "Amount Paid" %}:</strong></td>
                                                            <td style="padding-left: 0.5rem;"><span class="currency">{{CURRENCY}}</span>{{ sale_order.invoice.amount_paid|floatformat:2 }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="padding-right: 0.5rem;"><strong>{% trans "Balance Due" %}:</strong></td>
                                                            <td style="padding-left: 0.5rem;"><span class="currency">{{CURRENCY}}</span>{{ sale_order.invoice.amount_due|floatformat:2 }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="padding-right: 0.5rem;"><strong>{% trans "Amount Unearned" %}:</strong></td>
                                                            <td style="padding-left: 0.5rem;"><span class="currency">{{CURRENCY}}</span>{{ sale_order.invoice.amount_unearned|floatformat:2 }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="padding-right: 0.5rem;"><strong>{% trans "Amount Receivable" %}:</strong></td>
                                                            <td style="padding-left: 0.5rem;"><span class="currency">{{CURRENCY}}</span>{{ sale_order.invoice.amount_receivable|floatformat:2 }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </p>
                                        </div>
                                    </div>
                                    {% if sale_order.invoice.notes %}
                                        <div class="mt-3">
                                            <strong>{% trans "Notes" %}:</strong>
                                            <div class="border p-2 mt-1">{{ sale_order.invoice.notes|linebreaks }}</div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}

            <!-- Ledger Information -->
                {% if sale_order.invoice.ledger %}
                    <div class="row mb-4">
                        <div class="col-12">
                            <h4>{% trans "Ledger Information" %}</h4>
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <p>
                                                <strong>{% trans "Ledger Number" %}: </strong><a href="{% url 'ledger_detail' entity_slug=sale_order.invoice.ledger.entity.slug pk=sale_order.invoice.ledger.pk %}" target="_blank" rel="noopener noreferrer"> {{ sale_order.invoice.ledger }} <i class="fa fa-external-link" aria-hidden="true"></i></a><br>
                                                <strong>{% trans "Date" %}:</strong> {{ sale_order.invoice.ledger.created|date }}<br>
                                            </p>
                                        </div>
                                        <div class="col-md-6">
                                            <p>
                                                <table>
                                                    <tbody>
                                                        {% for je in sale_order.invoice.ledger.journal_entries.all %}
                                                            <tr>
                                                                <td style="padding-right: 0.5rem;"><strong>{{je}}</strong></td>
                                                            </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            </p>
                                        </div>
                                    </div>
                                    {% if sale_order.invoice.notes %}
                                        <div class="mt-3">
                                            <strong>{% trans "Notes" %}:</strong>
                                            <div class="border p-2 mt-1">{{ sale_order.invoice.notes|linebreaks }}</div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}

            <!-- Delivery Information -->
                {% if sale_order.expected_delivery_date or sale_order.actual_delivery_date %}
                    <div class="row mb-4">
                        <div class="col-12">
                            <h4>{% trans "Delivery Information" %}</h4>
                            <p>
                                {% if sale_order.expected_delivery_date %}
                                    <strong>{% trans "Expected Delivery" %}:</strong> {{ sale_order.expected_delivery_date|date:"DATE_FORMAT" }}<br>
                                {% endif %}
                                {% if sale_order.actual_delivery_date %}
                                    <strong>{% trans "Actual Delivery" %}:</strong> {{ sale_order.actual_delivery_date|date:"DATETIME_FORMAT" }}
                                {% endif %}
                            </p>
                        </div>
                    </div>
                {% endif %}

            <!-- Cars/Items -->
                {% if sale_order.cars %}
                    <div class="row mb-4">
                        <div class="col-12">
                            <h4>{% trans "Vehicles" %}</h4>
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>{% trans "Make" %}</th>
                                            <th>{% trans "Model" %}</th>
                                            <th>{% trans "Year" %}</th>
                                            <th>{% trans "VIN" %}</th>
                                            <th>{% trans "Price" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for car in sale_order.cars %}
                                            <tr>
                                                <td>{{ car.id_car_make }}</td>
                                                <td>{{ car.id_car_model }}</td>
                                                <td>{{ car.year }}</td>
                                                <td>{{ car.vin }}</td>
                                                <td><span class="currency">{{CURRENCY}}</span>{{ car.finances.selling_price|floatformat:2 }}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                {% endif %}

            <!-- Cancellation Info -->
                {% if is_cancelled %}
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="alert alert-danger">
                                <h4>{% trans "Order Cancelled" %}</h4>
                                <p>
                                    <strong>{% trans "Cancellation Date" %}:</strong> {{ sale_order.cancelled_date|date:"DATETIME_FORMAT" }}<br>
                                    <strong>{% trans "Reason" %}:</strong> {{ sale_order.cancellation_reason }}
                                </p>
                            </div>
                        </div>
                    </div>
                {% endif %}

            <!-- Comments -->
                {% if sale_order.comments %}
                    <div class="row">
                        <div class="col-12">
                            <h4>{% trans "Comments" %}</h4>
                            <div class="card bg-light">
                                <div class="card-body">
                                    {{ sale_order.comments|linebreaks }}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>

            <div class="card-footer text-end">
                <a href="{% url 'sales_list' request.dealer.slug %}" class="btn btn-phoenix-secondary">
                    {% trans "Back to List" %}
                </a>

            <!-- Add links to view full estimate and invoice if they exist -->
                {% if sale_order.estimate %}
                    <a href="{% url 'estimate_detail' request.dealer.slug sale_order.estimate.pk %}" class="btn btn-info ms-2">
                        {% trans "View Full Estimate" %}
                    </a>
                {% endif %}

                {% if sale_order.invoice %}
                    <a href="{% url 'invoice_detail' request.dealer.slug sale_order.invoice.pk %}" class="btn btn-info ms-2">
                        {% trans "View Full Invoice" %}
                    </a>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}