admin_panel.php

<?php
// 1. Memaksa koneksi untuk selalu menggunakan HTTPS
require_once 'force_https.php';
session_start();

// 2. Periksa status login admin
if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
    header('Location: login.php');
    exit;
}

// 3. Muat koneksi database login (untuk tabel users)
require_once 'config_web.php';
if (!isset($conn_web)) { die("Error: Koneksi database login gagal dimuat."); }

// --- KONFIGURASI PENTING ---
$removebg_api_key = 'gjGcwhNh69CTrfXFFehFLwfq'; // API Key remove.bg Anda
$produk_file = 'produk_showcase.json';
$promos_file = 'promos.json';
$upload_dir_produk = 'uploads/produk/';
$upload_dir_promos = 'uploads/promos/'; // Direktori baru untuk upload promo

// --- FUNGSI BANTU ---
function baca_json($file_path) { if (!file_exists($file_path) || !is_readable($file_path)) return []; $json_content = file_get_contents($file_path); return json_decode($json_content, true) ?: []; }
function tulis_json($file_path, $data) { file_put_contents($file_path, json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)); chmod($file_path, 0644); }
function call_api($url, $api_key) { $ch = curl_init(); curl_setopt_array($ch, [CURLOPT_URL => $url, CURLOPT_RETURNTRANSFER => 1, CURLOPT_TIMEOUT => 20, CURLOPT_HTTPHEADER => ['X-API-KEY: ' . $api_key]]); $response = curl_exec($ch); $error = curl_error($ch); curl_close($ch); if ($error) { return json_encode(['status' => 'error', 'message' => 'Gagal menghubungi server API internal: ' . $error]); } return $response; }
function resize_image($source_path, $max_dimension = 1500) { if (!function_exists('imagecreatefromstring')) return false; $size_info = @getimagesize($source_path); if (!$size_info) return false; list($width, $height) = $size_info; if ($width <= $max_dimension && $height <= $max_dimension) return true; $aspect_ratio = $width / $height; if ($width > $height) { $new_width = $max_dimension; $new_height = $max_dimension / $aspect_ratio; } else { $new_height = $max_dimension; $new_width = $max_dimension * $aspect_ratio; } $source_image = @imagecreatefromstring(file_get_contents($source_path)); if (!$source_image) return false; $resized_image = imagecreatetruecolor($new_width, $new_height); imagecopyresampled($resized_image, $source_image, 0, 0, 0, 0, $new_width, $new_height, $width, $height); imagedestroy($source_image); imagejpeg($resized_image, $source_path, 85); imagedestroy($resized_image); return true; }
function remove_background_with_removebg($source_path, $api_key) { if (empty($api_key)) return ['success' => false, 'message' => 'API Key remove.bg tidak valid.']; if (!resize_image($source_path)) return ['success' => false, 'message' => 'Format gambar tidak valid atau gagal di-resize.']; $ch = curl_init(); curl_setopt_array($ch, [ CURLOPT_URL => 'https://api.remove.bg/v1.0/removebg', CURLOPT_RETURNTRANSFER => 1, CURLOPT_POST => 1, CURLOPT_POSTFIELDS => ['image_file' => new CURLFile($source_path)], CURLOPT_HTTPHEADER => ['X-Api-Key: ' . $api_key], CURLOPT_TIMEOUT => 60 ]); $api_response_body = curl_exec($ch); $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); curl_close($ch); if ($http_code != 200) { $error_data = json_decode($api_response_body, true); $errors = $error_data['errors'][0]['title'] ?? 'Terjadi kesalahan'; return ['success' => false, 'message' => 'API remove.bg gagal: ' . $errors]; } file_put_contents($source_path, $api_response_body); $image_with_transparent_bg = @imagecreatefrompng($source_path); if ($image_with_transparent_bg) { $width = imagesx($image_with_transparent_bg); $height = imagesy($image_with_transparent_bg); $final_image = imagecreatetruecolor($width, $height); $white = imagecolorallocate($final_image, 255, 255, 255); imagefill($final_image, 0, 0, $white); imagecopy($final_image, $image_with_transparent_bg, 0, 0, 0, 0, $width, $height); imagedestroy($image_with_transparent_bg); imagejpeg($final_image, $source_path, 90); imagedestroy($final_image); } return ['success' => true, 'message' => 'Background berhasil dihapus.']; }

