@extends('layouts.app')

@section('title', 'Cetak Gaji')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Standar Pembiayaan</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Manajemen Gaji</p>
            <h1 class="pkbm-dashboard__title">Cetak Gaji</h1>
            <p class="pkbm-dashboard__subtitle">Hitung honor bulanan menggunakan seluruh komponen penambahan dan potongan yang ditetapkan untuk tiap guru.</p>
        </div>
        <a href="{{ route('pkbm.gaji.print', ['bulan' => $month]) }}" target="_blank" rel="noopener" class="sp-btn-secondary shrink-0"><i class="bi bi-printer" aria-hidden="true"></i>Cetak rekap</a>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <div>
                <p class="font-semibold">Data gaji belum dapat disimpan.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <nav class="sp-card flex flex-wrap gap-2 p-2" aria-label="Menu manajemen gaji">
        @if (in_array('atur_gaji', $gajiMenus, true))
            <a href="{{ route('pkbm.gaji.settings') }}" class="sp-btn-secondary"><i class="bi bi-gear" aria-hidden="true"></i>Atur sistem gaji</a>
        @endif
        <a href="{{ route('pkbm.gaji.index') }}" class="sp-btn-secondary border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-50 hover:text-blue-800" aria-current="page"><i class="bi bi-printer" aria-hidden="true"></i>Cetak gaji</a>
    </nav>

    @if (! $period)
        <section class="sp-card p-5 text-sm text-slate-600">Belum ada periode akademik aktif. Atur periode terlebih dahulu sebelum memproses gaji.</section>
    @elseif ($activeComponents === [])
        <section class="sp-card p-5 text-sm text-slate-600">Skema gaji untuk periode ini belum dipilih. Pilih komponen dan atur tarif guru terlebih dahulu di menu Atur Sistem Gaji.</section>
    @endif

    <section class="sp-card space-y-3 p-4">
        <h2 class="sp-section-title">Filter Periode & Pertemuan</h2>
        <form method="GET" action="{{ route('pkbm.gaji.index') }}" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4 lg:items-end">
            <label class="min-w-0 text-xs font-semibold text-slate-600">
                Tahun pelajaran aktif
                <input type="text" value="{{ $period ? $period->semester.' · '.$period->tahun_pelajaran : 'Belum diatur' }}" readonly class="sp-form-control mt-1 w-full px-3 py-2 text-sm">
            </label>
            <label class="min-w-0 text-xs font-semibold text-slate-600">
                Bulan
                <input type="month" name="bulan" value="{{ $month }}" class="sp-form-control mt-1 w-full px-3 py-2 text-sm">
            </label>
            @if ($usesAttendance)
                <label class="min-w-0 text-xs font-semibold text-slate-600">
                    Target pertemuan
                    <input type="number" name="jml_p" min="1" max="1000" value="{{ $targetMeetings }}" class="sp-form-control mt-1 w-full px-3 py-2 text-sm">
                </label>
            @else
                <div class="hidden lg:block"></div>
            @endif
            <button type="submit" class="sp-btn-primary w-full justify-center">
                <i class="bi bi-funnel" aria-hidden="true"></i>Tampilkan
            </button>
        </form>
    </section>

    @if ($activeComponents !== [])
    <section class="sp-card overflow-hidden">
        <div class="sp-card-header">
            <h2 class="sp-section-title">Rincian Perhitungan Honor Guru</h2>
            <p class="mt-1 text-xs text-slate-500">
                Nilai berikut dihitung otomatis: Total Honor = <strong>Total Penambahan (+)</strong> dikurangi <strong>Total Potongan (-)</strong>.
                @if ($usesAttendance)
                    Komponen berbasis kehadiran disesuaikan proporsional berdasarkan input jumlah hadir.
                @endif
                Klik "Simpan data honor" untuk menyimpan snapshot rekap dan slip.
            </p>
        </div>
        <form method="POST" action="{{ route('pkbm.gaji.payroll.save') }}">
            @csrf
            <input type="hidden" name="bulan" value="{{ $month }}">
            @if ($usesAttendance)
                <input type="hidden" name="jumlah_pertemuan" value="{{ $targetMeetings }}">
            @endif
            <div class="overflow-x-auto">
                <table class="sp-table min-w-[68rem]">
                    <thead>
                        <tr>
                            <th scope="col" class="w-14 text-center">No.</th>
                            <th scope="col">Nama guru</th>
                            @if ($usesAttendance)
                                <th scope="col" class="text-center">Hadir sistem</th>
                                <th scope="col" class="w-36 text-center">Hadir (input)</th>
                            @endif
                            @foreach ($activeComponents as $comp)
                                @php
                                    $isPot = ($comp['tipe'] ?? '') === 'potongan';
                                @endphp
                                <th scope="col" class="text-right">
                                    <div class="flex items-center justify-end gap-1">
                                        <span>{{ $comp['label'] }}</span>
                                        <span class="rounded px-1 text-[9px] font-bold {{ $isPot ? 'bg-rose-100 text-rose-700' : 'bg-emerald-100 text-emerald-700' }}">
                                            {{ $isPot ? '(-)' : '(+)' }}
                                        </span>
                                    </div>
                                </th>
                            @endforeach
                            <th scope="col" class="text-right">Total honor</th>
                            <th scope="col" class="w-24 text-center">Slip</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $row)
                            <tr data-teacher-id="{{ $row->id }}"
                                data-gaji-pokok="{{ (float) ($row->gaji_pokok ?? 0) }}"
                                data-jumlah-sks="{{ (float) ($row->jumlah_sks ?? 0) }}"
                                data-tarif-sks="{{ (float) ($row->tarif_sks ?? 0) }}"
                                data-tarif-kehadiran="{{ (float) ($row->tarif_kehadiran ?? 0) }}"
                                data-components-json='@json($row->components)'>
                                <td class="text-center">{{ $loop->iteration }}</td>
                                <td class="font-semibold">
                                    {{ $row->nama }}
                                    <input type="hidden" name="id_guru[]" value="{{ $row->id }}">
                                </td>
                                @if ($usesAttendance)
                                    <td class="text-center text-slate-500">{{ $row->absensi_hadir }} kali</td>
                                    <td>
                                        <label class="sr-only" for="hadir-{{ $row->id }}">Jumlah hadir {{ $row->nama }}</label>
                                        <input id="hadir-{{ $row->id }}"
                                               type="number"
                                               name="total_hadir[{{ $row->id }}]"
                                               min="0"
                                               max="1000"
                                               value="{{ old('total_hadir.'.$row->id, $row->total_hadir) }}"
                                               required
                                               class="sp-form-control w-full px-3 py-2 text-center text-sm teacher-attendance-input">
                                    </td>
                                @endif

                                @foreach ($activeComponents as $comp)
                                    @php
                                        $ckey = $comp['key'];
                                        $line = collect($row->components)->firstWhere('komponen', $ckey);
                                        $isPot = ($comp['tipe'] ?? '') === 'potongan';
                                        $nom = (float) ($line['nominal'] ?? 0);
                                    @endphp
                                    <td class="text-right" data-component-key="{{ $ckey }}" data-component-tipe="{{ $comp['tipe'] ?? 'pendapatan' }}" data-component-mode="{{ $comp['mode'] ?? 'tetap' }}">
                                        @if ($ckey === 'sks' && $line)
                                            <span class="text-[11px] text-slate-500 sub-calc">{{ rtrim(rtrim(number_format((float) $line['kuantitas'], 2, ',', '.'), '0'), ',') }} SKS × Rp {{ number_format((float) $line['tarif'], 0, ',', '.') }}</span><br>
                                        @elseif ($ckey === 'kehadiran' && $line)
                                            <span class="text-[11px] text-slate-500 sub-calc"><span class="sub-qty">{{ $line['kuantitas'] }}</span> / {{ $line['target'] }} hadir × Rp {{ number_format((float) $line['tarif'], 0, ',', '.') }}</span><br>
                                        @elseif (($comp['mode'] ?? '') === 'kehadiran' && $line)
                                            <span class="text-[11px] text-slate-500 sub-calc"><span class="sub-qty">{{ $line['kuantitas'] }}</span> / {{ $line['target'] }} hadir × Rp {{ number_format((float) $line['tarif'], 0, ',', '.') }}</span><br>
                                        @endif
                                        <strong class="{{ $isPot ? 'text-rose-600' : 'text-slate-800' }} comp-nominal-text" data-nominal="{{ $nom }}">
                                            {{ $isPot ? '- ' : '' }}Rp {{ number_format(abs($nom), 0, ',', '.') }}
                                        </strong>
                                    </td>
                                @endforeach

                                <td class="text-right font-bold text-slate-900" data-total-gaji>
                                    Rp {{ number_format($row->total_gaji, 0, ',', '.') }}
                                </td>
                                <td class="text-center">
                                    @if ($row->payroll_id)
                                        <a href="{{ route('pkbm.gaji.slip', ['teacherId' => $row->id, 'bulan' => $month]) }}" target="_blank" rel="noopener" class="sp-btn-secondary min-h-0 px-2 py-1.5 text-xs">
                                            <i class="bi bi-printer" aria-hidden="true"></i>Slip
                                        </a>
                                    @else
                                        <span class="text-xs text-slate-400">Simpan dulu</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ 4 + count($activeComponents) + ($usesAttendance ? 2 : 0) }}" class="px-4 py-10 text-center text-sm text-slate-500">
                                    Belum ada konfigurasi komponen gaji untuk guru pada periode aktif. Atur sistem gaji terlebih dahulu.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($rows->isNotEmpty())
                <div class="flex items-center justify-between border-t border-slate-100 p-4">
                    <p class="text-xs text-slate-500">Pastikan data hadir dan honor telah sesuai sebelum mencetak rekap atau slip gaji.</p>
                    <button type="submit" class="sp-btn-primary justify-center">
                        <i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan data honor
                    </button>
                </div>
            @endif
        </form>
    </section>
    @endif
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const salaryTarget = {{ $targetMeetings }};
    const formatRupiah = (value) => new Intl.NumberFormat('id-ID', { maximumFractionDigits: 0 }).format(Math.round(value));

    document.querySelectorAll('.teacher-attendance-input').forEach((input) => {
        input.addEventListener('input', () => {
            const row = input.closest('tr');
            if (!row) return;

            const attendance = Math.max(0, Number(input.value) || 0);
            const componentsJson = JSON.parse(row.dataset.componentsJson || '[]');

            let totalSalary = 0;

            row.querySelectorAll('[data-component-key]').forEach(cell => {
                const key = cell.dataset.componentKey;
                const tipe = cell.dataset.componentTipe;
                const mode = cell.dataset.componentMode;
                const nominalEl = cell.querySelector('.comp-nominal-text');
                const subQtyEl = cell.querySelector('.sub-qty');

                // Find initial component metadata from row dataset
                const compData = componentsJson.find(c => c.komponen === key);
                let rate = compData ? Number(compData.tarif) : 0;
                if (key === 'pokok') {
                    rate = Number(row.dataset.gajiPokok) || 0;
                } else if (key === 'kehadiran') {
                    rate = Number(row.dataset.tarifKehadiran) || 0;
                }

                let nominal = 0;
                if (key === 'sks') {
                    nominal = Number(compData ? compData.nominal : 0);
                } else if (mode === 'kehadiran') {
                    nominal = salaryTarget > 0 ? (attendance / salaryTarget * rate) : 0;
                    if (subQtyEl) subQtyEl.textContent = attendance;
                } else {
                    nominal = rate;
                }

                if (tipe === 'potongan') {
                    totalSalary -= nominal;
                    if (nominalEl) {
                        nominalEl.textContent = `- Rp ${formatRupiah(nominal)}`;
                    }
                } else {
                    totalSalary += nominal;
                    if (nominalEl) {
                        nominalEl.textContent = `Rp ${formatRupiah(nominal)}`;
                    }
                }
            });

            totalSalary = Math.max(0, totalSalary);
            const totalEl = row.querySelector('[data-total-gaji]');
            if (totalEl) {
                totalEl.textContent = `Rp ${formatRupiah(totalSalary)}`;
            }
        });
    });
});
</script>
@endsection