@extends('guru.kelas.layout')

@php
    $selectedMapel = $selectedMapel ?? ($mapel ?? null);
    $selectedDate = $selectedDate ?? now('Asia/Jakarta')->toDateString();
    $absensiBySiswa = $absensiBySiswa ?? collect();
    $statusOptions = [
        'hadir' => ['label' => 'Hadir', 'class' => 'hadir'],
        'izin' => ['label' => 'Izin', 'class' => 'izin'],
        'sakit' => ['label' => 'Sakit', 'class' => 'sakit'],
        'alpa' => ['label' => 'Alpa', 'class' => 'alpha'],
    ];
@endphp

@push('styles')
<style>
    .status-toggle {
        display: flex;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        overflow: hidden;
        background-color: #f1f5f9;
        max-width: fit-content;
        margin: 0 auto;
    }

    .status-radio {
        display: none;
    }

    .status-label {
        padding: 8px 14px;
        font-size: 0.84rem;
        font-weight: 700;
        color: #475569;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .status-label:hover {
        background-color: #e2e8f0;
    }

    .status-radio:checked + .status-label.hadir {
        background-color: #16a34a;
        color: #fff;
    }

    .status-radio:checked + .status-label.izin {
        background-color: #2563eb;
        color: #fff;
    }

    .status-radio:checked + .status-label.sakit {
        background-color: #eab308;
        color: #fff;
    }

    .status-radio:checked + .status-label.alpha {
        background-color: #dc2626;
        color: #fff;
    }

    .alert-success {
        margin-bottom: 18px;
        padding: 12px 14px;
        border: 1px solid #bbf7d0;
        border-radius: 8px;
        background: #f0fdf4;
        color: #166534;
        font-weight: 600;
        font-size: 0.9rem;
    }

    @media (max-width: 768px) {
        .status-toggle {
            flex-wrap: wrap;
            justify-content: center;
        }
    }
</style>
@endpush

@section('tab_content')
@if(session('success'))
    <div class="alert-success">
        <i class="fa-solid fa-circle-check"></i> {{ session('success') }}
    </div>
@endif

<div class="stats-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 24px;">
    <div class="stat-card" style="background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px; display: flex; align-items: center; gap: 14px;">
        <div class="stat-icon bg-blue" style="background: #eff6ff; color: #2563eb; width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; font-size: 1.25rem;"><i class="fa-solid fa-users"></i></div>
        <div>
            <h3 style="margin: 0; font-size: 0.84rem; color: #64748b; font-weight: 500;">Total Siswa Kelas</h3>
            <p class="stat-value" style="margin: 0; font-size: 1.25rem; font-weight: 700; color: #0f172a;">{{ $siswaList->count() }}</p>
        </div>
    </div>
    <div class="stat-card" style="background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px; display: flex; align-items: center; gap: 14px;">
        <div class="stat-icon bg-green" style="background: #f0fdf4; color: #16a34a; width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; font-size: 1.25rem;"><i class="fa-solid fa-user-check"></i></div>
        <div>
            <h3 style="margin: 0; font-size: 0.84rem; color: #64748b; font-weight: 500;">Sudah Tersimpan</h3>
            <p class="stat-value" style="margin: 0; font-size: 1.25rem; font-weight: 700; color: #0f172a;">{{ $absensiBySiswa->count() }}</p>
        </div>
    </div>
    <div class="stat-card" style="background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 16px; display: flex; align-items: center; gap: 14px;">
        <div class="stat-icon bg-orange" style="background: #fff7ed; color: #ea580c; width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; font-size: 1.25rem;"><i class="fa-solid fa-calendar-day"></i></div>
        <div>
            <h3 style="margin: 0; font-size: 0.84rem; color: #64748b; font-weight: 500;">Tanggal Aktif</h3>
            <p class="stat-value" style="margin: 0; font-size: 1.05rem; font-weight: 700; color: #0f172a;">{{ \Carbon\Carbon::parse($selectedDate)->translatedFormat('d M Y') }}</p>
        </div>
    </div>
</div>

