@extends('admin.layouts.app')

@section('title', 'Dashboard')
@section('page_title', 'Dashboard')
@section('page_subtitle', 'Pusat manajemen data Explore Lumajang')

@section('content')
<div class="row g-3 g-xl-4">
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card soft-card dashboard-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start gap-3">
                    <div>
                        <div class="text-muted small fw-semibold text-uppercase">Total Wisata</div>
                        <div class="display-6 fw-bold mb-0">{{ $totalWisata }}</div>
                    </div>
                    <div class="dashboard-icon text-bg-ocean">
                        <i class="bi bi-map"></i>
                    </div>
                </div>
                <div class="text-muted small mt-3">Semua destinasi yang tersedia di aplikasi.</div>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card soft-card dashboard-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start gap-3">
                    <div>
                        <div class="text-muted small fw-semibold text-uppercase">Total Wisata AR</div>
                        <div class="display-6 fw-bold mb-0">{{ $totalWisataAr }}</div>
                    </div>
                    <div class="dashboard-icon text-bg-info">
                        <i class="bi bi-badge-3d"></i>
                    </div>
                </div>
                <div class="text-muted small mt-3">Destinasi dengan model 3D untuk fitur AR.</div>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card soft-card dashboard-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start gap-3">
                    <div>
                        <div class="text-muted small fw-semibold text-uppercase">Total Wisata Video</div>
                        <div class="display-6 fw-bold mb-0">{{ $totalWisataVideo }}</div>
                    </div>
                    <div class="dashboard-icon text-bg-dark">
                        <i class="bi bi-play-btn"></i>
                    </div>
                </div>
                <div class="text-muted small mt-3">Destinasi yang menampilkan media video.</div>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card soft-card dashboard-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start gap-3">
                    <div>
                        <div class="text-muted small fw-semibold text-uppercase">Total User</div>
                        <div class="display-6 fw-bold mb-0">{{ $totalUser }}</div>
                    </div>
                    <div class="dashboard-icon text-bg-primary">
                        <i class="bi bi-people"></i>
                    </div>
                </div>
                <div class="text-muted small mt-3">Pengguna aplikasi Flutter yang terdaftar.</div>
            </div>
        </div>
    </div>
</div>

<div class="card soft-card mt-3 mt-xl-4">
    <div class="card-body d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center gap-3">
        <div>
            <h2 class="h6 mb-1">Kelola Data Wisata</h2>
            <p class="text-muted mb-0">Tambah, ubah, dan lengkapi media destinasi untuk kebutuhan aplikasi Flutter.</p>
        </div>
        <a class="btn btn-nature" href="{{ route('admin.wisata.index') }}">
            <i class="bi bi-arrow-right-circle me-1"></i> Buka Data Wisata
        </a>
    </div>
</div>
@endsection

@push('styles')
<style>
    .dashboard-card {
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .dashboard-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(15, 76, 129, .11);
    }

    .dashboard-icon {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        font-size: 1.35rem;
        flex: 0 0 auto;
    }
</style>
@endpush