<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
      <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
      <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        html, body {
          display: flex;
            grid-template-rows: 80px auto 1fr auto 50px;
            grid-template-columns: 1fr 4fr 1fr;
            height: 100vh;
            width: 100%;
            background: conic-gradient(from -45deg, #ca49f7, #5a8ade, #62c6e0, #ca49f7);
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
         @media (max-width: 678px)
          grid-template-rows: 50px 50px 50px 1fr 
          50px 50px 50px;
            
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 10px;
            
        }

        .navigation {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 70px;
            background: linear-gradient(45deg, #2196f3, #e91e63);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-radius: 50px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
        }

        .navigation ul {
            display: flex;
            width: 680px;
        }

        .navigation ul li {
            position: relative;
            width: 70px;
            height: 30px;
            list-style: none;
            z-index: 2;
        }

        .navigation ul li a {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            text-align: center;
            font-weight: 500;
        }

        .navigation ul li a .icon {
            position: relative;
            display: block;
            line-height: 75px;
            font-size: 1.5em;
            text-align: center;
            color: #fff;
            transition: .5s;
        }

        .navigation ul li.active a .icon {
            transform: translateY(-30px);
        }

        .navigation ul li a .text {
            position: absolute;
            color: #fff;
            font-weight: 400;
            font-size: .75em;
            letter-spacing: .05em;
            opacity: 0;
            transform: translateY(20px);
            transition: .5s;
        }

        .navigation ul li.active a .text {
            opacity: 1;
            transform: translateY(10px);
        }

        .navigation ul li a .circle {
            position: absolute;
            display: block;
            width: 50px;
            height: 50px;
            background: transparent;
            border-radius: 50%;
            border: 1.8px solid #fff;
            transform: translateY(-37px) scale(0);
        }

        .navigation ul li.active a .circle {
            transition: .5s;
            transition-delay: .5s;
            transform: translateY(-37px) scale(1);
        }

        .indicator {
            position: absolute;
            top: -50%;
            width: 70px;
            height: 70px;
            background: linear-gradient(45deg, #2196f3, #e91e63);
            border: 6px solid #06021b;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: .5s;
        }

        .indicator::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -22px;
            width: 20px;
            height: 20px;
            background: transparent;
            border-top-right-radius: 20px;
            box-shadow: 1px -10px 0 #06021b;
        }

        .indicator::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -22px;
            width: 20px;
            height: 20px;
            background: transparent;
            border-top-left-radius: 20px;
            box-shadow: -1px -10px 0 #06021b;
        }

        .navigation ul li:nth-child(1).active~.indicator {
            transform: translateX(calc(70px * 0));
        }

        .navigation ul li:nth-child(2).active~.indicator {
            transform: translateX(calc(75px * 1));
        }

        .navigation ul li:nth-child(3).active~.indicator {
            transform: translateX(calc(70px * 2));
        }

        .navigation ul li:nth-child(4).active~.indicator {
            transform: translateX(calc(70px * 3));
        }

        .navigation ul li:nth-child(5).active~.indicator {
            transform: translateX(calc(70px * 4));
        }

        /* Form Styles */
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
            padding: 10px;
            background-color: #eef2f3;
            flex: 1;
            display: 100%;
            justify-content: center;
            align-items: center;
            position: relative; /* Untuk menempatkan elemen dengan benar */
            
        }
        .holder {
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 25px;
            width: 90vw;
            max-width: 450%;
            background-color: white;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            margin: -5% auto -20px; /* Menggeser ke atas dengan margin negatif */
        }
                /* Media query untuk responsif */
        @media (max-width: 768px) {
            .holder {
                width: 95%; /* Lebar holder lebih besar di perangkat kecil */
            }
        .notification {
            position: fixed;
            top: 20px;
            left: 20px;
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border-radius: 5px;
            display: none;
            z-index: 1000;
        }
        label {
            font-weight: bold;
            margin-top: 10px;
            display: block;
        }
        input, select, textarea, button {
            border-radius: 5px;
            border: 1px solid #ccc;
            padding: 10px;
            width: calc(100% - 22px);
            margin-top: 5px;
            margin-bottom: 15px;
            font-size: 14px;
            transition: border 0.3s;
        }
        input:focus, select:focus, textarea:focus {
            border-color: #4CAF50; 
            outline: none; 
        }
        button {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            border: none;
            padding: 12px;
            font-size: 15px;
            transition: background-color 0.3s;
            border-radius: 5px;
            width: 90%;
        }
        button:hover {
            background-color: #45a049;
        }
        textarea {
            resize: none; 
            height: 80px; 
        }
        .floating-button {
            position: fixed;
  bottom: 50px;
  right: 20px;
  background-color: #28a745;
  color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1000;
            transition: background-color 0.3s;
        }
         .floating-button img {
            width: 50px; /* Atur ukuran ikon */
            height: 50px; /* Atur ukuran ikon */
         }
         
        .floating-button:hover {
            background-color: #45a049;
        }
        .social-icons {
            position: fixed;
  bottom: 65px; /* sejajar atau sedikit di atas tombol */
  right: 90px; /* geser ke kiri dari floating button */
  display: none;
  flex-direction: row; /* <-- Ini bikin horizontal! */
  align-items: center;
  gap: 10px;
  z-index: 999;
        }
        .social-icon {
            background-color: white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: transform 0.3s;
        }
        .social-icon:hover {
            transform: scale(1.1);
        }
    </style>
    <title>Gkpb-Mdc Jombang</title>
    <link rel="icon" href="https://mdcjombang.my.id/asecet/icon.png" type="image/x-icon">
</head>
<body>

<!-- Ikon Sosial -->
<div class="social-icons" id="socialIcons">
    <div class="social-icon" onclick="window.open('https://wa.me/+6285855554893', '_blank')">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp" width="25" height="25">
    </div>
    <div class="social-icon" onclick="window.open('https://www.instagram.com/mdc.jombang?igsh=Y2RhaGd0d3A4cHVh', '_blank')">
        <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" alt="Instagram" width="25" height="25">
    </div>
</div>

<!-- Tombol Mengambang -->
<button class="floating-button" id="toggleSocial">
    <img src="https://mdcjombang.my.id/asecet/support.gif" alt="Icon"> <!-- Mengganti tanda + dengan ikon -->
</button>

<div class="holder">
    <h2 style="text-align: center;">Formulir Online</h2>
    <form id="kirimForm">
        <label for="nama">Nama :</label>
        <input type="text" id="nama" name="nama" required>

        <label for="kategori">Pilih Permintaan:</label>
        <select id="kategori" name="Permintaan" required>
            <option value="" disabled selected>Pilih Permintaan</option> <!-- Perbaikan di sini -->
            <option value="Permintaan Doa / Konseling">Jemaat Baru/Ingin Bergabung Kesan</option>
            <option value="Ingin Bergabung Kesan">Permintaan Doa/Konseling</option>
           <option value="Pemuridan">Kelas Pemuridan</option>
           <option value="Baptis">Baptis</option>
            <option value="Penyerahan Anak">Penyerahan Anak</option>
            <option value="Terima Yesus">Terima Yesus/Berkomitmen Kembali</option>
        </select>

        <label for="nomorWa">Nomor telepon/wa :</label>
        <input type="number" id="nomorWa" name="WhatsApp" required>

        <label for="alamat">Alamat Lengkap :</label>
        <input type="text" id="alamat" name="alamat" required>

        <label for="keterangan">Keterangan/catatan :</label>
        <textarea id="keterangan" name="keterangan" required></textarea>

        <button type="submit" data-aos="zoom-in" data-aos-duration="2500">Kirim</button>
            <h2 style="text-align: center;">Kami di sini untuk Anda. Isi formulir ini untuk menghubungi kami.</h2>
    </form>
</div>

<div class="notification" id="notification"></div>

<script>
    document.getElementById('toggleSocial').addEventListener('click', function() {
        const socialIcons = document.getElementById('socialIcons');
        if (socialIcons.style.display === 'flex') {
            socialIcons.style.display = 'none';
        } else {
            socialIcons.style.display = 'flex';
        }
    });

    document.getElementById('kirimForm').addEventListener('submit', function(event) {
        event.preventDefault(); 

        const formData = new FormData(this);
        const data = {};
        formData.forEach((value, key) => {
            data[key] = value;
        });

        fetch('https://api.telegram.org/bot7494680569:AAFE4m37_G-Dp8PHsQdE0ELDHz3DMqErkhc/sendMessage', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                chat_id: '-1002323505660',
                text: JSON.stringify(data, null, 2) 
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Respon jaringan tidak baik: ' + response.statusText);
            }
            return response.json();
        })
        .then(responseData => {
            console.log(responseData);
            var notification = document.getElementById('notification');
            notification.textContent = 'Terima Kasih Kami Segera Menghubungi Anda';
            notification.style.display = 'block';

            setTimeout(function() {
                notification.style.display = 'none';
                location.reload(); 
            }, 3000);
        })
        .catch(error => {
            console.error('Error:', error);
            var notification = document.getElementById('notification');
            notification.textContent = 'Gagal Kirim! coba lagi natik ' + error.message; 
            notification.style.display = 'block';
        });
    });
</script>

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script>
    const list = document.querySelectorAll('.list');

    function activeLink() {
        list.forEach((item) =>
            item.classList.remove('active'));
        this.classList.add('active');
    }

    list.forEach((item) =>
        item.addEventListener('click', activeLink));
</script>
<script>
  AOS.init();
</script>
</body>
</html>
