@extends('layout.app')
@section('content')
    <div class="container-fluid">

        <!-- Page Heading with Gradient Text -->
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gradient">Dashboard Overview</h1>
            <div class="date-display bg-light rounded-pill px-3 py-1">
                <i class="fas fa-calendar-day mr-2 text-primary"></i>
                <span id="current-date" class="font-weight-bold"></span>
            </div>
        </div>

        <!-- Content Row with Animated Cards -->
        <div class="row">

            <!-- Total Gejala Card -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2 card-hover">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    Total Gejala</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $gejalas }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-clipboard-list fa-2x text-primary-light"></i>
                            </div>
                        </div>
                        <div class="mt-2">
                            <small class="text-muted">Last updated: just now</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total Solusi Masalah Card -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2 card-hover">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    Total Solusi Masalah</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $penyakit }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-lightbulb fa-2x text-success-light"></i>
                            </div>
                        </div>
                        <div class="mt-2">
                            <small class="text-muted">Last updated: just now</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total Relasi Card -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2 card-hover">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Total Relasi</div>
                                <div class="row no-gutters align-items-center">
                                    <div class="col-auto">
                                        <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">{{ $relasi }}</div>
                                    </div>
                                    <div class="col">
                                        <div class="progress progress-sm mr-2">
                                            <div class="progress-bar bg-info" role="progressbar" 
                                                 style="width: {{ min(($relasi/max(1,$gejalas*$penyakit))*100, 100) }}%"
                                                 aria-valuenow="{{ $relasi }}" 
                                                 aria-valuemin="0" 
                                                 aria-valuemax="{{ max(1,$gejalas*$penyakit) }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-link fa-2x text-info-light"></i>
                            </div>
                        </div>
                        <div class="mt-2">
                            <small class="text-muted">{{ round(($relasi/max(1,$gejalas*$penyakit)*100)) }}% coverage</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total User Card -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-warning shadow h-100 py-2 card-hover">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                    Total User</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $users }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-users fa-2x text-warning-light"></i>
                            </div>
                        </div>
                        <div class="mt-2">
                            <small class="text-muted">{{ auth()->user()->role == 'admin' ? 'Admin access' : 'Standard user' }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Stats Section -->
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card shadow">
                    <div class="card-header bg-white py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Quick Stats</h6>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-md-3 quick-stat-item">
                                <i class="fas fa-user-clock fa-2x text-secondary mb-2"></i>
                                <h5 class="font-weight-bold">Active</h5>
                                <p class="text-muted">Users online</p>
                            </div>
                            <div class="col-md-3 quick-stat-item">
                                <i class="fas fa-chart-line fa-2x text-success mb-2"></i>
                                <h5 class="font-weight-bold">Efficiency</h5>
                                <p class="text-muted">Reduce Mistakes</p>
                            </div>
                            <div class="col-md-3 quick-stat-item">
                                <i class="fas fa-check-circle fa-2x text-primary mb-2"></i>
                                <h5 class="font-weight-bold">98%</h5>
                                <p class="text-muted">System accuracy</p>
                            </div>
                            <div class="col-md-3 quick-stat-item">
                                <i class="fas fa-smile fa-2x text-warning mb-2"></i>
                                <h5 class="font-weight-bold">4.8</h5>
                                <p class="text-muted">User satisfaction</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        // Display current date
        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        document.getElementById('current-date').textContent = new Date().toLocaleDateString('en-US', options);
    </script>
    <style type="text/css">
        /* Dashboard Enhancements */
.text-gradient {
    background: linear-gradient(90deg, #4e73df 0%, #224abe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-hover {
    transition: all 0.3s ease;
    border-top: 3px solid transparent;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.border-left-primary { border-left-color: #4e73df !important; }
.border-left-success { border-left-color: #1cc88a !important; }
.border-left-info { border-left-color: #36b9cc !important; }
.border-left-warning { border-left-color: #f6c23e !important; }

.text-primary-light { color: #a6c4ff !important; }
.text-success-light { color: #7ae0b6 !important; }
.text-info-light { color: #7fd4e0 !important; }
.text-warning-light { color: #f9d78e !important; }

.quick-stat-item {
    padding: 15px;
    transition: all 0.3s;
    border-right: 1px solid #eee;
}

.quick-stat-item:last-child {
    border-right: none;
}

.quick-stat-item:hover {
    background-color: #f8f9fa;
    transform: scale(1.05);
}

/* Sidebar Enhancements */
.sidebar-divider-light {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar .nav-item .nav-link {
    position: relative;
    padding: 1rem 1.5rem;
    transition: all 0.3s;
}

.sidebar .nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    padding-left: 1.75rem;
}

.sidebar .nav-item .nav-link i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.sidebar-brand-icon.rotate-n-15 {
    transform: rotate(-15deg);
    transition: transform 0.3s;
}

.sidebar:hover .sidebar-brand-icon.rotate-n-15 {
    transform: rotate(0deg);
}

/* Navbar Enhancements */
.status-indicator {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
    border: 2px solid white;
}

.topbar .dropdown-list {
    width: 20rem !important;
}

.topbar .dropdown-list .icon-circle {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
    </style>
@endsection