@extends('layouts.app')

@section('title', 'Atur Sistem Gaji')

@section('content')
@php
    $formComponents = is_array(old('komponen')) ? old('komponen') : $selectedComponents;
    if ($formComponents === [] && $activeComponents === []) {
        // default fallback if never configured
        $initialComponents = [];
    } else {
        $initialComponents = $activeComponents;
    }
@endphp
<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">Atur Sistem Gaji</h1>
            <p class="pkbm-dashboard__subtitle">Kelola komponen gaji secara dinamis (penambahan & potongan), lalu tentukan tarif/nominal per guru untuk periode akademik aktif.</p>
        </div>
    </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">Kebijakan 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">
        <a href="{{ route('pkbm.gaji.settings') }}" 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-gear" aria-hidden="true"></i>Atur sistem gaji</a>
        @if (in_array('rekap_gaji', $gajiMenus, true))
            <a href="{{ route('pkbm.gaji.index') }}" class="sp-btn-secondary"><i class="bi bi-printer" aria-hidden="true"></i>Cetak gaji</a>
        @endif
    </nav>

    @if (! $period)
        <section class="sp-card p-5 text-sm text-slate-600">Belum ada periode akademik aktif. Atur periode terlebih dahulu sebelum menetapkan kebijakan gaji.</section>
    @else
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h2 class="sp-section-title">Skema & Komponen Gaji Tenaga Pendidik</h2>
                    <p class="mt-1 text-xs text-slate-500">Periode {{ $period->semester }} · Tahun Pelajaran {{ $period->tahun_pelajaran }}</p>
                </div>
                <button type="button" id="btn-open-add-component" class="sp-btn-primary self-start text-xs sm:self-center">
                    <i class="bi bi-plus-circle-fill" aria-hidden="true"></i>Tambah Komponen Gaji
                </button>
            </div>

            {{-- Panel Tambah Komponen Dinamis --}}
            <div id="add-component-panel" class="hidden border-b border-blue-100 bg-blue-50/60 p-4 sm:p-5 transition-all">
                <div class="flex items-start justify-between gap-3 mb-3">
                    <div>
                        <h3 class="text-sm font-bold text-slate-800 flex items-center gap-2">
                            <i class="bi bi-sliders text-blue-600"></i>Tambah Komponen Gaji Baru
                        </h3>
                        <p class="text-xs text-slate-500">Pilih dari preset populer atau buat komponen khusus penambahan/potongan.</p>
                    </div>
                    <button type="button" id="btn-close-add-component" class="rounded-lg p-1 text-slate-400 hover:bg-slate-200 hover:text-slate-700 text-sm">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>

                {{-- Preset Cepat --}}
                <div class="mb-4">
                    <p class="text-xs font-semibold text-slate-600 mb-1.5">Preset Populer (Klik untuk tambah):</p>
                    <div class="flex flex-wrap gap-2">
                        <button type="button" class="btn-preset inline-flex items-center gap-1.5 rounded-lg border border-emerald-200 bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-800 hover:bg-emerald-100"
                                data-label="Tunjangan Transport" data-tipe="pendapatan" data-mode="kehadiran">
                            <i class="bi bi-plus text-emerald-600"></i>Tunjangan Transport (Kehadiran)
                        </button>
                        <button type="button" class="btn-preset inline-flex items-center gap-1.5 rounded-lg border border-emerald-200 bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-800 hover:bg-emerald-100"
                                data-label="Tunjangan Wali Kelas" data-tipe="pendapatan" data-mode="tetap">
                            <i class="bi bi-plus text-emerald-600"></i>Tunjangan Wali Kelas (Tetap)
                        </button>
                        <button type="button" class="btn-preset inline-flex items-center gap-1.5 rounded-lg border border-emerald-200 bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-800 hover:bg-emerald-100"
                                data-label="Tunjangan Jabatan" data-tipe="pendapatan" data-mode="tetap">
                            <i class="bi bi-plus text-emerald-600"></i>Tunjangan Jabatan (Tetap)
                        </button>
                        <button type="button" class="btn-preset inline-flex items-center gap-1.5 rounded-lg border border-emerald-200 bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-800 hover:bg-emerald-100"
                                data-label="Insentif Kinerja" data-tipe="pendapatan" data-mode="tetap">
                            <i class="bi bi-plus text-emerald-600"></i>Insentif Kinerja (Tetap)
                        </button>
                        <button type="button" class="btn-preset inline-flex items-center gap-1.5 rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-1 text-xs font-semibold text-rose-800 hover:bg-rose-100"
                                data-label="Potongan BPJS" data-tipe="potongan" data-mode="tetap">
                            <i class="bi bi-dash text-rose-600"></i>Potongan BPJS (Tetap)
                        </button>
                        <button type="button" class="btn-preset inline-flex items-center gap-1.5 rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-1 text-xs font-semibold text-rose-800 hover:bg-rose-100"
                                data-label="Iuran Kas" data-tipe="potongan" data-mode="tetap">
                            <i class="bi bi-dash text-rose-600"></i>Iuran Kas (Tetap)
                        </button>
                    </div>
                </div>

                {{-- Form Buat Komponen Kustom --}}
                <div class="grid gap-3 rounded-xl border border-slate-200 bg-white p-3 sm:grid-cols-4 sm:items-end">
                    <div class="sm:col-span-2">
                        <label for="new-comp-label" class="sp-form-label mb-1">Nama Komponen</label>
                        <input type="text" id="new-comp-label" placeholder="Contoh: Tunjangan Masa Kerja" class="sp-form-control w-full px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label for="new-comp-tipe" class="sp-form-label mb-1">Jenis</label>
                        <select id="new-comp-tipe" class="sp-form-control w-full px-3 py-2 text-sm">
                            <option value="pendapatan">Penambahan (+)</option>
                            <option value="potongan">Pengurangan / Potongan (-)</option>
                        </select>
                    </div>
                    <div>
                        <label for="new-comp-mode" class="sp-form-label mb-1">Perhitungan</label>
                        <select id="new-comp-mode" class="sp-form-control w-full px-3 py-2 text-sm">
                            <option value="tetap">Tetap per bulan</option>
                            <option value="kehadiran">Berdasarkan kehadiran</option>
                        </select>
                    </div>
                    <div class="sm:col-span-4 flex justify-end pt-1">
                        <button type="button" id="btn-submit-custom-comp" class="sp-btn-primary text-xs">
                            <i class="bi bi-plus-lg"></i>Tambahkan ke Skema
                        </button>
                    </div>
                </div>
            </div>

            <form method="POST" action="{{ route('pkbm.gaji.settings.save') }}" id="form-salary-settings">
                @csrf
                <fieldset class="border-b border-slate-100 px-4 py-4 sm:px-5">
                    <div class="flex items-center justify-between mb-2">
                        <legend class="sp-form-label mb-0">Komponen Gaji Aktif</legend>
                        <span class="text-xs text-slate-500">Klik "Hapus" untuk menghapus komponen yang tidak dipakai.</span>
                    </div>

                    {{-- Daftar Komponen Aktif (Cards/Pills) --}}
                    <div id="active-components-container" class="flex flex-wrap gap-2.5 pt-1">
                        {{-- Standard Defaults --}}
                        @foreach ($standardDefinitions as $key => $std)
                            @php
                                $isActive = in_array($key, $formComponents, true);
                            @endphp
                            <div class="comp-badge-card flex items-center gap-2 rounded-xl border {{ $isActive ? 'border-slate-300 bg-white shadow-sm' : 'border-dashed border-slate-200 bg-slate-50 opacity-60' }} px-3 py-2 text-xs transition"
                                 data-comp-key="{{ $key }}" data-is-standard="1">
                                <label class="flex items-center gap-2 cursor-pointer mb-0">
                                    <input type="checkbox" name="komponen[]" value="{{ $key }}" @checked($isActive) class="rounded border-slate-300 text-blue-600 focus:ring-blue-500 comp-toggle-cb">
                                    <span class="font-bold text-slate-800">{{ $std['label'] }}</span>
                                </label>
                                <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-bold text-emerald-800">
                                    + Penambahan
                                </span>
                                <span class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600">
                                    {{ $std['mode'] === 'sks' ? 'Per SKS' : ($std['mode'] === 'kehadiran' ? 'Kehadiran' : 'Tetap') }}
                                </span>
                            </div>
                        @endforeach

                        {{-- Dynamic Custom Components --}}
                        @foreach ($activeComponents as $comp)
                            @if (! isset($standardDefinitions[$comp['key']]))
                                @php
                                    $ckey = $comp['key'];
                                    $isPot = ($comp['tipe'] ?? '') === 'potongan';
                                @endphp
                                <div class="comp-badge-card flex items-center gap-2 rounded-xl border border-blue-200 bg-white shadow-sm px-3 py-2 text-xs transition"
                                     data-comp-key="{{ $ckey }}" data-is-standard="0">
                                    <input type="hidden" name="komponen[]" value="{{ $ckey }}">
                                    <input type="hidden" name="komponen_meta[{{ $ckey }}][label]" value="{{ $comp['label'] }}">
                                    <input type="hidden" name="komponen_meta[{{ $ckey }}][tipe]" value="{{ $comp['tipe'] }}">
                                    <input type="hidden" name="komponen_meta[{{ $ckey }}][mode]" value="{{ $comp['mode'] }}">

                                    <span class="font-bold text-slate-800">{{ $comp['label'] }}</span>
                                    <span class="rounded-full {{ $isPot ? 'bg-rose-100 text-rose-800' : 'bg-emerald-100 text-emerald-800' }} px-2 py-0.5 text-[10px] font-bold">
                                        {{ $isPot ? '- Pengurangan' : '+ Penambahan' }}
                                    </span>
                                    <span class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600">
                                        {{ ($comp['mode'] ?? '') === 'kehadiran' ? 'Kehadiran' : 'Tetap' }}
                                    </span>
                                    <button type="button" class="btn-remove-custom-comp ml-1 text-slate-400 hover:text-rose-600 transition" title="Hapus komponen ini">
                                        <i class="bi bi-trash3-fill"></i>
                                    </button>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </fieldset>

                <p data-salary-empty @if ($formComponents !== []) hidden @endif class="mx-4 my-4 rounded-lg border border-dashed border-slate-300 p-4 text-sm text-slate-500 sm:mx-5">
                    Pilih atau tambahkan minimal satu komponen gaji untuk menampilkan kolom pengaturan.
                </p>

                <div class="overflow-x-auto">
                    <table class="sp-table min-w-[42rem]" id="table-teachers-salary">
                        <thead>
                            <tr>
                                <th scope="col" class="w-14 text-center">No.</th>
                                <th scope="col">Nama guru</th>

                                {{-- Standard Columns --}}
                                <th scope="col" data-component-column="pokok" @if (! in_array('pokok', $formComponents, true)) hidden @endif>
                                    Honor pokok bulanan (Rp)
                                </th>
                                <th scope="col" data-component-column="sks" @if (! in_array('sks', $formComponents, true)) hidden @endif>
                                    Jumlah SKS per bulan
                                </th>
                                <th scope="col" data-component-column="sks" @if (! in_array('sks', $formComponents, true)) hidden @endif>
                                    Tarif per SKS (Rp)
                                </th>
                                <th scope="col" data-component-column="kehadiran" @if (! in_array('kehadiran', $formComponents, true)) hidden @endif>
                                    Tarif kehadiran penuh (Rp)
                                </th>

                                {{-- Custom Component Columns --}}
                                @foreach ($activeComponents as $comp)
                                    @if (! isset($standardDefinitions[$comp['key']]))
                                        @php
                                            $ckey = $comp['key'];
                                            $isPot = ($comp['tipe'] ?? '') === 'potongan';
                                        @endphp
                                        <th scope="col" data-component-column="{{ $ckey }}" class="text-right">
                                            <div class="flex items-center justify-end gap-1.5">
                                                <span>{{ $comp['label'] }}</span>
                                                <span class="rounded px-1.5 py-0.2 text-[9px] font-bold {{ $isPot ? 'bg-rose-100 text-rose-700' : 'bg-emerald-100 text-emerald-700' }}">
                                                    {{ $isPot ? '(-)' : '(+)' }}
                                                </span>
                                            </div>
                                            <div class="text-[10.5px] font-normal text-slate-400">
                                                {{ ($comp['mode'] ?? '') === 'kehadiran' ? 'Per Kehadiran' : 'Nominal Tetap' }} (Rp)
                                            </div>
                                        </th>
                                    @endif
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($teachers as $teacher)
                                <tr>
                                    <td class="text-center">{{ $loop->iteration }}</td>
                                    <td class="font-semibold">{{ $teacher->nama }}</td>

                                    {{-- Standard fields --}}
                                    <td data-component-column="pokok" @if (! in_array('pokok', $formComponents, true)) hidden @endif>
                                        <label class="sr-only" for="gaji-pokok-{{ $teacher->id }}">Honor pokok bulanan {{ $teacher->nama }}</label>
                                        <input id="gaji-pokok-{{ $teacher->id }}" type="text" name="gaji_pokok[{{ $teacher->id }}]" value="{{ old('gaji_pokok.'.$teacher->id, $teacher->gaji_pokok === null ? '' : number_format((float) $teacher->gaji_pokok, 0, ',', '.')) }}" inputmode="numeric" data-rupiah-input data-component-input="pokok" @if (in_array('pokok', $formComponents, true)) required @else disabled @endif class="sp-form-control w-full min-w-36 px-3 py-2 text-right text-sm">
                                    </td>
                                    <td data-component-column="sks" @if (! in_array('sks', $formComponents, true)) hidden @endif>
                                        <label class="sr-only" for="jumlah-sks-{{ $teacher->id }}">Jumlah SKS {{ $teacher->nama }}</label>
                                        <input id="jumlah-sks-{{ $teacher->id }}" type="text" name="jumlah_sks[{{ $teacher->id }}]" value="{{ old('jumlah_sks.'.$teacher->id, $teacher->jumlah_sks === null ? '' : rtrim(rtrim(number_format((float) $teacher->jumlah_sks, 2, '.', ''), '0'), '.')) }}" inputmode="decimal" placeholder="Contoh: 8" data-component-input="sks" @if (in_array('sks', $formComponents, true)) required @else disabled @endif class="sp-form-control w-full min-w-32 px-3 py-2 text-right text-sm">
                                    </td>
                                    <td data-component-column="sks" @if (! in_array('sks', $formComponents, true)) hidden @endif>
                                        <label class="sr-only" for="tarif-sks-{{ $teacher->id }}">Tarif per SKS {{ $teacher->nama }}</label>
                                        <input id="tarif-sks-{{ $teacher->id }}" type="text" name="tarif_sks[{{ $teacher->id }}]" value="{{ old('tarif_sks.'.$teacher->id, $teacher->tarif_sks === null ? '' : number_format((float) $teacher->tarif_sks, 0, ',', '.')) }}" inputmode="numeric" data-rupiah-input data-component-input="sks" @if (in_array('sks', $formComponents, true)) required @else disabled @endif class="sp-form-control w-full min-w-36 px-3 py-2 text-right text-sm">
                                    </td>
                                    <td data-component-column="kehadiran" @if (! in_array('kehadiran', $formComponents, true)) hidden @endif>
                                        <label class="sr-only" for="tarif-kehadiran-{{ $teacher->id }}">Tarif kehadiran penuh {{ $teacher->nama }}</label>
                                        <input id="tarif-kehadiran-{{ $teacher->id }}" type="text" name="tarif_kehadiran[{{ $teacher->id }}]" value="{{ old('tarif_kehadiran.'.$teacher->id, $teacher->tarif_kehadiran === null ? '' : number_format((float) $teacher->tarif_kehadiran, 0, ',', '.')) }}" inputmode="numeric" data-rupiah-input data-component-input="kehadiran" @if (in_array('kehadiran', $formComponents, true)) required @else disabled @endif class="sp-form-control w-full min-w-36 px-3 py-2 text-right text-sm">
                                    </td>

                                    {{-- Custom fields --}}
                                    @foreach ($activeComponents as $comp)
                                        @if (! isset($standardDefinitions[$comp['key']]))
                                            @php
                                                $ckey = $comp['key'];
                                                $val = $teacher->custom_values[$ckey] ?? null;
                                                $valFormatted = ($val !== null && $val !== '') ? number_format((float) $val, 0, ',', '.') : '';
                                            @endphp
                                            <td data-component-column="{{ $ckey }}" class="text-right">
                                                <label class="sr-only" for="comp-val-{{ $teacher->id }}-{{ $ckey }}">{{ $comp['label'] }} {{ $teacher->nama }}</label>
                                                <input id="comp-val-{{ $teacher->id }}-{{ $ckey }}"
                                                       type="text"
                                                       name="komponen_nilai[{{ $teacher->id }}][{{ $ckey }}]"
                                                       value="{{ old('komponen_nilai.'.$teacher->id.'.'.$ckey, $valFormatted) }}"
                                                       placeholder="0"
                                                       inputmode="numeric"
                                                       data-rupiah-input
                                                       data-custom-input="{{ $ckey }}"
                                                       class="sp-form-control w-full min-w-36 px-3 py-2 text-right text-sm">
                                            </td>
                                        @endif
                                    @endforeach
                                </tr>
                            @empty
                                <tr><td colspan="10" class="px-4 py-10 text-center text-sm text-slate-500">Belum ada data guru di lembaga ini.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <div class="flex items-center justify-between border-t border-slate-100 p-4">
                    <p class="text-xs text-slate-500">Semua komponen penambahan dan potongan akan otomatis dihitung pada rekap & slip gaji.</p>
                    <button type="submit" class="sp-btn-primary justify-center">
                        <i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan kebijakan gaji
                    </button>
                </div>
            </form>
        </section>
    @endif
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const bindRupiahMask = (el) => {
        el.addEventListener('input', () => {
            const digits = el.value.replace(/\D/g, '');
            el.value = digits ? new Intl.NumberFormat('id-ID').format(Number(digits)) : '';
        });
    };
    document.querySelectorAll('[data-rupiah-input]').forEach(bindRupiahMask);

    // Toggle Add Component Panel
    const addPanel = document.getElementById('add-component-panel');
    const btnOpenAdd = document.getElementById('btn-open-add-component');
    const btnCloseAdd = document.getElementById('btn-close-add-component');
    if (btnOpenAdd && addPanel) {
        btnOpenAdd.addEventListener('click', () => addPanel.classList.remove('hidden'));
    }
    if (btnCloseAdd && addPanel) {
        btnCloseAdd.addEventListener('click', () => addPanel.classList.add('hidden'));
    }

    // Update visibility of table columns based on standard checkboxes
    const updateSalaryColumns = () => {
        const standardCheckboxes = document.querySelectorAll('.comp-toggle-cb');
        const activeStd = [...standardCheckboxes].filter(cb => cb.checked).map(cb => cb.value);

        ['pokok', 'sks', 'kehadiran'].forEach(key => {
            const isEnabled = activeStd.includes(key);
            document.querySelectorAll(`[data-component-column="${key}"]`).forEach(col => {
                col.hidden = !isEnabled;
            });
            document.querySelectorAll(`[data-component-input="${key}"]`).forEach(input => {
                input.disabled = !isEnabled;
                input.required = isEnabled;
            });
            const badgeCard = document.querySelector(`.comp-badge-card[data-comp-key="${key}"]`);
            if (badgeCard) {
                if (isEnabled) {
                    badgeCard.classList.remove('opacity-60', 'border-dashed', 'bg-slate-50');
                    badgeCard.classList.add('bg-white', 'shadow-sm', 'border-slate-300');
                } else {
                    badgeCard.classList.add('opacity-60', 'border-dashed', 'bg-slate-50');
                    badgeCard.classList.remove('bg-white', 'shadow-sm', 'border-slate-300');
                }
            }
        });

        // Check total active components
        const totalActive = activeStd.length + document.querySelectorAll('.comp-badge-card[data-is-standard="0"]').length;
        const emptyState = document.querySelector('[data-salary-empty]');
        if (emptyState) emptyState.hidden = totalActive > 0;
    };

    document.querySelectorAll('.comp-toggle-cb').forEach(cb => {
        cb.addEventListener('change', updateSalaryColumns);
    });

    // Helper to generate a slug key
    const makeKey = (label) => {
        const clean = label.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
        return 'c_' + (clean || 'komponen') + '_' + Math.floor(Math.random() * 1000);
    };

    // Add dynamic custom component to DOM
    const addCustomComponent = (label, tipe, mode) => {
        if (!label || !label.trim()) {
            alert('Masukkan nama komponen terlebih dahulu.');
            return;
        }
        label = label.trim();
        const key = makeKey(label);
        const isPotongan = tipe === 'potongan';

        // 1. Add Badge Card to active container
        const container = document.getElementById('active-components-container');
        const badgeDiv = document.createElement('div');
        badgeDiv.className = 'comp-badge-card flex items-center gap-2 rounded-xl border border-blue-200 bg-white shadow-sm px-3 py-2 text-xs transition';
        badgeDiv.dataset.compKey = key;
        badgeDiv.dataset.isStandard = '0';
        badgeDiv.innerHTML = `
            <input type="hidden" name="komponen[]" value="${key}">
            <input type="hidden" name="komponen_meta[${key}][label]" value="${label}">
            <input type="hidden" name="komponen_meta[${key}][tipe]" value="${tipe}">
            <input type="hidden" name="komponen_meta[${key}][mode]" value="${mode}">
            <span class="font-bold text-slate-800">${label}</span>
            <span class="rounded-full ${isPotongan ? 'bg-rose-100 text-rose-800' : 'bg-emerald-100 text-emerald-800'} px-2 py-0.5 text-[10px] font-bold">
                ${isPotongan ? '- Pengurangan' : '+ Penambahan'}
            </span>
            <span class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600">
                ${mode === 'kehadiran' ? 'Kehadiran' : 'Tetap'}
            </span>
            <button type="button" class="btn-remove-custom-comp ml-1 text-slate-400 hover:text-rose-600 transition" title="Hapus komponen ini">
                <i class="bi bi-trash3-fill"></i>
            </button>
        `;
        container.appendChild(badgeDiv);

        // Bind delete button
        badgeDiv.querySelector('.btn-remove-custom-comp').addEventListener('click', () => {
            removeCustomComponent(key);
        });

        // 2. Add Table Header Column
        const table = document.getElementById('table-teachers-salary');
        if (table) {
            const headerRow = table.querySelector('thead tr');
            const th = document.createElement('th');
            th.scope = 'col';
            th.dataset.componentColumn = key;
            th.className = 'text-right';
            th.innerHTML = `
                <div class="flex items-center justify-end gap-1.5">
                    <span>${label}</span>
                    <span class="rounded px-1.5 py-0.2 text-[9px] font-bold ${isPotongan ? 'bg-rose-100 text-rose-700' : 'bg-emerald-100 text-emerald-700'}">
                        ${isPotongan ? '(-)' : '(+)'}
                    </span>
                </div>
                <div class="text-[10.5px] font-normal text-slate-400">
                    ${mode === 'kehadiran' ? 'Per Kehadiran' : 'Nominal Tetap'} (Rp)
                </div>
            `;
            headerRow.appendChild(th);

            // 3. Add Table Body Cells for each teacher
            const bodyRows = table.querySelectorAll('tbody tr');
            bodyRows.forEach(row => {
                // If it's the empty row, do nothing
                if (row.cells.length === 1 && row.cells[0].colSpan > 1) return;

                // Extract teacher id from any input
                const teacherInput = row.querySelector('[data-component-input], input[name^="komponen_nilai"]');
                let teacherId = null;
                if (teacherInput) {
                    const match = teacherInput.name.match(/\[(\d+)\]/);
                    if (match) teacherId = match[1];
                }
                if (!teacherId) {
                    const idFromFirst = row.querySelector('input[id*="-"]');
                    if (idFromFirst) {
                        const parts = idFromFirst.id.split('-');
                        teacherId = parts[parts.length - 1];
                    }
                }

                const td = document.createElement('td');
                td.dataset.componentColumn = key;
                td.className = 'text-right';
                td.innerHTML = `
                    <input type="text"
                           name="komponen_nilai[${teacherId}][${key}]"
                           value=""
                           placeholder="0"
                           inputmode="numeric"
                           data-rupiah-input
                           data-custom-input="${key}"
                           class="sp-form-control w-full min-w-36 px-3 py-2 text-right text-sm">
                `;
                row.appendChild(td);
                bindRupiahMask(td.querySelector('[data-rupiah-input]'));
            });
        }

        updateSalaryColumns();
    };

    // Remove dynamic custom component
    const removeCustomComponent = (key) => {
        // Remove badge
        const badge = document.querySelector(`.comp-badge-card[data-comp-key="${key}"]`);
        if (badge) badge.remove();

        // Remove table header & cells
        document.querySelectorAll(`[data-component-column="${key}"]`).forEach(el => el.remove());

        updateSalaryColumns();
    };

    // Bind existing remove buttons
    document.querySelectorAll('.btn-remove-custom-comp').forEach(btn => {
        btn.addEventListener('click', function () {
            const card = this.closest('.comp-badge-card');
            if (card) {
                removeCustomComponent(card.dataset.compKey);
            }
        });
    });

    // Preset buttons
    document.querySelectorAll('.btn-preset').forEach(btn => {
        btn.addEventListener('click', () => {
            addCustomComponent(btn.dataset.label, btn.dataset.tipe, btn.dataset.mode);
        });
    });

    // Custom submit button
    const btnSubmitCustom = document.getElementById('btn-submit-custom-comp');
    if (btnSubmitCustom) {
        btnSubmitCustom.addEventListener('click', () => {
            const labelInput = document.getElementById('new-comp-label');
            const tipeInput = document.getElementById('new-comp-tipe');
            const modeInput = document.getElementById('new-comp-mode');
            if (labelInput && tipeInput && modeInput) {
                addCustomComponent(labelInput.value, tipeInput.value, modeInput.value);
                labelInput.value = '';
            }
        });
    }

    updateSalaryColumns();
});
</script>
@endsection