admin.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IMN Management Publisher | Admin Panel</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --navy: #0f2b48;
            --navy-dark: #08192c;
            --blue-accent: #3182ce;
            --blue-light: #edf2f7;
            --white: #ffffff;
            --off-white: #f8fafc;
            --border: #e2e8f0;
            --text: #1a202c;
            --text-light: #718096;
            --red: #e53e3e;
            --shadow: 0 20px 40px rgba(15, 43, 72, 0.08);
            --radius: 16px;
            --transition: all 0.3s ease;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }
        body { background: var(--off-white); color: var(--text); min-height: 100vh; padding: 30px 15px; display: flex; justify-content: center; }
        
        .admin-wrapper { width: 100%; max-width: 680px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
        .admin-header { background: var(--navy-dark); color: var(--white); padding: 25px; text-align: center; }
        .admin-header h1 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--white); }
        .admin-header p { color: #a0aec0; font-size: 0.8rem; margin-top: 4px; }

        .admin-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: #132238; }
        .tab-btn { padding: 12px; background: transparent; color: #a0aec0; border: none; font-size: 0.78rem; font-weight: 700; cursor: pointer; text-align: center; }
        .tab-btn.active { background: var(--white); color: var(--navy); border-top: 3px solid var(--blue-accent); }

        .admin-body { padding: 25px; }
        .form-section { display: none; }
        .form-section.active { display: block; }

        .form-group { margin-bottom: 18px; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: var(--navy); text-transform: uppercase; margin-bottom: 6px; }

        input[type="text"], input[type="datetime-local"], select, textarea, input[type="file"] {
            width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.88rem; background: var(--off-white); outline: none;
        }

        .radio-group { display: flex; gap: 15px; margin-bottom: 10px; }
        .radio-option { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; cursor: pointer; }

        .btn-publish { width: 100%; height: 46px; background: var(--navy); color: var(--white); border: none; border-radius: 999px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: var(--transition); margin-top: 10px; }
        .btn-publish:hover { background: var(--blue-accent); }

        /* LIST MANAGEMENT & DELETE */
        .manage-title { font-size: 0.9rem; font-weight: 700; color: var(--navy); margin: 25px 0 12px; padding-top: 15px; border-top: 1px dashed var(--border); }
        .data-list { display: grid; gap: 10px; }
        .data-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--off-white); border: 1px solid var(--border); border-radius: 8px; }
        .data-item-info strong { display: block; font-size: 0.85rem; color: var(--navy); }
        .data-item-info small { color: var(--text-light); font-size: 0.75rem; }
        .btn-delete { padding: 6px 12px; background: rgba(229, 62, 62, 0.1); color: var(--red); border: 1px solid var(--red); border-radius: 6px; font-size: 0.75rem; font-weight: 700; cursor: pointer; }
        .btn-delete:hover { background: var(--red); color: var(--white); }

        @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; gap: 0; } }
    </style>
