@extends('adminlte::page')

@section('title', 'Rekap Jurnal Mengajar')

@section('plugins.Datatables', true)
@section('plugins.Select2', true)
@section('plugins.TempusDominusBs4', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="text-dark font-weight-bold" style="font-family: 'Poppins', sans-serif;">
                <i class="fas fa-book-reader text-primary mr-2"></i> Rekap Jurnal Mengajar
            </h1>
            <p class="text-muted small mb-0">Laporan aktivitas mengajar guru di kelas.</p>
        </div>
        <ol class="breadcrumb bg-transparent p-0 mt-1">
            <li class="breadcrumb-item"><a href="{{ url('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Laporan Jurnal</li>
        </ol>
    </div>
@stop

@section('content')
<div class="row">
    <div class="col-12">
        
        {{-- CARD FILTER --}}
        <div class="card border-0 shadow-sm mb-4" style="border-radius: 15px;">
            <div class="card-header bg-white border-bottom-0 pt-4">
                <h5 class="font-weight-bold text-secondary"><i class="fas fa-filter mr-2"></i> Filter Data</h5>
            </div>
            <div class="card-body pt-0">
                <form method="GET" action="{{ route('laporan.rekap-jurnal') }}">
                    <div class="row align-items-end">
                        <div class="col-md-4">
                            <div class="form-group mb-0">
                                <label class="small font-weight-bold text-muted">Rentang Tanggal</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0"><i class="far fa-calendar-alt"></i></span>
                                    </div>
                                    <input type="date" name="start_date" class="form-control bg-light border-0" value="{{ request('start_date', date('Y-m-01')) }}">
                                    <div class="input-group-prepend input-group-append">
                                        <span class="input-group-text bg-light border-0">s/d</span>
                                    </div>
                                    <input type="date" name="end_date" class="form-control bg-light border-0" value="{{ request('end_date', date('Y-m-d')) }}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-0">
                                <label class="small font-weight-bold text-muted">Pilih Guru</label>
                                <select name="guru_id" class="form-control select2">
                                    <option value="">-- Semua Guru --</option>
                                    {{-- Cek apakah variabel $gurus dikirim dari controller --}}
                                    @if(isset($gurus))
                                        @foreach($gurus as $guru)
                                            <option value="{{ $guru->id }}" {{ request('guru_id') == $guru->id ? 'selected' : '' }}>
                                                {{ $guru->name }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary btn-block rounded-pill shadow-sm font-weight-bold">
                                <i class="fas fa-search mr-1"></i> Tampilkan
                            </button>
                        </div>
                        <div class="col-md-2">
                            <a href="{{ route('laporan.rekap-jurnal') }}" class="btn btn-outline-secondary btn-block rounded-pill">
                                <i class="fas fa-sync-alt mr-1"></i> Reset
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- CARD TABEL --}}
        <div class="card border-0 shadow-sm" style="border-radius: 15px;">
            <div class="card-body table-responsive">
                <table id="tableJurnal" class="table table-hover align-middle">
                    <thead class="bg-light text-muted">
                        <tr>
                            <th width="5%" class="text-center rounded-left">No</th>
                            <th>Tanggal & Jam</th>
                            <th>Nama Guru</th>
                            <th>Kelas & Mapel</th>
                            <th>Materi Pembelajaran</th>
                            <th class="text-center">Kehadiran</th>
                            <th class="text-center rounded-right">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- Cek apakah variabel $jurnals / $data ada --}}
                        @php $dataJurnal = $jurnals ?? $data ?? []; @endphp

                        @forelse($dataJurnal as $index => $item)
                        <tr>
                            <td class="text-center">{{ $index + 1 }}</td>
                            <td>
                                <span class="font-weight-bold text-dark d-block">
                                    {{ \Carbon\Carbon::parse($item->waktu_mulai ?? now())->isoFormat('dddd, D MMM Y') }}
                                </span>
                                <small class="text-muted">
                                    {{ \Carbon\Carbon::parse($item->waktu_mulai ?? now())->format('H:i') }} - 
                                    {{ \Carbon\Carbon::parse($item->waktu_selesai ?? now())->format('H:i') }}
                                </small>
                            </td>
                            <td>
                                <span class="font-weight-bold">{{ $item->user->name ?? $item->guru_nama ?? '-' }}</span>
                            </td>
                            <td>
                                <span class="badge badge-info px-2">{{ $item->kelas->nama_kelas ?? '-' }}</span><br>
                                <span class="small text-muted">{{ $item->mapel->nama_mapel ?? '-' }}</span>
                            </td>
                            <td>
                                <span class="text-dark">{{ Str::limit($item->materi ?? $item->topik ?? '-', 50) }}</span>
                            </td>
                            <td class="text-center">
                                {{-- Contoh logika menghitung siswa hadir --}}
                                @if(isset($item->hadir))
                                    <span class="badge badge-success" title="Hadir">{{ $item->hadir }}</span>
                                    <span class="badge badge-warning" title="Sakit">{{ $item->sakit ?? 0 }}</span>
                                    <span class="badge badge-danger" title="Alpha">{{ $item->alpha ?? 0 }}</span>
                                @else
                                    <span class="text-muted small">-</span>
                                @endif
                            </td>
                            <td class="text-center">
                                @if(($item->status_sesi ?? '') == 'laporan_selesai')
                                    <span class="badge badge-light border text-success"><i class="fas fa-check-circle mr-1"></i> Selesai</span>
                                @else
                                    <span class="badge badge-light border text-warning"><i class="fas fa-clock mr-1"></i> Proses</span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center py-5 text-muted">
                                <img src="https://img.icons8.com/ios/100/cccccc/empty-box.png" style="width: 60px; opacity: 0.5;" class="mb-3 d-block mx-auto">
                                <p class="mb-0">Belum ada data jurnal pada rentang tanggal ini.</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
@stop

@push('css')
<style>
    .form-control.bg-light { background-color: #f8f9fa !important; }
    .form-control.bg-light:focus { background-color: #fff !important; border: 1px solid #007bff !important; }
</style>
@endpush

@push('js')
<script>
    $(document).ready(function() {
        $('.select2').select2({ theme: 'bootstrap4', width: '100%' });
        
        $('#tableJurnal').DataTable({
            "language": { "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Indonesian.json" },
            "responsive": true,
            "order": [[ 1, "desc" ]] // Urutkan berdasarkan tanggal terbaru
        });
    });
</script>
@endpush