One Hat Cyber Team

View File Name : 6b7f3bed648740f77b2c75cb2320c203.php

<html lang="id">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>   <?php echo e(isset($setting) ? $setting->name . ' - Penyedia Layanan Internet' : 'Nama Perusahaan - Penyedia Layanan Internet'); ?></title>
    <?php echo app('Illuminate\Foundation\Vite')('resources/js/app.js'); ?>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
    <style>
        body {
            font-family: "Inter", sans-serif;
        }

        #map {
            width: 100%;
            height: 300px;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3),
                0 4px 6px -2px rgba(59, 130, 246, 0.2);
            margin-bottom: 1rem;
        }
        .custom-map-control-button {
            background-color: #fff;
            border: 0;
            border-radius: 2px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
            margin: 10px;
            padding: 0 0.5em;
            font: 400 18px Roboto, Arial, sans-serif;
            overflow: hidden;
            height: 40px;
            cursor: pointer;
        }
    </style>
     <script>
        const googleMapsApiKey = "<?php echo e(config('services.google_maps.key')); ?>";
        (g => {
            var h, a, k, p = "The Google Maps JavaScript API",
                c = "google",
                l = "importLibrary",
                q = "__ib__",
                m = document,
                b = window;
            b = b[c] || (b[c] = {});
            var d = b.maps || (b.maps = {}),
                r = new Set,
                e = new URLSearchParams,
                u = () => h || (h = new Promise(async (f, n) => {
                    await (a = m.createElement("script"));
                    e.set("libraries", [...r] + "");
                    for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
                    e.set("callback", c + ".maps." + q);
                    a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
                    d[q] = f;
                    a.onerror = () => h = n(Error(p + " could not load."));
                    a.nonce = m.querySelector("script[nonce]")?.nonce || "";
                    m.head.append(a)
                }));
            d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() =>
                d[l](f, ...n))
        })
        ({
            key: googleMapsApiKey,
            v: "weekly"
        });
    </script>

</head>

