@extends('layouts.app')

@section('content')
<section class="section">
    <div class="section-header">
        <h1 style="color: black;"><i class="fas fa-fire mr-2 text-emerald"></i>Dashboard Admin</h1>
    </div>

    <div class="section-body">
        <!-- Welcome Greeting Card -->
        <div class="row">
            <div class="col-12">
                <div class="card bg-white shadow-sm border-0 text-dark overflow-hidden mb-4" style="border-radius: 16px;">
                    <div class="card-body p-4 p-md-5 d-flex align-items-center justify-content-between position-relative">
                        <div style="z-index: 2;">
                            <span class="badge bg-emerald-light text-emerald font-weight-bold px-3 py-2 mb-3" style="font-size: 0.8rem; border-radius: 30px;">
                                <i class="fas fa-shield-alt mr-1"></i> Mode Administrator
                            </span>
                            <h2 class="font-weight-800 text-slate mb-2" style="font-size: 2.2rem; letter-spacing: -0.5px;">
                                Selamat Datang, {{ Auth::user()->name }}!
                            </h2>
                            <p class="text-slate-light mb-0" style="font-size: 1.05rem; max-width: 600px;">
                                Pantau penjualan harian, kelola stok produk, kategorisasi produk, dan otorisasi hak akses staf kasir Anda dalam satu panel kendali terpadu.
                            </p>
                        </div>
                        <div class="d-none d-lg-block position-absolute" style="right: 5%; top: 50%; transform: translateY(-50%); opacity: 0.85;">
                            <i class="fas fa-store text-emerald" style="font-size: 8rem; opacity: 0.15;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Metrics Cards Grid -->
        <div class="row">
            <!-- Revenue Card -->
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <div class="card card-statistic-1 shadow-sm border-0">
                    <div class="card-icon bg-success">
                        <i class="fas fa-wallet text-white"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="card-header">
                            <h4>Total Omset</h4>
                        </div>
                        <div class="card-body">
                            Rp.{{ number_format($totalRevenue, 0, ',', '.') }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Products Card -->
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <div class="card card-statistic-1 shadow-sm border-0">
                    <div class="card-icon bg-primary">
                        <i class="fas fa-box-open text-white"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="card-header">
                            <h4>Daftar Produk</h4>
                        </div>
                        <div class="card-body">
                            {{ $totalProducts }} Item
                        </div>
                    </div>
                </div>
            </div>

            <!-- Categories Card -->
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <div class="card card-statistic-1 shadow-sm border-0">
                    <div class="card-icon bg-warning">
                        <i class="fas fa-th-large text-white"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="card-header">
                            <h4>Kategori</h4>
                        </div>
                        <div class="card-body">
                            {{ $totalCategories }} Jenis
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cashiers Card -->
            <div class="col-lg-3 col-md-6 col-sm-6 col-12">
                <div class="card card-statistic-1 shadow-sm border-0">
                    <div class="card-icon bg-info">
                        <i class="fas fa-user-friends text-white"></i>
                    </div>
                    <div class="card-wrap">
                        <div class="card-header">
                            <h4>Staf Kasir</h4>
                        </div>
                        <div class="card-body">
                            {{ $activeCashiers }} Orang
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Navigation Panels -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white border-bottom py-3">
                        <h4 class="text-dark"><i class="fas fa-compass mr-1 text-emerald"></i> Navigasi Cepat Administrasi</h4>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            <!-- Categories Panel -->
                            <div class="col-md-3 col-sm-6 mb-3">
                                <div class="p-4 border rounded text-center h-100 bg-light transition-all" style="border-radius: 12px; border: 1.5px solid #e2e8f0;">
                                    <i class="fas fa-th-large text-warning d-block mb-3" style="font-size: 2.2rem;"></i>
                                    <h5 class="font-weight-700 text-dark">Kategori Produk</h5>
                                    <p class="text-muted small mb-3">Atur klasifikasi barang dagangan (makanan, minuman, dll).</p>
                                    <a href="{{ route('categories.index') }}" class="btn btn-sm btn-primary w-100 shadow-sm"><i class="fas fa-cog"></i> Kelola</a>
                                </div>
                            </div>

                            <!-- Products Panel -->
                            <div class="col-md-3 col-sm-6 mb-3">
                                <div class="p-4 border rounded text-center h-100 bg-light transition-all" style="border-radius: 12px; border: 1.5px solid #e2e8f0;">
                                    <i class="fas fa-box-open text-primary d-block mb-3" style="font-size: 2.2rem;"></i>
                                    <h5 class="font-weight-700 text-dark">Daftar Produk</h5>
                                    <p class="text-muted small mb-3">Tambah item baru, kelola SKU, update harga, dan pantau stok fisik.</p>
                                    <a href="{{ route('products.index') }}" class="btn btn-sm btn-primary w-100 shadow-sm"><i class="fas fa-cog"></i> Kelola</a>
                                </div>
                            </div>

                            <!-- Reports Panel -->
                            <div class="col-md-3 col-sm-6 mb-3">
                                <div class="p-4 border rounded text-center h-100 bg-light transition-all" style="border-radius: 12px; border: 1.5px solid #e2e8f0;">
                                    <i class="fas fa-chart-bar text-success d-block mb-3" style="font-size: 2.2rem;"></i>
                                    <h5 class="font-weight-700 text-dark">Laporan Sales</h5>
                                    <p class="text-muted small mb-3">Analisis pendapatan harian, mingguan, bulanan, dan tahunan.</p>
                                    <a href="{{ route('reports.index') }}" class="btn btn-sm btn-primary w-100 shadow-sm"><i class="fas fa-cog"></i> Kelola</a>
                                </div>
                            </div>

                            <!-- Access Control Panel -->
                            <div class="col-md-3 col-sm-6 mb-3">
                                <div class="p-4 border rounded text-center h-100 bg-light transition-all" style="border-radius: 12px; border: 1.5px solid #e2e8f0;">
                                    <i class="fas fa-user-shield text-danger d-block mb-3" style="font-size: 2.2rem;"></i>
                                    <h5 class="font-weight-700 text-dark">Hak Akses Staf</h5>
                                    <p class="text-muted small mb-3">Otorisasi hak akses, register akun kasir, ganti role.</p>
                                    <a href="{{ route('hakakses.index') }}" class="btn btn-sm btn-primary w-100 shadow-sm"><i class="fas fa-cog"></i> Kelola</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .bg-emerald-light {
        background-color: #ecfdf5 !important;
    }
    .text-emerald {
        color: #10b981 !important;
    }
    .text-slate {
        color: #0f172a !important;
    }
    .text-slate-light {
        color: #475569 !important;
    }
    .transition-all {
        transition: all 0.25s ease;
    }
    .transition-all:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        border-color: #10b981 !important;
    }
</style>
@endsection