@extends('layouts.appback')

@section('title', 'Dashboard')

@section('content')
    <div class="container-fluid py-2">
        {{-- Titolo --}}
        <div class="row mb-3">
            <div class="col-12">
                <h3 class="mb-0 h4 font-weight-bolder">Dashboard</h3>
                <p class="text-sm text-secondary">Panoramica generale di aziende, utenti e promozioni.</p>
            </div>
        </div>

        {{-- Statistiche principali --}}
        <div class="row">
            {{-- Aziende --}}
            <div class="col-xl-4 col-sm-6 mb-4">
                <div class="card">
                    <div class="card-header p-3 pb-0 d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Aziende</p>
                            <h4 class="mb-0">{{ $aziendeTotal }}</h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-dark shadow-dark border-radius-lg text-center">
                            <i class="material-symbols-rounded opacity-10">business</i>
                        </div>
                    </div>
                    <hr class="dark horizontal my-0">
                    <div class="card-footer p-3">
                        <p class="mb-0 text-sm"><span class="text-success font-weight-bolder">+12% </span> rispetto al mese
                            scorso</p>
                    </div>
                </div>
            </div>

            {{-- Utenti --}}
            <div class="col-xl-4 col-sm-6 mb-4">
                <div class="card">
                    <div class="card-header p-3 pb-0 d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Utenti</p>
                            <h4 class="mb-0">{{ $utentiTotal }}</h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-dark shadow-dark border-radius-lg text-center">
                            <i class="material-symbols-rounded opacity-10">person</i>
                        </div>
                    </div>
                    <hr class="dark horizontal my-0">
                    <div class="card-footer p-3">
                        <p class="mb-0 text-sm"><span class="text-success font-weight-bolder">+3% </span> rispetto alla
                            scorsa settimana</p>
                    </div>
                </div>
            </div>

            {{-- Promozioni --}}
            <div class="col-xl-4 col-sm-6 mb-4">
                <div class="card">
                    <div class="card-header p-3 pb-0 d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Promozioni</p>
                            <h4 class="mb-0">{{ $promozioniTotal }}</h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-dark shadow-dark border-radius-lg text-center">
                            <i class="material-symbols-rounded opacity-10">local_offer</i>
                        </div>
                    </div>
                    <hr class="dark horizontal my-0">
                    <div class="card-footer p-3">
                        <p class="mb-0 text-sm"><span class="text-danger font-weight-bolder">-2% </span> rispetto a ieri</p>
                    </div>
                </div>
            </div>

            {{-- Placeholder per vendite o altro dato --}}
            {{--             <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card">
                    <div class="card-header p-3 pb-0 d-flex justify-content-between">
                        <div>
                            <p class="text-sm mb-0 text-capitalize">Ordini</p>
                            <h4 class="mb-0">103</h4>
                        </div>
                        <div class="icon icon-md icon-shape bg-gradient-dark shadow-dark border-radius-lg text-center">
                            <i class="material-symbols-rounded opacity-10">shopping_cart</i>
                        </div>
                    </div>
                    <hr class="dark horizontal my-0">
                    <div class="card-footer p-3">
                        <p class="mb-0 text-sm"><span class="text-success font-weight-bolder">+5% </span> rispetto a ieri
                        </p>
                    </div>
                </div>
            </div> --}}
        </div>

        {{-- Ultimi utenti --}}
        <div class="row">
            <div class="col-lg-4 col-md-6 mt-4">
                <div class="card">
                    <div class="card-body">
                        <h6 class="mb-0">Ultimi utenti registrati</h6>
                        <p class="text-sm text-secondary">Gli ultimi iscritti alla piattaforma</p>
                        <div>
                            @forelse ($utentiUltimi as $utente)
                                <div class="d-flex mb-2">
                                    <div class="d-flex flex-column">
                                        <h6 class="mb-0 text-sm">{{ $utente->name }}</h6>
                                        <p class="text-xs text-secondary mb-0">{{ $utente->email }}</p>
                                    </div>
                                </div>
                            @empty
                                <p class="text-sm text-muted">Nessun utente registrato di recente.</p>
                            @endforelse
                        </div>
                        <hr class="dark horizontal">
                        <a href="{{ route('users.index') }}" class="btn btn-sm btn-primary">Vedi tutti</a>
                    </div>
                </div>
            </div>

            {{-- Grafico vendite giornaliere --}}
            <div class="col-lg-4 col-md-6 mt-4">
                <div class="card">
                    <div class="card-body">
                        <h6 class="mb-0">Andamento giornaliero</h6>
                        <p class="text-sm text-secondary">Trend delle vendite giornaliere</p>
                        <div class="chart">
                            <canvas id="chart-line" class="chart-canvas" height="170"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Grafico tasks completati --}}
            <div class="col-lg-4 mt-4">
                <div class="card">
                    <div class="card-body">
                        <h6 class="mb-0">Attività completate</h6>
                        <p class="text-sm text-secondary">Andamento delle campagne</p>
                        <div class="chart">
                            <canvas id="chart-line-tasks" class="chart-canvas" height="170"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Ultime promozioni --}}
        <div class="row mt-4 mb-4">
            <div class="col-lg-8 col-md-6 mb-4">
                <div class="card">
                    <div class="card-header pb-0">
                        <h6>Ultime promozioni</h6>
                        <p class="text-sm text-secondary mb-0">Elenco aggiornato delle ultime promozioni inserite</p>
                    </div>
                    <div class="card-body px-0 pb-2">
                        <div class="table-responsive">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Titolo</th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                            Azienda</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Data</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($promozioniRecenti as $promozione)
                                        <tr>
                                            <td class="text-sm">{{ $promozione->title }}</td>
                                            <td class="text-sm">{{ $promozione->azienda?->nome ?? '-' }}</td>
                                            <td class="align-middle text-center text-sm">
                                                {{ $promozione->created_at->format('d/m/Y') }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="text-center text-muted text-sm">Nessuna promozione
                                                recente</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Timeline (eventi recenti / log) --}}
            <div class="col-lg-4 col-md-6">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h6>Attività recenti</h6>
                        <p class="text-sm text-secondary">Ultimi eventi sulla piattaforma</p>
                    </div>
                    <div class="card-body p-3">
                        <div class="timeline timeline-one-side">
                            <div class="timeline-block mb-3">
                                <span class="timeline-step">
                                    <i class="material-symbols-rounded text-success text-gradient">person_add</i>
                                </span>
                                <div class="timeline-content">
                                    <h6 class="text-dark text-sm font-weight-bold mb-0">Nuovo utente registrato</h6>
                                    <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">Oggi alle 10:15</p>
                                </div>
                            </div>
                            <div class="timeline-block mb-3">
                                <span class="timeline-step">
                                    <i class="material-symbols-rounded text-info text-gradient">campaign</i>
                                </span>
                                <div class="timeline-content">
                                    <h6 class="text-dark text-sm font-weight-bold mb-0">Promozione pubblicata</h6>
                                    <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">Ieri alle 17:40</p>
                                </div>
                            </div>
                            <div class="timeline-block">
                                <span class="timeline-step">
                                    <i class="material-symbols-rounded text-primary text-gradient">business</i>
                                </span>
                                <div class="timeline-content">
                                    <h6 class="text-dark text-sm font-weight-bold mb-0">Azienda registrata</h6>
                                    <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">2 giorni fa</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection