<?php $__env->startSection('css'); ?>
    <style>
        .category-container {
            padding: 15px;
            width: 100%;
            overflow-x: auto;
        }

        .category-container::-webkit-scrollbar {
            display: none;
        }

        .category-logos {
            display: inline-flex;
        }

        .category {
            margin-right: 30px;
        }

        .image-category {
            height: 40px;
        }
    </style>
<?php $__env->stopSection(); ?>


<?php $__env->startSection('content'); ?>
    <!-- ======= Hero Section ======= -->
    
    <!-- End Hero -->


    <section style="padding-bottom: 20px" id="portfolio-details" class="portfolio-details">
        
        <div class="portfolio-details-slider swiper">
            <div class="swiper-wrapper align-items-center">

                <div class="swiper-slide">
                    <img src="<?php echo e(asset('assets/frontend/assets/img/slide1.png')); ?>" alt="">
                </div>

                <div class="swiper-slide">
                    <img src="<?php echo e(asset('assets/frontend/assets/img/slide2.png')); ?>" alt="">
                </div>

                <div class="swiper-slide">
                    <img src="<?php echo e(asset('assets/frontend/assets/img/slide3.png')); ?>" alt="">
                </div>

            </div>
            
        </div>
    </section>

    <div class="container mb-4">
        <div class="card ">
            <div class="card-header bg-white">
                <a href="" style="" class="text-black " data-bs-toggle="modal" data-bs-target="#pilihGerai">
                    <div class="d-flex justify-content-between ">
                        <div class="">
                            <b id="namaGerai">Semua Gerai</b>
                        </div>
                        <div class="" style="font-size: 14px; color: grey; text-align: right" id="keteranganKurir">
                            Pilih Gerai</div>
                    </div>
                </a>
            </div>
        </div>

        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
            <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
                <path
                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
            </symbol>
            <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
                <path
                    d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
            </symbol>
            <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
                <path
                    d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
            </symbol>
        </svg>

        <div class="alert alert-info alert-dismissible d-flex align-items-center fade show mt-4" role="alert"
            style="font-size: 12px">
            <svg class="bi flex-shrink-0 me-2" width="20" height="20" role="img" aria-label="Info:">
                <use xlink:href="#info-fill" />
            </svg>
            <span>
                Selamat datang dan selamat berbelanja di balanja.id
            </span>

            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>

    <div class="modal fade" id="pilihGerai" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content ">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Pilih Gerai
                    </h5>
                    <button type="button" class=" btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="listGerai">

                    </div>
                </div>
            </div>
        </div>
    </div>

    <?php
        $data = [
            (object) [
                'id' => 4,
                'kategori' => 'Makanan',
            ],
            (object) [
                'id' => 5,
                'kategori' => 'Minuman',
            ],
            (object) [
                'id' => 6,
                'kategori' => 'Fashion',
            ],
            (object) [
                'id' => 7,
                'kategori' => 'Rumah Tangga',
            ],
            (object) [
                'id' => 9,
                'kategori' => 'Jasa',
            ],
            (object) [
                'id' => 10,
                'kategori' => 'Kesehatan',
            ],
            (object) [
                'id' => 11,
                'kategori' => 'Donasi',
            ],
            (object) [
                'id' => 12,
                'kategori' => 'Affiliate',
            ],
            (object) [
                'id' => 15,
                'kategori' => 'Hewan Qurban',
            ],
            (object) [
                'id' => 16,
                'kategori' => 'Terapi',
            ],
        ];

        $dataQurban = (object) [
            'id' => 92,
            'nama_teritori' => 'Soekarno Hatta',
            'kota_kab' => 'KOTA BANDUNG',
            'provinsi' => 'JAWA BARAT',
            'nama_cabang' => 'Stasiun Qurban',
            'wa' => null,
            'status' => 'cabang',
            'sellerid' => 'MYB-01May2024-92',
            'card' => null,
            'ig' => null,
            'anggota' => [],
        ];

        $dataTerapi = (object) [
            'id' => 102,
            'nama_teritori' => 'Cimahi',
            'kota_kab' => 'Kota Cimahi"',
            'provinsi' => 'Jawa Barat',
            'nama_cabang' => 'Budi Terapis',
            'wa' => null,
            'status' => 'cabang',
            'sellerid' => 'MYB--28Jun2024-102',
            'card' => null,
            'ig' => null,
            'anggota' => [],
        ];
    ?>
    <center style=" background: whitesmoke;">
        <div class="container">
            <div class="category-container">
                <div class="category-logos">
                    <a class="category" style="cursor: pointer" onclick="filter(0)"><img class="image-category"
                            src=" <?php echo e(asset('images/lainnya.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Lainnya</span>
                    </a>
                    <a class="category" style="cursor: pointer"
                        onclick="filterTerapi( <?php echo e(json_encode($dataTerapi)); ?>, <?php echo e(json_encode($data[8])); ?>, <?php echo e($data[8]->id); ?> )"><img
                            class="image-category" src=" <?php echo e(asset('images/terapi.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Terapi</span>
                    </a>
                    <a class="category" style="cursor: pointer"
                        onclick="filterQurban( <?php echo e(json_encode($dataQurban)); ?>, <?php echo e(json_encode($data[8])); ?>, <?php echo e($data[8]->id); ?> )"><img
                            class="image-category" src=" <?php echo e(asset('images/qurban.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Qurban</span>
                    </a>
                    <a id="katalogView" class="category" style="cursor: pointer" onclick="openKatalog()"><img
                            class="image-category" src=" <?php echo e(asset('images/katalog.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Katalog</span>
                    </a>
                    <a class="category" style="cursor: pointer"
                        onclick="filter(<?php echo e(json_encode($data[0])); ?>, <?php echo e($data[0]->id); ?>)"><img class="image-category"
                            src=" <?php echo e(asset('images/makanan.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Makanan</span>
                    </a>
                    <a class="category" style="cursor: pointer"
                        onclick="filter(<?php echo e(json_encode($data[1])); ?>, <?php echo e($data[1]->id); ?>)"><img class="image-category"
                            src=" <?php echo e(asset('images/minuman.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Minuman</span>
                    </a>
                    <a class="category" style="cursor: pointer"
                        onclick="filter(<?php echo e(json_encode($data[2])); ?>, <?php echo e($data[2]->id); ?>)"><img class="image-category"
                            src=" <?php echo e(asset('images/fashion.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Fashion</span>
                    </a>
                    <a class="category" style="cursor: pointer"
                        onclick="filter(<?php echo e(json_encode($data[3])); ?>, <?php echo e($data[3]->id); ?>)"><img class="image-category"
                            src=" <?php echo e(asset('images/home.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Rumah Tangga</span>
                    </a>
                    <a class="category" style="cursor: pointer"
                        onclick="filter(<?php echo e(json_encode($data[4])); ?>, <?php echo e($data[4]->id); ?>)"><img class="image-category"
                            src=" <?php echo e(asset('images/jasa.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Jasa</span>
                    </a>
                    <a class="category" style="cursor: pointer"
                        onclick="filter(<?php echo e(json_encode($data[5])); ?>, <?php echo e($data[5]->id); ?>)"><img class="image-category"
                            src=" <?php echo e(asset('images/kesehatan.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Kesehatan</span>
                    </a>
                    <a class="category" style="cursor: pointer"
                        onclick="filter(<?php echo e(json_encode($data[6])); ?>, <?php echo e($data[6]->id); ?>)"><img class="image-category"
                            src=" <?php echo e(asset('images/donasi.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Donasi</span>
                    </a>
                    <a class="category" style="cursor: pointer"
                        onclick="filter(<?php echo e(json_encode($data[7])); ?>, <?php echo e($data[7]->id); ?>)"><img class="image-category"
                            src=" <?php echo e(asset('images/affiliate.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Affiliate</span>
                    </a>
                    <a class="category" style="cursor: pointer" onclick="filter(0)"><img class="image-category"
                            src=" <?php echo e(asset('images/tagihan.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Tagihan </span>
                    </a>
                    <a class="category" style="cursor: pointer" onclick="filter(0)"><img class="image-category"
                            src=" <?php echo e(asset('images/topup.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Top-Up</span>
                    </a>
                    <a class="category" style="cursor: pointer" onclick="filter(0)"><img class="image-category"
                            src=" <?php echo e(asset('images/promo.png')); ?> " alt="logo" /> <br />
                        <span style="text-decoration: none; font-size: 13px; color: rgb(99, 98, 98)">Promo</span>
                    </a>

                </div>
            </div>
        </div>
    </center>
    <br>
    
    <main id="main">

        <div class="container " style="" data-aos="fade-up">
            <div class="row justify-content-between ">
                <div class="col">
                    <h5 data-aos="fade-in"><b>
                            Untuk Kamu
                        </b></h5>
                </div>
                <div class="col-auto">
                    <a href="/list-produk" class="btn btn-outline-primary btn-sm">Lihat Semua ></a>
                </div>
            </div>
            <div style="border-bottom: 2px solid rgba(128, 128, 128, 0.541); padding-bottom: 10px;"></div>

            <?php echo $__env->make('components.rekomendasi-produk', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

        </div>
        <div class="container" style="" data-aos="fade-up">
            <h5 style="border-bottom: 2px solid rgba(128, 128, 128, 0.541); padding-bottom: 10px;" data-aos="fade-in"><b>
                    List Semua Produk
                </b></h5>
            <?php echo $__env->make('components.semuaProduk', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
            <center>
                <a href="/list-produk" class="mt-auto btn btn-primary"
                    style="border-radius: 50px; background: #4294e3;
            background: linear-gradient(47deg, rgb(126, 213, 149) 0%, #23ca23 68%)  ;">Lihat
                    Semua</a>
            </center>
        </div>
        <br><br>

        <!-- ======= Pricing Section ======= -->
        
        <!-- End Pricing Section -->

        <!-- ======= F.A.Q Section ======= -->
        <!-- End F.A.Q Section -->

        


    </main><!-- End #main -->
<?php $__env->stopSection(); ?>

<?php $__env->startSection('js'); ?>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
        integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
        crossorigin=""></script>
    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
    <script>
        function copyPromoCode(promoCode) {
            navigator.clipboard.writeText(promoCode).then(function() {
                alert("Kode promo berhasil disalin!");
            }, function() {
                alert("Maaf, terjadi kesalahan saat menyalin kode promo.");
            });
        }

        function filter(data, id) {
            if (data == 0) {
                alert("Coming Soon")
            } else {
                localStorage.setItem('kategori_id', id)
                localStorage.setItem('kategori', JSON.stringify(data))
                window.location.href = "/list-produk"
            }
        }

        function filterQurban(dataQurban, data, id) {
            localStorage.setItem('kategori_id', id)
            localStorage.setItem('kategori', JSON.stringify(data))
            localStorage.setItem('gerai_id', dataQurban.id)
            localStorage.setItem('gerai', JSON.stringify(dataQurban))
            window.location.href = "/list-produk"

        }

        function filterTerapi(dataTerapi, data, id) {
            localStorage.removeItem('kategori_id')
            localStorage.removeItem('kategori')
            localStorage.setItem('gerai_id', dataTerapi.id)
            localStorage.setItem('gerai', JSON.stringify(dataTerapi))
            window.location.href = "/list-produk"

        }

        function openKatalog() {
            console.log('gudang_id', gudang_id)
            if (gudang_id == undefined) {
                alert('Pilih Gerai Terlebih Dahulu!')
            }
            window.location.href = `/katalog-produk/${gudang_id}`;

        }

        geraiNow = JSON.parse(localStorage.getItem('gerai'));
        if (geraiNow) {
            $('#namaGerai').html(geraiNow.nama_cabang)
        }
        getGerai()
        gerai_id = localStorage.getItem('gerai_id')

        function getGerai() {
            axios.get('https://api.balanja.id/v1/affiliator/cabang', {
                    headers: {
                        'secret': 'aKndsan23928h98hKJbkjwlKHD9dsbjwiobqUJGHBDWHvkHSJQUBSQOPSAJHVwoihdapq',
                        'device': 'web'
                    }
                })
                .then(function(response) {
                    let dataCabang = response.data.data
                    $('#listGerai').html("");
                    if (dataCabang[0] != null) {
                        if (gerai_id == null) {
                            $('#listGerai').html(`
                                <div class="card  mb-3"
                                    style="background: rgba(26, 216, 26, 0.127); border: 1px solid rgb(27, 170, 27);">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <h5> <span class="text-bold"
                                                    style="color: gray;">Semua Gerai</span> </h5>
                                            <i class="bi bi-check text-success" style="font-size: 40px; "></i>
                                        </div>

                                    </div>
                                </div>
                                `);
                        } else {
                            $('#listGerai').html(`
                                    <div class="card mb-3">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <h5> <span class="text-bold"
                                                        style="color: gray;">Semua Gerai</span> </h5>
                                                <button type="button" onclick='pilihGerai("semua")' class="btn  mt-2 float-end"
                                                    style="background: rgb(22, 179, 22); color: white;">Pilih</button>
                                            </div>
                                        </div>
                                    </div>
                                `)
                        }
                        $.each(dataCabang, function(key, value) {
                            if (value.id == gerai_id) {
                                $('#listGerai').append(`
                                <div class="card  mb-3"
                                    style="background: rgba(26, 216, 26, 0.127); border: 1px solid rgb(27, 170, 27);">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div class="col-10">
                                                <span class="text-bold"
                                                    style="color: gray;">${value.nama_cabang}</span>
                                                <h5>
                                                    ${value.nama_teritori} - ${value.kota_kab}
                                                </h5>
                                            </div>
                                            <i class="bi bi-check text-success" style="font-size: 40px; "></i>
                                        </div>
                                    </div>
                                </div>
                                `)

                            } else {
                                $('#listGerai').append(`
                                    <div class="card mb-3">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <div>
                                                    <span class="text-bold"
                                                        style="color: gray;">${value.nama_cabang}</span>
                                                    <h5>
                                                        ${value.nama_teritori} - ${value.kota_kab}
                                                    </h5>
                                                </div>
                                                <button type="button" onclick='pilihGerai(${JSON.stringify(value)})' class="btn  mt-2 float-end"
                                                            style="background: rgb(22, 179, 22); color: white;">Pilih</button>
                                            </div>
                                        </div>
                                    </div>
                                `)
                            }
                        })
                    } else {
                        $('#dataCabang').html(`
                        <center>
                            <br><br>
                            <img src="<?php echo e(asset('images/empty.png')); ?>" style="width: 250px;" alt=""><br>
                            <h4 class="text--primary"><b> Tidak Ditemukan</b></h4>
                            <h6>Mohon maaf Cabang tidak ditemukan</h6>
                            <br><br>
                        </center>
                        `)
                    }
                    console.log('dataCabang', dataCabang)
                })
                .catch(function(error) {
                    // handle error
                    console.log(error);
                });
        }

        function pilihGerai(value) {
            console.log(value)
            if (value == "semua") {
                localStorage.removeItem('gerai_id')
                localStorage.removeItem('gerai')
                localStorage.removeItem('kategori_id')
                localStorage.removeItem('kategori')
                window.location.href = "/list-produk"
            } else {
                localStorage.setItem('gerai_id', value.id)
                localStorage.setItem('gerai', JSON.stringify(value))
                window.location.href = "/list-produk"
            }
        }
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.member', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp_8.2.12\htdocs\PRODUKICOMMITS\balanja\resources\views/index.blade.php ENDPATH**/ ?>