@extends('adminlte::page')

@section('title', 'Laporan KBM Detail')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1 class="text-purple-dark font-weight-bold">
            <i class="fas fa-chart-pie mr-2"></i> Laporan KBM & Kehadiran
        </h1>
    </div>
@stop

@section('content')
<div class="container-fluid pb-5">

    {{-- ========================================================= --}}
    {{-- 1. FILTER UTAMA (KELAS, MAPEL, TANGGAL) --}}
    {{-- ========================================================= --}}
    <div class="card shadow-sm border-0 mb-4" style="border-radius: 15px;">
        <div class="card-body py-3 bg-light-purple-gradient">
            <form action="{{ route('laporan.siswa.detail') }}" method="GET" id="filterForm">
                <div class="row align-items-end">
                    
                    {{-- Filter Kelas (Reset Siswa saat berubah) --}}
                    <div class="col-md-3 mb-2">
                        <label class="text-xs text-muted font-weight-bold text-uppercase">Pilih Kelas</label>
                        <select name="kelas_id" class="form-control select2 border-purple" onchange="resetSiswaAndSubmit()">
                            @foreach($daftarKelas as $kelas)
                                <option value="{{ $kelas->id }}" {{ $kelasId == $kelas->id ? 'selected' : '' }}>
                                    {{ $kelas->nama_kelas }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Filter Mapel --}}
                    <div class="col-md-3 mb-2">
                        <label class="text-xs text-muted font-weight-bold text-uppercase">Mata Pelajaran</label>
                        <select name="mapel_id" class="form-control select2 border-purple">
                            <option value="">-- Semua Mapel --</option>
                            @foreach($daftarMapel as $mapel)
                                <option value="{{ $mapel->id }}" {{ $mapelId == $mapel->id ? 'selected' : '' }}>
                                    {{ $mapel->nama_mapel }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Rentang Tanggal --}}
                    <div class="col-md-2 mb-2">
                        <label class="text-xs text-muted font-weight-bold text-uppercase">Mulai</label>
                        <input type="date" name="tanggal_mulai" class="form-control border-purple" value="{{ $startDate }}">
                    </div>
                    <div class="col-md-2 mb-2">
                        <label class="text-xs text-muted font-weight-bold text-uppercase">Sampai</label>
                        <input type="date" name="tanggal_selesai" class="form-control border-purple" value="{{ $endDate }}">
                    </div>

                    {{-- Tombol Action (Filter & PDF) --}}
                    <div class="col-md-2 mb-2 d-flex gap-1">
                        <button type="submit" class="btn btn-purple-gradient rounded-pill shadow-sm flex-grow-1" style="height: 38px;">
                            <i class="fas fa-filter"></i>
                        </button>
                        
                        {{-- Tombol PDF --}}
                        <a href="{{ route('laporan.siswa.detail.pdf', request()->all()) }}" target="_blank" 
                           class="btn btn-danger rounded-pill shadow-sm" style="height: 38px;" 
                           title="Export PDF">
                            <i class="fas fa-file-pdf"></i>
                        </a>
                    </div>
                </div>

                {{-- Baris Kedua: Pilih Spesifik Siswa --}}
                <div class="row mt-2 border-top pt-2">
                    <div class="col-md-12 d-flex align-items-center">
                        <label class="text-xs text-muted font-weight-bold text-uppercase mr-3 mb-0" style="min-width: 120px;">
                            <i class="fas fa-user mr-1"></i> Detail Personal:
                        </label>
                        <select name="siswa_id" id="siswaSelect" class="form-control select2 border-purple rounded-pill" onchange="this.form.submit()">
                            <option value="">-- Tampilkan Rekap Satu Kelas --</option>
                            @foreach($temanSekelas as $teman)
                                <option value="{{ $teman->id }}" {{ (isset($siswa) && $teman->id == $siswa->id) ? 'selected' : '' }}>
                                    {{ $teman->nama_lengkap }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- ========================================================= --}}
    {{-- MODE 1: TAMPILAN REKAP PER KELAS (TABEL) --}}
    {{-- ========================================================= --}}
    @if($mode == 'kelas')
        <div class="card shadow-lg border-0" style="border-radius: 20px;">
            <div class="card-header bg-white border-0 pt-4 px-4">
                <h5 class="font-weight-bold text-purple-dark mb-0">
                    <i class="fas fa-users mr-2"></i> Rekapitulasi Kelas
                    @if($mapelId)
                        <span class="badge badge-purple-light ml-2">{{ \App\Models\MataPelajaran::find($mapelId)->nama_mapel ?? 'Mapel' }}</span>
                    @endif
                </h5>
                <small class="text-muted">Menampilkan akumulasi kehadiran seluruh siswa di kelas terpilih.</small>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-striped align-middle mb-0">
                        <thead class="bg-light text-uppercase text-xs font-weight-bold text-muted">
                            <tr>
                                <th class="pl-4">Nama Siswa</th>
                                <th class="text-center">Hadir</th>
                                <th class="text-center">Sakit</th>
                                <th class="text-center">Izin</th>
                                <th class="text-center">Alpa</th>
                                <th class="text-center" style="width: 15%;">Persentase</th>
                                <th class="text-center pr-4">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($rekapKelas as $row)
                            <tr>
                                <td class="pl-4 font-weight-bold text-dark">{{ $row['siswa']->nama_lengkap }}</td>
                                <td class="text-center"><span class="badge bg-success-light rounded-pill px-3">{{ $row['hadir'] }}</span></td>
                                <td class="text-center"><span class="badge bg-warning-light rounded-pill px-3">{{ $row['sakit'] }}</span></td>
                                <td class="text-center"><span class="badge bg-info-light rounded-pill px-3">{{ $row['izin'] }}</span></td>
                                <td class="text-center"><span class="badge bg-danger-light rounded-pill px-3">{{ $row['alpa'] }}</span></td>
                                <td class="text-center align-middle">
                                    <div class="d-flex align-items-center justify-content-center">
                                        <span class="mr-2 font-weight-bold {{ $row['persen'] < 50 ? 'text-danger' : 'text-success' }}">{{ $row['persen'] }}%</span>
                                        <div class="progress progress-xs w-50 rounded-pill" style="height: 6px;">
                                            <div class="progress-bar {{ $row['persen'] < 50 ? 'bg-danger' : 'bg-success' }}" role="progressbar" style="width: {{ $row['persen'] }}%"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center pr-4">
                                    <a href="{{ route('laporan.siswa.detail', array_merge(request()->all(), ['siswa_id' => $row['siswa']->id])) }}" 
                                       class="btn btn-xs btn-purple-outline rounded-pill px-3">
                                        <i class="fas fa-search mr-1"></i> Detail
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center py-5 text-muted">
                                    <img src="https://cdn-icons-png.flaticon.com/512/7486/7486754.png" width="60" class="opacity-25 mb-2">
                                    <p class="mb-0">Tidak ada data siswa di kelas ini.</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    {{-- ========================================================= --}}
    {{-- MODE 2: TAMPILAN DETAIL PERSONAL (PROFILE, STATS, CHART) --}}
    {{-- ========================================================= --}}
    @elseif($mode == 'siswa')
        
        {{-- A. PROFILE CARD --}}
        <div class="card card-purple-gradient shadow-lg border-0 mb-4" style="border-radius: 20px;">
            <div class="card-body p-4">
                <div class="row align-items-center">
                    <div class="col-md-2 text-center mb-3 mb-md-0">
                        <img src="{{ $siswa->foto_url ? asset('storage/'.$siswa->foto_url) : asset('assets/img/default-user.png') }}" 
                             class="img-fluid rounded-circle shadow-sm" style="width: 110px; height: 110px; object-fit: cover; border: 4px solid rgba(255,255,255,0.4);">
                    </div>
                    <div class="col-md-7 text-white text-center text-md-left">
                        <h2 class="font-weight-bold mb-1">{{ $siswa->nama_lengkap }}</h2>
                        <p class="mb-2 opacity-80" style="font-size: 1.1rem;">
                            <i class="fas fa-barcode mr-1"></i> NIS: <b>{{ $siswa->nis }}</b> 
                            <span class="mx-2">|</span> 
                            <i class="fas fa-school mr-1"></i> Kelas: <b>{{ $siswa->kelas->nama_kelas }}</b>
                        </p>
                        <div class="d-flex flex-wrap gap-2 justify-content-center justify-content-md-start">
                            <span class="badge badge-light-purple px-3 py-2 rounded-pill">
                                <i class="fas fa-venus-mars mr-1"></i> {{ $siswa->jenis_kelamin }}
                            </span>
                            <span class="badge {{ $siswa->status_siswa == 'Aktif' ? 'badge-success' : 'badge-danger' }} px-3 py-2 rounded-pill border-0">
                                {{ $siswa->status_siswa }}
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3 text-center text-white border-left-purple-light mt-3 mt-md-0">
                        <h5 class="opacity-80 mb-0">Persentase</h5>
                        <h1 class="display-4 font-weight-bold mb-0">{{ $persentaseHadir }}%</h1>
                        <small class="badge badge-light-purple px-2">
                            {{ $mapelId ? \App\Models\MataPelajaran::find($mapelId)->nama_mapel : 'Semua Mapel' }}
                        </small>
                    </div>
                </div>
            </div>
        </div>

        {{-- B. STATISTIK CARDS --}}
        <div class="row">
            <div class="col-lg-3 col-6"><div class="small-box bg-white shadow-sm border-radius-xl p-3"><h3 class="text-success">{{ $stats['hadir'] }}</h3><p class="text-muted text-xs font-weight-bold mb-0">Hadir</p></div></div>
            <div class="col-lg-3 col-6"><div class="small-box bg-white shadow-sm border-radius-xl p-3"><h3 class="text-info">{{ $stats['izin'] }}</h3><p class="text-muted text-xs font-weight-bold mb-0">Izin</p></div></div>
            <div class="col-lg-3 col-6"><div class="small-box bg-white shadow-sm border-radius-xl p-3"><h3 class="text-warning">{{ $stats['sakit'] }}</h3><p class="text-muted text-xs font-weight-bold mb-0">Sakit</p></div></div>
            <div class="col-lg-3 col-6"><div class="small-box bg-white shadow-sm border-radius-xl p-3"><h3 class="text-danger">{{ $stats['alpa'] }}</h3><p class="text-muted text-xs font-weight-bold mb-0">Alpa</p></div></div>
        </div>

        {{-- C. TABLE BREAKDOWN MAPEL (Hanya jika "Semua Mapel" dipilih) --}}
        @if(!$mapelId && isset($breakdownMapel) && $breakdownMapel->count() > 0)
        <div class="row mt-2 mb-4">
            <div class="col-12">
                <div class="card shadow-sm border-0 border-radius-xl">
                    <div class="card-header bg-transparent border-0 pt-4 px-4">
                        <h5 class="font-weight-bold text-purple-dark mb-0"><i class="fas fa-list-alt mr-2"></i> Performa Per Mapel</h5>
                        <small class="text-muted">Rincian kehadiran siswa di setiap mata pelajaran.</small>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="bg-light sticky-top">
                                    <tr>
                                        <th class="pl-4">Mata Pelajaran</th>
                                        <th class="text-center">Total Sesi</th>
                                        <th class="text-center text-success">Hadir</th>
                                        <th class="text-center text-danger">Absen</th>
                                        <th class="text-center">Persentase</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($breakdownMapel as $item)
                                    <tr>
                                        <td class="pl-4 font-weight-bold text-dark">{{ $item->nama_mapel }}</td>
                                        <td class="text-center">{{ $item->total }}</td>
                                        <td class="text-center font-weight-bold text-success">{{ $item->hadir }}</td>
                                        <td class="text-center font-weight-bold text-danger">{{ $item->total - $item->hadir }}</td>
                                        <td class="text-center">
                                            <div class="d-flex align-items-center justify-content-center">
                                                <span class="text-xs font-weight-bold mr-2">{{ $item->persen }}%</span>
                                                <div class="progress progress-xs w-50 rounded-pill bg-light">
                                                    <div class="progress-bar {{ $item->persen < 50 ? 'bg-danger' : ($item->persen < 80 ? 'bg-warning' : 'bg-success') }}" 
                                                         role="progressbar" style="width: {{ $item->persen }}%"></div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        {{-- D. CHART & TIMELINE --}}
        <div class="row mt-2">
            {{-- Grafik Bulanan --}}
            <div class="col-md-7 mb-4">
                <div class="card shadow-sm border-0 border-radius-xl h-100">
                    <div class="card-header bg-transparent border-0 pt-4 px-4">
                        <h5 class="font-weight-bold text-purple-dark mb-0"><i class="fas fa-chart-area mr-2"></i> Tren Bulanan</h5>
                    </div>
                    <div class="card-body">
                        <div id="attendanceChart" style="min-height: 350px;"></div>
                    </div>
                </div>
            </div>

            {{-- Timeline Riwayat --}}
            <div class="col-md-5 mb-4">
                <div class="card shadow-sm border-0 border-radius-xl h-100">
                    <div class="card-header bg-transparent border-0 pt-4 px-4 d-flex justify-content-between">
                        <h5 class="font-weight-bold text-purple-dark">Riwayat Log</h5>
                        @if($mapelId) <span class="badge badge-info px-2">Difilter</span> @endif
                    </div>
                    <div class="card-body p-0 pt-2" style="max-height: 400px; overflow-y: auto;">
                        <div class="list-group list-group-flush custom-timeline">
                            @forelse($riwayatAbsensi as $log)
                            <div class="list-group-item border-0 d-flex align-items-center px-4 py-3 hover-bg-light">
                                <div class="avatar-icon mr-3">
                                    @php
                                        $bgClass = match($log->status_kehadiran) {
                                            'Hadir' => 'bg-success-light text-success', 'Sakit' => 'bg-warning-light text-warning',
                                            'Izin' => 'bg-info-light text-info', 'Alpa' => 'bg-danger-light text-danger', default => 'bg-secondary'
                                        };
                                        $icon = match($log->status_kehadiran) {
                                            'Hadir' => 'fa-check', 'Sakit' => 'fa-plus', 'Izin' => 'fa-envelope', 'Alpa' => 'fa-times', default => 'fa-question'
                                        };
                                    @endphp
                                    <div class="rounded-circle d-flex justify-content-center align-items-center {{ $bgClass }}" style="width: 40px; height: 40px;">
                                        <i class="fas {{ $icon }}"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0 font-weight-bold text-dark text-sm">{{ $log->sesiPembelajaran->jadwal->mataPelajaran->nama_mapel ?? 'Mapel' }}</h6>
                                    <small class="text-muted">{{ $log->status_kehadiran }} <span class="mx-1">•</span> {{ $log->created_at->format('d M H:i') }}</small>
                                </div>
                            </div>
                            @empty
                            <div class="text-center py-4 text-muted"><small>Tidak ada data.</small></div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

