@extends('layouts.admin')

@section('styles')
<style>
    .stat-card {
        border-radius: 16px;
        border: none;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    }

    .stat-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--card-color-1), var(--card-color-2));
    }

    .stat-card.card-primary {
        --card-color-1: #667eea;
        --card-color-2: #764ba2;
    }

    .stat-card.card-success {
        --card-color-1: #11998e;
        --card-color-2: #38ef7d;
    }

    .stat-card.card-info {
        --card-color-1: #4facfe;
        --card-color-2: #00f2fe;
    }

    .stat-card.card-warning {
        --card-color-1: #f093fb;
        --card-color-2: #f5576c;
    }

    .stat-card.card-danger {
        --card-color-1: #fa709a;
        --card-color-2: #fee140;
    }

    .stat-card.card-secondary {
        --card-color-1: #a8edea;
        --card-color-2: #fed6e3;
    }

    .stat-icon-wrapper {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--card-color-1), var(--card-color-2));
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .stat-icon-wrapper i {
        color: white;
        font-size: 28px;
    }

    .stat-label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6c757d;
        margin-bottom: 8px;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: #2d3748;
        line-height: 1;
    }

    .stat-card .card-body {
        padding: 1.5rem;
    }
</style>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="h3 mb-1 text-gray-800 fw-bold">Dashboard Overview</h2>
        <p class="text-muted mb-0">Welcome back! Here's what's happening with your website.</p>
    </div>
</div>

<div class="row g-4">
    <!-- Services Card -->
    <div class="col-xl-4 col-md-6">
        <div class="card stat-card card-primary shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-label">Services</div>
                        <div class="stat-value">{{ $counts['services'] }}</div>
                    </div>
                    <div class="stat-icon-wrapper">
                        <i class="fas fa-cogs"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Projects Card -->
    <div class="col-xl-4 col-md-6">
        <div class="card stat-card card-success shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-label">Projects</div>
                        <div class="stat-value">{{ $counts['projects'] }}</div>
                    </div>
                    <div class="stat-icon-wrapper">
                        <i class="fas fa-project-diagram"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Team Members Card -->
    <div class="col-xl-4 col-md-6">
        <div class="card stat-card card-info shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-label">Team Members</div>
                        <div class="stat-value">{{ $counts['team_members'] }}</div>
                    </div>
                    <div class="stat-icon-wrapper">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Testimonials Card -->
    <div class="col-xl-4 col-md-6">
        <div class="card stat-card card-warning shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-label">Testimonials</div>
                        <div class="stat-value">{{ $counts['testimonials'] }}</div>
                    </div>
                    <div class="stat-icon-wrapper">
                        <i class="fas fa-comments"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Messages Card -->
    <div class="col-xl-4 col-md-6">
        <div class="card stat-card card-danger shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-label">Messages</div>
                        <div class="stat-value">{{ $counts['contact_submissions'] }}</div>
                    </div>
                    <div class="stat-icon-wrapper">
                        <i class="fas fa-envelope"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Subscribers Card -->
    <div class="col-xl-4 col-md-6">
        <div class="card stat-card card-secondary shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="stat-label">Subscribers</div>
                        <div class="stat-value">{{ $counts['newsletter_subscribers'] }}</div>
                    </div>
                    <div class="stat-icon-wrapper">
                        <i class="fas fa-paper-plane"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <!-- Recent Projects -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow mb-4 border-0 h-100">
            <div class="card-header py-3 bg-white d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Recent Projects</h6>
                <a href="{{ route('admin.projects.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="card-body">
                <div class="list-group list-group-flush">
                    @forelse($recentProjects as $project)
                        <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <div>
                                <h6 class="mb-0">{{ $project->title }}</h6>
                                <small class="text-muted">{{ $project->category }}</small>
                            </div>
                            <span class="badge bg-light text-dark">{{ $project->created_at->diffForHumans() }}</span>
                        </div>
                    @empty
                        <div class="text-center py-4 text-muted">
                            <i class="fas fa-folder-open fa-2x mb-2"></i>
                            <p>No projects found.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <!-- Chart -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow mb-4 border-0 h-100">
            <div class="card-header py-3 bg-white">
                <h6 class="m-0 font-weight-bold text-primary">Projects by Category</h6>
            </div>
            <div class="card-body">
                <div class="chart-pie pt-4 pb-2">
                    <canvas id="myPieChart"></canvas>
                </div>
                <div class="mt-4 text-center small text-muted">
                    <span class="mr-2">
                        <i class="fas fa-circle text-primary"></i> Web
                    </span>
                    <span class="mr-2">
                        <i class="fas fa-circle text-success"></i> Mobile
                    </span>
                    <span class="mr-2">
                        <i class="fas fa-circle text-info"></i> Design
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Analytics Overview (Last 30 Days) -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow border-0">
            <div class="card-header py-3 bg-white d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Analytics Overview (Last 30 Days)</h6>
                <a href="{{ route('admin.analytics.index') }}" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-chart-bar me-1"></i>View Full Analytics
                </a>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <div class="rounded-circle bg-primary bg-opacity-10 p-3">
                                    <i class="fas fa-eye fa-2x text-primary"></i>
                                </div>
                            </div>
                            <div>
                                <div class="text-muted small">Page Views</div>
                                <div class="h4 mb-0">{{ number_format($analyticsOverview['total_views']) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <div class="rounded-circle bg-success bg-opacity-10 p-3">
                                    <i class="fas fa-users fa-2x text-success"></i>
                                </div>
                            </div>
                            <div>
                                <div class="text-muted small">Unique Visitors</div>
                                <div class="h4 mb-0">{{ number_format($analyticsOverview['unique_visitors']) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <div class="rounded-circle bg-info bg-opacity-10 p-3">
                                    <i class="fas fa-check-circle fa-2x text-info"></i>
                                </div>
                            </div>
                            <div>
                                <div class="text-muted small">Conversions</div>
                                <div class="h4 mb-0">{{ number_format($analyticsOverview['total_conversions']) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12 mb-4">
        <div class="card shadow mb-4 border-0">
            <div class="card-header py-3 bg-white d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary">Quick Actions</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3 col-6">
                        <a href="{{ route('admin.services.create') }}" class="btn btn-primary w-100 h-100 py-3 d-flex flex-column align-items-center justify-content-center">
                            <i class="fas fa-plus-circle fa-2x mb-2"></i>
                            <span>Add Service</span>
                        </a>
                    </div>
                    <div class="col-md-3 col-6">
                        <a href="{{ route('admin.projects.create') }}" class="btn btn-success w-100 h-100 py-3 d-flex flex-column align-items-center justify-content-center">
                            <i class="fas fa-plus-circle fa-2x mb-2"></i>
                            <span>Add Project</span>
                        </a>
                    </div>
                    <div class="col-md-3 col-6">
                        <a href="{{ route('admin.team_members.create') }}" class="btn btn-info text-white w-100 h-100 py-3 d-flex flex-column align-items-center justify-content-center">
                            <i class="fas fa-user-plus fa-2x mb-2"></i>
                            <span>Add Member</span>
                        </a>
                    </div>
                    <div class="col-md-3 col-6">
                        <a href="{{ route('admin.testimonials.create') }}" class="btn btn-warning text-white w-100 h-100 py-3 d-flex flex-column align-items-center justify-content-center">
                            <i class="fas fa-comment-medical fa-2x mb-2"></i>
                            <span>Add Testimonial</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var ctx = document.getElementById("myPieChart");
        var myPieChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: @json($chartData['labels']),
                datasets: [{
                    data: @json($chartData['data']),
                    backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b', '#858796'],
                    hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf', '#dda20a', '#be2617', '#60616f'],
                    hoverBorderColor: "rgba(234, 236, 244, 1)",
                }],
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    backgroundColor: "rgb(255,255,255)",
                    bodyFontColor: "#858796",
                    borderColor: '#dddfeb',
                    borderWidth: 1,
                    xPadding: 15,
                    yPadding: 15,
                    displayColors: false,
                    caretPadding: 10,
                },
                legend: {
                    display: false
                },
                cutoutPercentage: 80,
            },
        });
    });
</script>
@endpush