{% 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 status -->
            {% if row.order %}
                {% if row.order.status == 'pending_payment' %}
                <span class="badge bg-warning text-dark">Order: Pending</span>
                {% elif row.order.status == 'paid' %}
                <span class="badge bg-success">Order: Paid</span>
                {% elif row.order.status == 'in_progress' %}
                <span class="badge bg-primary">Order: In Progress</span>
                {% elif row.order.status == 'delivered' %}
                <span class="badge bg-dark">Order: Delivered</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">
            <a href="{% url 'quotation_edit' event.pk row.customer.pk %}"
               class="btn btn-sm btn-outline-warning">
                {% if row.quotation %}Quote{% else %}New Quote{% endif %}
            </a>
            {% if row.quotation %}
            <a href="{% url 'quotation_view' event.pk row.customer.pk %}"
               class="btn btn-sm btn-outline-secondary">View Quote</a>
            {% endif %}
            {% if row.order %}
            <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>
            {% 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.status == 'pending_payment' %}
                        <span class="badge bg-warning text-dark">Pending Payment</span>
                        {% elif row.order.status == 'paid' %}
                        <span class="badge bg-success">Paid</span>
                        {% elif row.order.status == 'in_progress' %}
                        <span class="badge bg-primary">In Progress</span>
                        {% elif 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">
                        <a href="{% url 'quotation_edit' event.pk row.customer.pk %}"
                           class="btn btn-sm btn-outline-warning">
                            {% if row.quotation %}Quote{% else %}New Quote{% endif %}
                        </a>
                        {% if row.quotation %}
                        <a href="{% url 'quotation_view' event.pk row.customer.pk %}"
                           class="btn btn-sm btn-outline-secondary">View Quote</a>
                        {% endif %}
                        {% if row.order %}
                        <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>
                        {% 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 %}