<?php $__env->startSection('custom_style'); ?>
<style>.truncatee,.truncatee h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.red-line-through{text-decoration:line-through;color:red}.bar{position:relative;background-color:#bdb7b7;border-radius:10px;overflow:hidden;height:15px;width:100%}.progress{background-color:var(--warna_2);height:100%;transition:width .5s}.progress-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;color:#fff}#skeleton-loaderr{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.container-desktop{max-width:1255px;margin:0 auto}@media (min-width:1024px){.container-desktop{height:400px}}.pl-6{padding-left:1.5rem}.truncatee{width:190px;display:block}.truncatee h2{width:inherit;margin:0}.btn{position:absolute;top:0;right:0}.fs-countdown{display:flex;justify-content:center;align-items:center}.fs-countdown .time{font-size:1em;color:#fff;padding:.3em .8em;background:linear-gradient(to bottom,var(--warna_1),var(--warna_2));border-radius:.3em}.fs-countdown .separator{font-size:1em;color:#fff;padding:.3em}.tabs-container{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tabs-container::-webkit-scrollbar{display:none}.tab-button{flex:0 0 auto;margin-right:10px}.containermelpa{border-radius:15px 15px 0 0}.text-yellow-400{--tw-text-opacity:1;color:rgb(250,204,21,var(--tw-text-opacity))}.flash-sale-img{width:65px;height:60px;object-fit:cover}.p-4{padding:1rem}.rounded-xl{border-radius:.75rem}.cursor-pointer{cursor:pointer}.w-\[265px\]{width:265px}.relative{position:relative}a{color:inherit;text-decoration:inherit}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.overflow-hidden{overflow:hidden}.w-24{width:6rem}.aspect-square{aspect-ratio:1/1}.-top-\[9px\]{top:-9px}.-right-\[9px\]{right:-9px}.bg-primary\/50{background-color:#293447f0}.w-2{width:.5rem}.h-2{height:.5rem}.top-0{top:0}.left-0{left:0}.absolute{position:absolute}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.text-primary-foreground{color:hsl(var(--primary-foreground))}.uppercase{text-transform:uppercase}.font-semibold{font-weight:600}.text-xxs{font-size:.625rem}.text-center{text-align:center}.py-1{padding-top:.25rem;padding-bottom:.25rem}.rotate-45{--tw-rotate:45deg}.rotate-180,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.origin-bottom-right{transform-origin:bottom right}.w-square-diagonal{width:141.42%}.block{display:block}.right-0{right:0}.bottom-0{bottom:0}</style>
<?php $__env->stopSection(); ?>



<?php $__env->startSection('content'); ?>
<?php echo $__env->make('../navbar', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

<section id="hero" class="relative mb-4 bg-transparent py-4 shadow-2xl ">
    <div class="hero-swiper swiper  container ">
        <div  id="heroo"  class="swiper-wrapper ">
            <?php $__currentLoopData = $banner; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="swiper-slide">
                <img  src="<?php echo e($data->path); ?>" class="w-full h-auto object-cover  rounded-3xl "/>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
        <div class="swiper-pagination"></div>
        <div class="hidden items-center justify-end space-x-2 md:flex">
            <button type="button" class="swiper-button swiper-button-prev ml-5">
                <div class="text-white flex aspect-square h-12 w-12 scale-75 items-center justify-center rounded-full bg-murky-700 shadow-2xl sm:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="!h-8 !w-8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"></path>
                    </svg>
                </div>
            </button>
            <button type="button" class="swiper-button swiper-button-next ml-5">
                <div class="text-white flex aspect-square h-12 w-12 scale-75 items-center justify-center rounded-full bg-murky-700 shadow-2xl sm:scale-100">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="!h-8 !w-8">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
                    </svg>
                </div>
            </button>
        </div>
    </div>
  
    <div class="absolute inset-0 -z-10">
        <div class="area">
               <ul class="circles">
    <section class="relative flex items-center overflow-hidden bg-secondary/50 px-4 py-m lg:min-h-[521.96px]">
    <?php
        $positions = [
            ['left' => 1130, 'delay' => 0.686975, 'duration' => 8],
            ['left' => -350, 'delay' => 0.670151, 'duration' => 8],
            ['left' => 563, 'delay' => 0.632454, 'duration' => 9],
            ['left' => -969, 'delay' => 0.524996, 'duration' => 5],
            ['left' => -1153, 'delay' => 0.460272, 'duration' => 8],
            ['left' => -560, 'delay' => 0.223791, 'duration' => 6],
            ['left' => -1287, 'delay' => 0.406558, 'duration' => 4],
            ['left' => 211, 'delay' => 0.475533, 'duration' => 6],
            ['left' => -63, 'delay' => 0.394929, 'duration' => 5],
            ['left' => -112, 'delay' => 0.78249, 'duration' => 2],
            ['left' => 946, 'delay' => 0.353787, 'duration' => 5],
            ['left' => 275, 'delay' => 0.309607, 'duration' => 5],
            ['left' => 1216, 'delay' => 0.35162, 'duration' => 8],
            ['left' => -210, 'delay' => 0.413144, 'duration' => 7],
            ['left' => -842, 'delay' => 0.395388, 'duration' => 6],
            ['left' => -323, 'delay' => 0.582248, 'duration' => 4],
            ['left' => 278, 'delay' => 0.710367, 'duration' => 4],
            ['left' => -736, 'delay' => 0.564896, 'duration' => 6],
            ['left' => -800, 'delay' => 0.206357, 'duration' => 7],
            ['left' => -1118, 'delay' => 0.628613, 'duration' => 9],
            ['left' => 1361, 'delay' => 0.529785, 'duration' => 7],
            ['left' => -11, 'delay' => 0.64863, 'duration' => 6],
            ['left' => -678, 'delay' => 0.701722, 'duration' => 3],
            ['left' => -170, 'delay' => 0.366231, 'duration' => 5],
            ['left' => 946, 'delay' => 0.521904, 'duration' => 7],
            ['left' => 1364, 'delay' => 0.484818, 'duration' => 9],
            ['left' => 943, 'delay' => 0.502043, 'duration' => 3],
            ['left' => 1296, 'delay' => 0.577243, 'duration' => 7],
            ['left' => 1273, 'delay' => 0.273317, 'duration' => 5],
            ['left' => -1306, 'delay' => 0.556245, 'duration' => 7],
            ['left' => -360, 'delay' => 0.344508, 'duration' => 5],
            ['left' => 306, 'delay' => 0.332693, 'duration' => 6],
            ['left' => 312, 'delay' => 0.250245, 'duration' => 9],
            ['left' => 649, 'delay' => 0.607517, 'duration' => 2],
            ['left' => 13, 'delay' => 0.379304, 'duration' => 6],
            ['left' => 1269, 'delay' => 0.586079, 'duration' => 5],
            ['left' => -798, 'delay' => 0.675148, 'duration' => 4],
            ['left' => 1199, 'delay' => 0.515393, 'duration' => 6],
            ['left' => 304, 'delay' => 0.799655, 'duration' => 8],
        ];
    ?>
    
    <?php $__currentLoopData = $positions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $position): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <span class="absolute left-1/2 top-1/2 h-1 w-1 rotate-[215deg] animate-meteor-effect rounded-[9999px] bg-white shadow-[0_0_0_1px_#ffffff10] before:absolute before:top-1/2 before:h-[1px] before:w-[80px] before:-translate-y-[0%] before:transform before:bg-gradient-to-r before:from-white before:to-transparent before:content-['']"
            style="top: -20px; left: <?php echo e($position['left']); ?>px; animation-delay: <?php echo e($position['delay']); ?>s; animation-duration: <?php echo e($position['duration']); ?>s;"></span>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</section>

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


            <div class="flex flex-col gap-y-8 pb-8 pt-4 sm:p-0 md:pt-8">
                
     
                
                

    <?php if($flashsale->count() > 0): ?>
    <div class="container">
    <div class="rounded-2xl bg-muted/50">
        <div class="px-4 pb-3 pt-4">
            <h3 class="flex items-center space-x-4 text-foreground">
                <div class="text-lg font-semibold uppercase leading-relaxed tracking-wider">⚡️FLASHSALE</div>
                <div class="flex items-center gap-1 text-sm capitalize">
                 
                            <div class="fs-countdown ml-3">
                                <div class="time" id="hours"></div>
                                <div class="separator">:</div>
                                <div class="time" id="minutes"></div>
                                <div class="separator">:</div>
                                <div class="time" id="seconds"></div>
                            </div>
                </div>
            </h3>
            <p class="pl-6 text-xs text-foreground">Pesan sekarang! Persediaan terbatas.</p>
        </div>
        <div class="relative flex h-full w-full flex-col items-center justify-center overflow-hidden pb-2 pt-1">
            <div class="group flex overflow-hidden p-2 [--gap:1rem] [gap:var(--gap)] flex-row container [--duration:20s]">
                <div
                    data-run-marquee="true"
                    data-run-marquee-vertical="false"
                    class="flex shrink-0 justify-around [gap:var(--gap)] data-[run-marquee-vertical=true]:animate-marquee-vertical data-[run-marquee=true]:animate-marquee data-[run-marquee]:flex-row data-[run-marquee-vertical=true]:flex-col group-hover:[animation-play-state:paused]"
                >
                        <div class="assdafsdvsvasgdsgsdgwgreragwgwrgeargwrgergegsvdsDVSVcsdvdszvsbwtergerg43t34f34343ff34g34gG2">
                            <div id="special_deals">
                                <div class="list swiper-wrapper marquee-content">
                                    <?php for($i = 0; $i < 30; $i++): ?>
                                        <?php $__currentLoopData = $flashsale; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $fs): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <?php
                                                $discount = round((($fs->harga - $fs->harga_flash_sale) / $fs->harga) * 100);
                                            ?>
                                            <a class="relative w-[265px] cursor-pointer rounded-xl p-4 bg-primary-500" href="<?php echo e(url('/id')); ?>/<?php echo e($fs->kode_game); ?>" style="outline: none;">
                                                <div class="flex flex-row items-center gap-3">
                                                    <img
                                                        alt=""
                                                        loading="lazy"
                                                        width="48"
                                                        height="48"
                                                        decoding="async"
                                                        data-nimg="1"
                                                        class="rounded-lg bg-muted"
                                                        src="<?php echo e($fs->gmr_thumb); ?>"
                                                        style="color: transparent;"
                                                    />
                                                    <div class="flex flex-col">
                                                        <figcaption class="text-sm font-medium text-foreground"><?php echo e($fs->kategori->nama); ?></figcaption>
                                                        <p class="text-xs font-medium text-destructive line-through red-line-through">Rp. <?php echo e(number_format($fs->harga, 0, '.', ',')); ?></p>
                                                        <p class="text-xs font-medium text-primary">Rp. <?php echo e(number_format($fs->harga_flash_sale, 0, '.', ',')); ?></p>
                                                    </div>
                                                </div>
                                                <div class="mt-2 text-sm text-foreground"><?php echo e($fs->judul_flash_sale); ?></div>
                                                <div class="w-24 absolute aspect-square -top-[9px] -right-[9px] overflow-hidden rounded-sm">
                                                    <div class="absolute top-0 left-0 bg-primary/50 h-2 w-2"></div>
                                                    <div class="absolute bottom-0 right-0 bg-primary/50 h-2 w-2"></div>
                                                    <div class="absolute block w-square-diagonal py-1 text-center text-xxs font-semibold uppercase bottom-0 right-0 rotate-45 origin-bottom-right shadow-sm bg-primary text-primary-foreground">HEMAT Rp <?php echo e(number_format($fs->harga - $fs->harga_flash_sale, 0, '.', ',')); ?></div>
                                                </div>
                                            </a>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    <?php endfor; ?>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php endif; ?>


  
          <div id="content-melpa"  class="container ">
   
          <div class="mb-5">
              <h3 class="text-lg font-semibold leading-relaxed tracking-wider flex">
             🔥POPULER!
        </h3>

         <p class="pl-6 text-xs">Beberapa produk yang paling populer saat ini.</p>
      </div>
        <div class="grid grid-cols-2 gap-3 md:gap-4 lg:grid-cols-3 mt-3">
          <?php $__currentLoopData = $kategori; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php if($category->tipe == "populer"): ?>
                <a href="<?php echo e(url('/id/' . $category->kode)); ?>" style="outline: none;" class="melpazoom">
                    <div class="group rounded-2xl bg-title-product duration-300 ease-in-out  ">
                        <div class="relative flex h-16 items-center containermelpa gap-x-1.5 overflow-hidden  bg-secondary-700 p-1.5 shadow-xl md:gap-x-3 md:rounded-2xl md:p-3">
                            <img alt="<?php echo e($category->nama); ?>" class="imagemelpa object-cover object-[100%_10%] grayscale group-hover:grayscale-0 md:object-[100%_20%]" sizes="100vw" src="<?php echo e($category->thumbnail); ?>" style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;">
                            <div class="absolute inset-0 bg-gradient-to-r from-secondary-400 to-transparent"></div>
                        </div>
                        <div class="relative flex w-full flex-col px-4 py-2">
                            <h2 class="w-[100px] truncate text-xxs font-semibold text-white  sm:w-[200px] md:w-[275px] md:text-base prose line-clamp-2"><?php echo e($category->nama); ?></h2>
                            <p class="truncate text-xxs text-white md:text-xs prose line-clamp-1 "><?php echo e($category->sub_nama); ?></p>
                        </div>
                    </div>
                </a>
            <?php endif; ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
       </div>
     </div>


    








                 <section id="mobile-game" class="relative w-full overflow-hidden pb-6 md:pb-8 lg:pb-10 bg-secondary-950 ">
 

                    <div class="container mx-auto">
                        
                        <!-- Nav Product -->
                        <div class="filter-swiper swiper mb-4 lg:mb-8">
                            <div class="tabs-container">
                                <button
                                    class="tab-button whitespace-nowrap rounded-lg  border-secondary-600 px-4 py-2 text-sm text-text-color shadow-xl outline-none duration-300 hover:bg-secondary-500 focus:bg-secondary-500 focus-visible:bg-secondary-500 bg-primary"
                                    id="headlessui-tabs-tab-:topup:"
                                    role="tab"
                                    type="button"
                                    aria-selected="false"
                                    tabindex="0"
                                    data-headlessui-state="false"
                                    aria-controls="headlessui-tabs-panel-:topup:"
                                    data-tabs-toggle="#headlessui-tabs-panel-topup">
                                    Top Up Games
                                </button>
                                <button
                                    class="tab-button whitespace-nowrap rounded-lg  border-secondary-600 px-4 py-2 text-sm text-text-color shadow-xl outline-none duration-300 hover:bg-secondary-500 focus:bg-secondary-500 focus-visible:bg-secondary-500 bg-primary"
                                    id="headlessui-tabs-tab-:mobilelegends:"
                                    role="tab"
                                    type="button"
                                    aria-selected="false"
                                    tabindex="0"
                                    data-headlessui-state="false"
                                    aria-controls="headlessui-tabs-panel-:mobilelegends:"
                                    data-tabs-toggle="#headlessui-tabs-panel-mobilelegends">
                                    Specialist Mobile Legends
                                </button>
                           
                                <button
                                    class="tab-button whitespace-nowrap rounded-lg  border-secondary-600 px-4 py-2 text-sm text-text-color shadow-xl outline-none duration-300 hover:bg-secondary-500 focus:bg-secondary-500 focus-visible:bg-secondary-500 bg-primary"
                                    id="headlessui-tabs-tab-:app:"
                                    role="tab"
                                    type="button"
                                    aria-selected="false"
                                    tabindex="0"
                                    data-headlessui-state="false"
                                    aria-controls="headlessui-tabs-panel-:app:"
                                    data-tabs-toggle="#headlessui-tabs-panel-app">
                                    App Premium
                                </button>
                                <button
                                    class="tab-button whitespace-nowrap rounded-lg  border-secondary-600 px-4 py-2 text-sm text-text-color shadow-xl outline-none duration-300 hover:bg-secondary-500 focus:bg-secondary-500 focus-visible:bg-secondary-500 bg-primary"
                                    id="headlessui-tabs-tab-:pulsa:"
                                    role="tab"
                                    type="button"
                                    aria-selected="false"
                                    tabindex="0"
                                    data-headlessui-state="false"
                                    aria-controls="headlessui-tabs-panel-:pulsa:"
                                    data-tabs-toggle="#headlessui-tabs-panel-pulsa">
                                    Pulsa & Data
                                </button>
                                
                                <button
                                    class="tab-button whitespace-nowrap rounded-lg  border-secondary-600 px-4 py-2 text-sm text-text-color shadow-xl outline-none duration-300 hover:bg-secondary-500 focus:bg-secondary-500 focus-visible:bg-secondary-500 bg-primary"
                                    id="headlessui-tabs-tab-:voucher:"
                                    role="tab"
                                    type="button"
                                    aria-selected="false"
                                    tabindex="0"
                                    data-headlessui-state="false"
                                    aria-controls="headlessui-tabs-panel-:voucher:"
                                    data-tabs-toggle="#headlessui-tabs-panel-voucher">
                                    Voucher
                                </button>
                           
                                
                            </div>
                        </div>
                        <!-- Nav Product End -->
                    
                        <div class="my-8">
                           
                                <div id="headlessui-tabs-panel-mobilelegends" role="tabpanel"  aria-labelledby="headlessui-tabs-tab-mobilelegends" data-tabs-content style="display: none;">
                                       
