@extends('layouts.base')
@section('title','Liste des sessions')

@section('style')
<link href="{{ asset('assets/css/evalidation/session.css') }}" rel="stylesheet" type="text/css">
<style>
    .status-badge{font-size:.75rem;padding:.25rem .5rem;border-radius:.25rem;font-weight:500}
    .status-preparation{background:#e2e3e5;color:#383d41}
    .status-pending{background:#fff3cd;color:#856404}
    .status-validated{background:#d4edda;color:#155724}
    .status-rejected{background:#f8d7da;color:#721c24}
    .status-ventilated{background:#d1ecf1;color:#0c5460}

    .session-card{transition:all .2s ease;border:1px solid #dee2e6;cursor:pointer}
    .session-card:hover{box-shadow:0 4px 8px rgba(0,0,0,.1);transform:translateY(-2px)}
    .session-card:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,.1)}

    .ball-preview{display:flex;gap:.25rem;flex-wrap:wrap}
    .ball-mini{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#28a745,#20c997);color:#fff;
               font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}
    .ball-mini.empty{background:#e9ecef;color:#6c757d;border:1px dashed #adb5bd}

    .filter-card{background:#f8f9fa;border:1px solid #dee2e6}

    /* pagination */
    .pagination .page-link{min-width:38px;text-align:center}
</style>
@endsection

@section('content')
<div class="container-fluid px-2 px-md-3" id="sessionsPage" data-endpoints='{
    "index": "/evalidation/api/sessions",
    "show": "/evalidation/sessions/",
    "delete": "/evalidation/sessions/{id}/delete"
}'>
    <!-- En-tête -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1 fw-bold text-dark">Sessions de tirage</h1>
                    <p class="text-muted mb-0">Gestion des sessions de tirage et validation</p>
                </div>
                <div>
                    <a href="{{ route('evalidation.session.create') }}" class="btn btn-success">
                        <i class="ph-light ph-plus me-2"></i>Nouvelle session
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtres -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card filter-card">
                <div class="card-body">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-4">
                            <label for="periodFilter" class="form-label">Période</label>

                            <!-- Mode sélection de mois -->
                            <div id="monthSelection" class="period-mode">
                                <div class="input-group">
                                    <button type="button" id="periodToggleMonth" class="btn btn-outline-secondary"
                                            title="Passer en mode plage de dates" aria-label="Basculer vers la plage de dates">
                                        <i class="ph-light ph-arrows-clockwise"></i>
                                    </button>
                                    <select id="monthFilter" class="form-select">
                                        <option value="current_month">Mois en cours</option>
                                        <option value="last_month">Mois dernier</option>
                                        <option value="last_3_months">3 derniers mois</option>
                                        <option value="last_6_months">6 derniers mois</option>
                                        <option value="current_year">Année en cours</option>
                                        <!-- <option value="all">Toutes les périodes</option> -->
                                    </select>
                                </div>
                            </div>

                            <!-- Mode plage de dates -->
                            <div id="dateRangeSelection" class="period-mode" style="display:none;">
                                <div class="input-group mb-2">
                                    <button type="button" id="periodToggleDate" class="btn btn-outline-secondary"
                                            title="Passer en mode sélection de mois" aria-label="Basculer vers le choix de mois">
                                        <i class="ph-light ph-calendar"></i>
                                    </button>
                                    <input type="date" id="startDate" class="form-control" placeholder="Début" aria-label="Date de début">
                                </div>
                                <input type="date" id="endDate" class="form-control" placeholder="Fin" aria-label="Date de fin">
                            </div>
                        </div>

                        <div class="col-md-4">
                            <label for="gameFilter" class="form-label">Type de jeu</label>
                            <select id="gameFilter" class="form-select">
                                <option value="">Tous les types</option>
                                @foreach($gameTypes as $gameType)
                                    <option value="{{ $gameType->name }}">{{ $gameType->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="statusFilter" class="form-label">Statut</label>
                            <select id="statusFilter" class="form-select">
                                <option value="">Tous les statuts</option>
                                <option value="preparation">En préparation</option>
                                <option value="pending">En attente</option>
                                <option value="validated">Validé</option>
                                <option value="rejected">Rejeté</option>
                                <option value="ventilated">Ventilé</option>
                            </select>
                        </div>
                    </div> <!-- /row -->
                </div>
            </div>
        </div>
    </div>

    <!-- Liste des sessions -->
    <div class="row" id="sessionsContainer" aria-live="polite" aria-busy="true"></div>

    <!-- État de chargement -->
    <div id="loadingState" class="text-center py-">
        <div class="spinner-border text-primary" role="status" aria-hidden="true"></div>
        <p class="mt-3 text-muted">Chargement des sessions...</p>
    </div>

    <!-- État vide -->
    <div id="emptyState" class="card text-center py-5" style="display:none;">
        <i class="ph-light ph-clipboard-text display-1 text-muted mb-3" aria-hidden="true"></i>
        <h5 class="text-muted">Aucune session trouvée</h5>
        <p class="text-muted">Commencez par créer une nouvelle session de tirage.</p>
        <a href="{{ route('evalidation.session.create') }}" class="btn btn-success">
            <i class="ph-light ph-plus me-2"></i>Créer une session
        </a>
    </div>

    <!-- Pagination -->
    <div id="paginationContainer" class="row mt-4" style="display:none;">
        <div class="col-12">
            <!-- Pagination générée par JS -->
        </div>
    </div>
</div>

<!-- Modal de confirmation de suppression -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="ph-light ph-warning-circle me-2 text-danger"></i>
                    Confirmer la suppression
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir supprimer la session <strong id="deleteModalSessionNumber"></strong> ?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="ph-light ph-trash me-2"></i>Supprimer
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/js/evalidation/session-list.js') }}" defer></script>
@endsection