{{-- resources/views/admin/presensi-guru/index.blade.php --}}
@extends('admin.layouts.app') 

@section('title', 'Presensi Kehadiran Guru')

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

    @php
        $currentTaId = request('tahun_ajaran_id', $taAktif->id ?? null);
        
        $filteredSemesters = collect();
        if (isset($semesters)) {
            if (isset($jenjangAktif) && $jenjangAktif) {
                $filteredSemesters = $semesters->where('jenis_periode', $jenjangAktif->sistem_akademik);
            } else {
                $filteredSemesters = $semesters;
            }
        }

        $currentSemId = request('semester_id');
        
        $isInvalid = true;
        if ($currentSemId && $filteredSemesters->contains('id', $currentSemId)) {
            $isInvalid = false;
        }
        
        if ($isInvalid) {
            $defaultSem = $filteredSemesters->where('is_active', 1)->first() ?? $filteredSemesters->first();
            $currentSemId = $defaultSem ? $defaultSem->id : null;
        }

        $isToday = \Carbon\Carbon::parse($tanggal)->isToday();
    @endphp

    <div class="row align-items-center mb-3">
        <div class="col-md-5">
            <h4 class="mb-1 fw-bold">Presensi Harian Guru</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Kelola dan pantau kehadiran seluruh tenaga pendidik.</p>
        </div>
        <div class="col-md-7 mt-3 mt-md-0 text-md-end">
            <a href="{{ route('admin.presensi-guru.rekap', ['jenjang_id' => $jenjangAktif ? $jenjangAktif->id : ($jenjangs->first()->id ?? '')]) }}" class="btn btn-info shadow-sm fw-bold text-white" style="padding: 10px 15px;">
                <i class="bi bi-file-earmark-bar-graph me-1"></i> Rekap Bulanan
            </a>
        </div>
    </div>

    <div class="card shadow-sm border-0 mb-4 bg-white">
        <div class="card-body py-2 px-3">
            <form action="{{ url()->current() }}" method="GET" class="row g-2 align-items-center m-0">
                <div class="col-auto">
                    <div class="d-flex align-items-center justify-content-center bg-light rounded" style="width: 36px; height: 36px;">
                        <i class="bi bi-funnel-fill text-secondary fs-5"></i>
                    </div>
                </div>
                
                <div class="col-12 col-md flex-grow-1">
                    <select name="tahun_ajaran_id" class="form-select border-0 bg-light shadow-none fw-medium text-dark pe-4 cursor-pointer w-100" onchange="this.form.submit()" style="height: 36px;">
                        @if(isset($tahunAjarans))
                            @foreach($tahunAjarans as $ta)
                                <option value="{{ $ta->id }}" {{ $currentTaId == $ta->id ? 'selected' : '' }}>
                                    {{ $ta->tahun_ajaran_hijriyah }} H ({{ $ta->tahun_ajaran }} M) {{ $ta->status_akademik == 'aktif' ? '(Aktif)' : '' }}
                                </option>
                            @endforeach
                        @else
                            <option value="{{ $taAktif->id ?? '' }}">{{ $taAktif->tahun_ajaran_hijriyah ?? 'Tahun Aktif' }} H</option>
                        @endif
                    </select>
                </div>
                
                <div class="col-12 col-md flex-grow-1">
                    <select name="semester_id" class="form-select border-0 bg-light shadow-none fw-medium text-dark pe-4 cursor-pointer w-100" onchange="this.form.submit()" style="height: 36px;">
                        @if($filteredSemesters->count() > 0)
                            @foreach($filteredSemesters as $sem)
                                <option value="{{ $sem->id }}" {{ $currentSemId == $sem->id ? 'selected' : '' }}>
                                    {{ $sem->nama }} {{ $sem->is_active ? '(Aktif)' : '' }}
                                </option>
                            @endforeach
                        @else
                            <option value="">Belum Ada Periode</option>
                        @endif
                    </select>
                </div>
                
                <div class="col-12 col-md-auto">
                    <input type="date" name="tanggal" class="form-control border-0 bg-light shadow-none fw-bold text-dark cursor-pointer text-center w-100" value="{{ $tanggal }}" onchange="this.form.submit()" style="height: 36px;">
                </div>
            </form>
        </div>
    </div>

    <div class="nav-wrapper position-relative mb-4">
        <ul class="nav nav-pills nav-fill p-1 bg-white border rounded-3 shadow-sm">
            @if(isset($jenjangs) && $jenjangs->isNotEmpty())
                @foreach($jenjangs as $j)
                    @php 
                        $isActive = (isset($jenjangAktif) && $jenjangAktif->id == $j->id) || (!isset($jenjangAktif) && $loop->first); 
                    @endphp
                    <li class="nav-item">
                        <a class="nav-link mb-0 px-0 py-2 {{ $isActive ? 'active fw-bold shadow-sm' : 'text-muted' }}" 
                           href="{{ route('admin.presensi-guru.jenjang', $j->id) }}?tanggal={{ $tanggal }}&tahun_ajaran_id={{ $currentTaId }}&semester_id={{ $currentSemId }}">
                            <i class="bi bi-bookmark-star-fill me-1"></i> Guru {{ $j->nama_jenjang }}
                        </a>
                    </li>
                @endforeach
            @else
                <li class="nav-item">
                    <span class="nav-link mb-0 px-0 py-2 text-muted">Belum ada data jenjang</span>
                </li>
            @endif
        </ul>
    </div>

    @if(!$isToday)
    <div class="alert alert-warning border-0 shadow-sm d-flex align-items-center py-2 mb-4" role="alert">
        <i class="bi bi-exclamation-triangle-fill fs-4 me-3 text-warning"></i>
        <div>
            <h6 class="mb-0 fw-bold">Mode Tinjauan Masa Lalu Aktif</h6>
            <span style="font-size: 13px;">Anda sedang melihat atau mengedit data presensi pada <b>{{ \Carbon\Carbon::parse($tanggal)->translatedFormat('l, d F Y') }}</b>. Pastikan Anda tidak salah menyimpan data.</span>
        </div>
        <a href="{{ route('admin.presensi-guru.jenjang', $jenjangAktif ? $jenjangAktif->id : ($jenjangs->first()->id ?? '')) }}" class="btn btn-sm btn-dark ms-auto fw-bold">Kembali ke Hari Ini</a>
    </div>
    @endif

    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm bg-primary text-white h-100">
                <div class="card-body p-3 text-center">
                    <h6 class="mb-1 text-white-50 fw-semibold" style="font-size: 12px;">Total Guru</h6>
                    <h4 class="mb-0 fw-bold">{{ $totalGuru }}</h4>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm bg-success text-white h-100">
                <div class="card-body p-3 text-center">
                    <h6 class="mb-1 text-white-50 fw-semibold" style="font-size: 12px;">Hadir</h6>
                    <h4 class="mb-0 fw-bold">{{ $hadir }}</h4>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm bg-warning text-dark h-100">
                <div class="card-body p-3 text-center">
                    <h6 class="mb-1 text-dark-50 fw-semibold" style="font-size: 12px; opacity:0.7;">Izin / Sakit</h6>
                    <h4 class="mb-0 fw-bold">{{ $izinSakit }}</h4>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm bg-danger text-white h-100">
                <div class="card-body p-3 text-center">
                    <h6 class="mb-1 text-white-50 fw-semibold" style="font-size: 12px;">Alpa / Belum Absen</h6>
                    <h4 class="mb-0 fw-bold">{{ $alpa + $belumAbsen }}</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0 border-top border-{{ !$isToday ? 'warning' : 'primary' }} border-3">
        <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center flex-wrap gap-3">
            <h6 class="card-title mb-0 fw-bold text-{{ !$isToday ? 'warning' : 'primary' }}">
                <i class="bi bi-table me-1"></i> Tabel Kehadiran: {{ \Carbon\Carbon::parse($tanggal)->translatedFormat('l, d F Y') }}
                @if(isset($jenjangAktif)) <span class="badge bg-primary ms-2">{{ $jenjangAktif->nama_jenjang }}</span> @endif
            </h6>
            <div class="input-group input-group-sm" style="width: 260px;">
                <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control border-start-0 ps-0 bg-light" placeholder="Cari Nama Guru..." onkeyup="searchTableGuru(this)">
            </div>
        </div>
        
        <form action="{{ route('admin.presensi-guru.store-bulk') }}" method="POST" id="formPresensi">
            @csrf
            <input type="hidden" name="tanggal" value="{{ $tanggal }}">
            <input type="hidden" name="tahun_ajaran_id" value="{{ $currentTaId }}">
            <input type="hidden" name="semester_id" value="{{ $currentSemId }}">
            <input type="hidden" name="jenjang_id" value="{{ isset($jenjangAktif) ? $jenjangAktif->id : ($jenjangs->first()->id ?? '') }}">
            
            <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 class="text-center text-secondary py-3" style="font-size: 12px; width: 5%">NO</th>
                                <th class="text-secondary py-3" style="font-size: 12px; width: 30%">PROFIL PENDIDIK</th>
                                <th class="text-secondary py-3" style="font-size: 12px; width: 25%">STATUS KEHADIRAN</th>
                                <th class="text-center text-secondary py-3" style="font-size: 12px; width: 15%">JAM MASUK & KELUAR</th>
                                <th class="text-secondary py-3" style="font-size: 12px; width: 25%">KETERANGAN</th>
                            </tr>
                        </thead>
                        <tbody id="tbody-guru">
                            @forelse($gurus as $index => $guru)
                                @php 
                                    $p = $presensis->get($guru->id);
                                    $status = $p->status ?? 'Hadir'; 
                                    
                                    $jamMasuk = !empty($p->jam_masuk) ? substr($p->jam_masuk, 0, 5) : $defaultJamMasuk;
                                    $jamKeluar = !empty($p->jam_keluar) ? substr($p->jam_keluar, 0, 5) : $defaultJamKeluar;
                                    $ket = $p->keterangan ?? '';
                                    
                                    $avatarUrl = !empty($guru->foto) ? asset('storage/guru/' . $guru->foto) : 'https://ui-avatars.com/api/?name='.urlencode($guru->nama_lengkap).'&background=random&size=100'; 
                                @endphp
                                <tr class="row-guru">
                                    <td class="text-center text-muted">{{ $loop->iteration }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="{{ $avatarUrl }}" class="rounded-circle object-fit-cover shadow-sm me-3 border" style="width: 55px; height: 55px; aspect-ratio: 1/1;" alt="Foto {{ $guru->nama_lengkap }}">
                                            <div class="data-pencarian">
                                                <span class="fw-bold text-primary d-block mb-1" style="font-size: 14px;">{{ $guru->nama_lengkap }}</span>
                                                <div class="text-muted mb-1" style="font-size: 11px; line-height: 1.5;">
                                                    <span class="d-block"><i class="bi bi-upc-scan me-1"></i> NIP: <strong class="text-dark">{{ $guru->nip ?? '-' }}</strong></span>
                                                    <span class="d-block"><i class="bi bi-telephone-fill me-1"></i> HP: <strong class="text-dark">{{ $guru->hp ?? '-' }}</strong></span>
                                                </div>
                                                <span class="badge {{ $guru->jenis_kelamin == 'L' ? 'bg-primary' : 'bg-danger' }} bg-opacity-10 text-{{ $guru->jenis_kelamin == 'L' ? 'primary' : 'danger' }} border border-{{ $guru->jenis_kelamin == 'L' ? 'primary' : 'danger' }}" style="font-size: 9px; padding: 2px 6px;">
                                                    <i class="bi {{ $guru->jenis_kelamin == 'L' ? 'bi-gender-male' : 'bi-gender-female' }} me-1"></i>{{ $guru->jenis_kelamin == 'L' ? 'Laki-Laki' : 'Perempuan' }}
                                                </span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group w-100 shadow-sm" role="group">
                                            <input type="radio" class="btn-check btn-check-status" name="presensi[{{ $guru->id }}][status]" id="hadir_{{ $guru->id }}" value="Hadir" autocomplete="off" {{ $status == 'Hadir' ? 'checked' : '' }}>
                                            <label class="btn btn-outline-success btn-sm fw-medium" for="hadir_{{ $guru->id }}">Hadir</label>

                                            <input type="radio" class="btn-check btn-check-status" name="presensi[{{ $guru->id }}][status]" id="izin_{{ $guru->id }}" value="Izin" autocomplete="off" {{ $status == 'Izin' ? 'checked' : '' }}>
                                            <label class="btn btn-outline-warning btn-sm fw-medium" for="izin_{{ $guru->id }}">Izin</label>

                                            <input type="radio" class="btn-check btn-check-status" name="presensi[{{ $guru->id }}][status]" id="sakit_{{ $guru->id }}" value="Sakit" autocomplete="off" {{ $status == 'Sakit' ? 'checked' : '' }}>
                                            <label class="btn btn-outline-info btn-sm fw-medium" for="sakit_{{ $guru->id }}">Sakit</label>

                                            <input type="radio" class="btn-check btn-check-status" name="presensi[{{ $guru->id }}][status]" id="alpa_{{ $guru->id }}" value="Alpa" autocomplete="off" {{ $status == 'Alpa' ? 'checked' : '' }}>
                                            <label class="btn btn-outline-danger btn-sm fw-medium" for="alpa_{{ $guru->id }}">Alpa</label>
                                        </div>
                                    </td>
                                    <td class="text-center px-3">
                                        <div class="d-flex align-items-center gap-2 justify-content-center">
                                            <input type="time" name="presensi[{{ $guru->id }}][jam_masuk]" class="form-control form-control-sm text-center input-jam fw-bold px-1 bg-light border-0 shadow-none text-muted" style="font-size: 13px; width: 100px; cursor: default;" value="{{ $jamMasuk }}" readonly>
                                            <span class="text-muted fw-bold">-</span>
                                            <input type="time" name="presensi[{{ $guru->id }}][jam_keluar]" class="form-control form-control-sm text-center input-jam fw-bold px-1 bg-light border-0 shadow-none text-muted" style="font-size: 13px; width: 100px; cursor: default;" value="{{ $jamKeluar }}" readonly>
                                        </div>
                                    </td>
                                    <td class="pe-3">
                                        <input type="text" name="presensi[{{ $guru->id }}][keterangan]" class="form-control form-control-sm bg-light border-0 shadow-none" style="font-size: 12px;" placeholder="Tulis keterangan..." value="{{ $ket }}">
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-5 text-muted">
                                        <i class="bi bi-people fs-1 d-block mb-2 opacity-50"></i>
                                        Belum ada data guru pada jenjang ini.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            
            @if($gurus->count() > 0)
            <div class="card-footer bg-light border-top py-3 text-end">
                <button type="button" class="btn btn-{{ !$isToday ? 'warning text-dark' : 'primary' }} fw-bold shadow-sm px-4" onclick="confirmSave()">
                    <i class="bi bi-save2 me-2"></i> Simpan Data {{ !$isToday ? 'Masa Lalu' : 'Hari Ini' }}
                </button>
            </div>
            @endif
        </form>
    </div>
</div>

<style>
    select.pe-4 { padding-right: 2.2rem !important; }
    .cursor-pointer { cursor: pointer; }
</style>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function searchTableGuru(inputElement) {
        let filter = inputElement.value.toLowerCase();
        let tbody = document.getElementById('tbody-guru');
        if (!tbody) return;
        let rows = tbody.getElementsByClassName('row-guru');
        for (let i = 0; i < rows.length; i++) {
            let tdProfil = rows[i].getElementsByTagName("td")[1]; 
            if (tdProfil) {
                let textValue = tdProfil.textContent || tdProfil.innerText;
                rows[i].style.display = textValue.toLowerCase().indexOf(filter) > -1 ? "" : "none";
            }
        }
    }

    function confirmSave() {
        Swal.fire({
            title: 'Simpan Presensi?',
            text: "Data kehadiran guru pada jenjang ini akan disimpan untuk tanggal {{ \Carbon\Carbon::parse($tanggal)->translatedFormat('d F Y') }}.",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#0d6efd',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Simpan!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('formPresensi').submit();
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: "{{ session('success') }}", showConfirmButton: true, timer: 3000 });
        @endif

        @if($errors->any())
            let errs = [];
            @foreach($errors->all() as $error)
                errs.push("{{ addslashes($error) }}");
            @endforeach
            let htmlStr = '<ul class="text-start mb-0" style="font-size: 14px;">';
            errs.forEach(e => { htmlStr += '<li>' + e + '</li>'; });
            htmlStr += '</ul>';
            Swal.fire({ icon: 'error', title: 'Sistem Menolak!', html: htmlStr, confirmButtonColor: '#d33' });
        @endif

        document.addEventListener('change', function(e) {
            if (e.target && e.target.classList.contains('btn-check-status')) {
                let tr = e.target.closest('tr');
                let jamInputs = tr.querySelectorAll('.input-jam');
                if (e.target.value !== 'Hadir') {
                    jamInputs.forEach(input => {
                        input.value = '';
                        input.style.backgroundColor = '#e9ecef';
                        input.classList.remove('bg-light');
                        input.style.opacity = '0.5';
                    });
                } else {
                    jamInputs.forEach(input => {
                        input.style.backgroundColor = '';
                        input.classList.add('bg-light');
                        input.style.opacity = '1';
                        if(input.name.indexOf('jam_masuk') !== -1) input.value = "{{ $defaultJamMasuk ?? '07:00' }}";
                        if(input.name.indexOf('jam_keluar') !== -1) input.value = "{{ $defaultJamKeluar ?? '14:00' }}";
                    });
                }
            }
        });

        let radios = document.querySelectorAll('.btn-check-status:checked');
        radios.forEach(radio => {
            if (radio.value !== 'Hadir') {
                let tr = radio.closest('tr');
                let jamInputs = tr.querySelectorAll('.input-jam');
                jamInputs.forEach(input => {
                    input.style.backgroundColor = '#e9ecef';
                    input.classList.remove('bg-light');
                    input.style.opacity = '0.5';
                });
            }
        });
    });
</script>
@endpush
@endsection