@extends('layouts.app')

@section('title', 'Admin Dashboard')

@section('content')
<div class="row mb-5">
    <div class="col-12 d-flex justify-content-between align-items-end">
        <div>
            <span class="badge bg-primary mb-2">Management Suite</span>
            <h2 class="fw-bold mb-0">Platform Overview</h2>
        </div>
        <div class="d-flex gap-2">
             <a href="{{ route('home') }}" class="btn btn-outline-primary rounded-pill px-4">
                <i class="bi bi-eye me-2"></i> View Site
            </a>
        </div>
    </div>
</div>

<div class="row g-4 mb-5">
    <div class="col-md-4">
        <div class="glass-card p-4 rounded-4 border-0 text-center h-100">
            <div class="bg-primary-subtle text-primary rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                <i class="bi bi-box-seam fs-4"></i>
            </div>
            <h6 class="text-muted text-uppercase fw-bold small">Active Applications</h6>
            <p class="display-5 fw-bold mb-0 text-main">{{ $totalApps }}</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="glass-card p-4 rounded-4 border-0 text-center h-100">
            <div class="bg-info-subtle text-info rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                <i class="bi bi-tags fs-4"></i>
            </div>
            <h6 class="text-muted text-uppercase fw-bold small">Total Categories</h6>
            <p class="display-5 fw-bold mb-0 text-main">{{ $totalCategories }}</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="glass-card p-4 rounded-4 border-0 h-100">
            <h6 class="text-muted text-uppercase fw-bold small mb-3">
                <i class="bi bi-graph-up-arrow me-2"></i>Top Performing Apps
            </h6>
            <div class="list-group list-group-flush bg-transparent">
                @foreach($topApps as $app)
                    <div class="list-group-item bg-transparent px-0 border-0 d-flex justify-content-between align-items-center">
                        <div class="fw-bold text-main">{{ $app->name }}</div>
                        <span class="badge bg-primary rounded-pill">{{ number_format($app->downloads) }} <i class="bi bi-download small ms-1"></i></span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="glass-card p-4 rounded-4 border-0 shadow-sm h-100">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="fw-bold mb-0">System Operations</h5>
            </div>
            <div class="row g-3">
                <div class="col-md-6">
                    <a href="{{ route('admin.applications.index') }}" class="card bg-dark text-white p-4 h-100 text-decoration-none rounded-4 hover-shadow transition border-0">
                        <i class="bi bi-folder2-open display-6 mb-3"></i>
                        <h6 class="fw-bold">Inventory Control</h6>
                        <p class="small text-white-50 mb-0">Manage uploads, update descriptions, and swap icons.</p>
                    </a>
                </div>
                <div class="col-md-6">
                    <a href="{{ route('admin.categories.index') }}" class="card bg-primary text-white p-4 h-100 text-decoration-none rounded-4 hover-shadow transition border-0">
                        <i class="bi bi-grid-1x2 display-6 mb-3"></i>
                        <h6 class="fw-bold">Classification</h6>
                        <p class="small text-white-50 mb-0">Organize applications by creating or removing categories.</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-0 rounded-4 p-4 mt-4 mt-lg-0 bg-glass transition">
            <h5 class="fw-bold mb-3">Quick Upload</h5>
            <p class="small text-muted mb-4">Launch a new application directly into the storefront.</p>
            <a href="{{ route('admin.applications.create') }}" class="btn btn-primary w-100 py-3">
                <i class="bi bi-plus-lg me-2"></i> Add New Application
            </a>
        </div>
    </div>
</div>

<style>
    .text-main { color: var(--text-main); }
    .bg-glass { background-color: var(--bg-glass); border: 1px solid var(--border-color); }
    .transition { transition: all 0.3s ease; }
    .hover-shadow:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important; }

    [data-theme="dark"] .bg-primary-subtle { background-color: rgba(0, 102, 255, 0.1) !important; }
    [data-theme="dark"] .bg-info-subtle { background-color: rgba(13, 202, 240, 0.1) !important; }
    [data-theme="dark"] .list-group-item { border-bottom: 1px solid var(--border-color) !important; }
</style>
@endsection