@extends('layouts.admin')

@section('admin_content')
    <div class="page-header">
        <h1 class="page-title">Dashboard</h1>

    </div>

    <!-- Stats Grid -->
    {{-- <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-label">Total Users</div>
            <div class="stat-value">{{ $totalUsers }}</div>

        </div>

        <div class="stat-card">
            <div class="stat-label">Total Departments</div>
            <div class="stat-value"> {{ $totalDepartments }} </div>

        </div>

        <div class="stat-card">
            <div class="stat-label">Total Slider</div>
            <div class="stat-value"> {{ $totalSliders }} </div>

        </div>


        <div class="stat-card">
            <div class="stat-label">Total Photo Albums</div>
            <div class="stat-value"> {{ $totalPhotoAlbums }} </div>

        </div>

        <div class="stat-card">
            <div class="stat-label">Total Video Albums</div>
            <div class="stat-value">{{ $totalVideoAlbums }}</div>

        </div>
        <div class="stat-card">
            <div class="stat-label">Total Project</div>
            <div class="stat-value">{{ $totalProject }}</div>

        </div>
        <div class="stat-card">
            <div class="stat-label">Total Institution</div>
            <div class="stat-value">{{ $totalInstitution }}</div>

        </div>
    </div> --}}

<div class="stats-grid">

    {{-- Users --}}
    <div class="stat-card stat-card--blue">
        <div class="stat-card-top">
            <div class="stat-icon">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M17 20h5v-2a4 4 0 00-5-3.87M9 20H4v-2a4 4 0 015-3.87m6-4.13a4 4 0 10-8 0 4 4 0 008 0zm6 0a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
            </div>
        </div>
        <div class="stat-label">Total Users</div>
        <div class="stat-value">{{ number_format($totalUsers) }}</div>
        <div class="stat-footer">
            <span class="active-dot"></span> Registered accounts
        </div>
    </div>

    {{-- Departments --}}
    <div class="stat-card stat-card--emerald">
        <div class="stat-card-top">
            <div class="stat-icon">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2M5 21H3M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 8v-3a1 1 0 011-1h2a1 1 0 011 1v3"/>
                </svg>
            </div>
        </div>
        <div class="stat-label">Departments</div>
        <div class="stat-value">{{ number_format($totalDepartments) }}</div>
        <div class="stat-footer">
            <span class="active-dot"></span> Active departments
        </div>
    </div>

    {{-- Sliders --}}
    <div class="stat-card stat-card--amber">
        <div class="stat-card-top">
            <div class="stat-icon">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
            </div>
        </div>
        <div class="stat-label">Total Sliders</div>
        <div class="stat-value">{{ number_format($totalSliders) }}</div>
        <div class="stat-footer">
            <span class="active-dot"></span> Active sliders
        </div>
    </div>

    {{-- Photo Albums --}}
    <div class="stat-card stat-card--rose">
        <div class="stat-card-top">
            <div class="stat-icon">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
            </div>
        </div>
        <div class="stat-label">Photo Albums</div>
        <div class="stat-value">{{ number_format($totalPhotoAlbums) }}</div>
        <div class="stat-footer">
            <span class="active-dot"></span> Published albums
        </div>
    </div>

    {{-- Video Albums --}}
    <div class="stat-card stat-card--violet">
        <div class="stat-card-top">
            <div class="stat-icon">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M15 10l4.553-2.276A1 1 0 0121 8.723v6.554a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                </svg>
            </div>
        </div>
        <div class="stat-label">Video Albums</div>
        <div class="stat-value">{{ number_format($totalVideoAlbums) }}</div>
        <div class="stat-footer">
            <span class="active-dot"></span> Published albums
        </div>
    </div>

    {{-- Projects --}}
    <div class="stat-card stat-card--cyan">
        <div class="stat-card-top">
            <div class="stat-icon">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
                </svg>
            </div>
        </div>
        <div class="stat-label">Total Projects</div>
        <div class="stat-value">{{ number_format($totalProject) }}</div>
        <div class="stat-footer">
            <span class="active-dot"></span> Active projects
        </div>
    </div>

    {{-- Institutions --}}
    <div class="stat-card stat-card--orange">
        <div class="stat-card-top">
            <div class="stat-icon">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/>
                </svg>
            </div>
        </div>
        <div class="stat-label">Institutions</div>
        <div class="stat-value">{{ number_format($totalInstitution) }}</div>
        <div class="stat-footer">
            <span class="active-dot"></span> Active institutions
        </div>
    </div>

    {{-- Resources --}}
    <div class="stat-card stat-card--teal">
        <div class="stat-card-top">
            <div class="stat-icon">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
        </div>
        <div class="stat-label">Total Resources</div>
        <div class="stat-value">{{ number_format($totalResource) }}</div>
        <div class="stat-footer">
            <span class="active-dot"></span> Active resources
        </div>
    </div>

