{{-- resources/views/admin/kesiswaan/absensi-siswa/rekap.blade.php --}}
@extends('layouts.admin')
@section('title', 'Buku Jurnal Absensi Siswa')

@section('content')

@php
    $mapelId = $jadwalInfo->mapel_id ?? request()->route('mapelId');
    $guruId = $jadwalInfo->guru_id ?? 0;
    
    $jadwalIds = \App\Models\Akademik\JadwalPelajaran::where('kelas_id', $kela->id)
                    ->where('mapel_id', $mapelId)
                    ->pluck('id')->join(',');
                    
    $absRecords = \App\Models\Kesiswaan\SiswaAbsensiKbm::where('kelas_id', $kela->id)
                    ->where('mapel_id', $mapelId)
                    ->get();
                    
    $detailAbsensi = [];
    
    $matriksTotal = [];
    foreach($siswas as $s) {
        $matriksTotal[$s->id] = ['Hadir' => 0, 'Sakit' => 0, 'Ijin' => 0, 'Alfa' => 0, 'Dispen' => 0];
    }

    foreach($absRecords as $r) {
        $tglStr = \Carbon\Carbon::parse($r->tanggal)->format('Y-m-d');
        
        $detailAbsensi[$r->siswa_id][$tglStr] = [
            'status' => $r->status,
            'keterangan' => $r->keterangan
        ];

        if(!isset($hitungTotalHarian[$r->siswa_id][$tglStr])) {
            if(isset($matriksTotal[$r->siswa_id][$r->status])) {
                $matriksTotal[$r->siswa_id][$r->status]++;
            }
            $hitungTotalHarian[$r->siswa_id][$tglStr] = true; // Tandai hari ini sudah dihitung
        }
    }
@endphp

