{% extends "client_portal/base.html" %}
{% from "components/ui.html" import page_header %}

{% block title %}{{ quote.quote_number }} - {{ _('Client Portal') }}{% endblock %}

{% block content %}
{% set breadcrumbs = [
    {'text': _('Client Portal'), 'url': url_for('client_portal.dashboard')},
    {'text': _('Quotes'), 'url': url_for('client_portal.quotes')},
    {'text': quote.quote_number}
] %}

{{ page_header(
    icon_class='fas fa-file-contract',
    title_text=quote.quote_number,
    subtitle_text=_('Quote Details'),
    breadcrumbs=breadcrumbs
) }}

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div>
            <h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark mb-2">{{ _('Client') }}</h3>
            <p class="font-medium">{{ quote.client.name if quote.client else 'N/A' }}</p>
            {% if quote.client and quote.client.email %}
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ quote.client.email }}</p>
            {% endif %}
            {% if quote.client and quote.client.address %}
            <p class="text-sm text-text-muted-light dark:text-text-muted-dark whitespace-pre-line">{{ quote.client.address }}</p>
            {% endif %}
        </div>
        <div>
            <h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark mb-2">{{ _('Quote Details') }}</h3>
            <p class="text-sm mb-1"><span class="font-medium">{{ _('Title') }}:</span> {{ quote.title }}</p>
            <p class="text-sm mb-1"><span class="font-medium">{{ _('Date') }}:</span> {{ quote.created_at.strftime('%Y-%m-%d') if quote.created_at else 'N/A' }}</p>
            {% if quote.valid_until %}
            <p class="text-sm mb-1"><span class="font-medium">{{ _('Valid Until') }}:</span> {{ quote.valid_until.strftime('%Y-%m-%d') }}</p>
            {% endif %}
            <p class="text-sm mb-1"><span class="font-medium">{{ _('Status') }}:</span> 
                <span class="px-2 py-1 text-xs rounded-full 
                    {% if quote.status == 'accepted' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                    {% elif quote.status == 'rejected' %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
                    {% elif quote.status == 'expired' %}bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200
                    {% elif quote.status == 'sent' %}bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
                    {% else %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200{% endif %}">
                    {{ quote.status|title }}
                </span>
            </p>
            {% if quote.is_expired %}
            <p class="text-sm text-red-600 mt-2">{{ _('This quote has expired.') }}</p>
            {% endif %}
        </div>
    </div>
    
    {% if quote.description %}
    <div class="mb-6">
        <h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark mb-2">{{ _('Description') }}</h3>
        <p class="whitespace-pre-line">{{ quote.description }}</p>
    </div>
    {% endif %}
    
    {% if quote.items %}
    <div class="mb-6">
        <h3 class="text-lg font-semibold mb-4">{{ _('Quote Items') }}</h3>
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="border-b border-border-light dark:border-border-dark">
                    <tr>
                        <th class="p-3">{{ _('Description') }}</th>
                        <th class="p-3">{{ _('Quantity') }}</th>
                        <th class="p-3">{{ _('Unit Price') }}</th>
                        <th class="p-3">{{ _('Total') }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in quote.items %}
                    <tr class="border-b border-border-light dark:border-border-dark">
                        <td class="p-3">{{ item.description }}</td>
                        <td class="p-3">{{ "%.2f"|format(item.quantity) }} {% if item.unit %}{{ item.unit }}{% endif %}</td>
                        <td class="p-3">{{ "%.2f"|format(item.unit_price) }} {{ quote.currency_code }}</td>
                        <td class="p-3 font-medium">{{ "%.2f"|format(item.total_amount) }} {{ quote.currency_code }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
    
    <div class="flex justify-end">
        <div class="w-full md:w-1/3">
            <div class="space-y-2">
                <div class="flex justify-between">
                    <span class="text-text-muted-light dark:text-text-muted-dark">{{ _('Subtotal') }}:</span>
                    <span>{{ "%.2f"|format(quote.subtotal) }} {{ quote.currency_code }}</span>
                </div>
                {% if quote.tax_rate > 0 %}
                <div class="flex justify-between">
                    <span class="text-text-muted-light dark:text-text-muted-dark">{{ _('Tax') }} ({{ "%.2f"|format(quote.tax_rate) }}%):</span>
                    <span>{{ "%.2f"|format(quote.tax_amount) }} {{ quote.currency_code }}</span>
                </div>
                {% endif %}
                <div class="flex justify-between text-lg font-bold pt-2 border-t border-border-light dark:border-border-dark">
                    <span>{{ _('Total') }}:</span>
                    <span>{{ "%.2f"|format(quote.total_amount) }} {{ quote.currency_code }}</span>
                </div>
            </div>
        </div>
    </div>
    
    {% if quote.terms %}
    <div class="mt-6 pt-6 border-t border-border-light dark:border-border-dark">
        <h3 class="text-sm font-medium text-text-muted-light dark:text-text-muted-dark mb-2">{{ _('Terms & Conditions') }}</h3>
        <p class="whitespace-pre-line">{{ quote.terms }}</p>
    </div>
    {% endif %}
</div>
{% endblock %}