@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