<div class="page-inner">
  <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
    <div>
      <h3 class="fw-bold mb-1"><i class="fa fa-book me-2"></i> Buku Jurnal Absensi (Ledger)</h3>
      <h6 class="op-7 mb-2">Matriks Kehadiran Siswa Per Mata Pelajaran.</h6>
    </div>
    <div class="ms-md-auto py-2 py-md-0">
        <button onclick="window.print()" class="btn btn-success btn-round me-2 shadow-sm">
            <i class="fa fa-print"></i> Cetak / PDF
        </button>
        <a href="{{ route('admin.absensi-siswa.show', ['kela' => $kela->id, 'tab' => 'semester']) }}" class="btn btn-secondary btn-round shadow-sm">
            <i class="fa fa-arrow-left"></i> Kembali ke Rekap
        </a>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
        <div class="card card-round shadow-sm border-0">
            <div class="card-header bg-white p-4 border-bottom">
                <div class="row align-items-center">
                    
                    <div class="col-md-5 col-lg-4 d-flex align-items-center mb-4 mb-md-0 border-md-end">
                        <img src="{{ !empty($jadwalInfo->guru->img) ? asset('uploads/guru/'.$jadwalInfo->guru->img) : asset('kaiadmin/assets/img/iconuser.png') }}" 
                             class="rounded-circle border border-3 border-primary shadow-sm me-3" 
                             style="width: 75px; height: 75px; object-fit: cover;" alt="Avatar Guru">
                        <div>
                            <span class="text-uppercase text-muted fw-bold d-block mb-1" style="font-size: 0.7rem; letter-spacing: 1px;">Guru Pengampu</span>
                            <h4 class="fw-bold text-dark mb-1" style="font-size: 1.15rem;">{{ $jadwalInfo->guru->name ?? 'Belum Ditentukan' }}</h4>
                            <span class="badge bg-light text-dark border">
                                <i class="fa fa-id-badge me-1"></i> NIP: {{ $jadwalInfo->guru->status?->nip ?? $jadwalInfo->guru->status?->nuptk ?? '-' }}
                            </span>
                        </div>
                    </div>

                    <div class="col-md-7 col-lg-8 ps-md-4">
                        <div class="row g-3">
                            <div class="col-sm-12 col-xl-6">
                                <div class="p-3 bg-primary-subtle border border-primary-subtle rounded-3 h-100 d-flex flex-column justify-content-center">
                                    <span class="text-primary fw-bold mb-1" style="font-size: 0.75rem; letter-spacing: 0.5px;">
                                        <i class="fa fa-book-open me-1"></i> MATA PELAJARAN
                                    </span>
                                    <h5 class="fw-bold text-primary mb-0">{{ $jadwalInfo->mapel->mapelNama->nama_mapel ?? '-' }}</h5>
                                </div>
                            </div>
                            <div class="col-sm-12 col-xl-6">
                                <div class="p-3 bg-light border rounded-3 h-100 d-flex flex-column justify-content-center">
                                    <div class="mb-2">
                                        <span class="text-muted fw-bold d-block" style="font-size: 0.7rem; letter-spacing: 0.5px;">
                                            <i class="fa fa-users me-1"></i> KELAS / ROMBEL
                                        </span>
                                        <span class="fw-bold text-dark" style="font-size: 0.9rem;">
                                            {{ $kela->rombel?->levelKelas?->level_kelas ?? '-' }} - {{ $kela->rombel?->rombel ?? '-' }} ({{ ($kela->rombel?->jenkel ?? '') == 'L' ? 'Putra' : 'Putri' }})
                                        </span>
                                    </div>
                                    <div>
                                        <span class="text-muted fw-bold d-block" style="font-size: 0.7rem; letter-spacing: 0.5px;">
                                            <i class="fa fa-calendar-alt me-1"></i> PERIODE AKADEMIK
                                        </span>
                                        <span class="fw-bold text-dark" style="font-size: 0.9rem;">
                                            Semester {{ $kela->semester?->semester ?? '-' }} &bull; TA: {{ $kela->tahunAjaran?->tahun_ajaran ?? '-' }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover align-middle mb-0 text-center" style="min-width: 1200px;">
                        <thead class="table-light align-middle" style="font-size: 13px;">
                            <tr>
                                <th width="3%" rowspan="2" class="align-middle">No</th>
                                <th width="20%" rowspan="2" class="align-middle text-start px-3">Nama Siswa</th>
                                
                                @if(count($pertemuanDates) > 0)
                                    <th colspan="{{ count($pertemuanDates) }}" class="bg-primary text-white border-primary">Tatap Muka Ke- / Tanggal Pertemuan</th>
                                @else
                                    <th rowspan="2" class="align-middle text-muted">Belum ada data tatap muka</th>
                                @endif

                                <th colspan="5" class="bg-dark text-white border-dark">Total Kehadiran</th>
                            </tr>
                            <tr>
                                @foreach($pertemuanDates as $index => $tgl)
                                    <th style="min-width: 60px;" class="fw-bold" data-bs-toggle="tooltip" title="{{ \Carbon\Carbon::parse($tgl)->translatedFormat('d M Y') }}">
                                        {{ $index + 1 }} <br> 
                                        <small class="text-muted" style="font-size: 10px;">{{ \Carbon\Carbon::parse($tgl)->format('d/m') }}</small>
                                    </th>
                                @endforeach

                                <th width="3%" class="text-success" title="Hadir">H</th>
                                <th width="3%" class="text-warning" title="Sakit">S</th>
                                <th width="3%" class="text-info" title="Ijin">I</th>
                                <th width="3%" class="text-danger" title="Alfa">A</th>
                                <th width="3%" class="text-secondary" title="Dispen">D</th>
                            </tr>
                        </thead>
                        <tbody style="font-size: 14px;">
                            @forelse($siswas as $index => $siswa)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td class="text-start px-3 text-nowrap">
                                        <div class="fw-bold text-primary">{{ $siswa->name }}</div>
                                        <small class="text-muted"><i class="fa fa-id-card me-1"></i> {{ $siswa->nipd ?? '-' }}</small>
                                    </td>
                                    
                                    @foreach($pertemuanDates as $tgl)
                                        @php 
                                            $statusInisial = $matrix[$siswa->id][$tgl] ?? '-';
                                            $detail = $detailAbsensi[$siswa->id][$tgl] ?? null;
                                            $statusFull = $detail ? $detail['status'] : '';
                                            $keterangan = $detail ? $detail['keterangan'] : '';
                                            
                                            $textClass = 'text-muted'; 
                                            if($statusInisial == 'H') $textClass = 'text-success fw-bold fs-5';
                                            elseif($statusInisial == 'S') $textClass = 'text-warning fw-bold fs-5';
                                            elseif($statusInisial == 'I') $textClass = 'text-info fw-bold fs-5';
                                            elseif($statusInisial == 'A') $textClass = 'text-danger fw-bold fs-5';
                                            elseif($statusInisial == 'D') $textClass = 'text-secondary fw-bold fs-5';
                                        @endphp
                                        <td class="align-middle">
                                            @if($statusInisial != '-')
                                                <button type="button" class="btn btn-link p-0 m-0 shadow-none btn-edit-absensi" 
                                                        data-siswa-id="{{ $siswa->id }}" 
                                                        data-siswa-name="{{ $siswa->name }}"
                                                        data-tanggal="{{ $tgl }}"
                                                        data-status="{{ $statusFull }}"
                                                        data-keterangan="{{ $keterangan }}"
                                                        data-bs-toggle="tooltip" title="Ubah: {{ $statusFull }}">
                                                    <span class="{{ $textClass }}">{{ $statusInisial }}</span>
                                                </button>
                                            @else
                                                <span class="text-muted opacity-25">-</span>
                                            @endif
                                        </td>
                                    @endforeach

                                    <td class="fw-bold text-success">{{ $matriksTotal[$siswa->id]['Hadir'] > 0 ? $matriksTotal[$siswa->id]['Hadir'] : '-' }}</td>
                                    <td class="fw-bold text-warning">{{ $matriksTotal[$siswa->id]['Sakit'] > 0 ? $matriksTotal[$siswa->id]['Sakit'] : '-' }}</td>
                                    <td class="fw-bold text-info">{{ $matriksTotal[$siswa->id]['Ijin'] > 0 ? $matriksTotal[$siswa->id]['Ijin'] : '-' }}</td>
                                    <td class="fw-bold text-danger">{{ $matriksTotal[$siswa->id]['Alfa'] > 0 ? $matriksTotal[$siswa->id]['Alfa'] : '-' }}</td>
                                    <td class="fw-bold text-secondary">{{ $matriksTotal[$siswa->id]['Dispen'] > 0 ? $matriksTotal[$siswa->id]['Dispen'] : '-' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="100%" class="text-center py-4">Belum ada siswa di kelas ini.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modalEditAbsensi" tabindex="-1" aria-labelledby="modalEditAbsensiLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content card-round border-0 shadow">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title fw-bold" id="modalEditAbsensiLabel"><i class="fa fa-edit me-2"></i>Koreksi Kehadiran Siswa</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-4">
        <form id="formEditAbsensi">
            <input type="hidden" id="edit_siswa_id">
            <input type="hidden" id="edit_tanggal">
            
            <div class="mb-3">
                <label class="form-label fw-bold text-muted small">Nama Siswa</label>
                <input type="text" class="form-control form-control-sm fw-bold text-dark bg-light border-0" id="edit_siswa_name" readonly>
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold text-muted small">Tanggal Pertemuan</label>
                <input type="text" class="form-control form-control-sm fw-bold text-dark bg-light border-0" id="edit_tanggal_display" readonly>
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold text-muted small">Status Kehadiran</label>
                <select id="edit_status" class="form-select shadow-none border-primary">
                    <option value="Hadir">Hadir</option>
                    <option value="Sakit">Sakit</option>
                    <option value="Ijin">Ijin</option> 
                    <option value="Alfa">Alfa</option>
                    <option value="Dispen">Dispen</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label fw-bold text-muted small">Keterangan (Opsional)</label>
                <input type="text" class="form-control shadow-none" id="edit_keterangan" placeholder="Tambahkan catatan jika perlu...">
            </div>
        </form>
      </div>
      <div class="modal-footer bg-light">
        <button type="button" class="btn btn-secondary btn-round btn-sm shadow-none" data-bs-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-primary btn-round btn-sm shadow-sm" id="btnSaveAbsensi">
            <i class="fa fa-save me-1"></i> Simpan Perubahan
        </button>
      </div>
    </div>
  </div>
</div>

@push('styles')
<style>
    .btn-edit-absensi { transition: transform 0.2s ease; text-decoration: none !important; }
    .btn-edit-absensi:hover { transform: scale(1.3); }

    @media print {
        body * { visibility: hidden; }
        .main-panel { width: 100% !important; margin: 0 !important; }
        .card, .card * { visibility: visible; }
        .card { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none !important; }
        .btn, .nav, footer, .sidebar, .btn-link { display: none !important; }
        
        .bg-dark { background-color: #343a40 !important; color: white !important; -webkit-print-color-adjust: exact; }
        .bg-primary { background-color: #0d6efd !important; color: white !important; -webkit-print-color-adjust: exact; }
        .bg-primary-subtle { background-color: #cfe2ff !important; -webkit-print-color-adjust: exact; }
        .bg-light { background-color: #f8f9fa !important; -webkit-print-color-adjust: exact; }
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const modalEl = document.getElementById('modalEditAbsensi');
    const modal = new bootstrap.Modal(modalEl);
    
    const formatDateId = (dateStr) => {
        const options = { year: 'numeric', month: 'long', day: 'numeric' };
        return new Date(dateStr).toLocaleDateString('id-ID', options);
    };

    document.querySelectorAll('.btn-edit-absensi').forEach(btn => {
        btn.addEventListener('click', function() {
            const sId = this.dataset.siswaId;
            const sName = this.dataset.siswaName;
            const tgl = this.dataset.tanggal;
            const status = this.dataset.status;
            const ket = this.dataset.keterangan;

            document.getElementById('edit_siswa_id').value = sId;
            document.getElementById('edit_tanggal').value = tgl;
            document.getElementById('edit_siswa_name').value = sName;
            document.getElementById('edit_tanggal_display').value = formatDateId(tgl);
            document.getElementById('edit_status').value = status || 'Hadir';
            document.getElementById('edit_keterangan').value = ket || '';

            modal.show();
        });
    });

    document.getElementById('btnSaveAbsensi').addEventListener('click', function() {
        const sId = document.getElementById('edit_siswa_id').value;
        const tgl = document.getElementById('edit_tanggal').value;
        const stat = document.getElementById('edit_status').value;
        const ket = document.getElementById('edit_keterangan').value;
        
        const btn = this;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fa fa-spinner fa-spin me-1"></i> Menyimpan...';
        btn.disabled = true;

        const formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('tanggal', tgl);
        formData.append('kelas_id', '{{ $kela->id }}');
        formData.append(`absensi[${sId}][{{ $mapelId }}][jadwal_ids]`, '{{ $jadwalIds }}');
        formData.append(`absensi[${sId}][{{ $mapelId }}][mapel_id]`, '{{ $mapelId }}');
        formData.append(`absensi[${sId}][{{ $mapelId }}][guru_id]`, '{{ $guruId }}');
        formData.append(`absensi[${sId}][{{ $mapelId }}][status]`, stat);
        formData.append(`absensi[${sId}][{{ $mapelId }}][keterangan]`, ket);

        fetch('{{ route("admin.absensi-siswa.store") }}', { 
            method: 'POST', 
            headers: {'X-Requested-With': 'XMLHttpRequest'}, 
            body: formData 
        })
        .then(async r => {
            const d = await r.json();
            if (!r.ok) throw new Error(d.message || 'Terjadi kesalahan sistem.');
            return d;
        })
        .then(d => {
            modal.hide();
            swal({
                title: "Terkoreksi!",
                text: "Data absensi berhasil diperbarui.",
                icon: "success",
                timer: 1500, 
                buttons: false
            }).then(() => {
                window.location.reload(); 
            });
        })
        .catch(error => {
            btn.innerHTML = originalText;
            btn.disabled = false;
            swal({
                title: "Gagal Menyimpan",
                text: error.message,
                icon: "error",
                dangerMode: true,
            });
        });
    });
});
</script>
@endpush
@endsection