</div>
@endsection

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css">
<style>
    :root { --purple-primary: #6f42c1; --purple-dark: #4b2c92; --purple-light: #e0cffc; --purple-gradient: linear-gradient(135deg, #6f42c1 0%, #4b0082 100%); }
    .text-purple-dark { color: var(--purple-dark) !important; }
    .bg-purple-gradient, .btn-purple-gradient { background: var(--purple-gradient) !important; color: white; }
    .btn-purple-outline { border: 1px solid var(--purple-primary); color: var(--purple-primary); background: transparent; font-weight: 600; }
    .btn-purple-outline:hover { background: var(--purple-primary); color: white; }
    .card-purple-gradient { background: var(--purple-gradient); }
    .bg-light-purple-gradient { background: linear-gradient(to right, #f8f9fa, #f3eefc); }
    .border-purple { border: 1px solid #e0cffc !important; }
    .border-radius-xl { border-radius: 15px !important; }
    .rounded-pill { border-radius: 50rem !important; }
    .bg-success-light { background-color: #d4edda; color: #155724; }
    .bg-warning-light { background-color: #fff3cd; color: #856404; }
    .bg-info-light { background-color: #d1ecf1; color: #0c5460; }
    .bg-danger-light { background-color: #f8d7da; color: #721c24; }
    .small-box { border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); overflow: hidden; }
    .select2-container--bootstrap .select2-selection--single { height: 38px; border-radius: 20px; border-color: #e0cffc; padding-top: 5px; }
    .border-left-purple-light { border-left: 1px solid rgba(255,255,255,0.25); }
    .sticky-top { position: sticky; top: 0; z-index: 1020; }
    @media (max-width: 768px) {
        .border-left-purple-light { border-left: none; border-top: 1px solid rgba(255,255,255,0.25); padding-top: 15px; }
    }
</style>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>
<script>
    function resetSiswaAndSubmit() {
        document.getElementById('siswaSelect').value = '';
        document.getElementById('filterForm').submit();
    }

    $(document).ready(function() {
        $('.select2').select2({ theme: 'bootstrap', width: '100%' });
        
        @if($mode == 'siswa' && isset($chartData))
        var options = {
            series: @json($chartData['series']),
            chart: { type: 'area', height: 350, fontFamily: 'Source Sans Pro', toolbar: {show: false} },
            colors: ['#28a745', '#dc3545'],
            xaxis: { categories: @json($chartData['labels']) },
            fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.6, opacityTo: 0.1, stops: [0, 90, 100] } },
            stroke: { curve: 'smooth', width: 3 },
            dataLabels: { enabled: false },
            grid: { borderColor: '#f1f1f1' }
        };
        new ApexCharts(document.querySelector("#attendanceChart"), options).render();
        @endif
    });
</script>
@endsection