{{-- resources/views/admin/kesiswaan/absensi-siswa/show.blade.php --}}
@extends('layouts.admin')
@section('title', 'Rekap Absensi')

@section('content')
<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">
        Rombel: {{ $kela->rombel?->levelKelas?->level_kelas ?? '-' }} - {{ $kela->rombel?->rombel ?? '-' }} 
        ({{ ($kela->rombel?->jenkel ?? '') == 'L' ? 'Putra' : 'Putri' }}) - Semester {{ $kela->semester?->semester ?? '-' }}
      </h3>
      <h6 class="op-7 mb-2">Manajemen & Rekapitulasi Absensi Siswa.</h6>
    </div>
    <div class="ms-md-auto py-2 py-md-0">
        <a href="{{ route('admin.absensi-siswa.index', ['tahun_ajaran' => $kela->tahun_ajaran_id, 'semester' => $kela->semester_id]) }}" class="btn btn-secondary btn-round shadow-sm">
          <i class="fa fa-arrow-left me-1"></i> Kembali ke Daftar Kelas
        </a>
    </div>
  </div>

  <ul class="nav nav-pills nav-secondary nav-pills-no-bd mb-4" role="tablist">
      <li class="nav-item">
          <a class="nav-link {{ $activeTab == 'harian' ? 'active fw-bold shadow-sm' : '' }}" 
             href="{{ request()->fullUrlWithQuery(['tab' => 'harian']) }}">
              <i class="fa fa-edit me-1"></i> Input Harian
          </a>
      </li>
      <li class="nav-item">
          <a class="nav-link {{ $activeTab == 'minggu' ? 'active fw-bold shadow-sm' : '' }}" 
             href="{{ request()->fullUrlWithQuery(['tab' => 'minggu']) }}">
              <i class="fa fa-calendar-week me-1"></i> Rekap Mingguan
          </a>
      </li>
      <li class="nav-item">
          <a class="nav-link {{ $activeTab == 'bulan' ? 'active fw-bold shadow-sm' : '' }}" 
             href="{{ request()->fullUrlWithQuery(['tab' => 'bulan']) }}">
              <i class="fa fa-calendar-alt me-1"></i> Rekap Bulanan
          </a>
      </li>
      <li class="nav-item">
          <a class="nav-link {{ $activeTab == 'semester' ? 'active fw-bold shadow-sm' : '' }}" 
             href="{{ request()->fullUrlWithQuery(['tab' => 'semester']) }}">
              <i class="fa fa-book-open me-1"></i> Rekap Semester {{ $kela->semester?->semester ?? '-' }}
          </a>
      </li>
  </ul>

  @php $groupedJadwals = $jadwals->groupBy('mapel_id'); @endphp

  @if($groupedJadwals->count() > 0)
    
    <div class="row">
        
        <div class="col-md-4 col-lg-3 mb-4">
            <div class="card shadow-sm border-0 rounded-4 sticky-top" style="top: 80px; z-index: 10;">
                <div class="card-body p-3">
                    <h6 class="fw-bold text-muted mb-3 text-uppercase border-bottom pb-2" style="font-size: 0.75rem; letter-spacing: 1px;">
                        <i class="fa fa-filter me-1 text-primary"></i> Mata Pelajaran
                    </h6>
                    <div class="nav flex-column nav-pills nav-primary" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                        @foreach($groupedJadwals as $mapelId => $jadwalGroup)
                            <button class="nav-link text-start fw-bold mb-2 px-4 py-2 rounded-3 {{ $loop->first ? 'active shadow-sm' : 'bg-light border text-dark' }}" 
                                    id="v-pills-mapel-{{ $mapelId }}-tab" 
                                    data-bs-toggle="pill" 
                                    data-bs-target="#v-pills-mapel-{{ $mapelId }}" 
                                    type="button" role="tab" 
                                    aria-controls="v-pills-mapel-{{ $mapelId }}" 
                                    aria-selected="{{ $loop->first ? 'true' : 'false' }}">
                                <i class="fa fa-book me-2"></i> {{ $jadwalGroup->first()->mapel->mapelNama->nama_mapel ?? '-' }}
                            </button>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8 col-lg-9">
            
            @if($activeTab == 'harian')
                {{-- KONTEN TAB HARIAN (INPUT ABSENSI - FORMAT TABEL) --}}
                <form method="POST" action="{{ route('admin.absensi-siswa.store') }}" id="formAbsensiMassal">
                    @csrf
                    <input type="hidden" name="tanggal" id="globalTanggal" value="{{ $selectedDate }}">
                    <input type="hidden" name="kelas_id" id="globalKelasId" value="{{ $kela->id }}">

                    <div class="d-flex justify-content-between align-items-center bg-dark text-white p-3 rounded-4 shadow-sm mb-4">
                        <div class="fw-bold" style="font-size: 1.05rem;">
                            <i class="fa fa-calendar-check me-2 text-warning"></i> 
                            Absensi: <span class="text-warning">{{ $namaHari }}, {{ \Carbon\Carbon::parse($selectedDate)->translatedFormat('d F Y') }}</span>
                        </div>
                        <div>
                            <input type="date" class="form-control text-center fw-bold border-0 shadow-sm" 
                                value="{{ $selectedDate }}" onchange="window.location.href='{{ route('admin.absensi-siswa.show', $kela->id) }}?tab=harian&tanggal='+this.value"
                                style="border-radius: 8px; background-color: #f8f9fa;">
                        </div>
                    </div>

                    <div class="tab-content" id="v-pills-tabContent">
                        @foreach($groupedJadwals as $mapelId => $jadwalGroup)
                            @php $firstJadwal = $jadwalGroup->first(); @endphp
                            
                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" 
                                 id="v-pills-mapel-{{ $mapelId }}" 
                                 role="tabpanel" 
                                 aria-labelledby="v-pills-mapel-{{ $mapelId }}-tab">
                                
                                <div class="alert bg-primary-subtle border-start border-primary border-4 text-dark shadow-sm rounded-3 mb-3 d-flex align-items-center">
                                    <i class="fa fa-chalkboard-teacher fa-2x text-primary me-3"></i>
                                    <div>
                                        <div class="fw-bold fs-5">{{ $firstJadwal->mapel->mapelNama->nama_mapel ?? '-' }}</div>
                                        <small class="text-muted">
                                            <i class="fa fa-user-tie me-1"></i> Pengampu: <strong>{{ $firstJadwal->guru->name ?? '-' }}</strong> | 
                                            <i class="fa fa-clock me-1 ms-2"></i> Jam Ke: 
                                            @foreach($jadwalGroup as $j) <span class="badge bg-secondary">{{ $j->jamPelajaran->jam_ke ?? '-' }}</span> @endforeach
                                        </small>
                                    </div>
                                </div>

                                <div class="card shadow-sm border-0 rounded-4">
                                    <div class="card-body p-0">
                                        <div class="table-responsive">
                                            <table class="table table-hover align-middle mb-0">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th width="5%" class="text-center py-3">No</th>
                                                        <th width="30%" class="py-3">Nama Siswa</th>
                                                        <th width="20%" class="py-3">Status</th>
                                                        <th width="35%" class="py-3">Keterangan</th>
                                                        <th width="10%" class="text-center py-3">Simpan</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse ($siswas as $siswa)
                                                        @php
                                                            $rec = $absensiData[$siswa->id][$mapelId] ?? null;
                                                            $statusTerpilih = $rec ? $rec->status : '';
                                                            $keterangan = $rec ? $rec->keterangan : '';
                                                        @endphp
                                                        <tr id="item-{{ $siswa->id }}-{{ $mapelId }}">
                                                            <td class="text-center">{{ $loop->iteration }}</td>
                                                            <td>
                                                                <div class="d-flex align-items-center">
                                                                    <img src="{{ $siswa->img ? asset('uploads/siswa/'.$siswa->img) : asset('kaiadmin/assets/img/iconuser.png') }}" 
                                                                         class="avatar-sm rounded-circle border border-primary me-2 shadow-sm" 
                                                                         style="width:35px; height:35px; object-fit:cover;">
                                                                    <div>
                                                                        <div class="fw-bold text-dark" style="font-size: 0.9rem;">{{ $siswa->name }}</div>
                                                                        <small class="text-muted">{{ $siswa->nipd ?? '-' }}</small>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <input type="hidden" name="absensi[{{ $siswa->id }}][{{ $mapelId }}][jadwal_ids]" class="input-jadwals" value="{{ $jadwalGroup->pluck('id')->join(',') }}">
                                                                <input type="hidden" name="absensi[{{ $siswa->id }}][{{ $mapelId }}][mapel_id]" class="input-mapel" value="{{ $mapelId }}">
                                                                <input type="hidden" name="absensi[{{ $siswa->id }}][{{ $mapelId }}][guru_id]" class="input-guru" value="{{ $firstJadwal->guru_id }}">
                                                                
                                                                <select name="absensi[{{ $siswa->id }}][{{ $mapelId }}][status]" 
                                                                        class="form-select form-select-sm shadow-none fw-bold input-status {{ $statusTerpilih == '' ? 'border-danger' : ($statusTerpilih == 'Hadir' ? 'bg-success text-white' : ($statusTerpilih == 'Alfa' ? 'bg-danger text-white' : 'bg-warning text-dark')) }}" 
                                                                        onchange="updateStyle(this)">
                                                                    <option value="">- Pilih -</option>
                                                                    @foreach($statusEnum as $status)
                                                                        <option value="{{ $status }}" {{ $statusTerpilih == $status ? 'selected' : '' }}>{{ $status }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <input type="text" name="absensi[{{ $siswa->id }}][{{ $mapelId }}][keterangan]" 
                                                                       class="form-control form-control-sm shadow-none input-ket" placeholder="Keterangan..." value="{{ $keterangan }}">
                                                            </td>
                                                            <td class="text-center">
                                                                <button type="button" class="btn btn-primary btn-sm btn-icon shadow-sm btn-save-row" 
                                                                        data-siswa="{{ $siswa->id }}" data-mapel="{{ $mapelId }}" data-bs-toggle="tooltip" title="Simpan Baris Ini">
                                                                    <i class="fa fa-save"></i>
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="5" class="text-center py-5">
                                                                <h5 class="fw-bold text-muted mb-0">Belum ada siswa terdaftar.</h5>
                                                            </td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        @endforeach
                    </div>

                    @if($siswas->count() > 0)
                    <div class="mt-4 mb-5 text-end bg-white p-3 rounded-4 shadow-sm border">
                        <span class="text-muted me-3 d-none d-md-inline"><i class="fa fa-info-circle me-1"></i>Tombol ini menyimpan data <strong>semua siswa</strong> pada mapel aktif sekaligus.</span>
                        <button type="submit" class="btn btn-success btn-round shadow">
                            <i class="fa fa-save me-2"></i> Simpan Massal Mapel Ini
                        </button>
                    </div>
                    @endif
                </form>

            @else
                <div class="d-flex justify-content-between align-items-center bg-primary text-white p-3 rounded-4 shadow-sm mb-4 flex-wrap">
                    <div class="fw-bold" style="font-size: 1.05rem;">
                        <i class="fa fa-chart-pie me-2 text-warning"></i> 
                        Rekapitulasi: <span class="text-warning">{{ ucfirst($activeTab) }} {{ $activeTab == 'semester' ? $kela->semester?->semester : '' }}</span>
                        @if($activeTab != 'semester')
                            - Acuan: {{ \Carbon\Carbon::parse($selectedDate)->translatedFormat('d M Y') }}
                        @endif
                    </div>
                    @if($activeTab != 'semester')
                    <div class="d-flex mt-2 mt-md-0 align-items-center">
                        <span class="small me-2 text-white-50">Ganti Tanggal:</span>
                        <input type="date" class="form-control form-control-sm text-center fw-bold text-dark border-0 shadow-sm" 
                               value="{{ $selectedDate }}" onchange="window.location.href='{{ route('admin.absensi-siswa.show', $kela->id) }}?tab={{ $activeTab }}&tanggal='+this.value"
                               style="border-radius: 8px;">
                    </div>
                    @endif
                </div>

                <div class="tab-content" id="v-pills-rekap-tabContent">
                    @foreach($groupedJadwals as $mapelId => $jadwalGroup)
                        @php
                            $firstJadwal = $jadwalGroup->first();
                            
                            $tglAcuan = \Carbon\Carbon::parse($selectedDate);
                            $start = $tglAcuan->copy()->startOfWeek();
                            $end = $tglAcuan->copy()->endOfWeek();
                            if ($activeTab == 'bulan') {
                                $start = $tglAcuan->copy()->startOfMonth();
                                $end = $tglAcuan->copy()->endOfMonth();
                            }

                            $ketQuery = \App\Models\Kesiswaan\SiswaAbsensiKbm::where('kelas_id', $kela->id)
                                ->where('mapel_id', $mapelId)
                                ->whereNotNull('keterangan')
                                ->where('keterangan', '!=', '');
                            
                            if ($activeTab != 'semester') {
                                $ketQuery->whereBetween('tanggal', [$start, $end]);
                            }
                            
                            $semuaKeteranganMapel = $ketQuery->orderBy('tanggal', 'asc')->get()->groupBy('siswa_id');
                        @endphp
                        
                        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" 
                             id="v-pills-mapel-{{ $mapelId }}" 
                             role="tabpanel" 
                             aria-labelledby="v-pills-mapel-{{ $mapelId }}-tab">

                            <div class="alert bg-primary-subtle border-start border-primary border-4 text-dark shadow-sm rounded-3 mb-3 d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="fw-bold fs-5">{{ $firstJadwal->mapel->mapelNama->nama_mapel ?? '-' }}</div>
                                    <small class="text-muted"><i class="fa fa-user-tie me-1"></i> Guru: {{ $firstJadwal->guru->name ?? '-' }}</small>
                                </div>
                                <a href="{{ route('admin.absensi-siswa.rekap', ['kela' => $kela->id, 'mapelId' => $mapelId]) }}" 
                                   class="btn btn-primary btn-round btn-sm shadow-sm" data-bs-toggle="tooltip" title="Lihat Jurnal Ledger">
                                    <i class="fa fa-book-open me-1"></i> Buka Jurnal
                                </a>
                            </div>

                            <div class="card shadow-sm border-0 rounded-4">
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-hover align-middle mb-0 text-center" style="font-size: 0.9rem;">
                                            <thead class="table-light align-middle">
                                                <tr>
                                                    <th width="5%" class="py-3">No</th>
                                                    <th width="25%" class="text-start py-3">Nama Siswa</th>
                                                    <th width="6%" class="text-success py-3" title="Hadir">H</th>
                                                    <th width="6%" class="text-warning py-3" title="Sakit">S</th>
                                                    <th width="6%" class="text-info py-3" title="Ijin">I</th>
                                                    <th width="6%" class="text-danger py-3" title="Alfa">A</th>
                                                    <th width="6%" class="text-secondary py-3" title="Dispen">D</th>
                                                    <th width="40%" class="text-start py-3">Log Keterangan</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($siswas as $siswa)
                                                    @php
                                                        $r = $rekapData[$siswa->id][$mapelId] ?? ['Hadir' => 0, 'Sakit' => 0, 'Ijin' => 0, 'Alfa' => 0, 'Dispen' => 0];
                                                        $keteranganSiswa = $semuaKeteranganMapel->get($siswa->id, collect());
                                                    @endphp
                                                    <tr>
                                                        <td>{{ $loop->iteration }}</td>
                                                        <td class="text-start">
                                                            <div class="fw-bold text-dark" style="font-size: 0.9rem;">{{ $siswa->name }}</div>
                                                            <small class="text-muted">{{ $siswa->nipd ?? '-' }}</small>
                                                        </td>
                                                        <td class="fw-bold {{ $r['Hadir'] > 0 ? 'text-success' : 'text-muted opacity-25' }}">{{ $r['Hadir'] }}</td>
                                                        <td class="fw-bold {{ $r['Sakit'] > 0 ? 'text-warning' : 'text-muted opacity-25' }}">{{ $r['Sakit'] }}</td>
                                                        <td class="fw-bold {{ $r['Ijin'] > 0 ? 'text-info' : 'text-muted opacity-25' }}">{{ $r['Ijin'] }}</td>
                                                        <td class="fw-bold {{ $r['Alfa'] > 0 ? 'text-danger' : 'text-muted opacity-25' }}">{{ $r['Alfa'] }}</td>
                                                        <td class="fw-bold {{ $r['Dispen'] > 0 ? 'text-secondary' : 'text-muted opacity-25' }}">{{ $r['Dispen'] }}</td>
                                                        <td class="text-start py-2">
                                                            @if($keteranganSiswa->count() > 0)
                                                                <ul class="list-unstyled mb-0" style="font-size: 0.8rem;">
                                                                @foreach($keteranganSiswa as $ket)
                                                                    <li class="mb-1 pb-1 {{ !$loop->last ? 'border-bottom border-light' : '' }}">
                                                                        <span class="badge bg-light text-dark border me-1 px-1">{{ \Carbon\Carbon::parse($ket->tanggal)->format('d/m') }}</span>
                                                                        <span class="fw-bold {{ $ket->status == 'Sakit' ? 'text-warning' : ($ket->status == 'Ijin' ? 'text-info' : ($ket->status == 'Alfa' ? 'text-danger' : 'text-dark')) }}">{{ $ket->status }}</span>:
                                                                        <span class="text-muted">{{ $ket->keterangan }}</span>
                                                                    </li>
                                                                @endforeach
                                                                </ul>
                                                            @else
                                                                <span class="text-muted opacity-25">-</span>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="8" class="text-center py-5">
                                                            <h5 class="fw-bold text-muted mb-0">Belum ada siswa terdaftar.</h5>
                                                        </td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    @endforeach
                </div>
            @endif

        </div> 
    </div>

  @else
    <div class="alert alert-light text-center py-5 border shadow-sm rounded-4 mt-4">
        <i class="fa fa-calendar-times fa-4x text-muted mb-3 opacity-50"></i>
        <h4 class="fw-bold text-muted">Belum Ada Jadwal Mata Pelajaran</h4>
        <p class="text-muted">Silakan tambahkan jadwal untuk kelas ini di menu Akademik terlebih dahulu.</p>
    </div>
  @endif

</div>

@push('styles')
<style>
    .nav-pills .nav-link {
        transition: all 0.3s ease;
        border-radius: 10px;
    }
    .nav-pills .nav-link.active {
        background-color: #1572e8 !important; 
        color: #fff !important;
        border-color: #1572e8 !important;
        transform: scale(1.02);
    }
    .nav-pills .nav-link:not(.active):hover {
        background-color: #e9ecef !important;
    }
</style>
@endpush

@push('scripts')
@if($activeTab == 'harian' && $groupedJadwals->count() > 0)
<script>
function updateStyle(el) {
    el.className = 'form-select form-select-sm shadow-none fw-bold input-status ' + 
        (el.value==''?'border-danger':(el.value=='Hadir'?'bg-success text-white':(el.value=='Alfa'?'bg-danger text-white':'bg-warning text-dark')));
}

document.addEventListener("DOMContentLoaded", function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });

    document.querySelectorAll('.btn-save-row').forEach(btn => {
        btn.addEventListener('click', function() {
            const sId = this.dataset.siswa;
            const mId = this.dataset.mapel; 
            const itemBox = document.getElementById(`item-${sId}-${mId}`);
            const stat = itemBox.querySelector('.input-status').value;
            
            if(!stat) {
                swal({
                    title: "Status Kosong",
                    text: "Silakan pilih status kehadiran terlebih dahulu!",
                    icon: "warning",
                });
                return;
            }

            this.classList.replace('btn-primary', 'btn-warning');
            this.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
            
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('tanggal', document.getElementById('globalTanggal').value);
            formData.append('kelas_id', document.getElementById('globalKelasId').value);
            formData.append(`absensi[${sId}][${mId}][jadwal_ids]`, itemBox.querySelector('.input-jadwals').value);
            formData.append(`absensi[${sId}][${mId}][mapel_id]`, itemBox.querySelector('.input-mapel').value);
            formData.append(`absensi[${sId}][${mId}][guru_id]`, itemBox.querySelector('.input-guru').value);
            formData.append(`absensi[${sId}][${mId}][status]`, stat);
            formData.append(`absensi[${sId}][${mId}][keterangan]`, itemBox.querySelector('.input-ket').value);

            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 => {
                this.classList.replace('btn-warning', 'btn-success');
                this.innerHTML = '<i class="fa fa-check"></i>';
                setTimeout(() => { 
                    this.className = 'btn btn-primary btn-sm btn-icon shadow-sm btn-save-row'; 
                    this.innerHTML = '<i class="fa fa-save"></i>';
                }, 2000);
            })
            .catch(error => {
                this.classList.replace('btn-warning', 'btn-danger');
                this.innerHTML = '<i class="fa fa-times"></i>';
                setTimeout(() => { 
                    this.className = 'btn btn-primary btn-sm btn-icon shadow-sm btn-save-row'; 
                    this.innerHTML = '<i class="fa fa-save"></i>';
                }, 2000);
                
                swal({
                    title: "Gagal Menyimpan",
                    text: error.message,
                    icon: "error",
                    dangerMode: true,
                });
            });
        });
    });
});
</script>
@endif
@endpush
@endsection