@extends('layouts.sidebar')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 fw-bold text-primary">
                        <i class="bi bi-house me-2"></i>
                        Dashboard Laporan & Statistik
                    </h1>
                    <p class="text-muted mb-0">Analisis data absensi dan peserta secara keseluruhan</p>
                </div>
                <div class="dropdown">
                    <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                        <i class="bi bi-download me-2"></i>Export Laporan
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="{{ route('reports.export.attendance') }}">
                            <i class="bi bi-file-pdf me-2 text-danger"></i>Export PDF Absensi
                        </a></li>
                        <li><a class="dropdown-item" href="{{ route('reports.export.participants') }}">
                            <i class="bi bi-file-pdf me-2 text-danger"></i>Export PDF Peserta
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card card-custom stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="fw-bold mb-0">{{ $stats['total_participants'] ?? 0 }}</h2>
                            <p class="mb-0 opacity-75">Total Peserta</p>
                        </div>
                        <div class="stat-icon">
                            <i class="bi bi-people"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card card-custom bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="fw-bold mb-0">{{ $stats['total_attendance'] ?? 0 }}</h2>
                            <p class="mb-0 opacity-75">Total Absensi</p>
                        </div>
                        <div class="stat-icon">
                            <i class="bi bi-calendar-check"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card card-custom bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="fw-bold mb-0">{{ $stats['today_attendance'] ?? 0 }}</h2>
                            <p class="mb-0 opacity-75">Absensi Hari Ini</p>
                        </div>
                        <div class="stat-icon">
                            <i class="bi bi-calendar-day"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card card-custom bg-warning text-dark">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="fw-bold mb-0">{{ $stats['avg_daily_attendance'] ?? 0 }}</h2>
                            <p class="mb-0 opacity-75">Rata-rata Harian</p>
                        </div>
                        <div class="stat-icon">
                            <i class="bi bi-graph-up-arrow"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Today's Summary -->
        <div class="col-lg-4 mb-4">
            <div class="card card-custom h-100">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-calendar-day me-2"></i>
                        Ringkasan Hari Ini
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="p-3 bg-success bg-opacity-10 rounded-3">
                                <h4 class="fw-bold text-success mb-1">{{ $stats['present_today'] ?? 0 }}</h4>
                                <small class="text-muted">Tepat Waktu</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="p-3 bg-warning bg-opacity-10 rounded-3">
                                <h4 class="fw-bold text-warning mb-1">{{ $stats['late_today'] ?? 0 }}</h4>
                                <small class="text-muted">Terlambat</small>
                            </div>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="p-3 bg-primary bg-opacity-10 rounded-3">
                                <h4 class="fw-bold text-primary mb-1">{{ $stats['magang_count'] ?? 0 }}</h4>
                                <small class="text-muted">Magang</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 bg-info bg-opacity-10 rounded-3">
                                <h4 class="fw-bold text-info mb-1">{{ $stats['pkl_count'] ?? 0 }}</h4>
                                <small class="text-muted">PKL</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Program Distribution -->
        <div class="col-lg-4 mb-4">
            <div class="card card-custom h-100">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-pie-chart me-2"></i>
                        Distribusi Program
                    </h5>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <canvas id="programChart" width="200" height="200"></canvas>
                    </div>
                    <div class="mt-3">
                        @php
                            $magangCount = $participantStats['by_program']['Magang'] ?? 0;
                            $pklCount = $participantStats['by_program']['PKL'] ?? 0;
                            $total = $magangCount + $pklCount;
                            $magangPercent = $total > 0 ? round(($magangCount / $total) * 100, 1) : 0;
                            $pklPercent = $total > 0 ? round(($pklCount / $total) * 100, 1) : 0;
                        @endphp
                        <div class="d-flex justify-content-between mb-2">
                            <span class="badge bg-primary">Magang</span>
                            <span>{{ $magangCount }} ({{ $magangPercent }}%)</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="badge bg-info">PKL</span>
                            <span>{{ $pklCount }} ({{ $pklPercent }}%)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Top Attenders -->
        <!-- Top Attenders -->
<div class="col-lg-4 mb-4">
    <div class="card card-custom h-100">
        <div class="card-header bg-white py-3">
            <h5 class="card-title mb-0">
                <i class="bi bi-trophy me-2"></i>
                Top 5 Peserta Aktif
            </h5>
        </div>
        <div class="card-body">
            @forelse($participantStats['top_attenders'] ?? [] as $participant)
            <div class="d-flex align-items-center mb-3">
                <div class="user-avatar me-3">
                    {{ substr($participant->nama_lengkap, 0, 1) }}
                </div>
                <div class="flex-grow-1">
                    <h6 class="mb-0 fw-semibold">{{ $participant->nama_lengkap }}</h6>
                    <small class="text-muted">{{ $participant->attendances_count ?? 0 }} absensi</small>
                </div>
                <span class="badge bg-success">{{ $participant->program_type ?? 'N/A' }}</span>
            </div>
            @empty
            <div class="text-center text-muted py-3">
                <i class="bi bi-info-circle display-6 d-block mb-2"></i>
                <p>Belum ada data absensi</p>
            </div>
            @endforelse
        </div>
    </div>
</div>

    <div class="row">
        <!-- Recent Attendance -->
