@extends('layouts.admin.master')

@section('content')
    <div class="dashboard-container">
        <!-- Header Dashboard -->
        <div class="dashboard-header mb-4">
            <h2 class="dashboard-title">Dashboard Admin</h2>
            <p class="dashboard-subtitle">Ringkasan statistik dan aktivitas terbaru</p>
        </div>

        <!-- Kartu Statistik -->
        <div class="row stats-cards mb-4">
            <div class="col-xl-3 col-md-6 mb-3">
                <a href="{{ route('admin.penduduk') }}" class="stat-card-link">
                    <div class="stat-card card-info">
                        <div class="stat-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-title">Jumlah Penduduk</div>
                            <div class="stat-value">{{ $total_penduduk }}</div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xl-3 col-md-6 mb-3">
                <a href="{{ route('admin.artikel.data') }}" class="stat-card-link">
                    <div class="stat-card card-danger">
                        <div class="stat-icon">
                            <i class="bx bx-laptop"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-title">Jumlah Artikel</div>
                            <div class="stat-value">{{ $total_artikel }}</div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xl-3 col-md-6 mb-3">
                <a href="{{ route('admin.kontak.message') }}" class="stat-card-link">
                    <div class="stat-card card-success">
                        <div class="stat-icon">
                            <i class="bx bx-mail-send"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-title">Pesan Diterima</div>
                            <div class="stat-value">{{ $total_pesan }}</div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xl-3 col-md-6 mb-3">
                <a href="{{ route('admin.password') }}" class="stat-card-link">
                    <div class="stat-card card-warning">
                        <div class="stat-icon">
                            <i class="bx bxs-key"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-title">Ganti Password</div>
                            <div class="stat-value">&nbsp;</div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        @if (!empty($dashboardLinks))
            <div class="dashboard-panel mb-4">
                <div class="panel-header">
                    <h5 class="mb-1">Dashboard Lintas Modul</h5>
                    <p class="mb-0">Kumpulan pintu masuk ringkas untuk dashboard utama yang sekarang disatukan.</p>
                </div>
                <div class="dashboard-nav-grid">
                    @foreach ($dashboardLinks as $link)
                        <a href="{{ $link['route'] }}" class="dash-link-card">
                            <span class="dash-link-label">{{ $link['label'] }}</span>
                            <span class="dash-link-arrow"><i class="bx bx-right-arrow-alt"></i></span>
                        </a>
                    @endforeach
                </div>
            </div>
        @endif

        @if (!empty($operationalLinks))
            <div class="dashboard-panel compact-panel mb-4">
                <div class="panel-header">
                    <h5 class="mb-1">Akses Operasional Cepat</h5>
                    <p class="mb-0">Shortcut untuk modul yang paling sering dipakai saat operasional harian.</p>
                </div>
                <div class="quick-pill-list">
                    @foreach ($operationalLinks as $link)
                        <a href="{{ $link['route'] }}" class="quick-pill">{{ $link['label'] }}</a>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- Filter -->
        <div class="dashboard-filter mb-4">
            <form id="FilterForm" class="filter-form">
                <div class="row align-items-end">
                    <div class="col-md-4 mb-2">
                        <label for="limit" class="form-label">Maksimal Jumlah Hari</label>
                        <input type="number" class="form-control" id="limit" name="limit"
                               min="1" max="366" value="7">
                    </div>
                    <div class="col-md-2 mb-2">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-sync-alt me-1"></i> Terapkan
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Acara Mendatang -->
        <div class="row upcoming-events mb-4">
            <div class="col-lg-6 mb-3">
                <div class="event-card">
                    <div class="card-header">
                        <h5 class="card-title">Hari Besar Nasional Terdekat</h5>
                    </div>
                    <div class="card-body">
                        <div class="event-list" id="hbn_body"></div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mb-3">
                <div class="event-card">
                    <div class="card-header">
                        <h5 class="card-title">Ulang Tahun Penduduk Terdekat</h5>
                    </div>
                    <div class="card-body">
                        <div class="event-list" id="ulang_tahun_body"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistik Pengunjung -->
        <div class="visitor-stats">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Statistik Pengunjung</h5>
                    <div id="datepicker" class="date-range-picker">
                        <i class="bx bx-calendar-star me-2"></i>
                        <span></span>
                        <i class="bx bx-chevron-down ms-2"></i>
                    </div>
                </div>
                <div class="card-body">
                    <div id="chart-pengunjung" class="main-chart"></div>
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="sub-chart-container">
                                <h6 class="chart-title">Platform</h6>
                                <div id="chart-platform" class="sub-chart"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="sub-chart-container">
                                <h6 class="chart-title">Browser</h6>
                                <div id="chart-browser" class="sub-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('assets/templates/admin/plugins/daterangepicker/daterangepicker.css') }}">
    @vite(['resources/css/_c3-chart.scss']);
    <style>
        /* Dashboard Container */
        .dashboard-container {
            padding: 20px;
        }

        /* Header */
        .dashboard-header {
            padding: 15px 0;
        }
        .dashboard-title {
            font-size: 24px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        .dashboard-subtitle {
            color: #6c757d;
            font-size: 14px;
        }

        /* Stat Cards */
        .stat-card {
            border-radius: 10px;
            padding: 20px;
            height: 100%;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            margin-right: 15px;
        }
        .stat-content {
            flex: 1;
        }
        .stat-title {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 5px;
        }
        .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: #2c3e50;
        }
        .card-info {
            border-left: 4px solid #3498db;
        }
        .card-info .stat-icon {
            background: linear-gradient(135deg, #3498db, #2980b9);
        }
        .card-danger {
            border-left: 4px solid #e74c3c;
        }
        .card-danger .stat-icon {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
        }
        .card-success {
            border-left: 4px solid #2ecc71;
        }
        .card-success .stat-icon {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
        }
        .card-warning {
            border-left: 4px solid #f39c12;
        }
        .card-warning .stat-icon {
            background: linear-gradient(135deg, #f39c12, #e67e22);
        }

        /* Filter Form */
        .dashboard-filter {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
        }
        .dashboard-panel {
            background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
            border: 1px solid rgba(13, 110, 253, 0.08);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
        }
        .dashboard-panel.compact-panel {
            background: linear-gradient(135deg, #fffaf2 0%, #ffffff 100%);
            border-color: rgba(255, 193, 7, 0.14);
        }
        .panel-header h5 {
            font-size: 16px;
            font-weight: 600;
            color: #243b53;
        }
        .panel-header p {
            color: #6c7a89;
            font-size: 13px;
        }
        .dashboard-nav-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 12px;
            margin-top: 16px;
        }
        .dash-link-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid rgba(36, 59, 83, 0.08);
            border-radius: 12px;
            background: #fff;
            padding: 14px 16px;
            color: #243b53;
            text-decoration: none;
            transition: all 0.2s ease;
        }
        .dash-link-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(13, 110, 253, 0.08);
            color: #0d6efd;
        }
        .dash-link-label {
            font-weight: 600;
        }
        .dash-link-arrow {
            font-size: 18px;
            line-height: 1;
        }
        .quick-pill-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 16px;
        }
        .quick-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 9px 14px;
            border-radius: 999px;
            background: rgba(255, 193, 7, 0.14);
            color: #8a5a00;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease;
        }
        .quick-pill:hover {
            background: #ffc107;
            color: #3b2a00;
        }
        .filter-form {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        /* Event Cards */
        .event-card {
            height: 100%;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        .event-card .card-header {
            background: #f8f9fa;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }
        .event-card .card-title {
            font-size: 16px;
            font-weight: 600;
            margin: 0;
            color: #2c3e50;
        }
        .event-card .card-body {
            padding: 0;
        }
        .event-list {
            padding: 10px 0;
        }
        .event-list .list-group-item {
            border: none;
            border-bottom: 1px solid #f1f1f1;
            padding: 12px 20px;
            transition: all 0.2s;
        }
        .event-list .list-group-item:last-child {
            border-bottom: none;
        }
        .event-list .list-group-item:hover {
            background-color: #f8f9fa;
        }

        /* Visitor Stats */
        .visitor-stats .card {
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .visitor-stats .card-header {
            background: #f8f9fa;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }
        .date-range-picker {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
        }
        .date-range-picker span {
            font-size: 14px;
        }
        .main-chart {
            height: 350px;
        }
        .sub-chart-container {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            height: 100%;
        }
        .chart-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        .sub-chart {
            height: 250px;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .stat-card {
                flex-direction: column;
                text-align: center;
                padding: 15px;
            }
            .stat-icon {
                margin-right: 0;
                margin-bottom: 10px;
            }
        }
    </style>
@endsection

@section('javascript')
    <script src="{{ asset('assets/templates/admin/js/jquery.sparkline.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/circle-progress.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/charts-c3/d3.v5.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/charts-c3/c3-chart.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/input-mask/jquery.mask.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-loading-overlay/2.1.7/loadingoverlay.min.js" integrity="sha512-hktawXAt9BdIaDoaO9DlLp6LYhbHMi5A36LcXQeHgVKUH6kJMOQsAtIw2kmQ9RERDpnSTlafajo6USh9JUXckw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('assets/templates/admin/plugins/daterangepicker/moment.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/apexcharts-bundle/js/apexcharts.min.js') }}"></script>
    @php
        $resource = resource_loader(
            blade_path: $view,
            params: [
                'page_title' => $page_attr['title'],
            ],
        );
    @endphp
    <script src="{{ $resource }}"></script>
@endsection