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

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

.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: .6rem; }

/* Table de structures */
.struct-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.struct-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; }
.struct-table tbody tr { border-bottom: 1px solid #f3f4f6; }
.struct-table tbody tr:last-child { border-bottom: none; }
.struct-table tbody td { padding: .7rem 1rem; vertical-align: middle; }
.struct-table tbody tr:hover { background: #fafafa; }

/* Radio Créer/Ignorer */
.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 { color: #059669; font-weight: 600; font-size: .85rem; cursor: pointer; }
.radio-opt.ignorer label { color: #9ca3af; font-size: .85rem; cursor: pointer; }

/* Select ministère */
.min-select {
    padding: .4rem .65rem; border: 1.5px solid #d1d5db; border-radius: 6px;
    font-size: .83rem; min-width: 180px; max-width: 260px;
    color: #374151; background: #fff; cursor: pointer;
}
.min-select:focus { outline: none; border-color: #2563eb; }
.min-select:disabled { opacity: .4; background: #f3f4f6; }

/* Badge code structure */
.struct-code {
    font-family: monospace; font-weight: 700; font-size: .88rem;
    background: #f3f4f6; border: 1px solid #e5e7eb;
    border-radius: 5px; padding: .2rem .55rem;
    color: #374151;
}

/* Alerte tout va bien */
.alert-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 8px; padding: 1rem 1.25rem; font-size: .9rem; margin-bottom: 1rem; }
.alert-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; 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; }

/* Actions globales */
.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-secondary { display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: #374151; border: 1.5px solid #d1d5db; border-radius: 7px; padding: .6rem 1.2rem; font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn-secondary:hover { background: #f3f4f6; }
.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; }

.meta-info { font-size: .82rem; color: #6b7280; }
.meta-info strong { color: #374151; }

/* Sélection globale rapide */
.quick-actions { display: flex; gap: .5rem; margin-bottom: .75rem; }
.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 structures</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 active"><div class="step-circle">2</div><span class="step-label">Structures</span></div>
        <div class="step-line"></div>
        <div class="step idle"><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>

    @if($errors->any())
        <div class="alert-warning">{{ $errors->first() }}</div>
    @endif

    @if(empty($structuresManquantes))
        {{-- Toutes les structures existent déjà --}}
        <div class="alert-success">
            ✓ Toutes les structures du fichier sont présentes dans la base de données.
            Vous pouvez continuer.
        </div>
        <form method="POST" action="{{ route('importexcels.structures.traiter') }}">
            @csrf
            <div style="text-align:right">
                <button type="submit" class="btn-primary">Continuer vers les financements →</button>
            </div>
        </form>
    @else
        {{-- Structures manquantes à traiter --}}
        <div class="alert-warning">
            ⚠ <strong>{{ count($structuresManquantes) }} structure(s)</strong> du fichier sont absentes de la base.
            Choisissez pour chacune : la créer ou l'ignorer.
        </div>

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

            <div class="imp-card">
                <div class="imp-card-head">
                    🏢 Structures non trouvées en base de données
                    <span style="margin-left:auto;font-size:.8rem;font-weight:400;color:#6b7280">
                        {{ count($structuresManquantes) }} structure(s)
                    </span>
                </div>

                {{-- Sélection rapide --}}
                <div style="padding: .75rem 1rem; border-bottom: 1px solid #f3f4f6; background: #fafafa;">
                    <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>
                </div>

                <table class="struct-table">
                    <thead>
                        <tr>
                            <th>Structure (valeur dans le fichier)</th>
                            <th>Action</th>
                            <th>Ministère de rattachement</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($structuresManquantes as $struct)
                        <tr id="row-{{ $loop->index }}">
                            <td><span class="struct-code">{{ $struct }}</span></td>
                            <td>
                                <div class="radio-group">
                                    <label class="radio-opt creer">
                                        <input
                                            type="radio"
                                            name="actions[{{ $struct }}]"
                                            value="creer"
                                            checked
                                            onchange="toggleMinistere('{{ $loop->index }}', true)"
                                        >
                                        <span>Créer</span>
                                    </label>
                                    <label class="radio-opt ignorer">
                                        <input
                                            type="radio"
                                            name="actions[{{ $struct }}]"
                                            value="ignorer"
                                            onchange="toggleMinistere('{{ $loop->index }}', false)"
                                        >
                                        <span>Ignorer</span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <select
                                    name="ministeres[{{ $struct }}]"
                                    class="min-select"
                                    id="min-{{ $loop->index }}"
                                >
                                    <option value="">-- Choisir un ministère --</option>
                                    @foreach($ministeres as $min)
                                        <option
                                            value="{{ $min->id }}"
                                            {{ $min->id == $mefId ? 'selected' : '' }}
                                        >
                                            {{ $min->code }} – {{ $min->nom }}
                                        </option>
                                    @endforeach
                                </select>
                            </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 en cours ?')">
                            ✕ Annuler l'import
                        </button>
                    </form>
                    <button type="submit" form="formStructures" class="btn-primary">
                        Confirmer et continuer →
                    </button>
                </div>
            </div>

        </form>
    @endif
</div>
@endsection

@push('scripts')
<script>
function toggleMinistere(idx, enabled) {
    const sel = document.getElementById('min-' + idx);
    if (sel) sel.disabled = !enabled;
}

function setAll(val) {
    document.querySelectorAll('input[type=radio][value=' + val + ']').forEach(r => {
        r.checked = true;
        // Déclencher l'événement pour activer/désactiver les selects
        const idx = r.closest('tr').id.replace('row-', '');
        toggleMinistere(idx, val === 'creer');
    });
}
</script>
@endpush