@extends('layouts.main')

@section('title', 'Peningkatan Mutu')

@section('styles')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
/* scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
</style>
@endsection

@section('content')

<div class="grid grid-cols-1 lg:grid-cols-12 gap-0 min-h-[calc(100vh-73px)] bg-slate-50">
    
    <!-- ── LEFT: Indikator List (Sidebar) ── -->
    <div class="lg:col-span-4 xl:col-span-3 bg-white border-r border-slate-200 flex flex-col h-full overflow-hidden">
        <div class="p-4 sm:p-5 border-b border-slate-200 bg-white">
            <div class="flex items-center justify-between gap-3">
                <div class="min-w-0 flex-1">
                    <h2 class="text-xs sm:text-sm font-bold text-slate-800 uppercase tracking-wider truncate">Indikator Mutu</h2>
                    <p class="text-xs text-slate-500 mt-0.5">0 terdaftar</p>
                </div>
                <a href="master-mutu.php" 
                   class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white text-xs font-semibold rounded-lg shadow-sm transition-all flex-shrink-0"
                   title="Kelola Master Data Mutu">
                    <svg class="w-3.5 h-3.5" 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>+ Master Mutu</span>
                </a>
            </div>
        </div>

        <!-- ── Filter Unit / Ruangan & Kategori Indikator ── -->
        <div class="p-3.5 bg-slate-50 border-b border-slate-200 space-y-3">
            <!-- 1. Pilih Unit / Ruangan -->
            <div>
                <label for="filterUnit" class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1 flex items-center justify-between">
                    <span class="inline-flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5 text-blue-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M3 7v14M21 7v14M6 11h4M6 15h4M14 11h4M14 15h4M9 3h6v4H9z"/></svg>
                        Pilih Unit / Ruangan
                    </span>
                                    </label>
                <div class="relative">
                    <select id="filterUnit" onchange="applyFilters()" class="w-full pl-3 pr-8 py-2 bg-white border border-slate-300 rounded-lg text-xs font-semibold text-slate-800 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none appearance-none transition-all shadow-sm cursor-pointer hover:border-slate-400">
                        <option value="">-- Semua Unit --</option>
                                            </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2.5 text-slate-500">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
                    </div>
                </div>
            </div>

            <!-- 2. Pilih Kategori Indikator Mutu -->
            <div>
                <label for="filterKategori" class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1 flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5 text-amber-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h7"/></svg>
                    Pilih Kategori Indikator
                </label>
                <div class="relative">
                    <select id="filterKategori" onchange="applyFilters()" class="w-full pl-3 pr-8 py-2 bg-white border border-slate-300 rounded-lg text-xs font-semibold text-slate-800 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none appearance-none transition-all shadow-sm cursor-pointer hover:border-slate-400">
                        <option value="">-- Semua Kategori --</option>
                                                <option value="Indikator Nasional Mutu (INM)" >
                            Indikator Nasional Mutu (INM)                        </option>
                                                <option value="Indikator Mutu Prioritas Rumah Sakit (IMPRS)" >
                            Indikator Mutu Prioritas Rumah Sakit (IMPRS)                        </option>
                                                <option value="Indikator Mutu Unit (IMU)" >
                            Indikator Mutu Unit (IMU)                        </option>
                                            </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2.5 text-slate-500">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="flex-1 overflow-y-auto p-3 space-y-2 max-h-[260px] lg:max-h-none">
                        <div class="p-6 text-center text-slate-400 my-4 bg-slate-50 rounded-xl border border-dashed border-slate-300">
                <svg class="w-10 h-10 mx-auto stroke-slate-300 mb-2" viewBox="0 0 24 24" fill="none" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                <p class="text-xs font-semibold text-slate-600">Belum ada indikator mutu untuk unit ini.</p>
                <button type="button" onclick="openMasterModal('')" class="mt-2.5 inline-flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 font-bold">
                    <span>+ Tambah Indikator Baru</span>
                </button>
            </div>
                    </div>
    </div>

    <!-- ── RIGHT: Main Content Panel ── -->
    <div class="lg:col-span-8 xl:col-span-9 p-4 sm:p-6 overflow-y-auto space-y-6">
        
        <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">

            <!-- ════ FORM PANEL ════ -->
            <div class="bg-white border border-slate-200 rounded-2xl p-5 sm:p-6 shadow-sm">
                <div class="text-sm sm:text-base font-bold text-slate-900 pb-3 mb-5 border-b border-slate-100 flex items-center gap-2">
                    <span>📋</span> Koleksi Data Indikator Klinis
                </div>

                                <div class="text-center py-16 text-slate-400">
                    <svg class="w-12 h-12 mx-auto stroke-slate-300" viewBox="0 0 24 24" fill="none" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg>
                    <p class="mt-3 text-sm">Pilih indikator dari daftar kiri</p>
                </div>
                            </div>

            <!-- ════ CHART PANEL ════ -->
            <div class="bg-white border border-slate-200 rounded-2xl p-5 sm:p-6 shadow-sm flex flex-col justify-between space-y-4">
                <div>
                    <div class="flex items-center justify-between pb-3 mb-4 border-b border-slate-100">
                        <div class="text-sm sm:text-base font-bold text-slate-900 flex items-center gap-2">
                            <span class="text-lg">📈</span>
                            <span>Tren Indikator Bulanan (2026)</span>
                        </div>
                        <span class="text-xs font-semibold px-2.5 py-1 bg-blue-50 text-blue-700 rounded-lg border border-blue-200 shadow-2xs">
                            Target: ≥ 85%
                        </span>
                    </div>

                                        <div class="text-center py-16 text-slate-400">
                        <svg class="w-12 h-12 mx-auto stroke-slate-300" viewBox="0 0 24 24" fill="none" stroke-width="1.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                        <p class="mt-3 text-sm">Belum ada data tren. Isi form dan simpan indikator.</p>
                    </div>
                                    </div>
            </div>
        </div>

        <!-- ════ HISTORY TABLE ════ -->
        
    </div>
</div>

<!-- Toast -->
<div class="toast" id="toastMsg"></div>

<!-- Modal Master Indikator (Tambah / Edit) -->
<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:520px;padding:0;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);overflow:hidden;animation:modalIn .25s ease;">
        <!-- Header -->
        <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;" onmouseover="this.style.background='rgba(255,255,255,0.3)'" onmouseout="this.style.background='rgba(255,255,255,0.15)'">
                <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>
        <!-- Body -->
        <form id="formMaster" style="padding:24px;">
            <input type="hidden" name="master_id" id="master_id" value="">
            <!-- Judul -->
            <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;transition:border-color .2s,box-shadow .2s;box-sizing:border-box;"
                    onfocus="this.style.borderColor='#3b82f6';this.style.boxShadow='0 0 0 3px rgba(59,130,246,0.1)';this.style.background='#fff'"
                    onblur="this.style.borderColor='#e2e8f0';this.style.boxShadow='none';this.style.background='#f8fafc'">
            </div>
            <!-- Definisi -->
            <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="2"
                    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;transition:border-color .2s,box-shadow .2s;box-sizing:border-box;"
                    onfocus="this.style.borderColor='#3b82f6';this.style.boxShadow='0 0 0 3px rgba(59,130,246,0.1)';this.style.background='#fff'"
                    onblur="this.style.borderColor='#e2e8f0';this.style.boxShadow='none';this.style.background='#f8fafc'"></textarea>
            </div>
            <!-- Pengertian Numerator & Denominator -->
            <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;">Numerator (N)</label>
                    <textarea name="pengertian_numerator" id="master_num" placeholder="Definisi/Pengertian Numerator..." rows="2"
                        style="width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:13px;color:#0f172a;background:#f8fafc;outline:none;resize:vertical;font-family:inherit;transition:border-color .2s,box-shadow .2s;box-sizing:border-box;"
                        onfocus="this.style.borderColor='#3b82f6';this.style.boxShadow='0 0 0 3px rgba(59,130,246,0.1)';this.style.background='#fff'"
                        onblur="this.style.borderColor='#e2e8f0';this.style.boxShadow='none';this.style.background='#f8fafc'"></textarea>
                </div>
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;">Denominator (D)</label>
                    <textarea name="pengertian_denominator" id="master_den" placeholder="Definisi/Pengertian Denominator..." rows="2"
                        style="width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:13px;color:#0f172a;background:#f8fafc;outline:none;resize:vertical;font-family:inherit;transition:border-color .2s,box-shadow .2s;box-sizing:border-box;"
                        onfocus="this.style.borderColor='#3b82f6';this.style.boxShadow='0 0 0 3px rgba(59,130,246,0.1)';this.style.background='#fff'"
                        onblur="this.style.borderColor='#e2e8f0';this.style.boxShadow='none';this.style.background='#f8fafc'"></textarea>
                </div>
            </div>
            <!-- Target & Unit -->
            <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;transition:border-color .2s,box-shadow .2s;box-sizing:border-box;"
                        onfocus="this.style.borderColor='#3b82f6';this.style.boxShadow='0 0 0 3px rgba(59,130,246,0.1)';this.style.background='#fff'"
                        onblur="this.style.borderColor='#e2e8f0';this.style.boxShadow='none';this.style.background='#f8fafc'">
                </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;transition:border-color .2s,box-shadow .2s;box-sizing:border-box;">
                        <option value="">-- Pilih Unit / Ruangan --</option>
                                            </select>
                </div>
            </div>
            <!-- Buttons -->
            <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;transition:all .2s;"
                    onmouseover="this.style.background='#f1f5f9';this.style.borderColor='#cbd5e1'"
                    onmouseout="this.style.background='#fff';this.style.borderColor='#e2e8f0'">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);transition:all .2s;"
                    onmouseover="this.style.boxShadow='0 6px 20px rgba(37,99,235,0.4)';this.style.transform='translateY(-1px)'"
                    onmouseout="this.style.boxShadow='0 4px 12px rgba(37,99,235,0.3)';this.style.transform='translateY(0)'">Simpan Master</button>
            </div>
        </form>
    </div>
</div>
<style>
@keyframes modalIn { from { opacity:0; transform:scale(0.95) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
</style>


@endsection

@section('scripts')
<script>
// ── Filter Unit & Kategori Handler ──────────────────────────
function applyFilters() {
    const unit = document.getElementById('filterUnit')?.value || '';
    const kat  = document.getElementById('filterKategori')?.value || '';
    const params = [];
    if (unit) params.push('unit=' + encodeURIComponent(unit));
    if (kat)  params.push('kategori=' + encodeURIComponent(kat));
    window.location.href = 'peningkatan-mutu.php' + (params.length ? '?' + params.join('&') : '');
}
// ── Chart.js Line Chart Instance & Config ───────────────────
let trendChartInstance = null;

function renderTrendChart(labels, dataCapaian, targetVal) {
    const canvas = document.getElementById('trendChart');
    if (!canvas || typeof Chart === 'undefined') return;
    const ctx = canvas.getContext('2d');

    const pointBgColors = dataCapaian.map(v => v >= targetVal ? '#36a2eb' : '#ff6384');

    const data = {
        labels: labels,
        datasets: [
            {
                label: 'Capaian Mutu (%)',
                data: dataCapaian,
                borderColor: '#36a2eb',
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderWidth: 3,
                tension: 0.2,
                pointRadius: 6,
                pointHoverRadius: 9,
                pointBackgroundColor: pointBgColors,
                pointBorderColor: '#ffffff',
                pointBorderWidth: 2,
                fill: false
            },
            {
                label: 'Target Mutu (' + targetVal + '%)',
                data: labels.map(() => targetVal),
                borderColor: '#ff6384',
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderWidth: 2,
                borderDash: [6, 6],
                pointRadius: 0,
                fill: false
            }
        ]
    };

    const config = {
        type: 'line',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        usePointStyle: true,
                        font: { size: 12, weight: '600', family: 'Inter, sans-serif' },
                        color: '#334155'
                    }
                },
                title: {
                    display: true,
                    text: 'Chart.js Line Chart — Tren Capaian Indikator',
                    font: { size: 14, weight: '700', family: 'Inter, sans-serif' },
                    color: '#1e293b',
                    padding: { bottom: 12 }
                },
                tooltip: {
                    backgroundColor: 'rgba(15, 23, 42, 0.90)',
                    titleFont: { size: 13, weight: '700' },
                    titleColor: '#f8fafc',
                    bodyFont: { size: 12, weight: '500' },
                    bodyColor: '#cbd5e1',
                    padding: 12,
                    cornerRadius: 10,
                    callbacks: {
                        label: function(ctx) {
                            if (ctx.datasetIndex === 0) {
                                const isPass = ctx.parsed.y >= targetVal;
                                return ` Capaian: ${ctx.parsed.y}% (${isPass ? '✅ Tercapai' : '❌ Tidak Tercapai'})`;
                            }
                            return ` Target: ${ctx.parsed.y}%`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    suggestedMin: 0,
                    suggestedMax: 100,
                    ticks: {
                        callback: v => v + '%',
                        font: { size: 11, weight: '600' }
                    },
                    grid: { color: '#e2e8f0' }
                },
                x: {
                    ticks: { font: { size: 11, weight: '600' } },
                    grid: { color: '#f1f5f9' }
                }
            }
        }
    };

    if (trendChartInstance) {
        trendChartInstance.data = data;
        trendChartInstance.options = config.options;
        trendChartInstance.update();
    } else {
        trendChartInstance = new Chart(ctx, config);
    }
}


// ── Realtime Hitung Hasil & Show/Hide Formula ────────────────
const inputN       = document.getElementById('inputN');
const inputD       = document.getElementById('inputD');
const hasilVal     = document.getElementById('hasilValue');
const hasilBox     = document.getElementById('hasilBox');
const hasilContainer = document.getElementById('hasilContainer');
const hiddenSt     = document.getElementById('hiddenStatus');
const btnTercapai  = document.getElementById('btnTercapai');
const btnTidak     = document.getElementById('btnTidak');
const target       = 85;

// Elements Kategori Pengamatan
const inputSesuai       = document.getElementById('inputSesuai');
const inputTidakSesuai  = document.getElementById('inputTidakSesuai');
const inputTotalSampling= document.getElementById('inputTotalSampling');

function syncPengamatanToFormula() {
    const s = parseFloat(inputSesuai?.value) || 0;
    const ts = parseFloat(inputTidakSesuai?.value) || 0;
    const total = s + ts;

    if (inputTotalSampling) {
        inputTotalSampling.value = (inputSesuai?.value !== '' || inputTidakSesuai?.value !== '') ? total : '';
    }

    // Set Numerator (N) = Jumlah Sesuai (Skor 1)
    if (inputN && (inputSesuai?.value !== '' || inputTidakSesuai?.value !== '')) {
        inputN.value = s;
    }

    // Set Denominator (D) = Total Sampling
    if (inputD && total > 0) {
        inputD.value = total;
    }

    hitungHasil();
}

inputSesuai?.addEventListener('input', syncPengamatanToFormula);
inputTidakSesuai?.addEventListener('input', syncPengamatanToFormula);

function hitungHasil() {
    const nVal = inputN?.value ? inputN.value.trim() : '';
    const dVal = inputD?.value ? inputD.value.trim() : '';
    const n    = parseFloat(nVal) || 0;
    const d    = parseFloat(dVal) || 0;

    if (nVal !== '' && dVal !== '' && d > 0) {
        const h = ((n / d) * 100).toFixed(2);
        if (hasilVal) hasilVal.textContent = h + '%';
        
        // Munculkan box Hasil Formula setelah angka diisi
        if (hasilContainer) hasilContainer.classList.remove('hidden');

        const isOk = parseFloat(h) >= target;
        if (hasilBox) {
            hasilBox.style.background = isOk
                ? 'linear-gradient(135deg,#16a34a,#15803d)'
                : 'linear-gradient(135deg,#ef4444,#dc2626)';
        }
        setStatus(isOk ? 'Tercapai' : 'Tidak Tercapai');
    } else {
        // Sembunyikan Hasil Formula jika belum ada angka N & D
        if (hasilContainer) hasilContainer.classList.add('hidden');
    }
}
inputN?.addEventListener('input', hitungHasil);
inputD?.addEventListener('input', hitungHasil);

// ── Status Toggle ────────────────────────────────────────────
function setStatus(val) {
    if (!hiddenSt) return;
    hiddenSt.value = val;
    if (btnTercapai) { btnTercapai.classList.toggle('active', val === 'Tercapai'); }
    if (btnTidak)    { btnTidak.classList.toggle('active', val === 'Tidak Tercapai'); }
}

// ── Tanggal Harian Collect Data Flatpickr ─────────────────────
if (document.getElementById('inputTanggalHarian')) {
    const inputHarian = document.getElementById('inputTanggalHarian');
    const badgeStatus = document.getElementById('badgeStatusHarian');
    const hintTerlambat = document.getElementById('hintTerlambat');

    function checkHarianStatus(dateObj) {
        if (!dateObj) return;

        const today = new Date();
        today.setHours(0,0,0,0);
        
        const selDate = new Date(dateObj);
        selDate.setHours(0,0,0,0);

        let targetRefDate = today;
        const periodeInput = document.getElementById('inputPeriodeTanggal');
        if (periodeInput && periodeInput.value) {
            const pDate = new Date(periodeInput.value);
            if (!isNaN(pDate.getTime())) {
                pDate.setHours(0,0,0,0);
                if (pDate > selDate) {
                    targetRefDate = pDate;
                }
            }
        }

        const diffDays = Math.floor((targetRefDate - selDate) / (1000 * 60 * 60 * 24));

        if (diffDays > 0) {
            // Lewat 1 hari atau lebih -> MERAH
            inputHarian.classList.remove('bg-white', 'border-slate-300', 'bg-emerald-50', 'border-emerald-400');
            inputHarian.classList.add('!bg-red-50', '!border-red-500', '!text-red-700', 'font-bold');
            
            if (badgeStatus) {
                badgeStatus.className = 'inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-red-100 text-red-800 border border-red-300';
                badgeStatus.innerHTML = `🔴 Lewat ${diffDays} Hari (Terlambat)`;
            }
            if (hintTerlambat) hintTerlambat.classList.remove('hidden');
        } else {
            // Tepat waktu / Hari ini -> HIJAU
            inputHarian.classList.remove('!bg-red-50', '!border-red-500', '!text-red-700');
            inputHarian.classList.add('bg-white', 'border-slate-300');
            
            if (badgeStatus) {
                badgeStatus.className = 'inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-emerald-100 text-emerald-800 border border-emerald-200';
                badgeStatus.innerHTML = '🟢 Tepat Waktu';
            }
            if (hintTerlambat) hintTerlambat.classList.add('hidden');
        }
    }

    const fpHarian = flatpickr('#inputTanggalHarian', {
        locale: 'id',
        dateFormat: 'Y-m-d',
        altInput: true,
        altFormat: 'd M Y',
        onChange: function(selectedDates) {
            if (selectedDates.length > 0) {
                checkHarianStatus(selectedDates[0]);
                const d = selectedDates[0];
                if (document.getElementById('hiddenBulan')) document.getElementById('hiddenBulan').value = d.getMonth() + 1;
                if (document.getElementById('hiddenTahun')) document.getElementById('hiddenTahun').value = d.getFullYear();
            }
        }
    });

    if (fpHarian && fpHarian.selectedDates.length > 0) {
        checkHarianStatus(fpHarian.selectedDates[0]);
    }

    window._recheckHarian = function() {
        if (fpHarian && fpHarian.selectedDates.length > 0) {
            checkHarianStatus(fpHarian.selectedDates[0]);
        }
    };
}

// ── Periode Tanggal Flatpickr (Data Mutu Form) ───────────────
const defaultBulan = "9";
const defaultTahun = "2026";
const defaultDateStr = `${defaultTahun}-${String(defaultBulan).padStart(2, '0')}-01`;

let fpPeriode = null;
if (document.getElementById('inputPeriodeTanggal')) {
    fpPeriode = flatpickr('#inputPeriodeTanggal', {
        locale: 'id',
        dateFormat: 'Y-m-d',
        altInput: true,
        altFormat: 'd M Y',
        defaultDate: defaultDateStr,
        onChange: function(selectedDates) {
            if (selectedDates.length > 0) {
                const d = selectedDates[0];
                document.getElementById('hiddenBulan').value = d.getMonth() + 1;
                document.getElementById('hiddenTahun').value = d.getFullYear();
                if (window._recheckHarian) window._recheckHarian();
            }
        }
    });
}

// ── Deadline Flatpickr ───────────────────────────────────────
if (document.getElementById('inputDeadline')) {
    flatpickr('#inputDeadline', {
        locale: 'id',
        dateFormat: 'Y-m-d',
        altInput: true,
        altFormat: 'd M Y',
        minDate: 'today',
    });
}

// ── Table Filter Periode Flatpickr ────────────────────────────
if (document.getElementById('tablePeriodePicker')) {
    const btnClearDate = document.getElementById('btnClearTableDate');
    const fpTable = flatpickr('#tablePeriodePicker', {
        locale: 'id',
        dateFormat: 'Y-m-d',
        altInput: true,
        altFormat: 'M Y',
        onChange: function(selectedDates) {
            if (selectedDates.length > 0) {
                const d = selectedDates[0];
                const monthNames = ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agt','Sep','Okt','Nov','Des'];
                const monthName = monthNames[d.getMonth()];
                const yearStr = d.getFullYear();
                const filterTerm = `${monthName} ${yearStr}`;
                
                // Trigger search on datatable
                const dtSearch = document.querySelector('.shadcn-dt-search');
                if (dtSearch) {
                    dtSearch.value = filterTerm;
                    dtSearch.dispatchEvent(new Event('input', { bubbles: true }));
                }
                if (btnClearDate) btnClearDate.classList.remove('hidden');
            }
        }
    });

    btnClearDate?.addEventListener('click', function() {
        fpTable.clear();
        const dtSearch = document.querySelector('.shadcn-dt-search');
        if (dtSearch) {
            dtSearch.value = '';
            dtSearch.dispatchEvent(new Event('input', { bubbles: true }));
        }
        btnClearDate.classList.add('hidden');
    });
}

// ── Form Submit via AJAX ──────────────────────────────────────
const form   = document.getElementById('formIndikator');
const btnSave = document.getElementById('btnSave');
form?.addEventListener('submit', async function(e) {
    e.preventDefault();
    btnSave.disabled = true;
    btnSave.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> Menyimpan...';

    try {
        const fd = new FormData(form);
        const res = await fetch('api/peningkatan-mutu.php', { method: 'POST', body: fd });
        const data = await res.json();
        if (data.success) {
            showToast('✓ ' + data.message, 'success');
            setTimeout(() => location.reload(), 1400);
        } else {
            showToast('✗ ' + (data.message || 'Gagal menyimpan'), 'error');
        }
    } catch(err) {
        showToast('✗ Koneksi gagal.', 'error');
    }

    btnSave.disabled = false;
    btnSave.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg> Simpan Indikator';
});

function resetForm() { 
    form?.reset();
    if (fpPeriode) {
        fpPeriode.setDate(defaultDateStr);
    }
    const hasilContainer = document.getElementById('hasilContainer');
    if (hasilContainer) hasilContainer.classList.add('hidden');
}

// ── Master CRUD Handlers ─────────────────────────────────────
const modalMaster = document.getElementById('modalMaster');
const formMaster  = document.getElementById('formMaster');

function openMasterModal(defaultUnit = '') {
    document.getElementById('modalMasterTitle').textContent = 'Tambah Master Indikator Mutu';
    document.getElementById('master_id').value = '';
    document.getElementById('master_judul').value = '';
    document.getElementById('master_def').value = '';
    document.getElementById('master_num').value = '';
    document.getElementById('master_den').value = '';
    document.getElementById('master_target').value = '85.00';
    document.getElementById('master_unit').value = defaultUnit || "" || '';
    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_judul').value = ind.judul_indikator;
    document.getElementById('master_def').value = ind.definisi_operasional || '';
    document.getElementById('master_num').value = ind.pengertian_numerator || '';
    document.getElementById('master_den').value = ind.pengertian_denominator || '';
    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(() => {
                if (!masterId && data.id) {
                    location.href = 'peningkatan-mutu.php?id=' + data.id;
                } else {
                    location.reload();
                }
            }, 1200);
        } 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 indikator mutu master 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.href = 'peningkatan-mutu.php', 1200);
        } else {
            showToast('✗ ' + (data.message || 'Gagal menghapus master'), 'error');
        }
    } catch(err) {
        showToast('✗ Koneksi ke server gagal.', 'error');
    }
}

// ── Toast ─────────────────────────────────────────────────────
function showToast(msg, type='success') {
    const t = document.getElementById('toastMsg');
    t.textContent = msg;
    t.className = 'toast ' + type + ' show';
    setTimeout(() => t.classList.remove('show'), 3000);
}
</script>
@endsection