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

@section('breadcrumb')
    <li class="breadcrumb-item active">Dashboard</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Dashboard</h1>
        <p class="page-subtitle">Welcome back, {{ auth()->user()->name }} — {{ now()->format('l, d F Y') }}</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.applications.index') }}?status=submitted" class="btn btn-sm btn-primary">
            <i class="bi bi-file-earmark-plus me-1"></i> New Applications
        </a>
        <a href="{{ route('admin.attendance.mark') }}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-calendar-check me-1"></i> Mark Attendance
        </a>
    </div>
</div>

<!-- STAT CARDS -->
<div class="row g-3 mb-4">
    <div class="col-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon" style="background:#dbeafe">
                <i class="bi bi-people-fill" style="color:#2563eb"></i>
            </div>
            <div>
                <div class="stat-value">{{ number_format($stats['total_students']) }}</div>
                <div class="stat-label">Active Students</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon" style="background:#dcfce7">
                <i class="bi bi-person-badge-fill" style="color:#16a34a"></i>
            </div>
            <div>
                <div class="stat-value">{{ number_format($stats['total_employees']) }}</div>
                <div class="stat-label">Employees</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon" style="background:#fef3c7">
                <i class="bi bi-file-earmark-person-fill" style="color:#d97706"></i>
            </div>
            <div>
                <div class="stat-value">{{ number_format($stats['pending_applications']) }}</div>
                <div class="stat-label">Pending Applications</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon" style="background:#ede9fe">
                <i class="bi bi-cash-coin" style="color:#7c3aed"></i>
            </div>
            <div>
                <div class="stat-value">₹{{ number_format($stats['fees_collected_month'] / 1000, 1) }}K</div>
                <div class="stat-label">Fees This Month</div>
                <div class="stat-change text-danger">
                    <i class="bi bi-clock-history"></i> ₹{{ number_format($stats['fees_pending']) }} pending
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <!-- MONTHLY FEE CHART -->
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-bar-chart-line me-2 text-primary"></i>Monthly Fee Collection</span>
                <span class="text-muted" style="font-size:0.78rem">Last 6 months</span>
            </div>
            <div class="card-body">
                <canvas id="feeChart" height="90"></canvas>
            </div>
        </div>
    </div>

    <!-- TODAY'S ATTENDANCE -->
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-calendar-check me-2 text-success"></i>Today's Attendance
            </div>
            <div class="card-body">
                @if($todayAttendance && $todayAttendance->total > 0)
                    <div class="text-center mb-3">
                        <canvas id="attendChart" width="160" height="160" style="max-width:160px"></canvas>
                    </div>
                    <div class="row g-2 text-center">
                        <div class="col-4">
                            <div style="font-size:1.2rem; font-weight:700; color:#16a34a">{{ $todayAttendance->present }}</div>
                            <div style="font-size:0.75rem; color:#64748b">Present</div>
                        </div>
                        <div class="col-4">
                            <div style="font-size:1.2rem; font-weight:700; color:#dc2626">{{ $todayAttendance->absent }}</div>
                            <div style="font-size:0.75rem; color:#64748b">Absent</div>
                        </div>
                        <div class="col-4">
                            <div style="font-size:1.2rem; font-weight:700; color:#d97706">{{ $todayAttendance->late }}</div>
                            <div style="font-size:0.75rem; color:#64748b">Late</div>
                        </div>
                    </div>
                @else
                    <div class="text-center py-4 text-muted">
                        <i class="bi bi-calendar-x" style="font-size:2.5rem; opacity:0.3"></i>
                        <p class="mt-2 mb-0" style="font-size:0.85rem">No attendance marked today</p>
                        <a href="{{ route('admin.attendance.mark') }}" class="btn btn-sm btn-primary mt-2">Mark Now</a>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- RECENT APPLICATIONS -->
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-file-earmark-person me-2 text-warning"></i>Recent Applications</span>
                <a href="{{ route('admin.applications.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>App No.</th>
                            <th>Student</th>
                            <th>Class</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentApplications as $app)
                        <tr>
                            <td><code style="font-size:0.8rem">{{ $app->application_no }}</code></td>
                            <td>
                                <div style="font-weight:500">{{ $app->student_name }}</div>
                                <div style="font-size:0.75rem; color:#64748b">{{ $app->mobile_no }}</div>
                            </td>
                            <td style="font-size:0.82rem">{{ $app->class->name ?? '—' }}</td>
                            <td>
                                <span class="badge badge-soft-{{ $app->status_badge }}">
                                    {{ ucfirst(str_replace('_', ' ', $app->status)) }}
                                </span>
                            </td>
                            <td>
                                <a href="{{ route('admin.applications.show', $app->id) }}" class="btn btn-xs btn-light" style="padding:3px 8px; font-size:0.75rem">
                                    View
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- CLASS DISTRIBUTION -->
    <div class="col-lg-5">
        <div class="card">
            <div class="card-header">
                <i class="bi bi-diagram-3 me-2 text-info"></i>Students by Class
            </div>
            <div class="card-body">
                @foreach($classDistribution as $row)
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-1" style="font-size:0.82rem">
                        <span>{{ $row->class_name }}</span>
                        <span class="fw-600">{{ $row->count }}</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-primary" 
                             style="width: {{ $classDistribution->max('count') > 0 ? ($row->count / $classDistribution->max('count') * 100) : 0 }}%">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Fee Collection Chart
const feeData = @json($monthlyFees);
const labels = feeData.map(d => {
    const [y, m] = d.month.split('-');
    return new Date(y, m-1).toLocaleString('default', {month:'short', year:'2-digit'});
});
const values = feeData.map(d => parseFloat(d.total));

new Chart(document.getElementById('feeChart'), {
    type: 'bar',
    data: {
        labels,
        datasets: [{
            label: 'Amount (₹)',
            data: values,
            backgroundColor: 'rgba(37,99,168,0.85)',
            borderRadius: 6,
            borderSkipped: false,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
            y: { ticks: { callback: v => '₹' + (v/1000).toFixed(0) + 'K' }, grid: { color: '#f1f5f9' } },
            x: { grid: { display: false } }
        }
    }
});

// Attendance Donut
@if($todayAttendance && $todayAttendance->total > 0)
new Chart(document.getElementById('attendChart'), {
    type: 'doughnut',
    data: {
        labels: ['Present', 'Absent', 'Late'],
        datasets: [{
            data: [{{ $todayAttendance->present }}, {{ $todayAttendance->absent }}, {{ $todayAttendance->late }}],
            backgroundColor: ['#16a34a', '#dc2626', '#d97706'],
            borderWidth: 0,
        }]
    },
    options: {
        cutout: '70%',
        plugins: { legend: { display: false } }
    }
});
@endif
</script>
@endpush