{% extends '_include/base.html.twig' %}

{% block title %}
    Quotation {{ quotation.offerId ?? quotation.id }} · ERP Starz
{% endblock %}

{% block breadcrumbs %}
    <nav aria-label="Breadcrumb">
        <ul class="breadcrumb__list">
            <li class="breadcrumb__item"><a href="{{ path('dashboard') }}">Home</a></li>
            <li class="breadcrumb__item"><a href="{{ path('app_quotation_index') }}">Quotations</a></li>
            <li class="breadcrumb__item" aria-current="page">Quotation {{ quotation.offerId ?? quotation.id }}</li>
        </ul>
    </nav>
{% endblock %}

{% block page_title %}
    Quotation {{ quotation.offerId ?? quotation.id }}
{% endblock %}

{% block page_actions %}
    <a href="{{ path('app_quotation_index') }}" class="btn btn--secondary">Back to list</a>
    <a href="{{ path('app_quotation_edit', {'id': quotation.id}) }}" class="btn btn--secondary">Edit</a>
    <a href="{{ path('app_quotation_items_new', {'quotationId': quotation.id}) }}" class="btn btn--primary">Add item</a>
    {{ include('quotation/_delete_form.html.twig') }}
{% endblock %}

{% block content %}
{% set currency = display_currency() %}
    {% set logoUrl = quotation.company and quotation.company.logo is not null
        ? asset(logo_directory ~ '/' ~ quotation.company.logo)
        : null %}

    <section class="card" aria-labelledby="quotation-overview-heading">
        <h2 id="quotation-overview-heading" class="section-title">Overview</h2>
        <div class="detail-grid">
            <div>
                {% if logoUrl %}
                    <img src="{{ logoUrl }}" alt="{{ quotation.company.name }} logo" height="64" loading="lazy" />
                {% endif %}
                <dl class="detail-list">
                    <dt>Offer number</dt>
                    <dd>{{ quotation.offerId ?? '—' }}</dd>
                    <dt>Created on</dt>
                    <dd>{{ quotation.createdAt ? quotation.createdAt|date('Y-m-d') : '—' }}</dd>
                    <dt>Prepared by</dt>
                    <dd>{{ quotation.createdBy ? quotation.createdBy.name : '—' }}</dd>
                    <dt>Currency</dt>
                    <dd>{{ currency }}</dd>
                </dl>
            </div>
            <div>
                <dl class="detail-list">
                    <dt>Validity</dt>
                    <dd>{{ quotation.validity ?? '—' }}</dd>
                    <dt>Company</dt>
                    <dd>{{ quotation.company ? quotation.company.name : '—' }}</dd>
                    <dt>Customer</dt>
                    <dd>{{ quotation.customer ? quotation.customer.name : '—' }}</dd>
                    <dt>Contact</dt>
                    <dd>
                        {% if quotation.customer %}
                            {{ quotation.customer.contactName ?? '—' }} ·
                            {{ quotation.customer.email ?? 'No email' }} ·
                            {{ quotation.customer.phone ?? 'No phone' }}
                        {% else %}
                            —
                        {% endif %}
                    </dd>
                </dl>
            </div>
        </div>
    </section>

    <section class="card" aria-labelledby="quotation-customer-heading">
        <h2 id="quotation-customer-heading" class="section-title">Customer details</h2>
        {% if quotation.customer %}
            <dl class="detail-list">
                <dt>Customer</dt>
                <dd>{{ quotation.customer.name }}</dd>
                <dt>Address</dt>
                <dd>{{ quotation.customer.address ?? '—' }}</dd>
                <dt>Email</dt>
                <dd>{{ quotation.customer.email ?? '—' }}</dd>
                <dt>Phone</dt>
                <dd>{{ quotation.customer.phone ?? '—' }}</dd>
            </dl>
        {% else %}
            <p class="field-help">Customer details unavailable.</p>
        {% endif %}
    </section>

    <section class="card" aria-labelledby="quotation-items-heading">
        <h2 id="quotation-items-heading" class="section-title">Line items</h2>
        <div class="table-wrapper">
            <table class="responsive-table">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Description</th>
                    <th scope="col">Unit price ({{ display_currency(currency) }})</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for item in quotation.quotationItems %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{ item.productDesc }}</td>
                        <td>{{ item.unitPrice is not null ? item.unitPrice|format_currency(currency) : '—' }}</td>
                        <td>{{ item.quantity ?? '—' }}</td>
                        <td>
                            <a href="{{ path('app_quotation_items_edit', {'id': item.id}) }}">Edit item</a>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="5" class="field-help">No items captured yet. Use “Add item” above to record the first line.</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>

    <section class="card" aria-labelledby="quotation-terms-heading">
        <h2 id="quotation-terms-heading" class="section-title">Terms &amp; conditions</h2>
        <div class="detail-grid">
            <dl class="detail-list">
                <dt>Shipping term</dt>
                <dd>{{ quotation.shippingTerm ?? '—' }}</dd>
                <dt>Payment term</dt>
                <dd>{{ quotation.payTerm ?? '—' }}</dd>
            </dl>
            <dl class="detail-list">
                <dt>Lead time (first order)</dt>
                <dd>{{ quotation.leadtime ?? '—' }}</dd>
                <dt>Minimum order quantity</dt>
                <dd>{{ quotation.minOrderQty ?? '—' }}</dd>
            </dl>
        </div>
    </section>
{% endblock %}