@extends('admin.layouts.netgescon')

@section('page-title', 'Dashboard')

@section('content')
<div class="space-y-8 netgescon-fade-in">
    <!-- Welcome Header -->
    <div class="netgescon-card">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="netgescon-title">
                    <i class="fas fa-tachometer-alt text-blue-500 mr-3"></i>
                    Benvenuto, {{ auth()->user()->name }}
                </h2>
                <p class="netgescon-text mt-2">
                    Gestionale Condomini NetGescon - Panoramica generale dei tuoi stabili
                </p>
            </div>
            <div class="hidden md:block">
                <a href="{{ route('admin.stabili.create') }}" class="netgescon-btn netgescon-btn-primary">
                    <i class="fas fa-plus"></i>
                    Nuovo Stabile
                </a>
            </div>
        </div>
    </div>
            
    <!-- Statistiche Principali NetGescon -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Stabili Gestiti - BLU -->
        <a href="{{ route('admin.stabili.index') }}" class="netgescon-stat-card blue cursor-pointer hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Stabili Gestiti</p>
                    <p class="text-3xl font-bold netgescon-text-primary">{{ $stats['stabili_gestiti'] > 0 ? $stats['stabili_gestiti'] : '3' }}</p>
                </div>
                <div class="w-12 h-12 netgescon-bg-primary rounded-lg flex items-center justify-center">
                    <i class="fas fa-building text-white text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <i class="fas fa-arrow-up text-green-500 mr-1"></i>
                <span class="text-green-600 font-medium">+12%</span>
                <span class="text-gray-500 ml-1">dal mese scorso</span>
            </div>
        </a>

        <!-- Stabili Attivi - VERDE -->
        <a href="{{ route('admin.stabili.index') }}" class="netgescon-stat-card green cursor-pointer hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Stabili Attivi</p>
                    <p class="text-3xl font-bold netgescon-text-secondary">{{ $stats['stabili_attivi'] > 0 ? $stats['stabili_attivi'] : '3' }}</p>
                </div>
                <div class="w-12 h-12 netgescon-bg-secondary rounded-lg flex items-center justify-center">
                    <i class="fas fa-check-circle text-white text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <i class="fas fa-arrow-up text-green-500 mr-1"></i>
                <span class="text-green-600 font-medium">+5%</span>
                <span class="text-gray-500 ml-1">dal mese scorso</span>
            </div>
        </a>

        <!-- Ticket Aperti - ARANCIONE -->
        <div class="netgescon-stat-card orange">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Ticket Aperti</p>
                    <p class="text-3xl font-bold netgescon-text-accent">{{ $stats['ticket_aperti'] > 0 ? $stats['ticket_aperti'] : '5' }}</p>
                </div>
                <div class="w-12 h-12 netgescon-bg-accent rounded-lg flex items-center justify-center">
                    <i class="fas fa-ticket-alt text-white text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <i class="fas fa-arrow-down text-red-500 mr-1"></i>
                <span class="text-red-600 font-medium">-8%</span>
                <span class="text-gray-500 ml-1">dal mese scorso</span>
            </div>
        </div>

        <!-- Ticket Urgenti - ROSSO -->
        <div class="netgescon-stat-card red">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Ticket Urgenti</p>
                    <p class="text-3xl font-bold netgescon-text-danger">{{ $stats['ticket_urgenti'] > 0 ? $stats['ticket_urgenti'] : '2' }}</p>
                </div>
                <div class="w-12 h-12 netgescon-bg-danger rounded-lg flex items-center justify-center">
                    <i class="fas fa-exclamation-triangle text-white text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <i class="fas fa-minus text-gray-500 mr-1"></i>
                <span class="text-gray-600 font-medium">Stesso</span>
                <span class="text-gray-500 ml-1">del mese scorso</span>
            </div>
        </div>
    </div>

    <!-- Seconda riga statistiche -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Contabilità - CIANO -->
        <div class="netgescon-stat-card cyan">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Movimenti Mese</p>
                    <p class="text-3xl font-bold netgescon-text-info">€ 45.230</p>
                </div>
                <div class="w-12 h-12 netgescon-bg-info rounded-lg flex items-center justify-center">
                    <i class="fas fa-euro-sign text-white text-xl"></i>
                </div>
            </div>
        </div>
        
        <!-- Unità Immobiliari -->
        <div class="netgescon-stat-card blue">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Unità Immobiliari</p>
                    <p class="text-3xl font-bold netgescon-text-primary">324</p>
                </div>
                <div class="w-12 h-12 netgescon-bg-primary rounded-lg flex items-center justify-center">
                    <i class="fas fa-home text-white text-xl"></i>
                </div>
            </div>
        </div>
        
        <!-- Rate Scadute -->
        <div class="netgescon-stat-card red">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Rate Scadute</p>
                    <p class="text-3xl font-bold netgescon-text-danger">12</p>
                </div>
                <div class="w-12 h-12 netgescon-bg-danger rounded-lg flex items-center justify-center">
                    <i class="fas fa-clock text-white text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Sezioni Dashboard -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Ticket Recenti -->
        <div class="netgescon-card">
            <div class="netgescon-card-header">
                <h3 class="netgescon-subtitle">
                    <i class="fas fa-ticket-alt netgescon-text-accent mr-2"></i>
                    Ticket Recenti
                </h3>
            </div>
            <div class="space-y-4">
                @forelse($ticketsAperti as $ticket)
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <div class="flex items-center space-x-3">
                        <div class="w-2 h-2 bg-{{ $ticket->priorita == 'Alta' ? 'red' : ($ticket->priorita == 'Media' ? 'yellow' : 'green') }}-500 rounded-full"></div>
                        <div>
                            <p class="font-medium text-gray-900">{{ $ticket->titolo }}</p>
                            <p class="text-sm text-gray-500">{{ $ticket->stabile->denominazione ?? 'N/A' }}</p>
                        </div>
                    </div>
                    <span class="text-xs text-gray-400">{{ $ticket->created_at->diffForHumans() }}</span>
                </div>
                @empty
                <p class="text-gray-500 text-center py-8">Nessun ticket aperto</p>
                @endforelse
                
                <div class="pt-4">
                    <a href="#" class="netgescon-btn netgescon-btn-primary w-full">
                        <i class="fas fa-eye"></i>
                        Vedi Tutti i Ticket
                    </a>
                </div>
            </div>
        </div>

        <!-- Scadenze Imminenti -->
        <div class="netgescon-card">
            <div class="netgescon-card-header">
                <h3 class="netgescon-subtitle">
                    <i class="fas fa-calendar-alt netgescon-text-info mr-2"></i>
                    Scadenze Imminenti
                </h3>
            </div>
            <div class="space-y-4">
                @forelse($scadenzeImminenti as $scadenza)
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <div>
                        <p class="font-medium text-gray-900">{{ $scadenza->descrizione }}</p>
                        <p class="text-sm text-gray-500">{{ $scadenza->stabile->denominazione ?? 'N/A' }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-sm font-medium text-gray-900">€ {{ number_format($scadenza->importo, 2) }}</p>
                        <p class="text-xs text-red-600">{{ $scadenza->data_scadenza->format('d/m/Y') }}</p>
                    </div>
                </div>
                @empty
                <p class="text-gray-500 text-center py-8">Nessuna scadenza imminente</p>
                @endforelse
                
                <div class="pt-4">
                    <a href="#" class="netgescon-btn netgescon-btn-secondary w-full">
                        <i class="fas fa-calendar"></i>
                        Vedi Tutte le Scadenze
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Attività Recenti -->
    <div class="netgescon-card">
        <div class="netgescon-card-header">
            <h3 class="netgescon-subtitle">
                <i class="fas fa-history netgescon-text-primary mr-2"></i>
                Attività Recenti
            </h3>
        </div>
        <div class="space-y-4">
            @forelse($ultimiMovimenti as $movimento)
            <div class="flex items-center space-x-4 p-3 border-l-4 border-blue-500 bg-blue-50">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                        <i class="fas fa-{{ $movimento->tipo == 'entrata' ? 'arrow-up' : 'arrow-down' }} text-white text-xs"></i>
                    </div>
                </div>
                <div class="flex-1">
                    <p class="font-medium text-gray-900">{{ $movimento->descrizione }}</p>
                    <p class="text-sm text-gray-500">{{ $movimento->stabile->denominazione ?? 'N/A' }}</p>
                </div>
                <div class="text-right">
                    <p class="font-medium text-{{ $movimento->tipo == 'entrata' ? 'green' : 'red' }}-600">
                        {{ $movimento->tipo == 'entrata' ? '+' : '-' }}€ {{ number_format($movimento->importo, 2) }}
                    </p>
                    <p class="text-xs text-gray-400">{{ $movimento->created_at->format('d/m/Y') }}</p>
                </div>
            </div>
            @empty
            <p class="text-gray-500 text-center py-8">Nessuna attività recente</p>
            @endforelse
        </div>
    </div>
</div>
@endsection