<div id="filterProductss" class="grid grid-cols-3 gap-4 sm:grid-cols-4 sm:gap-x-6 sm:gap-y-8 lg:grid-cols-5 xl:grid-cols-6 hidden">
    <?php $__currentLoopData = $mlbb; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($item->tipe == "mlbb"): ?>
            <a
                class="group relative transform overflow-hidden rounded-2xl  bg-murky-700 duration-300 ease-in-out hover:shadow-2xl hover:ring-2 hover:ring-primary-500 hover:ring-offset-2 hover:ring-offset-murky-900 category-item"
                href="<?php echo e(url('/id/' . $item->kode)); ?>"
                style="outline: none;"
            >
                  <div class="blur-sharp">
                <img
                    alt="<?php echo e($item->nama); ?>"
                    fetchpriority="high"
                    width="192"
                    height="288"
                    decoding="async"
                    data-nimg="1"
                    class="aspect-[4/6] object-cover object-center"
                    sizes="100vw"
                    src="<?php echo e($item->thumbnail); ?>"
                    style="color: transparent;"
                />
                
                </div>
                <article class="absolute inset-x-0 -bottom-10 z-10 flex transform flex-col px-3 transition-all duration-300 ease-in-out group-hover:bottom-3 sm:px-4 group-hover:sm:bottom-4">
                    <h2 class="truncate text-sm font-semibold text-murky-200 sm:text-base"><?php echo e($item->nama); ?></h2>
                    <p class="truncate text-xxs text-murky-400 sm:text-xs"><?php echo e($item->sub_nama); ?></p>
                </article>
                <div class="absolute inset-0 transform bg-gradient-to-t from-transparent transition-all duration-300 group-hover:from-murky-900">
                    <div class="mdigital-item-container"></div>
                </div>
            </a>
        <?php endif; ?>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>

                                </div>
                                
                               
                               <div id="headlessui-tabs-panel-topup" role="tabpanel" aria-labelledby="headlessui-tabs-tab-topup" data-tabs-content style="display: none;">
 <div class="grid grid-cols-3 gap-4 sm:grid-cols-4 sm:gap-x-6 sm:gap-y-8 lg:grid-cols-5 xl:grid-cols-6" id="game">
    <?php $__currentLoopData = $kategori; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($category->tipe == "game" || $category->tipe == "populer"): ?>
            <a
                class="group relative transform overflow-hidden featured-game-card rounded-2xl  bg-murky-700 duration-300 ease-in-out hover:shadow-2xl hover:ring-2 hover:ring-primary-500 hover:ring-offset-2 hover:ring-offset-murky-900 category-item"
                href="<?php echo e(url('/id/' . $category->kode)); ?>"
                style="outline: none;"
            >
                <div class="blur-sharp">
                    <img
                        alt="<?php echo e($category->nama); ?>"
                        fetchpriority="high"
                        width="192"
                        height="288"
                        class="aspect-[4/6] object-cover object-center transition-all duration-300 ease-in-out group-hover:blur-lg group-hover:brightness-75 group-hover:saturate-150 group-hover:sepia"
                        sizes="100vw"
                        src="<?php echo e($category->thumbnail); ?>"
                        style="color: transparent;"
                    />
                </div>
                <article class="absolute inset-x-0 -bottom-10 z-10 flex transform flex-col px-3 transition-all duration-300 ease-in-out group-hover:bottom-3 sm:px-4 group-hover:sm:bottom-4">
                    <h2 class="truncate text-sm font-semibold text-murky-200 sm:text-base"><?php echo e($category->nama); ?></h2>
                    <p class="truncate text-xxs text-murky-400 sm:text-xs"><?php echo e($category->sub_nama); ?></p>
                </article>
                <div class="absolute inset-0 mdigital-item-container transform bg-gradient-to-t from-transparent transition-all duration-300 group-hover:from-murky-900">
                    <div class="mdigital-item-container"></div>
                </div>
            </a>
        <?php endif; ?>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>


