@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['complete_applications']) }}</div>
                    <div class="stat-label">Complete Applications</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">00</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['total_student_applications_payment'], 1) }}K</div>
                    <div class="stat-label">Total Application Fees</div>
                    {{-- <div class="stat-change text-danger">
                    <i class="bi bi-clock-history"></i> ₹3000 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->form_number ?? '--' }}</code></td>
                                    <td>
                                        <div style="font-weight:500">{{ $app->applicant_name }}</div>
                                        <div style="font-size:0.75rem; color:#64748b">{{ $app->contact_no }}</div>
                                    </td>
                                    <td style="font-size:0.82rem">{{ $app->course . ' ' . ($app->subject ?? '—') }}</td>
                                    <td>
                                        @php
                                            $statuses = [
                                                'step1_complete' => ['primary', 'Step 1 Completed'],
                                                'payment_completed' => ['info', 'Payment Completed'],
                                                'submitted' => ['warning', 'Document Submitted'],
                                                'application_selected' => ['success', 'Shortlisted'],
                                                'verified' => ['secondary', 'Admitted'],
                                            ];

                                            [$badgeClass, $label] = $statuses[$app->status] ?? [
                                                'dark',
                                                ucfirst(str_replace('_', ' ', $app->status)),
                                            ];
                                        @endphp

                                        <span class="badge bg-{{ $badgeClass }}">
                                            {{ $label }}
                                        </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 Application
                </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