{{-- resources/views/pta/apercu.blade.php --}}
@extends('layouts.app')

@section('title', 'Aperçu fichier PTA ' . $annee)

@section('content')
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-7">

            {{-- Étapes --}}
            <div class="d-flex align-items-center mb-4 gap-2">
                <span class="badge bg-success rounded-pill px-3 py-2">
                    <i class="bi bi-check me-1"></i>1 Fichier
                </span>
                <div class="flex-grow-1 border-top border-2 border-success"></div>
                <span class="badge bg-primary rounded-pill px-3 py-2">2 Aperçu</span>
                <div class="flex-grow-1 border-top border-2"></div>
                <span class="badge bg-light text-muted rounded-pill px-3 py-2">3 Confirmation</span>
                <div class="flex-grow-1 border-top border-2"></div>
                <span class="badge bg-light text-muted rounded-pill px-3 py-2">4 Résultat</span>
            </div>

            {{-- En-tête --}}
            <div class="d-flex align-items-center mb-4">
                <div class="me-3 p-3 rounded-3 bg-success bg-opacity-10">
                    <i class="bi bi-file-earmark-check fs-3 text-success"></i>
                </div>
                <div>
                    <h4 class="mb-0 fw-bold">Fichier chargé avec succès</h4>
                    <small class="text-muted">Étape 2 sur 3 — Vérifiez avant d'analyser</small>
                </div>
            </div>

            {{-- Infos fichier --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body">
                    <div class="row g-3 align-items-center">
                        <div class="col-auto">
                            <i class="bi bi-file-earmark-excel text-success" style="font-size:3rem"></i>
                        </div>
                        <div class="col">
                            <div class="fw-bold fs-6">{{ $originalName }}</div>
                            <small class="text-muted">
                                {{ number_format($size / 1024, 1) }} Ko
                                &nbsp;·&nbsp; Année : <strong>{{ $annee }}</strong>
                            </small>
                        </div>
                        <div class="col-auto d-flex gap-2">
                            {{-- Changer de fichier --}}
                            <a href="{{ route('pta.import') }}" class="btn btn-outline-secondary btn-sm">
                                <i class="bi bi-arrow-repeat me-1"></i>Changer
                            </a>
                            {{-- Supprimer --}}
                            <form action="{{ route('pta.supprimer') }}" method="POST"
                                  onsubmit="return confirm('Supprimer ce fichier ?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-outline-danger btn-sm">
                                    <i class="bi bi-trash me-1"></i>Supprimer
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Statistiques rapides --}}
            <div class="row g-3 mb-4">
                @foreach([
                    ['nb_programmes', 'Programmes',  'bi-layers',    'primary'],
                    ['nb_actions',    'Actions',      'bi-diagram-3', 'info'],
                    ['nb_resultats',  'Résultats',    'bi-bullseye',  'success'],
                    ['nb_activites',  'Activités',    'bi-activity',  'warning'],
                ] as [$key, $label, $icon, $color])
                <div class="col-6 col-md-3">
                    <div class="card border-0 shadow-sm text-center h-100">
                        <div class="card-body py-3">
                            <i class="bi {{ $icon }} fs-2 text-{{ $color }} mb-1 d-block"></i>
                            <h3 class="fw-bold mb-0">{{ $apercu[$key] }}</h3>
                            <small class="text-muted">{{ $label }}</small>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            {{-- Aperçu des premières lignes --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-light border-0">
                    <strong><i class="bi bi-list-nested me-2"></i>Aperçu des premières lignes détectées</strong>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th style="width:120px">Code</th>
                                <th style="width:100px">Type</th>
                                <th>Libellé</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($apercu['exemples'] as $ex)
                            @php
                                $badges = [
                                    'programme' => 'bg-primary',
                                    'action'    => 'bg-info',
                                    'resultat'  => 'bg-success',
                                    'activite'  => 'bg-secondary',
                                ];
                                $labels = [
                                    'programme' => 'Programme',
                                    'action'    => 'Action',
                                    'resultat'  => 'Résultat',
                                    'activite'  => 'Activité',
                                ];
                                $rowClasses = [
                                    'programme' => 'table-primary',
                                    'action'    => 'table-info',
                                    'resultat'  => 'table-success',
                                    'activite'  => '',
                                ];
                            @endphp
                            <tr class="{{ $rowClasses[$ex['type']] ?? '' }}">
                                <td><code>{{ $ex['code'] }}</code></td>
                                <td>
                                    <span class="badge {{ $badges[$ex['type']] ?? 'bg-dark' }}">
                                        {{ $labels[$ex['type']] ?? $ex['type'] }}
                                    </span>
                                </td>
                                <td class="text-truncate" style="max-width:300px"
                                    title="{{ $ex['nom'] }}">
                                    {{ $ex['nom'] }}
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
                @if($apercu['nb_lignes'] > 20)
                <div class="card-footer bg-light text-muted small text-center">
                    Affichage des 20 premières lignes sur {{ $apercu['nb_lignes'] }} au total
                </div>
                @endif
            </div>

            {{-- Actions --}}
            <div class="d-flex justify-content-between align-items-center">
                <a href="{{ route('pta.import') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Retour
                </a>
                <form action="{{ route('pta.analyser') }}" method="POST" id="formAnalyser">
                    @csrf
                    <button type="submit" class="btn btn-primary btn-lg px-5" id="btnAnalyser">
                        <i class="bi bi-search me-2"></i>Analyser et détecter les conflits
                    </button>
                </form>
            </div>

        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('formAnalyser')?.addEventListener('submit', function () {
    const btn = document.getElementById('btnAnalyser');
    if (btn) {
        btn.disabled  = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Analyse en cours…';
    }
});
</script>
@endpush