<div class="text-center mt-3" id="buttonContainer2">
    <div class="justify-content-center">
        <button class="inline-flex items-center justify-center melpazoom rounded-md bg-primary-500 px-4 py-2 text-sm font-medium text-white duration-300 hover:bg-murky-800/75 disabled:cursor-not-allowed disabled:opacity-75 lg:border lg:border-murky-800/75 lg:bg-transparent lg:hover:bg-murky-800" id="showAllButton2" aria-label="Tampilkan Lainnya" type="button">Tampilkan Lainnya...</button>
    </div>
</div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const panelTopup = document.getElementById("game");
        const items = panelTopup.querySelectorAll(".category-item");
        const showAllButton = document.getElementById("showAllButton2");
        const buttonContainer = document.getElementById("buttonContainer2");
        
        let visibleItems = 12;
        
        function updateVisibility() {
            items.forEach((item, index) => {
                item.style.display = index < visibleItems ? "block" : "none";
            });
            
            if (items.length <= 12) {
                buttonContainer.style.display = "none";
            } else {
                buttonContainer.style.display = visibleItems >= items.length ? "none" : "block";
            }
        }
        
        updateVisibility();
        
        showAllButton.addEventListener("click", () => {
            visibleItems += 12;
            updateVisibility();
        });
    });
