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

{% block title %}{{ _('Client Portal') }} - {{ client.name }}{% endblock %}

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

{{ page_header(
    icon_class='fas fa-building',
    title_text=_('Client Portal'),
    subtitle_text=_('Welcome, %(client_name)s', client_name=client.name),
    breadcrumbs=breadcrumbs
) }}

<!-- Statistics Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ _('Active Projects') }}</p>
                <p class="text-2xl font-bold text-text-light dark:text-text-dark">{{ total_projects }}</p>
            </div>
            <i class="fas fa-folder-open text-primary text-3xl"></i>
        </div>
    </div>
    
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ _('Total Hours') }}</p>
                <p class="text-2xl font-bold text-text-light dark:text-text-dark">{{ "%.2f"|format(total_hours) }}</p>
            </div>
            <i class="fas fa-clock text-green-600 text-3xl"></i>
        </div>
    </div>
    
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ _('Total Invoices') }}</p>
                <p class="text-2xl font-bold text-text-light dark:text-text-dark">{{ total_invoices }}</p>
            </div>
            <i class="fas fa-file-invoice text-blue-600 text-3xl"></i>
        </div>
    </div>
    
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ _('Outstanding') }}</p>
                <p class="text-2xl font-bold text-text-light dark:text-text-dark">{{ "%.2f"|format(unpaid_invoice_amount) }} {{ invoices[0].currency_code if invoices else 'EUR' }}</p>
            </div>
            <i class="fas fa-exclamation-triangle text-yellow-600 text-3xl"></i>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- Projects Overview -->
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold">{{ _('Projects') }}</h2>
            <a href="{{ url_for('client_portal.projects') }}" class="text-primary hover:underline text-sm">{{ _('View All') }}</a>
        </div>
        {% if projects %}
        <div class="space-y-3">
            {% for project in projects[:5] %}
            <div class="flex items-center justify-between p-3 bg-background-light dark:bg-background-dark rounded-lg">
                <div>
                    <p class="font-medium">{{ project.name }}</p>
                    {% if project.description %}
                    <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ project.description[:50] }}{% if project.description|length > 50 %}...{% endif %}</p>
                    {% endif %}
                </div>
                <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">{{ project.status|capitalize }}</span>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('No projects found.') }}</p>
        {% endif %}
    </div>
    
    <!-- Recent Invoices -->
    <div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold">{{ _('Recent Invoices') }}</h2>
            <a href="{{ url_for('client_portal.invoices') }}" class="text-primary hover:underline text-sm">{{ _('View All') }}</a>
        </div>
        {% if invoices %}
        <div class="space-y-3">
            {% for invoice in invoices[:5] %}
            <div class="flex items-center justify-between p-3 bg-background-light dark:bg-background-dark rounded-lg">
                <div>
                    <a href="{{ url_for('client_portal.view_invoice', invoice_id=invoice.id) }}" class="font-medium text-primary hover:underline">{{ invoice.invoice_number }}</a>
                    <p class="text-sm text-text-muted-light dark:text-text-muted-dark">{{ invoice.issue_date.strftime('%Y-%m-%d') }}</p>
                </div>
                <div class="text-right">
                    <p class="font-medium">{{ "%.2f"|format(invoice.total_amount) }} {{ invoice.currency_code }}</p>
                    <span class="px-2 py-1 text-xs rounded-full 
                        {% if invoice.payment_status == 'fully_paid' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                        {% elif invoice.is_overdue %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
                        {% else %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200{% endif %}">
                        {{ invoice.payment_status|replace('_', ' ')|title }}
                    </span>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('No invoices found.') }}</p>
        {% endif %}
    </div>
</div>

<!-- Recent Time Entries -->
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold">{{ _('Recent Time Entries') }}</h2>
        <a href="{{ url_for('client_portal.time_entries') }}" class="text-primary hover:underline text-sm">{{ _('View All') }}</a>
    </div>
    {% if recent_time_entries %}
    <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">{{ _('Date') }}</th>
                    <th class="p-3">{{ _('Project') }}</th>
                    <th class="p-3">{{ _('User') }}</th>
                    <th class="p-3">{{ _('Duration') }}</th>
                    <th class="p-3">{{ _('Description') }}</th>
                </tr>
            </thead>
            <tbody>
                {% for entry in recent_time_entries[:10] %}
                <tr class="border-b border-border-light dark:border-border-dark">
                    <td class="p-3">{{ entry.start_time.strftime('%Y-%m-%d') }}</td>
                    <td class="p-3">{{ entry.project.name if entry.project else _('N/A') }}</td>
                    <td class="p-3">{{ entry.user.display_name if entry.user else _('N/A') }}</td>
                    <td class="p-3">{{ "%.2f"|format(entry.duration_hours) }}h</td>
                    <td class="p-3">{{ entry.description[:50] if entry.description else '-' }}{% if entry.description and entry.description|length > 50 %}...{% endif %}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="text-text-muted-light dark:text-text-muted-dark">{{ _('No time entries found.') }}</p>
    {% endif %}
</div>
{% endblock %}