{{--
    JOS-164, lot 3 — voir/ajouter un risque directement depuis le panneau
    Aperçu d'un chantier. Même patron d'overlay que les modales de
    ViewProject (add-participant-modal.blade.php) ; formulaire volontairement
    plus court que celui de l'onglet Risques du projet (pas de description,
    pas de chantier à choisir — c'est déjà celui-ci) : modifier/clore/
    supprimer un risque reste réservé à cet onglet.
--}}
@if ($addingChantierRisk)
    <div
        class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-gray-950/50 p-4 pt-[8vh] backdrop-blur-sm"
        wire:click.self="closeAddChantierRisk"
    >
        <div class="w-full max-w-sm rounded-xl border border-gray-200 bg-white shadow-xl dark:border-white/10 dark:bg-gray-900">
            <div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 dark:border-white/5">
                <div class="text-sm font-semibold text-gray-950 dark:text-white">Ajouter un risque</div>
                <button
                    type="button"
                    wire:click="closeAddChantierRisk"
                    aria-label="Fermer"
                    class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-white/10 dark:hover:text-gray-200"
                >
                    <x-filament::icon icon="heroicon-o-x-mark" class="h-4 w-4" />
                </button>
            </div>

            <form wire:submit="saveChantierRisk" class="flex flex-col gap-3 p-4">
                <div>
                    <label for="chantier-risk-title" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">Titre</label>
                    <input
                        type="text"
                        id="chantier-risk-title"
                        wire:model="chantierRiskTitle"
                        x-init="$nextTick(() => $el.focus())"
                        class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white"
                    />
                    @error('chantierRiskTitle') <p class="mt-1 text-xs text-danger-600 dark:text-danger-400">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="chantier-risk-category" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">Catégorie</label>
                    <select id="chantier-risk-category" wire:model="chantierRiskCategory" class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white">
                        @foreach ($this->chantierRiskCategories() as $category)
                            <option value="{{ $category->value }}">{{ $category->getLabel() }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="chantier-risk-owner" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">Propriétaire (optionnel)</label>
                    <select id="chantier-risk-owner" wire:model="chantierRiskOwnerId" class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white">
                        <option value="">—</option>
                        @foreach ($this->chantierRiskOwnerOptions() as $person)
                            <option value="{{ $person->id }}">{{ $person->full_name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label for="chantier-risk-probability" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">
                            Probabilité <span class="tabular-nums text-gray-400">{{ $chantierRiskProbability }}/5</span>
                        </label>
                        <input type="range" id="chantier-risk-probability" wire:model.live="chantierRiskProbability" min="1" max="5" step="1" class="w-full" />
                    </div>
                    <div>
                        <label for="chantier-risk-impact" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">
                            Impact <span class="tabular-nums text-gray-400">{{ $chantierRiskImpact }}/5</span>
                        </label>
                        <input type="range" id="chantier-risk-impact" wire:model.live="chantierRiskImpact" min="1" max="5" step="1" class="w-full" />
                    </div>
                </div>

                @php $chantierRiskPreviewLevel = \App\Services\Risks\RiskLevel::fromScore($chantierRiskProbability * $chantierRiskImpact); @endphp
                <div class="flex items-center gap-2 rounded-lg border border-gray-100 px-3 py-2 dark:border-white/5">
                    <span class="text-xs text-gray-400 dark:text-gray-500">Score</span>
                    <span class="rounded-full px-2.5 py-1 text-xs font-bold tabular-nums {{ $chantierRiskPreviewLevel->badgeClasses() }}">
                        {{ $chantierRiskProbability * $chantierRiskImpact }} · {{ $chantierRiskPreviewLevel->getLabel() }}
                    </span>
                </div>

                <div class="flex justify-end gap-2 border-t border-gray-100 pt-3 dark:border-white/5">
                    <button
                        type="button"
                        wire:click="closeAddChantierRisk"
                        class="rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:text-gray-200 dark:hover:bg-white/5"
                    >
                        Annuler
                    </button>
                    <button
                        type="submit"
                        class="rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-primary-500"
                    >
                        Ajouter
                    </button>
                </div>
            </form>
        </div>
    </div>
@endif