@extends('layouts.exat')
@section('title', 'Circuit : '.$circuit->libelle)
@section('subtitle', 'Configuration des étapes et validateurs')

@section('content')
<div class="mx-auto max-w-3xl space-y-5">
    <div class="mb-1 flex items-center gap-3">
        <a href="{{ route('circuits.index') }}" class="rounded-lg p-2 text-slate-500 hover:bg-slate-100" aria-label="Retour">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/></svg>
        </a>
        <span class="font-medium text-slate-800">{{ $circuit->libelle }}</span>
        @if($circuit->actif)<span class="rounded-full bg-emerald-50 px-2 py-0.5 text-[11px] font-medium text-emerald-700">Actif</span>@else<span class="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] text-slate-500">Inactif</span>@endif
    </div>

    {{-- Paramètres du circuit --}}
    <form method="POST" action="{{ route('circuits.update', $circuit) }}">
        @csrf @method('PUT')
        @include('circuits._champs', ['circuit' => $circuit])
        <div class="mt-3 flex justify-end">
            <button class="inline-flex h-9 items-center rounded-lg bg-emerald-600 px-4 text-sm font-medium text-white hover:bg-emerald-700">Enregistrer</button>
        </div>
    </form>
    <div class="-mt-2">
        <form method="POST" action="{{ route('circuits.destroy', $circuit) }}" onsubmit="return confirm('Supprimer ce circuit ?')">
            @csrf @method('DELETE')
            <button class="text-sm text-red-600 hover:text-red-700">Supprimer le circuit</button>
        </form>
    </div>

    {{-- Étapes --}}
    <section class="rounded-xl bg-white p-5 ring-1 ring-slate-200">
        <h2 class="mb-4 text-sm font-medium text-slate-900">Étapes du circuit</h2>

        <div class="space-y-4">
            @forelse($circuit->etapes as $etape)
                <div class="rounded-lg border border-slate-200 p-4">
                    <form method="POST" action="{{ route('etapes.update', $etape) }}" class="flex flex-wrap items-end gap-3">
                        @csrf @method('PUT')
                        <div class="w-16">
                            <label class="mb-1 block text-[11px] text-slate-400">Ordre</label>
                            <input type="number" name="ordre" value="{{ $etape->ordre }}" min="1" class="w-full rounded-lg border-slate-200 text-sm">
                        </div>
                        <div class="min-w-[160px] flex-1">
                            <label class="mb-1 block text-[11px] text-slate-400">Libellé</label>
                            <input name="libelle" value="{{ $etape->libelle }}" class="w-full rounded-lg border-slate-200 text-sm">
                        </div>
                        <div>
                            <label class="mb-1 block text-[11px] text-slate-400">Mode</label>
                            <select name="mode" class="rounded-lg border-slate-200 text-sm">
                                <option value="SEQUENTIEL" @selected($etape->mode === 'SEQUENTIEL')>Séquentiel</option>
                                <option value="PARALLELE" @selected($etape->mode === 'PARALLELE')>Parallèle</option>
                            </select>
                        </div>
                        <div class="w-20">
                            <label class="mb-1 block text-[11px] text-slate-400">Quorum</label>
                            <input type="number" name="quorum" value="{{ $etape->quorum }}" min="1" class="w-full rounded-lg border-slate-200 text-sm">
                        </div>
                        <button class="inline-flex h-9 items-center rounded-lg border border-slate-200 px-3 text-sm text-slate-700 hover:bg-slate-50">Enregistrer</button>
                    </form>

                    {{-- Validateurs de l'étape --}}
                    <div class="mt-3 border-t border-slate-100 pt-3">
                        <div class="mb-2 text-[11px] font-medium uppercase tracking-wide text-slate-400">Validateurs</div>
                        <div class="flex flex-wrap gap-2">
                            @forelse($etape->validateurs as $v)
                                <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-100 py-1 pl-3 pr-1 text-xs text-slate-700">
                                    {{ $v->name }} <span class="text-slate-400">#{{ $v->pivot->ordre_passage }}</span>
                                    <form method="POST" action="{{ route('etapes.validateurs.destroy', [$etape, $v]) }}">
                                        @csrf @method('DELETE')
                                        <button class="flex h-5 w-5 items-center justify-center rounded-full text-slate-400 hover:bg-slate-200 hover:text-red-600" title="Retirer">
                                            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                                        </button>
                                    </form>
                                </span>
                            @empty
                            @endforelse
                            @foreach($etape->groupes as $g)
                                <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 py-1 pl-3 pr-1 text-xs text-emerald-700">
                                    <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.09 9.09 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/></svg>
                                    {{ $g->libelle }} <span class="text-emerald-400">(groupe)</span>
                                    <form method="POST" action="{{ route('etapes.groupes.destroy', [$etape, $g]) }}">
                                        @csrf @method('DELETE')
                                        <button class="flex h-5 w-5 items-center justify-center rounded-full text-emerald-400 hover:bg-emerald-100 hover:text-red-600" title="Retirer"><svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg></button>
                                    </form>
                                </span>
                            @endforeach
                            @if($etape->validateurs->isEmpty() && $etape->groupes->isEmpty())
                                <span class="text-xs text-slate-400">Aucun validateur — l'étape ne pourra pas être franchie.</span>
                            @endif
                        </div>
                        <form method="POST" action="{{ route('etapes.validateurs.store', $etape) }}" class="mt-3 grid gap-2 sm:grid-cols-2">
                            @csrf
                            <div>
                                <label class="mb-1 block text-[11px] text-slate-400">Ajouter des utilisateurs</label>
                                <select name="user_ids[]" multiple size="5" class="w-full rounded-lg border-slate-200 text-sm">
                                    @foreach($users as $u)<option value="{{ $u->id }}">{{ trim($u->name.' '.($u->prenom ?? '')) }}</option>@endforeach
                                </select>
                            </div>
                            <div>
                                <label class="mb-1 block text-[11px] text-slate-400">Ajouter des groupes</label>
                                <select name="groupe_ids[]" multiple size="5" class="w-full rounded-lg border-slate-200 text-sm">
                                    @foreach($groupes as $g)<option value="{{ $g->id }}">{{ $g->libelle }}</option>@endforeach
                                </select>
                            </div>
                            <div class="sm:col-span-2 flex items-center justify-between">
                                <span class="text-[11px] text-slate-400">Ctrl/Cmd pour en choisir plusieurs. En mode séquentiel, l'ordre suit la sélection.</span>
                                <button class="inline-flex h-9 items-center rounded-lg border border-slate-200 px-3 text-sm text-slate-700 hover:bg-slate-50">Ajouter</button>
                            </div>
                        </form>
                    </div>

                    <div class="mt-3 flex justify-end">
                        <form method="POST" action="{{ route('etapes.destroy', $etape) }}" onsubmit="return confirm('Supprimer cette étape ?')">
                            @csrf @method('DELETE')
                            <button class="text-xs text-red-600 hover:text-red-700">Supprimer l'étape</button>
                        </form>
                    </div>
                </div>
            @empty
                <p class="text-sm text-slate-400">Aucune étape. Ajoutez la première ci-dessous.</p>
            @endforelse
        </div>

        {{-- Ajouter une étape --}}
        <form method="POST" action="{{ route('etapes.store', $circuit) }}" class="mt-4 flex flex-wrap items-end gap-3 border-t border-slate-100 pt-4">
            @csrf
            <div class="min-w-[160px] flex-1">
                <label class="mb-1 block text-[11px] text-slate-400">Nouvelle étape</label>
                <input name="libelle" placeholder="Ex. Approbation DAF" required class="w-full rounded-lg border-slate-200 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Mode</label>
                <select name="mode" class="rounded-lg border-slate-200 text-sm">
                    <option value="SEQUENTIEL">Séquentiel</option>
                    <option value="PARALLELE">Parallèle</option>
                </select>
            </div>
            <div class="w-20">
                <label class="mb-1 block text-[11px] text-slate-400">Quorum</label>
                <input type="number" name="quorum" value="1" min="1" class="w-full rounded-lg border-slate-200 text-sm">
            </div>
            <button class="inline-flex h-9 items-center gap-2 rounded-lg bg-emerald-600 px-3 text-sm font-medium text-white hover:bg-emerald-700">Ajouter l'étape</button>
        </form>
    </section>

    <p class="text-[11px] text-slate-400">
        Mode <b>séquentiel</b> : les validateurs statuent dans l'ordre indiqué. Mode <b>parallèle</b> : tous peuvent statuer, l'étape est franchie dès que le quorum d'approbations est atteint.
    </p>
</div>
@endsection