</script>



                                
                                
                                <div id="headlessui-tabs-panel-emoney" role="tabpanel" aria-labelledby="headlessui-tabs-tab-emoney" data-tabs-content style="display: none;">
                                    <div class="grid grid-cols-3 gap-4 sm:grid-cols-4 sm:gap-x-6 sm:gap-y-8 lg:grid-cols-5 xl:grid-cols-6 " >
                                         <?php $__currentLoopData = $kategori; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                      <?php if($category->tipe == "emoney"): ?>
                                        <a
                                            class="group relative transform overflow-hidden rounded-2xl  bg-murky-700 duration-300 ease-in-out hover:shadow-2xl hover:ring-2 hover:ring-primary-500 hover:ring-offset-2 hover:ring-offset-murky-900 category-item"
                                            href="<?php echo e(url('/id')); ?>/<?php echo e($category->kode); ?>"
                                            style="outline: none;"
                                        >
                                            <img
                                                alt="<?php echo e($category->nama); ?>"
                                                fetchpriority="high"
                                                width="192"
                                                height="288"
                                                class="aspect-[4/6] object-cover object-center"
                                                sizes="100vw"
                                                src="<?php echo e($category->thumbnail); ?>"
                                                style="color: transparent;"
                                            />
                                            <article class="absolute inset-x-0 -bottom-10 z-10 flex transform flex-col px-3 transition-all duration-300 ease-in-out group-hover:bottom-3 sm:px-4 group-hover:sm:bottom-4">
                                                <h2 class="truncate text-sm font-semibold text-murky-200 sm:text-base"><?php echo e($category->nama); ?></h2>
                                                <p class="truncate text-xxs text-murky-400 sm:text-xs"><?php echo e($category->sub_nama); ?></p>
                                            </article>
                                            <div class="absolute inset-0 transform bg-gradient-to-t from-transparent transition-all duration-300 group-hover:from-murky-900"></div>
                                        </a>
                                   
          <?php endif; ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </div>
                                </div>
                                <div id="headlessui-tabs-panel-app" role="tabpanel" aria-labelledby="headlessui-tabs-tab-app" data-tabs-content style="display: none;">
                                    <div class="grid grid-cols-3 gap-4 sm:grid-cols-4 sm:gap-x-6 sm:gap-y-8 lg:grid-cols-5 xl:grid-cols-6 " >
                                         <?php $__currentLoopData = $kategori; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                      <?php if($category->tipe == "app"): ?>
                                        <a
                                            class="group relative transform overflow-hidden rounded-2xl  bg-murky-700 duration-300 ease-in-out hover:shadow-2xl hover:ring-2 hover:ring-primary-500 hover:ring-offset-2 hover:ring-offset-murky-900 category-item"
                                            href="<?php echo e(url('/id')); ?>/<?php echo e($category->kode); ?>"
                                            style="outline: none;"
                                        >
                                            <img
                                                alt="<?php echo e($category->nama); ?>"
                                                fetchpriority="high"
                                                width="192"
                                                height="288"
                                                class="aspect-[4/6] object-cover object-center"
                                                sizes="100vw"
                                                src="<?php echo e($category->thumbnail); ?>"
                                                style="color: transparent;"
                                            />
                                            <article class="absolute inset-x-0 -bottom-10 z-10 flex transform flex-col px-3 transition-all duration-300 ease-in-out group-hover:bottom-3 sm:px-4 group-hover:sm:bottom-4">
                                                <h2 class="truncate text-sm font-semibold text-murky-200 sm:text-base"><?php echo e($category->nama); ?></h2>
                                                <p class="truncate text-xxs text-murky-400 sm:text-xs"><?php echo e($category->sub_nama); ?></p>
                                            </article>
                                            <div class="absolute inset-0 transform bg-gradient-to-t from-transparent transition-all duration-300 group-hover:from-murky-900"></div>
                                        </a>
                                   
          <?php endif; ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </div>
                                </div>
                                
                                
                              
                              

                                <div id="headlessui-tabs-panel-pulsa" role="tabpanel" aria-labelledby="headlessui-tabs-tab-pulsa" data-tabs-content style="display: none;">
                                              <div class="grid grid-cols-3 gap-4 sm:grid-cols-4 sm:gap-x-6 sm:gap-y-8 lg:grid-cols-5 xl:grid-cols-6" >
                                         <?php $__currentLoopData = $kategori; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php if($category->tipe == "pulsa"): ?>
                                        <a
                                            class="group relative transform overflow-hidden rounded-2xl bg-murky-700 duration-300 ease-in-out hover:shadow-2xl hover:ring-2 hover:ring-primary-500 hover:ring-offset-2 hover:ring-offset-murky-900 category-item" 
                                            href="<?php echo e(url('/id/' . $category->kode)); ?>"
                                            style="outline: none;"
                                        >
                                       <div class="blur-sharp">
                    <img
                        alt="<?php echo e($category->nama); ?>"
                        fetchpriority="high"
                        width="192"
                        height="288"
                        class="aspect-[4/6] object-cover object-center transition-all duration-300 ease-in-out group-hover:blur-lg group-hover:brightness-75 group-hover:saturate-150 group-hover:sepia"
                        sizes="100vw"
                        src="<?php echo e($category->thumbnail); ?>"
                        style="color: transparent;"
                    />
                </div>
                <article class="absolute inset-x-0 -bottom-10 z-10 flex transform flex-col px-3 transition-all duration-300 ease-in-out group-hover:bottom-3 sm:px-4 group-hover:sm:bottom-4">
                    <h2 class="truncate text-sm font-semibold text-murky-200 sm:text-base"><?php echo e($category->nama); ?></h2>
                    <p class="truncate text-xxs text-murky-400 sm:text-xs"><?php echo e($category->sub_nama); ?></p>
                </article>
                <div class="absolute inset-0 mdigital-item-container transform bg-gradient-to-t from-transparent transition-all duration-300 group-hover:from-murky-900">
                    <div class="mdigital-item-container"></div>
                </div>
                                        </a>
                                   
          <?php endif; ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </div>
                                </div>

                                <div id="headlessui-tabs-panel-voucher" role="tabpanel" aria-labelledby="headlessui-tabs-tab-voucher" data-tabs-content style="display: none;">
                                              <div class="grid grid-cols-3 gap-4 sm:grid-cols-4 sm:gap-x-6 sm:gap-y-8 lg:grid-cols-5 xl:grid-cols-6">
                                         <?php $__currentLoopData = $kategori; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php if($category->tipe == "voucher"): ?>
                                        <a
                                            class="group relative transform overflow-hidden rounded-2xl bg-murky-700  duration-300 ease-in-out hover:shadow-2xl hover:ring-2 hover:ring-primary-500 hover:ring-offset-2 hover:ring-offset-murky-900 category-item"
                                            href="<?php echo e(url('/id/' . $category->kode)); ?>"
                                            style="outline: none;"
                                        >
                                   <div class="blur-sharp">
                    <img
                        alt="<?php echo e($category->nama); ?>"
                        fetchpriority="high"
                        width="192"
                        height="288"
                        class="aspect-[4/6] object-cover object-center transition-all duration-300 ease-in-out group-hover:blur-lg group-hover:brightness-75 group-hover:saturate-150 group-hover:sepia"
                        sizes="100vw"
                        src="<?php echo e($category->thumbnail); ?>"
                        style="color: transparent;"
                    />
                </div>
                <article class="absolute inset-x-0 -bottom-10 z-10 flex transform flex-col px-3 transition-all duration-300 ease-in-out group-hover:bottom-3 sm:px-4 group-hover:sm:bottom-4">
                    <h2 class="truncate text-sm font-semibold text-murky-200 sm:text-base"><?php echo e($category->nama); ?></h2>
                    <p class="truncate text-xxs text-murky-400 sm:text-xs"><?php echo e($category->sub_nama); ?></p>
                </article>
                <div class="absolute inset-0 mdigital-item-container transform bg-gradient-to-t from-transparent transition-all duration-300 group-hover:from-murky-900">
                    <div class="mdigital-item-container"></div>
                </div>
                                        </a>
                                   
          <?php endif; ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </div>
                                </div>

                                <div id="headlessui-tabs-panel-entertaiment" role="tabpanel"  aria-labelledby="headlessui-tabs-tab-entertaiment" data-tabs-content style="display: none;">
                                    <div class="grid grid-cols-3 gap-4 sm:grid-cols-4 sm:gap-x-6 sm:gap-y-8 lg:grid-cols-5 xl:grid-cols-6" ></div>
                                </div>

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


  
 
<div class="popup-structuree popup-slidee flex min-h-full items-center justify-center p-4 text-center sm:p-0" id="popupp">
    <div class="fixed inset-0 z-10 overflow-y-auto">
        <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
            <div class="relative w-full transform overflow-hidden rounded-lg bg-murky-900 text-left shadow-xl transition-all sm:my-8 sm:max-w-3xl !rounded-2xl opacity-100 translate-y-0 sm:scale-100" id="headlessui-dialog-panel-:rd:" data-headlessui-state="open">
                <div class="absolute right-0 top-0 block pr-4 pt-4">
                    <button type="button" name="popupp" class="close-popup-buttonn rounded-md bg-murky-700 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-murky-800" data-popup-id="popup-0">
                        <span class="sr-only">Close</span>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-6 w-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div class="w-full pb-4 flex flex-col items-center justify-center">
                    <div class="object-center">
                        <img src="<?php echo e(isset($popup->path) ? $popup->path : ''); ?>" class="object-center" style="color: transparent; width: 100%; height: auto;" alt="" />
                    </div>
                    <div class="relative flex flex-col items-center pt-4 text-white">
                        <div class="flex w-full items-center justify-center px-4">
                            <div class="col-span-2 -mt-3 flex w-full flex-col items-center justify-center !text-xxs">
                                <h2 class="max-w-xl pt-1 text-center text-sm font-semibold">PENGUMUMAN</h2>
                            </div>
                        </div>
                        <div class="w-full max-w-none prose prose-sm px-4 py-4 text-xs text-white">
                            <p class="text-center" style="text-align: center;">
                                <?php echo isset($popup->deskripsi) ? $popup->deskripsi : '<span class="custom-span">Selamat datang di '.htmlspecialchars(ENV("APP_NAME"), ENT_QUOTES, 'UTF-8').' Selamat berbelanja.</span>'; ?>

                            </p>
                        </div>
                    </div>
                    <div class="flex w-full items-center justify-start px-4 pb-2">
                        <div class="flex items-center">
                            <input type="checkbox" id="dontshowinfoo" class="h-4 w-4 cursor-pointer rounded border-murky-600 bg-murky-700 text-primary-500 focus:ring-primary-400 focus:ring-offset-murky-900" />
                            <label class="block text-xs font-medium text-white ml-3 block select-none text-sm text-white !text-xxs !ml-2">Jangan tampilkan lagi</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


         
       <script type="text/javascript">document.addEventListener("DOMContentLoaded",function(){let e=document.getElementById("dontshowinfoo"),t=document.querySelector(".popup-structuree"),o=document.querySelectorAll(".close-popup-buttonn");function n(){t.style.display="none",e.checked&&localStorage.setItem("hidePopupp","true")}o.forEach(e=>{e.addEventListener("click",n)}),"true"===localStorage.getItem("hidePopupp")?t.style.display="none":t.style.display="block"}),document.addEventListener("DOMContentLoaded",function(){let e=document.querySelectorAll(".popup-slidee"),t=!1;0<e.length&&(e[0].classList.add("show"),t=!0),document.addEventListener("click",function(o){t&&(Array.from(e).some(e=>e.contains(o.target))||(e.forEach(e=>{e.classList.remove("show")}),t=!1))})});</script>

