@extends('layouts.main')

@section('title', 'Master Data Mutu')

@section('styles')
<style>
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
@keyframes modalIn { from { opacity:0; transform:scale(0.95) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
</style>
@endsection

@section('content')
<div class="space-y-6">
    
    <!-- ── Header & Tab Switcher ── -->
    <div class="bg-white border border-slate-200 rounded-2xl p-5 sm:p-6 shadow-sm flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2.5">
                <span class="p-2.5 bg-blue-100 text-blue-700 rounded-xl">
                    <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                </span>
                <div>
                    <h2 class="text-lg sm:text-xl font-extrabold text-slate-800 tracking-tight">Master Data Mutu</h2>
                    <p class="text-xs sm:text-sm text-slate-500 mt-0.5">Kelola master data Indikator Mutu, Unit / Ruangan, dan Kategori Indikator.</p>
                </div>
            </div>
        </div>

        <!-- Navigation Tabs -->
        <div class="flex items-center p-1 bg-slate-100 rounded-xl border border-slate-200 w-full md:w-auto">
            <a href="master-mutu.php?tab=indikator" 
               class="flex-1 md:flex-initial px-4 py-2 text-xs sm:text-sm font-bold rounded-lg transition-all text-center flex items-center justify-center gap-2 text-slate-600 hover:text-slate-900">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                <span>Master Indikator</span>
                <span class="px-2 py-0.5 text-[11px] bg-blue-50 text-blue-700 rounded-full font-extrabold"></span>
            </a>
            <a href="master-mutu.php?tab=unit" 
               class="flex-1 md:flex-initial px-4 py-2 text-xs sm:text-sm font-bold rounded-lg transition-all text-center flex items-center justify-center gap-2 text-slate-600 hover:text-slate-900">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M3 7v14M21 7v14M6 11h4M6 15h4M14 11h4M14 15h4M9 3h6v4H9z"/></svg>
                <span>Master Unit</span>
                <span class="px-2 py-0.5 text-[11px] bg-emerald-50 text-emerald-700 rounded-full font-extrabold"></span>
            </a>
            <a href="master-mutu.php?tab=kategori" 
               class="flex-1 md:flex-initial px-4 py-2 text-xs sm:text-sm font-bold rounded-lg transition-all text-center flex items-center justify-center gap-2 text-slate-600 hover:text-slate-900">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h7"/></svg>
                <span>Master Kategori</span>
                <span class="px-2 py-0.5 text-[11px] bg-amber-50 text-amber-700 rounded-full font-extrabold">0</span>
            </a>
        </div>
    </div>

    <!-- ════════════════════════════════════════════════════════════════ -->
    <!-- TAB 1: MASTER INDIKATOR                                         -->
    <!-- ════════════════════════════════════════════════════════════════ -->
    
    <div class="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
        <div class="p-4 sm:p-5 bg-slate-50/80 border-b border-slate-200 flex items-center justify-between">
            <div>
                <h3 class="text-sm sm:text-base font-bold text-slate-900">Daftar Kategori Indikator Mutu Terdaftar</h3>
                <p class="text-xs text-slate-500">Kategori / kelompok penggolongan indikator mutu rumah sakit (INM, IMPRS, IMU, dll.).</p>
            </div>
            <button type="button" onclick="openKategoriModal()" 
                    class="inline-flex items-center gap-2 px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white text-xs sm:text-sm font-bold rounded-xl shadow-md transition-all">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                <span>+ Tambah Kategori</span>
            </button>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs sm:text-sm border-collapse" data-shadcn-table>
                <thead>
                    <tr class="bg-slate-100/70 text-slate-600 font-bold uppercase tracking-wider text-[11px] border-b border-slate-200">
                        <th class="py-3.5 px-4 w-12 text-center">No</th>
                        <th class="py-3.5 px-4 min-w-[240px]">Nama Kategori Indikator</th>
                        <th class="py-3.5 px-4 w-28 text-center">Kode</th>
                        <th class="py-3.5 px-4 min-w-[260px]">Deskripsi</th>
                        <th class="py-3.5 px-4 w-36 text-center">Jumlah Indikator</th>
                        <th class="py-3.5 px-4 w-28 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                                        <tr>
                        <td colspan="6" class="py-8 text-center text-slate-400 italic">
                            Belum ada kategori indikator terdaftar. Klik "+ Tambah Kategori" untuk menambahkan.
                        </td>
                    </tr>
                                    </tbody>
            </table>
        </div>
    </div>

    
</div>

<!-- Toast -->
<div id="toastMsg" class="toast" style="position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;color:#fff;display:none;z-index:9999;box-shadow:0 10px 25px rgba(0,0,0,0.15);transition:all .3s;"></div>

<!-- Modal Master Indikator -->
<div id="modalMaster" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,0.55);backdrop-filter:blur(4px);z-index:9999;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:16px;width:92%;max-width:540px;padding:0;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);overflow:hidden;animation:modalIn .25s ease;">
        <div style="display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:linear-gradient(135deg,#1e3a5f,#2563eb);color:#fff;">
            <h3 id="modalMasterTitle" style="font-size:16px;font-weight:700;margin:0;color:#fff;">Tambah Master Indikator Mutu</h3>
            <button type="button" onclick="closeMasterModal()" style="background:rgba(255,255,255,0.15);border:none;cursor:pointer;color:#fff;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .2s;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <form id="formMaster" style="padding:24px;">
            <input type="hidden" name="master_id" id="master_id" value="">
            
            <div style="margin-bottom:18px;">
                <label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;">Kategori / Group Indikator <span style="color:#ef4444">*</span></label>
                <select name="kategori" id="master_kategori" required
                        style="width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;color:#0f172a;background:#f8fafc;outline:none;box-sizing:border-box;">
                    <option value="">-- Pilih Kategori Indikator --</option>
                                    </select>
            </div>

            <div style="margin-bottom:18px;">
                <label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;">Judul Indikator Mutu <span style="color:#ef4444">*</span></label>
                <input type="text" name="judul_indikator" id="master_judul" placeholder="Contoh: Kepatuhan Hand Hygiene..." required
                    style="width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;color:#0f172a;background:#f8fafc;outline:none;box-sizing:border-box;">
            </div>

            <div style="margin-bottom:18px;">
                <label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;">Definisi Operasional</label>
                <textarea name="definisi_operasional" id="master_def" placeholder="Definisi operasional pengukuran..." rows="3"
                    style="width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;color:#0f172a;background:#f8fafc;outline:none;resize:vertical;font-family:inherit;box-sizing:border-box;"></textarea>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;">
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;">Target (%) <span style="color:#ef4444">*</span></label>
                    <input type="number" step="0.01" name="target_persen" id="master_target" placeholder="85.00" required
                        style="width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;color:#0f172a;background:#f8fafc;outline:none;box-sizing:border-box;">
                </div>
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;">Unit / Ruangan <span style="color:#ef4444">*</span></label>
                    <select name="unit" id="master_unit" required
                        style="width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;color:#0f172a;background:#f8fafc;outline:none;box-sizing:border-box;">
                        <option value="">-- Pilih Unit / Ruangan --</option>
                                            </select>
                </div>
            </div>

            <div style="display:flex;justify-content:flex-end;gap:10px;padding-top:16px;border-top:1px solid #f1f5f9;">
                <button type="button" onclick="closeMasterModal()"
                    style="padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;">Batal</button>
                <button type="submit" id="btnSaveMaster"
                    style="padding:10px 24px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,0.3);">Simpan Master</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Unit -->
