@extends('layouts.adminlte')

@section('title', 'MASTER PROFIL GAJI')
@section('page_title', 'MASTER PROFIL GAJI')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Master Profil Gaji</h3>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-secondary btn-sm" id="btnCopyProfil" disabled><i class="fas fa-copy me-1"></i>Copy Profil</button>
                <button class="btn btn-primary btn-sm" id="btnAddProfil"><i class="fas fa-plus me-1"></i>Tambah Profil Gaji</button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="profilTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Kode</th>
                            <th>Nama Profil</th>
                            <th>Skema</th>
                            <th>Potong Absen</th>
                            <th>Basis Jam/Bulan</th>
                            <th>Jumlah Item</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Detail Komponen: <span id="detailTitle" class="text-primary">-</span></h3>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-success btn-sm" id="btnUploadDetail" disabled><i class="fas fa-file-upload me-1"></i>Upload Komponen</button>
                <button class="btn btn-primary btn-sm" id="btnAddDetail" disabled><i class="fas fa-plus me-1"></i>Tambah Komponen</button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="detailTable" class="table table-bordered table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Group</th>
                            <th>Komponen</th>
                            <th>Perhitungan</th>
                            <th>Prorata</th>
                            <th>Efektif</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="profilModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="profilModalTitle">Tambah Profil Gaji</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="profilForm">
                    <div class="modal-body">
                        <input type="hidden" id="profilId" />
                        <div class="mb-3">
                            <label class="form-label">Kode</label>
                            <input type="text" class="form-control" id="profilCode" maxlength="40" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Nama Profil</label>
                            <input type="text" class="form-control" id="profilName" maxlength="180" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Deskripsi</label>
                            <textarea class="form-control" id="profilDescription" rows="2"></textarea>
                        </div>
                        <div class="row g-3 mb-2">
                            <div class="col-md-6">
                                <label class="form-label">Skema Gaji</label>
                                <select class="form-select" id="profilSalaryScheme">
                                    <option value="hourly">Regular (ikut jam)</option>
                                    <option value="all_in">ALL IN (lembur tidak menambah)</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Mode Potong Absen</label>
                                <select class="form-select" id="profilAbsenceDeductionMode">
                                    <option value="daily">Potong Harian</option>
                                    <option value="none">Tanpa Potong Absen</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Basis Jam/Bulan</label>
                                <input type="number" class="form-control" id="profilMonthlyHourBase" min="1" max="744" step="1" value="173" />
                                <small class="text-muted">Contoh: 173 (default) atau 168 untuk profil 5 hari kerja.</small>
                            </div>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="profilActive" checked />
                            <label class="form-check-label" for="profilActive">Active</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="detailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detailModalTitle">Tambah Komponen Profil Gaji</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="detailForm">
                    <div class="modal-body">
                        <input type="hidden" id="detailId" />
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Group</label>
                                <select class="form-select" id="detailGroup" required>
                                    <option value="pendapatan">Pendapatan</option>
                                    <option value="potongan">Potongan</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Komponen</label>
                                <select class="form-select" id="detailComponentId" required></select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Tipe Hitung</label>
                                <select class="form-select" id="detailCalcType" required>
                                    <option value="fixed">Nominal Tetap</option>
                                    <option value="percent">Persentase</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Nominal</label>
                                <input type="number" class="form-control" id="detailAmount" min="0" step="0.01" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Persen (%)</label>
                                <input type="number" class="form-control" id="detailPercentValue" min="0" max="100" step="0.0001" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Base Persen</label>
                                <select class="form-select" id="detailPercentBase">
                                    <option value="gaji_pokok">Gaji Pokok</option>
                                    <option value="total_pendapatan">Total Pendapatan</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Efektif Mulai</label>
                                <input type="date" class="form-control" id="detailEffectiveStart" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Efektif Akhir</label>
                                <input type="date" class="form-control" id="detailEffectiveEnd" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Urutan</label>
                                <input type="number" class="form-control" id="detailSortOrder" min="0" max="9999" value="0" />
                            </div>
                            <div class="col-md-6 d-flex align-items-end">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" id="detailProrate" checked />
                                    <label class="form-check-label" for="detailProrate">Ikut Prorata</label>
                                </div>
                            </div>
                            <div class="col-md-6 d-flex align-items-end">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" id="detailActive" checked />
                                    <label class="form-check-label" for="detailActive">Active</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="uploadDetailModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Upload Massal Komponen Profil Gaji</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="uploadDetailForm" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="alert alert-info py-2 small">
                            <div><strong>Format model baru:</strong> Excel (.xlsx/.xls) atau CSV dengan acuan utama <code>component_code</code>.</div>
                            <div><strong>Kolom wajib:</strong> <code>component_group</code>, <code>component_code</code>, <code>calc_type</code>.</div>
                            <div><strong>Repeat baris:</strong> 1 karyawan/1 konteks bisa punya beberapa baris BPJS, masing-masing 1 baris per <code>component_code</code>.</div>
                            <div><strong>Mode:</strong> jika komponen sudah ada pada profil aktif, sistem update. Jika belum ada, sistem insert.</div>
                        </div>
                        <div class="table-responsive mb-3">
                            <table class="table table-bordered table-sm align-middle small mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width:220px;">Kolom</th>
                                        <th>Fungsi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr><td><code>component_group</code></td><td><code>pendapatan</code> atau <code>potongan</code>.</td></tr>
                                    <tr><td><code>component_code</code></td><td>Kode master komponen yang dipakai di profil gaji.</td></tr>
                                    <tr><td><code>calc_type</code></td><td><code>fixed</code> untuk nominal tetap, <code>percent</code> untuk persentase.</td></tr>
                                    <tr><td><code>amount</code></td><td>Isi jika tipe fixed.</td></tr>
                                    <tr><td><code>percent_value</code></td><td>Isi jika tipe percent.</td></tr>
                                    <tr><td><code>percent_base</code></td><td><code>gaji_pokok</code> atau <code>total_pendapatan</code>.</td></tr>
                                    <tr><td><code>effective_start</code></td><td>Tanggal mulai berlaku.</td></tr>
                                    <tr><td><code>effective_end</code></td><td>Tanggal akhir berlaku.</td></tr>
                                    <tr><td><code>sort_order</code></td><td>Urutan komponen.</td></tr>
                                    <tr><td><code>is_prorate</code></td><td><code>1</code> ikut prorata, <code>0</code> tidak.</td></tr>
                                    <tr><td><code>is_active</code></td><td><code>1</code> aktif, <code>0</code> nonaktif.</td></tr>
                                    <tr><td><code>notes</code></td><td>Catatan tambahan.</td></tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="border rounded p-2 bg-light small mb-3">
                            <div class="fw-semibold mb-2">Contoh BPJS potongan yang benar</div>
                            <div><code>potongan | POT-BPJS-KES | fixed | 48741</code></div>
                            <div><code>potongan | POT-BPJS-JP | fixed | 105474</code></div>
                            <div><code>potongan | POT-BPJS-JHT | fixed | 308000</code></div>
                        </div>
                        <div class="d-flex gap-2 mb-3">
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="btnDownloadDetailTemplate">
                                <i class="fas fa-download me-1"></i>Download Template Excel
                            </button>
                        </div>
                        <div>
                            <label class="form-label">File Upload</label>
                            <input type="file" class="form-control" id="uploadDetailFile" accept=".xlsx,.xls,.csv,.txt" required />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Upload & Proses</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="copyProfilModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Copy Profil Gaji</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="copyProfilForm">
                    <div class="modal-body">
                        <input type="hidden" id="copyProfilSourceId" />
                        <div class="mb-3">
                            <label class="form-label">Kode Baru</label>
                            <input type="text" class="form-control" id="copyProfilCode" maxlength="40" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Nama Profil Baru</label>
                            <input type="text" class="form-control" id="copyProfilName" maxlength="180" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Deskripsi</label>
                            <textarea class="form-control" id="copyProfilDescription" rows="2"></textarea>
                        </div>
                        <div class="small text-muted">Profil yang dicopy akan membawa skema gaji dan seluruh detail komponen dari profil sumber.</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Copy</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const profilModal = new bootstrap.Modal(document.getElementById('profilModal'));
            const detailModal = new bootstrap.Modal(document.getElementById('detailModal'));
            const uploadDetailModal = new bootstrap.Modal(document.getElementById('uploadDetailModal'));
            const copyProfilModal = new bootstrap.Modal(document.getElementById('copyProfilModal'));

            const profilTable = $('#profilTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: 'code' },
                    { data: 'name' },
                    { data: 'salary_scheme', render: (v) => v === 'all_in' ? '<span class="badge text-bg-primary">ALL IN</span>' : '<span class="badge text-bg-secondary">Regular</span>' },
                    { data: 'absence_deduction_mode', render: (v) => v === 'none' ? 'Tidak dipotong' : 'Potong harian' },
                    { data: 'monthly_hour_base', render: (v) => Number(v || 173) },
                    { data: 'details_count', render: (v) => Number(v || 0) },
                    { data: 'is_active', render: (v) => v ? '<span class="badge text-bg-success">Active</span>' : '<span class="badge text-bg-secondary">Inactive</span>' },
                    {
                        data: null,
                        orderable: false,
                        render: (d, t, r) => `
                            <button class="btn btn-sm btn-outline-info btn-manage" data-id="${r.id}">Kelola</button>
                            <button class="btn btn-sm btn-outline-secondary btn-copy" data-id="${r.id}">Copy</button>
                            <button class="btn btn-sm btn-outline-primary btn-edit" data-id="${r.id}">Edit</button>
                            <button class="btn btn-sm btn-outline-danger btn-delete" data-id="${r.id}">Delete</button>
                        `
                    }
                ]
            });

            const detailTable = $('#detailTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: 'component_group' },
                    { data: null, render: (r) => `${r.component_code || '-'} - ${r.component_name || '-'}` },
                    {
                        data: null,
                        render: (r) => r.calc_type === 'fixed'
                            ? `Fixed: ${Number(r.amount || 0).toLocaleString('id-ID')}`
                            : `Percent: ${Number(r.percent_value || 0).toLocaleString('id-ID')}% (${r.percent_base || '-'})`
                    },
                    { data: 'is_prorate', render: (v) => v ? 'Ya' : 'Tidak' },
                    { data: null, render: (r) => `${r.effective_start || '-'} s/d ${r.effective_end || '-'}` },
                    {
                        data: null,
                        orderable: false,
                        render: (d, t, r) => `
                            <button class="btn btn-sm btn-outline-primary btn-detail-edit" data-id="${r.id}">Edit</button>
                            <button class="btn btn-sm btn-outline-danger btn-detail-delete" data-id="${r.id}">Delete</button>
                        `
                    }
                ]
            });

            let profilRows = [];
            let detailRows = [];
            let refs = { komponen_pendapatan: [], komponen_potongan: [] };
            let activeProfilId = null;

            const openCopyProfilModal = (row) => {
                if (!row) return;
                $('#copyProfilSourceId').val(row.id);
                $('#copyProfilCode').val(`${row.code || ''}-COPY`);
                $('#copyProfilName').val(`${row.name || ''} (Copy)`);
                $('#copyProfilDescription').val(row.description || '');
                copyProfilModal.show();
            };

            const fillComponentOptions = (selectedId = '') => {
                const group = $('#detailGroup').val();
                const source = group === 'pendapatan' ? refs.komponen_pendapatan : refs.komponen_potongan;
                const options = ['<option value="">- Pilih Komponen -</option>']
                    .concat(source.map((r) => `<option value="${r.id}">${r.code || '-'} - ${r.name}</option>`));
                $('#detailComponentId').html(options.join('')).val(selectedId ? String(selectedId) : '');
            };

            const loadRefs = () => {
                return $.getJSON('{{ route('master_profil_gaji.refs') }}')
                    .done((resp) => { refs = resp.data || refs; })
                    .fail(() => { refs = { komponen_pendapatan: [], komponen_potongan: [] }; });
            };

            const loadProfiles = () => {
                return $.getJSON('{{ route('master_profil_gaji.data') }}')
                    .done((resp) => {
                        profilRows = resp.data || [];
                        profilTable.clear().rows.add(profilRows).draw(false);
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load profil gaji', 'error'));
            };

            const loadDetails = () => {
                if (!activeProfilId) {
                    detailRows = [];
                    detailTable.clear().draw();
                    $('#detailTitle').text('-');
                    $('#btnAddDetail').prop('disabled', true);
                    $('#btnUploadDetail').prop('disabled', true);
                    return;
                }
                $.getJSON(`{{ url('/master-profil-gaji') }}/${activeProfilId}/details`)
                    .done((resp) => {
                        detailRows = resp.data || [];
                        detailTable.clear().rows.add(detailRows).draw(false);
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load detail', 'error'));
            };

            $('#btnAddProfil').on('click', function () {
                $('#profilModalTitle').text('Tambah Profil Gaji');
                $('#profilId').val('');
                $('#profilCode').val('');
                $('#profilName').val('');
                $('#profilDescription').val('');
                $('#profilSalaryScheme').val('hourly');
                $('#profilAbsenceDeductionMode').val('daily');
                $('#profilMonthlyHourBase').val('173');
                $('#profilActive').prop('checked', true);
                profilModal.show();
            });

            $('#profilTable').on('click', '.btn-manage', function () {
                const id = Number($(this).data('id'));
                const row = profilRows.find((x) => Number(x.id) === id);
                if (!row) return;
                activeProfilId = id;
                $('#detailTitle').text(`${row.code} - ${row.name}`);
                $('#btnAddDetail').prop('disabled', false);
                $('#btnUploadDetail').prop('disabled', false);
                $('#btnCopyProfil').prop('disabled', false).data('id', id);
                loadDetails();
            });

            $('#btnCopyProfil').on('click', function () {
                const id = Number($(this).data('id') || 0);
                const row = profilRows.find((x) => Number(x.id) === id);
                if (!row) {
                    Swal.fire('Warning', 'Pilih profil dulu melalui tombol Kelola.', 'warning');
                    return;
                }
                openCopyProfilModal(row);
            });

            $('#profilTable').on('click', '.btn-copy', function () {
                const id = Number($(this).data('id'));
                const row = profilRows.find((x) => Number(x.id) === id);
                openCopyProfilModal(row);
            });

            $('#profilTable').on('click', '.btn-edit', function () {
                const id = Number($(this).data('id'));
                const row = profilRows.find((x) => Number(x.id) === id);
                if (!row) return;
                $('#profilModalTitle').text('Edit Profil Gaji');
                $('#profilId').val(row.id);
                $('#profilCode').val(row.code || '');
                $('#profilName').val(row.name || '');
                $('#profilDescription').val(row.description || '');
                $('#profilSalaryScheme').val(row.salary_scheme || 'hourly');
                $('#profilAbsenceDeductionMode').val(row.absence_deduction_mode || 'daily');
                $('#profilMonthlyHourBase').val(Number(row.monthly_hour_base || 173));
                $('#profilActive').prop('checked', !!row.is_active);
                profilModal.show();
            });

            $('#copyProfilForm').on('submit', function (e) {
                e.preventDefault();
                const id = Number($('#copyProfilSourceId').val() || 0);
                const payload = {
                    code: ($('#copyProfilCode').val() || '').toString().trim(),
                    name: ($('#copyProfilName').val() || '').toString().trim(),
                    description: ($('#copyProfilDescription').val() || '').toString().trim(),
                };
                if (!id || !payload.code || !payload.name) {
                    Swal.fire('Warning', 'Kode baru dan nama profil baru wajib diisi.', 'warning');
                    return;
                }
                $.ajax({
                    url: `{{ url('/master-profil-gaji') }}/${id}/copy`,
                    type: 'POST',
                    data: payload
                }).done((resp) => {
                    copyProfilModal.hide();
                    loadProfiles();
                    Swal.fire('Success', resp?.message || 'Profil gaji berhasil dicopy', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Copy profil gaji gagal', 'error'));
            });

            $('#profilForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#profilId').val();
                const payload = {
                    code: ($('#profilCode').val() || '').toString().trim(),
                    name: ($('#profilName').val() || '').toString().trim(),
                    description: ($('#profilDescription').val() || '').toString().trim(),
                    salary_scheme: $('#profilSalaryScheme').val(),
                    absence_deduction_mode: $('#profilAbsenceDeductionMode').val(),
                    monthly_hour_base: ($('#profilMonthlyHourBase').val() || '173').toString().trim(),
                    is_active: $('#profilActive').is(':checked') ? 1 : 0
                };
                if (!payload.code || !payload.name) {
                    Swal.fire('Warning', 'Kode dan nama wajib diisi', 'warning');
                    return;
                }
                $.ajax({
                    url: id ? `{{ url('/master-profil-gaji') }}/${id}` : '{{ route('master_profil_gaji.store') }}',
                    type: id ? 'PUT' : 'POST',
                    data: payload
                }).done((resp) => {
                    profilModal.hide();
                    loadProfiles();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            $('#profilTable').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Delete profil gaji?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-profil-gaji') }}/${id}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        if (Number(activeProfilId) === id) {
                            activeProfilId = null;
                            loadDetails();
                        }
                        loadProfiles();
                        Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
                });
            });

            $('#btnAddDetail').on('click', function () {
                if (!activeProfilId) return;
                $('#detailModalTitle').text('Tambah Komponen Profil Gaji');
                $('#detailId').val('');
                $('#detailGroup').val('pendapatan');
                fillComponentOptions('');
                $('#detailCalcType').val('fixed');
                $('#detailAmount').val('');
                $('#detailPercentValue').val('');
                $('#detailPercentBase').val('gaji_pokok');
                $('#detailEffectiveStart').val('');
                $('#detailEffectiveEnd').val('');
                $('#detailSortOrder').val('0');
                $('#detailProrate').prop('checked', true);
                $('#detailActive').prop('checked', true);
                detailModal.show();
            });

            $('#btnUploadDetail').on('click', function () {
                if (!activeProfilId) return;
                $('#uploadDetailFile').val('');
                uploadDetailModal.show();
            });

            $('#btnDownloadDetailTemplate').on('click', function () {
                if (!activeProfilId) return;
                window.open(`{{ url('/master-profil-gaji') }}/${activeProfilId}/details/upload-template`, '_blank');
            });

            $('#detailGroup').on('change', function () {
                fillComponentOptions('');
            });

            $('#detailTable').on('click', '.btn-detail-edit', function () {
                const id = Number($(this).data('id'));
                const row = detailRows.find((x) => Number(x.id) === id);
                if (!row) return;
                $('#detailModalTitle').text('Edit Komponen Profil Gaji');
                $('#detailId').val(row.id);
                $('#detailGroup').val(row.component_group || 'pendapatan');
                fillComponentOptions(row.component_group === 'pendapatan' ? row.komponen_pendapatan_id : row.komponen_potongan_id);
                $('#detailCalcType').val(row.calc_type || 'fixed');
                $('#detailAmount').val(Number(row.amount || 0));
                $('#detailPercentValue').val(Number(row.percent_value || 0));
                $('#detailPercentBase').val(row.percent_base || 'gaji_pokok');
                $('#detailEffectiveStart').val(row.effective_start || '');
                $('#detailEffectiveEnd').val(row.effective_end || '');
                $('#detailSortOrder').val(Number(row.sort_order || 0));
                $('#detailProrate').prop('checked', !!row.is_prorate);
                $('#detailActive').prop('checked', !!row.is_active);
                detailModal.show();
            });

            $('#detailForm').on('submit', function (e) {
                e.preventDefault();
                if (!activeProfilId) {
                    Swal.fire('Warning', 'Pilih profil gaji dahulu', 'warning');
                    return;
                }

                const id = $('#detailId').val();
                const group = $('#detailGroup').val();
                const payload = {
                    component_group: group,
                    komponen_pendapatan_id: group === 'pendapatan' ? $('#detailComponentId').val() : '',
                    komponen_potongan_id: group === 'potongan' ? $('#detailComponentId').val() : '',
                    calc_type: $('#detailCalcType').val(),
                    amount: ($('#detailAmount').val() || '').toString(),
                    percent_value: ($('#detailPercentValue').val() || '').toString(),
                    percent_base: $('#detailPercentBase').val(),
                    is_prorate: $('#detailProrate').is(':checked') ? 1 : 0,
                    effective_start: $('#detailEffectiveStart').val(),
                    effective_end: $('#detailEffectiveEnd').val(),
                    sort_order: ($('#detailSortOrder').val() || '0').toString(),
                    is_active: $('#detailActive').is(':checked') ? 1 : 0
                };
                if (!payload.component_group || !$('#detailComponentId').val()) {
                    Swal.fire('Warning', 'Group dan komponen wajib diisi', 'warning');
                    return;
                }
                $.ajax({
                    url: id
                        ? `{{ url('/master-profil-gaji/details') }}/${id}`
                        : `{{ url('/master-profil-gaji') }}/${activeProfilId}/details`,
                    type: id ? 'PUT' : 'POST',
                    data: payload
                }).done((resp) => {
                    detailModal.hide();
                    loadDetails();
                    loadProfiles();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            $('#uploadDetailForm').on('submit', function (e) {
                e.preventDefault();
                if (!activeProfilId) {
                    Swal.fire('Warning', 'Pilih profil gaji dahulu', 'warning');
                    return;
                }
                const file = $('#uploadDetailFile').get(0)?.files?.[0];
                if (!file) {
                    Swal.fire('Warning', 'Pilih file upload terlebih dahulu', 'warning');
                    return;
                }

                const formData = new FormData();
                formData.append('file', file);

                $.ajax({
                    url: `{{ url('/master-profil-gaji') }}/${activeProfilId}/details/upload`,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false
                }).done((resp) => {
                    uploadDetailModal.hide();
                    loadDetails();
                    loadProfiles();
                    const errorLines = Array.isArray(resp?.errors) && resp.errors.length
                        ? `<div class="text-start mt-2"><small>${resp.errors.map((x) => String(x)
                            .replace(/&/g, '&amp;')
                            .replace(/</g, '&lt;')
                            .replace(/>/g, '&gt;')
                            .replace(/"/g, '&quot;')
                            .replace(/'/g, '&#39;')).join('<br>')}</small></div>`
                        : '';
                    Swal.fire({
                        icon: 'success',
                        title: 'Upload selesai',
                        html: `${resp?.message || 'Upload komponen selesai.'}${errorLines}`
                    });
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Upload komponen gagal', 'error'));
            });

            $('#detailTable').on('click', '.btn-detail-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Delete detail komponen?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-profil-gaji/details') }}/${id}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        loadDetails();
                        loadProfiles();
                        Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
                });
            });

            $.when(loadRefs()).always(loadProfiles);
        });
    </script>
@endpush