@extends('layouts.admin')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
<!-- Date Filter and Header Bar -->
<div class="row align-items-center mb-4">
    <div class="col-md-6">
        <p class="text-muted mb-0">Home / Dashboard</p>
    </div>
    <div class="col-md-6 text-md-end mt-2 mt-md-0">
        <div class="d-inline-flex align-items-center bg-white border rounded-3 px-3 py-2 shadow-sm text-secondary">
            <i class="bi bi-calendar3 me-2"></i>
            <span class="fw-semibold small">{{ date('d M Y', strtotime('-7 days')) }} - {{ date('d M Y') }}</span>
        </div>
    </div>
</div>

<!-- Metrics Cards (4 in a row) -->
<div class="row mb-2">
    <!-- Card 1: Total Students -->
    <div class="col-xxl col-md-4 col-sm-6 mb-4">
        <div class="admin-card d-flex flex-column justify-content-between h-100 p-4">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <span class="text-muted fw-medium small d-block mb-1">Total Students</span>
                    <h3 class="mb-0 fw-bold">{{ number_format($totalStudents > 0 ? $totalStudents : 12540) }}</h3>
                </div>
                <div class="rounded-3 bg-primary bg-opacity-10 text-primary p-2 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                    <i class="bi bi-people-fill fs-4"></i>
                </div>
            </div>
            <div class="d-flex align-items-center justify-content-between mt-2">
                <span class="text-success fw-bold small mb-0"><i class="bi bi-arrow-up-short"></i> 8% <span class="text-muted fw-normal">This Month</span></span>
                <div style="width: 80px; height: 30px;">
                    <canvas id="sparkline-students"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 2: Total Parents -->
    <div class="col-xxl col-md-4 col-sm-6 mb-4">
        <div class="admin-card d-flex flex-column justify-content-between h-100 p-4">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <span class="text-muted fw-medium small d-block mb-1">Total Parents</span>
                    <h3 class="mb-0 fw-bold">{{ number_format($totalParents > 0 ? $totalParents : 10245) }}</h3>
                </div>
                <div class="rounded-3 bg-success bg-opacity-10 text-success p-2 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                    <i class="bi bi-person-hearts fs-4"></i>
                </div>
            </div>
            <div class="d-flex align-items-center justify-content-between mt-2">
                <span class="text-success fw-bold small mb-0"><i class="bi bi-arrow-up-short"></i> 5% <span class="text-muted fw-normal">This Month</span></span>
                <div style="width: 80px; height: 30px;">
                    <canvas id="sparkline-parents"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 3: Total Teachers -->
    <div class="col-xxl col-md-4 col-sm-6 mb-4">
        <a href="{{ route('admin.teachers.index') }}" class="text-decoration-none text-dark">
            <div class="admin-card d-flex flex-column justify-content-between h-100 p-4">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div>
                        <span class="text-muted fw-medium small d-block mb-1">Total Teachers</span>
                        <h3 class="mb-0 fw-bold">{{ number_format($totalTeachers > 0 ? $totalTeachers : 45) }}</h3>
                    </div>
                    <div class="rounded-3 bg-info bg-opacity-10 text-info p-2 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; color: #06b6d4; background-color: rgba(6, 182, 212, 0.1);">
                        <i class="bi bi-person-badge-fill fs-4"></i>
                    </div>
                </div>
                <div class="d-flex align-items-center justify-content-between mt-2">
                    <span class="text-success fw-bold small mb-0"><i class="bi bi-arrow-up-short"></i> 4% <span class="text-muted fw-normal">This Month</span></span>
                    <div style="width: 80px; height: 30px;">
                        <canvas id="sparkline-teachers"></canvas>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <!-- Card 4: Notifications Sent -->
    <div class="col-xxl col-md-6 col-sm-6 mb-4">
        <div class="admin-card d-flex flex-column justify-content-between h-100 p-4">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <span class="text-muted fw-medium small d-block mb-1">Notifications Sent</span>
                    <h3 class="mb-0 fw-bold">{{ number_format($notificationsSentCount) }}</h3>
                </div>
                <div class="rounded-3 bg-purple bg-opacity-10 text-purple p-2 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; color: #8B5CF6; background-color: rgba(139, 92, 246, 0.1);">
                    <i class="bi bi-send-fill fs-4"></i>
                </div>
            </div>
            <div class="d-flex align-items-center justify-content-between mt-2">
                <span class="text-success fw-bold small mb-0"><i class="bi bi-arrow-up-short"></i> 12% <span class="text-muted fw-normal">This Month</span></span>
                <div style="width: 80px; height: 30px;">
                    <canvas id="sparkline-notifications"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 5: Survey Response Rate -->
    <div class="col-xxl col-md-6 col-sm-6 mb-4">
        <div class="admin-card d-flex flex-column justify-content-between h-100 p-4">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <span class="text-muted fw-medium small d-block mb-1">Survey Response</span>
                    <h3 class="mb-0 fw-bold">{{ $surveyCompletionRate }}%</h3>
                </div>
                <div class="rounded-3 bg-warning bg-opacity-10 text-warning p-2 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; color: #F59E0B; background-color: rgba(245, 158, 11, 0.1);">
                    <i class="bi bi-clipboard2-check fs-4"></i>
                </div>
            </div>
            <div class="d-flex align-items-center justify-content-between mt-2">
                <span class="text-success fw-bold small mb-0"><i class="bi bi-arrow-up-short"></i> 7% <span class="text-muted fw-normal">This Month</span></span>
                <div style="width: 80px; height: 30px;">
                    <canvas id="sparkline-surveys"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row (Middle) -->
