{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}Dépense {{ expense.reference }}{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-amber-600 to-orange-600 rounded-lg shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold"><i class="fas fa-receipt mr-3"></i>{{ expense.reference }}</h1>
                <p class="mt-2 text-amber-100">{{ expense.title }}</p>
            </div>
            <a href="{{ path('manager_expenses_index') }}" class="inline-flex items-center px-4 py-2 bg-white/20 text-white rounded-lg text-sm hover:bg-white/30 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Retour
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {# Détails de la dépense #}
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Informations</h2>
                <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <dt class="text-sm text-gray-500">Référence</dt>
                        <dd class="font-mono text-sm font-medium text-gray-900 dark:text-white">{{ expense.reference }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Statut</dt>
                        <dd>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded text-xs font-medium {{ expense.statusBadgeColor }}">
                                <i class="fas {{ expense.statusIcon }} mr-1"></i>
                                {{ expense.statusLabel }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Montant</dt>
                        <dd class="text-2xl font-bold text-gray-900 dark:text-white">{{ expense.formattedAmount }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Date de la dépense</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">{{ expense.expenseDate|date('d/m/Y') }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Catégorie</dt>
                        <dd>
                            {% if expense.category %}
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ expense.category.badgeColorClass }}">
                                <i class="fas {{ expense.category.icon }} mr-1"></i>
                                {{ expense.category.name }}
                            </span>
                            {% endif %}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm text-gray-500">Soumise par</dt>
                        <dd class="font-medium text-gray-900 dark:text-white">
                            {% if expense.submittedBy %}
                                {{ expense.submittedBy.fullName }}
                            {% endif %}
                        </dd>
                    </div>
                </dl>

                {% if expense.description %}
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <dt class="text-sm text-gray-500 mb-1">Description</dt>
                    <dd class="text-gray-900 dark:text-white">{{ expense.description|nl2br }}</dd>
                </div>
                {% endif %}

                {% if expense.notes %}
                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <dt class="text-sm text-gray-500 mb-1">Notes</dt>
                    <dd class="text-gray-900 dark:text-white">{{ expense.notes|nl2br }}</dd>
                </div>
                {% endif %}
            </div>

            {# Justificatifs #}
            {% if expense.attachments|length > 0 %}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-paperclip mr-2"></i>Justificatifs ({{ expense.attachments|length }})
                </h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    {% for attachment in expense.attachments %}
                    <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                        <i class="fas fa-file text-gray-400 mr-3"></i>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                {{ attachment.media.originalFileName }}
                            </p>
                            <p class="text-xs text-gray-500">
                                {{ (attachment.media.fileSize / 1024)|number_format(0) }} Ko
                            </p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            {# Motif de refus #}
            {% if expense.isRejected and expense.rejectionReason %}
            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6">
                <h2 class="text-lg font-semibold text-red-800 dark:text-red-400 mb-2">
                    <i class="fas fa-times-circle mr-2"></i>Motif du refus
                </h2>
                <p class="text-red-700 dark:text-red-300">{{ expense.rejectionReason }}</p>
                {% if expense.validatedBy %}
                <p class="mt-2 text-sm text-red-500">
                    Refusée par {{ expense.validatedBy.fullName }}
                    {% if expense.validatedAt %}le {{ expense.validatedAt|date('d/m/Y à H:i') }}{% endif %}
                </p>
                {% endif %}
            </div>
            {% endif %}

            {# Historique des relances #}
            {% if expense.reminders|length > 0 %}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-bell mr-2"></i>Historique des relances
                </h2>
                <div class="space-y-3">
                    {% for reminder in expense.reminders %}
                    <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                        <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-yellow-100 text-yellow-800 mr-3 text-sm font-bold">
                            {{ reminder.reminderNumber }}
                        </span>
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                Relance n°{{ reminder.reminderNumber }} envoyée à {{ reminder.sentTo.fullName }}
                            </p>
                            <p class="text-xs text-gray-500">{{ reminder.sentAt|date('d/m/Y à H:i') }} - via {{ reminder.channel }}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>

        {# Sidebar: Actions + Timeline #}
        <div class="space-y-6">
            {# Actions d'approbation #}
            {% if expense.isPendingValidation %}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Actions</h2>

                {# Approuver #}
                <form method="post" action="{{ path('manager_expenses_approve', {id: expense.id}) }}" class="mb-3">
                    <input type="hidden" name="_token" value="{{ csrf_token('approve-expense-' ~ expense.id) }}">
                    <button type="submit" class="w-full px-4 py-3 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors"
                            onclick="return confirm('Approuver cette dépense ?')">
                        <i class="fas fa-check-circle mr-2"></i>Approuver
                    </button>
                </form>

                {# Rejeter #}
                <button type="button" class="w-full px-4 py-3 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 transition-colors"
                        onclick="document.getElementById('reject-form').classList.toggle('hidden')">
                    <i class="fas fa-times-circle mr-2"></i>Refuser
                </button>

                <div id="reject-form" class="hidden mt-4">
                    {{ form_start(rejectForm) }}
                        {{ form_row(rejectForm.rejectionReason) }}
                        <button type="submit" class="mt-2 w-full px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700">
                            Confirmer le refus
                        </button>
                    {{ form_end(rejectForm) }}
                </div>
            </div>
            {% endif %}

            {# Timeline #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Historique</h2>
                <ol class="relative border-l border-gray-200 dark:border-gray-700 space-y-6 ml-3">
                    <li class="ml-6">
                        <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -left-3 ring-8 ring-white dark:ring-gray-800">
                            <i class="fas fa-plus text-blue-600 text-xs"></i>
                        </span>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Créée</p>
                        <time class="text-xs text-gray-500">{{ expense.createdAt|date('d/m/Y à H:i') }}</time>
                    </li>

                    {% if expense.submittedAt %}
                    <li class="ml-6">
                        <span class="absolute flex items-center justify-center w-6 h-6 bg-yellow-100 rounded-full -left-3 ring-8 ring-white dark:ring-gray-800">
                            <i class="fas fa-paper-plane text-yellow-600 text-xs"></i>
                        </span>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Soumise</p>
                        <time class="text-xs text-gray-500">{{ expense.submittedAt|date('d/m/Y à H:i') }}</time>
                    </li>
                    {% endif %}

                    {% if expense.validatedAt %}
                    <li class="ml-6">
                        <span class="absolute flex items-center justify-center w-6 h-6 {{ expense.isApproved ? 'bg-green-100' : 'bg-red-100' }} rounded-full -left-3 ring-8 ring-white dark:ring-gray-800">
                            <i class="fas {{ expense.isApproved ? 'fa-check' : 'fa-times' }} {{ expense.isApproved ? 'text-green-600' : 'text-red-600' }} text-xs"></i>
                        </span>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                            {{ expense.isApproved ? 'Approuvée' : 'Refusée' }}
                            {% if expense.validatedBy %}par {{ expense.validatedBy.fullName }}{% endif %}
                        </p>
                        <time class="text-xs text-gray-500">{{ expense.validatedAt|date('d/m/Y à H:i') }}</time>
                    </li>
                    {% endif %}
                </ol>
            </div>
        </div>
    </div>
</div>
{% endblock %}