<body class="bg-gray-50 text-gray-800">
    <header class="bg-white shadow fixed w-full z-30">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <a class="flex items-center space-x-3" href="<?php echo e(route('homepage')); ?>" id="nav-home">
                    <img alt="" class="h-12 w-12 object-contain" height="48"
                        src="<?php echo e(isset($setting) ? asset('storage/images/' . $setting->images) : url('assets/static/images/blank.png')); ?>"
                        width="48" />
                    <span class="font-bold text-xl text-blue-600">
                        <?php echo e(isset($setting) ? $setting->name : '{Nama Perusahaan}'); ?>

                    </span>
                </a>
                <nav class="hidden md:flex space-x-8 font-semibold text-gray-700" id="nav-main">
                    <a class="hover:text-blue-600 transition" href="<?php echo e(route('homepage')); ?>" id="nav-home-link">Home</a>
                    
                </nav>
                <button aria-label="Toggle menu"
                    class="md:hidden text-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-600"
                    id="mobile-menu-button">
                    <i class="fas fa-bars fa-lg"></i>
                </button>
            </div>
        </div>
        <nav aria-label="Mobile menu" class="md:hidden bg-white border-t border-gray-200 hidden" id="mobile-menu">
            <a class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 font-semibold"
                href="<?php echo e(route('homepage')); ?>" id="mobile-nav-home">Home</a>
            
        </nav>
    </header>
    <main class="pt-20 max-w-4xl mx-auto px-6 sm:px-12 lg:px-16 pb-16">
        <h1 class="text-3xl font-extrabold text-center text-blue-700 mb-8">Form Pendaftaran</h1>
        <div id="map" role="region" ></div>
        <div class="flex justify-center mb-6">
            

        </div>
        <p class="text-center mt-4" style="margin-bottom: 1cm;">
            Tekan tombol "Lokasi Saya" terlebih dahulu untuk mendapatkan titik koordinat rumah Anda
        </p>
        <?php if($errors->any()): ?>
            <div class="alert alert-danger">
                <ul>
                    <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <li><?php echo e($error); ?></li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ul>
            </div>
        <?php endif; ?>
        <form action="<?php echo e(route('form.store')); ?>" method="POST" enctype="multipart/form-data">
            <?php echo csrf_field(); ?>
            <!-- Baris 1: nik, nama, alamat, tgl lahir -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <!-- Baris pertama: NIK -->
                

                <!-- Baris kedua: Nama Lengkap -->
                <div class="sm:col-span-2">
                    <label class="block text-gray-700 font-semibold mb-2" for="nama">Nama Lengkap</label>
                    <input
                        class="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                        id="name" name="name" placeholder="Masukkan nama lengkap" required type="text" />
                </div>

                <!-- Baris ketiga: Tanggal Lahir dan Email -->
                <div>
                    <label class="block text-gray-700 font-semibold mb-2" for="tgl_lahir">Tanggal Lahir</label>
                    <input
                        class="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                        id="birthday" name="birthday" required type="date" />
                </div>
                <div>
                    <label class="block text-gray-700 font-semibold mb-2" for="email">Email</label>
                    <input
                        class="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                        id="email" name="email" placeholder="Masukkan email" required type="email" />
                </div>
                     <div class="sm:col-span-2">
                    <label class="block text-gray-700 font-semibold mb-2" for="no_hp">No HP</label>
                    <input
                        class="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                        id="phone" name="phone" placeholder="Masukkan nomor HP" required type="tel" />
                </div>
            </div>

            <!-- Baris 2: email, no hp, rt, rw -->
            
            <!-- Baris 5: alamat instalasi, rt, rw, kodepos, provinsi, kota/kabupaten, kecamatan, kelurahan -->
            <fieldset class="border border-gray-300 rounded-md p-4">
                <legend class="text-gray-700 font-semibold mb-3 px-2">Alamat Instalasi</legend>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <!-- Baris pertama: Alamat Instalasi -->
                    <div class="sm:col-span-2">
                        <label class="block text-gray-700 font-semibold mb-2" for="alamat_instalasi">Alamat
                            Instalasi</label>
                        
                             <textarea id="installation_address" name="installation_address" rows="10" cols="50" placeholder="Alamat"
                                                class="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"></textarea>
                    </div>

                    <!-- Baris kedua: RT dan RW -->
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2" for="instalasi_rt">RT</label>
                        <input
                            class="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                            id="instalasi_rt" name="installation_rt" placeholder="RT" required type="number" />
                    </div>
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2" for="instalasi_rw">RW</label>
                        <input
                            class="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                            id="instalasi_rw" name="installation_rw" placeholder="RW" required type="number" />
                    </div>

                    <!-- Baris ketiga: Provinsi dan Kota/Kabupaten -->
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2"
                            for="instalasi_provinsi">Provinsi</label>
                        <select
                            class="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                            id="instalasi_provinsi" name="installation_province" required>
                            <option value="">==Pilih Provinsi==</option>
                            <?php $__currentLoopData = $province; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $provinces): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($provinces->id); ?>"><?php echo e($provinces->c_province); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                             
                        </select>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2"
                            for="instalasi_kota_kabupaten">Kota/Kabupaten</label>
                        <select
                            class="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                            id="instalasi_kota_kabupaten" name="installation_district" required>
                            <option value="">==Pilih Kota/Kabupaten==</option>
                        </select>
                    </div>

                    <!-- Baris keempat: Kecamatan dan Kelurahan -->
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2"
                            for="instalasi_kecamatan">Kecamatan</label>
                        <select
                            class="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                            id="instalasi_kecamatan" name="installation_sub_district" required>
                            <option value="">==Pilih Kecamatan==</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2"
                            for="instalasi_kelurahan">Kelurahan</label>
                        <select
                            class="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                            id="instalasi_kelurahan" name="installation_village" required>
                            <option value="">==Pilih Kelurahan==</option>
                        </select>
                    </div>

                    <!-- Baris kelima: Kodepos -->
                    <div class="sm:col-span-2">
                        <label class="block text-gray-700 font-semibold mb-2" for="instalasi_kodepos">Kodepos</label>
                        <input
                            class="w-full border border-gray-300 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                            id="instalasi_kode_pos" name="installation_postal_code" placeholder="Kodepos" required
                            type="text" inputmode="numeric" pattern="[0-9]*"
 />
                    </div>
                </div>
            </fieldset>

            <!-- Baris 6: lat, lng, foto rumah -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 items-end">
                <div>
                    <label class="block text-gray-700 font-semibold mb-2" for="foto_rumah">Lat</label>
                    <input class="w-full border border-gray-300 rounded-md px-4 py-3 bg-gray-100 cursor-not-allowed"
                        id="lat" name="lat" readonly type="text" placeholder="Latitude dari peta" />
                </div>
                <div>
                    <label class="block text-gray-700 font-semibold mb-2" for="foto_rumah">Lng</label>
                    <input class="w-full border border-gray-300 rounded-md px-4 py-3 bg-gray-100 cursor-not-allowed"
                        id="lng" name="lng" readonly type="text" placeholder="Longitude dari peta" />
                </div>




                <div>
                    <label class="block text-gray-700 font-semibold mb-2" for="foto_rumah">Foto Rumah</label>
                    <input accept="image/*"
                        class="w-full border border-gray-300 rounded-md px-4 py-1 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                        id="foto_rumah" name="images" type="file" />
                </div>
            </div>
            <!-- Paket yang dipilih -->
            <div>
                <label class="block text-gray-700 font-semibold mb-2" for="plan">Paket yang dipilih</label>
                <input class="w-full border border-gray-300 rounded-md px-4 py-3 bg-gray-100 cursor-not-allowed"
                    id="plan" name="plan" readonly type="text" placeholder="Paket akan muncul di sini"
                    value="<?php echo e($package); ?>" />
            </div>
            <div class="flex justify-between items-center">
                <button
                    class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md transition"
                    type="submit" style="margin-top: 1%; margin-left: auto; display: block;">
                    Kirim
                </button>
            </div>
            <p class="mt-4 text-center text-sm text-gray-600" id="form-message"></p>
        </form>

    </main>
    <footer class="bg-white border-t border-gray-200 py-6 mt-12">
        <div class="max-w-7xl mx-auto px-6 sm:px-12 lg:px-16 text-center text-gray-600 text-sm">
            © 2024 JS Media. All rights reserved.
        </div>
    </footer>
    <script>
        // Mobile menu toggle
        const menuButton = document.getElementById("mobile-menu-button");
        const mobileMenu = document.getElementById("mobile-menu");
        menuButton.addEventListener("click", () => {
            mobileMenu.classList.toggle("hidden");
        });
    </script>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>

    <script type="text/javascript">
    let map, infoWindow;

    async function initMap() {
        // Load necessary libraries
        const {
            Map,
            InfoWindow
        } = await google.maps.importLibrary("maps");
        const {
            AdvancedMarkerElement,
            PinElement
        } = await google.maps.importLibrary("marker");

        // Initialize the map
        map = new Map(document.getElementById("map"), {
            zoom: 15,
            center: {
                lat: -7.5741273,
                lng: 110.8293127
            },
            mapId: "DEMO_MAP_ID",
        });

        const infoWindow = new google.maps.InfoWindow({
            // content: "",
            // disableAutoPan: true,
        });

        // Add markers for each location
        let currentLocationMarker = null;

        const locationButton = document.createElement("button");

        // Atur tinggi ikon (misalnya 32px)
        locationButton.textContent = "Tampilkan Lokasi Saat ini";
        locationButton.classList.add("custom-map-control-button");
        map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(locationButton);

        locationButton.addEventListener("click", () => {
            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        const pos = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude,
                        };
                        map.setCenter(pos);

                        if (currentLocationMarker) {
                            currentLocationMarker.setMap(null);
                        }

                        // Set marker (use AdvancedMarkerElement if available)
                        if (typeof AdvancedMarkerElement === 'undefined') {
                            currentLocationMarker = new google.maps.Marker({
                                position: pos,
                                map: map,
                                gmpDraggable: true,
                                title: 'Lokasi Anda saat ini',
                            });
                        } else {
                            currentLocationMarker = new AdvancedMarkerElement({
                                position: pos,
                                map: map,
                                gmpDraggable: false,
                                title: 'Lokasi Anda saat ini',
                            });
                        }

                        // Set latitude and longitude immediately
                        $("#lat").val(pos.lat);
                        $("#lng").val(pos.lng);

                        infoWindow.setPosition(pos);
                        infoWindow.setContent("Location found.");
                        infoWindow.open(map);
                        map.setCenter(pos);


                    },
                    () => {
                        handleLocationError(true, infoWindow, map.getCenter());
                    },
                );
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }
        });
    }

    // Initialize the map when the DOM is fully loaded
    initMap();
