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

{% block title %}Détail du Stage - {{ stage.name }}{% endblock %}

{% block body %}
    <div id="stageContainer" data-stage-id="{{ stage.id }}">
        <div class="flex items-center justify-between mt-4">
            <h1 class="h1">Gestion du Stage : {{ stage.name }}</h1>
            <a href="{{ path('admin_stage_index') }}" class="btn-primary">Retour</a>
        </div>

        <div class="grid grid-cols-3-1 gap-3 mt-4">
            <!-- Bloc Principal -->
            <div class="flex flex-col gap-2">
                <div class="card">
                    <div class="card-header">
                        <h4 class="h4">Informations Générales</h4>
                    </div>
                    <div class="card-body">
                        {{ form_start(form) }}
                        {{ include('admin/stage/_form.html.twig') }}
                        {{ form_end(form) }}
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h2 class="h4">Jours et Semaines du Stage</h2>
                    </div>
                    <div class="card-body">
                        <!-- Tableau des semaines -->
                        <h3 class="text-lg font-semibold mb-2">Semaines disponibles</h3>
                        <table class="w-full border mb-4">
                            <thead>
                            <tr class="bg-gray-100">
                                <th class="p-2 text-left">Nom</th>
                                <th class="p-2 text-left">Prix</th>
                                <th class="p-2 text-left">Places max</th>
                                <th class="p-2 text-left">Exclu ?</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for week in stage.stageDays|filter(day => day.isWeekSelection)|sort((a, b) => a.weekNumber <=> b.weekNumber) %}
                                <tr class="border-b">
                                    <td class="p-2">{{ week.name }}</td>
                                    <td class="p-2">
                                        <input type="number" class="form-control price-input" data-id="{{ week.id }}" value="{{ week.price }}" min="0">
                                    </td>
                                    <td class="p-2">
                                        <input type="number" class="form-control max-participants-input" data-id="{{ week.id }}" value="{{ week.maxParticipants }}" min="1">
                                    </td>
                                    <td class="p-2 text-center">
                                        <input type="checkbox" class="exclude-day-checkbox" data-id="{{ week.id }}" {{ week.isExcluded ? 'checked' : '' }}>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>

                        <!-- Tableau des jours -->
                        <h3 class="text-lg font-semibold mb-2">Jours individuels</h3>
                        <table class="w-full border">
                            <thead>
                            <tr class="bg-gray-100">
                                <th class="p-2 text-left">Nom</th>
                                <th class="p-2 text-left">Prix</th>
                                <th class="p-2 text-left">Places max</th>
                                <th class="p-2 text-left">Exclu ?</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for day in stage.stageDays|filter(day => not day.isWeekSelection)|sort((a, b) => a.date <=> b.date) %}
                                <tr class="border-b">
                                    <td class="p-2">{{ day.name }}</td>
                                    <td class="p-2">
                                        <input type="number" class="form-control price-input" data-id="{{ day.id }}" value="{{ day.price }}" min="0">
                                    </td>
                                    <td class="p-2">
                                        <input type="number" class="form-control max-participants-input" data-id="{{ day.id }}" value="{{ day.maxParticipants }}" min="1">
                                    </td>
                                    <td class="p-2 text-center">
                                        <input type="checkbox" class="exclude-day-checkbox" data-id="{{ day.id }}" {{ day.isExcluded ? 'checked' : '' }}>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>

                        <div class="mt-4 text-right">
                            <button id="saveAllDays" class="btn-success">Enregistrer les modifications</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bloc Annexe -->
            <div class="flex flex-col gap-2">
                <div class="card">
                    <div class="card-header">
                        <h2 class="h4">Activation du Stage</h2>
                    </div>
                    <div class="card-body">
                        <p class="text-gray-500">
                            {% if stage.active %}
                                Ce stage est actuellement <strong class="text-green-500">en ligne</strong>.
                            {% else %}
                                Ce stage est actuellement <strong class="text-red-500">hors ligne</strong>.
                            {% endif %}
                        </p>
                        <button id="toggleStageOnline" class="btn-primary mt-2">
                            {{ stage.active ? 'Désactiver le stage' : 'Mettre en ligne' }}
                        </button>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h2 class="h4">Exporter les inscriptions</h2>
                    </div>
                    <div class="card-body">
                        <p class="text-gray-500 mb-2">Génère un tableau Excel des participants avec leurs présences et infos.</p>
                        <a href="{{ path('admin_stage_export', { id: stage.id }) }}" class="btn-secondary w-full">
                            Télécharger le fichier Excel
                        </a>
                    </div>
                </div>


                <div class="card">
                    <div class="card-header">
                        <h2 class="h4">Responsable du Stage</h2>
                    </div>
                    <div class="card-body">
                        {% if stage.manager %}
                            <p class="mb-2"><span class="text-gray-500">Actuellement :</span>
                                <strong>{{ stage.manager.fullName }} ({{ stage.manager.email }})</strong>
                            </p>
                        {% else %}
                            <p class="text-gray-500">Aucun responsable assigné</p>
                        {% endif %}

                        <button id="editResponsableBtn" class="btn-primary mt-2">Modifier</button>

                        <div id="editResponsableForm" class="hidden form-group mt-2">
                            <input type="text" id="responsableSearch" class="form-control" placeholder="Rechercher un responsable...">
                            <ul id="responsableResults" class="border border-gray-300 rounded mt-2 hidden"></ul>
                            <button id="saveResponsableBtn" class="btn-success mt-2 hidden">Enregistrer</button>
                        </div>
                    </div>
                </div>

                {% if stage.mimeCover in ["image/jpeg", "image/png"] %}
                    <div class="card">
                        <div class="card-header">
                            <h2 class="h4">Couverture</h2>
                        </div>
                        <div class="card-body flex justify-center">
                            <img src="{{ vich_uploader_asset(stage, 'coverFile')|imagine_filter('miniature_picture_profil') }}"
                                 alt="{{ stage.name }}" class="max-w-full rounded-lg shadow-md">
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}