MASTER

SAVING...

BERHASIL DIUBAH!

EDITING: pop.php

<?php include('session.php'); ?>
<?php
// ===========================
// Konfigurasi Upload
// ===========================
$uploadDir = $_SERVER['DOCUMENT_ROOT'] . '/upload/popup/';  // folder fisik
$uploadUrl = '../upload/popup/';        // untuk HTML <img>

// ===========================
// Handle Upload & Delete Ajax Request
// ===========================
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';
    $cuid = intval($_POST['cuid']);

if ($action === 'upload') {
        $image = $_FILES['image'];
        $allowed = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
        $maxSize = 10 * 10485760 * 10485760; // 10MB

if ($image['error'] === UPLOAD_ERR_OK
            && in_array($image['type'], $allowed)
            && $image['size'] <= $maxSize) {

$ext = pathinfo($image['name'], PATHINFO_EXTENSION);
            $newName = 'popup_' . $cuid . '_' . time() . '.' . $ext;
            $uploadPath = $uploadDir . $newName;

if (move_uploaded_file($image['tmp_name'], $uploadPath)) {
                // hapus gambar lama jika ada
                $res = mysqli_query($conn, "SELECT image FROM popup WHERE cuid = $cuid");
                $row = mysqli_fetch_assoc($res);
                if ($row && !empty($row['image']) && file_exists($uploadDir . $row['image'])) {
                    unlink($uploadDir . $row['image']);
                }

mysqli_query($conn, "UPDATE popup SET image = '$newName' WHERE cuid = $cuid");
                echo 'success';
            } else {
                echo 'error';
            }
        } else {
            echo 'error';
        }
        exit;
    }

if ($action === 'delete') {
        $res = mysqli_query($conn, "SELECT image FROM popup WHERE cuid = $cuid");
        $row = mysqli_fetch_assoc($res);
        if ($row && !empty($row['image'])) {
            $filePath = $uploadDir . $row['image'];
            if (file_exists($filePath)) unlink($filePath);
            mysqli_query($conn, "UPDATE popup SET image = '' WHERE cuid = $cuid");
        }
        echo 'success';
        exit;
    }
}
?>

<!DOCTYPE html>
<html
  lang="en"
  class="light-style layout-navbar-fixed layout-menu-fixed"
  dir="ltr"
  data-theme="theme-default"
  data-assets-path="<?php echo $urlweb; ?>/assets/"
  data-template="vertical-menu-template"
>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />

<link rel="icon" type="image/x-icon" href="<?php echo $urlwebs; ?>/upload/favicon.png" />

<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=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    />

<link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/fonts/fontawesome.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/fonts/tabler-icons.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/fonts/flag-icons.css" />

<link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/css/rtl/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/css/demo.css" />

<link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/node-waves/node-waves.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/typeahead-js/typeahead.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/select2/select2.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/apex-charts/apex-charts.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />
    <link rel="stylesheet" href="<?php echo $urlweb; ?>/assets/vendor/libs/summernote/dist/summernote-bs4.css"/>

<script src="<?php echo $urlweb; ?>/assets/vendor/js/helpers.js"></script>

<link rel="stylesheet" href="assets/vendor/css/core.css" class="template-customizer-core-css" />
  <link rel="stylesheet" href="assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
  <link rel="stylesheet" href="assets/css/demo.css" />

<link rel="stylesheet" href="assets/vendor/fonts/boxicons.css" />
  <link rel="stylesheet" href="assets/vendor/fonts/tabler-icons.css" />
  <link rel="stylesheet" href="assets/vendor/fonts/fontawesome.css" />

<script src="assets/vendor/js/helpers.js"></script>
  <script src="assets/js/config.js"></script>

<body style="background-color: maroon; color: white;">
    <style>
      /* CSS tambahan */
      body {
        background-color: maroon;
        color: white;
      }

/* Agar teks dalam card, navbar, form, dan tombol tetap selaras */
      .navbar, 
      .card, 
      .content-wrapper {
        background-color: maroon !important;
        color: white !important;
      }

/* Label dan teks input */
      label, 
      h4, 
      .form-label, 
      .fw-bold, 
      .text-muted {
        color: white !important;
      }