</div>
    <div class="row mb-3">
        <div class="col-lg-8">
            <div class="panel">
                <div class="panel-header">
                    <h3 class="panel-title">Visitor Overview</h3>
                    <div>
                        <select class="form-select form-select-sm visitor-period-select" style="width: auto;">
                            <option value="7">Last 7 days</option>
                            <option value="30">Last 30 days</option>
                            <option value="90">Last 90 days</option>
                        </select>
                    </div>
                </div>
                <div class="panel-body">
                    <div id="visitorLineChart"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="panel">
                <div class="panel-header">
                    <h3 class="panel-title">Visitor Summary</h3>
                </div>
                <div class="panel-body">
                    {{-- Summary Stats --}}
                    <div class="visitor-summary-stats">
                        <div class="vsummary-item">
                            <div class="vsummary-icon vsummary-today">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    viewBox="0 0 16 16">
                                    <path
                                        d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4z" />
                                </svg>
                            </div>
                            <div class="vsummary-info">
                                <div class="vsummary-label">Today</div>
                                <div class="vsummary-value">{{ number_format($visitors->total_today ?? 0) }}</div>
                            </div>
                        </div>

                        <div class="vsummary-item">
                            <div class="vsummary-icon vsummary-month">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    viewBox="0 0 16 16">
                                    <path
                                        d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
                                </svg>
                            </div>
                            <div class="vsummary-info">
                                <div class="vsummary-label">This Month</div>
                                <div class="vsummary-value">{{ number_format($visitors->total_in_month ?? 0) }}</div>
                            </div>
                        </div>

                        <div class="vsummary-item">
                            <div class="vsummary-icon vsummary-total">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    viewBox="0 0 16 16">
                                    <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                                    <path fill-rule="evenodd"
                                        d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z" />
                                    <path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />
                                </svg>
                            </div>
                            <div class="vsummary-info">
                                <div class="vsummary-label">All Time Total</div>
                                <div class="vsummary-value">{{ number_format($visitors->total ?? 0) }}</div>
                            </div>
                        </div>
                    </div>

                    {{-- Donut chart for visitor breakdown --}}
                    <div id="visitorDonutChart" class="mt-3"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- ============================================
   CSS STYLES
   ============================================ --}}
@push('styles')
    <style>

.stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 16px;
        margin-bottom: 28px;
    }

    .stat-card {
        position: relative;
        background: #ffffff;
        border-radius: 16px;
        padding: 22px 20px 18px;
        overflow: hidden;
        border: 1px solid #f0f0f4;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
        transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease;
        cursor: default;
        animation: statFadeUp 0.5s ease both;
    }

    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.10);
    }

    /* staggered entrance */
    .stat-card:nth-child(1) { animation-delay: 0.05s; }
    .stat-card:nth-child(2) { animation-delay: 0.10s; }
    .stat-card:nth-child(3) { animation-delay: 0.15s; }
    .stat-card:nth-child(4) { animation-delay: 0.20s; }
    .stat-card:nth-child(5) { animation-delay: 0.25s; }
    .stat-card:nth-child(6) { animation-delay: 0.30s; }
    .stat-card:nth-child(7) { animation-delay: 0.35s; }

    @keyframes statFadeUp {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* decorative blob */
    .stat-card::before {
        content: '';
        position: absolute;
        top: -28px;
        right: -28px;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        opacity: 0.08;
        transition: transform 0.3s ease;
    }
    .stat-card:hover::before {
        transform: scale(1.3);
    }

    /* accent line at top */
    .stat-card::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        border-radius: 16px 16px 0 0;
    }

    /* per-card color themes */
    .stat-card--blue::before  { background: #3b82f6; }
    .stat-card--blue::after   { background: linear-gradient(90deg, #3b82f6, #93c5fd); }
    .stat-card--blue .stat-icon { background: #eff6ff; color: #2563eb; }
    .stat-card--blue .stat-value { color: #1d4ed8; }

    .stat-card--emerald::before { background: #10b981; }
    .stat-card--emerald::after  { background: linear-gradient(90deg, #10b981, #6ee7b7); }
    .stat-card--emerald .stat-icon { background: #ecfdf5; color: #059669; }
    .stat-card--emerald .stat-value { color: #047857; }

    .stat-card--amber::before { background: #f59e0b; }
    .stat-card--amber::after  { background: linear-gradient(90deg, #f59e0b, #fcd34d); }
    .stat-card--amber .stat-icon { background: #fffbeb; color: #d97706; }
    .stat-card--amber .stat-value { color: #b45309; }

    .stat-card--rose::before { background: #f43f5e; }
    .stat-card--rose::after  { background: linear-gradient(90deg, #f43f5e, #fda4af); }
    .stat-card--rose .stat-icon { background: #fff1f2; color: #e11d48; }
    .stat-card--rose .stat-value { color: #be123c; }

    .stat-card--violet::before { background: #8b5cf6; }
    .stat-card--violet::after  { background: linear-gradient(90deg, #8b5cf6, #c4b5fd); }
    .stat-card--violet .stat-icon { background: #f5f3ff; color: #7c3aed; }
    .stat-card--violet .stat-value { color: #6d28d9; }

    .stat-card--cyan::before { background: #06b6d4; }
    .stat-card--cyan::after  { background: linear-gradient(90deg, #06b6d4, #67e8f9); }
    .stat-card--cyan .stat-icon { background: #ecfeff; color: #0891b2; }
    .stat-card--cyan .stat-value { color: #0e7490; }

    .stat-card--orange::before { background: #f97316; }
    .stat-card--orange::after  { background: linear-gradient(90deg, #f97316, #fdba74); }
    .stat-card--orange .stat-icon { background: #fff7ed; color: #ea580c; }
    .stat-card--orange .stat-value { color: #c2410c; }

    .stat-card--teal::before { background: #14b8a6; }
    .stat-card--teal::after  { background: linear-gradient(90deg, #14b8a6, #5eead4); }
    .stat-card--teal .stat-icon { background: #f0fdfa; color: #0d9488; }
    .stat-card--teal .stat-value { color: #0f766e; }

    /* inner layout */
    .stat-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 14px;
    }

    .stat-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .stat-icon svg { width: 20px; height: 20px; }

    .stat-label {
        font-family: 'DM Sans', sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: #94a3b8;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1;
        margin-bottom: 6px;
    }

    .stat-value {
        font-family: 'Syne', sans-serif;
        font-size: 28px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.5px;
    }

    .stat-footer {
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid #f1f5f9;
        font-family: 'DM Sans', sans-serif;
        font-size: 11.5px;
        color: #94a3b8;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .stat-footer span.active-dot {
        display: inline-block;
        width: 7px; height: 7px;
        background: #22c55e;
        border-radius: 50%;
        box-shadow: 0 0 0 2px #dcfce7;
    }

        /* visitor sumamry */
        .visitor-summary-stats {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 8px;
        }

        .vsummary-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 14px;
            border-radius: 10px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            transition: box-shadow 0.2s;
        }

        .vsummary-item:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
        }

        .vsummary-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .vsummary-today {
            background: #dbeafe;
            color: #2563eb;
        }

        .vsummary-month {
            background: #dcfce7;
            color: #16a34a;
        }

        .vsummary-total {
            background: #fef3c7;
            color: #d97706;
        }

        .vsummary-label {
            font-size: 12px;
            color: #64748b;
            font-weight: 500;
        }

        .vsummary-value {
            font-size: 20px;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.2;
        }
    </style>
@endpush

{{-- ============================================
   JAVASCRIPT - ApexCharts
   ============================================ --}}
@push('scripts')
    <script>
        (function() {
            @php
                $chartDates = $visitorChartDates ?? ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
                $chartCounts = $visitorChartCounts ?? [120, 95, 140, 88, 175, 210, 162];
            @endphp
            var visitorDates = @json($chartDates);
            var visitorCounts = @json($chartCounts);

            var totalToday = {{ $visitors->total_today ?? 0 }};
            var totalMonth = {{ $visitors->total_in_month ?? 0 }};
            var totalAll = {{ $visitors->total ?? 0 }};

            // ── Line / Area Chart ─────────────────────────────────────────────────
            var lineOptions = {
                series: [{
                    name: 'Visitors',
                    data: visitorCounts
                }],
                chart: {
                    type: 'area',
                    height: 300,
                    toolbar: {
                        show: false
                    },
                    fontFamily: 'Inter, system-ui, sans-serif',
                    animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 700
                    }
                },
                colors: ['#7C3AED'],
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 2.5
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shadeIntensity: 1,
                        opacityFrom: 0.35,
                        opacityTo: 0.03,
                    }
                },
                markers: {
                    size: 4,
                    colors: ['#7C3AED'],
                    strokeColors: '#fff',
                    strokeWidth: 2,
                    hover: {
                        size: 6
                    }
                },
                xaxis: {
                    categories: visitorDates,
                    labels: {
                        style: {
                            fontSize: '12px',
                            colors: '#64748b'
                        }
                    },
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    }
                },
                yaxis: {
                    labels: {
                        formatter: function(v) {
                            return v >= 1000 ? (v / 1000).toFixed(1) + 'k' : v;
                        },
                        style: {
                            fontSize: '12px',
                            colors: '#64748b'
                        }
                    }
                },
                grid: {
                    borderColor: '#e2e8f0',
                    strokeDashArray: 4,
                    padding: {
                        left: 5,
                        right: 5
                    }
                },
                tooltip: {
                    y: {
                        formatter: function(v) {
                            return v.toLocaleString() + ' visitors';
                        }
                    }
                }
            };

            var visitorLineChart = new ApexCharts(document.querySelector("#visitorLineChart"), lineOptions);
            visitorLineChart.render();

            // ── Donut Chart ───────────────────────────────────────────────────────
            var donutOptions = {
                series: [totalToday, totalMonth > totalToday ? totalMonth - totalToday : 0],
                chart: {
                    type: 'donut',
                    height: 200,
                    fontFamily: 'Inter, system-ui, sans-serif'
                },
                labels: ['Today', 'Rest of Month'],
                colors: ['#7C3AED', '#a78bfa'],
                legend: {
                    position: 'bottom',
                    fontSize: '12px'
                },
                dataLabels: {
                    enabled: false
                },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '70%',
                            labels: {
                                show: true,
                                total: {
                                    show: true,
                                    label: 'This Month',
                                    fontSize: '13px',
                                    fontWeight: 600,
                                    color: '#1e293b',
                                    formatter: function() {
                                        return totalMonth.toLocaleString();
                                    }
                                }
                            }
                        }
                    }
                },
                tooltip: {
                    y: {
                        formatter: function(v) {
                            return v.toLocaleString() + ' visitors';
                        }
                    }
                }
            };

            var visitorDonutChart = new ApexCharts(document.querySelector("#visitorDonutChart"), donutOptions);
            visitorDonutChart.render();

            // ── Period switcher ───────────────────────────────────────────────────
            document.querySelector('.visitor-period-select')?.addEventListener('change', function() {
                var days = parseInt(this.value);
                fetch('{{ route('admin.dashboard.visitor-data') }}?days=' + days)
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(data) {
                        visitorLineChart.updateOptions({
                            xaxis: {
                                categories: data.dates
                            }
                        });
                        visitorLineChart.updateSeries([{
                            name: 'Visitors',
                            data: data.counts
                        }]);
                    })
                    .catch(function(e) {
                        console.warn('Visitor data fetch failed', e);
                    });
            });
        })();
    </script>
@endpush