</script>

    <script>
        function onChangeSelect(url, id, name) {
            // Kirim permintaan AJAX untuk mendapatkan data berdasarkan ID
            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    id: id
                },
                success: function(data) {
                    $('#' + name).empty();
                    $('#' + name).append('<option value="">==Pilih Salah Satu==</option>');

                    $.each(data, function(key, value) {
                        $('#' + name).append('<option value="' + key + '">' + value + '</option>');
                    });
                }
            });
        }

        $(function() {
            // Bagian pertama: Provinsi dan Kota/Kabupaten (instalasi)
            $('#instalasi_provinsi').on('change', function() {
                onChangeSelect('<?php echo e(route('district')); ?>', $(this).val(), 'instalasi_kota_kabupaten');
            });

            $('#instalasi_kota_kabupaten').on('change', function() {
                onChangeSelect('<?php echo e(route('subDistrict')); ?>', $(this).val(), 'instalasi_kecamatan');
            });

            $('#instalasi_kecamatan').on('change', function() {
                onChangeSelect('<?php echo e(route('villages')); ?>', $(this).val(), 'instalasi_kelurahan');
            });
         
           
        });
    </script>
    <script>
      $('#instalasi_kelurahan').on('change', function () {
    const villageId = $(this).val();
    $('#instalasi_kode_pos').val(''); // reset

    if (!villageId) return;

    $.ajax({
        url: '<?php echo e(route('postal_code')); ?>',
        type: 'GET',
        data: { id: villageId },
        success: function (res) {
            if (res && res.postal_code) {
                $('#instalasi_kode_pos').val(res.postal_code);
            }
        },
        error: function (xhr) {
            console.error(xhr.responseJSON || xhr.responseText);
        }
    });
});

        </script>

</body>

</html>
<?php /**PATH /var/www/html/Compro-ISP/resources/views/v/landingpage/form.blade.php ENDPATH**/ ?>