<div class="row">
    <!-- Left Column: Student Distribution -->
    <div class="col-lg-8 mb-4">
        <div class="admin-card h-100">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="mb-0 card-title fw-bold">Student Distribution (Class Wise)</h5>
                <select class="form-select form-select-sm w-auto border-0 bg-light fw-semibold">
                    <option>This Month</option>
                    <option>This Year</option>
                </select>
            </div>
            <div style="height: 320px; position: relative;">
                <canvas id="chart-distribution"></canvas>
            </div>
        </div>
    </div>

    <!-- Right Column: Notification Analytics -->
    <div class="col-lg-4 mb-4">
        <div class="admin-card h-100">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="mb-0 card-title fw-bold">Notification Analytics</h5>
                <select class="form-select form-select-sm w-auto border-0 bg-light fw-semibold">
                    <option>This Month</option>
                </select>
            </div>
            <div class="row align-items-center">
                <div class="col-7">
                    <div style="height: 180px; width: 180px; position: relative; margin: 0 auto;">
                        <canvas id="chart-analytics"></canvas>
                        <!-- Center text overlay -->
                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; z-index: 5;">
                            <h4 class="mb-0 fw-bold text-dark">{{ number_format($analytics['total']) }}</h4>
                            <span class="text-muted" style="font-size: 0.7rem; font-weight: 600; text-transform: uppercase;">Total</span>
                        </div>
                    </div>
                </div>
                <div class="col-5">
                    <ul class="list-unstyled mb-0" style="font-size: 0.85rem; font-weight: 500;">
                        <li class="mb-2 d-flex align-items-center">
                            <span class="d-inline-block rounded-circle me-2" style="width: 8px; height: 8px; background-color: #2563EB;"></span>
                            <span class="text-muted flex-grow-1">Sent</span>
                            <span class="fw-bold">{{ number_format($analytics['total']) }} (100%)</span>
                        </li>
                        <li class="mb-2 d-flex align-items-center">
                            <span class="d-inline-block rounded-circle me-2" style="width: 8px; height: 8px; background-color: #10B981;"></span>
                            <span class="text-muted flex-grow-1">Delivered</span>
                            <span class="fw-bold">{{ number_format($analytics['delivered']) }} ({{ $analytics['delivered_pct'] }}%)</span>
                        </li>
                        <li class="mb-2 d-flex align-items-center">
                            <span class="d-inline-block rounded-circle me-2" style="width: 8px; height: 8px; background-color: #F59E0B;"></span>
                            <span class="text-muted flex-grow-1">Read</span>
                            <span class="fw-bold">{{ number_format($analytics['read']) }} ({{ $analytics['read_pct'] }}%)</span>
                        </li>
                        <li class="d-flex align-items-center">
                            <span class="d-inline-block rounded-circle me-2" style="width: 8px; height: 8px; background-color: #EF4444;"></span>
                            <span class="text-muted flex-grow-1">Pending</span>
                            <span class="fw-bold">{{ number_format($analytics['pending']) }} ({{ $analytics['pending_pct'] }}%)</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Notifications & Activities Row (Bottom) -->
