<div>
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Gestione Zone</h1>
    </div>

    {{-- Add new --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4 max-w-lg">
        <form wire:submit="addZona" class="flex items-end gap-3">
            <div class="flex-1">
                <label for="nuovaZona" class="block text-sm font-medium text-gray-700">Nuova Zona</label>
                <input wire:model="nuovaZona" type="text" id="nuovaZona" placeholder="Nome zona..." class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                @error('nuovaZona') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition">Aggiungi</button>
        </form>
    </div>

    {{-- List --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden max-w-lg">
        <ul class="divide-y divide-gray-200">
            @forelse($zone as $zona)
            <li class="px-4 py-3 flex items-center justify-between hover:bg-gray-50">
                @if($editingId === $zona->id)
                <form wire:submit="saveEdit" class="flex items-center gap-2 flex-1">
                    <input wire:model="editingNome" type="text" class="flex-1 rounded-lg border-gray-300 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <button type="submit" class="text-green-600 hover:text-green-800 text-xs font-medium">Salva</button>
                    <button type="button" wire:click="cancelEdit" class="text-gray-500 hover:text-gray-700 text-xs">Annulla</button>
                </form>
                @else
                <div class="flex items-center gap-2">
                    <span class="text-sm font-medium {{ $zona->attivo ? 'text-gray-900' : 'text-gray-400 line-through' }}">{{ $zona->nome }}</span>
                    @if(!$zona->attivo)
                        <span class="text-xs text-gray-400">(inattiva)</span>
                    @endif
                    <span class="text-xs text-gray-400">{{ $zona->territori()->count() }} territori</span>
                </div>
                <div class="flex items-center gap-2">
                    <button wire:click="startEdit({{ $zona->id }})" class="text-yellow-600 hover:text-yellow-800 text-xs">Rinomina</button>
                    <button wire:click="toggleActive({{ $zona->id }})" class="text-xs {{ $zona->attivo ? 'text-gray-500' : 'text-green-600' }}">{{ $zona->attivo ? 'Disattiva' : 'Attiva' }}</button>
                    <button wire:click="deleteZona({{ $zona->id }})" wire:confirm="Eliminare la zona '{{ $zona->nome }}'?" class="text-red-500 hover:text-red-700 text-xs">Elimina</button>
                </div>
                @endif
            </li>
            @empty
            <li class="px-4 py-6 text-center text-gray-500 text-sm">Nessuna zona configurata.</li>
            @endforelse
        </ul>
    </div>
</div>
