{% extends 'dashboard/base.twig' %}

{% block title %}Nouveau Client{% endblock %}
{% block title_header %}Ajouter un <span class="text-blue-500">Client</span>{% endblock %}

{% block body %}
    <div class="w-full">

        {# Navigation haute #}
        <div class="mb-6 px-2">
            <a href="{{ path('app_crm_customer') }}" class="inline-flex items-center text-[10px] font-black text-slate-500 hover:text-white uppercase tracking-[0.2em] transition-colors group">
                <svg class="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Annuaire Clients
            </a>
        </div>

        {# Carte Full Width #}
        <div class="backdrop-blur-xl bg-[#1e293b]/40 border border-white/5 rounded-[2.5rem] shadow-2xl overflow-hidden">

            <div class="px-10 py-8 border-b border-white/5 bg-white/5 flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-bold text-white tracking-tight">Fiche d'identification</h2>
                    <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mt-1">Saisie des informations de compte</p>
                </div>
            </div>

            <div class="p-10">
                {{ form_start(form, {'attr': {'class': 'space-y-12'}}) }}

                {# SECTION 1 : IDENTITÉ & TYPE (Pleine largeur) #}
                <div class="w-full">
                    <div class="flex items-center space-x-4 mb-8">
                        <span class="w-8 h-px bg-blue-500/30"></span>
                        <span class="text-[10px] font-black text-blue-500 uppercase tracking-[0.3em]">Identité & Type</span>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-6 gap-8 mb-8">
                        <div class="md:col-span-1">
                            {{ form_label(form.civ) }}
                            {{ form_widget(form.civ) }}
                        </div>
                        <div class="md:col-span-2">
                            {{ form_label(form.surname) }}
                            {{ form_widget(form.surname) }}
                        </div>
                        <div class="md:col-span-3">
                            {{ form_label(form.name) }}
                            {{ form_widget(form.name) }}
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                            {{ form_label(form.type) }}
                            {{ form_widget(form.type) }}
                        </div>
                        <div>
                            {{ form_label(form.siret) }}
                            {{ form_widget(form.siret) }}
                        </div>
                    </div>
                </div>

                {# SECTION 2 : CONTACT (Ratio 50/50 exact) #}
                <div class="w-full pt-4">
                    <div class="flex items-center space-x-4 mb-8">
                        <span class="w-8 h-px bg-emerald-500/30"></span>
                        <span class="text-[10px] font-black text-emerald-500 uppercase tracking-[0.3em]">Contact</span>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="w-full">
                            {{ form_label(form.email) }}
                            {{ form_widget(form.email) }}
                        </div>
                        <div class="w-full">
                            {{ form_label(form.phone) }}
                            {{ form_widget(form.phone) }}
                        </div>
                    </div>
                </div>

                {# ACTIONS : Boutons espacés #}
                <div class="pt-10 border-t border-white/5 flex items-center justify-end">
                    <div class="flex items-center space-x-16"> {# Espace large entre les deux boutons #}
                        <a href="{{ path('app_crm_customer') }}" class="mr-2 text-[10px] font-black text-slate-500 hover:text-rose-500 uppercase tracking-widest transition-colors">
                            Annuler l'opération
                        </a>
                        <button type="submit" class="p-2 px-16 py-4 bg-blue-600 hover:bg-blue-500 text-white text-[10px] font-black uppercase tracking-[0.2em] rounded-2xl shadow-lg shadow-blue-600/20 transition-all hover:scale-105 active:scale-95">
                            Valider et enregistrer
                        </button>
                    </div>
                </div>

                {{ form_end(form) }}
            </div>
        </div>
    </div>

    <style>
        /* Styles communs aux champs */
        label { @apply block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-3 ml-2; }

        input, select {
            @apply w-full bg-slate-900/40 border border-white/10 rounded-2xl px-6 py-4 text-sm text-white focus:border-blue-500 focus:ring-4 focus:ring-blue-500/5 outline-none transition-all duration-300 !important;
        }

        /* Personnalisation du select (flèche custom) */
        select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1.5rem center;
            background-size: 1rem;
            @apply appearance-none cursor-pointer pr-12;
        }
    </style>
{% endblock %}