<?php echo $__env->make('../footer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php $__env->startPush('custom_script'); ?>
<script>document.addEventListener("DOMContentLoaded",function(){let t=document.querySelectorAll("[data-tabs-toggle]"),e=document.querySelectorAll("[data-tabs-content]"),a=t[0],l=document.querySelector(a.getAttribute("data-tabs-toggle"));a.classList.add("active"),a.style.backgroundColor="var(--warna_3)",l.style.display="block",t.forEach(function(a){a.addEventListener("click",function(){e.forEach(function(t){t.style.display="none"}),t.forEach(function(t){t.classList.remove("active"),t.style.backgroundColor="var(--warna_1)"});let a=this.getAttribute("data-tabs-toggle"),l=document.querySelector(a);l.style.display="block",this.classList.add("active"),this.style.backgroundColor="var(--warna_3)"})})});</script>
<script>
function updateTimer() {
<?php $__currentLoopData = $flashsale; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $fs): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php
$expiredFlashSale = new DateTime($fs->expired_flash_sale);
$formattedDate = $expiredFlashSale->format('Y-m-d H:i:s');
?>
var countDownDate=new Date("<?php echo e($formattedDate); ?>").getTime(),x=setInterval(function(){var t=new Date().getTime(),e=countDownDate-t;e>0?(document.getElementById("hours").textContent=Math.floor(e%864e5/36e5).toString().padStart(2,"0"),document.getElementById("minutes").textContent=Math.floor(e%36e5/6e4).toString().padStart(2,"0"),document.getElementById("seconds").textContent=Math.floor(e%6e4/1e3).toString().padStart(2,"0")):(clearInterval(x),document.getElementById("hours").textContent="00",document.getElementById("minutes").textContent="00",document.getElementById("seconds").textContent="00",document.getElementById("expired_time_flash_sale").textContent="Waktu sudah habis!")},1e3);
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
}document.addEventListener("DOMContentLoaded", function() {updateTimer();});
</script>

 
<?php $__env->stopPush(); ?>




<?php $__env->stopSection(); ?>

<?php echo $__env->make('template.template', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/dutn6651/public_html/findus.dutatopup.com/project/resources/views/template/id/index.blade.php ENDPATH**/ ?>