<div class="col-lg-6 mb-4">
    <div class="card card-custom">
        <div class="card-header bg-white py-3">
            <h5 class="card-title mb-0">
                <i class="bi bi-clock-history me-2"></i>
                Absensi Terbaru
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-4">Nama</th>
                            <th>Tanggal</th>
                            <th>Check In</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentAttendances as $attendance)
                        <tr>
                            <td class="ps-4">
                                <div class="d-flex align-items-center">
                                    <div class="user-avatar me-3">
                                        {{ $attendance->participant ? substr($attendance->participant->nama_lengkap, 0, 1) : '?' }}
                                    </div>
                                    <div>
                                        <h6 class="mb-0 fw-semibold">
                                            {{ $attendance->participant->name ?? 'Peserta Tidak Ditemukan' }}
                                        </h6>
                                        <small class="text-muted">
                                            {{ $attendance->participant->program_type ?? 'N/A' }}
                                        </small>
                                    </div>
                                </div>
                            </td>
                            <td>{{ \Carbon\Carbon::parse($attendance->date)->format('d/m/Y') }}</td>
                            <td>{{ $attendance->check_in ?? '-' }}</td>
                            <td>
                                @if($attendance->status === 'present')
                                    <span class="badge bg-success">Tepat Waktu</span>
                                @elseif($attendance->status === 'late')
                                    <span class="badge bg-warning text-dark">Terlambat</span>
                                @else
                                    <span class="badge bg-secondary">{{ $attendance->status }}</span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center py-4 text-muted">
                                Tidak ada data absensi terbaru
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer bg-white border-0">
            <a href="{{ route('reports.attendance') }}" class="btn btn-outline-primary btn-sm">
                Lihat Semua Absensi
            </a>
        </div>
    </div>
</div>

        <!-- Monthly Chart -->
        <div class="col-lg-6 mb-4">
            <div class="card card-custom">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-bar-chart me-2"></i>
                        Statistik Bulanan ({{ date('Y') }})
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="monthlyChart" height="250"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row">
        <div class="col-12">
            <div class="card card-custom">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-lightning me-2"></i>
                        Akses Cepat Laporan
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <a href="{{ route('reports.attendance') }}" class="card card-custom text-decoration-none h-100">
                                <div class="card-body text-center">
                                    <i class="bi bi-calendar-check display-4 text-primary mb-3"></i>
                                    <h6>Laporan Absensi</h6>
                                    <small class="text-muted">Lihat detail data absensi</small>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ route('reports.participants') }}" class="card card-custom text-decoration-none h-100">
                                <div class="card-body text-center">
                                    <i class="bi bi-people display-4 text-success mb-3"></i>
                                    <h6>Laporan Peserta</h6>
                                    <small class="text-muted">Data lengkap peserta</small>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ route('reports.export.attendance') }}" class="card card-custom text-decoration-none h-100">
                                <div class="card-body text-center">
                                    <i class="bi bi-file-earmark-spreadsheet display-4 text-warning mb-3"></i>
                                    <h6>Export Absensi</h6>
                                    <small class="text-muted">Download CSV data absensi</small>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ route('reports.export.participants') }}" class="card card-custom text-decoration-none h-100">
                                <div class="card-body text-center">
                                    <i class="bi bi-file-earmark-person display-4 text-info mb-3"></i>
                                    <h6>Export Peserta</h6>
                                    <small class="text-muted">Download CSV data peserta</small>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Program Distribution Chart
const programCtx = document.getElementById('programChart').getContext('2d');
const programChart = new Chart(programCtx, {
    type: 'doughnut',
    data: {
        labels: ['Magang', 'PKL'],
        datasets: [{
            data: [{{ $participantStats['by_program']['Magang'] ?? 0 }}, {{ $participantStats['by_program']['PKL'] ?? 0 }}],
            backgroundColor: ['#007bff', '#17a2b8'],
            borderWidth: 2,
            borderColor: '#fff'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Monthly Attendance Chart
const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
const monthlyChart = new Chart(monthlyCtx, {
    type: 'bar',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
        datasets: [
            {
                label: 'Tepat Waktu',
                data: [
                    {{ $monthlyData[1]['present'] ?? 0 }},
                    {{ $monthlyData[2]['present'] ?? 0 }},
                    {{ $monthlyData[3]['present'] ?? 0 }},
                    {{ $monthlyData[4]['present'] ?? 0 }},
                    {{ $monthlyData[5]['present'] ?? 0 }},
                    {{ $monthlyData[6]['present'] ?? 0 }},
                    {{ $monthlyData[7]['present'] ?? 0 }},
                    {{ $monthlyData[8]['present'] ?? 0 }},
                    {{ $monthlyData[9]['present'] ?? 0 }},
                    {{ $monthlyData[10]['present'] ?? 0 }},
                    {{ $monthlyData[11]['present'] ?? 0 }},
                    {{ $monthlyData[12]['present'] ?? 0 }}
                ],
                backgroundColor: '#28a745'
            },
            {
                label: 'Terlambat',
                data: [
                    {{ $monthlyData[1]['late'] ?? 0 }},
                    {{ $monthlyData[2]['late'] ?? 0 }},
                    {{ $monthlyData[3]['late'] ?? 0 }},
                    {{ $monthlyData[4]['late'] ?? 0 }},
                    {{ $monthlyData[5]['late'] ?? 0 }},
                    {{ $monthlyData[6]['late'] ?? 0 }},
                    {{ $monthlyData[7]['late'] ?? 0 }},
                    {{ $monthlyData[8]['late'] ?? 0 }},
                    {{ $monthlyData[9]['late'] ?? 0 }},
                    {{ $monthlyData[10]['late'] ?? 0 }},
                    {{ $monthlyData[11]['late'] ?? 0 }},
                    {{ $monthlyData[12]['late'] ?? 0 }}
                ],
                backgroundColor: '#ffc107'
            }
        ]
    },
    options: {
        responsive: true,
        scales: {
            x: {
                stacked: false
            },
            y: {
                stacked: false,
                beginAtZero: true
            }
        }
    }
});
</script>
@endsection