<div class="main-grid" style="grid-template-columns: 1fr; align-items: start;">
    <div class="card" style="background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; overflow: hidden;">
        <div class="card-header" style="background: #f8fafc; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
            <h3 style="margin: 0; font-size: 1.15rem; font-weight: 700; color: #1e293b;">
                <i class="fa-solid fa-user-pen text-primary"></i>
                Absensi Kelas {{ $kelas->nama_kelas }}{{ $selectedMapel ? ' - ' . $selectedMapel->nama_mapel : '' }}
            </h3>
            <form action="{{ route('guru.kelas.mapel.absensi', [$kelas->id, $selectedMapel->id]) }}" method="GET" style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
                <input type="date" name="tanggal" value="{{ $selectedDate }}" class="form-control" style="border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 12px; height: 38px;">
                <button type="submit" class="btn btn-primary" style="height: 38px; padding: 0 16px; font-weight: 700; border-radius: 6px; border: none; background: #2563eb; color: #fff; cursor: pointer;">
                    Tampilkan
                </button>
            </form>
        </div>

        <form action="{{ route('guru.kelas.mapel.absensi.store', [$kelas->id, $selectedMapel->id]) }}" method="POST">
            @csrf
            <input type="hidden" name="tanggal" value="{{ $selectedDate }}">

            <div class="card-body" style="padding: 20px;">
                @if(isset($errors) && $errors->any())
                    <div style="margin-bottom: 16px; padding: 12px 14px; border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 0.9rem;">
                        {{ $errors->first() }}
                    </div>
                @endif

                <div style="display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;">
                    <input type="text" id="search-siswa" class="form-control" placeholder="Cari nama siswa..." onkeyup="searchTable()" style="max-width: 300px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 38px;">
                    <select id="filter-status" class="form-control" onchange="filterStatus()" style="max-width: 200px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; height: 38px;">
                        <option value="all">Semua Status</option>
                        @foreach($statusOptions as $status => $option)
                            <option value="{{ $status }}">{{ $option['label'] }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="table-responsive" style="overflow-x: auto; width: 100%;">
                    <table class="modern-table" style="width: 100%; border-collapse: collapse; text-align: left;">
                        <thead>
                            <tr style="border-bottom: 2px solid #e2e8f0; background-color: #f8fafc;">
                                <th style="padding: 12px 14px; font-weight: 700; color: #475569; font-size: 0.82rem; text-transform: uppercase; width: 50px;">No</th>
                                <th style="padding: 12px 14px; font-weight: 700; color: #475569; font-size: 0.82rem; text-transform: uppercase;">Nama Siswa</th>
                                <th style="padding: 12px 14px; font-weight: 700; color: #475569; font-size: 0.82rem; text-transform: uppercase; width: 120px;">Tanggal</th>
                                <th style="padding: 12px 14px; font-weight: 700; color: #475569; font-size: 0.82rem; text-transform: uppercase; text-align: center; width: 340px;">Status Presensi</th>
                                <th style="padding: 12px 14px; font-weight: 700; color: #475569; font-size: 0.82rem; text-transform: uppercase; min-width: 180px;">Keterangan</th>
                            </tr>
                        </thead>
                        <tbody id="body-absensi">
                            @forelse($siswaList as $siswa)
                                @php
                                    $saved = $absensiBySiswa->get($siswa->id);
                                    $currentStatus = old("absensi.{$siswa->id}.status", $saved?->status ?? 'hadir');
                                    $currentNote = old("absensi.{$siswa->id}.keterangan", $saved?->keterangan ?? '');
                                @endphp
                                <tr class="absensi-row" data-nama="{{ strtolower($siswa->name) }}" data-status="{{ $currentStatus }}" style="border-bottom: 1px solid #e2e8f0;">
                                    <td style="padding: 14px; color: #475569;">{{ $loop->iteration }}</td>
                                    <td style="padding: 14px; font-weight: 600; color: #1e293b;">
                                        {{ $siswa->name }}
                                        <div style="font-size: 0.78rem; color: #64748b; margin-top: 2px;">NIS: {{ $siswa->siswaProfile?->nis ?: '-' }}</div>
                                    </td>
                                    <td style="padding: 14px; color: #475569; font-size: 0.88rem;">{{ $selectedDate }}</td>
                                    <td style="padding: 14px; text-align: center;">
                                        <div class="status-toggle">
                                            @foreach($statusOptions as $status => $option)
                                                <input
                                                    type="radio"
                                                    name="absensi[{{ $siswa->id }}][status]"
                                                    id="status_{{ $siswa->id }}_{{ $status }}"
                                                    value="{{ $status }}"
                                                    class="status-radio"
                                                    @checked($currentStatus === $status)
                                                >
                                                <label for="status_{{ $siswa->id }}_{{ $status }}" class="status-label {{ $option['class'] }}">{{ $option['label'] }}</label>
                                            @endforeach
                                        </div>
                                    </td>
                                    <td style="padding: 14px;">
                                        <input
                                            type="text"
                                            name="absensi[{{ $siswa->id }}][keterangan]"
                                            value="{{ $currentNote }}"
                                            class="form-control"
                                            style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 10px;"
                                            placeholder="Opsional"
                                        >
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" style="padding: 24px; text-align: center; color: #64748b;">Belum ada siswa terdaftar di kelas ini.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
                    <button type="submit" class="btn btn-primary" style="height: 42px; padding: 0 24px; font-weight: 700; border-radius: 8px; border: none; cursor: pointer; background-color: #2563eb; color: #fff; display: inline-flex; align-items: center; gap: 8px;">
                        <i class="fa-solid fa-save"></i> Simpan Absensi
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('change', function(event) {
        if (!event.target.matches('.status-radio')) return;
        const row = event.target.closest('.absensi-row');
        if (row) {
            row.setAttribute('data-status', event.target.value);
        }
    });

    function searchTable() {
        const input = document.getElementById("search-siswa").value.toLowerCase();
        const filterStatus = document.getElementById("filter-status").value;
        const rows = document.querySelectorAll("#body-absensi .absensi-row");

        rows.forEach(row => {
            const nama = row.getAttribute('data-nama');
            const status = row.getAttribute('data-status');
            const matchName = nama.includes(input);
            const matchStatus = (filterStatus === 'all') || (status === filterStatus);
            row.style.display = matchName && matchStatus ? "" : "none";
        });
    }

    function filterStatus() {
        searchTable();
    }
</script>
@endpush
