{% extends "base.html" %}
{% block title %}Quotes & Orders — {{ event.name }} — Jason Studio{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
    <div>
        <h2 class="mb-1">Quotes & Orders</h2>
        <p class="text-muted mb-0">{{ event.name }} — {{ event.date }} — {{ event.location }}</p>
    </div>
    <a href="{% url 'photographer_dashboard' %}" class="btn btn-outline-secondary btn-sm">Dashboard</a>
</div>

{% if customer_rows %}

<!-- Card layout (small screens) -->
{% for row in customer_rows %}
<div class="d-md-none card mb-3">
    <div class="card-body">
        <h6 class="card-title mb-2">{{ row.customer.user.get_full_name|default:row.customer.user.username }}</h6>
        <div class="d-flex flex-wrap gap-1 mb-2">
            <!-- Quote status -->
            {% if row.quotation %}
                {% if row.quotation.status == 'draft' %}
                <span class="badge bg-warning text-dark">Quote: Draft</span>
                {% elif row.quotation.status == 'sent' %}
                <span class="badge bg-info">Quote: Sent</span>
                {% elif row.quotation.status == 'accepted' %}
                <span class="badge bg-success">Quote: Accepted</span>
                {% elif row.quotation.status == 'declined' %}
                <span class="badge bg-danger">Quote: Declined</span>
                {% elif row.quotation.status == 'expired' %}
                <span class="badge bg-secondary">Quote: Expired</span>
                {% endif %}
                {% if row.quotation.is_expired and row.quotation.status != 'expired' and row.quotation.status != 'accepted' %}
                <span class="badge bg-secondary">Expired</span>
                {% endif %}
            {% endif %}
            <!-- Order/Payment status -->
            {% if row.order %}
                {% if row.order.is_paid %}
                <span class="badge bg-success">Paid</span>
                {% else %}
                <span class="badge bg-warning text-dark">Unpaid</span>
                {% endif %}
                {% if row.order.status == 'delivered' %}
                <span class="badge bg-dark">Delivered</span>
                {% elif row.order.status == 'partially_delivered' %}
                <span class="badge bg-info">Partial</span>
                {% endif %}
            {% endif %}
            <!-- Selections -->
            {% if row.selection_total %}
            <span class="badge bg-info">{{ row.digital_count }} digital</span>
            <span class="badge bg-success">{{ row.both_count }} print</span>
            {% endif %}
        </div>
        <div class="d-flex flex-wrap gap-1">
            {% if not row.quotation %}
                <a href="{% url 'quotation_edit' event.pk row.customer.pk %}"
                   class="btn btn-sm btn-outline-warning">New Quote</a>
            {% elif not row.order %}
                <a href="{% url 'quotation_edit' event.pk row.customer.pk %}"
                   class="btn btn-sm btn-outline-warning">Edit Quote</a>
                {% if row.quotation.status == 'draft' or row.quotation.status == 'sent' %}
                <form method="post" action="{% url 'quotation_accept' event.pk row.customer.pk %}" class="d-inline">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-sm btn-outline-success">Add Order</button>
                </form>
                {% endif %}
            {% else %}
                <a href="{% url 'quotation_view' event.pk row.customer.pk %}"
                   class="btn btn-sm btn-outline-secondary">View Quote</a>
                <a href="{% url 'customer_order_detail' event.pk row.customer.pk %}"
                   class="btn btn-sm btn-outline-primary">Order</a>
                <a href="{% url 'photographer_invoice' event.pk row.customer.pk %}"
                   class="btn btn-sm btn-outline-dark">Invoice</a>
                <a href="{% url 'order_fulfilment' event.pk row.customer.pk %}"
                   class="btn btn-sm {% if row.order.status == 'delivered' %}btn-outline-dark{% elif row.order.status == 'partially_delivered' %}btn-outline-info{% elif row.order.is_paid %}btn-outline-success{% else %}btn-outline-warning{% endif %}">
                    Fulfilment
                    {% if row.order.status == 'delivered' %}<span class="badge bg-dark ms-1">Delivered</span>
                    {% elif row.order.status == 'partially_delivered' %}<span class="badge bg-info ms-1">Partial</span>
                    {% elif row.order.is_paid %}<span class="badge bg-success ms-1">Paid</span>
                    {% else %}<span class="badge bg-warning text-dark ms-1">Unpaid</span>
                    {% endif %}
                </a>
            {% endif %}
        </div>
    </div>
</div>
{% endfor %}

<!-- Table layout (medium screens and up) -->
<div class="d-none d-md-block table-responsive">
    <table class="table table-hover align-middle">
        <thead>
            <tr>
                <th>Customer</th>
                <th>Quote</th>
                <th>Order</th>
                <th>Selections</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for row in customer_rows %}
            <tr>
                <td class="text-nowrap">{{ row.customer.user.get_full_name|default:row.customer.user.username }}</td>
                <td>
                    {% if row.quotation %}
                        {% if row.quotation.status == 'draft' %}
                        <span class="badge bg-warning text-dark">Draft</span>
                        {% elif row.quotation.status == 'sent' %}
                        <span class="badge bg-info">Sent</span>
                        {% elif row.quotation.status == 'accepted' %}
                        <span class="badge bg-success">Accepted</span>
                        {% elif row.quotation.status == 'declined' %}
                        <span class="badge bg-danger">Declined</span>
                        {% elif row.quotation.status == 'expired' %}
                        <span class="badge bg-secondary">Expired</span>
                        {% endif %}
                        {% if row.quotation.is_expired and row.quotation.status != 'expired' and row.quotation.status != 'accepted' %}
                        <span class="badge bg-secondary">Expired</span>
                        {% endif %}
                    {% else %}
                        <span class="text-muted">—</span>
                    {% endif %}
                </td>
                <td>
                    {% if row.order %}
                        {% if row.order.is_paid %}
                        <span class="badge bg-success">Paid</span>
                        {% else %}
                        <span class="badge bg-warning text-dark">Unpaid</span>
                        {% endif %}
                        {% if row.order.status == 'delivered' %}
                        <span class="badge bg-dark">Delivered</span>
                        {% endif %}
                    {% else %}
                        <span class="text-muted">—</span>
                    {% endif %}
                </td>
                <td>
                    {% if row.selection_total %}
                    <span class="badge bg-info">{{ row.digital_count }} digital</span>
                    <span class="badge bg-success">{{ row.both_count }} print</span>
                    {% else %}
                    <span class="text-muted">—</span>
                    {% endif %}
                </td>
                <td class="text-end text-nowrap">
                    <div class="d-flex gap-1 justify-content-end">
                        {% if not row.quotation %}
                            <a href="{% url 'quotation_edit' event.pk row.customer.pk %}"
                               class="btn btn-sm btn-outline-warning">New Quote</a>
                        {% elif not row.order %}
                            <a href="{% url 'quotation_edit' event.pk row.customer.pk %}"
                               class="btn btn-sm btn-outline-warning">Edit Quote</a>
                            {% if row.quotation.status == 'draft' or row.quotation.status == 'sent' %}
                            <form method="post" action="{% url 'quotation_accept' event.pk row.customer.pk %}" class="d-inline">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-outline-success">Add Order</button>
                            </form>
                            {% endif %}
                        {% else %}
                            <a href="{% url 'quotation_view' event.pk row.customer.pk %}"
                               class="btn btn-sm btn-outline-secondary">View Quote</a>
                            <a href="{% url 'customer_order_detail' event.pk row.customer.pk %}"
                               class="btn btn-sm btn-outline-primary">Order</a>
                            <a href="{% url 'photographer_invoice' event.pk row.customer.pk %}"
                               class="btn btn-sm btn-outline-dark">Invoice</a>
                            <a href="{% url 'order_fulfilment' event.pk row.customer.pk %}"
                               class="btn btn-sm {% if row.order.status == 'delivered' %}btn-outline-dark{% elif row.order.is_paid %}btn-outline-success{% else %}btn-outline-warning{% endif %}">
                                Fulfilment
                                {% if row.order.status == 'delivered' %}<span class="badge bg-dark ms-1">Delivered</span>
                                {% elif row.order.is_paid %}<span class="badge bg-success ms-1">Paid</span>
                                {% else %}<span class="badge bg-warning text-dark ms-1">Unpaid</span>
                                {% endif %}
                            </a>
                        {% endif %}
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% else %}
<div class="alert alert-info">No customers linked to this event yet. Add customers on the <a href="{% url 'edit_event' event.pk %}">Event Details</a> page.</div>
{% endif %}
{% endblock %}