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

{% block title %}GLOCAL IMPACT 3A - Inscription à {{ formation.titre }}{% endblock %}

{% block content %}

<!-- ============================================ -->
<!-- SECTION 1 : HERO INSCRIPTION                  -->
<!-- ============================================ -->
<!--
    🖼️ IMAGE RECOMMANDÉE : Image de la formation ou inscription
    📁 EMPLACEMENT : /media/images/formations/
-->
<div class="page-hero" style="background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('{% if formation.image %}{{ formation.image.url }}{% else %}{% static 'images/inscription-hero-placeholder.jpg' %}{% endif %}') center/cover;">
    <div class="container">
        <h1>INSCRIPTION À LA FORMATION</h1>
        <p>{{ formation.titre }}</p>
    </div>
</div>

<!-- ============================================ -->
<!-- SECTION 2 : MESSAGES DE SUCCÈS/ERREUR         -->
<!-- ============================================ -->
{% if messages %}
<div class="messages-container">
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }}">
        {{ message }}
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- ============================================ -->
<!-- SECTION 3 : RÉCAPITULATIF DE LA FORMATION    -->
<!-- ============================================ -->
<div class="recap-section">
    <div class="container">
        <div class="recap-card">
            <div class="recap-header">
                <h2>Récapitulatif de la formation</h2>
            </div>
            <div class="recap-content">
                <div class="recap-grid">
                    <div class="recap-item">
                        <span class="recap-label">Formation</span>
                        <span class="recap-value">{{ formation.titre }}</span>
                    </div>
                    <div class="recap-item">
                        <span class="recap-label">Durée</span>
                        <span class="recap-value">{{ formation.duree }}</span>
                    </div>
                    <div class="recap-item">
                        <span class="recap-label">Prix</span>
                        <span class="recap-value">{{ formation.prix }} FCFA</span>
                    </div>
                    <div class="recap-item">
                        <span class="recap-label">Catégorie</span>
                        <span class="recap-value">{{ formation.categorie }}</span>
                    </div>
                </div>
                {% if formation.description %}
                <div class="recap-description">
                    <p>{{ formation.description|truncatewords:30 }}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- ============================================ -->
<!-- SECTION 4 : FORMULAIRE D'INSCRIPTION         -->
<!-- ============================================ -->
<div class="formulaire-section">
    <div class="container">
        <div class="formulaire-container">
            <h2>FORMULAIRE D'INSCRIPTION</h2>
            <p class="form-subtitle">Veuillez remplir tous les champs obligatoires (*)</p>
            
            <form method="post" class="inscription-form" action="{% url 'inscription_formation' formation.slug %}">
                {% csrf_token %}
                
                <!-- Informations personnelles -->
                <div class="form-part">
                    <h3>Informations personnelles</h3>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="civilite">Civilité *</label>
                            <select id="civilite" name="civilite" required>
                                <option value="">Sélectionnez</option>
                                <option value="M">Monsieur</option>
                                <option value="Mme">Madame</option>
                                <option value="Mlle">Mademoiselle</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="nom_complet">Nom complet *</label>
                            <input type="text" id="nom_complet" name="nom_complet" required placeholder="Votre nom et prénom">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="date_naissance">Date de naissance</label>
                            <input type="date" id="date_naissance" name="date_naissance">
                        </div>
                        
                        <div class="form-group">
                            <label for="lieu_naissance">Lieu de naissance</label>
                            <input type="text" id="lieu_naissance" name="lieu_naissance" placeholder="Ville, Pays">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="nationalite">Nationalité</label>
                            <input type="text" id="nationalite" name="nationalite" value="Ivoirienne" placeholder="Votre nationalité">
                        </div>
                        
                        <div class="form-group">
                            <label for="profession">Profession</label>
                            <input type="text" id="profession" name="profession" placeholder="Votre profession">
                        </div>
                    </div>
                </div>
                
                <!-- Coordonnées -->
                <div class="form-part">
                    <h3>Coordonnées</h3>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="email">Email *</label>
                            <input type="email" id="email" name="email" required placeholder="votre@email.com">
                        </div>
                        
                        <div class="form-group">
                            <label for="telephone">Téléphone *</label>
                            <input type="tel" id="telephone" name="telephone" required placeholder="(225) 01 23 45 67 89">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="adresse">Adresse</label>
                            <input type="text" id="adresse" name="adresse" placeholder="Votre adresse">
                        </div>
                        
                        <div class="form-group">
                            <label for="ville">Ville</label>
                            <input type="text" id="ville" name="ville" placeholder="Votre ville">
                        </div>
                    </div>
                </div>
                
                <!-- Informations professionnelles -->
                <div class="form-part">
                    <h3>Informations professionnelles</h3>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="type_structure">Type de structure</label>
                            <select id="type_structure" name="type_structure">
                                <option value="">Sélectionnez</option>
                                <option value="entreprise">Entreprise</option>
                                <option value="cooperative">Coopérative</option>
                                <option value="ong">ONG</option>
                                <option value="etat">Administration publique</option>
                                <option value="individuel">Individuel</option>
                                <option value="autre">Autre</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="nom_structure">Nom de la structure</label>
                            <input type="text" id="nom_structure" name="nom_structure" placeholder="Nom de votre organisation">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="poste">Poste occupé</label>
                            <input type="text" id="poste" name="poste" placeholder="Votre fonction">
                        </div>
                        
                        <div class="form-group">
                            <label for="secteur_activite">Secteur d'activité</label>
                            <select id="secteur_activite" name="secteur_activite">
                                <option value="">Sélectionnez</option>
                                <option value="agriculture">Agriculture</option>
                                <option value="commerce">Commerce</option>
                                <option value="finance">Finance</option>
                                <option value="formation">Formation</option>
                                <option value="digital">Digital</option>
                                <option value="autre">Autre</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- Session et modalités -->
                <div class="form-part">
                    <h3>Session et modalités</h3>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="session">Session souhaitée *</label>
                            <select id="session" name="session" required>
                                <option value="">Sélectionnez une session</option>
                                <option value="prochaine">Prochaine session (à confirmer)</option>
                                <option value="reportee">Session ultérieure</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="format">Format souhaité</label>
                            <select id="format" name="format">
                                <option value="presentiel">Présentiel</option>
                                <option value="distanciel">Distanciel</option>
                                <option value="indifferent">Indifférent</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="attentes">Attentes / Questions particulières</label>
                        <textarea id="attentes" name="attentes" rows="4" placeholder="Décrivez vos attentes spécifiques pour cette formation..."></textarea>
                    </div>
                </div>
                
                <!-- Pièces jointes -->
                <div class="form-part">
                    <h3>Pièces jointes (optionnel)</h3>
                    
                    <div class="form-group">
                        <label for="cv">CV (PDF, max 2 Mo)</label>
                        <input type="file" id="cv" name="cv" accept=".pdf">
                        <small class="form-help">Taille maximale : 2 Mo</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="lettre_motivation">Lettre de motivation (PDF, max 2 Mo)</label>
                        <input type="file" id="lettre_motivation" name="lettre_motivation" accept=".pdf">
                        <small class="form-help">Taille maximale : 2 Mo</small>
                    </div>
                </div>
                
                <!-- Conditions -->
                <div class="form-part">
                    <div class="form-group checkbox">
                        <input type="checkbox" id="conditions" name="conditions" required>
                        <label for="conditions">J'ai lu et j'accepte les conditions générales d'inscription *</label>
                    </div>
                    
                    <div class="form-group checkbox">
                        <input type="checkbox" id="rgpd" name="rgpd" required>
                        <label for="rgpd">J'accepte que mes données soient traitées pour la gestion de mon inscription *</label>
                    </div>
                    
                    <div class="form-group checkbox">
                        <input type="checkbox" id="newsletter" name="newsletter">
                        <label for="newsletter">Je souhaite recevoir des informations sur les prochaines formations</label>
                    </div>
                </div>
                
                <!-- Bouton de soumission -->
                <div class="form-actions">
                    <button type="submit" class="btn-submit">Soumettre ma demande d'inscription</button>
                    <p class="form-note">* Un email de confirmation vous sera envoyé après validation de votre inscription.</p>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ============================================ -->
