{% extends "base.html" %}
{% load tz %}
{% block title %}Quotation {{ quotation.quote_number }} — Jason Studio{% endblock %}
{% block extra_head %}
<style>
    @media print {
        .navbar, .no-print { display: none !important; }
        .card { border: none !important; box-shadow: none !important; }
    }
    .stamp-accepted, .stamp-declined, .stamp-expired {
        position: absolute; top: 20px; right: 20px;
        border: 3px solid; font-size: 1.2rem; font-weight: bold;
        padding: 4px 12px; transform: rotate(12deg); opacity: 0.6;
    }
    .stamp-accepted { border-color: #28a745; color: #28a745; }
    .stamp-declined { border-color: #dc3545; color: #dc3545; }
    .stamp-expired { border-color: #6c757d; color: #6c757d; }
    @media (min-width: 576px) {
        .stamp-accepted, .stamp-declined, .stamp-expired {
            top: 40px; right: 40px; border-width: 4px;
            font-size: 2rem; padding: 5px 20px;
        }
    }
</style>
{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3 no-print flex-wrap gap-2">
    <div class="d-flex gap-2 flex-wrap">
        {% if is_photographer_view %}
        <a href="{% url 'quotation_edit' event.pk customer.pk %}" class="btn btn-outline-dark">Edit</a>
        <a href="{% url 'event_orders' event.pk %}" class="btn btn-outline-secondary">Back to Orders</a>
        {% else %}
        <a href="{% url 'customer_dashboard' %}" class="btn btn-outline-secondary">Back to Events</a>
        {% endif %}
    </div>
    <button class="btn btn-outline-dark" onclick="window.print()"><i class="fa-solid fa-print"></i> Print</button>
</div>

<div class="card position-relative">
    {% if quotation.status == 'accepted' %}
    <div class="stamp-accepted">ACCEPTED</div>
    {% elif quotation.status == 'declined' %}
    <div class="stamp-declined">DECLINED</div>
    {% elif quotation.is_expired %}
    <div class="stamp-expired">EXPIRED</div>
    {% endif %}

    <div class="card-body">
        <!-- Header -->
        <div class="row mb-4">
            <div class="col-sm-6">
                <h3>{% if photographer %}{{ photographer.business_name|default:"Jason Studio" }}{% else %}Jason Studio{% endif %}</h3>
                <p class="text-muted mb-0">Photography Services</p>
                {% if photographer.address %}
                <p class="small mb-0" style="white-space:pre-line;">{{ photographer.address }}</p>
                {% endif %}
                {% if photographer.phone %}
                <p class="small mb-0">{{ photographer.phone }}</p>
                {% endif %}
                {% if photographer.email %}
                <p class="small mb-0">{{ photographer.email }}</p>
                {% endif %}
            </div>
            <div class="col-sm-6 text-end">
                <h4>Quotation</h4>
                <p class="mb-0"><strong>Quote #:</strong> {{ quotation.quote_number }}</p>
                <p class="mb-1"><strong>Date:</strong> {{ quotation.created|date:"N j, Y" }}</p>
                {% if quotation.valid_until %}
                <p class="mb-0"><strong>Valid Until:</strong> {{ quotation.valid_until|date:"N j, Y" }}</p>
                {% endif %}
            </div>
        </div>

        <hr>

        <!-- Prepared For / Event -->
        <div class="row mb-4">
            <div class="col-sm-6">
                <strong>Prepared For:</strong><br>
                {{ customer.user.get_full_name|default:customer.user.username }}<br>
                {% if customer.company_name %}{{ customer.company_name }}<br>{% endif %}
                {% if customer.user.email %}{{ customer.user.email }}<br>{% endif %}
                {% if customer.phone %}{{ customer.phone }}{% endif %}
            </div>
            <div class="col-sm-6 text-end">
                <strong>Event:</strong><br>
                {{ event.name }}<br>
                {{ event.date }}<br>
                {% if event.location %}{{ event.location }}{% endif %}
            </div>
        </div>

        <!-- Line Items -->
        <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Description</th>
                    <th class="text-end">Qty</th>
                    <th class="text-end">Unit Cost</th>
                    <th class="text-end">Price</th>
                </tr>
            </thead>
            <tbody>
                {% for item in line_items %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ item.description }}</td>
                    <td class="text-end">{{ item.qty|floatformat:2 }}</td>
                    <td class="text-end">${{ item.unit_cost|floatformat:2 }}</td>
                    <td class="text-end">${{ item.price|floatformat:2 }}</td>
                </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" class="text-end">Subtotal</td>
                    <td class="text-end">${{ quotation.subtotal|floatformat:2 }}</td>
                </tr>
                {% if quotation.deposit_amount and quotation.deposit_amount != 0 %}
                <tr>
                    <td colspan="4" class="text-end">Deposit Required</td>
                    <td class="text-end">-${{ quotation.deposit_amount|floatformat:2 }}</td>
                </tr>
                {% endif %}
                {% if quotation.tax_rate and quotation.tax_rate != 0 %}
                <tr>
                    <td colspan="4" class="text-end">Tax ({{ quotation.tax_rate|floatformat:2 }}%)</td>
                    <td class="text-end">${{ quotation.tax_amount|floatformat:2 }}</td>
                </tr>
                {% endif %}
                <tr>
                    <td colspan="4" class="text-end"><strong>Total</strong></td>
                    <td class="text-end"><strong>${{ quotation.total|floatformat:2 }}</strong></td>
                </tr>
            </tfoot>
        </table>
        </div>

        <!-- Notes -->
        {% if quotation.notes %}
        <hr>
        <div class="row mt-3">
            <div class="col-12">
                <strong>Notes:</strong>
                <p class="mb-0" style="white-space:pre-line;">{{ quotation.notes }}</p>
            </div>
        </div>
        {% endif %}

        <!-- Acceptance info -->
        {% if quotation.accepted_at %}
        <hr>
        <p class="text-muted small mb-0">
            Accepted on {{ quotation.accepted_at|date:"N j, Y" }}
            by {{ quotation.accepted_by }}.
        </p>
        {% endif %}
    </div>
</div>

<!-- Action buttons -->
<div class="mt-3 no-print">
    {% if is_photographer_view %}
        {% if quotation.status == 'draft' or quotation.status == 'sent' %}
        <div class="d-flex gap-2">
            <form method="post" action="{% url 'quotation_accept' event.pk customer.pk %}">
                {% csrf_token %}
                <button type="submit" class="btn btn-success">Accept on Behalf of Customer</button>
            </form>
        </div>
        {% endif %}
    {% else %}
        {% if quotation.status == 'sent' or quotation.status == 'draft' %}
            {% if not quotation.is_expired %}
            <div class="d-flex gap-2">
                <form method="post" action="{% url 'customer_quotation_accept' event.pk %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-success">Accept Quotation</button>
                </form>
                <form method="post" action="{% url 'customer_quotation_decline' event.pk %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-outline-danger">Decline</button>
                </form>
            </div>
            {% else %}
            <div class="alert alert-warning">This quotation has expired. Please contact the photographer for a new quote.</div>
            {% endif %}
        {% endif %}
    {% endif %}
</div>
{% endblock %}