@extends('Front.layout')

@section('frontcontent')
    <style>
        body {
            font-family: 'Poppins', sans-serif;
        }

        .navbar-nav .nav-link {
            font-size: 18px;
            font-weight: 600;
            color: {{ $landing->secondary_color }};
            transition: transform 0.3s ease, font-size 0.3s ease;
        }

        .navbar-nav .nav-link:hover {
            transform: scale(1.1);
            font-size: 19px;
        }

        .dropdown-toggle {
            font-size: 18px;
            font-weight: 600;
        }

        body {
            padding-top: 80px;
        }
    </style>
    <div class="container" style="height: 70vh;">



        <div class=" my-5 text-center">
            <h1 class="text center" style="color:#050834; font-weight: 600;">
                <strong>Gallery</strong>

            </h1>
            @if ($galeri_tim->count() > 0)
                <h3 class="text-start mb-5"
                    style="color:#050834; font-weight: 600; border-bottom: 2px solid #050834; width:150px; padding-bottom: 10px; ">
                    <strong>TIM</strong>
                </h3>
                <div class="row">

                    @foreach ($galeri_tim 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>
            @endif
            @if ($galeri_service->count() > 0)
                <h3 class="text-start mb-5"
                    style="color:#050834; font-weight: 600; border-bottom: 2px solid #050834; width:150px; padding-bottom: 10px; ">
                    <strong>Service</strong>
                </h3>
                <div class="row">

                    @foreach ($galeri_service 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>
            @endif
            @if ($galeri_kegiatan->count() > 0)
                <h3 class="text-start mb-5"
                    style="color:#050834; font-weight: 600; border-bottom: 2px solid #050834; width:150px; padding-bottom: 10px; ">
                    <strong>Kegiatan</strong>
                </h3>
                <div class="row">

                    @foreach ($galeri_kegiatan 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>
            @endif
        </div>
    </div>





    <!-- Modal -->





    <script src="{{ url('https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(document).on('keyup', '.bs-searchbox input', function(e) {
                var searchData = e.target.value;


                $.ajax({
                    type: 'GET',
                    url: 'https://alamat.thecloudalert.com/api/cari/index/?keyword=' + searchData,
                    success: function(data) {
                        // $('.kecamatan-wrapper select #kecamatan_pelanggan').empty();
                        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);

                            }
                        }

                        $('#kecamatan_pelanggan').empty();
                        for (var j = 0; j < uniqueKecamatan.length; j++) {
                            $('#kecamatan_pelanggan').append('<option value="' +
                                uniqueKecamatan[
                                    j] + '">' + uniqueProvinsi[j] + ' , ' + uniqueKabkota[
                                    j] + ' , ' + uniqueKecamatan[j] + '</option>');
                        }

                        $('#kecamatan_pelanggan').selectpicker('refresh');


                    },
                    error: function(error) {

                        console.log(error);
                    }
                });
            });

        });
    </script>
@endsection