/* Input dan file upload box agar kontras di atas maroon */
      input.form-control, 
      select.form-control, 
      textarea.form-control {
        background-color: #6d0f0f;
        border: 1px solid #b52c2c;
        color: white;
      }

input.form-control::placeholder {
        color: #f0dcdc;
      }

/* Tombol utama tetap kontras */
      .btn-primary {
        background-color: #b52c2c;
        border-color: #b52c2c;
        color: white;
      }

.btn-primary:hover {
        background-color: #8c1f1f;
        border-color: #8c1f1f;
      }

.btn-light {
        background-color: #ffffff;
        color: maroon;
      }

.alert {
        background-color: #8c1f1f;
        border-color: #b52c2c;
        color: white;
      }
      
  .btn-delete-blue {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
  }
  .btn-delete-blue:hover {
    background-color: #0056b3;
    border-color: #0056b3;
  }
 .popup-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

@media (max-width: 576px) {
  .popup-img {
    width: 50px;
    height: 50px;
  }
}
</style>

<div class="layout-wrapper layout-content-navbar">
    <div class="layout-container">

<?php include('sidebar.php'); ?>

<div class="layout-page">

<nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
          id="layout-navbar">
          
          
          <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
            <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
              <i class="ti ti-menu-2 ti-sm"></i>
            </a>
          </div>

<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
            <?php include('top-menu.php'); ?>
          </div>
        </nav>
        
      
        <div class="content-wrapper">
          <div class="container-xxl container-p-y">
            <h4 class="fw-bold py-3 mb-4">Popup Manager</h4>
            <div class="card">
              <div class="card-datatable table-responsive">
                <table id="popup-table" class="table border-top">
                  <thead>
                    <tr class="bg-info">
                      <th class="text-center">cuid</th>
                      <th class="text-center">Image</th>
                      <th class="text-center">Action</th>
                  </tr>
              </thead>
         <tbody>
    <?php
    $q = mysqli_query($conn, "SELECT * FROM popup ORDER BY cuid ASC");
    while ($r = mysqli_fetch_assoc($q)):
    ?>
    <tr id="row-<?php echo $r['cuid']; ?>">
      <td><?php echo $r['cuid']; ?></td>
      <td>
        <?php if ($r['image']): ?>
          <img src="<?php echo $uploadUrl . $r['image']; ?>" alt="Popup Image" class="popup-img img-thumbnail" 
     style="width: 60px; height: 60px;">
        <?php else: ?>
          <em>No Image</em>
        <?php endif; ?>
      </td>
      <td>
        <input type="file" onchange="uploadImage(this, <?php echo $r['cuid']; ?>)">
       <button class="btn btn-primary btn-sm" onclick="deleteImage(<?php echo $r['cuid']; ?>)">Delete</button>
      </td>
    </tr>
    <?php endwhile; ?>
  </tbody>
</table>
</div>
     </div>
          </div>
     
            <footer class="content-footer footer bg-footer-theme">
              <div class="container-xxl">
                <div
                  class="footer-container d-flex align-items-center justify-content-between py-2 flex-md-row flex-column"
                >
                  <div>
                    ©
                    <script>
                      document.write(new Date().getFullYear());
                    </script>
                    , <?php echo $s0['instansi']; ?> All Rights Reserved.
                  </div>
                </div>
              </div>
            </footer>
            <script src="<?php echo $urlweb; ?>/assets/vendor/libs/jquery/jquery.js"></script>
  <script src="<?php echo $urlweb; ?>/assets/vendor/libs/datatables/jquery.dataTables.js"></script>
  <script src="<?php echo $urlweb; ?>/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
    
  <script src="assets/vendor/libs/jquery/jquery.js"></script>
  <script src="assets/vendor/libs/popper/popper.js"></script>
  <script src="assets/vendor/js/bootstrap.js"></script>
  <script src="assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>

function uploadImage(input, cuid) {
    var file = input.files[0];
    if(!file) return;
    var formData = new FormData();
    formData.append('image', file);
    formData.append('cuid', cuid);
    formData.append('action', 'upload');

$.ajax({
        url: '',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response){
            if(response === 'success'){
                alert('Upload success');
                location.reload();
            } else {
                alert('Upload failed');
            }
        }
    });
}