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

{% block body %}
    <div class="flex items-center justify-between mt-4">
        <div class="flex items-center gap-3">
            <h1 class="h1">Éducateur {{ educator.user.fullName }}</h1>
        </div>
        <a href="{{ path('admin_educators_index') }}" class="btn-primary">Retour</a>
    </div>

    <div class="grid grid-cols-4 gap-3 mt-2">
        <div class="col-span-3 flex flex-col gap-2">
        <div class="card">
            <div class="card-header flex items-center justify-between">
                <h2 class="h4 m-0">Informations générales</h2>
                <div class="flex gap-2">
                    <form method="post" action="{{ path('admin_educators_toggle_status', {id: educator.id}) }}" class="inline">
                        <button type="submit" class="btn {{ educator.isIsValidated() ? 'btn-warning' : 'btn-success' }} btn-small">
                            {{ educator.isIsValidated() ? 'Marquer en attente' : 'Valider' }}
                        </button>
                    </form>
                    <confirm-delete data-action="{{ path('admin_educators_delete', { id : educator.id }) }}"></confirm-delete>
                </div>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-2">
                    <p class="mb-2">
                        <span class="text-gray-500">Nom :</span><br/>
                        <span class="text-xl">{{ educator.user.lastname|upper }}</span>
                    </p>
                    <p class="mb-2">
                        <span class="text-gray-500">Prénom :</span><br/>
                        <span class="text-xl">{{ educator.user.firstname|capitalize }}</span>
                    </p>
                    <p class="mb-2">
                        <span class="text-gray-500">Email :</span><br/>
                        <span class="text-xl">{{ educator.user.email }}</span>
                    </p>
                    <p class="mb-2">
                        <span class="text-gray-500">Téléphone :</span><br/>
                        <span class="text-xl">{{ educator.parentPhone ?? 'Non renseigné' }}</span>
                    </p>
                    <p class="mb-2">
                        <span class="text-gray-500">Date de naissance :</span><br/>
                        <span class="text-xl">{{ educator.dateOfBirth ? educator.dateOfBirth|date('d/m/Y') : 'Non renseignée' }}</span>
                    </p>
                    <p class="mb-2">
                        <span class="text-gray-500">Type d'éducateur :</span><br/>
                        {% set typeLabels = {
                            'Educateur': 'Éducateur majeur',
                            'Educateur Mineur': 'Éducateur mineur',
                            'Dirigeant': 'Dirigeant',
                            'Enfant': 'Enfant de bénévole'
                        } %}
                        {% set typeColors = {
                            'Educateur': 'badge-primary',
                            'Educateur Mineur': 'badge-info',
                            'Dirigeant': 'badge-success',
                            'Enfant': 'badge-warning'
                        } %}
                        <span class="badge {{ typeColors[educator.type] ?? 'badge-secondary' }}">{{ typeLabels[educator.type] ?? educator.type }}</span>
                    </p>
                    <p class="mb-2">
                        <span class="text-gray-500">Statut :</span><br/>
                        {% if educator.isIsValidated() %}
                            <span class="badge badge-success">Validé</span>
                            {% if educator.validatedAt %}
                                <br><small class="text-gray-500">le {{ educator.validatedAt|date('d/m/Y H:i') }}</small>
                            {% endif %}
                            {% if educator.validatedBy %}
                                <br><small class="text-gray-500">par {{ educator.validatedBy.fullName }}</small>
                            {% endif %}
                        {% else %}
                            <span class="badge badge-warning">En attente</span>
                        {% endif %}
                    </p>
                    <p class="mb-2">
                        <span class="text-gray-500">Inscription :</span><br/>
                        <span class="text-xl">{{ educator.faitLe|date('d/m/Y H:i') }}</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h2 class="h4">Documents</h2>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-1">
                    <div class="mb-4">
                        <span class="text-gray-500">Photo d'identité :</span><br/>
                        {% if educator.photoIdendite %}
                            <div class="mt-2">
                                <img src="{{ path('admin_educators_document', {id: educator.id, type: 'photo'}) }}" 
                                     alt="Photo d'identité" 
                                     class="w-32 h-32 object-cover rounded cursor-pointer document-preview"
                                     data-document-type="photo">
                            </div>
                        {% else %}
                            <span class="text-gray-500">Non fournie</span>
                        {% endif %}
                    </div>
                    <div class="mb-4">
                        <span class="text-gray-500">Carte d'identité :</span><br/>
                        {% if educator.carteIdentite %}
                            <div class="mt-2">
                                <img src="{{ path('admin_educators_document', {id: educator.id, type: 'carte'}) }}" 
                                     alt="Carte d'identité" 
                                     class="w-32 h-32 object-cover rounded cursor-pointer document-preview"
                                     data-document-type="carte">
                            </div>
                        {% else %}
                            <span class="text-gray-500">Non fournie</span>
                        {% endif %}
                    </div>
                    <div class="mb-4">
                        <span class="text-gray-500">Casier judiciaire :</span><br/>
                        {% if educator.casierJudiciaire %}
                            <div class="mt-2">
                                <img src="{{ path('admin_educators_document', {id: educator.id, type: 'casier'}) }}" 
                                     alt="Casier judiciaire" 
                                     class="w-32 h-32 object-cover rounded cursor-pointer document-preview"
                                     data-document-type="casier">
                            </div>
                        {% else %}
                            <span class="text-gray-500">Non fourni</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h2 class="h4">Équipements</h2>
            </div>
            <div class="card-body">
                {% if previousSeasonData %}
                    <div class="mb-4 p-3 bg-gray-50 rounded">
                        <h3 class="h5 text-gray-700 mb-2">Saison précédente ({{ previousSeasonData.season.fromYear }}-{{ previousSeasonData.season.toYear }}) - Informations</h3>
                        <div class="grid grid-cols-2 gap-2 text-sm">
                            <div class="flex items-center gap-2">
                                <span class="text-gray-500">Pack commandé :</span>
                                <span class="badge {{ previousSeasonData.packCommande ? 'badge-success' : 'badge-secondary' }}">
                                    {{ previousSeasonData.packCommande ? 'Oui' : 'Non' }}
                                </span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-gray-500">Parka commandée :</span>
                                <span class="badge {{ previousSeasonData.parkaCommande ? 'badge-success' : 'badge-secondary' }}">
                                    {{ previousSeasonData.parkaCommande ? 'Oui' : 'Non' }}
                                </span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-gray-500">Coupe-vent commandé :</span>
                                <span class="badge {{ previousSeasonData.coupeVentCommande ? 'badge-success' : 'badge-secondary' }}">
                                    {{ previousSeasonData.coupeVentCommande ? 'Oui' : 'Non' }}
                                </span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-gray-500">Sac donné :</span>
                                <span class="badge {{ previousSeasonData.sacDonne ? 'badge-success' : 'badge-secondary' }}">
                                    {{ previousSeasonData.sacDonne ? 'Oui' : 'Non' }}
                                </span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-gray-500">Sifflet donné :</span>
                                <span class="badge {{ previousSeasonData.siffletDonne ? 'badge-success' : 'badge-secondary' }}">
                                    {{ previousSeasonData.siffletDonne ? 'Oui' : 'Non' }}
                                </span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-gray-500">Chrono donné :</span>
                                <span class="badge {{ previousSeasonData.chronoDonnee ? 'badge-success' : 'badge-secondary' }}">
                                    {{ previousSeasonData.chronoDonnee ? 'Oui' : 'Non' }}
                                </span>
                            </div>
                        </div>
                    </div>
                {% endif %}
                <div class="grid grid-cols-2 gap-2">
                    <div class="flex items-center justify-between p-2 border rounded">
                        <span class="text-gray-700">Pack commandé</span>
                        <form method="post" action="{{ path('admin_educators_toggle_equipment', {id: educator.id, type: 'pack'}) }}" class="inline">
                            <button type="submit" class="btn {{ educator.packCommande ? 'btn-success' : 'btn-secondary' }} btn-small">
                                {{ educator.packCommande ? '✓' : '✗' }}
                            </button>
                        </form>
                    </div>
                    <div class="flex items-center justify-between p-2 border rounded">
                        <span class="text-gray-700">Parka commandée</span>
                        <form method="post" action="{{ path('admin_educators_toggle_equipment', {id: educator.id, type: 'parka'}) }}" class="inline">
                            <button type="submit" class="btn {{ educator.parkaCommande ? 'btn-success' : 'btn-secondary' }} btn-small">
                                {{ educator.parkaCommande ? '✓' : '✗' }}
                            </button>
                        </form>
                    </div>
                    <div class="flex items-center justify-between p-2 border rounded">
                        <span class="text-gray-700">Coupe-vent commandé</span>
                        <form method="post" action="{{ path('admin_educators_toggle_equipment', {id: educator.id, type: 'coupevent'}) }}" class="inline">
                            <button type="submit" class="btn {{ educator.coupeVentCommande ? 'btn-success' : 'btn-secondary' }} btn-small">
                                {{ educator.coupeVentCommande ? '✓' : '✗' }}
                            </button>
                        </form>
                    </div>
                    <div class="flex items-center justify-between p-2 border rounded">
                        <span class="text-gray-700">Sac donné</span>
                        <form method="post" action="{{ path('admin_educators_toggle_equipment', {id: educator.id, type: 'sac'}) }}" class="inline">
                            <button type="submit" class="btn {{ educator.sacDonne ? 'btn-success' : 'btn-secondary' }} btn-small">
                                {{ educator.sacDonne ? '✓' : '✗' }}
                            </button>
                        </form>
                    </div>
                    <div class="flex items-center justify-between p-2 border rounded">
                        <span class="text-gray-700">Sifflet donné</span>
                        <form method="post" action="{{ path('admin_educators_toggle_equipment', {id: educator.id, type: 'sifflet'}) }}" class="inline">
                            <button type="submit" class="btn {{ educator.siffletDonne ? 'btn-success' : 'btn-secondary' }} btn-small">
                                {{ educator.siffletDonne ? '✓' : '✗' }}
                            </button>
                        </form>
                    </div>
                    <div class="flex items-center justify-between p-2 border rounded">
                        <span class="text-gray-700">Chrono donné</span>
                        <form method="post" action="{{ path('admin_educators_toggle_equipment', {id: educator.id, type: 'chrono'}) }}" class="inline">
                            <button type="submit" class="btn {{ educator.chronoDonnee ? 'btn-success' : 'btn-secondary' }} btn-small">
                                {{ educator.chronoDonnee ? '✓' : '✗' }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div class="col-span-1 flex flex-col gap-2">
            <div class="card">
                <div class="card-header">
                    <h2 class="h4">Actions</h2>
                </div>
                <div class="card-body">
                    <button class="btn-primary send-mail mb-1 text-sm sm:text-base">Envoyer un email</button>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h2 class="h4">Informations spécifiques</h2>
                </div>
                <div class="card-body">
                    <div class="flex flex-col gap-2">
                        <p class="mb-2">
                            <span class="text-gray-500">Catégories :</span><br/>
                            <span class="text-sm">{{ educator.categories }}</span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500">Règlement accepté :</span><br/>
                            {% if educator.reglement %}
                                <span class="badge badge-success">Oui</span>
                            {% else %}
                                <span class="badge badge-danger">Non</span>
                            {% endif %}
                        </p>
                        {% if educator.isIsMinor() %}
                            <p class="mb-2">
                                <span class="text-gray-500">Nom du parent :</span><br/>
                                <span class="text-sm">{{ educator.nameParent ?? 'Non renseigné' }}</span>
                            </p>
                            <p class="mb-2">
                                <span class="text-gray-500">Fonction du parent :</span><br/>
                                <span class="text-sm">{{ educator.fonctionParent ?? 'Non renseignée' }}</span>
                            </p>
                        {% endif %}
                        {% if educator.isIsParentTutor() %}
                            <p class="mb-2">
                                <span class="text-gray-500">Bénévolat accepté :</span><br/>
                                {% if educator.benevolatAccepted %}
                                    <span class="badge badge-success">Oui</span>
                                {% else %}
                                    <span class="badge badge-danger">Non</span>
                                {% endif %}
                            </p>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h2 class="h4">Tailles</h2>
                </div>
                <div class="card-body">
                    <div class="flex flex-col gap-2">
                        <p class="mb-2">
                            <span class="text-gray-500">Maillot :</span><br/>
                            <span class="text-sm">{{ educator.tailleMaillot }}</span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500">Veste :</span><br/>
                            <span class="text-sm">{{ educator.tailleVeste }}</span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500">Short :</span><br/>
                            <span class="text-sm">{{ educator.tailleShort }}</span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500">Jogging :</span><br/>
                            <span class="text-sm">{{ educator.tailleJogging }}</span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500">Coupe-vent :</span><br/>
                            <span class="text-sm">{{ educator.tailleCoupeVent }}</span>
                        </p>
                        <p class="mb-2">
                            <span class="text-gray-500">Parka :</span><br/>
                            <span class="text-sm">{{ educator.tailleParka }}</span>
                        </p>
                    </div>
                </div>
            </div>
    <div id="document-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="document-content"></div>
        </div>
    </div>
    <modal-box title="Envoyer un mail" trigger=".send-mail">
        {{ include('admin/order/_common/_email.html.twig') }}
    </modal-box>
{% endblock %}

{% block javascripts_end %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('document-modal');
    const modalContent = document.getElementById('document-content');
    const closeBtn = document.querySelector('.close');
    const documentPreviews = document.querySelectorAll('.document-preview');
    documentPreviews.forEach(preview => {
        preview.addEventListener('click', function() {
            const src = this.src;
            const type = this.getAttribute('data-document-type');
            if (src.includes('.pdf')) {
                modalContent.innerHTML = `<iframe src="${src}" width="100%" height="600px"></iframe>`;
            } else {
                modalContent.innerHTML = `<img src="${src}" style="max-width: 100%; max-height: 80vh; object-fit: contain;">`;
            }
            modal.style.display = 'block';
        });
    });
    closeBtn.addEventListener('click', function() {
        modal.style.display = 'none';
    });
    window.addEventListener('click', function(event) {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape' && modal.style.display === 'block') {
            modal.style.display = 'none';
        }
    });
});
</script>
{% endblock %}