</head>
<body>

    <div class="admin-wrapper">
        <div class="admin-header">
            <h1>IMN Website Control Panel</h1>
            <p>Update & Kelola Data Website Langsung dari Device Anda</p>
        </div>

        <div class="admin-tabs">
            <button class="tab-btn active" onclick="switchTab('news', event)">📰 Berita</button>
            <button class="tab-btn" onclick="switchTab('doctor', event)">👨‍⚕️ Dokter</button>
            <button class="tab-btn" onclick="switchTab('contact', event)">📍 Kontak</button>
        </div>

        <div class="admin-body">

            <!-- 1. KELOLA BERITA -->
            <div id="form-news" class="form-section active">
                <form id="newsForm">
                    <div class="form-group">
                        <label>Judul Utama Berita</label>
                        <input type="text" id="newsTitle" placeholder="Judul Berita" required>
                    </div>
                    <div class="form-group">
                        <label>Sub-Judul / Ringkasan</label>
                        <input type="text" id="newsSub" placeholder="Ringkasan singkat" required>
                    </div>

                    <!-- OPSI GAMBAR DUAL MODE -->
                    <div class="form-group">
                        <label>Sumber Gambar</label>
                        <div class="radio-group">
                            <label class="radio-option">
                                <input type="radio" name="imageSource" value="link" checked onchange="toggleImgInput()"> Tempel Link URL
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="imageSource" value="file" onchange="toggleImgInput()"> Upload dari Device
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="imageSource" value="none" onchange="toggleImgInput()"> Tanpa Gambar
                            </label>
                        </div>

                        <div id="inputLinkBox">
                            <input type="text" id="newsImgLink" placeholder="https://images.unsplash.com/...">
                        </div>
                        <div id="inputFileBox" style="display: none;">
                            <input type="file" id="newsImgFile" accept="image/*">
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Isi Berita Lengkap</label>
                        <textarea id="newsContent" rows="3" placeholder="Detail berita..." required></textarea>
                    </div>
                    <button type="submit" class="btn-publish">Publikasikan Berita ke Website ✨</button>
                </form>

                <div class="manage-title">Daftar Berita Aktif (Dapat Dihapus)</div>
                <div id="newsList" class="data-list"></div>
            </div>

            <!-- 2. KELOLA DOKTER -->
            <div id="form-doctor" class="form-section">
                <form id="doctorForm">
                    <div class="form-group">
                        <label>Nama Dokter & Gelar</label>
                        <input type="text" id="docName" placeholder="dr. Nama Lengkap, Sp.A" required>
                    </div>
                    <div class="form-group">
                        <div class="form-row">
                            <div>
                                <label>Poli / Spesialisasi</label>
                                <select id="docSpec" required>
                                    <option value="Poli Umum">Poli Umum</option>
                                    <option value="Poli Anak">Poli Anak</option>
                                    <option value="Poli Kandungan">Poli Kandungan</option>
                                    <option value="Poli Jiwa">Poli Jiwa</option>
                                </select>
                            </div>
                            <div>
                                <label>Jadwal Praktik</label>
                                <input type="text" id="docSchedule" placeholder="Sen - Rab | 14.00 - 17.00" required>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn-publish">Tambah Data Dokter 👨‍⚕️</button>
                </form>

                <div class="manage-title">Daftar Dokter Aktif (Hapus Jika Resign)</div>
                <div id="doctorList" class="data-list"></div>
            </div>

            <!-- 3. KELOLA KONTAK -->
            <div id="form-contact" class="form-section">
                <form id="contactForm">
                    <div class="form-group">
                        <label>Alamat Rumah Sakit</label>
                        <input type="text" id="cntAddress" required>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label>Telepon / WA</label>
                            <input type="text" id="cntPhone" required>
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="text" id="cntEmail" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Jam Operasional</label>
                        <input type="text" id="cntHours" required>
                    </div>
                    <button type="submit" class="btn-publish">Update Kontak Website 📍</button>
                </form>
            </div>

        </div>
    </div>

    <script>
        function switchTab(tab, e) {
            document.querySelectorAll('.form-section').forEach(s => s.classList.remove('active'));
            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
            document.getElementById('form-' + tab).classList.add('active');
            e.currentTarget.classList.add('active');
        }

        function toggleImgInput() {
            const src = document.querySelector('input[name="imageSource"]:checked').value;
            document.getElementById('inputLinkBox').style.display = src === 'link' ? 'block' : 'none';
            document.getElementById('inputFileBox').style.display = src === 'file' ? 'block' : 'none';
        }

        // LOAD DATA AWAL
        document.addEventListener('DOMContentLoaded', () => {
            renderNewsList();
            renderDoctorList();
            loadContactData();
        });

        // ================= BERITA LOGIC =================
        document.getElementById('newsForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const title = document.getElementById('newsTitle').value;
            const sub = document.getElementById('newsSub').value;
            const content = document.getElementById('newsContent').value;
            const srcType = document.querySelector('input[name="imageSource"]:checked').value;
            
            let imgUrl = '';
            if (srcType === 'link') {
                imgUrl = document.getElementById('newsImgLink').value;
            } else if (srcType === 'file') {
                const file = document.getElementById('newsImgFile').files[0];
                if (file) {
                    imgUrl = await convertBase64(file);
                }
            }

            const newNews = { id: Date.now(), title, sub, content, imgUrl, time: new Date().toLocaleDateString('id-ID') };
            const newsList = JSON.parse(localStorage.getItem('imn_news_data') || '[]');
            newsList.unshift(newNews);
            localStorage.setItem('imn_news_data', JSON.stringify(newsList));

            alert('Berita berhasil ditambahkan ke website!');
            this.reset();
            renderNewsList();
        });

        function renderNewsList() {
            const list = JSON.parse(localStorage.getItem('imn_news_data') || '[]');
            const container = document.getElementById('newsList');
            container.innerHTML = list.length === 0 ? '<small style="color:#718096">Belum ada berita tersimpan.</small>' : '';
            
            list.forEach(item => {
                container.innerHTML += `
                    <div class="data-item">
                        <div class="data-item-info">
                            <strong>${item.title}</strong>
                            <small>${item.time}</small>
                        </div>
                        <button class="btn-delete" onclick="deleteNews(${item.id})">Hapus</button>
                    </div>
                `;
            });
        }

        function deleteNews(id) {
            if (confirm('Yakin ingin menghapus berita ini?')) {
                let list = JSON.parse(localStorage.getItem('imn_news_data') || '[]');
                list = list.filter(item => item.id !== id);
                localStorage.setItem('imn_news_data', JSON.stringify(list));
                renderNewsList();
            }
        }

        // ================= DOKTER LOGIC =================
        document.getElementById('doctorForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const name = document.getElementById('docName').value;
            const spec = document.getElementById('docSpec').value;
            const sched = document.getElementById('docSchedule').value;

            const newDoc = { id: Date.now(), name, spec, sched };
            const docList = JSON.parse(localStorage.getItem('imn_doctor_data') || '[]');
            docList.push(newDoc);
            localStorage.setItem('imn_doctor_data', JSON.stringify(docList));

            alert('Data Dokter berhasil ditambahkan!');
            this.reset();
            renderDoctorList();
        });

        function renderDoctorList() {
            const list = JSON.parse(localStorage.getItem('imn_doctor_data') || '[]');
            const container = document.getElementById('doctorList');
            container.innerHTML = list.length === 0 ? '<small style="color:#718096">Belum ada data dokter.</small>' : '';
            
            list.forEach(item => {
                container.innerHTML += `
                    <div class="data-item">
                        <div class="data-item-info">
                            <strong>${item.name}</strong>
                            <small>${item.spec} | ${item.sched}</small>
                        </div>
                        <button class="btn-delete" onclick="deleteDoctor(${item.id})">Hapus (Resign)</button>
                    </div>
                `;
            });
        }

        function deleteDoctor(id) {
            if (confirm('Hapus data dokter ini dari website?')) {
                let list = JSON.parse(localStorage.getItem('imn_doctor_data') || '[]');
                list = list.filter(item => item.id !== id);
                localStorage.setItem('imn_doctor_data', JSON.stringify(list));
                renderDoctorList();
            }
        }

        // ================= KONTAK LOGIC =================
        function loadContactData() {
            const cnt = JSON.parse(localStorage.getItem('imn_contact_data') || '{}');
            document.getElementById('cntAddress').value = cnt.address || 'No. 88, Central Healthcare District.';
            document.getElementById('cntPhone').value = cnt.phone || '+62 896-7332-0727';
            document.getElementById('cntEmail').value = cnt.email || 'rsinstitutmedikanusantara@gmail.com';
            document.getElementById('cntHours').value = cnt.hours || 'Senin – Jumat | 10.00 – 20.00 WIB';
        }

        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const contactData = {
                address: document.getElementById('cntAddress').value,
                phone: document.getElementById('cntPhone').value,
                email: document.getElementById('cntEmail').value,
                hours: document.getElementById('cntHours').value
            };
            localStorage.setItem('imn_contact_data', JSON.stringify(contactData));
            alert('Informasi Kontak berhasil diperbarui di website!');
        });

        // Helper Base64 Upload Gambar dari HP
        function convertBase64(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => resolve(reader.result);
                reader.onerror = error => reject(error);
            });
        }
    </script>
</body>
</html>