<?php
include 'config/database.php';

$sql = "SELECT * FROM profil LIMIT 1"; // Ambil semua data dari tabel profil
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    
    // Menyimpan data ke variabel masing-masing
    $profil_nama = $row["profil_nama"];
    $profil_alamat = $row["profil_alamat"];
    $profil_gambarcover = $row["profil_gambarcover"];
    $profil_desmasjid = $row["profil_desmasjid"];
    $profil_gambarstruktur = $row["profil_gambarstruktur"];
    $profil_gambardonasi = $row["profil_gambardonasi"];
    $profil_rekening = $row["profil_rekening"];
    $profil_dompet = $row["profil_dompet"];
    $profil_maps = $row["profil_maps"];
    $profil_alamatlengkap = $row["profil_alamatlengkap"];
    $profil_nohp = $row["profil_nohp"];
    $profil_facebook = $row["profil_facebook"];
    $profil_instagram = $row["profil_instagram"];
} else {
    // Jika tidak ada data, isi dengan nilai default
    $profil_nama = "Nama tidak ditemukan";
    $profil_alamat = "Alamat tidak ditemukan";
    $profil_gambarcover = "";
    $profil_desmasjid = "";
    $profil_gambarstruktur = "";
    $profil_gambardonasi = "";
    $profil_rekening = "Rekening tidak ditemukan";
    $profil_dompet = "Dompet tidak ditemukan";
    $profil_maps = "Maps tidak ditemukan";
    $profil_alamatlengkap = "Alamat Lengkap tidak ditemukan";
    $profil_nohp = "No HP tidak ditemukan";
    $profil_facebook = "Facebook tidak ditemukan";
    $profil_instagram = "Instagram tidak ditemukan";
}


$sql = "SELECT * FROM admin LIMIT 1"; 
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    
    // Menyimpan data ke variabel masing-masing
    $admin_nohp = $row["admin_nohp"];
    $admin_email = $row["admin_email"];

}

// Ambil semua data kegiatan, urut berdasarkan tanggal mulai secara naik
$sql = "SELECT * FROM kegiatan ORDER BY kegiatan_tglmulai DESC LIMIT 8";
$result = $conn->query($sql);

$all_berita = [];
while ($row = $result->fetch_assoc()) {
    $all_berita[] = $row;
}

// Bagi datanya tanpa duplikat
$berita_utama = isset($all_berita[0]) ? $all_berita[0] : null;
$berita_standar = array_slice($all_berita, 1, 3);  // Ambil data ke-1 sampai ke-3
$berita_menurun = array_slice($all_berita, 4);     // Ambil sisanya


// Mendapatkan bulan dan tahun saat ini
$bulan_sekarang = date('m');
$tahun_sekarang = date('Y');
$bulanInggris = date('F');

function bulanIndonesia($bulanInggris) {
    $bulan = [
        'January' => 'Januari', 'February' => 'Februari', 'March' => 'Maret', 'April' => 'April',
        'May' => 'Mei', 'June' => 'Juni', 'July' => 'Juli', 'August' => 'Agustus',
        'September' => 'September', 'October' => 'Oktober', 'November' => 'November', 'December' => 'Desember'
    ];
    return $bulan[$bulanInggris] ?? $bulanInggris;
}

$bulanIndonesia = bulanIndonesia($bulanInggris);

// Ambil data kas untuk bulan dan tahun saat ini
$query = "SELECT * FROM dana_kas 
          WHERE MONTH(kas_tanggal) = $bulan_sekarang 
            AND YEAR(kas_tanggal) = $tahun_sekarang 
          ORDER BY kas_tanggal ASC";
$result = mysqli_query($conn, $query);


// Hitung saldo dari semua transaksi sebelum bulan & tahun ini
$saldo_awal_query = "SELECT 
    SUM(kas_pemasukan) AS pemasukan_awal, 
    SUM(kas_pengeluaran) AS pengeluaran_awal 
    FROM dana_kas 
    WHERE (YEAR(kas_tanggal) < $tahun_sekarang) 
       OR (YEAR(kas_tanggal) = $tahun_sekarang AND MONTH(kas_tanggal) < $bulan_sekarang)";
$saldo_awal_result = mysqli_query($conn, $saldo_awal_query);
$saldo_awal_data = mysqli_fetch_assoc($saldo_awal_result);

