<div class="w-full">
    <div class="w-full flex flex-col gap-2">
        <div class="flex flex-wrap items-center gap-3">
            <a href="{{ route('environments.index') }}" wire:navigate
               class="text-sm text-gray-500 hover:text-gray-700">&larr; Entornos</a>
        </div>
        <h1 class="text-3xl font-bold text-gray-900 tracking-tight">Soportes contratados</h1>
        <p class="mt-1 text-gray-500">
            {{ $environment->name }} — <span class="font-mono text-sm">{{ $environment->domain }}</span>
        </p>
    </div>

    @foreach (['success' => 'green', 'warning' => 'amber'] as $tipo => $color)
        @if (session($tipo))
            <div class="mt-4 rounded-lg border border-{{ $color }}-200 bg-{{ $color }}-50 px-4 py-3 text-sm text-{{ $color }}-800">
                {{ session($tipo) }}
            </div>
        @endif
    @endforeach

    {{-- Estado de un vistazo: es lo que se viene a mirar. --}}
    @php $vigente = $contratos->firstWhere('id', $vigenteId); @endphp
    <div class="mt-6 rounded-2xl border-2 {{ $vigente && ! $vigente->haCaducado() ? 'border-green-200 bg-green-50' : 'border-gray-200 bg-gray-50' }} px-6 py-5">
        @if ($vigente)
            <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                <span class="text-lg font-bold">{{ $vigente->support?->name ?? 'Sin tipo' }}</span>
                <span class="rounded px-2 py-0.5 text-xs font-semibold
                    {{ $vigente->haCaducado() ? 'bg-red-100 text-red-800' : ($vigente->diasRestantes() < 30 ? 'bg-amber-100 text-amber-800' : 'bg-green-100 text-green-800') }}">
                    {{ $vigente->estado_texto }}
                </span>
            </div>
            <p class="mt-1 text-sm text-gray-600">
                Del {{ $vigente->start_at->format('d/m/Y') }} al {{ $vigente->end_at->format('d/m/Y') }}
                @if ($vigente->haCaducado())
                    — venció hace {{ abs($vigente->diasRestantes()) }} día(s)
                @else
                    — quedan {{ $vigente->diasRestantes() }} día(s)
                @endif
            </p>
            @if ($vigente->comment)
                <p class="mt-1 text-sm text-gray-500">{{ $vigente->comment }}</p>
            @endif
        @else
            <p class="text-sm text-gray-600">
                Este entorno <strong>no tiene ningún soporte contratado</strong>.
            </p>
        @endif
    </div>

    {{-- Alta / edición --}}
    @if ($mostrandoFormulario)
        <div class="mt-4 rounded-lg border border-gray-200 bg-white px-8 py-6">
            <h3 class="text-lg font-bold">
                {{ $editandoId === null ? 'Asignar un soporte' : 'Cambiar el soporte' }}
            </h3>

            <div class="mt-5 grid grid-cols-1 gap-5 md:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Tipo de soporte</label>
                    <select wire:model="supportId"
                            class="mt-1 w-full rounded-lg border border-gray-200 py-2 pl-3 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('supportId') border-red-500 @enderror">
                        <option value="">— Elige uno —</option>
                        @foreach ($tipos as $t)
                            <option value="{{ $t->id }}">{{ $t->name }}</option>
                        @endforeach
                    </select>
                    @error('supportId') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                    @if ($tipos->isEmpty())
                        <p class="mt-1 text-xs text-amber-700">
                            No hay tipos de soporte creados.
                            <a href="{{ route('supports.index') }}" class="underline">Créalos primero</a>.
                        </p>
                    @endif
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700">Comentario</label>
                    <input type="text" wire:model="comment" maxlength="255"
                           placeholder="Nº de pedido, condiciones, quien lo contrató…"
                           class="mt-1 w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('comment') border-red-500 @enderror">
                    @error('comment') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700">Desde</label>
                    <input type="date" wire:model="startAt"
                           class="mt-1 rounded-lg border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('startAt') border-red-500 @enderror">
                    @error('startAt') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700">Hasta</label>
                    <input type="date" wire:model="endAt"
                           class="mt-1 rounded-lg border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-300 @error('endAt') border-red-500 @enderror">
                    @error('endAt') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                    <p class="mt-1 text-xs text-gray-500">
                        Es la fecha que dispara los avisos de caducidad.
                    </p>
                </div>
            </div>

            <div class="mt-6 flex flex-wrap gap-2">
                <button type="button" wire:click="guardar" wire:loading.attr="disabled" wire:target="guardar"
                        class="rounded bg-3ip px-4 py-2 text-white hover:bg-3ip-light disabled:opacity-60">
                    Guardar
                </button>
                <button type="button" wire:click="cancelar"
                        class="rounded border border-gray-200 px-4 py-2 text-gray-700 hover:bg-gray-50">
                    Cancelar
                </button>
            </div>
        </div>
    @else
        @can('admin.environments.supports.create')
            <div class="mt-4">
                <button type="button" wire:click="nuevo"
                        class="rounded bg-3ip px-4 py-2 text-white hover:bg-3ip-light">
                    Asignar un soporte
                </button>
            </div>
        @endcan
    @endif

    {{-- Histórico. Se conserva a propósito: responde a "¿tenía soporte cuando pasó
         aquello?", que es la pregunta que se hace después de un incidente. --}}
    <div class="mt-6 rounded-2xl border border-gray-200 bg-white overflow-hidden">
        <div class="border-b border-gray-100 bg-gray-50/50 px-5 py-3">
            <h3 class="text-sm font-semibold text-gray-800">Histórico de soportes</h3>
        </div>

        @if ($contratos->isEmpty())
            <p class="px-5 py-6 text-sm text-gray-500">
                Todavía no hay ningún soporte asignado a este entorno.
            </p>
        @else
            <div class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200 text-left text-xs uppercase tracking-wide text-gray-500">
                            <th class="px-5 py-2">Soporte</th>
                            <th class="px-5 py-2">Periodo</th>
                            <th class="px-5 py-2">Estado</th>
                            <th class="px-5 py-2">Comentario</th>
                            <th class="px-5 py-2"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($contratos as $contrato)
                            <tr class="border-b border-gray-100 {{ $contrato->id === $vigenteId ? 'bg-green-50/40' : '' }}">
                                <td class="px-5 py-3">
                                    <span class="font-medium">{{ $contrato->support?->name ?? 'Sin tipo' }}</span>
                                    @if ($contrato->id === $vigenteId)
                                        <span class="ml-1 rounded bg-gray-200 px-1.5 py-0.5 text-xs text-gray-700">vigente</span>
                                    @endif
                                </td>
                                <td class="px-5 py-3 text-gray-600">
                                    {{ $contrato->start_at->format('d/m/Y') }} → {{ $contrato->end_at->format('d/m/Y') }}
                                </td>
                                <td class="px-5 py-3">
                                    <span class="rounded px-2 py-0.5 text-xs font-semibold
                                        {{ $contrato->haCaducado() ? 'bg-red-100 text-red-800' : ($contrato->diasRestantes() < 30 ? 'bg-amber-100 text-amber-800' : 'bg-green-100 text-green-800') }}">
                                        {{ $contrato->estado_texto }}
                                    </span>
                                </td>
                                <td class="px-5 py-3 text-gray-600">{{ $contrato->comment ?: '—' }}</td>
                                <td class="px-5 py-3 text-right whitespace-nowrap">
                                    @can('admin.environments.supports.edit')
                                        <button type="button" wire:click="editar({{ $contrato->id }})"
                                                class="rounded border border-gray-200 px-3 py-1 text-xs font-medium text-gray-700 hover:bg-gray-50">
                                            Editar
                                        </button>
                                    @endcan
                                    @can('admin.environments.supports.destroy')
                                        <button type="button" wire:click="pedirBaja({{ $contrato->id }})"
                                                class="rounded border border-gray-200 px-3 py-1 text-xs font-medium text-gray-700 hover:border-red-300 hover:text-red-700">
                                            Quitar
                                        </button>
                                    @endcan
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>
