{% extends 'layout/app.html.twig' %}

{% block title %}Lot {{ batch.reference }}{% endblock %}
{% block page_title %}Lot {{ batch.reference }}{% endblock %}

{% set token = csrf_token('batch-' ~ batch.id) %}

{% block page_actions %}
    <a href="{{ path('app_batch_index') }}" class="btn btn-secondary">← Lots</a>
    <a href="{{ path('app_batch_slip', {id: batch.id}) }}" target="_blank" data-turbo="false" class="btn btn-secondary">Bordereau PDF</a>
    {% if batch.inPreparation and batch.dossiers is empty %}
        <form method="post" action="{{ path('app_batch_delete', {id: batch.id}) }}" data-turbo-confirm="Supprimer ce lot vide ?">
            <input type="hidden" name="_token" value="{{ token }}">
            <button type="submit" class="btn btn-danger">Supprimer le lot</button>
        </form>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="card mb-6 flex flex-wrap items-center gap-x-8 gap-y-3 p-6">
        <div><p class="text-xs text-slate-500">Ambassade</p><p class="font-semibold text-slate-900">{{ batch.embassy.name }}</p></div>
        <div><p class="text-xs text-slate-500">Statut</p><span class="badge {{ batch.status.badgeClass }}">{{ batch.status.label }}</span></div>
        <div><p class="text-xs text-slate-500">Dossiers</p><p class="font-semibold">{{ batch.dossiers|length }}</p></div>
        <div><p class="text-xs text-slate-500">Dépôt</p><p class="font-semibold">{{ batch.depositedAt ? batch.depositedAt|date('d/m/Y') : '—' }}</p></div>
        <div><p class="text-xs text-slate-500">Retrait prévu</p><p class="font-semibold">{{ batch.expectedPickupDate ? batch.expectedPickupDate|date('d/m/Y') : '—' }}</p></div>
        <div><p class="text-xs text-slate-500">Retiré le</p><p class="font-semibold">{{ batch.pickedUpAt ? batch.pickedUpAt|date('d/m/Y') : '—' }}</p></div>
        <div><p class="text-xs text-slate-500">Frais de dépôt</p><p class="font-semibold">{{ batch.depositFee|fcfa }}</p></div>
        <div class="text-xs text-slate-500">Créé le {{ batch.createdAt|date('d/m/Y') }}{% if batch.createdBy %} par {{ batch.createdBy.fullName }}{% endif %}</div>
        {% if batch.notes %}<p class="w-full whitespace-pre-line rounded-lg bg-amber-50 p-3 text-sm text-amber-900">{{ batch.notes }}</p>{% endif %}
    </div>

    <div class="grid gap-6 xl:grid-cols-3">
        <div class="space-y-6 xl:col-span-2">
            {% if batch.status.value == 'DEPOSE' %}
                {# Retrait : avis par dossier #}
                <form method="post" action="{{ path('app_batch_pickup', {id: batch.id}) }}" class="card" data-turbo-confirm="Enregistrer le retrait du lot ? Les agents seront notifiés.">
                    <input type="hidden" name="_token" value="{{ token }}">
                    <div class="border-b border-slate-100 px-6 py-4">
                        <h2 class="font-semibold text-slate-900">Retrait à l'ambassade</h2>
                        <p class="text-sm text-slate-500">Indiquez l'avis de l'ambassade pour chaque dossier. Favorable : l'agent est notifié pour récupérer le dossier ; défavorable : le dossier repart en soumission en ligne.</p>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-slate-200 text-sm">
                            <tbody class="divide-y divide-slate-100">
                                {% for dossier in batch.dossiers %}
                                    <tr>
                                        <td class="px-6 py-3">
                                            <a href="{{ path('app_dossier_show', {id: dossier.id}) }}" class="font-semibold text-brand-700 hover:underline">{{ dossier.reference }}</a>
                                            <p class="text-xs text-slate-500">{{ dossier.client.fullName }}</p>
                                        </td>
                                        {% if dossier.status.value == 'DEPOSE' %}
                                            <td class="px-3 py-3">
                                                <select name="decisions[{{ dossier.id }}]" class="form-input" required>
                                                    <option value="">Avis…</option>
                                                    {% for decision in decisions %}<option value="{{ decision.value }}">{{ decision.label }}</option>{% endfor %}
                                                </select>
                                            </td>
                                            <td class="px-3 py-3"><input type="text" name="comments[{{ dossier.id }}]" placeholder="Motif si défavorable" class="form-input"></td>
                                        {% else %}
                                            <td class="px-3 py-3" colspan="2">{% if dossier.decision %}<span class="badge {{ dossier.decision.badgeClass }}">Avis {{ dossier.decision.label|lower }} déjà saisi</span>{% endif %}</td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="flex flex-wrap items-end justify-end gap-3 border-t border-slate-100 bg-slate-50 px-6 py-4">
                        <div>
                            <label class="form-label" for="picked_up_at">Date de retrait</label>
                            <input type="date" id="picked_up_at" name="picked_up_at" value="{{ 'now'|date('Y-m-d') }}" required class="form-input">
                        </div>
                        <button type="submit" class="btn btn-accent">Enregistrer le retrait</button>
                    </div>
                </form>
            {% else %}
                <section class="card">
                    <div class="border-b border-slate-100 px-6 py-4"><h2 class="font-semibold text-slate-900">Dossiers du lot</h2></div>
                    <ul class="divide-y divide-slate-100">
                        {% for dossier in batch.dossiers %}
                            <li class="flex items-center gap-3 px-6 py-3 text-sm">
                                <div class="min-w-0 flex-1">
                                    <a href="{{ path('app_dossier_show', {id: dossier.id}) }}" class="font-semibold text-brand-700 hover:underline">{{ dossier.reference }}</a>
                                    <span class="text-slate-600">— {{ dossier.client.fullName }}</span>
                                    <p class="text-xs text-slate-500">Agent : {{ dossier.assignedAgent ? dossier.assignedAgent.fullName : '—' }}</p>
                                </div>
                                {{ include('dossier/_status.html.twig') }}
                                {% if dossier.decision %}<span class="badge {{ dossier.decision.badgeClass }}">{{ dossier.decision.label }}</span>{% endif %}
                                {% if batch.inPreparation %}
                                    <form method="post" action="{{ path('app_batch_remove_dossier', {id: batch.id, dossier: dossier.id}) }}">
                                        <input type="hidden" name="_token" value="{{ token }}">
                                        <button type="submit" class="text-xs font-medium text-red-600 hover:underline">Retirer</button>
                                    </form>
                                {% endif %}
                            </li>
                        {% else %}
                            <li class="px-6 py-8 text-center text-sm text-slate-500">Aucun dossier dans ce lot.</li>
                        {% endfor %}
                    </ul>
                </section>
            {% endif %}

            {% if batch.inPreparation and ready is not empty %}
                <form method="post" action="{{ path('app_batch_add_dossiers', {id: batch.id}) }}" class="card p-6">
                    <input type="hidden" name="_token" value="{{ token }}">
                    <h2 class="mb-3 font-semibold text-slate-900">Ajouter des dossiers prêts ({{ ready|length }})</h2>
                    {{ include('batch/_ready_table.html.twig') }}
                    <div class="mt-4 text-right"><button type="submit" class="btn btn-secondary">Ajouter la sélection</button></div>
                </form>
            {% endif %}
        </div>

        <div class="space-y-6">
            {% if batch.inPreparation %}
                <form method="post" action="{{ path('app_batch_deposit', {id: batch.id}) }}" class="card space-y-4 p-6" data-turbo-confirm="Confirmer le dépôt du lot à l'ambassade ?">
                    <input type="hidden" name="_token" value="{{ token }}">
                    <div>
                        <h2 class="font-semibold text-slate-900">Dépôt à l'ambassade</h2>
                        <p class="text-sm text-slate-500">Étape 6 — à enregistrer une fois le lot déposé.</p>
                    </div>
                    <div><label class="form-label" for="deposited_at">Date de dépôt</label><input type="date" id="deposited_at" name="deposited_at" value="{{ 'now'|date('Y-m-d') }}" required class="form-input"></div>
                    <div><label class="form-label" for="deposit_fee">Frais de dépôt payés (FCFA)</label><input type="number" id="deposit_fee" name="deposit_fee" min="0" step="500" value="0" class="form-input"></div>
                    <div><label class="form-label" for="expected_pickup_date">Date de retrait communiquée</label><input type="date" id="expected_pickup_date" name="expected_pickup_date" class="form-input"></div>
                    <button type="submit" class="btn btn-accent w-full" {{ batch.dossiers is empty ? 'disabled' }}>Enregistrer le dépôt</button>
                    <p class="text-xs text-slate-500">Joignez les reçus et photos du dépôt ci-dessous.</p>
                </form>
            {% endif %}

            <section id="pieces" class="card">
                <div class="border-b border-slate-100 px-6 py-4"><h2 class="font-semibold text-slate-900">Reçus et photos ({{ batch.attachments|length }})</h2></div>
                {% set images = batch.attachments|filter(a => a.image) %}
                {% if images is not empty %}
                    <div class="grid grid-cols-3 gap-2 p-4">
                        {% for attachment in images %}
                            <a href="{{ path('app_media_batch', {id: attachment.id}) }}" target="_blank" data-turbo="false" class="block aspect-square overflow-hidden rounded-lg bg-slate-100">
                                <img src="{{ path('app_media_batch', {id: attachment.id}) }}" alt="{{ attachment.label }}" class="h-full w-full object-cover" loading="lazy">
                            </a>
                        {% endfor %}
                    </div>
                {% endif %}
                <ul class="divide-y divide-slate-100">
                    {% for attachment in batch.attachments %}
                        <li class="flex items-center gap-2 px-6 py-2.5 text-sm">
                            <span class="badge bg-slate-100 text-slate-700">{{ attachment.type.label }}</span>
                            <a href="{{ path('app_media_batch', {id: attachment.id}) }}" target="_blank" data-turbo="false" class="min-w-0 flex-1 truncate text-slate-800 hover:text-brand-700">{{ attachment.label }}</a>
                            <form method="post" action="{{ path('app_batch_attachment_delete', {id: attachment.id}) }}" data-turbo-confirm="Supprimer « {{ attachment.label }} » ?">
                                <input type="hidden" name="_token" value="{{ csrf_token('delete-attachment-' ~ attachment.id) }}">
                                <button type="submit" class="text-xs text-red-600 hover:underline">Supprimer</button>
                            </form>
                        </li>
                    {% else %}
                        <li class="px-6 py-6 text-center text-sm text-slate-500">Aucune pièce.</li>
                    {% endfor %}
                </ul>
                <div class="border-t border-slate-100 bg-slate-50 p-4">
                    {{ form_start(attachment_form) }}
                        {{ form_row(attachment_form.type, {row_attr: {class: 'mb-3'}}) }}
                        {{ form_row(attachment_form.label, {row_attr: {class: 'mb-3'}}) }}
                        {{ form_row(attachment_form.file, {row_attr: {class: 'mb-3'}, attr: {class: 'block w-full text-sm text-slate-600 file:mr-3 file:rounded-lg file:border-0 file:bg-brand-50 file:px-3 file:py-2 file:text-brand-700'}}) }}
                        <button type="submit" class="btn btn-primary w-full">Ajouter</button>
                    {{ form_end(attachment_form) }}
                </div>
            </section>
        </div>
    </div>
{% endblock %}