$saldo = $saldo_awal_data['pemasukan_awal'] - $saldo_awal_data['pengeluaran_awal'];


function convertToEmbedUrl($url) {
  // Jika URL mengandung iframe (kode HTML)
  if (strpos($url, '<iframe') !== false) {
      // Gunakan regex untuk mengekstrak URL dari tag src
      preg_match('/src="([^"]+)"/', $url, $matches);
      if (!empty($matches[1])) {
          return $matches[1]; // Kembalikan URL yang ditemukan
      }
  }

  // Cek apakah URL adalah short link Google Maps (misalnya, maps.app.goo.gl)
  if (strpos($url, "https://maps.app.goo.gl/") !== false) {
      return ""; // Short URL tidak dapat langsung digunakan
  }

  // Jika URL adalah Google Maps standar
  if (strpos($url, "https://www.google.com/maps") !== false) {
      // Ubah menjadi format embed yang benar
      $embedUrl = str_replace("/maps/place/", "/maps/embed?pb=", $url);
      $embedUrl = str_replace("/maps/", "/maps/embed?pb=", $embedUrl);
      return $embedUrl;
  }

  return ""; // Jika URL tidak cocok dengan format yang bisa digunakan
}


if ($_SERVER["REQUEST_METHOD"] == "POST") {
  // Dapatkan input URL
  $profil_maps = isset($_POST["profil_maps"]) ? trim($_POST["profil_maps"]) : "";

  // Proses URL untuk mendapatkan URL embed yang benar
  $profil_maps = convertToEmbedUrl($profil_maps);

  // Simpan URL embed ke database
  if (!empty($profil_maps)) {
      $sql = "UPDATE profil SET profil_maps = ? WHERE id = 1";
      $stmt = $conn->prepare($sql);
      $stmt->bind_param("s", $profil_maps);
      $stmt->execute();
      $stmt->close();
  }
}

$conn->close();
?>


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Masjid-E</title>

  <meta name="description" content="">
  <meta name="keywords" content="">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com" rel="preconnect">
  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Main CSS File -->
  <link href="assets/css/main.css" rel="stylesheet">


  <style>
    #notif {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 9999;
    }
  </style>
</head>

<body class="index-page">

    <header id="header" class="header d-flex align-items-center fixed-top">
        <div class="container-fluid container-xl position-relative d-flex align-items-center justify-content-between">
            <a href="index.php" class="logo d-flex align-items-center">
            <h1 class="sitename"><?php echo htmlspecialchars($profil_nama); ?></h1>
            </a>
            <nav id="navmenu" class="navmenu">
                <ul>
                    <li><a href="#beranda" class="active">Beranda</a></li>
                    <li><a href="#kegiatan">Kegiatan</a></li>
                    <li><a href="#profil">Profil</a></li>
                    <li><a href="#ikhtisar-kas">Ikhtisar Kas</a></li>
                    <li><a href="#donasi-amal">Donasi Amal</a></li>
                    <li><a href="#kontak">Kontak</a></li>
                    <a class="btn-masuk" href="auth/login.php">Masuk</a>                   
                </ul>
                <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
            </nav>
        </div>
    </header>

  <main class="main">
   <!-- Hero Section -->
<section id="beranda" class="hero section dark-background">
<img src="<?php echo !empty($profil_gambarcover) ? '/assets/img/gambarcover/' . htmlspecialchars($profil_gambarcover) : ''; ?>" 
     alt="Gambar Cover Masjid" class="hero-bg">

    <div class="container text-center">
        <div class="col-lg-6 d-flex flex-column justify-content-center align-items-center text-center" data-aos="fade-in">
          <h1><span><?php echo htmlspecialchars($profil_nama); ?></h1>
          <p><?php echo htmlspecialchars($profil_alamat); ?></p>
        </div>
      </div>
  
    <svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none">
      <defs>
        <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
      </defs>
      <g class="wave1">
        <use xlink:href="#wave-path" x="50" y="3"></use>
      </g>
      <g class="wave2">
        <use xlink:href="#wave-path" x="50" y="0"></use>
      </g>
      <g class="wave3">
        <use xlink:href="#wave-path" x="50" y="9"></use>
      </g>
    </svg>
  </section><!-- /Hero Section -->
  
