<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="https://unpkg.com/htmx.org@1.9.11"></script>
    <meta charset="UTF-8">
    <title>Planning des Entraînements - AS Talange</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
        .gantt-grid {
            display: grid;
            grid-template-columns: 40px 120px repeat(56, minmax(12px, 1fr));
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-900 flex h-screen overflow-hidden">
    <!-- Sidebar -->
    <div th:replace="~{fragments/sidebar :: sidebar}"></div>

    <main class="flex-1 flex flex-col h-screen overflow-hidden">
        <!-- Header -->
        <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6">
            <h2 class="text-lg font-semibold text-gray-800">Planning & Occupation des Terrains</h2>
            <div class="flex items-center space-x-2" th:if="${saisonActive != null}">
                <span class="text-xs bg-green-100 text-green-800 font-semibold px-2.5 py-0.5 rounded-full" th:text="${'Saison Active : ' + saisonActive.nom}">Saison Actuelle</span>
            </div>
        </header>

        <!-- Main section -->
        <div class="flex-1 overflow-auto p-6 bg-gray-50/50">
            <!-- Warnings / Errors -->
            <div th:if="${noActiveSeason}" class="bg-amber-50 border-l-4 border-amber-500 p-4 mb-6 rounded-lg">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-amber-500" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-amber-700 font-medium">
                            Aucune saison active. Veuillez <a href="/saisons" class="font-bold underline hover:text-amber-800">activer une saison</a> dans le paramétrage pour planifier les entraînements.
                        </p>
                    </div>
                </div>
            </div>

            <div th:if="${success}" class="bg-green-50 border-l-4 border-green-500 p-4 mb-6 rounded-lg">
                <p class="text-sm text-green-700 font-medium" th:text="${success}"></p>
            </div>

            <!-- Page actions -->
            <div class="flex justify-between items-center mb-6" th:if="${saisonActive != null}">
                <h3 class="text-xl font-bold text-gray-900">Planning Hebdomadaire</h3>
                <a th:href="@{/planning/new}" class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 shadow transition-colors">
                    + Ajouter un Créneau
                </a>
            </div>

            <!-- Tabs: Days of the week -->
            <div class="mb-6 border-b border-gray-200" th:if="${saisonActive != null}">
                <nav class="-mb-px flex space-x-6">
                    <a th:each="j : ${jours}"
                       th:href="@{/planning(jour=${j.name()})}"
                       th:classappend="${j == selectedDay} ? 'border-blue-600 text-blue-600 font-semibold' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                       class="whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm transition-all"
                       th:text="${j.libelle}">
                        Lundi
                    </a>
                </nav>
            </div>

            <!-- Gantt view -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8 p-6" th:if="${saisonActive != null}">
                <div class="overflow-x-auto">
                    <div class="gantt-grid min-w-[900px] border border-gray-200 rounded-lg bg-white relative">
                        <!-- Top Hour row -->
                        <div class="col-span-2 text-xs font-semibold text-gray-500 bg-gray-50 p-3 border-b flex items-center justify-center border-r">Terrain / Zone</div>
                        <div th:each="hour : ${#numbers.sequence(8, 21)}"
                             style="grid-column: span 4;"
                             class="text-xs font-semibold text-gray-500 bg-gray-50 py-3 border-b border-l text-center"
                             th:text="${#strings.concat(#numbers.formatInteger(hour, 2), ':00')}">
                             08:00
                        </div>

                        <!-- Terrain Vert Block -->
                        <!-- Full width Banner -->
                        <div class="col-span-58 bg-blue-50/50 text-blue-800 font-bold px-4 py-1 text-xs uppercase tracking-wider flex items-center border-b" style="grid-row: 2;">
                            Terrain Vert
                        </div>
                        
                        <!-- Quarters -->
                        <!-- Row 3: Quart 1 -->
                        <div class="bg-gray-50 text-[10px] font-bold text-gray-500 flex items-center justify-center border-b border-r" style="grid-column: 1; grid-row: 3;">V</div>
                        <div class="bg-gray-50 text-xs font-medium text-gray-600 pl-3 py-3 border-b border-r flex items-center" style="grid-column: 2; grid-row: 3;">Quart 1</div>
                        
                        <!-- Row 4: Quart 2 -->
                        <div class="bg-gray-50 text-[10px] font-bold text-gray-500 flex items-center justify-center border-b border-r" style="grid-column: 1; grid-row: 4;">V</div>
                        <div class="bg-gray-50 text-xs font-medium text-gray-600 pl-3 py-3 border-b border-r flex items-center" style="grid-column: 2; grid-row: 4;">Quart 2</div>
                        
                        <!-- Row 5: Quart 3 -->
                        <div class="bg-gray-50 text-[10px] font-bold text-gray-500 flex items-center justify-center border-b border-r" style="grid-column: 1; grid-row: 5;">V</div>
                        <div class="bg-gray-50 text-xs font-medium text-gray-600 pl-3 py-3 border-b border-r flex items-center" style="grid-column: 2; grid-row: 5;">Quart 3</div>
                        
                        <!-- Row 6: Quart 4 -->
                        <div class="bg-gray-50 text-[10px] font-bold text-gray-500 flex items-center justify-center border-b border-r" style="grid-column: 1; grid-row: 6;">V</div>
                        <div class="bg-gray-50 text-xs font-medium text-gray-600 pl-3 py-3 border-b border-r flex items-center" style="grid-column: 2; grid-row: 6;">Quart 4</div>


                        <!-- Terrain Synthétique Block -->
                        <!-- Full width Banner -->
                        <div class="col-span-58 bg-purple-50/50 text-purple-800 font-bold px-4 py-1 text-xs uppercase tracking-wider flex items-center border-b border-t" style="grid-row: 7;">
                            Terrain Synthétique
                        </div>

                        <!-- Quarters -->
                        <!-- Row 8: Quart 1 -->
                        <div class="bg-gray-50 text-[10px] font-bold text-gray-500 flex items-center justify-center border-b border-r" style="grid-column: 1; grid-row: 8;">S</div>
                        <div class="bg-gray-50 text-xs font-medium text-gray-600 pl-3 py-3 border-b border-r flex items-center" style="grid-column: 2; grid-row: 8;">Quart 1</div>
                        
                        <!-- Row 9: Quart 2 -->
                        <div class="bg-gray-50 text-[10px] font-bold text-gray-500 flex items-center justify-center border-b border-r" style="grid-column: 1; grid-row: 9;">S</div>
                        <div class="bg-gray-50 text-xs font-medium text-gray-600 pl-3 py-3 border-b border-r flex items-center" style="grid-column: 2; grid-row: 9;">Quart 2</div>
                        
                        <!-- Row 10: Quart 3 -->
                        <div class="bg-gray-50 text-[10px] font-bold text-gray-500 flex items-center justify-center border-b border-r" style="grid-column: 1; grid-row: 10;">S</div>
                        <div class="bg-gray-50 text-xs font-medium text-gray-600 pl-3 py-3 border-b border-r flex items-center" style="grid-column: 2; grid-row: 10;">Quart 3</div>
                        
                        <!-- Row 11: Quart 4 -->
                        <div class="bg-gray-50 text-[10px] font-bold text-gray-500 flex items-center justify-center border-b border-r" style="grid-column: 1; grid-row: 11;">S</div>
                        <div class="bg-gray-50 text-xs font-medium text-gray-600 pl-3 py-3 border-b border-r flex items-center" style="grid-column: 2; grid-row: 11;">Quart 4</div>

                        <!-- Background vertical lines to build timeline slots -->
                        <!-- Terrain Vert rows (3, 4, 5, 6) -->
                        <div th:each="r : ${#numbers.sequence(3, 6)}" class="border-b border-gray-100 flex h-14" th:style="'grid-column: 3 / 59; grid-row: ' + ${r} + '; pointer-events: none;'">
                            <div th:each="i : ${#numbers.sequence(1, 14)}" class="flex-1 border-l border-gray-100/70 last:border-r"></div>
                        </div>

                        <!-- Terrain Synthétique rows (8, 9, 10, 11) -->
                        <div th:each="r : ${#numbers.sequence(8, 11)}" class="border-b border-gray-100 flex h-14" th:style="'grid-column: 3 / 59; grid-row: ' + ${r} + '; pointer-events: none;'">
                            <div th:each="i : ${#numbers.sequence(1, 14)}" class="flex-1 border-l border-gray-100/70 last:border-r"></div>
                        </div>

                        <!-- Scheduled slots rendered dynamically -->
                        <div th:each="c : ${creneaux}"
                             th:style="'grid-column: ' + ${c.getStartColumn()} + ' / ' + ${c.getEndColumn()} + '; grid-row: ' + ${c.getStartRow(terrainIndices.get(c.terrain.id))} + ' / ' + ${c.getEndRow(terrainIndices.get(c.terrain.id))} + ';'"
                             th:classappend="${c.enConflit} ? 'bg-red-50 border-red-500 text-red-800 hover:bg-red-100' : 'bg-blue-50 border-blue-500 text-blue-800 hover:bg-blue-100'"
                             class="border-l-4 p-2 rounded shadow-sm flex flex-col justify-between overflow-hidden cursor-pointer hover:shadow transition-all relative z-10 m-0.5">
                             
                             <div class="flex justify-between items-start">
                                 <span class="font-bold text-xs" th:text="${c.categorie.nom + (c.equipe != null ? ' (' + c.equipe.nom + ')' : '') + (c.initialesEducateurs != null and !c.initialesEducateurs.isEmpty() ? ' [' + c.initialesEducateurs + ']' : '')}">U15</span>
                                 <!-- Delete button or info -->
                                 <div class="flex items-center space-x-1">
                                     <a th:href="@{/planning/{id}/edit(id=${c.id})}" class="text-[10px] text-gray-500 hover:underline">Modifier</a>
                                 </div>
                             </div>
                             
                             <div class="text-[10px] font-medium mt-1">
                                 <span th:text="${c.heureDebut} + ' - ' + ${c.heureFin}">18:00 - 19:30</span>
                                 <span class="text-gray-400 font-normal"> | </span>
                                 <span th:text="${c.zone.libelle}">Demi-terrain A</span>
                             </div>
                             
                             <!-- Conflict warning -->
                             <div th:if="${c.enConflit}" class="absolute bottom-1 right-1 text-red-500" 
                                  th:title="'Conflit d\'espace/temps avec : ' + ${#strings.listJoin(c.categoriesEnConflit, ', ')}">
                                 <svg class="w-4 h-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"></path></svg>
                             </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- List view below Gantt -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden" th:if="${saisonActive != null}">
                <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
                    <h3 class="text-lg font-semibold text-gray-900" th:text="${'Liste des entraînements - ' + selectedDay.libelle}">Liste des entraînements - Lundi</h3>
                </div>
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-gray-50/50 text-gray-500 text-xs uppercase tracking-wider border-b border-gray-100">
                            <th class="py-3 px-6 font-medium">Catégorie</th>
                            <th class="py-3 px-6 font-medium">Terrain</th>
                            <th class="py-3 px-6 font-medium">Zone</th>
                            <th class="py-3 px-6 font-medium">Horaires</th>
                            <th class="py-3 px-6 font-medium text-center">Statut</th>
                            <th class="py-3 px-6 font-medium text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 text-sm">
                        <tr th:if="${#lists.isEmpty(creneaux)}">
                            <td colspan="6" class="py-8 text-center text-gray-500">Aucun entraînement planifié pour ce jour.</td>
                        </tr>
                        <tr th:each="c : ${creneaux}" class="hover:bg-gray-50 transition-colors">
                            <td class="py-4 px-6 text-gray-900">
                                <span class="font-semibold" th:text="${c.categorie.nom + (c.equipe != null ? ' (' + c.equipe.nom + ')' : '')}">U11</span>
                                <span th:if="${c.initialesEducateurs != null and !c.initialesEducateurs.isEmpty()}" 
                                      th:text="${c.initialesEducateurs}" 
                                      class="ml-2 px-2.5 py-1 bg-blue-100 text-blue-800 rounded text-xs font-semibold"
                                      th:title="'Éducateurs : ' + ${c.initialesEducateurs}">JD</span>
                            </td>
                            <td class="py-4 px-6 text-gray-600" th:text="${c.terrain.nom}">Terrain Synthétique</td>
                            <td class="py-4 px-6 text-gray-600">
                                <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs" th:text="${c.zone.libelle}">Demi A</span>
                            </td>
                            <td class="py-4 px-6 text-gray-600 font-medium" th:text="${c.heureDebut + ' - ' + c.heureFin}">14:00 - 15:30</td>
                            <td class="py-4 px-6 text-center">
                                <span th:if="${c.enConflit}" 
                                      class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"
                                      th:title="'Conflit avec : ' + ${#strings.listJoin(c.categoriesEnConflit, ', ')}">
                                    Conflit
                                </span>
                                <span th:unless="${c.enConflit}" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    Disponible
                                </span>
                            </td>
                            <td class="py-4 px-6 text-right flex justify-end space-x-3 items-center">
                                <a th:href="@{/planning/{id}/edit(id=${c.id})}" class="text-indigo-600 hover:text-indigo-900 font-medium bg-indigo-50 px-3 py-1 rounded-lg">Modifier</a>
                                <form th:action="@{/planning/{id}/delete(id=${c.id})}" method="post" onsubmit="return confirm('Supprimer ce créneau d\'entraînement ?');">
                                    <button type="submit" class="text-red-600 hover:text-red-800 font-medium">Supprimer</button>
                                </form>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </main>
</body>
</html>
