@extends('admin.layouts.master')

@section('title')
    Dashboard Overview
@endsection

@section('css')
    <style>
        :root {
            --primary-bg: #f8f9fc;
            --card-bg: #ffffff;
            --text-primary: #2d3748;
            --text-secondary: #4a5568;
            --border-color: #e2e8f0;
            --shadow-color: rgba(0, 0, 0, 0.05);
        }

        body {
            background-color: var(--primary-bg);
        }

        .card {
            border-radius: 15px;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px var(--shadow-color);
            transition: all 0.3s ease;
            border: none;
            overflow: hidden;
            background: var(--card-bg);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px var(--shadow-color);
        }

        .card-body {
            padding: 1.5rem;
        }

        .stat-icon {
            font-size: 2.8rem;
            opacity: 0.9;
            transition: all 0.3s ease;
        }

        .card:hover .stat-icon {
            transform: scale(1.1);
            opacity: 1;
        }

        .stat-value {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0.5rem 0;
            line-height: 1.2;
        }

        .stat-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Card Styles */
        .video-card {
            background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
            border-left: 4px solid #3b82f6;
        }

        .video-card .stat-icon {
            color: #3b82f6;
        }

        .content-card {
            background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
            border-left: 4px solid #f97316;
        }

        .content-card .stat-icon {
            color: #f97316;
        }

        .user-card {
            background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
            border-left: 4px solid #8b5cf6;
        }

        .user-card .stat-icon {
            color: #8b5cf6;
        }

        .voucher-card {
            background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%);
            border-left: 4px solid #ec4899;
        }

        .voucher-card .stat-icon {
            color: #ec4899;
        }

        /* Content Header Styling */
        .content-header {
            padding: 1.5rem 0;
            margin-bottom: 2rem;
            background: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
        }

        .content-header h1 {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .breadcrumb {
            background: transparent;
            padding: 0;
            margin: 0;
        }

        .breadcrumb-item a {
            color: var(--text-secondary);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .breadcrumb-item a:hover {
            color: #3b82f6;
        }

        .breadcrumb-item.active {
            color: var(--text-primary);
            font-weight: 500;
        }

        /* Content Area */
        .content {
            background-color: var(--primary-bg);
            min-height: calc(100vh - 60px);
            padding: 2rem 0;
        }

        .container-fluid {
            padding: 0 2rem;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .stat-value {
                font-size: 1.8rem;
            }

            .stat-icon {
                font-size: 2.2rem;
            }

            .card-body {
                padding: 1.25rem;
            }

            .container-fluid {
                padding: 0 1rem;
            }
        }

        /* Animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .card {
            animation: fadeInUp 0.5s ease-out;
        }

        .card:nth-child(2) {
            animation-delay: 0.1s;
        }

        .card:nth-child(3) {
            animation-delay: 0.2s;
        }

        .card:nth-child(4) {
            animation-delay: 0.3s;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--primary-bg);
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
@endsection

@section('content')
    <!-- Content Header -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">
                        <i class="bi bi-speedometer2 me-2"></i>
                        Dashboard Overview
                    </h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#"><i class="bi bi-house-door me-1"></i>Home</a></li>
                        <li class="breadcrumb-item active">Overview</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Main content -->
    <div class="content">
        <div class="container-fluid">
            <!-- Statistics Cards -->
            <div class="row">
                <!-- Videos Stats -->
                <div class="col-md-3">
                    <div class="card video-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="stat-label">Total Videos</h6>
                                    <h2 class="stat-value">{{ number_format($videosCount) }}</h2>
                                </div>
                                <div class="stat-icon">
                                    <i class="bi bi-camera-video"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Content Stats -->
                <div class="col-md-3">
                    <div class="card content-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="stat-label">Total Content</h6>
                                    <h2 class="stat-value">{{ number_format($contentsCount) }}</h2>
                                </div>
                                <div class="stat-icon">
                                    <i class="bi bi-file-text"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Accepted Users Stats -->
                <div class="col-md-3">
                    <div class="card user-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="stat-label">Accepted Users</h6>
                                    <h2 class="stat-value">{{ number_format($acceptedUsersCount) }}</h2>
                                </div>
                                <div class="stat-icon">
                                    <i class="bi bi-person-check"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Unaccepted Users Stats -->
                <div class="col-md-3">
                    <div class="card user-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="stat-label">Unaccepted Users</h6>
                                    <h2 class="stat-value">{{ number_format($unacceptedUsersCount) }}</h2>
                                </div>
                                <div class="stat-icon">
                                    <i class="bi bi-person-x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Second Row -->
            <div class="row mt-4">
                <!-- Vouchers Stats -->
                <div class="col-md-3">
                    <div class="card voucher-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="stat-label">Available Vouchers</h6>
                                    <h2 class="stat-value">{{ number_format($vouchersCount) }}</h2>
                                </div>
                                <div class="stat-icon">
                                    <i class="bi bi-ticket-perforated"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Category Distribution Chart
            const ctx = document.getElementById('categoryDistributionChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: {!! json_encode($categoryDistribution->pluck('category_name')) !!},
                    datasets: [{
                        data: {!! json_encode($categoryDistribution->pluck('count')) !!},
                        backgroundColor: [
                            '#007bff',
                            '#28a745',
                            '#fd7e14',
                            '#dc3545',
                            '#6f42c1',
                            '#20c997',
                            '#17a2b8',
                            '#ffc107'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                padding: 20,
                                font: {
                                    size: 12
                                }
                            }
                        }
                    },
                    cutout: '60%'
                }
            });
        });
    </script>
@endsection