<!-- Kegiatan Section -->
<section id="kegiatan" class="kegiatan section">
    <div class="container">
        <div class="row">
            <div class="col-xl-12 content text-center">
                <h3>Kegiatan Masjid</h3>
            </div>
        </div>

        <div class="row">
            <!-- Berita Kegiatan Utama -->
            <div class="col-xl-8 main-berita">
            <div class="berita-item main" 
     data-nama="<?= $berita_utama['kegiatan_nama']; ?>"
     data-tanggal="<?= date('d M Y', strtotime($berita_utama['kegiatan_tglmulai'])) . ' - ' . date('d M Y', strtotime($berita_utama['kegiatan_tglakhir'])); ?>"
     data-gambar="assets/img/kegiatan/<?= $berita_utama['kegiatan_gambar']; ?>"
     data-keterangan="<?= htmlspecialchars($berita_utama['kegiatan_keterangan']); ?>"
     onclick="tampilkanPopup(this)">
    <img src="assets/img/kegiatan/<?= $berita_utama['kegiatan_gambar']; ?>" alt="<?= $berita_utama['kegiatan_nama']; ?>">
    <div class="berita-info">
        <h2><?= $berita_utama['kegiatan_nama']; ?></h2>
        <span class="tanggal"><?= date('d M Y', strtotime($berita_utama['kegiatan_tglmulai'])); ?></span>
        <p><?= substr($berita_utama['kegiatan_keterangan'], 0, 750) . '...Lihat Selengkapnya'; ?></p>
    </div>
</div>
            </div>

            <!-- Berita Standar -->
            <div class="col-xl-4 d-flex flex-column berita-standar gap-3">
                <?php foreach ($berita_standar as $berita) : ?>
                    <div class="berita-item"
                         data-nama="<?= $berita['kegiatan_nama']; ?>"
                         data-tanggal="<?= date('d M Y', strtotime($berita['kegiatan_tglmulai'])) . ' - ' . date('d M Y', strtotime($berita['kegiatan_tglakhir'])); ?>"
                         data-gambar="assets/img/kegiatan/<?= $berita['kegiatan_gambar']; ?>"
                         data-keterangan="<?= htmlspecialchars($berita['kegiatan_keterangan']); ?>"
                         onclick="tampilkanPopup(this)">
                        <img src="assets/img/kegiatan/<?= $berita['kegiatan_gambar']; ?>" alt="<?= $berita['kegiatan_nama']; ?>">
                        <div class="berita-info">
                            <h4><?= $berita['kegiatan_nama']; ?></h4>
                            <span class="tanggal"><?= date('d M Y', strtotime($berita['kegiatan_tglmulai'])); ?></span>
<p class="keterangan-kecil"><?= substr($berita['kegiatan_keterangan'], 0, 50) . '...Lihat Selengkapnya'; ?></p>

                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
<!-- Berita Menurun -->
        <div class="row mt-2">
            <?php foreach (array_chunk($berita_menurun, 2) as $berita_chunk) : ?>
                <div class="col-md-6">
                    <?php foreach ($berita_chunk as $berita) : ?>
                        <div class="berita-item menurun mt-2"
                             data-nama="<?= $berita['kegiatan_nama']; ?>"
                             data-tanggal="<?= date('d M Y', strtotime($berita['kegiatan_tglmulai'])) . ' - ' . date('d M Y', strtotime($berita['kegiatan_tglakhir'])); ?>"
                             data-gambar="assets/img/kegiatan/<?= $berita['kegiatan_gambar']; ?>"
                             data-keterangan="<?= htmlspecialchars($berita['kegiatan_keterangan']); ?>"
                             onclick="tampilkanPopup(this)">
                            <img src="assets/img/kegiatan/<?= $berita['kegiatan_gambar']; ?>" alt="<?= $berita['kegiatan_nama']; ?>">
                            <div class="berita-info">
                                <h4><?= $berita['kegiatan_nama']; ?></h4>
                                <span class="tanggal"><?= date('d M Y', strtotime($berita['kegiatan_tglmulai'])); ?></span>
<p class="keterangan-kecil"><?= substr($berita['kegiatan_keterangan'], 0, 50) . '...Lihat Selengkapnya'; ?></p>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
  
