{% extends 'base.html' %}

{% block title %}Contact - {{ settings.site_name }}{% endblock %}

{% block content %}
{% include 'components/breadcrumb.html' with page_title="Contact" page_subtitle="Nous sommes a votre ecoute" %}

<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-3 gap-8">
            <!-- Contact Form -->
            <div class="lg:col-span-2">
                <div class="bg-gray-50 rounded-lg p-8">
                    <h2 class="text-2xl font-bold text-primary mb-6">Envoyez-nous un message</h2>

                    {% if messages %}
                    {% for message in messages %}
                    <div class="mb-6 p-4 rounded-lg {% if message.tags == 'success' %}bg-green-100 text-green-700{% else %}bg-red-100 text-red-700{% endif %}">
                        {{ message }}
                    </div>
                    {% endfor %}
                    {% endif %}

                    <form method="post" class="space-y-6">
                        {% csrf_token %}
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label for="id_first_name" class="block text-sm font-medium text-gray-700 mb-1">Prenom *</label>
                                {{ form.first_name }}
                                {% if form.first_name.errors %}
                                <p class="text-red-500 text-sm mt-1">{{ form.first_name.errors.0 }}</p>
                                {% endif %}
                            </div>
                            <div>
                                <label for="id_last_name" class="block text-sm font-medium text-gray-700 mb-1">Nom *</label>
                                {{ form.last_name }}
                                {% if form.last_name.errors %}
                                <p class="text-red-500 text-sm mt-1">{{ form.last_name.errors.0 }}</p>
                                {% endif %}
                            </div>
                        </div>

                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label for="id_email" class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
                                {{ form.email }}
                                {% if form.email.errors %}
                                <p class="text-red-500 text-sm mt-1">{{ form.email.errors.0 }}</p>
                                {% endif %}
                            </div>
                            <div>
                                <label for="id_phone" class="block text-sm font-medium text-gray-700 mb-1">Telephone</label>
                                {{ form.phone }}
                            </div>
                        </div>

                        <div>
                            <label for="id_subject_category" class="block text-sm font-medium text-gray-700 mb-1">Sujet *</label>
                            {{ form.subject_category }}
                        </div>

                        <div>
                            <label for="id_subject" class="block text-sm font-medium text-gray-700 mb-1">Objet *</label>
                            {{ form.subject }}
                            {% if form.subject.errors %}
                            <p class="text-red-500 text-sm mt-1">{{ form.subject.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <div>
                            <label for="id_message" class="block text-sm font-medium text-gray-700 mb-1">Message *</label>
                            {{ form.message }}
                            {% if form.message.errors %}
                            <p class="text-red-500 text-sm mt-1">{{ form.message.errors.0 }}</p>
                            {% endif %}
                        </div>

                        <button type="submit" class="w-full bg-primary text-white py-3 rounded-lg font-semibold hover:bg-secondary transition">
                            Envoyer le message
                        </button>
                    </form>
                </div>
            </div>

            <!-- Contact Info Sidebar -->
            <div class="lg:col-span-1">
                <!-- Main Contact -->
                <div class="bg-gray-50 rounded-lg p-6 mb-6">
                    <h3 class="font-semibold text-primary mb-4">Informations de contact</h3>
                    {% for info in contact_infos %}
                    <div class="{% if not forloop.last %}mb-4 pb-4 border-b border-gray-200{% endif %}">
                        <h4 class="font-medium text-gray-800">{{ info.department_name }}</h4>
                        <div class="mt-2 space-y-2 text-sm text-gray-600">
                            <a href="mailto:{{ info.email }}" class="flex items-center hover:text-primary transition">
                                <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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                </svg>
                                {{ info.email }}
                            </a>
                            {% if info.phone %}
                            <a href="tel:{{ info.phone }}" class="flex items-center hover:text-primary transition">
                                <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                                </svg>
                                {{ info.phone }}
                            </a>
                            {% endif %}
                        </div>
                    </div>
                    {% empty %}
                    <div class="space-y-2 text-sm text-gray-600">
                        <a href="mailto:{{ settings.email }}" class="flex items-center hover:text-primary transition">
                            <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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                            {{ settings.email }}
                        </a>
                        <a href="tel:{{ settings.phone }}" class="flex items-center hover:text-primary transition">
                            <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                            </svg>
                            {{ settings.phone }}
                        </a>
                    </div>
                    {% endfor %}
                </div>

                <!-- University Contacts -->
                {% if universities %}
                <div class="bg-gray-50 rounded-lg p-6">
                    <h3 class="font-semibold text-primary mb-4">Contacts par universite</h3>
                    <div class="space-y-4">
                        {% for uni in universities %}
                        <div class="{% if not forloop.last %}pb-4 border-b border-gray-200{% endif %}">
                            <h4 class="font-medium text-gray-800">{{ uni.name }}</h4>
                            {% for contact in uni.contacts.all|slice:":1" %}
                            <p class="text-sm text-gray-500">{{ contact.contact_person }}</p>
                            <a href="mailto:{{ contact.email }}" class="text-sm text-secondary hover:text-primary transition">{{ contact.email }}</a>
                            {% empty %}
                            {% if uni.email %}
                            <a href="mailto:{{ uni.email }}" class="text-sm text-secondary hover:text-primary transition">{{ uni.email }}</a>
                            {% endif %}
                            {% endfor %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>
{% endblock %}