<!-- SECTION 5 : INFORMATIONS COMPLÉMENTAIRES      -->
<!-- ============================================ -->
<div class="infos-complementaires">
    <div class="container">
        <div class="infos-grid">
            <div class="info-card">
                <span class="info-icon">⏱️</span>
                <h3>Délai de confirmation</h3>
                <p>Votre inscription sera confirmée sous 48h ouvrées par email.</p>
            </div>
            
            <div class="info-card">
                <span class="info-icon">💰</span>
                <h3>Modalités de paiement</h3>
                <p>Paiement à l'inscription ou avant le début de la formation. Plusieurs options disponibles.</p>
            </div>
            
            <div class="info-card">
                <span class="info-icon">📋</span>
                <h3>Documents requis</h3>
                <p>Pièce d'identité et éventuels justificatifs demandés selon la formation.</p>
            </div>
            
            <div class="info-card">
                <span class="info-icon">❓</span>
                <h3>Questions ?</h3>
                <p>Contactez-nous : formations@glocalimpact.com ou (225) 07 89 78 74 50</p>
            </div>
        </div>
    </div>
</div>

<style>
.page-hero {
    height: 30vh;
    display: flex;
    align-items: center;
    text-align: center;
    color: white;
    background-size: cover;
    background-position: center;
}

.page-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.messages-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

.alert {
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.recap-section {
    padding: 40px 0;
}

.recap-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.recap-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
}

.recap-header h2 {
    margin: 0;
    font-size: 1.3rem;
}

.recap-content {
    padding: 20px;
}

.recap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.recap-item {
    display: flex;
    flex-direction: column;
}

.recap-label {
    font-size: 0.9rem;
    color: #666;
}

.recap-value {
    font-weight: bold;
    color: #333;
}

.recap-description {
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    color: #666;
}

.formulaire-section {
    padding: 40px 0 60px;
    background: #f8f9fa;
}

.formulaire-container {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.formulaire-container h2 {
    text-align: center;
    margin-bottom: 10px;
    color: #333;
}

.form-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

.form-part {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #f0f0f0;
}

.form-part:last-child {
    border-bottom: none;
    margin-bottom: 20px;
    padding-bottom: 0;
}

.form-part h3 {
    color: #667eea;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
}

.form-group input[type="file"] {
    padding: 8px;
    border: 1px dashed #ddd;
    background: #f8f9fa;
}

.form-help {
    display: block;
    font-size: 0.8rem;
    color: #999;
    margin-top: 5px;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.checkbox input {
    width: auto;
    margin-top: 3px;
}

.checkbox label {
    font-weight: normal;
    margin: 0;
}

.form-actions {
    text-align: center;
    margin-top: 30px;
}

.btn-submit {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s;
}

.btn-submit:hover {
    transform: translateY(-2px);
}

.form-note {
    font-size: 0.9rem;
    color: #999;
    margin-top: 15px;
}

.infos-complementaires {
    padding: 60px 0;
}

.infos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.info-card {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
}

.info-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    display: block;
}

.info-card h3 {
    margin-bottom: 10px;
    color: #333;
}

.info-card p {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .recap-grid {
        grid-template-columns: 1fr;
    }
    
    .formulaire-container {
        padding: 20px;
    }
}
</style>
{% endblock %}