@extends('Front.layout')
@push('front-scripts')
@php
$pixels = $metaPixels->where('target_page','home')->groupBy('source');
@endphp
@foreach ($pixels as $page)
@php
$pixel = $page->first();
@endphp
@if ($pixel->source == "meta")
<script>
fbq('trackCustom', `ViewContent`);
</script>
@elseif ($pixel->source == "tiktok")
<script>
ttq.page();
</script>
@elseif ($pixel->source == "gtm")
<script>
dataLayer.push({'event':'PageView'});
</script>
@endif
@endforeach
@php
$pixels = $metaPixels->where('target_page','home')->where('target_element',"a[href='#section-4']");
@endphp
@foreach ($pixels as $pixel)
@if ($pixel->source == "meta")
<script>
document.querySelector("a[href='#section-4']").addEventListener('click',function(){
fbq('trackCustom', `{{ $pixel->pixel_event }}`);
});
</script>
@elseif ($pixel->source == "tiktok")
<script>
document.querySelector("a[href='#section-4']").addEventListener('click',function(){
ttq.track(`{{ $pixel->pixel_event }}`);
});
</script>
@elseif ($pixel->source == "gtm")
<script>
document.querySelector("a[href='#section-4']").addEventListener('click',function(){
dataLayer.push({'event':`{{ $pixel->pixel_event }}`});
});
</script>
@endif
@endforeach
@php
$pixels = $metaPixels->where('target_page','home')->where('target_element',"form button.btn-success");
@endphp
@foreach ($pixels as $pixel)
@if ($pixel->source == "meta")
<script>
document.querySelector("form button.btn-success").addEventListener('submit',function(){
fbq('init', `{{ $pixel->pixel_id }}`);
fbq('trackCustom', `{{ $pixel->pixel_event }}`);
});
</script>
@elseif ($pixel->source == "tiktok")
<script>
document.querySelector("form button.btn-success").addEventListener('submit',function(){
ttq.load(`{{ $pixel->pixel_id }}`);
ttq.track(`{{ $pixel->pixel_event }}`);
});
</script>
@elseif ($pixel->source == "gtm")
<script>
document.querySelector("form button.btn-success").addEventListener('submit',function(){
dataLayer.push({'event':`{{ $pixel->pixel_event }}`});
});
</script>
@endif
@endforeach
@endpush
@section('frontcontent')
<div id="section-1" class="container">
<div class="row d-flex align-items-center container " style="height:100vh;">
<div class="col">
<h1 style="color:{{ $landing->text_color }}; font-weight: 600;">
<strong>{{ $landing->tagline }}</strong>
</h1>
<H5>{{ $landing->promotion_text }}</H5>
<!-- Button trigger modal -->
<a href="{{ $landing->button_link }}" class="btn yellow-btn fw-bold">
<i class="bi bi-{{ $landing->button_icon }}"></i> {{ $landing->button_text }}
</a>
</div>
<div class="col d-flex justify-content-center">
<img class="rounded-circle responsive-image my-3" src="{{ asset('images/landingpage/' . $landing->photo) }}"
alt="">
</div>
</div>
</div>
<div id="section-2" class="container">
<div class=" my-5 text-center">
<h1 class="text center" style="color:{{ $landing->text_color }}; font-weight: 600;">
<strong>Tim Kami</strong>
<H5 class="my-5 border-bottom border-3 pb-3">"{{ $landing->team_description }}"</H5>
</h1>
<div class="row">
@foreach ($galeri as $item)
<div class="col-md-4 mb-4">
<div class="card">
<img src="{{ asset('images/galeri/' . $item->photo) }}" class="card-img-top galeri">
</div>
</div>
@endforeach
</div>
</div>
</div>
<div id="section-3" style="background-color:#eeeded">
<div class="container py-5">
<div class=" my-5">
<h1 style="color:{{ $landing->text_color }}; font-weight: 600; ">
<strong>Temukan kami!</strong>
</h1>
<div class="row mt-2">
<div class="col "><iframe class="rounded map"
src=" https://maps.google.com/maps?q={{ $landing->maps }}&output=embed&zoom=11 "
style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="col">
<h2 style="color:{{ $landing->text_color }}; font-weight: 600;">Alamat Kami</h2>
<div>
<h5>
<p class="alamat" target="_blank"><i class="bi bi-geo-alt-fill" style="color: red"></i>
{{ $profil->alamat }}</p>
</h5>
</div>
<h2 style="color:{{ $landing->text_color }}; font-weight: 600;" class="mt-5">Ikuti Kami</h2>
<div>
<ul class="social-list">
@foreach ($profil->sosmed as $sosmed)
<li>
<a class="social-link" href="{{ $sosmed->url }}" target="_blank">
<i class="bi bi-{{ $sosmed->icon }}"></i> {{ $sosmed->Account }}
</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="section-4">
<div class="container py-5 " style="color:#eeeded">
<h1 style="color:{{ $landing->text_color }}; font-weight: 600; ">
<strong>Konsultasi</strong>
</h1>
<form class="card shadow-lg" method="POST" action="{{ route('konsultasi.store') }}"
style="border-radius: 15px;">
@csrf
<div class="card-header"
style="background-color: {{ $landing->primary_color }}; border-radius: 15px 15px 0 0;">
<h1 class="modal-title fs-5 text-center" style="color: {{ $landing->secondary_color }};"
id="exampleModalLabel">
<i class="bi bi-headset"></i> Form Konsultasi
</h1>
</div>
<div class="card-body px-4 py-4">
<div class="form-group my-3">
<label for="nama_pelanggan">Nama Anda <span class="required text-danger">*</span></label>
<input type="text" id="nama_pelanggan" name="nama_pelanggan" class="form-control "
placeholder="Masukkan Nama Anda!" required>
</div>
<div class="form-group my-3">
<label for="telp_pelanggan">Nomor WA <span class="required text-danger">*</span></label>
<input type="number" id="telp_pelanggan" class="form-control " placeholder="Masukkan Nomor WA Anda!"
name="telp_pelanggan" required>
<small class="text-secondary">*Masukkan nomor dengan awalan "08" dan pastikan nomor WA dapat
dihubungi!</small>
</div>
<div class="form-group my-3">
<div class="form-line">
<label for="kecamatan_pelanggan">Kota/Kecamatan</label>
<select class="select form-control" id="kecamatan_pelanggan" name="kota_kecamatan_pelanggan"
required>
<option value="" disabled selected>Masukan Kecamatan</option>
{{-- Add other options if necessary --}}
</select>
<small class="text-secondary">*Masukkan nama kota/kecamatan min 4 karakter!</small>
</div>
</div>
<div class="form-group my-3">
<label for="alamat_pelanggan">Alamat <span class="required text-danger">*</span></label>
<input type="text" id="alamat_pelanggan" class="form-control " placeholder="Masukkan Alamat Anda!"
name="alamat_pelanggan" required>
</div>
<div class="form-group my-3">
<label for="merk">Merk <span class="required text-danger">*</span></label>
<select class="form-control " name="merk_hp" id="merk" required>
<option value="" selected disabled>- Pilih Merk -</option>
@foreach ($merk as $item)
<option value="{{ $item->nama_merk }}">{{ $item->nama_merk }}</option>
@endforeach
</select>
</div>
<div class="form-group my-3">
<label for="tipe_hp">Tipe HP <span class="required text-danger">*</span></label>
<input type="text" id="tipe_hp" class="form-control " name="tipe_hp"
placeholder="Masukkan Tipe HP Anda!" required>
</div>
<div class="form-group my-3">
<label for="keluhan">Masalah Yang Dihadapi <span class="required text-danger">*</span></label>
<textarea class="form-control " name="keluhan" id="keluhan" rows="5"
placeholder="Jelaskan masalah yang Anda hadapi..." required></textarea>
</div>
</div>
<div class="card-footer p-3 d-flex justify-content-end">
<button class="btn btn-success">Kirim</button>
</div>
</form>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
</div>
</div>
</div>
@push('front-scripts')
<script>
$(document).ready(function () {
// Initialize Choices.js
const choices = new Choices('#kecamatan_pelanggan', {
removeItemButton: true, // Optional: to allow removing items
searchEnabled: true, // Enable search functionality
});
$(document).on('keyup', '.choices__input', function (e) {
var searchData = e.target.value;
$.ajax({
type: 'GET',
url: 'https://alamat.thecloudalert.com/api/cari/index/?keyword=' + searchData,
success: function (data) {
// Create arrays to hold unique values
var uniqueKecamatan = [];
var uniqueKabkota = [];
var uniqueProvinsi = [];
for (var i = 0; i < data.result.length; i++) {
var kecamatan = data.result[i].kecamatan;
var kabkota = data.result[i].kabkota;
var provinsi = data.result[i].provinsi;
if (uniqueKecamatan.indexOf(kecamatan) === -1) {
uniqueKecamatan.push(kecamatan);
uniqueProvinsi.push(provinsi);
uniqueKabkota.push(kabkota);
}
}
console.log(uniqueKecamatan)
choices.clearStore();
for (var j = 0; j < uniqueKecamatan.length; j++) {
choices.setValue([{
value: uniqueKabkota[
j] + ' / ' + uniqueKecamatan[
j],
label: uniqueKabkota[
j] + ' / ' + uniqueKecamatan[
j],
selected: false,
disabled: false
}]);
}
choices.showDropdown();
},
error: function (error) {
console.log(error);
}
});
});
//listen to all submit button and disable button after submit
$('form').on('submit', function() {
$(this).find('button[type="submit"], input[type="submit"], button:not([type])').prop('disabled', true);
});
});
</script>
@endpush
@endsection
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell