@extends('layouts.dashboard')



@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-700 mb-0">Dashboard</h4>
</div>

<div class="row g-4 mb-4">
    <!-- Stat 1 -->
    <div class="col-md-3">
        <div class="stat-card d-flex align-items-center justify-content-between h-100">
            <div>
                <p class="stat-label mb-1">Total Users</p>
                <h3 class="stat-value mb-0">{{ $stats['users'] }}</h3>
            </div>
            <div class="stat-icon" style="background:#e0e7ff;color:#4f46e5;">
                <i class="fas fa-users"></i>
            </div>
        </div>
    </div>
    <!-- Stat 2 -->
    <div class="col-md-3">
        <div class="stat-card d-flex align-items-center justify-content-between h-100">
            <div>
                <p class="stat-label mb-1">Total Revenue</p>
                <h3 class="stat-value mb-0">${{ number_format($stats['revenue'], 2) }}</h3>
            </div>
            <div class="stat-icon" style="background:#dcfce7;color:#16a34a;">
                <i class="fas fa-dollar-sign"></i>
            </div>
        </div>
    </div>
    <!-- Stat 3 -->
    <div class="col-md-3">
        <div class="stat-card d-flex align-items-center justify-content-between h-100">
            <div>
                <p class="stat-label mb-1">Total Companies</p>
                <h3 class="stat-value mb-0">{{ $stats['companies'] }}</h3>
            </div>
            <div class="stat-icon" style="background:#ffedd5;color:#ea580c;">
                <i class="fas fa-building"></i>
            </div>
        </div>
    </div>
    <!-- Stat 4 -->
    <div class="col-md-3">
        <div class="stat-card d-flex align-items-center justify-content-between h-100">
            <div>
                <p class="stat-label mb-1">Total Jobs</p>
                <h3 class="stat-value mb-0">{{ $stats['jobs'] }}</h3>
            </div>
            <div class="stat-icon" style="background:#e0f2fe;color:#0284c7;">
                <i class="fas fa-briefcase"></i>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-md-8">
        <div class="card-dark h-100 border-0 shadow-sm">
            <h6 class="fw-600 mb-4">Job Postings Overview</h6>
            <div id="jobPostingsChart" style="height: 250px; width: 100%;"></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card-dark h-100 border-0 shadow-sm">
            <h6 class="fw-600 mb-4">Recent Users</h6>
            <div class="d-flex flex-column gap-3">
                @foreach($recentUsers as $ru)
                <div class="d-flex align-items-center gap-3">
                    <img src="{{ $ru->avatar_url ?? asset('images/default-avatar.png') }}" class="rounded-circle bg-light" width="40" height="40" alt="">
                    <div>
                        <h6 class="mb-0 fw-600" style="font-size:0.9rem;">{{ $ru->name }}</h6>
                        <small class="text-muted">{{ $ru->created_at->diffForHumans() }}</small>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var jobData = {!! json_encode($monthlyJobs->pluck('count')) !!};
        var monthLabels = {!! json_encode($monthlyJobs->pluck('month')->map(function($m) { 
            return date("M", mktime(0, 0, 0, $m, 1)); 
        })) !!};

        var options = {
            series: [{
                name: 'Job Postings',
                data: jobData
            }],
            chart: {
                type: 'area',
                height: 250,
                toolbar: { show: false },
                fontFamily: "'DM Sans', sans-serif"
            },
            colors: ['#0d9488'],
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0.4,
                    opacityTo: 0.0,
                    stops: [0, 100]
                }
            },
            dataLabels: { enabled: false },
            stroke: {
                curve: 'smooth',
                width: 2
            },
            xaxis: {
                categories: monthLabels,
                axisBorder: { show: false },
                axisTicks: { show: false },
                labels: {
                    style: { colors: '#64748b' }
                }
            },
            yaxis: {
                labels: {
                    style: { colors: '#64748b' },
                    formatter: function (val) { return Math.floor(val); }
                }
            },
            grid: {
                borderColor: '#e2e8f0',
                strokeDashArray: 4,
                yaxis: { lines: { show: true } },
                padding: { top: 0, right: 0, bottom: 0, left: 10 }
            },
            tooltip: {
                theme: 'light'
            }
        };

        var chart = new ApexCharts(document.querySelector("#jobPostingsChart"), options);
        chart.render();
    });
</script>
@endsection