@php
    $hasFornitoriUi = method_exists($this, 'apriElenco')
        && method_exists($this, 'apriScheda')
        && method_exists($this, 'getFornitoreLabel');
@endphp

@if(! $hasFornitoriUi)
    <x-filament-panels::page>
        {{ $this->table }}
    </x-filament-panels::page>
@else
<x-filament-panels::page>
    <div class="space-y-4" wire:key="fornitori-archivio-shell">
        <div class="rounded-xl border bg-white p-4">
            <div class="mb-3 flex flex-wrap gap-2">
                <button
                    type="button"
                    wire:click="apriElenco"
                    class="inline-flex items-center rounded-md px-3 py-1.5 text-xs font-medium {{ $this->activeTab === 'elenco' ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}"
                >
                    Tab 1: Elenco Fornitori
                </button>
                <button
                    type="button"
                    wire:click="apriTabScheda"
                    class="inline-flex items-center rounded-md px-3 py-1.5 text-xs font-medium {{ $this->activeTab === 'scheda' ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}"
                >
                    Tab 2: Scheda Fornitore (inline)
                </button>
                <button
                    type="button"
                    wire:click="apriTabDipendenti"
                    class="inline-flex items-center rounded-md px-3 py-1.5 text-xs font-medium {{ $this->activeTab === 'dipendenti' ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}"
                >
                    Tab 3: Dipendenti Fornitore
                </button>
            </div>

            <div class="grid grid-cols-1 gap-3 md:grid-cols-3">
                <div>
                    <div class="text-sm font-semibold">Archivio Fornitori</div>
                    <div class="mt-1 text-xs text-gray-500">Vista operativa in stile ticket-gestione. Cerca rapidamente e apri HUB/scheda inline.</div>
                </div>
                <div class="rounded-lg border bg-gray-50 px-3 py-2 text-xs md:col-span-2">
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <div>Totale fornitori importati: <span class="font-semibold">{{ (int) ($fornitoriCount ?? 0) }}</span></div>
                        <div class="flex flex-wrap gap-2">
                            <button type="button" wire:click="importaTagLegacy(false, true)" class="inline-flex items-center rounded-md bg-slate-100 px-3 py-1.5 text-[11px] font-medium text-slate-700 hover:bg-slate-200">Anteprima tag legacy</button>
                            <button type="button" wire:click="importaTagLegacy(false, false)" class="inline-flex items-center rounded-md bg-emerald-700 px-3 py-1.5 text-[11px] font-medium text-white hover:bg-emerald-600">Riallinea archivio legacy</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-3">
                <label class="block text-xs font-medium text-gray-700">Ricerca fornitore</label>
                <div class="mt-1">
                    <div class="flex w-full flex-col gap-2 md:w-[760px] md:flex-row md:items-center">
                        <input
                            type="text"
                            wire:model.defer="searchInput"
                            wire:keydown.enter="applicaRicerca"
                            placeholder="Ragione sociale, nome, P.IVA, CF, email, telefono, TAG"
                            class="w-full rounded-lg border-gray-300 text-sm"
                        >
                        <div class="flex items-center gap-2">
                            <button
                                type="button"
                                wire:click="applicaRicerca"
                                class="inline-flex items-center rounded-md bg-slate-700 px-3 py-2 text-xs font-medium text-white hover:bg-slate-600"
                            >
                                Cerca
                            </button>
                            @if(trim((string) ($this->fornitoriSearch ?? '')) !== '')
                                <button
                                    type="button"
                                    wire:click="pulisciRicerca"
                                    class="inline-flex items-center rounded-md bg-slate-100 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-200"
                                    title="Cancella ricerca"
                                    aria-label="Cancella ricerca"
                                >
                                    Pulisci
                                </button>
                            @endif
                        </div>
                    </div>

                    @if(count($this->activeSearchFilters) > 0)
                        <div class="mt-2 flex flex-wrap gap-2">
                            @foreach($this->activeSearchFilters as $token)
                                <span class="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-[11px] text-slate-700">
                                    {{ $token }}
                                    <button
                                        type="button"
                                        wire:click="removeSearchFilter({{ \Illuminate\Support\Js::from($token) }})"
                                        class="inline-flex h-4 w-4 items-center justify-center rounded-full text-slate-500 hover:bg-slate-200 hover:text-slate-800"
                                        title="Rimuovi filtro"
                                        aria-label="Rimuovi filtro"
                                    >
                                        <span class="leading-none">X</span>
                                    </button>
                                </span>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>

        @if($this->activeTab === 'elenco')
            <div class="rounded-xl border bg-white p-4">
                <div class="overflow-x-auto">
                    <table class="min-w-full border-collapse border text-xs">
                        <thead>
                            <tr class="bg-slate-100 text-slate-700">
                                <th class="border px-2 py-2 text-left">Fornitore</th>
                                <th class="border px-2 py-2 text-left">Contatti</th>
                                <th class="border px-2 py-2 text-left">Documento</th>
                                <th class="border px-2 py-2 text-left">TAG / Team</th>
                                <th class="border px-2 py-2 text-left">Rubrica</th>
                                <th class="border px-2 py-2 text-left">Azioni</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($this->fornitoriRows as $f)
                                <tr class="hover:bg-slate-50" wire:key="fornitore-row-{{ (int) $f->id }}">
                                    <td class="border px-2 py-2">
                                        <div class="font-medium">{{ $this->getFornitoreLabel($f) }}</div>
                                        <div class="text-[11px] text-gray-500">#{{ (int) $f->id }}</div>
                                    </td>
                                    <td class="border px-2 py-2">
                                        <div>{{ $f->email ?: '-' }}</div>
                                        <div class="text-gray-500">{{ $f->telefono ?: ($f->cellulare ?: '-') }}</div>
                                    </td>
                                    <td class="border px-2 py-2">
                                        <div>P.IVA: {{ $f->partita_iva ?: '-' }}</div>
                                        <div class="text-gray-500">CF: {{ $f->codice_fiscale ?: '-' }}</div>
                                    </td>
                                    <td class="border px-2 py-2">
                                        <div>{{ $f->tags ?: '-' }}</div>
                                        <div class="text-gray-500">Dipendenti: {{ (int) ($f->dipendenti_count ?? 0) }}</div>
                                    </td>
                                    <td class="border px-2 py-2">
                                        @if((int) ($f->rubrica_id ?? 0) > 0)
                                            <span class="inline-flex items-center rounded-md bg-emerald-100 px-2 py-1 text-[11px] font-medium text-emerald-800">Collegata</span>
                                        @else
                                            <span class="inline-flex items-center rounded-md bg-amber-100 px-2 py-1 text-[11px] font-medium text-amber-800">Da collegare</span>
                                        @endif
                                    </td>
                                    <td class="border px-2 py-2">
                                        <div class="flex flex-wrap gap-1">
                                            <button type="button" wire:click.prevent="apriScheda({{ (int) $f->id }})" class="inline-flex items-center rounded-md bg-slate-700 px-2 py-1 text-[11px] font-medium text-white hover:bg-slate-600">Apri scheda inline</button>
                                            <a href="{{ $this->getFornitoreHubUrl((int) $f->id) }}" class="inline-flex items-center rounded-md bg-indigo-700 px-2 py-1 text-[11px] font-medium text-white hover:bg-indigo-600">Apri HUB</a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="border px-2 py-4 text-center text-gray-500">Nessun fornitore trovato con i filtri correnti.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="mt-2 text-[11px] text-gray-500">Mostrati max 400 record per mantenere la pagina rapida.</div>
            </div>
        @elseif($this->activeTab === 'scheda')
            @php($fornitore = $this->selectedFornitore)
            <div id="fornitore-scheda-panel" class="rounded-xl border bg-white p-4">
                @if($fornitore)
                    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
                        <div>
                            <div class="text-sm font-semibold">Scheda fornitore inline: {{ $this->getFornitoreLabel($fornitore) }}</div>
                            <div class="text-xs text-gray-500">ID #{{ (int) $fornitore->id }} · Dipendenti collegati: {{ (int) ($fornitore->dipendenti_count ?? 0) }}</div>
                        </div>
                        <div class="flex flex-wrap items-center gap-2">
                            <button type="button" wire:click="apriElenco" class="inline-flex items-center rounded-md bg-slate-100 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-200">Torna a elenco</button>
                            <button type="button" wire:click="apriTabDipendenti" class="inline-flex items-center rounded-md bg-slate-100 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-200">Tab 3: Dipendenti fornitore</button>
                            <button type="button" wire:click="importaTagLegacy(true, false)" class="inline-flex items-center rounded-md bg-emerald-700 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-600">Riallinea tag legacy</button>
                            <button type="button" wire:click="apriNuovoFornitore" class="inline-flex items-center rounded-md bg-emerald-700 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-600">Nuovo fornitore</button>
                            <a href="{{ $this->getFornitoreAnagraficaUrl((int) $fornitore->id) }}" class="inline-flex items-center rounded-md bg-slate-100 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-200">Apri vecchia scheda (immutata)</a>
                        </div>
                    </div>

                    <div id="fornitore-inline-form" class="mb-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
                        <div class="rounded-lg border p-3 text-xs">
                            <div class="mb-2 text-xs font-semibold text-gray-700">Anagrafica fornitore</div>
                            <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
                                <div class="md:col-span-2">
                                    <label class="mb-1 block font-medium text-gray-700">Codice univoco</label>
                                    <input type="text" value="{{ $fornitore->codice_univoco ?: '-' }}" readonly class="w-full rounded-md border-gray-300 bg-gray-50 text-xs text-gray-600">
                                </div>
                                <div>
                                    <label class="mb-1 block font-medium text-gray-700">Titolo</label>
                                    <input type="text" wire:model.defer="editTitolo" class="w-full rounded-md border-gray-300 text-xs" placeholder="Egr.">
                                </div>
                                <div>
                                    <label class="mb-1 block font-medium text-gray-700">Ragione sociale</label>
                                    <input type="text" wire:model.defer="editRagioneSociale" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block font-medium text-gray-700">Nome</label>
                                    <input type="text" wire:model.defer="editNome" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block font-medium text-gray-700">Cognome</label>
                                    <input type="text" wire:model.defer="editCognome" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block font-medium text-gray-700">P.IVA</label>
                                    <input type="text" wire:model.defer="editPartitaIva" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block font-medium text-gray-700">Codice fiscale</label>
                                    <input type="text" wire:model.defer="editCodiceFiscale" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div class="md:col-span-2">
                                    <label class="mb-1 block font-medium text-gray-700">Sito web</label>
                                    <input type="text" wire:model.defer="editSitoWeb" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div class="md:col-span-2">
                                    <label class="mb-1 block font-medium text-gray-700">Tag</label>
                                    <input type="text" wire:model.defer="editTags" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div class="md:col-span-2">
                                    <label class="mb-1 block font-medium text-gray-700">Note</label>
                                    <textarea wire:model.defer="editNote" rows="3" class="w-full rounded-md border-gray-300 text-xs"></textarea>
                                </div>
                                <div class="md:col-span-2 text-gray-500">Indirizzo: {{ $fornitore->indirizzo_completo ?: '-' }}</div>
                            </div>
                            <button type="button" wire:click="saveSchedaAnagrafica" class="mt-3 inline-flex items-center rounded-md bg-emerald-700 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-600">Salva anagrafica</button>
                        </div>

                        <div class="rounded-lg border p-3 text-xs">
                            <div class="mb-2 text-xs font-semibold text-gray-700">Contatti e pagamenti</div>
                            <div class="grid grid-cols-1 gap-2">
                                <div>
                                    <label class="mb-1 block font-medium text-gray-700">Email fornitore</label>
                                    <input type="email" wire:model.defer="editEmail" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block font-medium text-gray-700">PEC fornitore</label>
                                    <input type="email" wire:model.defer="editPec" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block font-medium text-gray-700">Telefono</label>
                                    <input type="text" wire:model.defer="editTelefono" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block font-medium text-gray-700">Cellulare</label>
                                    <input type="text" wire:model.defer="editCellulare" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div><span class="font-medium">IBAN:</span> {{ $fornitore->iban ?: '-' }}</div>
                                <div><span class="font-medium">BIC:</span> {{ $fornitore->bic ?: '-' }}</div>
                                <div><span class="font-medium">Intestazione conto:</span> {{ $fornitore->intestazione_cc_esatta ?: '-' }}</div>
                                <div><span class="font-medium">Modalita pagamento:</span> {{ $fornitore->modalita_pagamento_predefinita ?: '-' }}</div>
                            </div>
                            <button type="button" wire:click="saveSchedaAnagrafica" class="mt-3 inline-flex items-center rounded-md bg-emerald-700 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-600">Salva contatti</button>

                            <div class="mt-3 border-t pt-3">
                                <div class="mb-1 text-xs font-semibold text-gray-700">Contatti rubrica collegata</div>
                                @if($fornitore->rubrica)
                                    <div class="grid grid-cols-1 gap-1">
                                        <div><span class="font-medium">Codice rubrica:</span> {{ $fornitore->rubrica->codice_univoco ?: '-' }}</div>
                                        <div><span class="font-medium">Email rubrica:</span> {{ $fornitore->rubrica->email ?: '-' }}</div>
                                        <div><span class="font-medium">PEC rubrica:</span> {{ $fornitore->rubrica->pec ?: '-' }}</div>
                                        <div><span class="font-medium">Tel. ufficio:</span> {{ $fornitore->rubrica->telefono_ufficio ?: '-' }}</div>
                                        <div><span class="font-medium">Tel. cellulare:</span> {{ $fornitore->rubrica->telefono_cellulare ?: '-' }}</div>
                                    </div>
                                @else
                                    <div class="text-gray-500">Nessuna rubrica collegata.</div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
                        <div class="rounded-lg border p-3">
                            <div class="mb-2 text-xs font-semibold text-gray-700">Automazioni</div>
                            <div class="space-y-3 text-xs">
                                <div>
                                    <div class="font-medium text-gray-700">Fornitore acqua</div>
                                    <label class="mr-3 inline-flex items-center gap-1">
                                        <input type="radio" wire:model.defer="automazioni.fornitore_acqua" value="1"> Attivo
                                    </label>
                                    <label class="inline-flex items-center gap-1">
                                        <input type="radio" wire:model.defer="automazioni.fornitore_acqua" value="0"> Disattivo
                                    </label>
                                </div>
                                <div>
                                    <div class="font-medium text-gray-700">Ticket fornitore</div>
                                    <label class="mr-3 inline-flex items-center gap-1">
                                        <input type="radio" wire:model.defer="automazioni.abilita_ticket" value="1"> Attivo
                                    </label>
                                    <label class="inline-flex items-center gap-1">
                                        <input type="radio" wire:model.defer="automazioni.abilita_ticket" value="0"> Disattivo
                                    </label>
                                </div>
                                <div>
                                    <div class="font-medium text-gray-700">Allegati e camera webapp</div>
                                    <label class="mr-3 inline-flex items-center gap-1">
                                        <input type="radio" wire:model.defer="automazioni.abilita_allegati_camera" value="1"> Attivo
                                    </label>
                                    <label class="inline-flex items-center gap-1">
                                        <input type="radio" wire:model.defer="automazioni.abilita_allegati_camera" value="0"> Disattivo
                                    </label>
                                </div>
                            </div>
                            <button type="button" wire:click="saveSchedaAutomazioni" class="mt-3 inline-flex items-center rounded-md bg-emerald-700 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-600">Salva automazioni</button>
                        </div>

                        <div class="rounded-lg border p-3">
                            <div class="mb-2 text-xs font-semibold text-gray-700">Coordinate bancarie</div>
                            <div class="space-y-3 text-xs">
                                <div>
                                    <label class="mb-1 block font-medium text-gray-700">IBAN</label>
                                    <input type="text" wire:model.defer="contoIban" class="w-full rounded-md border-gray-300 text-xs" placeholder="IT00A0000000000000000000000">
                                </div>
                                <div>
                                    <label class="mb-1 block font-medium text-gray-700">Intestazione conto esatta</label>
                                    <input type="text" wire:model.defer="contoIntestazioneEsatta" class="w-full rounded-md border-gray-300 text-xs" placeholder="Nome intestatario esatto da legacy">
                                </div>
                            </div>
                            <button type="button" wire:click="saveSchedaBancaria" class="mt-3 inline-flex items-center rounded-md bg-blue-700 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-600">Salva conto</button>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
                        <div class="rounded-lg border p-3">
                            <div class="mb-2 text-xs font-semibold text-gray-700">Aggiungi dipendente rapido (stessa scheda)</div>
                            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                                <div>
                                    <label class="mb-1 block text-xs font-medium text-gray-700">Nome *</label>
                                    <input type="text" wire:model.defer="newDipendenteNome" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block text-xs font-medium text-gray-700">Cognome</label>
                                    <input type="text" wire:model.defer="newDipendenteCognome" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block text-xs font-medium text-gray-700">Email</label>
                                    <input type="email" wire:model.defer="newDipendenteEmail" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block text-xs font-medium text-gray-700">Telefono</label>
                                    <input type="text" wire:model.defer="newDipendenteTelefono" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                            </div>
                            <button type="button" wire:click="addDipendenteManuale" class="mt-3 inline-flex items-center rounded-md bg-slate-700 px-3 py-1.5 text-xs font-medium text-white hover:bg-slate-600">Aggiungi dipendente</button>
                        </div>

                        <div class="rounded-lg border p-3">
                            <div class="mb-2 text-xs font-semibold text-gray-700">Dipendenti collegati</div>
                            <div class="max-h-[260px] overflow-auto">
                                <table class="min-w-full border-collapse border text-xs">
                                    <thead>
                                        <tr class="bg-slate-100 text-slate-700">
                                            <th class="border px-2 py-2 text-left">Nominativo</th>
                                            <th class="border px-2 py-2 text-left">Contatti</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($this->dipendentiRows as $d)
                                            <tr>
                                                <td class="border px-2 py-2">{{ trim(($d->nome ?? '') . ' ' . ($d->cognome ?? '')) ?: '-' }}</td>
                                                <td class="border px-2 py-2">{{ $d->email ?: '-' }}<div class="text-gray-500">{{ $d->telefono ?: '-' }}</div></td>
                                            </tr>
                                        @empty
                                            <tr><td colspan="2" class="border px-2 py-3 text-center text-gray-500">Nessun dipendente collegato.</td></tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
                        <div class="rounded-lg border border-amber-200 bg-amber-50 p-4 text-xs text-amber-800">
                            <div>Seleziona prima un fornitore dalla Tab 1 e usa il pulsante "Apri scheda inline".</div>
                            <div class="mt-2">
                                <button type="button" wire:click="apriElenco" class="inline-flex items-center rounded-md bg-amber-100 px-3 py-1.5 text-xs font-medium text-amber-800 hover:bg-amber-200">Torna a Tab 1</button>
                            </div>
                        </div>

                        <div class="rounded-lg border p-4">
                            <div class="mb-2 text-xs font-semibold text-gray-700">Nuovo fornitore rapido</div>
                            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                                <div>
                                    <label class="mb-1 block text-xs font-medium text-gray-700">Ragione sociale</label>
                                    <input type="text" wire:model.defer="newFornitoreRagioneSociale" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block text-xs font-medium text-gray-700">Email</label>
                                    <input type="email" wire:model.defer="newFornitoreEmail" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block text-xs font-medium text-gray-700">Nome</label>
                                    <input type="text" wire:model.defer="newFornitoreNome" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block text-xs font-medium text-gray-700">Cognome</label>
                                    <input type="text" wire:model.defer="newFornitoreCognome" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block text-xs font-medium text-gray-700">Telefono</label>
                                    <input type="text" wire:model.defer="newFornitoreTelefono" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block text-xs font-medium text-gray-700">P.IVA</label>
                                    <input type="text" wire:model.defer="newFornitorePartitaIva" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                                <div>
                                    <label class="mb-1 block text-xs font-medium text-gray-700">Codice fiscale</label>
                                    <input type="text" wire:model.defer="newFornitoreCodiceFiscale" class="w-full rounded-md border-gray-300 text-xs">
                                </div>
                            </div>
                            <div class="mt-3 flex flex-wrap gap-2">
                                <button type="button" wire:click="createFornitoreRapido" class="inline-flex items-center rounded-md bg-slate-700 px-3 py-1.5 text-xs font-medium text-white hover:bg-slate-600">Crea fornitore</button>
                                <button type="button" wire:click="apriElenco" class="inline-flex items-center rounded-md bg-slate-100 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-200">Annulla</button>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        @else
            @php($fornitore = $this->selectedFornitore)
            <div class="rounded-xl border bg-white p-4">
                @if($fornitore)
                    <div class="mb-4 flex flex-wrap items-center justify-between gap-2">
                        <div>
                            <div class="text-sm font-semibold">Dipendenti collegati: {{ $this->getFornitoreLabel($fornitore) }}</div>
                            <div class="text-xs text-gray-500">Nominativi rubrica agganciati al fornitore (modello come stabile -> condomini/inquilini).</div>
                        </div>
                        <button type="button" wire:click="apriElenco" class="inline-flex items-center rounded-md bg-slate-100 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-200">Torna a elenco</button>
                    </div>

                    <div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
                        <div class="rounded-lg border p-3">
                            <div class="mb-2 text-xs font-semibold text-gray-700">Dipendenti gia collegati</div>
                            <div class="overflow-x-auto">
                                <table class="min-w-full border-collapse border text-xs">
                                    <thead>
                                        <tr class="bg-slate-100 text-slate-700">
                                            <th class="border px-2 py-2 text-left">Nominativo</th>
                                            <th class="border px-2 py-2 text-left">Contatti</th>
                                            <th class="border px-2 py-2 text-left">Stato</th>
                                            <th class="border px-2 py-2 text-left">Azione</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($this->dipendentiRows as $d)
                                            <tr>
                                                <td class="border px-2 py-2">
                                                    <div class="text-[11px] text-gray-500">#{{ (int) $d->id }}</div>
                                                    <div class="mt-1 grid grid-cols-1 gap-2 md:grid-cols-2">
                                                        <input type="text" wire:model.defer="dipendenteInline.{{ (int) $d->id }}.nome" class="w-full rounded-md border-gray-300 text-xs" placeholder="Nome">
                                                        <input type="text" wire:model.defer="dipendenteInline.{{ (int) $d->id }}.cognome" class="w-full rounded-md border-gray-300 text-xs" placeholder="Cognome">
                                                    </div>
                                                </td>
                                                <td class="border px-2 py-2">
                                                    <div class="grid grid-cols-1 gap-2">
                                                        <input type="email" wire:model.defer="dipendenteInline.{{ (int) $d->id }}.email" class="w-full rounded-md border-gray-300 text-xs" placeholder="Email">
                                                        <input type="text" wire:model.defer="dipendenteInline.{{ (int) $d->id }}.telefono" class="w-full rounded-md border-gray-300 text-xs" placeholder="Telefono">
                                                    </div>
                                                </td>
                                                <td class="border px-2 py-2">
                                                    <label class="inline-flex items-center gap-2">
                                                        <input type="checkbox" wire:model.defer="dipendenteInline.{{ (int) $d->id }}.attivo">
                                                        <span>{{ (bool) ($this->dipendenteInline[(int) $d->id]['attivo'] ?? false) ? 'Attivo' : 'Disattivo' }}</span>
                                                    </label>
                                                </td>
                                                <td class="border px-2 py-2">
                                                    <button type="button" wire:click="saveDipendenteInline({{ (int) $d->id }})" class="inline-flex items-center rounded-md bg-emerald-700 px-2 py-1 text-[11px] font-medium text-white hover:bg-emerald-600">Salva</button>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="4" class="border px-2 py-4 text-center text-gray-500">Nessun dipendente collegato.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="rounded-lg border p-3">
                            <div class="mb-4 rounded-lg border border-dashed p-3">
                                <div class="mb-2 text-xs font-semibold text-gray-700">Nuovo nominativo da collegare al fornitore</div>
                                <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                                    <input type="text" wire:model.defer="newDipendenteNome" class="w-full rounded-md border-gray-300 text-xs" placeholder="Nome *">
                                    <input type="text" wire:model.defer="newDipendenteCognome" class="w-full rounded-md border-gray-300 text-xs" placeholder="Cognome">
                                    <input type="email" wire:model.defer="newDipendenteEmail" class="w-full rounded-md border-gray-300 text-xs" placeholder="Email">
                                    <input type="text" wire:model.defer="newDipendenteTelefono" class="w-full rounded-md border-gray-300 text-xs" placeholder="Telefono">
                                </div>
                                <div class="mt-3 flex flex-wrap gap-2">
                                    <button type="button" wire:click="addDipendenteManuale" class="inline-flex items-center rounded-md bg-slate-700 px-3 py-1.5 text-xs font-medium text-white hover:bg-slate-600">Aggiungi solo dipendente</button>
                                    <button type="button" wire:click="createDipendenteRubricaAndLink" class="inline-flex items-center rounded-md bg-indigo-700 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-600">Crea nominativo in rubrica e collega</button>
                                </div>
                            </div>

                            <div class="mb-2 text-xs font-semibold text-gray-700">Rubrica nominativi da agganciare</div>
                            <div class="mb-3">
                                <input
                                    type="text"
                                    wire:model.live.debounce.300ms="dipendentiRubricaSearch"
                                    placeholder="Cerca in rubrica: nome, cognome, email, telefono, CF"
                                    class="w-full rounded-md border-gray-300 text-xs"
                                >
                            </div>

                            <div class="max-h-[420px] overflow-auto">
                                <table class="min-w-full border-collapse border text-xs">
                                    <thead>
                                        <tr class="bg-slate-100 text-slate-700">
                                            <th class="border px-2 py-2 text-left">Rubrica</th>
                                            <th class="border px-2 py-2 text-left">Contatti</th>
                                            <th class="border px-2 py-2 text-left">Azione</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($this->rubricaDipendentiCandidates as $r)
                                            <tr>
                                                <td class="border px-2 py-2">
                                                    <div class="font-medium">{{ trim(($r->nome ?? '') . ' ' . ($r->cognome ?? '')) ?: ($r->ragione_sociale ?: '-') }}</div>
                                                    <div class="text-[11px] text-gray-500">Rubrica #{{ (int) $r->id }} · CF {{ $r->codice_fiscale ?: '-' }}</div>
                                                </td>
                                                <td class="border px-2 py-2">
                                                    <div>{{ $r->email ?: '-' }}</div>
                                                    <div class="text-gray-500">{{ $r->telefono_cellulare ?: ($r->telefono_ufficio ?: '-') }}</div>
                                                </td>
                                                <td class="border px-2 py-2">
                                                    <button
                                                        type="button"
                                                        wire:click="addDipendenteFromRubrica({{ (int) $r->id }})"
                                                        class="inline-flex items-center rounded-md bg-slate-700 px-2 py-1 text-[11px] font-medium text-white hover:bg-slate-600"
                                                    >
                                                        Aggancia
                                                    </button>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="border px-2 py-4 text-center text-gray-500">Nessun nominativo rubrica trovato con i filtri correnti.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="rounded-lg border border-amber-200 bg-amber-50 p-4 text-xs text-amber-800">
                        <div>Per usare la Tab 3 seleziona prima un fornitore dalla Tab 1.</div>
                        <div class="mt-2">
                            <button type="button" wire:click="apriElenco" class="inline-flex items-center rounded-md bg-amber-100 px-3 py-1.5 text-xs font-medium text-amber-800 hover:bg-amber-200">Torna a Tab 1</button>
                        </div>
                    </div>
                @endif
            </div>
        @endif
    </div>
</x-filament-panels::page>
@endif