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

{% block title %}Nouveau dossier{% endblock %}
{% block page_title %}Nouveau dossier{% endblock %}

{% macro document_row(doc) %}
    <div data-collection-item class="grid items-start gap-3 rounded-lg border border-slate-200 bg-slate-50 p-3 sm:grid-cols-[2fr_1fr_2fr_auto]">
        {{ form_row(doc.label, {row_attr: {class: 'mb-0'}}) }}
        {{ form_row(doc.category, {row_attr: {class: 'mb-0'}}) }}
        {{ form_row(doc.file, {row_attr: {class: 'mb-0'}, 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="button" data-action="form-collection#remove" class="mt-6 rounded-lg p-2 text-slate-400 hover:bg-red-50 hover:text-red-600" title="Retirer">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
        </button>
    </div>
{% endmacro %}

{% block content %}
    {{ form_start(form, {attr: {
        'data-controller': 'passport-lookup',
        'data-passport-lookup-url-value': path('app_client_lookup'),
        'data-passport-lookup-prefix-value': form.vars.name,
    }}) }}
    {{ form_errors(form) }}

    <div class="grid gap-6 xl:grid-cols-3">
        <div class="space-y-6 xl:col-span-2">
            <section class="card p-6">
                <h2 class="mb-1 font-semibold text-slate-900">1. Client</h2>
                <p class="mb-5 text-sm text-slate-500">Commencez par le numéro de passeport : un client déjà connu est retrouvé automatiquement.</p>
                <div data-passport-lookup-target="result"></div>
                <div class="grid gap-x-4 sm:grid-cols-2">
                    <div class="sm:col-span-2">{{ form_row(form.client.passportNumber) }}</div>
                    {{ form_row(form.client.firstName) }}
                    {{ form_row(form.client.lastName) }}
                    {{ form_row(form.client.phone) }}
                    {{ form_row(form.client.email) }}
                    {{ form_row(form.client.birthDate) }}
                    {{ form_row(form.client.nationality) }}
                    {{ form_row(form.client.passportExpiresAt) }}
                    {{ form_row(form.client.address) }}
                    <div class="sm:col-span-2">{{ form_row(form.client.notes) }}</div>
                </div>
            </section>

            <section class="card p-6" data-controller="form-collection"
                     data-form-collection-prototype-value="{{ _self.document_row(form.documents.vars.prototype)|e('html_attr') }}"
                     data-form-collection-index-value="{{ form.documents|length }}">
                <div class="mb-4 flex items-center justify-between gap-4">
                    <div>
                        <h2 class="font-semibold text-slate-900">3. Pièces à joindre</h2>
                        <p class="text-sm text-slate-500">Donnez un libellé à chaque document (PDF ou image, 10 Mo max).</p>
                    </div>
                    <button type="button" class="btn btn-secondary" data-action="form-collection#add">+ Ajouter une pièce</button>
                </div>
                <div data-form-collection-target="list" class="space-y-3">
                    {% for doc in form.documents %}{{ _self.document_row(doc) }}{% endfor %}
                </div>
                <p data-form-collection-target="empty" class="rounded-lg border border-dashed border-slate-300 px-4 py-6 text-center text-sm text-slate-500" {{ form.documents|length ? 'hidden' }}>
                    Aucune pièce pour l'instant. Vous pourrez aussi en ajouter depuis la fiche du dossier.
                </p>
                {% do form.documents.setRendered %}
            </section>
        </div>

        <div class="space-y-6">
            <section class="card p-6">
                <h2 class="mb-5 font-semibold text-slate-900">2. Demande</h2>
                {{ form_row(form.embassy) }}
                {{ form_row(form.visaType) }}
                {{ form_row(form.travelDate) }}
                {{ form_row(form.feeAmount) }}
                {{ form_row(form.notes) }}
                {% if form.agent is defined %}
                    {{ form_row(form.agent) }}
                {% else %}
                    <p class="rounded-lg bg-slate-50 px-3 py-2 text-xs text-slate-500">Le dossier sera affecté à un agent par le dispatcher.</p>
                {% endif %}
            </section>
            <div class="flex gap-2">
                <a href="{{ path('app_dossier_index') }}" class="btn btn-secondary flex-1">Annuler</a>
                <button type="submit" class="btn btn-primary flex-1">Créer le dossier</button>
            </div>
        </div>
    </div>
    {{ form_end(form) }}
{% endblock %}