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

{% block title %}Nouveau Prestataire{% endblock %}

{% block actions %}
    <a data-turbo="false"  href="{{ path('app_crm_prestataire') }}" class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-200 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-colors">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
        </svg>
        Retour à la liste
    </a>
{% endblock %}

{% block body %}
    <div class="p-4 md:p-6 bg-gray-50 dark:bg-gray-900 min-h-screen w-full">
        <div class="w-full">
            <div class="bg-white dark:bg-gray-800 shadow-md rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
                <div class="p-8">
                    {{ form_start(form, {'attr': {'class': 'space-y-8'}}) }}

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
                        {# PRENOM #}
                        <div class="space-y-2">
                            {{ form_label(form.surname, 'Prénom', {
                                'label_attr': {'class': 'block text-sm font-semibold text-gray-200 dark:text-gray-200'}
                            }) }}
                            {{ form_widget(form.surname, {
                                'attr': {
                                    'class': 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-3 dark:bg-gray-700 dark:border-gray-600 dark:text-white',
                                    'placeholder': 'Prénom'
                                }
                            }) }}
                            <div class="text-red-500 text-xs mt-1 italic">{{ form_errors(form.surname) }}</div>
                        </div>

                        {# NOM #}
                        <div class="space-y-2">
                            {{ form_label(form.name, 'Nom', {
                                'label_attr': {'class': 'block text-sm font-semibold text-gray-200 dark:text-gray-200'}
                            }) }}
                            {{ form_widget(form.name, {
                                'attr': {
                                    'class': 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-3 dark:bg-gray-700 dark:border-gray-600 dark:text-white',
                                    'placeholder': 'Nom'
                                }
                            }) }}
                            <div class="text-red-500 text-xs mt-1 italic">{{ form_errors(form.name) }}</div>
                        </div>

                        {# EMAIL #}
                        <div class="space-y-2">
                            {{ form_label(form.email, 'Email', {
                                'label_attr': {'class': 'block text-sm font-semibold text-gray-200 dark:text-gray-200'}
                            }) }}
                            {{ form_widget(form.email, {
                                'attr': {
                                    'class': 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-3 dark:bg-gray-700 dark:border-gray-600 dark:text-white',
                                    'placeholder': 'email@example.com'
                                }
                            }) }}
                            <div class="text-red-500 text-xs mt-1 italic">{{ form_errors(form.email) }}</div>
                        </div>

                        {# TELEPHONE #}
                        <div class="space-y-2">
                            {{ form_label(form.phone, 'Téléphone', {
                                'label_attr': {'class': 'block text-sm font-semibold text-gray-200 dark:text-gray-200'}
                            }) }}
                            {{ form_widget(form.phone, {
                                'attr': {
                                    'class': 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-3 dark:bg-gray-700 dark:border-gray-600 dark:text-white',
                                    'placeholder': '06...'
                                }
                            }) }}
                            <div class="text-red-500 text-xs mt-1 italic">{{ form_errors(form.phone) }}</div>
                        </div>
                    </div>

                    <div class="flex items-center justify-end pt-8 border-t border-gray-200 dark:border-gray-700 mt-10">
                        <button type="submit" class="flex items-center justify-center text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-bold rounded-lg text-sm px-8 py-3.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 transition-all shadow-lg hover:shadow-blue-500/30">
                            Créer le prestataire
                        </button>
                    </div>

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