{% extends "/layout/master.html.twig" %}

{% block title %}Rotation des cartes{% endblock %}

{% block body %}
<div class="container-fluid">
    <!-- Titre principal -->
    <div class="row m-1">
        <div class="col-12">
            <h4 class="main-title"><i class="ph-duotone  ph-globe-hemisphere-east"></i> - ROTATION DES CARTES</h4>
            <span class="badge text-bg-light">Tiens le coup, ta map arrive ! <i class="fa-solid fa-fire fa-fw"></i></span><br><br>
        </div>
    </div>

    <!-- Interface de type "Form Wizard" -->
    <div class="card b-b-4-primary">
        <div class="card-body">
            <div class="form-wizard">
                <div class="row">
                    <!-- Navigation par onglets pour les modes de jeu -->
                    <div class="col-xl-3 mb-3">
                        <div class="nav navstpes flex-column" id="MapModes" role="tablist">
                            {% for mode, _ in mapData %}
                                <button class="nav-link {% if loop.first %}active{% endif %}" 
                                        id="tab-{{ mode }}" 
                                        data-bs-toggle="tab" 
                                        data-bs-target="#tab-pane-{{ mode }}" 
                                        type="button" 
                                        role="tab" 
                                        aria-controls="tab-pane-{{ mode }}" 
                                        aria-selected="{{ loop.first ? 'true' : 'false' }}">
                                    <i class="ti ti-map-pin pe-2"></i>
                                    <span class="ms-3">{{ mode | capitalize }}</span>
                                </button>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Contenu des onglets pour chaque mode -->
                    <div class="col-xl-9">
                        <div class="tab-content" id="MapModesContent">

                            <span class="badge text-bg-primary">N'hésites pas à découvrir les autres outils <i class="ph-fill  ph-dog"></i></span><br><br>


                            {% for mode, rotation in mapData %}
                                <div class="tab-pane fade {% if loop.first %}show active{% endif %}" 

                                    

                                     id="tab-pane-{{ mode }}" 
                                     role="tabpanel" 
                                     aria-labelledby="tab-{{ mode }}">

                                    {% set rotationData = rotation.rotation is defined ? rotation.rotation : rotation %}

                                    <div class="row">
                                        <!-- Carte actuelle -->
                                        <div class="col-sm-6">
                                            <div class="card blog-card overflow-hidden mb-4 b-b-4-primary">
                                                {% if rotationData.current is defined %}
                                                    <img src="{{ rotationData.current.asset }}" rel="preload"  height="150px" class="img-fluid" alt="{{ rotationData.current.map }}">
                                                    <div class="tag-container">
                                                        <span class="badge text-light-primary">Carte actuelle</span>
                                                    </div>
                                                    <div class="card-body">
                                                        <h5 class="title-text mb-2 text-primary">{{ rotationData.current.map }}</h5>
                                                        <p class="text-body-secondary"><i class="ti ti-calendar-due"></i> Début : {{ rotationData.current.readableDate_start|date_modify("+2 hour")|date("d/m/Y H:i") }}</p>
                                                        <p class="text-body-secondary"><i class="ti ti-calendar-due"></i> Fin : {{ rotationData.current.readableDate_end|date_modify("+2 hour")|date("d/m/Y H:i") }}</p>
                                                        
                                                        {% set totalMinutes = rotationData.current.DurationInMinutes %}
                                                        {% set durationDays = totalMinutes // 1440 %}
                                                        {% set durationHours = (totalMinutes % 1440) // 60 %}
                                                        {% set durationMinutes = totalMinutes % 60 %}

                                                        <p class="card-text text-secondary">Durée : 
                                                            {% if durationDays > 0 %}{{ durationDays }}j {% endif %}
                                                            {% if durationHours > 0 or durationDays > 0 %}{{ durationHours }}h {% endif %}
                                                            {{ durationMinutes }}m
                                                        </p>

                                                        <!-- Barre de progression dynamique -->
                                                        {% set totalDuration = rotationData.current.DurationInSecs %}
                                                        {% set elapsedTime = totalDuration - rotationData.current.remainingSecs %}
                                                        {% set initialProgressPercent = (elapsedTime / totalDuration) * 100 %}

                                                        <div class="progress-box bg-light-primary w-100">
                                                            <div class="progress-content">
                                                                <div class="d-flex justify-content-between align-items-center">
                                                                    <div class="left d-flex align-items-center">
                                                                        <i class="ti ti-clock me-1 ms-1"></i> Restant
                                                                    </div>
                                                                    <div class="right">
                                                                        <span id="time-left-{{ mode }}" class="badge text-bg-primary">{{ rotationData.current.remainingTimer }}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="progress w-100 h-5" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                                                <div id="progress-bar-{{ mode }}" class="progress-bar bg-primary h-5" style="width: {{ initialProgressPercent|round(0, 'floor') }}%"></div>
                                                            </div>
                                                        </div>

                                                        <!-- Bouton d'actualisation -->
                                                        <button id="refresh-button-{{ mode }}" class="btn btn-primary mt-2" style="display: none;" onclick="window.location.reload();">
                                                            Actualiser la page
                                                        </button>

                                                        <!-- Données pour JavaScript -->
                                                        <input type="hidden" id="total-duration-{{ mode }}" value="{{ totalDuration }}">
                                                        <input type="hidden" id="elapsed-time-{{ mode }}" value="{{ elapsedTime }}">
                                                        <input type="hidden" id="remaining-seconds-{{ mode }}" value="{{ rotationData.current.remainingSecs }}">
                                                    </div>
                                                {% else %}
                                                    <div class="card-body">
                                                        <p class="text-warning">Aucune carte actuelle disponible pour ce mode.</p>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>

                                        <!-- Carte suivante -->
                                        <div class="col-sm-6">
                                            <div class="card blog-card overflow-hidden mb-4 b-b-4-primary">
                                                {% if rotationData.next is defined %}
                                                    <img src="{{ rotationData.next.asset }}" rel="preload" class="img-fluid" alt="{{ rotationData.next.map }}">
                                                    <div class="tag-container">
                                                        <span class="badge text-light-secondary">Carte suivante</span>
                                                    </div>
                                                    <div class="card-body">
                                                        <h5 class="title-text mb-2 text-secondary">{{ rotationData.next.map }}</h5>
                                                        <p class="text-body-secondary"><i class="ti ti-calendar-due"></i> Début : {{ rotationData.next.readableDate_start|date_modify("+2 hour")|date("d/m/Y H:i") }}</p>
                                                        <p class="text-body-secondary"><i class="ti ti-calendar-due"></i> Fin : {{ rotationData.next.readableDate_end|date_modify("+2 hour")|date("d/m/Y H:i") }}</p>
                                                        
                                                        {% set totalMinutes = rotationData.next.DurationInMinutes %}
                                                        {% set durationDays = totalMinutes // 1440 %}
                                                        {% set remainingMinutesAfterDays = totalMinutes % 1440 %}
                                                        {% set durationHours = remainingMinutesAfterDays // 60 %}
                                                        {% set durationMinutes = remainingMinutesAfterDays % 60 %}

                                                        <p class="card-text text-secondary">
                                                            Durée : 
                                                            {% if durationDays > 0 %}
                                                                {{ durationDays }}j 
                                                            {% endif %}
                                                            {% if durationHours > 0 or durationDays > 0 %}
                                                                {{ durationHours }}h 
                                                            {% endif %}
                                                            {{ durationMinutes }}m
                                                        </p>
                                                    </div>
                                                {% else %}
                                                    <div class="card-body">
                                                        <p class="text-warning">Aucune carte suivante disponible pour ce mode.</p>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}


{% block scripts %}
<!-- Ajoutez ici vos scripts JavaScript personnalisés si nécessaire -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Fonction pour démarrer la barre de progression dynamique pour chaque mode
        function startProgressUpdate(mode) {
            const progressBar = document.getElementById(`progress-bar-${mode}`);
            const timeRemainingBadge = document.getElementById(`time-left-${mode}`);
            const refreshButton = document.getElementById(`refresh-button-${mode}`);
            
            const totalDuration = parseInt(document.getElementById(`total-duration-${mode}`).value);
            let elapsedTime = parseInt(document.getElementById(`elapsed-time-${mode}`).value);
            let remainingSeconds = parseInt(document.getElementById(`remaining-seconds-${mode}`).value);

            function updateProgress() {
                const progressPercent = (elapsedTime / totalDuration) * 100;

                // Mise à jour de la barre de progression
                progressBar.style.width = `${progressPercent.toFixed(0)}%`;
                
                // Calcul du temps restant en jours, heures, minutes et secondes
                const days = Math.floor(remainingSeconds / 86400);
                const hours = Math.floor((remainingSeconds % 86400) / 3600);
                const minutes = Math.floor((remainingSeconds % 3600) / 60);
                const seconds = remainingSeconds % 60;

                // Construction dynamique de la chaîne de temps restant
                let timeText = '';
                if (days > 0) {
                    timeText += `${days}j `;
                }
                if (hours > 0 || days > 0) {
                    timeText += `${hours}h `;
                }
                timeText += `${minutes}m ${seconds}s restant`;

                // Mise à jour de l'affichage du temps restant
                timeRemainingBadge.textContent = timeText;

                elapsedTime += 1;
                remainingSeconds -= 1;

                // Arrêter et afficher le bouton d'actualisation si le temps est écoulé
                if (remainingSeconds <= 0) {
                    clearInterval(interval);
                    refreshButton.style.display = 'block';
                }
            }

            // Lancer la mise à jour toutes les secondes
            const interval = setInterval(updateProgress, 1000);
        }



        // Démarrer la mise à jour dynamique pour chaque mode
        {% for mode, _ in mapData %}
            startProgressUpdate("{{ mode }}");
        {% endfor %}
    });

</script>
{% endblock %}