<div class="row">
    <!-- Left: Recent Notifications -->
    <div class="col-lg-8 mb-4">
        <div class="admin-card h-100">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0 card-title fw-bold">Recent Notifications</h5>
                <a href="{{ route('admin.notifications.index') }}" class="btn btn-sm btn-outline-primary rounded-3 px-3">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table align-middle hover-table mb-0">
                    <thead>
                        <tr class="text-muted small" style="border-bottom: 2px solid var(--border-color);">
                            <th class="py-3">Title</th>
                            <th class="py-3">Target Audience</th>
                            <th class="py-3">Sent Date</th>
                            <th class="py-3">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentNotifications as $notif)
                            <tr style="border-bottom: 1px solid var(--border-color);">
                                <td class="py-3">
                                    <span class="fw-semibold text-dark">{{ $notif->title }}</span>
                                </td>
                                <td class="py-3 text-secondary">
                                    @if($notif->target_type == 'school')
                                        All Students
                                    @elseif($notif->target_type == 'class')
                                        Class Parents
                                    @else
                                        {{ ucfirst($notif->target_type) }} Target
                                    @endif
                                </td>
                                <td class="py-3 text-secondary">
                                    {{ \Carbon\Carbon::parse($notif->created_at)->format('d M Y') }}
                                </td>
                                <td class="py-3">
                                    <span class="kids-badge {{ $notif->category == 'Emergency' ? 'badge-danger-accent' : 'badge-success-accent' }}">
                                        {{ $notif->category == 'PTM' ? 'Sent' : 'Delivered' }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Right: Upcoming Activities -->
    <div class="col-lg-4 mb-4">
        <div class="admin-card h-100">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0 card-title fw-bold">Upcoming Activities</h5>
                <a href="{{ route('admin.events.index') }}" class="btn btn-sm btn-outline-primary rounded-3 px-3">View Calendar</a>
            </div>
            <div class="d-flex flex-column gap-3 mt-3">
                @foreach($upcomingEvents as $evt)
                    @php
                        $date = \Carbon\Carbon::parse($evt->event_date);
                    @endphp
                    <div class="d-flex align-items-center justify-content-between p-2 rounded-3" style="border-bottom: 1px solid var(--border-color);">
                        <div class="d-flex align-items-center">
                            <!-- Date box -->
                            <div class="rounded-3 text-center me-3 d-flex flex-column justify-content-center" style="width: 55px; height: 55px; background-color: var(--primary-accent); border: 1px solid var(--border-color);">
                                <span class="fw-bold text-primary mb-0" style="font-size: 1.1rem; line-height: 1;">{{ $date->format('d') }}</span>
                                <span class="text-uppercase text-secondary" style="font-size: 0.7rem; font-weight: 700;">{{ $date->format('M') }}</span>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold text-dark">{{ $evt->title }}</h6>
                                <small class="text-muted"><i class="bi bi-clock me-1"></i> 10:00 AM - 01:00 PM</small>
                            </div>
                        </div>
                        <div>
                            <span class="kids-badge badge-info-accent">
                                {{ $evt->description ?? 'All Parents' }}
                            </span>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions Section -->
<div class="row">
    <div class="col-12">
        <div class="admin-card">
            <h5 class="mb-4 fw-bold">Quick Actions</h5>
            <div class="row g-3">
                <!-- Add Student -->
                <div class="col-md-2 col-sm-4 col-6">
                    <a href="{{ route('admin.students.create') }}" class="text-decoration-none d-block text-center p-3 rounded-4 transition-all quick-action-box" style="background-color: #EFF6FF; border: 1px solid #BFDBFE; color: #1D4ED8;">
                        <i class="bi bi-person-plus-fill fs-2 d-block mb-2"></i>
                        <span class="fw-bold small">Add Student</span>
                        <small class="d-block text-muted mt-1" style="font-size: 0.7rem;">Add New Student</small>
                    </a>
                </div>

                <!-- Manage Teachers -->
                <div class="col-md-2 col-sm-4 col-6">
                    <a href="{{ route('admin.teachers.index') }}" class="text-decoration-none d-block text-center p-3 rounded-4 transition-all quick-action-box" style="background-color: #E6FFFA; border: 1px solid #B2F5EA; color: #00A389;">
                        <i class="bi bi-person-badge-fill fs-2 d-block mb-2"></i>
                        <span class="fw-bold small">Manage Teachers</span>
                        <small class="d-block text-muted mt-1" style="font-size: 0.7rem;">Teacher Directory</small>
                    </a>
                </div>

                <!-- Send Notification -->
                <div class="col-md-2 col-sm-4 col-6">
                    <a href="{{ route('admin.notifications.create') }}" class="text-decoration-none d-block text-center p-3 rounded-4 transition-all quick-action-box" style="background-color: #ECFDF5; border: 1px solid #A7F3D0; color: #047857;">
                        <i class="bi bi-chat-right-quote-fill fs-2 d-block mb-2"></i>
                        <span class="fw-bold small">Send Notification</span>
                        <small class="d-block text-muted mt-1" style="font-size: 0.7rem;">Send Announcement</small>
                    </a>
                </div>

                <!-- Create Survey -->
                <div class="col-md-2 col-sm-4 col-6">
                    <a href="{{ route('admin.surveys.create') }}" class="text-decoration-none d-block text-center p-3 rounded-4 transition-all quick-action-box" style="background-color: #F5F3FF; border: 1px solid #DDD6FE; color: #6D28D9;">
                        <i class="bi bi-file-earmark-check-fill fs-2 d-block mb-2"></i>
                        <span class="fw-bold small">Create Survey</span>
                        <small class="d-block text-muted mt-1" style="font-size: 0.7rem;">Create New Survey</small>
                    </a>
                </div>

                <!-- Generate Report -->
                <div class="col-md-2 col-sm-4 col-6">
                    <a href="{{ route('admin.reports.index') }}" class="text-decoration-none d-block text-center p-3 rounded-4 transition-all quick-action-box" style="background-color: #FFFBEB; border: 1px solid #FDE68A; color: #B45309;">
                        <i class="bi bi-file-earmark-bar-graph-fill fs-2 d-block mb-2"></i>
                        <span class="fw-bold small">Generate Report</span>
                        <small class="d-block text-muted mt-1" style="font-size: 0.7rem;">Download Reports</small>
                    </a>
                </div>

                <!-- Import Excel -->
                <div class="col-md-2 col-sm-4 col-6">
                    <a href="{{ route('admin.import.show') }}" class="text-decoration-none d-block text-center p-3 rounded-4 transition-all quick-action-box" style="background-color: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C;">
                        <i class="bi bi-cloud-arrow-up-fill fs-2 d-block mb-2"></i>
                        <span class="fw-bold small">Import Excel</span>
                        <small class="d-block text-muted mt-1" style="font-size: 0.7rem;">Import Bulk Data</small>
                    </a>
                </div>

                <!-- Backup DB -->
                <div class="col-md-2 col-sm-4 col-6">
                    <a href="{{ route('admin.backup.download') }}" class="text-decoration-none d-block text-center p-3 rounded-4 transition-all quick-action-box" style="background-color: #F8FAFC; border: 1px solid #E2E8F0; color: #475569;">
                        <i class="bi bi-database-fill-down fs-2 d-block mb-2"></i>
                        <span class="fw-bold small">Database Backup</span>
                        <small class="d-block text-muted mt-1" style="font-size: 0.7rem;">Download SQL</small>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Sparklines configurations
        const sparklineConfig = (color) => ({
            type: 'line',
            data: {
                labels: [1, 2, 3, 4, 5, 6, 7],
                datasets: [{
                    data: [12, 14, 13, 16, 15, 18, 20],
                    borderColor: color,
                    borderWidth: 1.5,
                    fill: false,
                    pointRadius: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { display: false },
                    y: { display: false }
                }
            }
        });

        // Instantiate sparklines
        new Chart(document.getElementById('sparkline-students'), sparklineConfig('#3b82f6'));
        new Chart(document.getElementById('sparkline-parents'), sparklineConfig('#10b981'));
        new Chart(document.getElementById('sparkline-teachers'), sparklineConfig('#06b6d4'));
        new Chart(document.getElementById('sparkline-notifications'), sparklineConfig('#8b5cf6'));
        new Chart(document.getElementById('sparkline-surveys'), sparklineConfig('#f59e0b'));

        // Bar Chart - Student Distribution Class Wise
        const ctxDist = document.getElementById('chart-distribution').getContext('2d');
        new Chart(ctxDist, {
            type: 'bar',
            data: {
                labels: {!! json_encode($classNames) !!},
                datasets: [{
                    label: 'Students Count',
                    data: {!! json_encode($classStudentCounts) !!},
                    backgroundColor: '#3b82f6',
                    borderRadius: 6,
                    maxBarThickness: 32
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: { font: { family: 'Inter', size: 10 } }
                    },
                    y: {
                        border: { dash: [4, 4] },
                        grid: { color: 'rgba(0,0,0,0.05)' },
                        ticks: { font: { family: 'Inter', size: 10 } }
                    }
                }
            }
        });

        // Doughnut Chart - Notification Analytics
        const ctxAnal = document.getElementById('chart-analytics').getContext('2d');
        new Chart(ctxAnal, {
            type: 'doughnut',
            data: {
                labels: ['Delivered', 'Read', 'Pending'],
                datasets: [{
                    data: [{{ $analytics['delivered'] }}, {{ $analytics['read'] }}, {{ $analytics['pending'] }}],
                    backgroundColor: ['#10b981', '#f59e0b', '#ef4444'],
                    borderWidth: 2,
                    borderColor: '#ffffff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '75%',
                plugins: { legend: { display: false } }
            }
        });
    });
</script>
@endsection