@extends('layouts.admin')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@push('styles')
<style>
    .welcome-bar { background:linear-gradient(135deg,rgba(108,63,232,.2),rgba(168,85,247,.1));border:1px solid rgba(108,63,232,.25);border-radius:16px;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:16px }
    .welcome-text h2 { font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800 }
    .welcome-text p { color:var(--text-muted);font-size:.875rem;margin-top:4px }
    canvas { max-height: 220px; }
</style>
@endpush

@section('content')

<!-- WELCOME -->
<div class="welcome-bar">
    <div class="welcome-text">
        <h2>👋 Welcome back, {{ auth()->user()->name ?? 'Admin' }}!</h2>
        <p>Here's what's happening on your platform today — {{ now()->format('D, d M Y') }}</p>
    </div>
    <div style="display:flex;gap:10px">
        <a href="{{ route('admin.careers.index') }}" class="btn btn-ghost btn-sm"><i class="fas fa-plus"></i> Add Career</a>
        <a href="{{ route('admin.bookings.index') }}" class="btn btn-primary btn-sm"><i class="fas fa-bell"></i> Pending ({{ $stats['pending_bookings'] }})</a>
    </div>
</div>

<!-- STATS -->
<div class="grid-4" style="margin-bottom:28px">
    <div class="stat-card">
        <div class="stat-icon" style="background:rgba(108,63,232,.15);color:#A78BFA"><i class="fas fa-users"></i></div>
        <div class="stat-value">{{ number_format($stats['total_students']) }}</div>
        <div class="stat-label">Total Students</div>
        <div class="stat-change up"><i class="fas fa-arrow-up fa-xs"></i> Growing</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background:rgba(0,212,161,.12);color:#00D4A1"><i class="fas fa-user-tie"></i></div>
        <div class="stat-value">{{ number_format($stats['total_counselors']) }}</div>
        <div class="stat-label">Counselors</div>
        <div class="stat-change up"><i class="fas fa-arrow-up fa-xs"></i> Active</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background:rgba(255,107,53,.12);color:#FF6B35"><i class="fas fa-calendar-check"></i></div>
        <div class="stat-value">{{ number_format($stats['total_bookings']) }}</div>
        <div class="stat-label">Total Bookings</div>
        <div class="stat-change" style="color:#FF6B35"><i class="fas fa-clock fa-xs"></i> {{ $stats['pending_bookings'] }} pending</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background:rgba(251,191,36,.12);color:#FBBF24"><i class="fas fa-money-bill-wave"></i></div>
        <div class="stat-value">{{ number_format($stats['revenue']/1000, 1) }}K</div>
        <div class="stat-label">Revenue (PKR)</div>
        <div class="stat-change up"><i class="fas fa-arrow-up fa-xs"></i> Paid sessions</div>
    </div>
</div>

<div class="grid-2" style="margin-bottom:28px;align-items:start">
    <div class="grid-2">
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(108,63,232,.1);color:#A78BFA"><i class="fas fa-briefcase"></i></div>
            <div class="stat-value">{{ $stats['total_careers'] }}</div>
            <div class="stat-label">Career Fields</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon" style="background:rgba(0,212,161,.1);color:#00D4A1"><i class="fas fa-newspaper"></i></div>
            <div class="stat-value">{{ $stats['total_blogs'] }}</div>
            <div class="stat-label">Blog Posts</div>
        </div>
        <div class="stat-card" style="grid-column:span 2">
            <div class="stat-icon" style="background:rgba(255,107,53,.1);color:#FF6B35"><i class="fas fa-check-circle"></i></div>
            <div class="stat-value">{{ $stats['confirmed'] }}</div>
            <div class="stat-label">Confirmed Bookings</div>
            <div class="stat-change up"><i class="fas fa-arrow-up fa-xs"></i> Good conversion rate</div>
        </div>
    </div>

    <!-- CHART: Booking Status -->
    <div class="card">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
            <h3 style="font-size:1rem;font-weight:700">Bookings by Status</h3>
            <span class="badge badge-primary">Live</span>
        </div>
        <canvas id="statusChart"></canvas>
    </div>
</div>

<!-- CHARTS ROW -->
<div class="grid-2" style="margin-bottom:28px">
    <div class="card">
        <div style="margin-bottom:20px">
            <h3 style="font-size:1rem;font-weight:700">Monthly Bookings</h3>
            <p style="font-size:.8rem;color:var(--text-muted);margin-top:3px">Last 6 months trend</p>
        </div>
        <canvas id="bookingsChart"></canvas>
    </div>
    <div class="card">
        <div style="margin-bottom:20px">
            <h3 style="font-size:1rem;font-weight:700">Student Registrations</h3>
            <p style="font-size:.8rem;color:var(--text-muted);margin-top:3px">Monthly new signups</p>
        </div>
        <canvas id="studentsChart"></canvas>
    </div>
</div>