<div id="modalUnit" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,0.55);backdrop-filter:blur(4px);z-index:9999;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:16px;width:92%;max-width:480px;padding:0;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);overflow:hidden;animation:modalIn .25s ease;">
        <div style="display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:linear-gradient(135deg,#065f46,#059669);color:#fff;">
            <h3 id="modalUnitTitle" style="font-size:16px;font-weight:700;margin:0;color:#fff;">Tambah Master Unit / Ruangan</h3>
            <button type="button" onclick="closeUnitModal()" style="background:rgba(255,255,255,0.15);border:none;cursor:pointer;color:#fff;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .2s;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <form id="formUnit" style="padding:24px;">
            <input type="hidden" name="unit_id" id="unit_id" value="">
            
            <div style="margin-bottom:18px;">
                <label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;">Nama Unit / Ruangan <span style="color:#ef4444">*</span></label>
                <input type="text" name="nama_unit" id="unit_nama" placeholder="Contoh: Keperawatan & Rawat Inap, IGD..." required
                    style="width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;color:#0f172a;background:#f8fafc;outline:none;box-sizing:border-box;">
            </div>

            <div style="margin-bottom:18px;">
                <label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;">Deskripsi / Keterangan</label>
                <textarea name="deskripsi" id="unit_deskripsi" placeholder="Keterangan cakupan pelayanan unit..." rows="3"
                    style="width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;color:#0f172a;background:#f8fafc;outline:none;resize:vertical;font-family:inherit;box-sizing:border-box;"></textarea>
            </div>

            <div style="display:flex;justify-content:flex-end;gap:10px;padding-top:16px;border-top:1px solid #f1f5f9;">
                <button type="button" onclick="closeUnitModal()"
                    style="padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;">Batal</button>
                <button type="submit" id="btnSaveUnit"
                    style="padding:10px 24px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:linear-gradient(135deg,#059669,#047857);color:#fff;box-shadow:0 4px 12px rgba(5,150,105,0.3);">Simpan Unit</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Kategori -->