<!-- About Section -->
<section id="profil" class="about section">
  <div class="container" data-aos="fade-up" data-aos-delay="100">
    <div class="row align-items-center gy-3">
      <div class="col-xl-12 content text-center">
        <h3>Profil Masjid</h3>
      </div>
      <div class="col-xl-6 content">
        <h2><?php echo htmlspecialchars($profil_nama); ?></h2>
        <p><?php echo htmlspecialchars($profil_desmasjid); ?></p>
      </div>

      <div class="col-xl-6">
        <div class="about-img-wrapper">
          <h3 class="img-title">Struktur Pengurus Masjid</h3>
          <img src="<?php echo !empty($profil_gambarstruktur) ? '/assets/img/gambarstruktur/' . htmlspecialchars($profil_gambarstruktur) : ''; ?>" 
     alt="Struktur Pengurus Masjid" id="zoomImg">
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /About Section -->


  <!-- Ikhtisar Kas Section -->
<section id="ikhtisar-kas" class="ikhtisar-kas section">
  <div class="container">
    <div class="row">
      <div class="col-xl-12 content text-center">
        <h3>Ikhtisar Kas Masjid</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-12">
        <div class="table-responsive">
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
              <th colspan="6">Bulan <?php echo $bulanIndonesia . " " . $tahun_sekarang; ?></th>
              </tr>
              <tr>
                <th>No.</th>
                <th>Tanggal</th>
                <th>Pemasukan</th>
                <th>Pengeluaran</th>
                <th>Keterangan</th>
                <th>Saldo Akhir</th>
              </tr>
            </thead>
            <tbody>
              <?php
              $no = 1;
              while ($row = mysqli_fetch_assoc($result)) {
                $tanggal = date('d-m-Y', strtotime($row['kas_tanggal']));
                $pemasukan = $row['kas_pemasukan'];
                $pengeluaran = $row['kas_pengeluaran'];
                $keterangan = $row['kas_keterangan'];
                  
      // Hitung saldo berjalan
      $saldo += $pemasukan - $pengeluaran;
                  
                  echo "<tr>
                          <td>{$no}</td>
                          <td>{$tanggal}</td>
                          <td>Rp " . number_format($pemasukan, 0, ',', '.') . "</td>
                          <td>Rp " . number_format($pengeluaran, 0, ',', '.') . "</td>
                          <td>{$keterangan}</td>
                          <td>Rp " . number_format($saldo, 0, ',', '.') . "</td>
                        </tr>";
                  $no++;
              }
              ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /Ikhtisar Kas Section -->
  
  <!-- Donasi Amal Section -->
  <section id="donasi-amal" class="donasi-amal section">
    <div class="container">
      <!-- Judul Donasi Amal -->
      <div class="row">
        <div class="col-xl-12 content text-center">
          <h3>Donasi Amal</h3>
        </div>
      </div>
      <div class="row align-items-center">
<!-- QRIS Barcode -->
<div class="col-md-4 text-center">
    <img src="<?php echo !empty($profil_gambardonasi) ? '/assets/img/gambardonasi/' . htmlspecialchars($profil_gambardonasi) : ''; ?>" 
         alt="QRIS Barcode" class="qris-barcode" id="zoomImg">
</div>

        <!-- Keterangan Pembayaran -->
        <div class="col-md-8">
          <div class="keterangan-donasi">
            <h4>Informasi Pembayaran</h4>
            <p><strong>Nomor Rekening:</strong> <?php echo htmlspecialchars($profil_rekening); ?></p>
            <p><strong>Nomor E-Wallet:</strong> <?php echo htmlspecialchars($profil_dompet); ?></p>
            <p><strong>Metode Pembayaran Lainnya:</strong> Link, Dana, OVO, dll.</p>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#donasiModal">
            Donasi Sekarang
          </button>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- /Donasi Amal Section -->
  
<!-- Contact Section -->
<section id="kontak" class="contact section">
    <!-- Section Title -->
    <div class="container section-title" data-aos="fade-up">
      <h3>Kontak</h3>
    </div><!-- End Section Title -->
  
    <div class="container" data-aos="fade" data-aos-delay="100">
      <div class="row gy-4">

        <!-- Google Maps -->
        <div class="col-lg-8">
    <div class="map-container" data-aos="fade-up" data-aos-delay="200">
        <?php if (!empty($profil_maps)): ?>
            <iframe src="<?php echo htmlspecialchars($profil_maps); ?>" 
                    width="100%" height="400" style="border:0;" 
                    allowfullscreen="" loading="lazy"></iframe>
        <?php else: ?>
            <p>Google Maps tidak dapat ditampilkan. Harap gunakan URL Google Maps yang valid.</p>
        <?php endif; ?>
    </div>
