<main id="main" class="main">
   <div class="pagetitle">
      <h1>Atur Situs</h1>
      <nav>
         <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="index.php">Home</a></li>
            <li class="breadcrumb-item active">Atur Situs</li>
         </ol>
      </nav>
   </div>
   <!-- End Page Title -->
   <section class="section dashboard">
      <div class="card recent-sales overflow-auto">
         <div class="filter">
            <!-- Modal Dialog Scrollable -->
         </div>
         <div class="card-body">
            <h5 class="card-title">Atur Situs</h5>
            <?php
            if (isset($_GET['notif'])) {
               if ($_GET['notif'] == "berhasil_tambah_data") {
                  echo '
                       <div class="alert alert-success" role="alert">
                           Berhasil menambahkan data.
                       </div>
                   ';
               } else if ($_GET['notif'] == "berhasil_ubah_data") {
                  echo '
                       <div class="alert alert-success" role="alert">
                           Berhasil mengubah data.
                       </div>
                   ';
               } else if ($_GET['notif'] == "berhasil_hapus_data") {
                  echo '
                       <div class="alert alert-success" role="alert">
                           Berhasil menghapus data.
                       </div>
                   ';
               }
            }
            ?>
            <?php
            include "koneksi.php";

            // Ambil data dari database
            $qry_hadiah = mysqli_query($koneksi, "SELECT * FROM atur_situs WHERE id='1'") or die("Query Error: " . mysqli_error($koneksi));
            $dt_bank = mysqli_fetch_array($qry_hadiah);

            $nama_situs = $dt_bank['nama_situs'] ?? '';
            $title_situs = $dt_bank['title_situs'] ?? '';
            $meta_deskripsi = $dt_bank['meta_deskripsi'] ?? '';
            $logo = $dt_bank['logo'] ?? '';
            $favicon = $dt_bank['favicon'] ?? '';
            $slider_banner = $dt_bank['slider_banner'] ?? '';
            $background_situs_choice = $dt_bank['background_situs_choice'] ?? '';
            $background_situs_image = $dt_bank['background_situs'] ?? '';
            $background_situs_color = $dt_bank['background_situs_color'] ?? '';
            $link_daftar = $dt_bank['link_daftar'] ?? '';
            $link_login = $dt_bank['link_login'] ?? '';
            $root_color = $dt_bank['root_color'] ?? '';
            ?>

            <form action="prs_ubah_web.php" method="post" enctype="multipart/form-data">
               <div class="form-group row mb-3">
                  <label for="nama_situs" class="col-4 col-form-label">Nama Situs</label>
                  <div class="col-8">
                     <input id="nama_situs" name="nama_situs" value="<?php echo $nama_situs; ?>" type="text"
                        class="form-control">
                  </div>
               </div>

               <div class="form-group row mb-3">
                  <label for="title_situs" class="col-4 col-form-label">Title Situs</label>
                  <div class="col-8">
                     <input id="title_situs" name="title_situs" value="<?php echo $title_situs; ?>" type="text"
                        class="form-control">
                  </div>
               </div>

               <div class="form-group row mb-3">
                  <label for="meta_deskripsi" class="col-4 col-form-label">Meta Deskripsi</label>
                  <div class="col-8">
                     <textarea id="meta_deskripsi" name="meta_deskripsi" cols="40" rows="5"
                        class="form-control"><?php echo $meta_deskripsi; ?></textarea>
                  </div>
               </div>
               <div class="form-group row">
                  <label for="logo" class="col-4 col-form-label">Logo</label>
                  <div class="col-8">
                     <input id="logo" name="logo" type="file" class="form-control">
                     <?php if ($logo): ?>
                        <br>
                        <small>File saat ini: <?php echo $logo; ?></small><br>
                        <img src="../img/<?php echo $logo; ?>" alt="Logo" style="max-width:150px;">
                     <?php endif; ?>
                  </div>
               </div>
               <!-- Favicon -->
               <div class="form-group row">
                  <label for="favicon" class="col-4 col-form-label">Favicon</label>
                  <div class="col-8">
                     <input id="favicon" name="favicon" type="file" class="form-control">
                     <?php if ($favicon): ?>
                        <br>
                        <small>File saat ini: <?php echo $favicon; ?></small><br>
                        <img src="../img/<?php echo $favicon; ?>" alt="Favicon" style="max-width:50px;">
                     <?php endif; ?>
                  </div>
               </div>


               <!-- Pilihan Background -->
               <div class="form-group row mb-3">
                  <label class="col-4 col-form-label">Pilih Background Situs</label>
                  <div class="col-8">
                     <div>
                        <input type="radio" id="background_image" name="background_situs_choice" value="image" <?php echo ($background_situs_choice == 'image' ? 'checked' : ''); ?>>
                        <label for="background_image">Menggunakan Gambar</label>
                     </div>
                     <div>
                        <input type="radio" id="background_color" name="background_situs_choice" value="color" <?php echo ($background_situs_choice == 'color' ? 'checked' : ''); ?>>
                        <label for="background_color">Menggunakan Warna</label>
                     </div>
                  </div>
               </div>

               <!-- Input Gambar Background -->
               <div id="background_image_input" class="form-group row mb-3"
                  style="display: <?php echo ($background_situs_choice == 'image' ? 'block' : 'none'); ?>;">
                  <label for="background_situs_image" class="col-4 col-form-label">Pilih Gambar Background</label>
                  <div class="col-8">
                     <input id="background_situs_image" name="background_situs_image" type="file" class="form-control">
                     <?php if ($background_situs_image): ?>
                        <br>
                        <img src="../img/<?php echo $background_situs_image; ?>" alt="Background" style="max-width:150px;">
                     <?php endif; ?>
                  </div>
               </div>

               <!-- Input Warna Background -->
               <div id="background_color_input" class="form-group row mb-3"
                  style="display: <?php echo ($background_situs_choice == 'color' ? 'block' : 'none'); ?>;">
                  <label for="background_situs_color" class="col-4 col-form-label">Pilih Warna Background</label>
                  <div class="col-8">
                     <input id="background_situs_color" name="background_situs_color" type="color" class="form-control"
                        value="<?php echo $background_situs_color; ?>">
                  </div>
               </div>

               <!-- Input Root Color -->
               <div class="form-group row mb-3">
                  <label for="link_daftar" class="col-4 col-form-label">Link Daftar</label>
                  <div class="col-8">
                     <input id="link_daftar" name="link_daftar" value="<?php echo $link_daftar; ?>" type="text"
                        class="form-control">
                  </div>
               </div>

               <div class="form-group row mb-3">
                  <label for="link_login" class="col-4 col-form-label">Link Login</label>
                  <div class="col-8">
                     <input id="link_login" name="link_login" value="<?php echo $link_login; ?>" type="text"
                        class="form-control">
                  </div>
               </div>

               <div class="form-group row mb-3">
                  <div class="offset-4 col-8">
                     <button name="submit" type="submit" class="btn btn-primary">Submit</button>
                  </div>
               </div>
            </form>

            <script>
               document.addEventListener("DOMContentLoaded", function () {
                  const bgChoiceInputs = document.querySelectorAll('input[name="background_situs_choice"]');
                  const bgImageInput = document.getElementById("background_image_input");
                  const bgColorInput = document.getElementById("background_color_input");

                  function toggleBackgroundInputs() {
                     const selected = document.querySelector('input[name="background_situs_choice"]:checked').value;
                     bgImageInput.style.display = (selected === "image") ? "block" : "none";
                     bgColorInput.style.display = (selected === "color") ? "block" : "none";
                  }

                  bgChoiceInputs.forEach(input => input.addEventListener("change", toggleBackgroundInputs));

                  toggleBackgroundInputs();
               });
            </script>

            <script>
               // Script untuk mengubah tampilan input berdasarkan pilihan radio button
               document.querySelectorAll('input[name="background_situs_choice"]').forEach(function (element) {
                  element.addEventListener('change', function () {
                     var selectedChoice = document.querySelector('input[name="background_situs_choice"]:checked').value;

                     if (selectedChoice == 'image') {
                        document.getElementById('background_image_input').style.display = 'block';
                        document.getElementById('background_color_input').style.display = 'none';
                     } else {
                        document.getElementById('background_image_input').style.display = 'none';
                        document.getElementById('background_color_input').style.display = 'block';
                     }
                  });
               });
            </script>

         </div>
      </div>
   </section>
</main>
<!-- End #main -->