<?php
include("auth.php");
include("config/db.php");

/* =======================
   सुरक्षा जाँच
======================= */
if (!isset($_GET['id']) || empty($_GET['id'])) {
    header("Location: slider.php");
    exit;
}

$id = intval($_GET['id']);

/* =======================
   स्लाइडर छवि प्राप्त करें
======================= */
$result = mysqli_query($conn, "SELECT id, image FROM slider WHERE id='$id'");
if (mysqli_num_rows($result) === 0) {
    header("Location: slider.php");
    exit;
}

$slider = mysqli_fetch_assoc($result);

/* =======================
   स्लाइडर छवि अपडेट करें
======================= */
if (isset($_POST['update'])) {

    if (!empty($_FILES['image']['name'])) {

        // पुरानी छवि हटाएँ
        if (!empty($slider['image']) && file_exists("uploads/slider/" . $slider['image'])) {
            unlink("uploads/slider/" . $slider['image']);
        }

        $imageName = time() . '_' . basename($_FILES['image']['name']);
        $tmpName   = $_FILES['image']['tmp_name'];

        move_uploaded_file($tmpName, "uploads/slider/" . $imageName);

        mysqli_query(
            $conn,
            "UPDATE slider SET image='$imageName' WHERE id='$id'"
        );
    }

    header("Location: slider.php");
    exit;
}
?>

<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>स्लाइडर संपादित करें</title>

<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

<style>
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Source Sans Pro', sans-serif;
  background: #f5f7fa;
}

* { box-sizing: border-box; }

/* FULL WIDTH */
.main {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
}

/* CENTER CARD */
.card {
  max-width: 900px;
  margin: 0 auto;
}

/* IMAGE PREVIEW */
.preview-img {
  width: 420px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
}

/* MOBILE */
@media (max-width: 768px) {
  .main { padding: 15px; }

  .btn {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>
</head>

<body>

<div class="main">

  <div class="card shadow-sm">
    <div class="card-header bg-white">
      <h5 class="mb-0">✏️ स्लाइडर छवि संपादित करें</h5>
    </div>

    <div class="card-body">

      <form method="post" enctype="multipart/form-data">

        <!-- CURRENT IMAGE -->
        <div class="mb-4">
          <label class="form-label fw-semibold">वर्तमान छवि</label><br>

          <?php if (!empty($slider['image'])): ?>
            <img src="uploads/slider/<?= htmlspecialchars($slider['image']) ?>"
                 class="preview-img mb-3">
          <?php else: ?>
            <p class="text-muted">कोई छवि अपलोड नहीं की गई है</p>
          <?php endif; ?>

          <input type="file"
                 name="image"
                 class="form-control form-control-lg"
                 required>
        </div>

        <div class="d-flex flex-wrap gap-2">
          <button type="submit" name="update" class="btn btn-success px-4">
            <i class="bi bi-save"></i> छवि अपडेट करें
          </button>

          <a href="slider.php" class="btn btn-secondary px-4">
            वापस जाएँ
          </a>
        </div>

      </form>

    </div>
  </div>

</div>

</body>
</html>
