@extends('layouts.app')

@section('content')
<style>
.text-center { text-align:center; }
.progress-inline { display:flex; align-items:center; gap:8px; }
.progress-bar-mini { flex:1; background:#e9ecef; border-radius:8px; height:8px; overflow:hidden; max-width:120px; }
.progress-bar-mini .fill { height:100%; border-radius:8px; }
</style>

<div class="page-header">
    <h2><i class="fas fa-user-clock"></i> Santri Perlu Perhatian</h2>
    <a href="{{ route('admin.laporan-kegiatan.index', request()->only('periode','tanggal_dari','tanggal_sampai')) }}"
       class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> Kembali
    </a>
</div>

{{-- Konteks header --}}
<div class="content-box" style="margin-bottom:14px;">
    <p style="margin:0;font-size:.88rem;color:var(--text-light);">
        <i class="fas fa-info-circle"></i>
        Menampilkan <strong>{{ $santris->total() }} santri</strong>
        dari <strong>{{ $totalSantriAktif }} santri aktif</strong>
        yang kehadiran efektifnya &lt;70%
        dalam periode <strong>{{ $periodeLabel }}</strong>.
        <br>
        <span style="font-size:.8rem;opacity:.8;">
            <i class="fas fa-clock"></i> Terlambat dihitung sebagai Hadir efektif.
        </span>
    </p>
</div>

{{-- Filter --}}
<div class="content-box" style="margin-bottom:14px;">
    <form method="GET" style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;">
        <input type="hidden" name="periode" value="{{ request('periode','bulan_ini') }}">
        <input type="hidden" name="tanggal_dari"    value="{{ request('tanggal_dari') }}">
        <input type="hidden" name="tanggal_sampai"  value="{{ request('tanggal_sampai') }}">
        <div class="form-group" style="margin:0;">
            <label style="font-size:.82rem;">Filter Kelas</label>
            <select name="id_kelas" class="form-control" style="min-width:180px;">
                <option value="">-- Semua Kelas --</option>
                @foreach($kelasList as $k)
                    <option value="{{ $k->id }}" {{ request('id_kelas')==$k->id?'selected':'' }}>
                        {{ $k->kelompok->nama_kelompok ?? '' }} – {{ $k->nama_kelas }}
                    </option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-filter"></i> Filter</button>
    </form>
</div>

<div class="content-box">
    @if($santris->count() > 0)
        <div class="table-wrapper">
        <table class="data-table" style="font-size:.84rem;">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama</th>
                    <th class="text-center">Total Sesi</th>
                    <th class="text-center">
                        Hadir Efektif
                        <span style="display:block;font-weight:400;font-size:.73rem;color:#9CA3AF;">(Hadir+Terlambat)</span>
                    </th>
                    <th class="text-center">Terlambat</th>
                    <th class="text-center">Alpa</th>
                    <th class="text-center">Izin</th>
                    <th class="text-center">Sakit</th>
                    <th class="text-center" style="min-width:180px;">
                        % Kehadiran
                        <span style="display:block;font-weight:400;font-size:.73rem;color:#9CA3AF;">(hadir / total sesi)</span>
                    </th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($santris as $i => $s)
                    <tr>
                        <td>{{ $santris->firstItem() + $i }}</td>
                        <td>
                            <strong>{{ $s->nama_lengkap }}</strong>
                            <div style="font-size:.75rem;color:#9CA3AF;"><code>{{ $s->id_santri }}</code></div>
                        </td>
                        <td class="text-center">{{ $s->total }}</td>
                        <td class="text-center">
                            <span class="badge badge-success">{{ $s->hadir }}</span>
                        </td>
                        <td class="text-center">
                            @if(($s->terlambat ?? 0) > 0)
                                <span class="badge badge-warning">{{ $s->terlambat }}</span>
                            @else
                                <span style="color:#9CA3AF;">0</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <span class="badge badge-danger">{{ $s->alpa }}</span>
                        </td>
                        <td class="text-center">
                            <span class="badge badge-warning">{{ $s->izin }}</span>
                        </td>
                        <td class="text-center">
                            <span class="badge badge-info">{{ $s->sakit }}</span>
                        </td>
                        <td class="text-center">
                            <div class="progress-inline" style="justify-content:center;">
                                <div class="progress-bar-mini">
                                    <div class="fill" style="width:{{ $s->persen }}%;background:#EF4444;"></div>
                                </div>
                                <div>
                                    <strong style="color:#EF4444;">{{ $s->persen }}%</strong>
                                    {{-- Konteks X dari Y --}}
                                    <div style="font-size:.72rem;color:#9CA3AF;">
                                        {{ $s->hadir }} dari {{ $s->total }}
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <a href="{{ route('admin.riwayat-kegiatan.detail-santri', $s->id_santri) }}"
                               class="btn btn-sm btn-info" title="Lihat Riwayat Lengkap">
                                <i class="fas fa-history"></i> Riwayat
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        </div>
        <div style="margin-top:16px;">{{ $santris->links() }}</div>
    @else
        <div class="empty-state">
            <i class="fas fa-check-circle" style="color:#10B981;font-size:2rem;"></i>
            <h3>Alhamdulillah!</h3>
            <p>Tidak ada santri dengan kehadiran di bawah 70%.</p>
        </div>
    @endif
</div>
@endsection