<div id="modalKategori" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,0.55);backdrop-filter:blur(4px);z-index:9999;align-items:center;justify-content:center;">
    <div style="background:#fff;border-radius:16px;width:92%;max-width:480px;padding:0;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);overflow:hidden;animation:modalIn .25s ease;">
        <div style="display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:linear-gradient(135deg,#92400e,#d97706);color:#fff;">
            <h3 id="modalKategoriTitle" style="font-size:16px;font-weight:700;margin:0;color:#fff;">Tambah Master Kategori Indikator</h3>
            <button type="button" onclick="closeKategoriModal()" style="background:rgba(255,255,255,0.15);border:none;cursor:pointer;color:#fff;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .2s;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <form id="formKategori" style="padding:24px;">
            <input type="hidden" name="kategori_id" id="kategori_id" value="">
            
            <div style="margin-bottom:18px;">
                <label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;">Nama Kategori Indikator <span style="color:#ef4444">*</span></label>
                <input type="text" name="nama_kategori" id="kat_nama" placeholder="Contoh: Indikator Nasional Mutu (INM)..." required
                    style="width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;color:#0f172a;background:#f8fafc;outline:none;box-sizing:border-box;">
            </div>

            <div style="margin-bottom:18px;">
                <label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;">Kode Singkatan (Opsional)</label>
                <input type="text" name="kode" id="kat_kode" placeholder="Contoh: INM, IMPRS, IMU..."
                    style="width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;color:#0f172a;background:#f8fafc;outline:none;box-sizing:border-box;">
            </div>

            <div style="margin-bottom:18px;">
                <label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;">Deskripsi / Keterangan</label>
                <textarea name="deskripsi" id="kat_deskripsi" placeholder="Penjelasan cakupan kategori indikator..." rows="3"
                    style="width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;color:#0f172a;background:#f8fafc;outline:none;resize:vertical;font-family:inherit;box-sizing:border-box;"></textarea>
            </div>

            <div style="display:flex;justify-content:flex-end;gap:10px;padding-top:16px;border-top:1px solid #f1f5f9;">
                <button type="button" onclick="closeKategoriModal()"
                    style="padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;">Batal</button>
                <button type="submit" id="btnSaveKategori"
                    style="padding:10px 24px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:linear-gradient(135deg,#d97706,#b45309);color:#fff;box-shadow:0 4px 12px rgba(217,119,6,0.3);">Simpan Kategori</button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('scripts')
