{% extends 'base_app.html.twig' %}

{% block title %}Mon Profil | Xtra{% endblock %}

{% block body %}
<div class="max-w-4xl mx-auto">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-slate-900">Mon Profil</h1>
        <p class="text-slate-500">Gérez vos informations personnelles et celles de votre entreprise.</p>
    </div>

    <!-- Flash Messages -->
    {% for message in app.flashes('success') %}
        <div class="mb-6 rounded-md bg-emerald-50 p-4 border border-emerald-200">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-emerald-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <p class="text-sm font-medium text-emerald-800">{{ message }}</p>
                </div>
            </div>
        </div>
    {% endfor %}

    <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
        <!-- Left Column: User Card -->
        <div class="lg:col-span-1">
            <div class="bg-white shadow-sm rounded-xl border border-slate-200 overflow-hidden">
                <div class="bg-slate-50 px-6 py-8 flex flex-col items-center text-center border-b border-slate-200">
                    <div class="relative mb-4">
                        {% if user.avatar is defined and user.avatar %}
                            <img src="{{ user.avatar }}" alt="Avatar" class="h-24 w-24 rounded-full object-cover border-4 border-white shadow-sm">
                        {% else %}
                            <div class="h-24 w-24 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 text-2xl font-bold border-4 border-white shadow-sm">
                                {{ user.prenomResponsable|first|upper }}{{ user.nomResponsable|first|upper }}
                            </div>
                        {% endif %}
                        <button class="absolute bottom-0 right-0 bg-white rounded-full p-1.5 shadow-sm border border-slate-200 text-slate-500 hover:text-indigo-600">
                            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </button>
                    </div>
                    <h2 class="text-lg font-bold text-slate-900">{{ user.prenomResponsable }} {{ user.nomResponsable }}</h2>
                    <p class="text-sm text-slate-500">{{ user.roleString|capitalize }}</p>
                    
                    <div class="mt-4 flex gap-2">
                        <span class="inline-flex items-center rounded-full bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20">Compte vérifié</span>
                    </div>
                </div>
                <div class="px-6 py-4">
                    <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Détails</h3>
                    <ul class="space-y-3 text-sm">
                        <li class="flex justify-between">
                            <span class="text-slate-500">Email</span>
                            <span class="text-slate-900 font-medium">{{ user.email }}</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-slate-500">Téléphone</span>
                            <span class="text-slate-900 font-medium">{{ user.telephone ?? 'Non renseigné' }}</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-slate-500">Membre depuis</span>
                            <span class="text-slate-900 font-medium">{{ user.createdAt|date('d/m/Y') }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Right Column: Edit Forms -->
        <div class="lg:col-span-2 space-y-8">
            
            <!-- Personal Info Form -->
            <div class="bg-white shadow-sm rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-slate-200 flex justify-between items-center">
                    <h3 class="text-base font-semibold leading-6 text-slate-900">Informations Personnelles</h3>
                </div>
                <div class="px-6 py-6">
                    <form action="{{ path('app_profile_edit') }}" method="POST">
                        <div class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-6">
                            <div class="sm:col-span-3">
                                <label for="prenom" class="block text-sm font-medium leading-6 text-slate-900">Prénom</label>
                                <div class="mt-2">
                                    <input type="text" name="prenom" id="prenom" value="{{ user.prenomResponsable }}" class="block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                </div>
                            </div>

                            <div class="sm:col-span-3">
                                <label for="nom" class="block text-sm font-medium leading-6 text-slate-900">Nom</label>
                                <div class="mt-2">
                                    <input type="text" name="nom" id="nom" value="{{ user.nomResponsable }}" class="block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                </div>
                            </div>

                            <div class="sm:col-span-4">
                                <label for="email" class="block text-sm font-medium leading-6 text-slate-900">Email (non modifiable)</label>
                                <div class="mt-2">
                                    <input type="email" name="email" id="email" value="{{ user.email }}" disabled class="block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 bg-slate-50">
                                </div>
                            </div>

                            <div class="sm:col-span-4">
                                <label for="telephone" class="block text-sm font-medium leading-6 text-slate-900">Téléphone</label>
                                <div class="mt-2">
                                    <input type="tel" name="telephone" id="telephone" value="{{ user.telephone }}" class="block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                </div>
                            </div>

                            <div class="col-span-full">
                                <label for="description" class="block text-sm font-medium leading-6 text-slate-900">Bio / Description</label>
                                <div class="mt-2">
                                    <textarea id="description" name="description" rows="3" class="block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">{{ user.description }}</textarea>
                                </div>
                                <p class="mt-1 text-sm text-slate-500">Quelques mots à propos de vous.</p>
                            </div>
                        </div>
                        <div class="mt-6 flex items-center justify-end gap-x-6">
                            <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Enregistrer</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Company Info Form -->
            <div class="bg-white shadow-sm rounded-xl border border-slate-200">
                <div class="px-6 py-4 border-b border-slate-200 flex justify-between items-center">
                    <h3 class="text-base font-semibold leading-6 text-slate-900">Mon Entreprise</h3>
                    <span class="inline-flex items-center rounded-md bg-slate-50 px-2 py-1 text-xs font-medium text-slate-600 ring-1 ring-inset ring-slate-500/10">SIREN : {{ user.siren }}</span>
                </div>
                <div class="px-6 py-6">
                    <form action="{{ path('app_profile_company_edit') }}" method="POST">
                        <div class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-6">
                            <div class="col-span-full">
                                <label for="societe" class="block text-sm font-medium leading-6 text-slate-900">Nom de la société</label>
                                <div class="mt-2">
                                    <input type="text" name="societe" id="societe" value="{{ user.nomSociete }}" class="block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                </div>
                            </div>

                            <div class="col-span-full">
                                <label for="adresse" class="block text-sm font-medium leading-6 text-slate-900">Adresse du siège</label>
                                <div class="mt-2">
                                    <input type="text" name="adresse" id="adresse" value="{{ user.adresse }}" class="block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                </div>
                            </div>

                            <div class="sm:col-span-4">
                                <label for="secteur" class="block text-sm font-medium leading-6 text-slate-900">Secteur d'activité</label>
                                <div class="mt-2">
                                    <input type="text" name="secteur" id="secteur" value="{{ user.secteurActivite }}" class="block w-full rounded-md border-0 py-1.5 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                </div>
                            </div>
                        </div>
                        <div class="mt-6 flex items-center justify-end gap-x-6">
                            <button type="submit" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 hover:bg-slate-50">Mettre à jour l'entreprise</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}