$pesan = ''; $tipe_pesan = '';

// --- PROSES SEMUA AKSI FORM (POST & GET) ---
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';
    if ($action === 'add_promo') {
        $promo_image_url = '';
        if (isset($_FILES['promo_image_file']) && $_FILES['promo_image_file']['error'] === UPLOAD_ERR_OK) {
            if (!is_dir($upload_dir_promos)) { mkdir($upload_dir_promos, 0777, true); }
            $nama_file_promo = uniqid() . '-' . basename($_FILES['promo_image_file']['name']);
            $target_file_promo = $upload_dir_promos . $nama_file_promo;
            if (move_uploaded_file($_FILES['promo_image_file']['tmp_name'], $target_file_promo)) {
                $promo_image_url = 'https://' . $_SERVER['HTTP_HOST'] . '/' . $target_file_promo;
            } else {
                $pesan = 'Gagal mengupload gambar promo.'; $tipe_pesan = 'error';
            }
        }

        if (!empty($_POST['promo_title']) && !empty($promo_image_url)) {
            $promos = baca_json($promos_file);
            $new_promo = [
                'id' => uniqid(),
                'title' => $_POST['promo_title'],
                'subtitle' => $_POST['promo_subtitle'] ?? '',
                'image_url' => $promo_image_url,
                'link_url' => $_POST['promo_link_url'] ?? ''
            ];
            array_unshift($promos, $new_promo);
            tulis_json($promos_file, $promos);
            $pesan = 'Promo baru berhasil ditambahkan.'; $tipe_pesan = 'sukses';
        } else {
            if (empty($pesan)) { $pesan = 'Judul dan Gambar promo tidak boleh kosong.'; $tipe_pesan = 'error'; }
        }
    } elseif ($action === 'add_koleksi') {
        $kode_barang = trim($_POST['kode_barang']);
        $gambar_urls = [];
        if (isset($_FILES['gambar_produk']) && $_FILES['gambar_produk']['error'][0] !== UPLOAD_ERR_NO_FILE) {
            if (count($_FILES['gambar_produk']['name']) > 5) { $pesan = 'Error: Maksimal 5 gambar.'; $tipe_pesan = 'error'; } else {
                if (!is_dir($upload_dir_produk)) { mkdir($upload_dir_produk, 0777, true); }
                for ($i = 0; $i < count($_FILES['gambar_produk']['name']); $i++) {
                    if ($_FILES['gambar_produk']['error'][$i] === UPLOAD_ERR_OK) {
                        $nama_file = uniqid() . '-' . basename($_FILES['gambar_produk']['name'][$i]);
                        $target_file = $upload_dir_produk . $nama_file;
                        if (move_uploaded_file($_FILES['gambar_produk']['tmp_name'][$i], $target_file)) {
                            if (isset($_POST['remove_bg'])) { remove_background_with_removebg($target_file, $removebg_api_key); }
                            $gambar_urls[] = 'https://' . $_SERVER['HTTP_HOST'] . '/' . $target_file;
                        }
                    }
                }
            }
        } elseif (!empty($_POST['gambar_base64'])) {
            if (preg_match('/^data:image\/(\w+);base64,/', $_POST['gambar_base64'], $type)) {
                $data = base64_decode(substr($_POST['gambar_base64'], strpos($_POST['gambar_base64'], ',') + 1));
                if ($data) {
                    if (!is_dir($upload_dir_produk)) { mkdir($upload_dir_produk, 0777, true); }
                    $nama_file = uniqid() . '.jpg'; $target_file = $upload_dir_produk . $nama_file;
                    file_put_contents($target_file, $data);
                    if (isset($_POST['remove_bg'])) { remove_background_with_removebg($target_file, $removebg_api_key); }
                    $gambar_urls[] = 'https://' . $_SERVER['HTTP_HOST'] . '/' . $target_file;
                }
            }
        }
        if (!empty($gambar_urls)) {
            $api_response = call_api('https://www.modecentre.cloud/api_get_produk.php?kode=' . urlencode($kode_barang), 'KunciRahasiaSuperAman123!@#');
            $produk_data = json_decode($api_response, true);
            if ($produk_data && $produk_data['status'] === 'success') {
                $semua_produk = baca_json($produk_file);
                $produk_baru = $produk_data['data']; $produk_baru['gambar_urls'] = $gambar_urls;
                array_unshift($semua_produk, $produk_baru);
                tulis_json($produk_file, $semua_produk);
                $pesan = 'Produk berhasil ditambahkan!'; $tipe_pesan = 'sukses';
            } else {
                foreach($gambar_urls as $url) { $path = ltrim(parse_url($url, PHP_URL_PATH), '/'); if(file_exists($path)) @unlink($path); }
                $pesan = 'Error: ' . ($produk_data['message'] ?? 'Kode barang tidak ditemukan.'); $tipe_pesan = 'error';
            }
        } else { if (empty($pesan)) { $pesan = 'Error: Anda harus memilih file gambar atau mengambil foto.'; $tipe_pesan = 'error'; } }
    }
}