<script>
// --- Master Indikator ---
const modalMaster = document.getElementById('modalMaster');
const formMaster  = document.getElementById('formMaster');

function openMasterModal() {
    document.getElementById('modalMasterTitle').textContent = 'Tambah Master Indikator Mutu';
    document.getElementById('master_id').value = '';
    document.getElementById('master_kategori').value = 'Indikator Nasional Mutu (INM)';
    document.getElementById('master_judul').value = '';
    document.getElementById('master_def').value = '';
    document.getElementById('master_target').value = '85.00';
    document.getElementById('master_unit').value = '';
    if (modalMaster) modalMaster.style.display = 'flex';
}

function editMaster(ind) {
    document.getElementById('modalMasterTitle').textContent = 'Edit Master Indikator Mutu';
    document.getElementById('master_id').value = ind.id;
    document.getElementById('master_kategori').value = ind.kategori || 'Indikator Nasional Mutu (INM)';
    document.getElementById('master_judul').value = ind.judul_indikator;
    document.getElementById('master_def').value = ind.definisi_operasional || '';
    document.getElementById('master_target').value = ind.target_persen;
    document.getElementById('master_unit').value = ind.unit || '';
    if (modalMaster) modalMaster.style.display = 'flex';
}

function closeMasterModal() {
    if (modalMaster) modalMaster.style.display = 'none';
}

formMaster?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('btnSaveMaster');
    btn.disabled = true;
    btn.textContent = 'Memproses...';

    const masterId = document.getElementById('master_id').value;
    const action = masterId ? 'update_master' : 'store_master';
    const fd = new FormData(formMaster);

    try {
        const res = await fetch('api/peningkatan-mutu.php?action=' + action, { method: 'POST', body: fd });
        const data = await res.json();
        if (data.success) {
            showToast('✓ ' + data.message, 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showToast('✗ ' + (data.message || 'Gagal menyimpan master'), 'error');
        }
    } catch(err) {
        showToast('✗ Koneksi ke server gagal.', 'error');
    }
    btn.disabled = false;
    btn.textContent = 'Simpan Master';
});

async function deleteMaster(id) {
    if (!confirm('Apakah Anda yakin ingin menghapus master indikator mutu ini beserta seluruh riwayat ukurnya?')) return;
    
    const fd = new FormData();
    fd.append('master_id', id);

    try {
        const res = await fetch('api/peningkatan-mutu.php?action=delete_master', { method: 'POST', body: fd });
        const data = await res.json();
        if (data.success) {
            showToast('✓ ' + data.message, 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showToast('✗ ' + (data.message || 'Gagal menghapus master'), 'error');
        }
    } catch(err) {
        showToast('✗ Koneksi ke server gagal.', 'error');
    }
}

// --- Master Unit ---
const modalUnit = document.getElementById('modalUnit');
const formUnit  = document.getElementById('formUnit');

function openUnitModal() {
    document.getElementById('modalUnitTitle').textContent = 'Tambah Master Unit / Ruangan';
    document.getElementById('unit_id').value = '';
    document.getElementById('unit_nama').value = '';
    document.getElementById('unit_deskripsi').value = '';
    if (modalUnit) modalUnit.style.display = 'flex';
}

function editUnit(u) {
    document.getElementById('modalUnitTitle').textContent = 'Edit Master Unit / Ruangan';
    document.getElementById('unit_id').value = u.id;
    document.getElementById('unit_nama').value = u.nama_unit;
    document.getElementById('unit_deskripsi').value = u.deskripsi || '';
    if (modalUnit) modalUnit.style.display = 'flex';
}

function closeUnitModal() {
    if (modalUnit) modalUnit.style.display = 'none';
}

formUnit?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('btnSaveUnit');
    btn.disabled = true;
    btn.textContent = 'Memproses...';

    const unitId = document.getElementById('unit_id').value;
    const action = unitId ? 'update_unit' : 'store_unit';
    const fd = new FormData(formUnit);

    try {
        const res = await fetch('api/master-unit.php?action=' + action, { method: 'POST', body: fd });
        const data = await res.json();
        if (data.success) {
            showToast('✓ ' + data.message, 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showToast('✗ ' + (data.message || 'Gagal menyimpan unit'), 'error');
        }
    } catch(err) {
        showToast('✗ Koneksi ke server gagal.', 'error');
    }
    btn.disabled = false;
    btn.textContent = 'Simpan Unit';
});

