{% extends 'base.html' %}
{% load static %}

{% block title %}Criteres d'eligibilite - {{ settings.site_name }}{% endblock %}
{% block meta_description %}Decouvrez les criteres d'eligibilite pour postuler au programme EUROMA : diplomes requis, competences linguistiques et autres conditions.{% endblock %}

{% block content %}
{% include 'components/breadcrumb.html' with page_title="Criteres d'eligibilite" page_subtitle="Conditions d'admission" %}

<!-- Introduction -->
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl mx-auto text-center mb-12">
            <h1 class="text-4xl font-bold text-primary mb-6">Criteres d'eligibilite</h1>
            <p class="text-xl text-gray-600">
                Pour etre eligible au programme EUROMA, les candidats doivent remplir plusieurs criteres
                academiques et linguistiques. Verifiez votre eligibilite avant de postuler.
            </p>
        </div>
    </div>
</section>

<!-- Criteres principaux -->
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-primary text-center mb-12">Criteres d'admission</h2>

        <div class="grid md:grid-cols-2 gap-8">
            <!-- Diplome requis -->
            <div class="bg-white rounded-xl p-8 shadow-md">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center mr-4">
                        <svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold text-primary">Diplome requis</h3>
                </div>
                <div class="space-y-4">
                    <p class="text-gray-600">
                        Les candidats doivent etre titulaires (ou en cours d'obtention) d'un diplome de premier cycle
                        (Bachelor/Licence) dans l'un des domaines suivants:
                    </p>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span class="text-gray-700">Informatique / Computer Science</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span class="text-gray-700">Genie logiciel / Software Engineering</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span class="text-gray-700">Mathematiques / Statistiques</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span class="text-gray-700">Genie electrique / Electronique</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span class="text-gray-700">Domaines connexes avec solide formation technique</span>
                        </li>
                    </ul>
                    <div class="mt-4 p-4 bg-blue-50 rounded-lg">
                        <p class="text-sm text-blue-800">
                            <strong>Note:</strong> Le diplome doit correspondre a au moins 180 ECTS ou equivalent (3 ans d'etudes superieures).
                        </p>
                    </div>
                </div>
            </div>

            <!-- Competences linguistiques -->
            <div class="bg-white rounded-xl p-8 shadow-md">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center mr-4">
                        <svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold text-primary">Competences linguistiques</h3>
                </div>
                <div class="space-y-4">
                    <p class="text-gray-600">
                        L'enseignement est dispense en anglais. Les candidats doivent demontrer leur maitrise
                        de l'anglais par l'un des certificats suivants:
                    </p>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="p-4 bg-gray-50 rounded-lg text-center">
                            <div class="text-2xl font-bold text-secondary">TOEFL iBT</div>
                            <div class="text-gray-600">Min. 90 points</div>
                        </div>
                        <div class="p-4 bg-gray-50 rounded-lg text-center">
                            <div class="text-2xl font-bold text-secondary">IELTS</div>
                            <div class="text-gray-600">Min. 6.5</div>
                        </div>
                        <div class="p-4 bg-gray-50 rounded-lg text-center">
                            <div class="text-2xl font-bold text-secondary">Cambridge</div>
                            <div class="text-gray-600">C1 Advanced</div>
                        </div>
                        <div class="p-4 bg-gray-50 rounded-lg text-center">
                            <div class="text-2xl font-bold text-secondary">Autre</div>
                            <div class="text-gray-600">Niveau C1</div>
                        </div>
                    </div>
                    <div class="mt-4 p-4 bg-green-50 rounded-lg">
                        <p class="text-sm text-green-800">
                            <strong>Exemption:</strong> Les candidats dont l'anglais est la langue maternelle ou
                            ayant effectue leurs etudes en anglais peuvent etre exemptes.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Criteres detailles -->
{% if requirements %}
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-primary text-center mb-12">Criteres detailles</h2>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for req in requirements %}
            <div class="border rounded-xl p-6 {% if req.is_mandatory %}border-l-4 border-l-red-500{% else %}border-l-4 border-l-green-500{% endif %}">
                <div class="flex items-start justify-between mb-4">
                    <h3 class="text-lg font-semibold text-primary">{{ req.title }}</h3>
                    {% if req.is_mandatory %}
                    <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-700 rounded">Obligatoire</span>
                    {% else %}
                    <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-700 rounded">Recommande</span>
                    {% endif %}
                </div>
                <p class="text-gray-600">{{ req.description }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- Eligibilite Erasmus Mundus -->
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-primary text-center mb-12">Eligibilite a la bourse Erasmus Mundus</h2>

        <div class="max-w-4xl mx-auto">
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-8">
                    <p class="text-gray-600 mb-6">
                        Pour etre eligible a une bourse Erasmus Mundus, en plus des criteres academiques,
                        les candidats doivent respecter les conditions suivantes:
                    </p>

                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center font-bold mr-4">1</div>
                            <div>
                                <h4 class="font-semibold text-primary">Nationalite</h4>
                                <p class="text-gray-600">Ouvert aux candidats de tous pays. Les etudiants de pays partenaires et de pays du programme ont des quotas differents.</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center font-bold mr-4">2</div>
                            <div>
                                <h4 class="font-semibold text-primary">Residence</h4>
                                <p class="text-gray-600">Les candidats ne doivent pas avoir reside ou exerce leur activite principale dans un pays du programme pendant plus de 12 mois au cours des 5 dernieres annees.</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center font-bold mr-4">3</div>
                            <div>
                                <h4 class="font-semibold text-primary">Diplome anterieur</h4>
                                <p class="text-gray-600">Les candidats ne peuvent pas avoir deja obtenu un diplome Erasmus Mundus Joint Master Degree.</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center font-bold mr-4">4</div>
                            <div>
                                <h4 class="font-semibold text-primary">Disponibilite</h4>
                                <p class="text-gray-600">Les candidats doivent s'engager a suivre le programme a temps plein pendant toute sa duree (2 ans).</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Verifiez votre eligibilite -->
<section class="py-16 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-primary text-center mb-12">Verifiez votre eligibilite</h2>

        <div class="bg-gray-50 rounded-xl p-8" x-data="{ checks: {} }">
            <p class="text-gray-600 mb-6 text-center">Cochez les criteres que vous remplissez:</p>

            <div class="space-y-4">
                <label class="flex items-center p-4 bg-white rounded-lg cursor-pointer hover:bg-gray-100 transition">
                    <input type="checkbox" x-model="checks.degree" class="w-5 h-5 text-secondary rounded">
                    <span class="ml-3 text-gray-700">Je possede un Bachelor/Licence en informatique ou domaine connexe</span>
                </label>

                <label class="flex items-center p-4 bg-white rounded-lg cursor-pointer hover:bg-gray-100 transition">
                    <input type="checkbox" x-model="checks.english" class="w-5 h-5 text-secondary rounded">
                    <span class="ml-3 text-gray-700">J'ai un certificat d'anglais (TOEFL 90+, IELTS 6.5+, ou equivalent)</span>
                </label>

                <label class="flex items-center p-4 bg-white rounded-lg cursor-pointer hover:bg-gray-100 transition">
                    <input type="checkbox" x-model="checks.fulltime" class="w-5 h-5 text-secondary rounded">
                    <span class="ml-3 text-gray-700">Je peux m'engager a temps plein pendant 2 ans</span>
                </label>

                <label class="flex items-center p-4 bg-white rounded-lg cursor-pointer hover:bg-gray-100 transition">
                    <input type="checkbox" x-model="checks.noEmjmd" class="w-5 h-5 text-secondary rounded">
                    <span class="ml-3 text-gray-700">Je n'ai pas deja obtenu de diplome Erasmus Mundus</span>
                </label>
            </div>

            <!-- Result -->
            <div class="mt-8 text-center">
                <template x-if="checks.degree && checks.english && checks.fulltime && checks.noEmjmd">
                    <div class="p-6 bg-green-100 rounded-xl">
                        <svg class="w-16 h-16 mx-auto text-green-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <h3 class="text-xl font-bold text-green-800 mb-2">Vous semblez eligible!</h3>
                        <p class="text-green-700 mb-4">Vous remplissez les criteres de base. N'hesitez pas a postuler!</p>
                        <a href="{% url 'program:apply' %}" class="inline-flex items-center px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium">
                            Commencer ma candidature
                        </a>
                    </div>
                </template>
                <template x-if="!(checks.degree && checks.english && checks.fulltime && checks.noEmjmd) && (checks.degree || checks.english || checks.fulltime || checks.noEmjmd)">
                    <div class="p-6 bg-yellow-100 rounded-xl">
                        <svg class="w-16 h-16 mx-auto text-yellow-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                        </svg>
                        <h3 class="text-xl font-bold text-yellow-800 mb-2">Verification incomplete</h3>
                        <p class="text-yellow-700">Assurez-vous de remplir tous les criteres obligatoires avant de postuler.</p>
                    </div>
                </template>
            </div>
        </div>
    </div>
</section>

<!-- FAQ -->
{% if faqs %}
<section class="py-16 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-primary text-center mb-12">Questions frequentes</h2>

        <div class="space-y-4" x-data="{ openFaq: null }">
            {% for faq in faqs %}
            <div class="border rounded-lg overflow-hidden bg-white">
                <button @click="openFaq = openFaq === {{ forloop.counter }} ? null : {{ forloop.counter }}"
                        class="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50 transition">
                    <span class="font-medium text-primary">{{ faq.question }}</span>
                    <svg class="w-5 h-5 text-gray-500 transition-transform" :class="{ 'rotate-180': openFaq === {{ forloop.counter }} }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div x-show="openFaq === {{ forloop.counter }}" x-collapse class="px-6 py-4 bg-gray-50 border-t">
                    <p class="text-gray-600">{{ faq.answer }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- CTA -->
<section class="py-16 bg-primary text-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-2xl font-bold mb-4">Des questions sur votre eligibilite?</h2>
        <p class="text-white/80 mb-8">Notre equipe est la pour vous aider et repondre a vos questions.</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{% url 'program:apply' %}"
               class="px-8 py-3 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition font-medium">
                Comment postuler?
            </a>
            <a href="{% url 'contact:contact' %}"
               class="px-8 py-3 bg-white/10 text-white rounded-lg hover:bg-white/20 transition font-medium border border-white/30">
                Nous contacter
            </a>
        </div>
    </div>
</section>
{% endblock %}