@extends('layouts.app')
@section('title', 'Absensi Siswa')

@section('content')
<div class="main-content">
    <div class="container-fluid">

        <!-- Header -->
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-check-square bg-blue"></i>
                        <div class="d-inline">
                            <h5>Absensi Siswa</h5>
                            <span>Input & Rekap Kehadiran Harian</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if ($invalid)
            <div class="alert alert-danger">{{ $pesan }}</div>
        @else

        <!-- Filter Form -->
        <div class="card">
            <form method="GET" action="{{ route('absensi.index') }}" id="filterForm">
                <div class="card-header d-flex justify-content-between">
                    <div class="row w-100">
                        <!-- Tanggal -->
                        <div class="col-sm-4 mb-2">
                            <label for="datepicker" class="form-label fw-semibold">Tanggal</label>
                            <input type="text" name="tanggal" id="datepicker" class="form-control"
                                   placeholder="Pilih Tanggal" value="{{ $tanggal }}">
                        </div>

                        <!-- Kelas (admin only) -->
                        @if ($isAdmin)
                        <div class="col-sm-4 mb-2">
                            <label for="filterKelas" class="form-label fw-semibold">Kelas</label>
                            <select name="kelas_id" id="filterKelas" class="form-control">
                                <option value="">-- Pilih Kelas --</option>
                                @foreach ($daftarKelas as $item)
                                    <option value="{{ $item->id }}" {{ $item->id == $kelasDipilih ? 'selected' : '' }}>
                                        {{ $item->nama_kelas ?? $item->kelas->nama_kelas ?? 'Kelas Tidak Diketahui' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        @endif
                    </div>
                </div>
            </form>
        </div>

        <!-- TABEL ABSENSI -->
        <div class="card mt-3">
            <div class="card-header fw-semibold">Daftar Siswa</div>
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead class="table-light">
                        <tr>
                            <th>No</th>
                            <th>Nama</th>
                            <th>Status</th>
                            <th>Keterangan</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($siswaList as $i => $s)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>{{ $s->nama }}</td>
                            <td>
                                <select class="form-control status-select" data-id="{{ $s->id }}">
                                    @foreach (['Hadir', 'Sakit', 'Izin', 'Alpha'] as $opt)
                                        <option value="{{ $opt }}" {{ $opt == $s->status ? 'selected' : '' }}>
                                            {{ $opt }}
                                        </option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <input type="text" class="form-control keterangan-input" placeholder="Opsional"
                                       value="{{ $s->keterangan }}">
                            </td>
                            <td>
                                <button type="button" class="btn btn-sm btn-success simpan-btn">Simpan</button>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center">Belum ada siswa di kelas ini.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @endif

    </div>
</div>
@endsection

@section('script')
<!-- jQuery UI Datepicker -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script>
    $(document).ready(function () {
        $("#datepicker").datepicker({
            dateFormat: 'yy-mm-dd',
            minDate: new Date("{{ $minDate ?? '2024-01-01' }}"),
            maxDate: new Date("{{ $maxDate ?? now()->format('Y-m-d') }}"),
            onSelect: function () {
                $('#filterForm').submit();
            }
        });

        $('#filterKelas').on('change', function () {
            $('#filterForm').submit();
        });

        $('.simpan-btn').on('click', function () {
            const btn = $(this);
            const row = btn.closest('tr');
            const id = row.find('.status-select').data('id');
            const status = row.find('.status-select').val();
            const ket = row.find('.keterangan-input').val();
            const tgl = $('#datepicker').val();

            btn.prop('disabled', true).text('Menyimpan...');

            fetch("{{ route('absensi.update') }}", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content')
                },
                body: JSON.stringify({
                    siswa_kelas_id: id,
                    status: status,
                    keterangan: ket,
                    tanggal: tgl
                })
            })
            .then(async res => {
                const text = await res.text();
                try {
                    const data = JSON.parse(text);
                    if (data.success) {
                        alert(data.message);
                    } else {
                        alert('Gagal menyimpan absensi: ' + data.message);
                        console.error('Error:', data);
                    }
                } catch (e) {
                    alert('Gagal menyimpan absensi: server error');
                    console.error('Raw response:', text);
                }
            })
            .catch((err) => {
                alert('Terjadi kesalahan saat menyimpan.');
                console.error('Fetch error:', err);
            })
            .finally(() => {
                btn.prop('disabled', false).text('Simpan');
            });
        });
    });
</script>

<style>
    .table-responsive {
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
        padding: 0 16px;
    }

    .table-bordered {
        min-width: 800px;
    }

    .table-bordered td,
    .table-bordered th {
        white-space: nowrap;
    }

    .table-responsive::-webkit-scrollbar {
        height: 8px;
    }

    .table-responsive::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }
</style>
@endsection