async function deleteUnit(id) {
    if (!confirm('Apakah Anda yakin ingin menghapus unit/ruangan ini?')) return;
    
    const fd = new FormData();
    fd.append('unit_id', id);

    try {
        const res = await fetch('api/master-unit.php?action=delete_unit', { method: 'POST', body: fd });
        const data = await res.json();
        if (data.success) {
            showToast('✓ ' + data.message, 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showToast('✗ ' + (data.message || 'Gagal menghapus unit'), 'error');
        }
    } catch(err) {
        showToast('✗ Koneksi ke server gagal.', 'error');
    }
}

// --- Master Kategori ---
const modalKategori = document.getElementById('modalKategori');
const formKategori  = document.getElementById('formKategori');

function openKategoriModal() {
    document.getElementById('modalKategoriTitle').textContent = 'Tambah Master Kategori Indikator';
    document.getElementById('kategori_id').value = '';
    document.getElementById('kat_nama').value = '';
    document.getElementById('kat_kode').value = '';
    document.getElementById('kat_deskripsi').value = '';
    if (modalKategori) modalKategori.style.display = 'flex';
}

function editKategori(cat) {
    document.getElementById('modalKategoriTitle').textContent = 'Edit Master Kategori Indikator';
    document.getElementById('kategori_id').value = cat.id;
    document.getElementById('kat_nama').value = cat.nama_kategori;
    document.getElementById('kat_kode').value = cat.kode || '';
    document.getElementById('kat_deskripsi').value = cat.deskripsi || '';
    if (modalKategori) modalKategori.style.display = 'flex';
}

function closeKategoriModal() {
    if (modalKategori) modalKategori.style.display = 'none';
}

formKategori?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('btnSaveKategori');
    btn.disabled = true;
    btn.textContent = 'Memproses...';

    const catId = document.getElementById('kategori_id').value;
    const action = catId ? 'update_kategori' : 'store_kategori';
    const fd = new FormData(formKategori);

    try {
        const res = await fetch('api/master-kategori.php?action=' + action, { method: 'POST', body: fd });
        const data = await res.json();
        if (data.success) {
            showToast('✓ ' + data.message, 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showToast('✗ ' + (data.message || 'Gagal menyimpan kategori'), 'error');
        }
    } catch(err) {
        showToast('✗ Koneksi ke server gagal.', 'error');
    }
    btn.disabled = false;
    btn.textContent = 'Simpan Kategori';
});

async function deleteKategori(id) {
    if (!confirm('Apakah Anda yakin ingin menghapus kategori indikator ini?')) return;
    
    const fd = new FormData();
    fd.append('kategori_id', id);

    try {
        const res = await fetch('api/master-kategori.php?action=delete_kategori', { method: 'POST', body: fd });
        const data = await res.json();
        if (data.success) {
            showToast('✓ ' + data.message, 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showToast('✗ ' + (data.message || 'Gagal menghapus kategori'), 'error');
        }
    } catch(err) {
        showToast('✗ Koneksi ke server gagal.', 'error');
    }
}

function showToast(msg, type='success') {
    const t = document.getElementById('toastMsg');
    t.textContent = msg;
    t.style.background = type === 'success' ? '#16a34a' : '#dc2626';
    t.style.display = 'block';
    setTimeout(() => t.style.display = 'none', 3000);
}
</script>
@endsection