if (isset($_GET['action'])) {
    $action = $_GET['action'];
    if ($action === 'delete_promo' && isset($_GET['id'])) {
        $promos = baca_json($promos_file); $promos_filtered = array_filter($promos, function($p) { return $p['id'] !== $_GET['id']; });
        tulis_json($promos_file, array_values($promos_filtered));
        header('Location: admin_panel.php?pesan=Promo berhasil dihapus.&tab=promo'); exit;
    } elseif (($action === 'set_featured' || $action === 'unset_featured') && isset($_GET['kode'])) {
        $produk_showcase = baca_json($produk_file); $kode_target = $_GET['kode']; $produk_ditemukan = false;
        foreach ($produk_showcase as &$produk) {
            if ($produk['kode'] === $kode_target) { $produk['is_featured'] = ($action === 'set_featured'); $produk_ditemukan = true; break; }
        }
        if ($produk_ditemukan) { tulis_json($produk_file, $produk_showcase); $pesan = 'Status produk unggulan berhasil diperbarui.'; $tipe_pesan = 'sukses'; }
    } elseif ($action === 'delete_koleksi' && isset($_GET['index'])) {
        $semua_produk = baca_json($produk_file);
        if (isset($semua_produk[$_GET['index']])) {
            $urls_to_delete = $semua_produk[$_GET['index']]['gambar_urls'] ?? [];
            foreach ($urls_to_delete as $url) { $path = ltrim(parse_url($url, PHP_URL_PATH), '/'); if (file_exists($path)) @unlink($path); }
            array_splice($semua_produk, (int)$_GET['index'], 1);
            tulis_json($produk_file, $semua_produk);
            header('Location: admin_panel.php?pesan=Produk berhasil dihapus.&tab=konten'); exit;
        }
    } elseif ($action === 'update_user_role') {
        $user_id = $_POST['user_id']; $new_role = $_POST['role'];
        if ($user_id != $_SESSION['user_id']) { 
            $stmt = $conn_web->prepare("UPDATE users SET role = ? WHERE id = ?"); $stmt->bind_param("si", $new_role, $user_id); $stmt->execute();
            $pesan = 'Peran pengguna berhasil diperbarui.'; $tipe_pesan = 'sukses';
        } else { $pesan = 'Anda tidak dapat mengubah peran akun Anda sendiri.'; $tipe_pesan = 'error'; }
    } elseif ($action === 'delete_user' && isset($_GET['id'])) {
        $user_id = $_GET['id'];
        if ($user_id != $_SESSION['user_id']) { 
            $stmt = $conn_web->prepare("DELETE FROM users WHERE id = ?"); $stmt->bind_param("i", $user_id); $stmt->execute();
            header('Location: admin_panel.php?pesan=Pengguna berhasil dihapus.&tab=pengguna'); exit;
        }
    }
}

if(isset($_GET['pesan'])) { $pesan = htmlspecialchars($_GET['pesan']); $tipe_pesan = 'sukses'; }

