{% 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-4 sm:p-6 rounded-xl border border-border-light dark:border-border-dark shadow-sm">
    <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|user_date 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|format_date }}</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 responsive-cards">
                <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" data-label="{{ _('Description') }}">
                            {% if item.display_name %}
                            <span class="font-medium">{{ item.display_name }}</span>
                            {% if item.description and item.description != item.display_name and item.description != '-' %}<br><span class="text-sm opacity-80">{{ item.description }}</span>{% endif %}
                            {% else %}
                            {{ item.description }}
                            {% endif %}
                            {% if item.line_kind == 'expense' and item.category %}<br><span class="text-xs opacity-70">{{ item.category }}</span>{% endif %}
                            {% if item.line_kind == 'good' and item.sku %}<br><span class="text-xs opacity-70">{{ _('SKU') }}: {{ item.sku }}</span>{% endif %}
                        </td>
                        <td class="p-3" data-label="{{ _('Quantity') }}">{{ "%.2f"|format(item.quantity) }} {% if item.unit %}{{ item.unit }}{% endif %}</td>
                        <td class="p-3" data-label="{{ _('Unit Price') }}">{{ "%.2f"|format(item.unit_price) }} {{ quote.currency_code }}</td>
                        <td class="p-3 font-medium" data-label="{{ _('Total') }}">{{ "%.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 sm:w-1/2 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 %}
    
    {% if quote.status in ['draft', 'sent'] and not quote.is_expired %}
    <div class="mt-6 pt-6 border-t border-border-light dark:border-border-dark">
        <h3 class="text-lg font-semibold mb-4">{{ _('Actions') }}</h3>
        <div class="flex flex-col sm:flex-row gap-4">
            <form method="POST" action="{{ url_for('client_portal.accept_quote', quote_id=quote.id) }}" class="inline">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" 
                        class="inline-flex items-center justify-center px-6 py-3 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors w-full sm:w-auto"
                        onclick="return confirm('{{ _('Are you sure you want to accept this quote?') }}');">
                    <i class="fas fa-check-circle mr-2"></i>
                    {{ _('Accept Quote') }}
                </button>
            </form>
            <button type="button" 
                    onclick="document.getElementById('rejectModal').classList.remove('hidden')"
                    class="inline-flex items-center justify-center px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors w-full sm:w-auto">
                <i class="fas fa-times-circle mr-2"></i>
                {{ _('Reject Quote') }}
            </button>
            <a href="{{ url_for('client_portal.quotes') }}" 
               class="inline-flex items-center justify-center px-6 py-3 bg-secondary-200 hover:bg-secondary-300 dark:bg-secondary-700 dark:hover:bg-secondary-600 text-secondary-900 dark:text-secondary-100 font-medium rounded-lg transition-colors w-full sm:w-auto">
                {{ _('Back to Quotes') }}
            </a>
        </div>
        
        <!-- Reject Quote Modal -->
        <div id="rejectModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow-xl max-w-md w-full mx-4">
                <h3 class="text-lg font-semibold mb-4">{{ _('Reject Quote') }}</h3>
                <form method="POST" action="{{ url_for('client_portal.reject_quote', quote_id=quote.id) }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="mb-4">
                        <label for="reason" class="block text-sm font-medium mb-2">{{ _('Reason (optional)') }}</label>
                        <textarea id="reason" name="reason" rows="4" 
                                  class="w-full px-3 py-2 border border-border-light dark:border-border-dark rounded-lg bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark"
                                  placeholder="{{ _('Please provide a reason for rejecting this quote...') }}"></textarea>
                    </div>
                    <div class="flex gap-4 justify-end">
                        <button type="button" 
                                onclick="document.getElementById('rejectModal').classList.add('hidden')"
                                class="px-4 py-2 bg-secondary-200 hover:bg-secondary-300 dark:bg-secondary-700 dark:hover:bg-secondary-600 text-secondary-900 dark:text-secondary-100 font-medium rounded-lg transition-colors">
                            {{ _('Cancel') }}
                        </button>
                        <button type="submit" 
                                class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors">
                            {{ _('Reject Quote') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}