</div>

        <!-- Contact Information -->
        <div class="col-lg-4">
          <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="200">
            <i class="bi bi-geo-alt flex-shrink-0"></i>
            <div>
              <h3>Alamat</h3>
              <p><?php echo htmlspecialchars($profil_alamatlengkap); ?></p>
            </div>
          </div><!-- End Info Item -->
  
          <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="300">
            <i class="bi bi-telephone flex-shrink-0"></i>
            <div>
              <h3>Nomor HP</h3>
              <p><?php echo htmlspecialchars($admin_nohp); ?></p>
            </div>
          </div><!-- End Info Item -->
  
          <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="400">
            <i class="bi bi-envelope flex-shrink-0"></i>
            <div>
              <h3>Email</h3>
              <p><?php echo htmlspecialchars($admin_email); ?></p>
            </div>
          </div><!-- End Info Item -->
        </div>
      </div>
  
      <!-- WhatsApp Button -->
      <div class="row">
        <div class="col-md-12 text-center mt-4">
          <a href="https://wa.me/<?php echo htmlspecialchars($profil_nohp); ?>" class="btn-whatsapp" target="_blank">Hubungi Via WhatsApp</a>
        </div>
      </div>
    </div>
  </section><!-- /Contact Section -->

  <!-- Modal Form Donasi -->
<div class="modal fade" id="donasiModal" tabindex="-1" aria-labelledby="donasiModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="donasiModalLabel">Form Donasi</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="proses_tambah_donasi.php" method="post" enctype="multipart/form-data" id="donasiForm">
          <div class="mb-3">
            <label for="name" class="form-label">Nama Donatur</label>
            <input type="text" class="form-control" id="name" name="nama_donatur" required>
          </div>
          <div class="mb-3">
            <label for="amount" class="form-label">Jumlah Nominal Donasi</label>
            <input type="number" class="form-control" id="amount" name="jumlah_donasi" min="10000" required>
          </div>
          <div class="mb-3">
            <label for="payment_method" class="form-label">Metode Pembayaran</label>
            <select class="form-select" id="payment_method" name="metode_pembayaran" required>
            <option value="" disabled selected>-- Pilih Metode Pembayaran --</option>
              <option value="Transfer Bank">Transfer Bank</option>
              <option value="E-Wallet">E-Wallet</option>
            </select>
          </div>
          <div class="mb-3">
  <label for="description" class="form-label">Keterangan Donasi</label>
  <select class="form-select" id="description" name="keterangan" required>
  <option value="" disabled selected>-- Pilih Keterangan --</option>
    <option value="Infaq">Infaq</option>
    <option value="Shadaqah">Shadaqah</option>
    <option value="Zakat">Zakat</option>
    <option value="Kurban">Kurban</option>
  </select>
</div>

          <div class="mb-3">
            <label for="donation_proof" class="form-label">Bukti Donasi (JPG, PNG, Maks 2MB)</label>
            <input class="form-control" type="file" id="donation_proof" name="bukti_donasi" accept=".jpg, .jpeg, .png" required>
            <small class="text-muted">Unggah bukti pembayaran dalam format JPG atau PNG.</small>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Lakukan Donasi</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div><!-- /Modal Form Donasi -->

<?php if (isset($_GET['donasi_id'])): ?>
<div class="modal fade show" id="donasiSuccessModal" tabindex="-1" style="display: block;" aria-modal="true" role="dialog">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Donasi Berhasil</h5>
      </div>
      <div class="modal-body">
        <p>Terima kasih telah berdonasi. Bukti donasi telah tersimpan.</p>
      </div>
      <div class="modal-footer">
        <a href="cetak_bukti_donasi.php?donasi_id=<?php echo $_GET['donasi_id']; ?>" target="_blank" class="btn btn-primary">Cetak Bukti Donasi</a>
        <button type="button" class="btn btn-secondary" onclick="closeModal()">Tutup</button>
      </div>
    </div>
  </div>
</div>

<script>
  function closeModal() {
    document.getElementById('donasiSuccessModal').style.display = 'none';
  }
</script>
<?php endif; ?>

<!-- Popup Detail Kegiatan -->
<div id="popupKegiatan" class="popup-kegiatan" style="display:none;">
    <div class="popup-content">
        <span class="popup-close" onclick="tutupPopup()">&times;</span>
        <img id="popupGambar" src="" alt="Gambar Kegiatan">
        <h3 id="popupNama"></h3>
        <p class="popup-tanggal" id="popupTanggal"></p>
        <p id="popupKeterangan"></p>
    </div>
