@extends('layouts.admin')

@section('content')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<style>
    /* Kustomisasi Tampilan Biar Makin "Wah" */
    .card-modern {
        border: none;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        transition: transform 0.2s ease;
    }
    
    .table-modern thead th {
        background-color: #f8fafc;
        color: #64748b;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #e2e8f0;
    }
    
    .table-modern tbody td {
        vertical-align: middle;
        padding: 1rem 0.5rem;
        border-bottom: 1px solid #f1f5f9;
    }

    /* Desain Opsi Absen (Modern Pill) */
    .radio-group-modern {
        display: flex;
        gap: 8px;
        justify-content: center;
    }
    
    .radio-tile {
        padding: 6px 16px;
        font-size: 0.85rem;
        font-weight: 600;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        cursor: pointer;
        background: #fff;
        color: #64748b;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Efek Saat Dipilih */
    .radio-check:checked + .radio-tile.ts-hadir { background: #dcfce7; color: #16a34a; border-color: #16a34a; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15); }
    .radio-check:checked + .radio-tile.ts-sakit { background: #fef9c3; color: #ca8a04; border-color: #ca8a04; box-shadow: 0 2px 8px rgba(202, 138, 4, 0.15); }
    .radio-check:checked + .radio-tile.ts-izin  { background: #e0f2fe; color: #0284c7; border-color: #0284c7; box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15); }
    .radio-check:checked + .radio-tile.ts-alfa  { background: #fee2e2; color: #dc2626; border-color: #dc2626; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15); }
    
    /* Efek Hover */
    .radio-tile:hover { background: #f8fafc; }
    
    .btn-simpan {
        border-radius: 12px;
        padding: 10px 24px;
        font-weight: 600;
        letter-spacing: 0.3px;
        transition: all 0.2s;
    }

    /* Indikator Status Kelas */
    .status-badge {
        font-size: 0.75rem;
        padding: 4px 10px;
        border-radius: 8px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    /* ═══════════════════════════════════════════════════════════
       MOBILE: sebelumnya tabel ini (Nama + 4 pilihan status sejajar
       dalam 1 baris) memaksa scroll horizontal di layar sempit —
       pilihan Hadir/Sakit/Izin/Alfa jadi kepotong & susah dipencet
       jari. Di bawah 768px, tabel diubah jadi tumpukan kartu per
       siswa, dan 4 pilihan status disusun grid 2 kolom penuh lebar
       supaya target sentuh lebih besar dan tidak perlu geser layar.
       ═══════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
        .table-modern thead { display: none; }
        .table-modern, .table-modern tbody, .table-modern tr, .table-modern td {
            display: block; width: 100%;
        }
        .table-modern tr {
            border: 1px solid #e2e8f0; border-radius: 14px;
            margin: 0 0 12px; padding: 14px; background: #fff;
        }
        .table-modern td { padding: 6px 0 !important; border: none !important; }
        .table-modern td.text-center { text-align: left !important; }

        .radio-group-modern {
            flex-wrap: wrap;
            justify-content: stretch;
            gap: 8px;
            margin-top: 8px;
        }
        .radio-tile {
            flex: 1 1 calc(50% - 8px);
            text-align: center;
            padding: 12px 8px;
            font-size: 0.9rem;
        }

        .card-footer.d-flex { flex-direction: column; gap: 10px; align-items: stretch !important; }
        .card-footer .btn-simpan { width: 100%; }
        .card-header.d-flex { flex-direction: column; align-items: flex-start !important; gap: 10px; }
    }
</style>

<div class="container mt-4 mb-5">
    
    {{-- Header Elegan --}}
    <div class="d-flex align-items-center mb-4">
        <div class="bg-primary text-white d-flex align-items-center justify-content-center rounded-circle me-3 shadow-sm" style="width: 48px; height: 48px;">
            <i class="bi bi-journal-check fs-4"></i>
        </div>
        <div>
            <h3 class="fw-bold mb-0 text-dark">Absen Keliling Kelas</h3>
            <p class="text-secondary mb-0" style="font-size: 0.9rem;">Panel kesiswaan untuk mendata siswa yang tidak hadir secara manual.</p>
        </div>
    </div>



    {{-- Card Form Filter Kelas & Tanggal --}}
    <div class="card card-modern mb-4 border-0">
        <div class="card-body p-4 bg-white" style="border-radius: 16px;">
            <form action="{{ route('absen-manual.index') }}" method="GET" class="row g-3 align-items-end">
                
                {{-- Tanggal dipindah ke sini agar indikator status kelas langsung akurat per tanggal --}}
                <div class="col-md-3">
                    <label class="form-label fw-bold text-muted" style="font-size: 0.8rem; letter-spacing: 0.5px;">TANGGAL CEK</label>
                    <input type="date" name="tanggal" class="form-control form-control-lg border-light shadow-sm text-secondary fw-bold" style="border-radius: 12px; font-size: 0.95rem;" value="{{ $tanggalPilih }}" onchange="this.form.submit()">
                </div>

                <div class="col-md-5">
                    <label class="form-label fw-bold text-muted" style="font-size: 0.8rem; letter-spacing: 0.5px;">PILIH RUANG KELAS</label>
                    <select name="kelas" class="form-select form-select-lg border-light shadow-sm" style="border-radius: 12px; font-size: 0.95rem;" onchange="this.form.submit()">
                        <option value="">-- Tentukan Kelas --</option>
                        @foreach($listKelas as $k)
                            @php 
                                // Cek apakah kelas ini masuk daftar kelas yang sudah ada laporannya
                                $isDone = in_array($k, $kelasSudahAdaData); 
                            @endphp
                            <option value="{{ $k }}" {{ $kelasTerpilih == $k ? 'selected' : '' }}>
                                {{ $isDone ? '✅' : '⏳' }} Kelas {{ $k }} {{ $isDone ? '(Sudah Ada Laporan)' : '' }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4 pb-2">
                    <small class="text-muted d-block"><i class="bi bi-info-circle me-1"></i> <strong>✅</strong> : Ada siswa tercatat Mangkir/Sakit/Izin.</small>
                    <small class="text-muted d-block"><i class="bi bi-info-circle me-1"></i> <strong>⏳</strong> : Belum dicek / Hadir 100%.</small>
                </div>
            </form>
        </div>
    </div>

        {{-- ✅ Notifikasi hari libur --}}
@if($pesanLibur)
    <div class="alert d-flex align-items-center gap-3 mb-4"
         style="background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:16px 20px;">
        <i class="bi bi-calendar-x-fill" style="font-size:22px;color:#ef4444;flex-shrink:0;"></i>
        <div>
            <div style="font-weight:700;color:#dc2626;font-size:14px;">Absensi Tidak Tersedia</div>
            <div style="font-size:13px;color:#b91c1c;">{{ $pesanLibur }}</div>
        </div>
    </div>

    {{-- Sembunyikan form input jika hari libur --}}
    <style> .form-absen { display: none !important; } </style>
@endif

    {{-- Munculkan Tabel Hanya Jika Kelas Dipilih --}}
    @if($kelasTerpilih)
    <div class="card card-modern border-0">
        <form class="form-absen" action="{{ route('absen-manual.store') }}" method="POST">
            @csrf
            
            {{-- Hidden input tanggal untuk proses simpan data --}}
            <input type="hidden" name="tanggal" value="{{ $tanggalPilih }}">

            <div class="card-header bg-white border-bottom p-4 d-flex justify-content-between align-items-center" style="border-radius: 16px 16px 0 0;">
                <div>
                    <h5 class="fw-bold text-dark mb-1">Daftar Siswa Kelas {{ $kelasTerpilih }}</h5>
                    <small class="text-muted">Tandai status kehadiran siswa. Data yang sudah tersimpan akan otomatis terpilih.</small>
                </div>
                
                @if(in_array($kelasTerpilih, $kelasSudahAdaData))
                    <span class="status-badge bg-success-subtle text-success border border-success-subtle">
                        <i class="bi bi-check-circle-fill me-1"></i> Data Tersimpan
                    </span>
                @else
                    <span class="status-badge bg-warning-subtle text-warning border border-warning-subtle" style="color: #b45309 !important;">
                        <i class="bi bi-clock-history me-1"></i> Belum Ada Rekap
                    </span>
                @endif
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-modern mb-0">
                        <thead>
                            <tr>
                                <th class="ps-4" style="width: 5%;">NO</th>
                                <th>IDENTITAS SISWA</th>
                                <th class="text-center" style="width: 50%;">OPSI KEHADIRAN</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($siswas as $idx => $s)
                            @php
                                // AUTO-FILL: Ambil riwayat status siswa ini dari database, default: Hadir
                                $statusSiswa = $absenHariIni[$s->id] ?? 'Hadir';
                            @endphp
                            <tr>
                                <td class="ps-4 fw-bold text-muted">{{ $idx + 1 }}</td>
                                <td>
                                    <div class="fw-bold text-dark" style="font-size: 1rem;">{{ $s->nama }}</div>
                                    <div class="text-muted" style="font-size: 0.8rem;">NISN: {{ $s->nisn }}</div>
                                </td>
                                <td class="text-center">
                                    <div class="radio-group-modern">
                                        <input type="radio" class="radio-check d-none" name="kehadiran[{{ $s->id }}]" id="H-{{ $s->id }}" value="Hadir" {{ $statusSiswa == 'Hadir' ? 'checked' : '' }}>
                                        <label class="radio-tile ts-hadir" for="H-{{ $s->id }}"><i class="bi bi-check2-circle me-1"></i> Hadir</label>

                                        <input type="radio" class="radio-check d-none" name="kehadiran[{{ $s->id }}]" id="S-{{ $s->id }}" value="Sakit" {{ $statusSiswa == 'Sakit' ? 'checked' : '' }}>
                                        <label class="radio-tile ts-sakit" for="S-{{ $s->id }}">Sakit</label>

                                        <input type="radio" class="radio-check d-none" name="kehadiran[{{ $s->id }}]" id="I-{{ $s->id }}" value="Izin" {{ $statusSiswa == 'Izin' ? 'checked' : '' }}>
                                        <label class="radio-tile ts-izin" for="I-{{ $s->id }}">Izin</label>

                                        <input type="radio" class="radio-check d-none" name="kehadiran[{{ $s->id }}]" id="A-{{ $s->id }}" value="Alfa" {{ $statusSiswa == 'Alfa' ? 'checked' : '' }}>
                                        <label class="radio-tile ts-alfa" for="A-{{ $s->id }}">Alfa</label>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="3" class="text-center py-5 text-muted">
                                    <i class="bi bi-inbox fs-1 d-block mb-3 text-light"></i>
                                    Tidak ada data siswa di kelas ini.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            @if(count($siswas) > 0)
            <div class="card-footer bg-white p-4 d-flex justify-content-between align-items-center" style="border-radius: 0 0 16px 16px; border-top: 1px solid #f1f5f9;">
                <small class="text-muted"><i class="bi bi-shield-check text-success me-1"></i> Sistem otomatis mendeteksi data ganda.</small>
                <button type="submit" class="btn btn-primary btn-simpan shadow-sm">
                    <i class="bi bi-cloud-arrow-up-fill me-2"></i>Simpan Rekap Absen
                </button>
            </div>
            @endif
        </form>
    </div>
    @endif
</div>

{{-- Script Pemicu SweetAlert2 --}}
@if(session('success'))
<script>
    document.addEventListener("DOMContentLoaded", function() {
        Swal.fire({
            icon: 'success',
            title: 'Berhasil Disimpan!',
            text: '{{ session('success') }}',
            showConfirmButton: false,
            timer: 2500,
            timerProgressBar: true,
            toast: true,
            position: 'top-end',
            customClass: {
                popup: 'rounded-4 shadow-sm'
            }
        });
    });
</script>
@endif
@endsection