@extends('admin.layouts.netgescon')

@section('page-title', 'Hub Fornitori')

@section('breadcrumb')
    <span>Gestione Economica</span>
    <i class="fas fa-chevron-right text-xs"></i>
    <span>Fornitori</span>
@endsection

@section('content')
@php
    $toneMap = [
        'indigo' => ['ring' => 'border-indigo-100', 'bg' => 'bg-indigo-50', 'icon' => 'text-indigo-500', 'chip' => 'bg-indigo-100 text-indigo-700'],
        'sky' => ['ring' => 'border-sky-100', 'bg' => 'bg-sky-50', 'icon' => 'text-sky-500', 'chip' => 'bg-sky-100 text-sky-700'],
        'emerald' => ['ring' => 'border-emerald-100', 'bg' => 'bg-emerald-50', 'icon' => 'text-emerald-500', 'chip' => 'bg-emerald-100 text-emerald-700'],
        'amber' => ['ring' => 'border-amber-100', 'bg' => 'bg-amber-50', 'icon' => 'text-amber-500', 'chip' => 'bg-amber-100 text-amber-700'],
    ];

    $searchValue = $filters['search'] ?? '';
@endphp

<div class="space-y-8 netgescon-fade-in">
    <!-- Hero -->
    <div class="netgescon-card bg-gradient-to-br from-slate-900 via-slate-800 to-blue-900 text-white relative overflow-hidden">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
            <div class="max-w-2xl">
                <p class="uppercase text-xs tracking-[0.3em] text-white/60">Network operativo</p>
                <h1 class="text-3xl font-semibold mt-2 flex items-center gap-3">
                    <i class="fas fa-handshake-angle text-white/80"></i>
                    Hub Fornitori
                </h1>
                <p class="text-white/70 mt-3 leading-relaxed">
                    Monitora i fornitori tecnici, la copertura territoriale e lo stato dei contatti
                    per Ticket Planner e Rubrica Unica. Questa console eredita i dati legacy e
                    introduce il nuovo layout NetGescon.
                </p>
                <div class="mt-4 flex flex-wrap gap-3">
                    <a href="{{ route('admin.fornitori.create') }}" class="netgescon-btn netgescon-btn-primary bg-white text-slate-900 border-white">
                        <i class="fas fa-plus"></i>
                        Nuovo fornitore
                    </a>
                    <a href="{{ route('admin.rubrica.index') }}" class="netgescon-btn netgescon-btn-outline-primary text-white border-white/60 hover:bg-white/10">
                        <i class="fas fa-address-book"></i>
                        Apri Rubrica Unica
                    </a>
                </div>
            </div>
            <div class="bg-white/10 rounded-2xl p-4 w-full lg:w-auto">
                <form method="GET" action="{{ route('admin.fornitori.index') }}" class="space-y-3">
                    <label class="block text-sm text-white/70">Ricerca rapida</label>
                    <div class="flex gap-2">
                        <input type="text" name="search" value="{{ $searchValue }}" placeholder="Cerca per nome, P.IVA, email..."
                               class="flex-1 rounded-lg border border-white/30 bg-white/20 text-white placeholder-white/60 focus:border-white focus:ring-white">
                        <button class="netgescon-btn netgescon-btn-outline-primary bg-white/20 border-white/40 text-white">
                            <i class="fas fa-search"></i>
                            Cerca
                        </button>
                    </div>
                    @if($searchValue)
                        <a href="{{ route('admin.fornitori.index') }}" class="text-xs text-white/70 hover:text-white">Reset filtri</a>
                    @endif
                </form>
            </div>
        </div>
        <div class="absolute -right-10 -bottom-14 w-64 h-64 bg-white/5 rounded-full blur-3xl"></div>
    </div>

    <!-- Metriche principali -->
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
        @foreach($metrics as $metric)
            @php($tone = $toneMap[$metric['tone']] ?? $toneMap['indigo'])
            <div class="netgescon-card border {{ $tone['ring'] }}">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-sm text-gray-500">{{ $metric['label'] }}</p>
                        <p class="text-3xl font-bold text-gray-900 mt-1">{{ $metric['value'] }}</p>
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold mt-3 {{ $tone['chip'] }}">
                            <i class="fas fa-arrow-trend-up mr-1 text-xs"></i>
                            {{ $metric['chip'] }}
                        </span>
                    </div>
                    <div class="p-3 rounded-full bg-white shadow-inner">
                        <i class="fas {{ $metric['icon'] }} text-xl {{ $tone['icon'] }}"></i>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <!-- Copertura territoriale -->
        <div class="netgescon-card xl:col-span-2">
            <div class="netgescon-card-header flex items-center justify-between">
                <div>
                    <h3 class="netgescon-card-title">Copertura & Network</h3>
                    <p class="text-sm text-gray-500">Panoramica delle città con più fornitori e stato canali</p>
                </div>
                <span class="netgescon-badge netgescon-badge-info text-xs">
                    Email {{ $coverage['emailCoverage'] ?? 0 }}% • PEC {{ $coverage['pecCoverage'] ?? 0 }}%
                </span>
            </div>
            <div class="netgescon-card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <p class="text-xs uppercase tracking-wide text-slate-500 mb-2">Top città</p>
                        <div class="space-y-3">
                            @forelse($coverage['cities'] as $city)
                                <div class="flex items-center justify-between p-3 bg-slate-50 rounded-xl">
                                    <div>
                                        <p class="font-semibold text-gray-900">{{ $city->citta }}</p>
                                        <p class="text-xs text-gray-500">Fornitori registrati</p>
                                    </div>
                                    <span class="text-lg font-semibold text-blue-600">{{ $city->total }}</span>
                                </div>
                            @empty
                                <p class="text-sm text-gray-500">Ancora nessuna città con abbastanza dati.</p>
                            @endforelse
                        </div>
                    </div>
                    <div>
                        <p class="text-xs uppercase tracking-wide text-slate-500 mb-2">Azioni consigliate</p>
                        <div class="space-y-3">
                            <div class="p-4 border border-dashed border-blue-200 rounded-2xl bg-blue-50">
                                <p class="font-semibold text-blue-900">Completa contatti PEC</p>
                                <p class="text-sm text-blue-700">Mantieni aggiornati i dati per l'invio automatico documenti.</p>
                                <a href="{{ route('admin.fornitori.create') }}" class="text-xs text-blue-900 font-semibold inline-flex items-center mt-2">
                                    Aggiorna anagrafiche <i class="fas fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                            <div class="p-4 border border-dashed border-emerald-200 rounded-2xl bg-emerald-50">
                                <p class="font-semibold text-emerald-900">Sincronizza con Ticket Planner</p>
                                <p class="text-sm text-emerald-700">Abbina i fornitori alle squadre operative per i ticket aperti.</p>
                                <a href="{{ route('admin.tickets.index') }}#planner" class="text-xs text-emerald-900 font-semibold inline-flex items-center mt-2">
                                    Apri planner <i class="fas fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Aggiornamenti recenti -->
        <div class="netgescon-card">
            <div class="netgescon-card-header">
                <h3 class="netgescon-card-title">Ultimi aggiornamenti</h3>
                <p class="text-sm text-gray-500">Ultimi fornitori modificati o inseriti</p>
            </div>
            <div class="netgescon-card-body space-y-4">
                @forelse($recentHighlights as $highlight)
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="font-semibold text-gray-900">{{ $highlight['name'] }}</p>
                            <p class="text-xs text-gray-500 flex items-center gap-1">
                                <i class="fas fa-location-dot"></i>
                                {{ $highlight['city'] ?? 'Località n/d' }}
                            </p>
                            <div class="text-xs text-gray-500 flex flex-wrap gap-3 mt-2">
                                @if($highlight['phone'])
                                    <span><i class="fas fa-phone mr-1"></i>{{ $highlight['phone'] }}</span>
                                @endif
                                @if($highlight['email'])
                                    <span><i class="fas fa-envelope mr-1"></i>{{ $highlight['email'] }}</span>
                                @endif
                            </div>
                        </div>
                        <span class="text-xs text-gray-400">{{ optional($highlight['updated_at'])->diffForHumans() }}</span>
                    </div>
                @empty
                    <div class="text-center py-6 text-gray-500">
                        <i class="fas fa-clock text-3xl mb-2"></i>
                        <p>Nessun aggiornamento recente.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Tabella fornitori -->
    <div class="netgescon-card">
        <div class="netgescon-card-header flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h3 class="netgescon-card-title">Elenco Fornitori</h3>
                <p class="text-sm text-gray-500">{{ $fornitori->total() }} record totali @if($searchValue) · filtro "{{ $searchValue }}" @endif</p>
            </div>
            <div class="flex flex-wrap gap-2 text-xs text-gray-500">
                <span class="netgescon-badge netgescon-badge-secondary">
                    <i class="fas fa-envelope mr-1"></i>
                    Email {{ $coverage['emailCoverage'] ?? 0 }}%
                </span>
                <span class="netgescon-badge netgescon-badge-secondary">
                    <i class="fas fa-shield-check mr-1"></i>
                    PEC {{ $coverage['pecCoverage'] ?? 0 }}%
                </span>
            </div>
        </div>
        <div class="netgescon-card-body overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Anagrafica</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">CF / P.IVA</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Sede</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Contatti</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Azioni</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-100">
                    @forelse($fornitori as $fornitore)
                        <tr class="hover:bg-slate-50">
                            <td class="px-4 py-3">
                                <p class="font-semibold text-gray-900">{{ $fornitore->ragione_sociale ?? trim($fornitore->nome . ' ' . $fornitore->cognome) }}</p>
                                <p class="text-xs text-gray-500">Codice {{ $fornitore->codice_univoco ?? 'n/d' }}</p>
                            </td>
                            <td class="px-4 py-3">
                                @if($fornitore->partita_iva)
                                    <span class="netgescon-badge netgescon-badge-secondary">P.IVA {{ $fornitore->partita_iva }}</span>
                                @elseif($fornitore->codice_fiscale)
                                    <span class="netgescon-badge netgescon-badge-secondary">CF {{ $fornitore->codice_fiscale }}</span>
                                @else
                                    <span class="text-gray-400 text-sm">Dato mancante</span>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                <p class="text-sm text-gray-900">{{ $fornitore->citta ?? '—' }} @if($fornitore->provincia) ({{ $fornitore->provincia }}) @endif</p>
                                <p class="text-xs text-gray-500">{{ $fornitore->indirizzo_completo ?? $fornitore->indirizzoCompleto ?? '' }}</p>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-700">
                                <div class="flex flex-col gap-1">
                                    @if($fornitore->telefono)
                                        <span><i class="fas fa-phone text-gray-400 mr-2"></i>{{ $fornitore->telefono }}</span>
                                    @endif
                                    @if($fornitore->email)
                                        <span><i class="fas fa-envelope text-gray-400 mr-2"></i>{{ $fornitore->email }}</span>
                                    @endif
                                    @unless($fornitore->telefono || $fornitore->email)
                                        <span class="text-xs text-gray-400">Nessun contatto disponibile</span>
                                    @endunless
                                </div>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <div class="inline-flex gap-2">
                                    <a href="{{ route('admin.fornitori.show', $fornitore) }}" class="netgescon-btn netgescon-btn-outline-primary netgescon-btn-sm">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('admin.fornitori.edit', $fornitore) }}" class="netgescon-btn netgescon-btn-outline-secondary netgescon-btn-sm">
                                        <i class="fas fa-pen"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-12 text-center text-gray-500">
                                <i class="fas fa-people-carry text-4xl mb-3"></i>
                                <p>
                                    Nessun fornitore trovato
                                    @if($searchValue)
                                        con il filtro "{{ $searchValue }}".
                                    @endif
                                </p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($fornitori->hasPages())
            <div class="netgescon-card-footer">
                {{ $fornitori->links() }}
            </div>
        @endif
    </div>
</div>
@endsection