{{-- resources/views/import/etape3.blade.php --}}
@extends('layouts.app')
@section('title', 'Import Excel – Étape 3 : Financements')

@push('styles')
<style>
.imp-wrap { max-width: 760px; margin: 2rem auto; padding: 0 1rem; }
.imp-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 .2rem; }
.imp-header p  { color: #6b7280; font-size: .9rem; margin: 0 0 1.5rem; }

.stepper { display: flex; align-items: center; margin-bottom: 1.75rem; }
.step { display: flex; align-items: center; gap: .5rem; }
.step-circle { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }
.step.active .step-circle { background: #2563eb; color: #fff; }
.step.done   .step-circle { background: #059669; color: #fff; }
.step.idle   .step-circle { background: #e5e7eb; color: #6b7280; }
.step-label { font-size: .8rem; color: #6b7280; white-space: nowrap; }
.step.active .step-label  { color: #1d40af; font-weight: 600; }
.step.done   .step-label  { color: #065f46; }
.step-line { flex: 1; height: 2px; background: #e5e7eb; margin: 0 .5rem; }

.imp-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.07); margin-bottom: 1rem; }
.imp-card-head { padding: 1rem 1.25rem; border-bottom: 1px solid #f3f4f6; background: #f9fafb; font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }

/* Résultat structures créées */
.result-badge { display: inline-flex; align-items: center; gap: .35rem; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 5px; font-size: .8rem; font-weight: 600; padding: .2rem .55rem; margin: .15rem; }

/* Table financements */
.fin-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.fin-table thead th { background: #f9fafb; padding: .65rem 1rem; text-align: left; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; border-bottom: 1px solid #e5e7eb; }
.fin-table tbody tr { border-bottom: 1px solid #f3f4f6; }
.fin-table tbody tr:last-child { border-bottom: none; }
.fin-table tbody td { padding: .7rem 1rem; vertical-align: middle; }
.fin-table tbody tr:hover { background: #fafafa; }

.fin-code { font-family: monospace; font-weight: 700; font-size: .9rem; background: #fefce8; border: 1px solid #fde68a; border-radius: 5px; padding: .2rem .55rem; color: #854d0e; }

.radio-group { display: flex; gap: .75rem; }
.radio-opt { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.radio-opt input[type=radio] { width: 16px; height: 16px; cursor: pointer; accent-color: #2563eb; }
.radio-opt.creer   label, .radio-opt.creer   span { color: #059669; font-weight: 600; font-size: .85rem; cursor: pointer; }
.radio-opt.ignorer label, .radio-opt.ignorer span { color: #9ca3af; font-size: .85rem; cursor: pointer; }

.action-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: #f9fafb; border-top: 1px solid #e5e7eb; flex-wrap: wrap; }
.btn-primary { display: inline-flex; align-items: center; gap: .5rem; background: #2563eb; color: #fff; border: none; border-radius: 7px; padding: .65rem 1.4rem; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .15s; }
.btn-primary:hover { background: #1d4ed8; }
.btn-danger { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; border-radius: 7px; padding: .6rem 1.2rem; font-size: .87rem; font-weight: 600; cursor: pointer; }

.alert-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 8px; padding: .85rem 1rem; font-size: .87rem; margin-bottom: 1rem; }
.alert-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 8px; padding: .85rem 1rem; font-size: .87rem; margin-bottom: 1rem; }

.quick-actions { display: flex; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid #f3f4f6; background: #fafafa; }
.btn-xs { font-size: .78rem; padding: .3rem .7rem; border: 1px solid #d1d5db; border-radius: 5px; background: #fff; cursor: pointer; color: #374151; }
.btn-xs:hover { background: #f3f4f6; }
</style>
@endpush

@section('content')
<div class="imp-wrap">

    <div class="imp-header">
        <h1>Import – Vérification des financements</h1>
        <p>Fichier : <strong>{{ $nomFichier }}</strong> · Année : <strong>{{ $annee }}</strong></p>
    </div>

    {{-- Stepper --}}
    <div class="stepper">
        <div class="step done"><div class="step-circle">✓</div><span class="step-label">Fichier</span></div>
        <div class="step-line"></div>
        <div class="step done"><div class="step-circle">✓</div><span class="step-label">Structures</span></div>
        <div class="step-line"></div>
        <div class="step active"><div class="step-circle">3</div><span class="step-label">Financements</span></div>
        <div class="step-line"></div>
        <div class="step idle"><div class="step-circle">4</div><span class="step-label">Données</span></div>
        <div class="step-line"></div>
        <div class="step idle"><div class="step-circle">5</div><span class="step-label">Bilan</span></div>
    </div>

    {{-- Résultat des structures créées --}}
    @if(!empty($structuresCreees))
        <div class="alert-success">
            ✓ <strong>{{ count($structuresCreees) }} structure(s) créée(s) :</strong>
            <div style="margin-top:.4rem">
                @foreach($structuresCreees as $s)
                    <span class="result-badge">{{ $s }}</span>
                @endforeach
            </div>
        </div>
    @endif
    @if(!empty($structuresErreurs))
        <div class="alert-warning">
            @foreach($structuresErreurs as $e) <div>⚠ {{ $e }}</div> @endforeach
        </div>
    @endif

    @if(empty($financementsManquants))
        <div class="alert-success">
            ✓ Toutes les sources de financement du fichier sont présentes en base.
        </div>
        <form method="POST" action="{{ route('importexcels.financements.traiter') }}">
            @csrf
            <div style="text-align:right">
                <button type="submit" class="btn-primary">Continuer vers les données →</button>
            </div>
        </form>
    @else
        <div class="alert-warning">
            ⚠ <strong>{{ count($financementsManquants) }} source(s) de financement</strong> absentes de la base.
        </div>

        <form method="POST" action="{{ route('importexcels.financements.traiter') }}" id="formFins">
            @csrf

            <div class="imp-card">
                <div class="imp-card-head">
                    💰 Sources de financement non trouvées
                    <span style="margin-left:auto;font-size:.8rem;font-weight:400;color:#6b7280">
                        {{ count($financementsManquants) }} source(s)
                    </span>
                </div>

                <div class="quick-actions">
                    <span style="font-size:.82rem;color:#6b7280;align-self:center">Tout sélectionner :</span>
                    <button type="button" class="btn-xs" onclick="setAll('creer')">✓ Tout créer</button>
                    <button type="button" class="btn-xs" onclick="setAll('ignorer')">✕ Tout ignorer</button>
                </div>

                <table class="fin-table">
                    <thead>
                        <tr>
                            <th>Source de financement (valeur dans le fichier)</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($financementsManquants as $fin)
                        <tr>
                            <td><span class="fin-code">{{ $fin }}</span></td>
                            <td>
                                <div class="radio-group">
                                    <label class="radio-opt creer">
                                        <input type="radio" name="actions[{{ $fin }}]" value="creer" checked>
                                        <span>Créer</span>
                                    </label>
                                    <label class="radio-opt ignorer">
                                        <input type="radio" name="actions[{{ $fin }}]" value="ignorer">
                                        <span>Ignorer</span>
                                    </label>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>

                <div class="action-bar">
                    <form method="POST" action="{{ route('importexcels.annuler') }}" style="margin:0">
                        @csrf
                        <button type="submit" class="btn-danger" onclick="return confirm('Annuler l\'import ?')">
                            ✕ Annuler
                        </button>
                    </form>
                    <button type="submit" form="formFins" class="btn-primary">
                        Confirmer et continuer →
                    </button>
                </div>
            </div>
        </form>
    @endif
</div>
@endsection

@push('scripts')
<script>
function setAll(val) {
    document.querySelectorAll('input[type=radio][value=' + val + ']').forEach(r => r.checked = true);
}
</script>
@endpush