@extends('layouts.main')

@section('title', 'Master Indikator 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 & Action Bar ── -->
    <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">
                <span class="p-2 bg-blue-100 text-blue-700 rounded-xl">
                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.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>
                <h2 class="text-lg sm:text-xl font-extrabold text-slate-800 tracking-tight">Master Indikator Mutu</h2>
            </div>
            <p class="text-xs sm:text-sm text-slate-500 mt-1">Kelola daftar indikator mutu rumah sakit berdasarkan kategori Indikator Nasional Mutu (INM), Prioritas RS (IMPRS), dan Unit (IMU).</p>
        </div>

        <div class="flex items-center gap-3 w-full md:w-auto">
            <button type="button" onclick="openMasterModal()" 
                    class="w-full md:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 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 Master Indikator</span>
            </button>
        </div>
    </div>

    <!-- ── Filter & Search Bar ── -->
    <div class="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm">
        <form method="GET" action="master-indikator.php" class="grid grid-cols-1 sm:grid-cols-12 gap-3 items-center">
            <!-- Search Keyword -->
            <div class="sm:col-span-6 relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                </div>
                <input type="text" name="q" value="" placeholder="Cari judul indikator, definisi, atau unit..." 
                       class="w-full pl-9 pr-3 py-2 bg-slate-50 border border-slate-300 rounded-xl text-xs sm:text-sm text-slate-800 focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all">
            </div>

            <!-- Filter Unit -->
            <div class="sm:col-span-4">
                <select name="unit" onchange="this.form.submit()" class="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-xl text-xs sm:text-sm font-medium text-slate-800 focus:ring-2 focus:ring-blue-500 outline-none cursor-pointer">
                    <option value="">-- Semua Unit / Ruangan --</option>
                                    </select>
            </div>

            <div class="sm:col-span-2 flex items-center gap-2">
                <button type="submit" class="w-full py-2 bg-slate-800 hover:bg-slate-900 text-white text-xs font-semibold rounded-xl transition-all">Filter</button>
                            </div>
        </form>
    </div>

    <!-- ── Grouped Tables per Sub / Kategori ── -->
    
    
</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;">
        <!-- 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="">
            
            <!-- Kategori -->
            <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;transition:border-color .2s;box-sizing:border-box;">
                    <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>

            <!-- 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-sizing:border-box;">
            </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="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;transition:border-color .2s;box-sizing:border-box;"></textarea>
            </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-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;transition:border-color .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;">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>

@endsection

@section('scripts')
<script>
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');
    }
}

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