<!-- RECENT DATA -->
<div class="grid-2">
    <!-- Recent Bookings -->
    <div class="card">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
            <h3 style="font-size:1rem;font-weight:700">Recent Bookings</h3>
            <a href="{{ route('admin.bookings.index') }}" class="btn btn-outline btn-sm">View All</a>
        </div>
        <div style="display:flex;flex-direction:column;gap:12px">
            @forelse($recentBookings as $booking)
            <div style="display:flex;align-items:center;gap:12px;padding:12px;background:var(--dark-3);border-radius:10px">
                <div class="avatar" style="width:36px;height:36px;font-size:.8rem">{{ substr($booking->user->name??'U',0,1) }}</div>
                <div style="flex:1;min-width:0">
                    <div style="font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $booking->user->name ?? 'Student' }}</div>
                    <div style="font-size:.75rem;color:var(--text-muted)">with {{ $booking->counselor->user->name ?? 'Counselor' }}</div>
                </div>
                <div style="text-align:right">
                    <span class="badge {{ $booking->status=='confirmed'?'badge-success':($booking->status=='pending'?'badge-warning':'badge-danger') }}">{{ ucfirst($booking->status) }}</span>
                    <div style="font-size:.72rem;color:var(--text-muted);margin-top:3px">{{ optional($booking->booking_date)->format('d M') ?? 'TBD' }}</div>
                </div>
            </div>
            @empty
            <div style="text-align:center;padding:30px;color:var(--text-muted)">
                <i class="fas fa-calendar-xmark" style="font-size:2rem;margin-bottom:10px;display:block"></i>
                No bookings yet
            </div>
            @endforelse
        </div>
    </div>

    <!-- Recent Students -->
    <div class="card">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
            <h3 style="font-size:1rem;font-weight:700">Recent Students</h3>
            <a href="{{ route('admin.users') }}" class="btn btn-outline btn-sm">View All</a>
        </div>
        <div style="display:flex;flex-direction:column;gap:12px">
            @forelse($recentStudents as $student)
            <div style="display:flex;align-items:center;gap:12px;padding:12px;background:var(--dark-3);border-radius:10px">
                <div class="avatar" style="width:36px;height:36px;font-size:.8rem">{{ substr($student->name,0,1) }}</div>
                <div style="flex:1;min-width:0">
                    <div style="font-size:.875rem;font-weight:600">{{ $student->name }}</div>
                    <div style="font-size:.75rem;color:var(--text-muted)">{{ $student->email }}</div>
                </div>
                <div style="font-size:.75rem;color:var(--text-muted)">{{ $student->created_at->diffForHumans() }}</div>
            </div>
            @empty
            <div style="text-align:center;padding:30px;color:var(--text-muted)">
                <i class="fas fa-user-slash" style="font-size:2rem;margin-bottom:10px;display:block"></i>
                No students yet
            </div>
            @endforelse
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script>
Chart.defaults.color = '#8888A8';
Chart.defaults.borderColor = 'rgba(255,255,255,0.06)';

// Monthly Bookings
const mbLabels = @json($monthlyBookings->map(fn($m) => date('M', mktime(0,0,0,$m->month,1)) ));
const mbData   = @json($monthlyBookings->pluck('count'));
new Chart(document.getElementById('bookingsChart'), {
    type: 'line',
    data: {
        labels: mbLabels.length ? mbLabels : ['Jan','Feb','Mar','Apr','May','Jun'],
        datasets: [{
            label: 'Bookings',
            data: mbData.length ? mbData : [5,8,12,9,15,11],
            borderColor: '#6C3FE8',
            backgroundColor: 'rgba(108,63,232,0.15)',
            borderWidth: 2.5,
            tension: 0.4,
            fill: true,
            pointBackgroundColor: '#6C3FE8',
            pointRadius: 4,
        }]
    },
    options: { plugins:{legend:{display:false}}, scales:{x:{grid:{color:'rgba(255,255,255,0.04)'}},y:{grid:{color:'rgba(255,255,255,0.04)'},beginAtZero:true}} }
});

// Monthly Students
const msLabels = @json($monthlyStudents->map(fn($m) => date('M', mktime(0,0,0,$m->month,1)) ));
const msData   = @json($monthlyStudents->pluck('count'));
new Chart(document.getElementById('studentsChart'), {
    type: 'bar',
    data: {
        labels: msLabels.length ? msLabels : ['Jan','Feb','Mar','Apr','May','Jun'],
        datasets: [{
            label: 'Students',
            data: msData.length ? msData : [20,35,28,42,38,55],
            backgroundColor: 'rgba(0,212,161,0.7)',
            borderRadius: 6,
        }]
    },
    options: { plugins:{legend:{display:false}}, scales:{x:{grid:{color:'rgba(255,255,255,0.04)'}},y:{grid:{color:'rgba(255,255,255,0.04)'},beginAtZero:true}} }
});

// Status Doughnut
const statusData = @json($bookingsByStatus);
new Chart(document.getElementById('statusChart'), {
    type: 'doughnut',
    data: {
        labels: statusData.map(s=>s.status.charAt(0).toUpperCase()+s.status.slice(1)),
        datasets: [{
            data: statusData.map(s=>s.count),
            backgroundColor: ['rgba(255,107,53,0.8)','rgba(0,212,161,0.8)','rgba(229,62,62,0.8)','rgba(108,63,232,0.8)'],
            borderWidth: 0,
            hoverOffset: 6,
        }]
    },
    options: {
        plugins: { legend: { position:'bottom', labels:{ padding:16, usePointStyle:true } } },
        cutout: '65%',
    }
});
</script>
@endpush