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

@section('title', 'Penetapan Gaji Guru')

@push('styles')
<style>
    .avatar-initial { width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; }
    .table-payroll th { font-size: 10px; letter-spacing: 0.5px; white-space: nowrap; vertical-align: middle; }
    .table-payroll td { font-size: 13px; vertical-align: middle; white-space: nowrap; }
    .val-plus { color: #198754; font-weight: 600; }
    .val-minus { color: #dc3545; font-weight: 600; }
    .val-zero { color: #adb5bd; font-style: italic; font-size: 11px; }
    .val-total { font-weight: 800; font-size: 14px; }
</style>
@endpush

@section('content')

@php
    $tahunAjarans = \App\Models\TahunAjaran::orderBy('tahun_ajaran', 'desc')->get();
    $taAktif = \App\Models\TahunAjaran::where('status_akademik', 'aktif')->first();
    $selectedTaId = request('tahun_ajaran_id', $taAktif ? $taAktif->id : null);

    $kategoris = \App\Models\GajiKategori::where('tahun_ajaran_id', $selectedTaId)
        ->whereIn('peruntukan', ['guru', 'semua'])
        ->orderBy('sifat', 'asc')
        ->orderBy('id', 'asc')
        ->get();
        
    $pemasukans = $kategoris->where('sifat', 'pemasukan');
    $potongans = $kategoris->where('sifat', 'potongan');

    $gurus = \App\Models\Guru::with('jabatans')->orderBy('nama_lengkap', 'asc')->get();
@endphp

<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
        <div>
            <h4 class="mb-1 fw-bold"><i class="bi bi-person-lines-fill text-primary me-2"></i>Penetapan Gaji Guru</h4>
            <p class="text-muted mb-0" style="font-size: 14px;">Atur dan pantau rincian nominal komponen gaji untuk masing-masing guru.</p>
        </div>
        
        <div class="d-flex gap-2">
            <form action="{{ url()->current() }}" method="GET" class="d-flex align-items-center gap-2 mb-0 bg-white p-2 rounded border shadow-sm">
                <label class="form-label mb-0 fw-medium text-nowrap text-muted" style="font-size: 13px;"><i class="bi bi-funnel me-1"></i>Tahun Ajaran:</label>
                <select name="tahun_ajaran_id" class="form-select form-select-sm shadow-none border-secondary-subtle" onchange="this.form.submit()" style="min-width: 180px; font-size: 13px;">
                    @foreach($tahunAjarans as $ta)
                        <option value="{{ $ta->id }}" {{ $selectedTaId == $ta->id ? 'selected' : '' }}>
                            {{ $ta->tahun_ajaran_hijriyah }} H ({{ $ta->status_akademik == 'aktif' ? 'Aktif' : 'Riwayat' }})
                        </option>
                    @endforeach
                </select>
            </form>
        </div>
    </div>

    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body p-3">
            <div class="row g-2">
                <div class="col-md-5">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light border-end-0"><i class="bi bi-search text-muted"></i></span>
                        <input type="text" class="form-control border-start-0" id="searchGuru" placeholder="Cari NUPTK atau Nama Guru..." onkeyup="filterTable()">
                    </div>
                </div>
                <div class="col-md-3">
                    <select class="form-select form-select-sm" id="filterStatus" onchange="filterTable()">
                        <option value="">Semua Status Kepegawaian</option>
                        <option value="PNS">PNS / ASN</option>
                        <option value="Honorer">Guru Honorer / GTY</option>
                    </select>
                </div>
                <div class="col-md-4 text-end">
                    <button class="btn btn-sm btn-outline-success"><i class="bi bi-file-earmark-excel me-1"></i> Export Rekap</button>
                    <button class="btn btn-sm btn-primary"><i class="bi bi-cash-coin me-1"></i> Cetak Slip Massal</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-bordered table-payroll mb-0" id="tabelGajiGuru">
                    <thead class="table-light text-secondary text-center">
                        <tr>
                            <th width="3%" rowspan="2" class="align-middle">NO</th>
                            <th width="20%" rowspan="2" class="align-middle text-start ps-3">PROFIL GURU</th>
                            
                            @if($pemasukans->count() > 0)
                                <th colspan="{{ $pemasukans->count() }}" class="bg-success bg-opacity-10 text-success border-success border-opacity-25">PEMASUKAN (+)</th>
                            @endif
\
                            @if($potongans->count() > 0)
                                <th colspan="{{ $potongans->count() }}" class="bg-danger bg-opacity-10 text-danger border-danger border-opacity-25">POTONGAN (-)</th>
                            @endif

                            <th width="10%" rowspan="2" class="align-middle bg-primary bg-opacity-10 text-primary">ESTIMASI TOTAL</th>
                            <th width="8%" rowspan="2" class="align-middle">AKSI</th>
                        </tr>
                        <tr>
                            @foreach($pemasukans as $pemasukan)
                                <th class="bg-success bg-opacity-10 border-success border-opacity-25" title="{{ $pemasukan->keterangan }}">
                                    {{ strtoupper($pemasukan->nama) }}<br>
                                    <small style="font-size: 8px; opacity: 0.7;">{{ ucfirst($pemasukan->tipe_hitungan) }}</small>
                                </th>
                            @endforeach

                            @foreach($potongans as $potongan)
                                <th class="bg-danger bg-opacity-10 border-danger border-opacity-25" title="{{ $potongan->keterangan }}">
                                    {{ strtoupper($potongan->nama) }}<br>
                                    <small style="font-size: 8px; opacity: 0.7;">{{ ucfirst($potongan->tipe_hitungan) }}</small>
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody id="tbody-gaji-guru">
                        @forelse($gurus as $index => $guru)
                            <tr class="row-guru">
                                <td class="text-center text-muted align-middle">{{ $index + 1 }}</td>
                                <td class="ps-3 align-middle">
                                    <div class="d-flex align-items-center">
                                        <img src="{{ $guru->foto ? asset('storage/guru/' . $guru->foto) : 'https://ui-avatars.com/api/?name='.urlencode($guru->nama_lengkap).'&background=random&size=100' }}" 
                                             class="rounded-circle object-fit-cover shadow-sm me-3 border" 
                                             style="width: 45px; height: 45px; 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: 13px;">{{ $guru->nama_lengkap }}</span>
                                            <div class="text-muted mb-1" style="font-size: 11px; line-height: 1.4;">
                                                <span class="d-block"><i class="bi bi-upc-scan me-1"></i> NIP/NUPTK: <strong class="text-dark">{{ $guru->nip ?? $guru->nuptk ?? '-' }}</strong></span>
                                                <span class="status-pegawai d-none">{{ $guru->status_kepegawaian ?? '-' }}</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>
                                
                                @foreach($pemasukans as $pemasukan)
                                    <td class="text-end align-middle val-zero">Belum diatur</td>
                                @endforeach

                                @foreach($potongans as $potongan)
                                    <td class="text-end align-middle val-zero">Belum diatur</td>
                                @endforeach

                                <td class="text-end align-middle val-total text-secondary">-</td>
                                
                                <td class="text-center align-middle">
                                    <button class="btn btn-sm btn-outline-primary shadow-sm fw-bold w-100" style="font-size: 11px;" title="Atur Komponen">
                                        <i class="bi bi-sliders me-1"></i> Atur
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ 4 + $kategoris->count() }}" class="text-center py-5 text-muted">
                                    <i class="bi bi-people fs-1 d-block mb-3 opacity-50"></i>
                                    Belum ada data guru yang terdaftar.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer bg-light border-top py-3">
            <div class="d-flex justify-content-end align-items-center">
                <span class="text-muted fw-medium" style="font-size: 13px;"><i class="bi bi-info-circle me-1"></i> Menampilkan {{ $gurus->count() }} Data Guru</span>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function filterTable() {
        let inputSearch = document.getElementById('searchGuru').value.toLowerCase();
        let inputStatus = document.getElementById('filterStatus').value.toLowerCase();
        let rows = document.querySelectorAll('.row-guru');

        rows.forEach(row => {
            let nama = row.querySelector('.data-pencarian').innerText.toLowerCase();
            let status = row.querySelector('.status-pegawai').innerText.toLowerCase();

            let matchesSearch = nama.includes(inputSearch);
            let matchesStatus = inputStatus === "" || status.includes(inputStatus);

            if (matchesSearch && matchesStatus) {
                row.style.display = "";
            } else {
                row.style.display = "none";
            }
        });
    }
</script>
@endpush

@endsection