@extends('layouts.main')

@section('title', 'Master Unit / Ruangan')

@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-emerald-100 text-emerald-700 rounded-xl">
                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 21h18M3 7v14M21 7v14M6 11h4M6 15h4M14 11h4M14 15h4M9 3h6v4H9z"/></svg>
                </span>
                <h2 class="text-lg sm:text-xl font-extrabold text-slate-800 tracking-tight">Master Unit / Ruangan</h2>
            </div>
            <p class="text-xs sm:text-sm text-slate-500 mt-1">Kelola daftar unit kerja, instalasi, dan ruangan pelayanan rumah sakit untuk pengelompokan indikator mutu.</p>
        </div>

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

    <!-- ── Table Unit ── -->
    <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">
            <h3 class="text-sm sm:text-base font-bold text-slate-900">Daftar Unit Terdaftar</h3>
            <span class="px-3 py-1 bg-emerald-100 text-emerald-800 font-bold text-xs rounded-full">
                0 Unit
            </span>
        </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-[200px]">Nama Unit / Ruangan</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="5" class="py-8 text-center text-slate-400 italic">
                            Belum ada unit / ruangan terdaftar. Klik "+ Tambah Unit / Ruangan" 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 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;">
        <!-- Header -->
        <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;" 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="formUnit" style="padding:24px;">
            <input type="hidden" name="unit_id" id="unit_id" value="">
            
            <!-- Nama Unit -->
            <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, Farmasi..." 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>

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

            <!-- Buttons -->
            <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>

@endsection

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

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