@extends('layouts.app')

@section('content')

<style>
    /* --- HANYA CSS SPESIFIK HALAMAN INI (Rekap Pembelajaran) --- */
    /* Warna elemen standar (Card, Modal, Tabel, Input) sudah diatur secara terpusat di app.blade.php */

    .modern-card {
        border-radius: 20px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    [data-theme="dark"] .modern-card {
        background-color: var(--bg-card, #1e293b);
        border: 1px solid var(--border-color, #334155);
    }
    
    /* Tombol Rounded */
    .btn-pill { border-radius: 50rem !important; }
    
    /* Summary Cards Modern */
    .summary-card { border-radius: 16px; border: none; transition: transform 0.3s ease; }
    .summary-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; }
    
    /* Helper Kustom Tambahan */
    .bg-inner-card { background-color: var(--hover-bg); }
    
    /* Styling Accordion Modern */
    .accordion-jurnal .accordion-item {
        border: 1px solid var(--border-color, #dee2e6);
        border-radius: 16px !important;
        margin-bottom: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        overflow: hidden;
        background-color: transparent;
    }
    .accordion-jurnal .accordion-button { font-size: 1.05rem; padding: 1.25rem 1.5rem; }
    .accordion-jurnal .accordion-button:not(.collapsed) {
        background-color: rgba(59, 130, 246, 0.05);
        color: var(--primary-color, #3b82f6);
        box-shadow: none;
        border-bottom: 1px solid var(--border-color, #334155);
    }
    .accordion-jurnal .accordion-body { padding: 0; }
    
    [data-theme="dark"] .accordion-jurnal .accordion-item { background-color: var(--bg-card); border-color: var(--border-color); }
    [data-theme="dark"] .accordion-jurnal .accordion-button { background-color: var(--bg-card); color: var(--text-main); }
    [data-theme="dark"] .accordion-jurnal .accordion-button:not(.collapsed) { background-color: var(--hover-bg); color: #6ea8fe; border-bottom: 1px solid var(--border-color); }
    [data-theme="dark"] .accordion-jurnal .accordion-button::after { filter: invert(1); }
    [data-theme="dark"] .accordion-jurnal .accordion-body { background-color: var(--bg-card); }
</style>

<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div> 
            <h2 class="fw-bold"><i class="bi bi-person-lines-fill me-2 text-primary"></i>Rekap Pembelajaran</h2>
            <p class="text-muted mb-0">Rekapitulasi Kegiatan Belajar-Mengajar dan Kehadiran.</p>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger rounded-4 border-0 bg-danger bg-opacity-10 text-danger shadow-sm border-start border-danger border-4">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li><i class="bi bi-exclamation-triangle me-1"></i> {{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card modern-card shadow-sm mb-4">
        <div class="card-body p-4">
            <form action="{{ route('rekap.index') }}" method="GET" class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label fw-bold text-uppercase small text-muted">Mata Pelajaran</label>
                    <select name="subject_id" id="selectSubject" class="form-select rounded-pill py-2" required onchange="loadClassesReport()">
                        <option value="">-- Pilih Mapel --</option>
                        @foreach($subjects as $s)
                            <option value="{{ $s->id }}" {{ request('subject_id') == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold text-uppercase small text-muted">Kelas</label>
                    <select name="class" id="selectClass" class="form-select rounded-pill py-2" required>
                        <option value="">-- Pilih Kelas --</option>
                        @foreach($classes as $c)
                            <option value="{{ $c }}" {{ request('class') == $c ? 'selected' : '' }}>{{ $c }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold text-uppercase small text-muted">Dari Tanggal</label>
                    <input type="date" name="start_date" class="form-control rounded-pill py-2" value="{{ request('start_date', date('Y-m-01')) }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold text-uppercase small text-muted">Sampai Tanggal</label>
                    <input type="date" name="end_date" class="form-control rounded-pill py-2" value="{{ request('end_date', date('Y-m-d')) }}">
                </div>
                <div class="col-md-3 d-flex gap-2">
                    <button type="submit" class="btn btn-primary btn-pill flex-grow-1 fw-bold shadow-sm"><i class="bi bi-search me-1"></i> Tampilkan</button>
                    @if(request('subject_id'))
                    {{-- Ganti rute print ke rekap.print --}}
                    <a href="{{ route('rekap.print', request()->all()) }}" target="_blank" class="btn btn-outline-secondary btn-pill shadow-sm">
                        <i class="bi bi-printer"></i> Cetak
                    </a>
                    @endif
                </div>
            </form>
        </div>
    </div>

    {{-- HASIL PENCARIAN --}}
    @if(request('subject_id') && $journals->count() > 0)
    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="card summary-card bg-primary bg-opacity-10 border border-primary-subtle h-100 shadow-sm">
                <div class="card-body text-center p-4">
                    <h2 class="fw-bold text-primary mb-1">{{ $summary['total_meetings'] }}</h2>
                    <small class="fw-medium text-muted">Pertemuan Terlaksana</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card summary-card bg-success bg-opacity-10 border border-success-subtle h-100 shadow-sm">
                <div class="card-body text-center p-4">
                    <h2 class="fw-bold text-success mb-1">{{ $summary['avg_attendance'] }}%</h2>
                    <small class="fw-medium text-muted">Rata-rata Kehadiran Siswa</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card summary-card bg-info bg-opacity-10 border border-info-subtle h-100 shadow-sm">
                <div class="card-body text-center p-4">
                    <h2 class="fw-bold text-info mb-1">{{ $summary['total_topics'] }}</h2>
                    <small class="fw-medium text-muted">Topik Materi Tuntas</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card summary-card border h-100 shadow-sm" style="background-color: var(--hover-bg);">
                <div class="card-body text-center p-4">
                    <h2 class="fw-bold mb-1">{{ $summary['total_students'] }}</h2>
                    <small class="fw-medium text-muted">Total Siswa di Kelas</small>
                </div>
            </div>
        </div>
    </div>

    <div class="card modern-card shadow-sm border-secondary overflow-hidden">
        <div class="card-header bg-transparent border-bottom border-secondary py-3 px-4 d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold"><i class="bi bi-card-list me-2 text-primary"></i> Rincian Jurnal Harian</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="text-center px-3" width="5%">No</th>
                            <th class="text-center" width="20%">Tanggal</th>
                            <th class="text-center" width="5%">Ptm</th>
                            <th class="text-start">Materi yang Diajarkan</th>
                            <th class="text-center">Kehadiran</th>
                            <th class="text-start px-3">Catatan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($journals as $index => $j)
                        <tr>
                            <td class="text-center align-middle border-secondary">{{ $index + 1 }}</td>
                            <td class="text-center align-middle border-secondary">
                                <span class="fw-bold text-primary">{{ $j->date->locale('id')->translatedFormat('l, d F Y') }}</span><br>
                                <span class="badge bg-secondary bg-opacity-10 text-muted border border-secondary-subtle rounded-pill mt-2">Jam: {{ $j->period }}</span>
                            </td>                            
                            <td class="text-center align-middle border-secondary fw-bold">Ke-{{ $j->meeting_sequence }}</td>
                            <td class="border-secondary align-middle py-3">
                                <ul class="ps-3 mb-0 small" style="line-height: 1.6;">
                                    @foreach($j->topics as $t)
                                        <li class="mb-1">
                                            @if(is_array($t))
                                                {{ $t['name'] }}
                                                @if(($t['status'] ?? '') == 'partial')
                                                    <span class="badge bg-warning text-dark ms-2 rounded-pill" style="font-size:0.6em">Sebagian</span>
                                                @elseif(($t['status'] ?? '') == 'full')
                                                    <span class="badge bg-success ms-2 rounded-pill" style="font-size:0.6em">Selesai</span>
                                                @endif
                                            @else
                                                {{ $t }}
                                            @endif
                                        </li>
                                    @endforeach
                                </ul>
                            </td>
                            <td class="text-center align-middle border-secondary">
                                @php $hadir = count($j->student_attendance ?? []); @endphp
                                <strong class="text-success">{{ $hadir }}</strong> <span class="small">Siswa</span>
                                <div class="progress mt-2 mx-auto rounded-pill" style="height: 6px; width: 80%; background-color: var(--border-color);">
                                    <div class="progress-bar bg-success rounded-pill" style="width: {{ ($hadir / ($summary['total_students'] ?: 1)) * 100 }}%"></div>
                                </div>
                            </td>
                            <td class="align-middle border-secondary px-3"><small class="text-muted">{{ $j->notes ?? '-' }}</small></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @elseif(request('subject_id'))
    <div class="card modern-card border-0 py-5 text-center mt-4 border-warning">
        <div class="card-body">
            <div class="text-warning opacity-50 mb-3"><i class="bi bi-exclamation-circle" style="font-size: 4rem;"></i></div>
            <h5 class="fw-bold">Tidak ada data</h5>
            <p class="text-muted">Tidak ada data rekap ditemukan untuk filter yang dipilih.</p>
        </div>
    </div>
    @else
    <div class="card modern-card border-0 py-5 text-center mt-4" style="background-color: var(--hover-bg);">
        <div class="card-body">
            <div class="text-primary opacity-50 mb-3"><i class="bi bi-search" style="font-size: 4rem;"></i></div>
            <h5 class="fw-bold">Pilih Filter Laporan</h5>
            <p class="text-muted">Silakan pilih Mata Pelajaran dan Kelas untuk melihat rekapitulasi.</p>
        </div>
    </div>
    @endif
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function loadClassesReport() {
        let subjectId = document.getElementById('selectSubject').value;
        let classSelect = document.getElementById('selectClass');
        
        classSelect.innerHTML = '<option value="">Memuat...</option>';
        
        if(!subjectId) {
            classSelect.innerHTML = '<option value="">-- Pilih Kelas --</option>';
            return;
        }

        fetch(`{{ route('ajax.classes') }}?subject_id=${subjectId}`)
            .then(res => res.json())
            .then(data => {
                classSelect.innerHTML = '<option value="">-- Pilih Kelas --</option>';
                if(data.length === 0) {
                     classSelect.innerHTML += '<option value="" disabled>Tidak ada kelas untuk mapel ini</option>';
                }
                data.forEach(c => {
                    classSelect.innerHTML += `<option value="${c}">${c}</option>`;
                });
            })
            .catch(err => {
                console.error(err);
                classSelect.innerHTML = '<option value="">Gagal memuat kelas</option>';
            });
    }

    $(document).ready(function() {
        // Otomatis terisi jika ada data request (dari blade template value sudah handle ini)
    });
</script>
@endsection