// --- BACA DATA TERKINI ---
$produk_showcase = baca_json($produk_file);
$promos = baca_json($promos_file);
$all_users = $conn_web->query("SELECT id, username, role, created_at FROM users ORDER BY created_at DESC")->fetch_all(MYSQLI_ASSOC);
$conn_web->close();
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8"><title>Admin Panel - Mode Centre</title><meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Poppins', sans-serif; background-color: #f3f4f6; color: #1f2937; }
        .tab-button.active { color: #D32F2F; border-color: #D32F2F; }
    </style>
</head>
<body class="antialiased">
<div class="container mx-auto p-4 md:p-6">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold text-gray-800">Admin Panel</h1>
        <a href="logout.php" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-lg">Logout</a>
    </div>

    <?php if ($pesan): ?>
    <div class="<?= $tipe_pesan === 'sukses' ? 'bg-green-100 border-green-400 text-green-700' : 'bg-red-100 border-red-400 text-red-700' ?> border px-4 py-3 rounded-lg relative mb-6" role="alert"><span class="block sm:inline"><?= nl2br(htmlspecialchars(strip_tags($pesan, '<br>'))) ?></span></div>
    <?php endif; ?>

    <div class="bg-white p-6 rounded-lg shadow-md">
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex space-x-6" aria-label="Tabs">
                <button class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="konten">Konten Produk</button>
                <button class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="promo">Promo Carousel</button>
                <button class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="pengguna">Manajemen Pengguna</button>
            </nav>
        </div>

        <div id="konten" class="tab-pane py-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div>
                    <h2 class="text-2xl font-semibold mb-4">Tambah / Perbarui Produk</h2>
                    <form id="addKoleksiForm" action="admin_panel.php#konten" method="POST" enctype="multipart/form-data" class="space-y-4">
                        <input type="hidden" name="action" value="add_koleksi">
                        <input type="hidden" name="gambar_base64" id="gambar_base64">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">1. Upload Foto (Max 5)</label>
                            <div id="camera-warning" class="hidden bg-yellow-100 text-yellow-800 p-3 rounded-md my-2 text-sm">Fitur kamera hanya berfungsi di koneksi HTTPS.</div>
                            <div class="flex gap-4 my-2">
                                <input type="file" id="gambar_produk" name="gambar_produk[]" accept="image/*" multiple class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-red-50 file:text-red-700 hover:file:bg-red-100">
                                <button type="button" id="openCameraButton" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-3 rounded-lg">📷</button>
                            </div>
                            <div id="imagePreviewContainer" class="flex gap-2 flex-wrap mt-2"></div>
                        </div>
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="remove_bg" name="remove_bg" value="1" class="h-4 w-4 text-red-600 border-gray-300 rounded focus:ring-red-500">
                            <label for="remove_bg" class="text-sm text-gray-700">Hapus background</label>
                        </div>
                        <div>
                            <label for="kode_barang" class="block text-sm font-medium text-gray-700">2. Masukkan Kode Barang</label>
                            <input type="text" id="kode_barang" name="kode_barang" placeholder="Contoh: 008020227" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500">
                        </div>
                        <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">Tambahkan Produk</button>
                    </form>
                </div>
                <div>
                    <h2 class="text-2xl font-semibold mb-4">Kelola Produk Unggulan</h2>
                    <div class="max-h-[400px] overflow-y-auto pr-2 space-y-3">
                        <?php foreach($produk_showcase as $produk): ?>
                        <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg border">
                            <p class="font-medium text-sm truncate w-48" title="<?= htmlspecialchars($produk['nama']) ?>"><?= htmlspecialchars($produk['nama']) ?></p>
                            <?php if (isset($produk['is_featured']) && $produk['is_featured']): ?>
                                <a href="?action=unset_featured&kode=<?= $produk['kode'] ?>#konten" class="bg-gray-200 text-gray-700 font-semibold py-1 px-3 rounded-lg text-xs">✓ Unggulan</a>
                            <?php else: ?>
                                <a href="?action=set_featured&kode=<?= $produk['kode'] ?>#konten" class="bg-red-100 text-red-700 hover:bg-red-200 font-semibold py-1 px-3 rounded-lg text-xs">+ Jadikan Unggulan</a>
                            <?php endif; ?>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
            <hr class="my-8">
            <div>
                <h2 class="text-2xl font-semibold mb-4">Koleksi Produk Saat Ini</h2>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                    <?php foreach ($produk_showcase as $index => $produk): ?>
                        <div class="relative group border rounded-lg overflow-hidden">
                            <a href="?action=delete_koleksi&index=<?= $index ?>#konten" class="absolute top-1 right-1 z-10 bg-red-600 text-white rounded-full h-6 w-6 flex items-center justify-center opacity-50 group-hover:opacity-100 transition-opacity" onclick="return confirm('Yakin ingin menghapus produk ini?')">&times;</a>
                            <img src="<?= htmlspecialchars($produk['gambar_urls'][0] ?? 'https://placehold.co/400x500/f0f0f0/d1d1d1?text=MC') ?>" class="w-full h-48 object-cover">
                            <div class="p-2 text-xs"><p class="truncate"><?= htmlspecialchars($produk['nama']) ?></p></div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <div id="promo" class="tab-pane py-6">
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h2 class="text-2xl font-semibold mb-4">Tambah Promo Baru</h2>
                    <form action="admin_panel.php#promo" method="POST" enctype="multipart/form-data" class="space-y-4">
                        <input type="hidden" name="action" value="add_promo">
                        <div>
                            <label for="promo_title" class="block text-sm font-medium text-gray-700">Judul Promo</label>
                            <input type="text" id="promo_title" name="promo_title" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500">
                        </div>
                        <div>
                            <label for="promo_subtitle" class="block text-sm font-medium text-gray-700">Sub-judul (Opsional)</label>
                            <input type="text" id="promo_subtitle" name="promo_subtitle" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500">
                        </div>
                        <div>
                            <label for="promo_image_file" class="block text-sm font-medium text-gray-700">Upload Gambar</label>
                            <input type="file" id="promo_image_file" name="promo_image_file" accept="image/*" required class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-red-50 file:text-red-700 hover:file:bg-red-100">
                        </div>
                        <div>
                            <label for="promo_link_url" class="block text-sm font-medium text-gray-700">URL Link (Opsional)</label>
                            <input type="url" id="promo_link_url" name="promo_link_url" placeholder="https://..." class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500">
                        </div>
                        <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">Tambahkan Promo</button>
                    </form>
                </div>
                <div>
                    <h2 class="text-2xl font-semibold mb-4">Daftar Promo Saat Ini</h2>
                    <div class="space-y-4">
                        <?php if (empty($promos)): ?>
                            <p class="text-gray-500">Belum ada promo yang ditambahkan.</p>
                        <?php else: ?>
                            <?php foreach ($promos as $promo): ?>
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border">
                                <div class="flex items-center gap-4">
                                    <img src="<?= htmlspecialchars($promo['image_url']) ?>" class="w-24 h-16 object-cover rounded-md bg-gray-200">
                                    <div>
                                        <p class="font-semibold"><?= htmlspecialchars($promo['title']) ?></p>
                                        <p class="text-sm text-gray-500"><?= htmlspecialchars($promo['subtitle']) ?></p>
                                    </div>
                                </div>
                                <a href="?action=delete_promo&id=<?= $promo['id'] ?>#promo" onclick="return confirm('Yakin ingin menghapus promo ini?')" class="text-red-600 hover:text-red-800 font-semibold">Hapus</a>
                            </div>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        <div id="pengguna" class="tab-pane py-6">
            <h2 class="text-2xl font-semibold mb-4">Daftar Pengguna Website</h2>
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Username</th><th>Role</th><th>Tanggal Daftar</th><th>Aksi</th></tr></thead>
                    <tbody>
                        <?php foreach($all_users as $user): ?>
                        <tr>
                            <td><?= htmlspecialchars($user['username']) ?></td>
                            <td>
                                <form action="admin_panel.php#pengguna" method="POST" style="display: flex; gap: 10px;">
                                    <input type="hidden" name="action" value="update_user_role">
                                    <input type="hidden" name="user_id" value="<?= $user['id'] ?>">
                                    <select name="role" <?= ($user['id'] == $_SESSION['user_id']) ? 'disabled' : '' ?> onchange="this.form.submit()">
                                        <option value="member" <?= $user['role'] === 'member' ? 'selected' : '' ?>>Member</option>
                                        <option value="admin" <?= $user['role'] === 'admin' ? 'selected' : '' ?>>Admin</option>
                                    </select>
                                </form>
                            </td>
                            <td><?= date('d M Y, H:i', strtotime($user['created_at'])) ?></td>
                            <td>
                                <?php if ($user['id'] != $_SESSION['user_id']): ?>
                                <a href="admin_panel.php?action=delete_user&id=<?= $user['id'] ?>" onclick="return confirm('Yakin ingin menghapus pengguna ini?')" style="color: #D32F2F;">Hapus</a>
                                <?php endif; ?>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div id="cameraModal" class="hidden fixed z-50 inset-0 bg-black bg-opacity-75 flex items-center justify-center"><div class="bg-white p-4 rounded-lg shadow-xl w-full max-w-md"><video id="cameraFeed" autoplay playsinline class="w-full rounded-md"></video><div class="flex justify-center gap-4 mt-4"><button id="captureButton" class="bg-red-600 text-white font-bold py-2 px-4 rounded-lg">Ambil Foto</button><button id="closeCameraButton" class="bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg">Tutup</button></div></div></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tabs = document.querySelectorAll('.tab-button');
    const panes = document.querySelectorAll('.tab-pane');
    let activeTabId = window.location.hash.substring(1) || 'konten';
    function switchTab(tabId) { if (!document.getElementById(tabId)) { tabId = 'konten'; } tabs.forEach(t => { t.classList.toggle('active', t.getAttribute('data-tab') === tabId); }); panes.forEach(pane => { pane.style.display = pane.id === tabId ? 'block' : 'none'; }); }
    tabs.forEach(tab => { tab.addEventListener('click', (e) => { e.preventDefault(); const tabId = tab.getAttribute('data-tab'); window.location.hash = tabId; switchTab(tabId); }); });
    switchTab(activeTabId);

    // Script untuk kamera & preview
    const openCameraButton = document.getElementById('openCameraButton');
    const cameraModal = document.getElementById('cameraModal');
    const closeCameraButton = document.getElementById('closeCameraButton');
    const captureButton = document.getElementById('captureButton');
    const video = document.getElementById('cameraFeed');
    const canvas = document.createElement('canvas');
    const hiddenBase64Input = document.getElementById('gambar_base64');
    const fileInput = document.getElementById('gambar_produk');
    const imagePreviewContainer = document.getElementById('imagePreviewContainer');
    const cameraWarning = document.getElementById('camera-warning');
    let stream;
    if (window.isSecureContext) {
        openCameraButton.addEventListener('click', async () => {
            cameraModal.classList.remove('hidden');
            try { stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }); video.srcObject = stream; } 
            catch (err) { alert("Tidak bisa mengakses kamera. Pastikan Anda memberikan izin."); cameraModal.classList.add('hidden'); }
        });
    } else { cameraWarning.classList.remove('hidden'); openCameraButton.disabled = true; }
    function stopCamera() { if (stream) { stream.getTracks().forEach(track => track.stop()); } video.srcObject = null; cameraModal.classList.add('hidden'); }
    closeCameraButton.addEventListener('click', stopCamera);
    captureButton.addEventListener('click', () => {
        canvas.width = video.videoWidth; canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        const dataUrl = canvas.toDataURL('image/jpeg', 0.7);
        imagePreviewContainer.innerHTML = ''; 
        const img = document.createElement('img'); img.src = dataUrl; img.style = "max-width: 80px; max-height: 80px; border-radius: 8px;";
        imagePreviewContainer.appendChild(img);
        hiddenBase64Input.value = dataUrl; fileInput.value = ''; stopCamera();
    });
    fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 5) { alert("Anda hanya bisa mengupload maksimal 5 gambar."); fileInput.value = ''; imagePreviewContainer.innerHTML = ''; return; }
        if (fileInput.files.length > 0) { imagePreviewContainer.innerHTML = ''; hiddenBase64Input.value = ''; for (const file of fileInput.files) { const reader = new FileReader(); reader.onload = (e) => { const img = document.createElement('img'); img.src = e.target.result; img.style = "max-width: 80px; max-height: 80px; border-radius: 8px;"; imagePreviewContainer.appendChild(img); }; reader.readAsDataURL(file); } }
    });
});
</script>
</body>
</html>