</div>

  
<!-- Footer Section -->
<footer id="footer" class="footer dark-background">

    <div class="container footer-top">
      <div class="row gy-4">
        <div class="col-lg-4 col-md-6 footer-about">
          <a href="index.php" class="logo d-flex align-items-center">
            <span class="sitename">Masjid Darussalam</span>
          </a>
          <div class="footer-contact pt-3">
          <p><?php echo htmlspecialchars($profil_alamatlengkap); ?></p>
            <p class="mt-3"><strong>Ikuti Sosial Media:</strong></p>
          </div>
          <div class="social-links d-flex mt-4">
          <a href="<?php echo htmlspecialchars($profil_facebook); ?>" target="_blank">
    <i class="bi bi-facebook"></i>
</a>
<a href="<?php echo htmlspecialchars($profil_instagram); ?>" target="_blank">
    <i class="bi bi-instagram"></i>
</a>

          </div>
        </div>
  
        <div class="col-lg-2 col-md-3 footer-links">
          <h4>Halaman</h4>
          <ul>
            <li><a href="#home">Beranda</a></li>
            <li><a href="#kegiatan">Kegiatan</a></li>
            <li><a href="#profil">Profil</a></li>
            <li><a href="#ikhtisar-kas">Ikhtisar Kas</a></li>
            <li><a href="#donasi">Donasi Amal</a></li>
            <li><a href="#kontak">Kontak</a></li>
          </ul>
        </div>
      
        <div class="col-lg-4 col-md-12 footer-newsletter">
  <h4>Izin Kegiatan</h4>
  <p>Izin kegiatan kajian atau pengajian majelis taklim dan acara Islami lainnya di sini: 
    <strong><a href="https://docs.google.com/document/d/1ouq4KLLNttSPvq4cw50KOWazTW03zSm84CZtSGQhzZ0/edit?usp=sharing" target="_blank" style="color: #FFFFFF;">Dokumen Izin Kegiatan</a></strong>
  </p>
</div>

      </div>
    </div>

    <div class="footer-copyright">
      <div class="container text-center mt-4">
        <p><span>Copyright</span> ©<strong class="px-1 sitename">Masjid - E</strong> <span>All Rights Reserved</span></p>
        <div class="credits">
          Designed by <a href="https://bangparid.com/">Bangparid.com</a>
        </div>
      </div>
    </div>
  
  </footer>
  <!-- Scroll Top -->
  <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Preloader -->
  <div id="preloader"></div>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>

  <!-- Main JS File -->
  <script src="assets/js/main.js"></script>
  <script>
    // Hilangkan notifikasi setelah 3 detik
    setTimeout(function() {
        var notif = document.getElementById('notif');
        if (notif) {
            notif.style.display = 'none';
        }
    }, 3000);
  </script>


<script>
  document.getElementById("donasiForm").addEventListener("submit", function(event) {
    let amount = document.getElementById("amount").value;
    let file = document.getElementById("donation_proof").files[0];

    if (amount < 10000) {
      alert("Minimal donasi adalah Rp10.000!");
      event.preventDefault();
    }

    if (file) {
      let allowedExtensions = ["image/jpeg", "image/png"];
      let maxSize = 2 * 1024 * 1024; // 2MB

      if (!allowedExtensions.includes(file.type)) {
        alert("Format bukti donasi harus JPG atau PNG!");
        event.preventDefault();
      }

      if (file.size > maxSize) {
        alert("Ukuran file maksimal 2MB!");
        event.preventDefault();
      }
    }
  });
</script>

<script>
function tampilkanPopup(element) {
    const nama = element.getAttribute('data-nama');
    const tanggal = element.getAttribute('data-tanggal');
    const gambar = element.getAttribute('data-gambar');
    const keterangan = element.getAttribute('data-keterangan');

    document.getElementById('popupNama').innerText = nama;
    document.getElementById('popupTanggal').innerText = tanggal;
    document.getElementById('popupGambar').src = gambar;
    document.getElementById('popupKeterangan').innerText = keterangan;

    document.getElementById('popupKegiatan').style.display = 'flex';
}

function tutupPopup() {
    document.getElementById('popupKegiatan').style.display = 'none';
}
</script>


</body>

</html>