@extends('../main')
@section("title", $title." -")
@section('css')

<style type="text/css">
    


   .w-screen {
    width: 100vw;
}  

.rating-color {

    color: #fbc634 !important;

}  

 .spinner {
        border: 2px solid white;
        border-left-color: #ccc;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 1s infinite linear;
        margin-left: 10px;
        display: none;
    }

    .button-loading {
        pointer-events: none;
        opacity: 0.5;
    }

    @keyframes  spin {
        to {
            transform: rotate(360deg);
        }
    }


    .btn-order {      
      position: relative;
      display: inline-block;            
      background: rgba(0,0,0,.5);       
      box-sizing: border-box;
      box-shadow: 0 15px 25px rgba(0,0,0,.6);
      overflow: hidden;
      transition: .5s;    
      border-radius: 10px;     
      border: none; 
    }

    .btn-order:hover {
      background: #FF8100;      
      box-shadow: 0 0 5px #03e9f4,
      0 0 25px #03e9f4,
      0 0 50px #03e9f4,
      0 0 100px #03e9f4;
    }
    

    .btn-order span {
      position: absolute;
      display: block;
    }

    .btn-order span:nth-child(1) {
      top: 0;
      left: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, #03e9f4);
      animation: btn-anim1 1s linear infinite;
    }

    @keyframes btn-anim1 {
      0% {
        left: -100%;
      }
      50%,100% {
        left: 100%;
      }
    }

    .btn-order  span:nth-child(2) {
      top: -100%;
      right: 0;
      width: 2px;
      height: 100%;
      background: linear-gradient(180deg, transparent, #03e9f4);
      animation: btn-anim2 1s linear infinite;
      animation-delay: .25s
    }

    @keyframes btn-anim2 {
      0% {
        top: -400%;
      }
      50%,100% {
        top: 100%;
      }
    }

    .btn-order span:nth-child(3) {
      bottom: 0;
      right: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(270deg, transparent, #03e9f4);
      animation: btn-anim3 1s linear infinite;
      animation-delay: .5s
    }

    @keyframes btn-anim3 {
      0% {
        right: -100%;
      }
      50%,100% {
        right: 100%;
      }
    }

    .btn-order span:nth-child(4) {
      bottom: -100%;
      left: 0;
      width: 2px;
      height: 100%;
      background: linear-gradient(360deg, transparent, #03e9f4);
      animation: btn-anim4 1s linear infinite;
      animation-delay: .75s
    }

    @keyframes btn-anim4 {
      0% {
        bottom: -100%;
      }
      50%,100% {
        bottom: 100%;
      }
    }

    .rounded-lg {

        border-radius: 0.5rem;

    }
    
    .align-items-center {
        border:none;
    }

.product-thumbnail-container img {
    position: relative;
    transform: rotateY(20deg) rotateX(-4deg)!important;
    transform-origin: left center;
}

    .btn-check:checked+.btn-secondary {

        border: 2px solid #FFBD59;

        background-color: #FFBD59 !important;

    }



    a {

        text-decoration: none !important;

    }



    .button-secondary:hover {

        background-color: transparent !important;

    }



    .card-custom {

        background-color: bg-dark !important;

    }



    .btn-secondary {

        background-color: transparent !important;

    }



    .rounded {

        border-radius: 0% !important;

    }







    .hayutopup-pgimg {

        background-color: white;

        border-radius: 3px;

        border: 1px solid white;

    }



    .hayutopup-dicek {

        font-size: 9px;

        font-style: italic;

        color: #2f2fd5;

    }



    .ap-otp-input {

        border: 3px solid #adadad43;

        border-radius: 18px;

        width: 35px;

        height: 53px;

        margin: 4px;

        text-align: center;

        font-size: 35px;

    }





    .ap-otp-input:focus {

        outline: none !important;

        border: 3px solid #adadad43;

        transition: 0.12s ease-in;

    }

.card {
    background-color: hsl(var(--card) / 0.75);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}




    

    

</style>


@endsection
@section('content')
@include('../navbar')


  

<div class="wrapper">
    <main class="relative">
        <div class="games-bg relative pb-16" style="padding-top: 80px; padding-bottom: 5rem;">
            <div class="absolute inset-0">
                <img class="h-full w-full object-cover inline-block" src="{{ $kategori->bannerlayanan }} " alt=""/>
                <div class="absolute inset-0 mix-blend-multiply" aria-hidden="true"></div>
            </div>
<div class="relative mx-auto max-w-7xl py-16 px-2 pt-0 sm:py-32 sm:px-6 lg:px-8"></div>
   <div class="absolute inset-0 -z-10">
         <div class="area">
            <ul class="circles">
            <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: 1130px; animation-delay: 0.686975s; animation-duration: 8s;"></span>
            <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: -350px; animation-delay: 0.670151s; animation-duration: 8s;"></span>
            <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: 563px; animation-delay: 0.632454s; animation-duration: 9s;"></span>
            <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: -969px; animation-delay: 0.524996s; animation-duration: 5s;"></span>
            <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: -1153px; animation-delay: 0.460272s; animation-duration: 8s;"></span>
            <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: -560px; animation-delay: 0.223791s; animation-duration: 6s;"></span>
            <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: -1287px; animation-delay: 0.406558s; animation-duration: 4s;"></span>
            <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: 211px; animation-delay: 0.475533s; animation-duration: 6s;"></span>
            <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: -63px; animation-delay: 0.394929s; animation-duration: 5s;"></span>
            <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: -112px; animation-delay: 0.78249s; animation-duration: 2s;"></span>
            <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: 946px; animation-delay: 0.353787s; animation-duration: 5s;"></span>
            <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: 275px; animation-delay: 0.309607s; animation-duration: 5s;"></span>
            <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: 1216px; animation-delay: 0.35162s; animation-duration: 8s;"></span>
            <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: -210px; animation-delay: 0.413144s; animation-duration: 7s;"></span>
            <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: -842px; animation-delay: 0.395388s; animation-duration: 6s;"></span>
            <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: -323px; animation-delay: 0.582248s; animation-duration: 4s;"></span>
            <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: 278px; animation-delay: 0.710367s; animation-duration: 4s;"></span>
            <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: -736px; animation-delay: 0.564896s; animation-duration: 6s;"></span>
            <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: -800px; animation-delay: 0.206357s; animation-duration: 7s;"></span>
            <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: -1118px; animation-delay: 0.628613s; animation-duration: 9s;"></span>
            <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: 1361px; animation-delay: 0.529785s; animation-duration: 7s;"></span>
            <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: -11px; animation-delay: 0.64863s; animation-duration: 6s;"></span>
            <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: -678px; animation-delay: 0.701722s; animation-duration: 3s;"></span>
            <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: -170px; animation-delay: 0.366231s; animation-duration: 5s;"></span>
            <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: 946px; animation-delay: 0.521904s; animation-duration: 7s;"></span>
            <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: 1364px; animation-delay: 0.484818s; animation-duration: 9s;"></span>
            <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: 943px; animation-delay: 0.502043s; animation-duration: 3s;"></span>
            <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: 1296px; animation-delay: 0.577243s; animation-duration: 7s;"></span>
            <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: 1273px; animation-delay: 0.273317s; animation-duration: 5s;"></span>
            <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: -1306px; animation-delay: 0.556245s; animation-duration: 7s;"></span>
            <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: -360px; animation-delay: 0.344508s; animation-duration: 5s;"></span>
            <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: 306px; animation-delay: 0.332693s; animation-duration: 6s;"></span>
            <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: 312px; animation-delay: 0.250245s; animation-duration: 9s;"></span>
            <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: 649px; animation-delay: 0.607517s; animation-duration: 2s;"></span>
            <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: 13px; animation-delay: 0.379304s; animation-duration: 6s;"></span>
            <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: 1269px; animation-delay: 0.586079s; animation-duration: 5s;"></span>
            <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: -798px; animation-delay: 0.675148s; animation-duration: 4s;"></span>
            <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: 1199px; animation-delay: 0.515393s; animation-duration: 6s;"></span>
            <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: 304px; animation-delay: 0.799655s; animation-duration: 8s;"></span>
   
    </ul>
  </div>
</div>
</div>
</div>
        <section class="relative">
            <div class="flex min-h-32 w-full items-center border-y border-border bg-nvd lg:min-h-[160px]">
                <div class="shadow-detail-card px-3 pb-3 sm:py-8 md:px-6">
                    <div class="container relative flex flex-row items-center space-x-4 pb-3 md:items-center">
                        <div class="product-thumbnail-container -mt-16 md:-mt-[7.2rem] sm:rounded-3xl sm:p-2 ">
                            <img width="300" height="300" src="{{ $kategori->thumbnail }}" alt="{{ $kategori->nama }}"
                                class="h-32 w-32 rounded-2xl object-cover md:h-[170px] md:w-[170px] lg:h-80 lg:w-80"/>
                        </div>
                        <div class="flex-1 space-y-0.5 pt-6 sm:mt-3 sm:space-y-2 md:mt-6">
                            <h1 class="flex items-center font-extrabold text-white sm:text-3xl">{{ $kategori->nama }}
                            </h1>
                            <p class="pt-1 font-light text-[10px] lg:text-[14px] text-warning line-clamp-2">{{ $kategori->sub_nama }}
                                        </p>
                            <div class="flex flex-wrap items-center gap-2 gap-x-4 pt-3">
                    
                                    <div class="inline-flex items-center space-x-2 text-xxs md:text-sm">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-3 w-3 text-yellow-400"><path d="M11.983 1.907a.75.75 0 00-1.292-.657l-8.5 9.5A.75.75 0 002.75 12h6.572l-1.305 6.093a.75.75 0 001.292.657l8.5-9.5A.75.75 0 0017.25 8h-6.572l1.305-6.093z"></path></svg>
                                    <span class="font-semibold">Proses Cepat</span></div>
                                    <div class="inline-flex items-center space-x-2 text-xxs md:text-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-3 w-3 text-sky-300"><path fill-rule="evenodd" d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902.848.137 1.705.248 2.57.331v3.443a.75.75 0 001.28.53l3.58-3.579a.78.78 0 01.527-.224 41.202 41.202 0 005.183-.5c1.437-.232 2.43-1.49 2.43-2.903V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0010 2zm0 7a1 1 0 100-2 1 1 0 000 2zM8 8a1 1 0 11-2 0 1 1 0 012 0zm5 1a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
                                    <span class="font-semibold">Layanan Chat 24/7</span></div>
                                    <div class="inline-flex items-center space-x-2 text-xxs md:text-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-3 w-3 text-green-400"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6.5 6.326a6.52 6.52 0 01-1.5.174 6.487 6.487 0 01-5.011-2.36l.49-.98a.423.423 0 01.614-.164l.294.196a.992.992 0 001.491-1.139l-.197-.593a.252.252 0 01.126-.304l1.973-.987a.938.938 0 00.361-1.359.375.375 0 01.239-.576l.125-.025A2.421 2.421 0 0012.327 6.6l.05-.149a1 1 0 00-.242-1.023l-1.489-1.489a.5.5 0 01-.146-.353v-.067a6.5 6.5 0 015.392 9.23 1.398 1.398 0 00-.68-.244l-.566-.566a1.5 1.5 0 00-1.06-.439h-.172a1.5 1.5 0 00-1.06.44l-.593.592a.501.501 0 01-.13.093l-1.578.79a1 1 0 00-.553.894v.191a1 1 0 001 1h.5a.5.5 0 01.5.5v.326z" clip-rule="evenodd"></path></svg>
                                    <span class="font-semibold">Region Global</span></div>
                                   
                                </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <div class="container px-3 grid grid-cols-3 gap-4 pb-8 pt-4">
            <div class="col-span-3 md:col-span-1">
                <div class="sticky top-24 flex flex-col space-y-6">
                    <div class="sticky top-24 flex flex-col space-y-8">
                    <div class="card">
                        <div class="flex h-full flex-col justify-end gap-4 ms-4 mt-1">
                            <div>
                            </div>
                        </div>
                        <div class="prose prose-sm px-4 py-2 pb-8 text-xs text-white/70 sm:px-6">
                            <div>
                                <br>Cara Order :</br>
                                
                                                                        <ol>
                                                                        @if($kategori->kode == "mobile-legends")
                                                                        <li>Masukkan ID & (SERVER)</li>
                                                                        <li>Pilih Nominal Diamond</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp yg benar!</li>
                                                                        <li>Klik Beli &amp; lakukan Pembayaran</li>
                                                                        <li>Diamond akan masuk otomatis ke akun Anda.</li>
                                                                        
                                                                        @elseif($kategori->kode == "free-fire")
                                                                        <li>Masukkan ID</li>
                                                                        <li>Pilih Nominal Diamond</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp yg benar!</li>
                                                                        <li>Klik Beli &amp; lakukan Pembayaran</li>
                                                                        <li>Diamond akan masuk otomatis ke akun Anda.</li>
                                                                        
                                                                        @elseif($kategori->kode == "genshin-impact")
                                                                        <li>Masukkan ID dan SERVER</li>
                                                                        <li>Pilih Nominal Genesis Crystal</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp yg benar!</li>
                                                                        <li>Klik Beli &amp; lakukan Pembayaran</li>
                                                                        <li>Genesis Crystal akan masuk otomatis ke akun Anda.</li>
                                                                        
                                                                        @elseif($kategori->kode == "apex-legend-mobile")
                                                                        <li>Masukkan ID</li>
                                                                        <li>Pilih Nominal Syndicate Gold</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp yg benar!</li>
                                                                        <li>Klik Beli &amp; lakukan Pembayaran</li>
                                                                        <li>Syndicate Gold akan masuk otomatis ke akun Anda.</li>
                                                                        
                                                                        @elseif($kategori->kode == "league-of-legends")
                                                                        <li>Masukkan Riot ID</li>
                                                                        <li>Pilih Nominal Wild Core</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp yg benar!</li>
                                                                        <li>Klik Beli &amp; lakukan Pembayaran</li>
                                                                        <li>Wild Core akan masuk otomatis ke akun Anda.</li>
                                                                        
                                                                        @elseif($kategori->kode == "valorant")
                                                                        <li>Masukkan ID</li>
                                                                        <li>Pilih Nominal Point</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp yg benar!</li>
                                                                        <li>Klik Beli &amp; lakukan Pembayaran</li>
                                                                        <li>Valorant Point akan masuk otomatis ke akun Anda.</li>
                                                                        
                                                                        @elseif($kategori->kode == "call-of-duty-mobile")
                                                                        <li>Masukkan Open ID</li>
                                                                        <li>Pilih Nominal CP</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        <li>CP akan masuk otomatis ke akun Anda.</li>
                                                                        
                                                                        @elseif($kategori->kode == "arena-of-valor")
                                                                        <li>Masukkan Open ID akun AOV Anda</li>
                                                                        <li>Pilih Nominal Top Up</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        <li>Vouchers akan masuk otomatis ke akun Anda.</li>
                                                                        
                                                                        @elseif($kategori->kode == "dragon-raja")
                                                                        <li>Masukkan ID</li>
                                                                        <li>Pilih Nominal Coupon</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        <li>Coupon akan masuk otomatis ke akun Anda.</li>
                                                                        
                                                                        @elseif($kategori->kode == "sausage-man")
                                                                        <li>Masukkan ID</li>
                                                                        <li>Pilih Nominal Candy</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        <li>Candy akan masuk otomatis ke akun Anda.</li>
                                                                        
                                                                        @elseif($kategori->kode == "life-after")
                                                                        <li>Masukkan ID dan Server</li>
                                                                        <li>Pilih Nominal Credits</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        <li>Life After Credits akan masuk otomatis ke akun Anda.</li>
                                                                        
                                                                        @elseif($kategori->kode == "lords-mobile")
                                                                        <li>Masukkan ID IGG</li>
                                                                        <li>Pilih Nominal Diamond</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        <li>Diamond akan masuk otomatis ke akun Anda.</li>
                                                                        
                                                                        @elseif($kategori->kode == "tom-and-jerry")
                                                                        <li>Masukkan ID</li>
                                                                        <li>Pilih Nominal Diamond</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        <li>Diamond akan masuk otomatis ke akun Anda.</li>
                                                                        @elseif($kategori->kode == "lords-mobile")
                                                                        <li>Masukkan ID IGG</li>
                                                                        <li>Pilih Nominal Diamond</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        <li>Diamond akan masuk otomatis ke akun Anda.</li>
                                                                        
                                                                        @elseif($kategori->kode == "marvel-super-war")
                                                                        <li>Masukkan ID</li>
                                                                        <li>Pilih Nominal Credits</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        <li>Credits akan masuk otomatis ke akun Anda.</li>
                                                                        @elseif($kategori->kode == "mu-origin-3")
                                                                        <li>Masukkan ID</li>
                                                                        <li>Pilih Nominal Divine Diamonds</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        <li>Divine Diamonds akan masuk otomatis ke akun Anda.</li>
                                                                        @elseif($kategori->kode == "one-punch-man")
                                                                        <li>Masukkan ID dan Server</li>
                                                                        <li>Pilih Nominal Coupons</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        <li>Coupons akan masuk otomatis ke akun Anda.</li>
                                                                        @elseif($kategori->kode == "omega-legend")
                                                                        <li>Masukkan ID</li>
                                                                        <li>Pilih Nominal Gold</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        <li>Gold akan masuk otomatis ke akun Anda.</li>
                                                                        @elseif($kategori->kode == "mangatoon")
                                                                        <li>Masukkan ID</li>
                                                                        <li>Pilih Nominal Coins</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        <li>Coins akan masuk otomatis ke akun Anda.</li>
                                                                        @elseif($kategori->kode == "youtube-premium" ||$kategori->kode == "disney-hotstar")
                        <li>Masukkan Email Anda [contoh akupembeli@gmail.com]</li>
                        <li>Pilih Paket </li>
                        <li>Pilih Metode Pembayaran </li>
                        <li>Tulis Nomor WhatsApp Sesuai Petunjuk </li>
                        <li>Klik Beli &amp; lakukan Pembayaran </li>
                        <br/>
                        <b>Estimasi Antrian 1-6 Jam. Maximal 1x24 Jam</b><br/>
                        @elseif($kategori->kode == "netflix-premium")
                        <li>Kolom 1 Masukkan Email Anda,Dan Kolom 2 Isi Dengan Request Profil Dan Pin 4 Digit</li>
                        <li>Pilih Nominal Paket </li>
                        <li>Pilih Metode Pembayaran </li>
                        <li>Tulis Nomor WhatsApp Sesuai Petunjuk! </li>
                        <li>Klik Beli &amp; lakukan Pembayaran </li>
                         <br/>
                        <b>Estimasi Antrian 1-6 Jam. Maximal 1x24 Jam</b><br/>
                        @elseif($kategori->kode == "spotify-premium")
                        <li>Kolom 1 Masukkan Email Anda,Dan Kolom 2 Isi Dengan Nama Lengkap Spotify </li>
                        <li>Pilih Nominal Paket </li>
                        <li>Pilih Metode Pembayaran </li>
                        <li>Tulis Nomor WhatsApp Sesuai Petunjuk! </li>
                        <li>Klik Beli &amp; lakukan Pembayaran </li>
                         @elseif($kategori->kode == "Voucher-Playstation" ||$kategori->kode == "Voucher-Roblox"||$kategori->kode == "Voucher-Shell"||$kategori->kode == "Voucher-Steam"||$kategori->kode == "Voucher-Valorant"||$kategori->kode == "Voucher-Razer")
                        <li>Masukkan Nomor Whatsapp</li>
                        <li>Pilih Nominal </li>
                        <li>Pilih Metode Pembayaran </li>
                        <li>Tulis Nomor WhatsApp Sesuai Petunjuk </li>
                        <li>Klik Beli &amp; lakukan Pembayaran </li>
                        <br/>
                        <b>Estimasi 1-6 Jam. Maximal 1x24 Jam ,Voucher Akan Dikirim Melalui Whatsapp</b><br/>
                        @elseif($kategori->kode == "Jasa-Joki")
                        <p><strong>Joki Rank</strong> Mobile Legends dari <i>{{ ENV('APP_NAME') }}</i>: Solusi Cepat Naik Rank !</p>

<p>Kami mempersembahkan layanan joki Mobile Legends yang cepat, murah, serta aman dan terpercaya! Tingkatkan permainan dan rank Anda dengan bantuan dari profesional kami. Kami mengutamakan kepuasan dan keamanan akun Anda dalam setiap jasa yang kami berikan.</p>

<p>Waktu Pengecekan Orderan :<br />
Orderan yang sudah dibayarkan akan kami cek setiap hari mulai pukul 07.00 - 22.00 WIB.<br />
Untuk orderan yang melewati batas waktu pengecekan, akan kami proses pada jam kerja di hari berikutnya.<br />
<br />
Berikut adalah langkah-langkah sederhana untuk Order Jasa Joki :</p>

<ol>
	<li>Lengkapi Data Akun Joki Dengan Teliti (Pastikan data yang Anda masukkan sudah benar dan lengkap)</li>
	<li>Masukkan Jumlah Order Sesuai Tujuan Rank (Pastikan jumlah order sesuai dengan rank yang Anda inginkan dan sesuai dengan S&K <i>{{ ENV('APP_NAME') }})</i></li>
	<li>Pilih Metode Pembayaran (Kenyamanan Anda adalah prioritas kami. Kami menyediakan berbagai metode pembayaran yang mudah dan aman)</li>
	<li>Masukkan Kode Promo Jika Ada (Gunakan kode promo untuk mendapatkan penawaran spesial dan diskon menarik)</li>
	<li>Masukkan Nomor WhatsApp dan Email yang Valid (Dapatkan konfirmasi dan notifikasi langsung ke kontak Anda)</li>
	<li>Klik Order Now & Lakukan Pembayaran (Tunggu konfirmasi dari kami dan orderan Anda akan segera diproses)</li>
</ol>

<p>Estimasi Waktu Proses :<br />
Kami berkomitmen untuk menyelesaikan jasa joki Anda dalam waktu 12-48 jam. Waktu penyelesaian dapat bervariasi tergantung pada jumlah dan kompleksitas pesanan. Kami berupaya untuk memberikan layanan secepat mungkin</p>

<p><i>{{ ENV('APP_NAME') }}</i> Sahabat Para Gamers!</p>
                        
                                                                        
                                                                        @else
                                                                        <li>Masukkan Data Akun</li>
                                                                        <li>Pilih Nominal</li>
                                                                        <li>Pilih Metode Pembayaran</li>
                                                                        <li>Masukkan Nomor WhatsApp</li>
                                                                        <li>Klik Order Now &amp; lakukan Pembayaran</li>
                                                                        @endif
                                                                        
                                                                        </ol>                                                                                                
                                                </p>
                                                <div class="sm:col-span-2">
                                                <dd class="text-xs" style="color: rgb(234 234 234);">
                                                    <div>
                                                        <ol>
                                                           {!! $kategori->ket_layanan !!}
                                                        </ol>
                                                        </div>
                                                    </dd>
                                                </div>
                                
                           </div>
                        </div>
                    </div>
                    
                    
                
    
    
                    <div class="card mt-4 hidden rounded-xl md:block">
                        <div class="flex">
                            <div
                                class="flex items-center justify-center rounded-tl-xl bg-primary-x px-4 py-2 text-xl font-semibold">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true" class="h-4 w-4">
                                    <path fill-rule="evenodd"
                                        d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <h3
                                class="flex w-full items-center justify-between rounded-tr-xl  px-2 py-2 text-base font-semibold leading-6 text-white sm:px-4">
                                Testimonials</h3>
                        </div>
                        @if(count($ratings) == 0)
                        <div class="col-lg-auto mt-3" style="padding-left: 20px; padding-right: 20px;">
                            <div class="list-group shadow h-100">
                                <div class="alert alert-danger text-center alert-dismissible fade show" role="alert">
                                Produk Belum ada penilaian.</div>
                            </div>
                        </div>
                        @else
                        
                        <div class="p-4">
                            <div class="mb-6 flex flex-col items-center justify-center">
                                <div class="flex items-center gap-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-10 w-10 flex-shrink-0 text-yellow-400">
                                        <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"></path>
                                    </svg>
                                    <div>
                                        <span class="text-5xl font-semibold text-card-foreground">{{ $averageRating ?? 'N/A' }}</span>
                                        <sub class="text-lg font-semibold text-card-foreground">/ 5.0</sub>
                                    </div>
                                </div>
                                <p class="pt-2 text-center text-sm text-card-foreground">
                                    Pelanggan merasa puas dengan produk ini. <br>
                                    Dari <span class="font-semibold">{{ number_format($totalRatings) }}</span> ulasan.
                                </p>
                            </div>
                            <div>
                                <h3 class="sr-only">Review data</h3>
                                <dl class="space-y-3 text-card-foreground">
                                    @for($i = 5; $i >= 1; $i--)
                                        @php
                                            $count = $ratingsCount[$i] ?? 0;
                                            $percentage = $totalRatings > 0 ? ($count / $totalRatings) * 100 : 0;
                                        @endphp
                                        <div class="flex items-center text-sm">
                                            <dt class="flex flex-1 items-center pl-1">
                                                <p class="text-text-color w-3 font-medium">{{ $i }}<span class="sr-only"> star reviews</span></p>
                                                <div aria-hidden="true" class="ml-1 flex flex-1 items-center">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="text-yellow-400 h-5 w-5 flex-shrink-0">
                                                        <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"></path>
                                                    </svg>
                                                    <div class="relative ml-3 flex-1">
                                                        <div class="h-3 rounded-[4px] border border-gray-200"></div>
                                                        <div class="absolute inset-y-0 rounded-[4px] border border-yellow-400 bg-yellow-400" style="width: {{ $percentage }}%;"></div>
                                                    </div>
                                                </div>
                                            </dt>
                                            <dd class="text-text-color ml-3 w-10 text-right text-sm tabular-nums">{{ number_format($count) }}<span class="sr-only"> reviews</span></dd>
                                        </div>
                                    @endfor
                                </dl>
                            </div>
                            <div class="mt-6">
                                <p class="text-sm/6 text-card-foreground">Apakah kamu menyukai produk ini? Beri tahu kami dan calon pembeli lainnya tentang pengalamanmu.</p>
                            </div>
                        </div>
                        @foreach ($ratings as $rating)
                        <div class="flow-root p-6">
                            <div class="-my-6 divide-y divide-muted">
                                <div class="py-3">
                                    <div class="flex items-center">
                                        <div class="w-full">
                                            <div class="flex items-start justify-between">
                                                <div>
                                                    <h4 class="mt-0.5 text-xs font-bold text-white">08{{substr($rating->no_pembeli,0,-13).'********'.substr($rating->no_pembeli, -2)}}</h4>
                                                </div>
                                                <div class="flex items-center">
                                                    @for($i=1; $i<=5; $i++) @if($i <=$rating->bintang)
                                                        <i class="fa fa-star rating-color"></i>
                                                        @else
                                                        <i class="fa fa-star"></i>
                                                        @endif
                                                        @endfor
                                                </div>
                                            </div>
                                            <p class="sr-only">5 out of 5 stars</p>
                                        </div>
                                    </div>
                                    <div class="flex w-full justify-between pt-1 text-xxs">
                                        <span>“{{ $rating->comment }}”</span><span>{{$rating->created_at->format('Y-m-d H:i:s')}}</span>
                                    </div>
                                    <div class="text-murky-20 mt-1 space-y-6 text-xs italic card-header mt-3"></div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @endif
                        <div class="px-4 pb-4 sm:px-6 sm:pb-6">
                            <a class="inline-flex items-center bg-primary-x hover:bg-primary-x/75 rounded-lg p-1 px-4 gap-x-2 text-sm hover:text-white" href="{{ route('ratingcust') }}"
                                style="outline: none;">
                                <span>Lihat semua ulasan</span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true" class="h-4 w-4">
                                    <path fill-rule="evenodd"
                                        d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            </div>
            


                          
                       
            <ul class="col-span-3 flex flex-col space-y-6 md:col-span-2">
                <div class="card">
                    <div class="card border-0 mb-0 shadow-form">
                        <div class="">
                            <div class="flex">
                            <div class="flex items-center justify-center rounded-tl-xl bg-primary-x px-4 py-2 text-xl font-semibold">1</div>
                                <div class="card-titel ml-2 flex space-x-4 items-center font-extrabold leading-6 md:text-xl" style="color: rgb(234 234 234);">
                                    Masukkan Data
                                <div class="cursor-pointer">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="2" stroke="currentColor" data-bs-toggle="modal"
                                        data-bs-target="#petunjukModal" aria-hidden="true"
                                        class="h-5 w-5 text-gray-600 " style="cursor:pointer;">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                                        </path>
                                    </svg>

                                </div>
                                </div>

                            </div>

                        </div>

                        <div class="px-1">

                            <div class="card-body">

                                <div id="userData">

                                    @if($kategori->server_id && $kategori->kode != "life-after" &&

                                    $kategori->kode != "zenless-zone-zero" && $kategori->kode != "genshin-impact" &&

                                    $kategori->kode != "ragnarok-m" && $kategori->kode != "tof")

                                    <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">
                                        <div class="w-full">
                                            <label for="id" class="block text-xs font-medium text-foreground pb-1">ID</label>
                                            <div class="relative rounded-sm shadow-sm">
                                                <input
                                                    class="bg-input block w-full rounded-md text-foreground placeholder-muted-foreground text-xs shadow-sm focus:border-primary-x focus:outline-none focus:ring-1 focus:ring-primary-x py-[0.5rem] px-[0.75rem]"
                                                    name="user_id" placeholder="Ketikan ID" type="number" value=""
                                                    id="user_id" />
                                            </div>
                                        </div>
                                        <div class="w-full">
                                            <label for="server" class="block text-xs font-medium text-foreground pb-1">Server</label>
                                            <div class="relative rounded-md text-black shadow-sm">
                                                <input
                                                    class="bg-input block w-full rounded-md text-foreground placeholder-muted-foreground text-xs shadow-sm focus:border-primary-x focus:outline-none focus:ring-2 focus:ring-primary-x py-[0.5rem] px-[0.75rem]"
                                                    name="Server" placeholder="Ketikan Server" type="number" value=""
                                                    id="zone" />
                                            </div>
                                        </div>
                                    </div>
                                    <p class="mt-2 text-xxs italic">Contoh: 12345678 (1234) ID = 123456789 dan Server = 1234 </p>
                                    
                                    @elseif($kategori->kode == "one-punch-man")
                                     <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">
                                        <div class="w-full">
                                            <label for="id" class="block text-xs font-medium text-text-color pb-1">UID</label>
                                            <div class="relative rounded-sm text-black shadow-sm">
                                                <input
                                                    class="form-floating focus:!bg-white block w-full rounded-md border-gray-300 text-xs shadow-sm focus:outline-none hover:ring-red-600 focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="user_id" placeholder="UID" type="text" value=""
                                                    id="user_id" />
                                            </div>
                                        </div>
                                        <div class="w-full">
                                            <label for="server" class="block text-xs font-medium text-text-color pb-1">SID</label>
                                            <div class="relative rounded-md text-black shadow-sm">
                                                <input
                                                    class="block w-full focus:!bg-white rounded-md border-gray-300 text-xs shadow-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="Server" placeholder="SID" type="text" value=""
                                                    id="zone" />
                                            </div>
                                        </div>
                                    </div>
                                    <p class="mt-2 text-xxs italic">Ketuk Mail Pada Area Kota Utama. Lalu Klik Tombol Isi Ulang. Kamu Dapat Menemukan UID & SID Pada Pojok Kiri Bawah.</p>
                                        

                                    @elseif($kategori->kode == "life-after")
                                    <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">
                                        <div class="w-full">
                                            <div class="relative rounded-md text-black shadow-sm">
                                                <input
                                                    class="block w-full rounded-md border-gray-300 text-xs shadow-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="user_id" placeholder="User ID" type="text" id="user_id" value=""
                                                    fdprocessedid="81xg1" />
                                            </div>
                                        </div>
                                        <div class="w-full">
                                            <div class="relative rounded-md text-black shadow-sm">
                                                <select class="block w-full rounded-md border-gray-300 text-xs shadow-sm focus:outline-none focus:border-indigo-700 focus:ring focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] appearance-none"
                                                name="zoneId" id="zone" placeholder="Pilih Server"
                                                fdprocessedid="n3x76"> 
                                                <option value="" hidden="">Pilih Server</option>
                                                <option value="miskatown">Miska Town</option>
                                                <option value="sandcastle">Sand Castle</option>
                                                <option value="mouthswamp">Mouth Swamp</option>
                                                <option value="redwoodtown">Red Wood Town</option>
                                                <option value="obelisk">Oblisk</option>
                                                <option value="fallforest">Fall Forest</option>
                                                <option value="mountsnow">Mount Snow</option>
                                                <option value="nancycity">Nancy City</option>
                                                <option value="charlestown">Charles Town</option>
                                                <option value="snowhighlands">Snow High Lands</option>
                                                <option value="santopany">Santopany</option>
                                                <option value="levincity">Levin City</option>
                                                <option value="newland">New Land</option>
                                                <option value="milestone">Mile Stone</option>
                                                <option value="twinislands">Twin Island</option>
                                                <option value="500007">ChaosOutpost (NA)</option>
                                                <option value="500008">IronStride (NA)</option>
                                                <option value="520007">ChaosCity (SEA)</option>
                                                <option value="520008">TwinIslands (SEA)</option>
                                                <option value="520009">HopeWall (SEA)</option>
                                                <option value="500009">CrystalthornSea (NA)</option>
                                                <option value="520010">LabyrinthSea (SEA)</option>
                                            </select>
                                        </div>
                                      </div>
                                    </div>
                                    <p class="mt-2 text-xxs italic">Silahkan Masukkan User ID
                                        &amp; Server Anda Dan Pastikan Benar.</p>

                                    @elseif($kategori->kode == "tof")

                                    <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">
                                        <div class="w-full">
                                            <div class="relative rounded-md text-black shadow-sm">
                                                <input
                                                    class="block w-full rounded-md border-gray-300 text-xs shadow-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="user_id" placeholder="User ID" type="text" id="user_id" value=""
                                                    fdprocessedid="81xg1" />
                                            </div>
                                        </div>
                                        <div class="w-full">
                                            <div class="relative rounded-md text-black shadow-sm">
                                                <select
                                                    class="block w-full rounded-md border-gray-300 text-sm shadow-sm sm:text-sm focus:outline-none focus:border-indigo-700 focus:ring focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] appearance-none"
                                                    name="zoneId" id="zone" placeholder="Pilih Server"
                                                    fdprocessedid="n3x76"> 
                                                <option value="" hidden="">Pilih Server</option>
                                                <option value="Southeast Asia-Osillron">Southeast Asia-Osillron</option>
                                                <option value="Southeast Asia-Mistilteinn">Southeast Asia-Mistilteinn</option>
                                                <option value="Southeast Asia-Illyrians">Southeast Asia-Illyrians</option>
                                                <option value="Southeast Asia-Florione">Southeast Asia-Florione</option>
                                                <option value="Southeast Asia-Animus">Southeast Asia-Animus</option>
                                                <option value="Southeast Asia-Gumi Gumi">Southeast Asia-Gumi Gumi</option>
                                                <option value="Southeast Asia-Oryza">Southeast Asia-Oryza
                                                </option>
                                                <option value="Southeast Asia-Saeri">Southeast Asia-Saeri
                                                </option>
                                                <option value="Southeast Asia-Phantasia">Southeast
                                                    Asia-Phantasia</option>
                                                <option value="Southeast Asia-Mechafield">Southeast
                                                    Asia-Mechafield</option>
                                                <option value="Southeast Asia-Ethereal Dream">Southeast
                                                    Asia-Ethereal Dream</option>
                                                <option value="Southeast Asia-Odyssey">Southeast Asia-Odyssey
                                                </option>
                                                <option value="Southeast Asia-Aestral-Noa">Southeast
                                                    Asia-Aestral-Noa</option>
                                                <option value="Southeast Asia-Chandra">Southeast Asia-Chandra
                                                </option>
                                                <option value="Southeast Asia-Aeria">Southeast Asia-Aeria
                                                </option>
                                                <option value="Southeast Asia-Scarlet">Southeast Asia-Scarlet
                                                </option>
                                                <option value="Southeast Asia-Fantasia">Southeast Asia-Fantasia
                                                </option>
                                                <option value="Southeast Asia-Stardust">Southeast Asia-Stardust
                                                </option>
                                                <option value="Southeast Asia-Arcania">Southeast Asia-Arcania
                                                </option>
                                                <option value="Southeast Asia-Valhalla">Southeast Asia-Valhalla
                                                </option>
                                                <option value="North America-Lunalite">North America-Lunalite
                                                </option>
                                                <option value="North America-Sol-III">North America-Sol-III
                                                </option>
                                                <option value="North America-Lighthouse">North
                                                    America-Lighthouse</option>
                                                <option value="North America-Silver Bridge">North America-Silver
                                                    Bridge</option>
                                                <option value="North America-The Glades">North America-The
                                                    Glades</option>
                                                <option value="North America-Nightfall">North America-Nightfall
                                                </option>
                                                <option value="North America-Frontier">North America-Frontier
                                                </option>
                                                <option value="North America-Libera">North America-Libera
                                                </option>
                                                <option value="North America-Solaris">North America-Solaris
                                                </option>
                                                <option value="North America-Freedom-Oasis">North
                                                    America-Freedom-Oasis</option>
                                                <option value="North America-The Worlds Between">North
                                                    America-The Worlds Between</option>
                                                <option value="North America-Radiant">North America-Radiant
                                                </option>
                                                <option value="North America-Tempest">North America-Tempest
                                                </option>
                                                <option value="North America-New Era">North America-New Era
                                                </option>
                                                <option value="North America-Observer">North America-Observer
                                                </option>
                                                <option value="North America-Starlight">North America-Starlight
                                                </option>
                                                <option value="North America-Myriad">North America-Myriad
                                                </option>
                                                <option value="North America-Oumuamua">North America-Oumuamua
                                                </option>
                                                <option value="North America-Eternium Phantasy">North
                                                    America-Eternium Phantasy</option>
                                                <option value="North America-Azure Plane">North America-Azure
                                                    Plane</option>
                                                <option value="North America-Nirvana">North America-Nirvana
                                                </option>
                                                <option value="Europe-Magia Przygoda Aida">Europe-Magia Przygoda
                                                    Aida</option>
                                                <option value="Europe-Transport Hub">Europe-Transport Hub
                                                </option>
                                                <option value="Europe-The Lumina">Europe-The Lumina</option>
                                                <option value="Europe-Lycoris">Europe-Lycoris</option>
                                                <option value="Europe-Ether">Europe-Ether</option>
                                                <option value="Europe-Olivine">Europe-Olivine</option>
                                                <option value="Europe-Iter">Europe-Iter</option>
                                                <option value="Europe-Aimanium">Europe-Aimanium</option>
                                                <option value="Europe-Alintheus">Europe-Alintheus</option>
                                                <option value="Europe-Andoes">Europe-Andoes</option>
                                                <option value="Europe-Anomora">Europe-Anomora</option>
                                                <option value="Europe-Astora">Europe-Astora</option>
                                                <option value="Europe-Valstamm">Europe-Valstamm</option>
                                                <option value="Europe-Blumous">Europe-Blumous</option>
                                                <option value="Europe-Celestialrise">Europe-Celestialrise
                                                </option>
                                                <option value="Europe-Cosmos">Europe-Cosmos</option>
                                                <option value="Europe-Dyrnwyn">Europe-Dyrnwyn</option>
                                                <option value="Europe-Elypium">Europe-Elypium</option>
                                                <option value="Europe-Excalibur">Europe-Excalibur</option>
                                                <option value="Europe-Espoir IV">Europe-Espoir IV</option>
                                                <option value="Europe-Estrela">Europe-Estrela</option>
                                                <option value="Europe-Ex Nihilor">Europe-Ex Nihilor</option>
                                                <option value="Europe-Futuria">Europe-Futuria</option>
                                                <option value="Europe-Hephaestus">Europe-Hephaestus</option>
                                                <option value="Europe-Midgard">Europe-Midgard</option>
                                                <option value="Europe-Kuura">Europe-Kuura</option>
                                                <option value="Europe-Lyramiel">Europe-Lyramiel</option>
                                                <option value="Europe-Magenta">Europe-Magenta</option>
                                                <option value="Europe-Omnium Prime">Europe-Omnium Prime</option>
                                                <option value="Europe-Turmus">Europe-Turmus</option>
                                                <option value="South America-Corvus">South America-Corvus
                                                </option>
                                                <option value="South America-Calodesma Seven">South
                                                    America-Calodesma Seven</option>
                                                <option value="South America-Columba">South America-Columba
                                                </option>
                                                <option value="South America-Tiamat">South America-Tiamat
                                                </option>
                                                <option value="South America-Orion">South America-Orion</option>
                                                <option value="South America-Luna Azul">South America-Luna Azul
                                                </option>
                                                <option value="South America-Hope">South America-Hope</option>
                                                <option value="South America-Tanzanite">South America-Tanzanite
                                                </option>
                                                <option value="South America-Antlia">South America-Antlia
                                                </option>
                                                <option value="South America-Pegasus">South America-Pegasus
                                                </option>
                                                <option value="South America-Phoenix">South America-Phoenix
                                                </option>
                                                <option value="South America-Centaurus">South America-Centaurus
                                                </option>
                                                <option value="South America-Cepheu">South America-Cepheu
                                                </option>
                                                <option value="South America-Cygnus">South America-Cygnus
                                                </option>
                                                <option value="South America-Grus">South America-Grus</option>
                                                <option value="South America-Hydra">South America-Hydra</option>
                                                <option value="South America-Lyra">South America-Lyra</option>
                                                <option value="South America-Ophiuchus">South America-Ophiuchus
                                                </option>
                                                <option value="Asia-Pacific-Cocoaiteruyo">
                                                    Asia-Pacific-Cocoaiteruyo</option>
                                                <option value="Asia-Pacific-Food Fighter">Asia-Pacific-Food
                                                    Fighter</option>
                                                <option value="Asia-Pacific-Gomap">Asia-Pacific-Gomap</option>
                                                <option value="Asia-Pacific-Yggdrasil">Asia-Pacific-Yggdrasil
                                                </option>
                                                <option value="Asia-Pacific-Daybreak">Asia-Pacific-Daybreak
                                                </option>
                                                <option value="Asia-Pacific-Adventure">Asia-Pacific-Adventure
                                                </option>
                                                <option value="Asia-Pacific-Eden">Asia-Pacific-Eden</option>
                                                <option value="Asia-Pacific-Fate">Asia-Pacific-Fate</option>
                                                <option value="Asia-Pacific-Nova">Asia-Pacific-Nova</option>
                                                <option value="Asia-Pacific-Ruby">Asia-Pacific-Ruby</option>
                                                <option value="Asia-Pacific-Babel">Asia-Pacific-Babel</option>
                                                <option value="Asia-Pacific-Pluto">Asia-Pacific-Pluto</option>
                                                <option value="Asia-Pacific-Sushi">Asia-Pacific-Sushi</option>
                                                <option value="Asia-Pacific-Venus">Asia-Pacific-Venus</option>
                                                <option value="Asia-Pacific-Galaxy">Asia-Pacific-Galaxy</option>
                                                <option value="Asia-Pacific-Memory">Asia-Pacific-Memory</option>
                                                <option value="Asia-Pacific-Oxygen">Asia-Pacific-Oxygen</option>
                                                <option value="Asia-Pacific-Sakura">Asia-Pacific-Sakura</option>
                                                <option value="Asia-Pacific-Seeker">Asia-Pacific-Seeker</option>
                                                <option value="Asia-Pacific-Shinya">Asia-Pacific-Shinya</option>
                                                <option value="Asia-Pacific-Stella">Asia-Pacific-Stella</option>
                                                <option value="Asia-Pacific-Uranus">Asia-Pacific-Uranus</option>
                                                <option value="Asia-Pacific-Utopia">Asia-Pacific-Utopia</option>
                                                <option value="Asia-Pacific-Jupiter">Asia-Pacific-Jupiter
                                                </option>
                                                <option value="Asia-Pacific-Sweetie">Asia-Pacific-Sweetie
                                                </option>
                                                <option value="Asia-Pacific-Atlantis">Asia-Pacific-Atlantis
                                                </option>
                                                <option value="Asia-Pacific-Takoyaki">Asia-Pacific-Takoyaki
                                                </option>
                                                <option value="Asia-Pacific-Mars">Asia-Pacific-Mars</option>
                                            </select>
                                        </div>
                                        </div>
                                    </div>
                                    <p class="mt-2 text-xxs italic">Silahkan Masukkan User ID &amp; Server Anda Dan Pastikan Benar.</p>

                                    @elseif($kategori->kode == "genshin-impact")

                                    <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">
                                        <div class="w-full">
                                             <label for="id" class="block text-xs font-medium text-text-color pb-1">ID</label>
                                            <div class="relative rounded-lg text-black shadow-sm">
                                                <input class="form-floating bg-gray-300 focus:!bg-white block w-full rounded-md border-gray-300 text-xs shadow-sm focus:outline-none hover:ring-red-600 focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="user_id" placeholder="User ID" type="text" id="user_id" value=""
                                                    fdprocessedid="81xg1" />
                                            </div>
                                        </div>
                                        <div class="w-full">
                                                <label for="server" class="block text-xs font-medium text-text-color pb-1">Server</label>
                                            <div class="relative rounded-md text-black shadow-sm">
                                                <select
                                                    class="block w-full bg-gray-300 focus:!bg-white rounded-md border-gray-300 text-xs shadow-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="zoneId" id="zone" placeholder="Pilih Server"
                                                    fdprocessedid="n3x76">
                                                    <option value="" hidden="">Pilih Server</option>
                                                    <option value="america">America</option>
                                                    <option value="europe">Europe</option>
                                                    <option value="asia">Asia</option>
                                                    <option value="tw_hk_mo">TW, HK, MO</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="mt-2 text-xxs italic">Silahkan Masukkan User ID
                                        &amp; Server Anda Dan Pastikan Benar.</p>
                                        
                                        @elseif($kategori->kode == "zenless-zone-zero")

                                    <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">
                                        <div class="w-full">
                                             <label for="id" class="block text-xs font-medium text-text-color pb-1">ID</label>
                                            <div class="relative rounded-lg text-black shadow-sm">
                                                <input class="form-floating bg-gray-300 focus:!bg-white block w-full rounded-md border-gray-300 text-xs shadow-sm focus:outline-none hover:ring-red-600 focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="user_id" placeholder="User ID" type="text" id="user_id" value=""
                                                    fdprocessedid="81xg1" />
                                            </div>
                                        </div>
                                        <div class="w-full">
                                                <label for="server" class="block text-xs font-medium text-text-color pb-1">Server</label>
                                            <div class="relative rounded-md text-black shadow-sm">
                                                <select
                                                    class="block w-full bg-gray-300 focus:!bg-white rounded-md border-gray-300 text-xs shadow-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="zoneId" id="zone" placeholder="Pilih Server"
                                                    fdprocessedid="n3x76">
                                                    <option value="" hidden="">Pilih Server</option>
                                                    <option value=",usa">America</option>
                                                    <option value=",euro">Europe</option>
                                                    <option value=",asia">Asia</option>
                                                    <option value=",cht">TW, HK, MO</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="mt-2 text-xxs italic">Silahkan Masukkan User ID
                                        &amp; Server Anda Dan Pastikan Benar.</p>
                                        
                                        @elseif($kategori->kode == "honkai-star-rail")

                                    <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">
                                        <div class="w-full">
                                             <label for="id" class="block text-xs font-medium text-text-color pb-1">ID</label>
                                            <div class="relative rounded-lg text-black shadow-sm">
                                                <input class="form-floating bg-gray-300 focus:!bg-white block w-full rounded-md border-gray-300 text-xs shadow-sm focus:outline-none hover:ring-red-600 focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="user_id" placeholder="User ID" type="text" id="user_id" value=""
                                                    fdprocessedid="81xg1" />
                                            </div>
                                        </div>
                                        <div class="w-full">
                                                <label for="server" class="block text-xs font-medium text-text-color pb-1">Server</label>
                                            <div class="relative rounded-md text-black shadow-sm">
                                                <select
                                                    class="block w-full bg-gray-300 focus:!bg-white rounded-md border-gray-300 text-xs shadow-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="zoneId" id="zone" placeholder="Pilih Server"
                                                    fdprocessedid="n3x76">
                                                    <option value="America">America</option>
                                                    <option value="Asia">Asia</option>
                                                    <option value="Europe">Europe</option>
                                                    <option value="TW_HK_MO">TW_HK_MO</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="mt-2 text-xxs italic">Silahkan Masukkan User ID
                                        &amp; Server Anda Dan Pastikan Benar.</p>

                                    @elseif($kategori->kode == "heroes-evolved")

                                    <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">

                                        <div class="w-full">

                                            <div class="relative rounded-md text-black shadow-sm">

                                                <input
                                                    class="block w-full rounded-md border-gray-300 text-xs shadow-sm  focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="user_id" placeholder="User ID" type="text" id="user_id" value=""
                                                    fdprocessedid="81xg1" />

                                            </div>

                                        </div>

                                        <div class="w-full">

                                            <div class="relative rounded-md text-black shadow-sm">

                                                <select
                                                    class="block w-full rounded-md border-gray-300 text-xs shadow-sm focus:outline-none focus:border-indigo-700 focus:ring focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] appearance-none"
                                                    name="zoneId" id="zone" placeholder="Pilih Server"
                                                    fdprocessedid="n3x76">

                                                    <option value="" hidden="">Pilih Server</option>

                                                <option value="North America - LOST TEMPLE [NA]"> North America

                                                    - LOST TEMPLE [NA]</option>

                                                <option value="North America - NEW ORDER"> North America - NEW

                                                    ORDER</option>

                                                <option value="Europe - ASGARD [EU]"> Europe - ASGARD [EU]

                                                </option>

                                                <option value="Europe - OLYMPUS [EU]"> Europe - OLYMPUS [EU]

                                                </option>

                                                <option value="South America - AMAZON [SA]"> South America -

                                                    AMAZON [SA]</option>

                                                <option value="South America - EL DORADO [SA]"> South America -

                                                    EL DORADO [SA]</option>

                                                <option value="Asia - SHANGRI-LA [AS]"> Asia - SHANGRI-LA [AS]

                                                </option>

                                                <option value="Asia - S1.ANGKOR [AS]"> Asia - S1.ANGKOR [AS]

                                                </option>

                                                <option value="Asia - S2.EL NIDO [AS]"> Asia - S2.EL NIDO [AS]

                                                </option>

                                                <option value="Asia - ไทย[TH]"> Asia - ไทย[TH]</option>

                                                <option value="Asia - ไทยแลนด์[TH]"> Asia - ไทยแลนด์[TH]

                                                </option>

                                            </select>

                                        </div>

                                    </div>
                                    </div>



                                    @elseif($kategori->kode == "ragnarok-m")

                                   <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">

                                        <div class="w-full">

                                            <div class="relative rounded-md text-black shadow-sm">

                                                <input
                                                    class="block w-full rounded-md border-gray-300 text-xs shadow-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="user_id" placeholder="User ID" type="text" id="user_id" value=""
                                                    fdprocessedid="81xg1" />

                                            </div>

                                        </div>

                                        <div class="w-full">

                                            <div class="relative rounded-md text-black shadow-sm">

                                                <select
                                                    class="block w-full rounded-md border-gray-300 text-xs shadow-sm focus:outline-none focus:border-indigo-700 focus:ring focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] appearance-none"
                                                    name="zoneId" id="zone" placeholder="Pilih Server"
                                                    fdprocessedid="n3x76">

                                                    <option value=""selected="" disabled="">Pilih Server</option>
                                                    <option value="Eternal Love">Eternal Love</option>
                                                    <option value="Midnight Party">Midnight Party</option>
                                                    <option value="Memory Of Faith">Memory Of Faith</option>
                                                    <option value="Memory Of Faith">Valhalla</option>
                                                            

                                            </select>

                                        </div>

                                    </div>
                                    </div>

                                   @elseif($kategori->kode == "ace-racer")

                                    <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">
                                        <div class="w-full">
                                            <div class="relative rounded-lg text-black shadow-sm">
                                                <input
                                                    class="block w-full rounded-md border-gray-300 text-xs shadow-sm  focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="user_id" placeholder="User ID" type="text" id="user_id" value=""
                                                    fdprocessedid="81xg1" />
                                            </div>
                                        </div>
                                        <div class="w-full">
                                            <div class="relative rounded-md text-black shadow-sm">
                                                <select
                                                    class="block w-full rounded-md border-gray-300 text-xs shadow-sm focus:outline-none focus:border-indigo-700 focus:ring focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] appearance-none"
                                                    name="zoneId" id="zone" placeholder="Pilih Server"
                                                    fdprocessedid="n3x76">
                                                     <option value="" hidden="">Pilih Server</option>
                                                     <option value="JAPAN">日本分站/JAPAN/일본-구역/サブ会場-日本</option>
                                                     <option value="KOREA">韓國分站/KOREA/한국/サブ会場-韓国</option>
                                                     <option value="ASIA">亞洲分站/ASIA/아시아/サブ会場-アジア</option>
                                                     <option value="NORTH-AMERICA">北美分站/NORTH-AMERICA/북미/サブ会場-北米</option>
                                                     <option value="EUROPE">歐洲分站/EUROPE/유럽/サブ会場-ヨーロッパ</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="mt-2 text-xs">Silahkan Masukkan User ID
                                        &amp; Server Anda.</p>
                                        
                                    @elseif($kategori->kode == "pln")
                                     <div class="grid gap-2 grid-cols-1">
                                        <div class="w-full">
                                            <label for="id" class="block text-xs font-medium text-text-color pb-1">No Pelanggan</label>
                                            <div class="relative text-black shadow-sm">
                                                <input class="bg-gray-300 focus:!bg-white block w-full rounded-md border-gray-300 text-xs shadow-sm  focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]"
                                                    name="userId" id="user_id" placeholder="Ketikan No Pelanggan" type="number" value="" required />
                                            </div>
                                        </div>
                                    </div>
                                    <p class="mt-2 text-xxs italic">Silahkan Masukkan Nomor Listrik</p>
                                    
                                  

                                    @elseif($kategori->kode == "indosat" || $kategori->kode == "xl" || $kategori->kode == "tri" || $kategori->kode == "smartfren" || $kategori->kode == "telkomsel" || $kategori->kode == "axis" || $kategori->kode == "by-u" )
                                     <div class="grid gap-2 grid-cols-1">
                                        <div class="w-full">
                                            <label for="id" class="block text-xs font-medium text-text-color pb-1">No HP</label>
                                            <div class="relative text-black shadow-sm">
                                                <input class="bg-input block w-full rounded-md text-foreground placeholder-muted-foreground text-xs shadow-sm focus:border-primary-x focus:outline-none focus:ring-1 focus:ring-primary-x py-[0.5rem] px-[0.75rem]"
                                                    name="userId" id="user_id" placeholder="Masukkan Nomor HP" type="number" value="" required />
                                            </div>
                                        </div>
                                    </div>
                                    <p class="mt-2 text-xxs italic">Silahkan Masukkan Nomor HP Anda. Contoh : 08xxxx</p>
                                   
                                    
                                     @elseif($kategori->kode == "canva-pro")
                                    <div class="grid gap-2 grid-cols-1">
                                        <div class="w-full">
                                            <div class="relative text-black shadow-sm">
                                                <input class="bg-gray-300 focus:!bg-white block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]" placeholder="Masukkan Email" type="text"
                                                name="user_id" id="user_id" required>
                                            </div>
                                        </div>
                                    </div>
                                    @elseif($kategori->kode == "disney-hotstar")
                                    <div class="grid gap-2 grid-cols-1">
                                        <div class="w-full">
                                            <div class="relative form-group text-black shadow-sm">
                                                <input class="form-floating bg-gray-300 focus:!bg-white block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]" placeholder="Masukkan Email" type="text"
                                                name="user_id" id="user_id" value="" required>
                                           </div>                                    
                                        </div>
                                    </div>    
                                    @elseif($kategori->kode == "iqiyi-premium")
                                    <div class="grid gap-2 grid-cols-1">
                                        <div class="w-full">
                                            <div class="relative text-black shadow-sm">
                                                <input class="bg-gray-300 focus:!bg-white block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]" placeholder="Masukkan Email" type="text"
                                                name="user_id" id="user_id" required>
                                        </div>
                                    </div>
                                    </div>
                                    @elseif($kategori->kode == "netflix-premium")
                                    <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">
                                        <div class="w-full">
                                            <div class="relative rounded-sm text-black shadow-sm">
                                            <input class="form-floating block w-full bg-gray-300 focus:!bg-white block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]" placeholder="Masukkan Email" type="text"
                                                name="user_id" id="user_id" required>
                                        </div>
                                    </div>
                                        <div class="w-full">
                                            <div class="relative rounded-md text-black shadow-sm">
                                            <input class="form-floating block w-full bg-gray-300 focus:!bg-white block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]" placeholder="Masukkan Request Profile + PIN"
                                                type="text" name="zone" id="zone" >
                                        </div>
                                    </div>
                                    </div>
                                    @elseif($kategori->kode == "spotify-premium")
                                    <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">
                                        <div class="w-full">
                                            <div class="relative text-black shadow-sm">
                                                <input class="bg-gray-300 focus:!bg-white block w-full rounded-md border-gray-300 text-sm shadow-xs sm:text-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]" placeholder="Masukkan Email" type="text"
                                                name="user_id" id="user_id" required>
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-6">
                                        <div class="form-group mb-3">
                                            <input class="form-floating block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]" placeholder="Masukkan Nama Profile Spotify"
                                                type="text" name="zone" id="zone">
                                        </div>
                                    </div>
                                    </div>
                                    @elseif($kategori->kode == "vidio-premier")
                                   <div class="grid gap-2 grid-cols-1">
                                        <div class="w-full">
                                            <div class="relative text-black shadow-sm">
                                                <input class="bg-gray-300 focus:!bg-white block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]" placeholder="Masukkan Email" type="text"
                                                name="user_id" id="user_id" required>
                                        </div>                                    
                                        </div>
                                        </div>
                                    @elseif($kategori->kode == "wetv-premium")
                                    <div class="grid gap-2 grid-cols-1">
                                        <div class="w-full">
                                            <div class="relative text-black shadow-sm">
                                                <input class="bg-gray-300 focus:!bg-white block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]" placeholder="Masukkan Email" type="text"
                                                name="user_id" id="user_id" required>
                                        </div>
                                    </div>
                                    </div>
                                    @elseif($kategori->kode == "youtube-premium")
                                   <div class="grid gap-2 grid-cols-1">
                                        <div class="w-full">
                                            <div class="relative text-black shadow-sm">
                                                <input class="bg-gray-300 focus:!bg-white block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]" placeholder="Masukkan Email +( Password Khusus Email Sendiri )" type="text"
                                                name="user_id" id="user_id" required>
                                        </div>
                                      </div>
                                    </div>
                                    
                                   
                                   
                                   @elseif($kategori->kode == "voucher-shell" || $kategori->kode == "voucher-steam" || $kategori->kode == "voucher-playstation" || $kategori->kode == "voucher-razer" || $kategori->kode == "voucher-roblox" || $kategori->kode == "voucher-valorant")
                                    <div class="col-lg-12">
                                        <div class="form-group mb-3 text-black">
                                          <input class="bg-input block w-full rounded-md text-foreground placeholder-muted-foreground text-xs shadow-sm focus:border-primary-x focus:outline-none focus:ring-1 focus:ring-primary-x py-[0.5rem] px-[0.75rem]]" placeholder="Masukan Nomor Whatsapp." type="number"
                                                name="user_id" id="user_id" required>
                                        </div>
                                    </div>
                                    <p class="mt-2 text-sm" style="font-size: 12px; color: rgb(203, 203, 203);">Masukan nomor Handphone. Kode voucher otomatis terkirim melalui Riwayat Pesanan.</p>
                                   
                                   

                                    @elseif($kategori->kode == "gopay" || $kategori->kode == "ovo" || $kategori->kode == "dana" ||  $kategori->kode == "linkaja" || $kategori->kode == "shopeepay" || $kategori->kode == "isaku" )
                                    <div class="grid gap-2 grid-cols-1">
                                        <div class="w-full">
                                            <label for="id" class="block text-xs font-medium text-text-color pb-1">Ketikan Nomor</label>
                                            <div class="relative rounded-md text-black shadow-sm">
                                                <input
                                                    class="bg-input block w-full rounded-md text-foreground placeholder-muted-foreground text-xs shadow-sm focus:border-primary-x focus:outline-none focus:ring-1 focus:ring-primary-x py-[0.5rem] px-[0.75rem]]"
                                                    name="userId" id="user_id" placeholder="Ketikan Nomor" type="number"
                                                    value="" fdprocessedid="8qd1hx" />
                                            </div>
                                        </div>
                                    </div>
                                    <p class="mt-2 text-xs">Silahkan Masukkan Nomor Anda.</p>
                                   

                                   

                                    @elseif($kategori->kode == "joki-perstar" || $kategori->kode == "joki-classic" || $kategori->kode == "joki-paket")
                                    <div>
                                        <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">
                                            <div class="w-full">
                                                <div class="form-group mb-3 text-black">
                                                    <input class="form-floating block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border: 1px solid #ced4da; focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] bg-gray-300 focus:!bg-white" placeholder="Masukkan Email"
                                                        type="text" name="email_joki" id="email_joki"/>
                                                </div>
                                            </div>
                                            <div class="w-full">
                                                <div class="form-group mb-3 text-black">
                                                    <input class="form-floating block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border: 1px solid #ced4da; focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] bg-gray-300 focus:!bg-white" placeholder="Masukkan Password"
                                                        type="text" name="password_joki" id="password_joki" 
                                                       />
                                                </div>
                                            </div>
                                            <div class="w-full">
                                                <div class="form-group mb-3 text-black">
                                                    <input class="form-floating block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border: 1px solid #ced4da; focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] bg-gray-300 focus:!bg-white" placeholder="Minimal Request 3 Hero"
                                                        type="text" name="request_joki" id="request_joki" 
                                                         />
                                                </div>
                                            </div>
                                            <div class="w-full">
                                                <div class="form-group mb-3 text-black">
                                                    
                                                    <input class="form-floating block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border: 1px solid #ced4da; focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] bg-gray-300 focus:!bg-white" placeholder="Catatan Untuk Penjoki"
                                                        type="text" name="catatan_joki" id="catatan_joki" 
                                                         />
                                                </div>
                                            </div>
                                            <div class="w-full">
                                                <div class="form-group mb-3 text-black">
                                                   
                                                    <input class="form-floating block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border: 1px solid #ced4da; focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] bg-gray-300 focus:!bg-white" placeholder="NickName"
                                                        type="text" name="nickname_joki" id="nickname_joki"
                                                         />
                                                </div>
                                            </div>
                                            <div class="w-full">
                                                <div class="form-group mb-3 text-black">
                                                    
                                    <select class="form-select form-floating block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border: 1px solid #ced4da; focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] bg-gray-300 focus:!bg-white" placeholder="Login Via" id="loginvia_joki" name="loginvia_joki">
    				                <option value="_">Login Via</option>
    				                <option value="Facebook">Facebook</option>
    				                <option value="VK">VK</option>
    				                <option value="Google">Google</option>
    				                </select>
                                                </div>
                                            </div>
                                       </div>
                                    </div>
                                   
                                    
                                    @elseif($kategori->kode == "via-login-ff" || $kategori->kode == "via-login-ml")
                                    <div>
                                        <div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:grid-cols-2">
                                            <div class="w-full">
                                                <label for="id" class="block text-xs font-medium text-text-color pb-1">Email</label>
                                                <div class="form-group mb-3 text-black">
                                                    <input class="form-floating block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border: 1px solid #ced4da; focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] bg-gray-300 focus:!bg-white" placeholder="Masukkan Email"
                                                        type="text" name="user_id" id="user_id"/>
                                                </div>
                                            </div>
                                            <!-- Kolom Opsi Baru -->
                                            <div class="w-full">
                                                <label for="server" class="block text-xs font-medium text-text-color pb-1">Password</label>
                                                <div class="form-group mb-3 text-black">
                                                    <input class="form-floating block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border: 1px solid #ced4da; focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] bg-gray-300 focus:!bg-white" placeholder="Masukkan Password"
                                                        type="text" name="zone" id="zone"/>
                                                </div>
                                            </div>
                                            <div class="w-full">
                                                <label for="loginvia_joki" class="block text-xs font-medium text-text-color pb-1">Login Via</label>
                                                <div class="form-group mb-3 text-black">
                                                    <select class="form-select form-floating block w-full rounded-md border-gray-300 text-xs shadow-sm sm:text-sm focus:outline-none focus:border: 1px solid #ced4da; focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem] bg-gray-300 focus:!bg-white" placeholder="Login Via" id="via_login" name="via_login">
                                                        <option value="_">Pilih Login</option>
                                                        <option value="facebook">Facebook</option>
                                                        <option value="vk">VK</option>
                                                        <option value="twitter">Twitter</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    
                                   
                                    
@else

                                    <div class="grid gap-2 grid-cols-1">
                                        <div class="w-full">
                                            <label for="id" class="block text-xs font-medium text-foreground pb-1">ID</label>
                                            <div class="relative rounded-md text-black shadow-sm">
                                                <input
                                                    class="bg-input block w-full rounded-md text-foreground placeholder-muted-foreground text-xs shadow-sm focus:border-primary-x focus:outline-none focus:ring-1 focus:ring-primary-x py-[0.5rem] px-[0.75rem]"
                                                    name="userId" id="user_id" placeholder="Ketikan ID" type="number"
                                                    value="" fdprocessedid="8qd1hx" />
                                            </div>
                                        </div>
                                    </div>
                                    <p class="mt-2 text-xs">Silahkan Masukkan User ID Anda.</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



                <div class="card rounded-xl ">
                    <div class="card border-0 mb-0 shadow-form">
                        <div class="">
                            <div class="flex">
                                <div class="flex items-center justify-center rounded-tl-xl bg-primary-x px-4 py-2 text-xl font-semibold">2</div>
                                <h4 class="card-title mt-2 ms-2 lex items-center  font-extrabold leading-6 md:text-xl" style="color: rgb(234 234 234);">Pilih Nominal</h4>
                            </div>
                        </div>
                    </div>
                    <div class="px-1">
  <div class="card-body">
     <div class="row px-2 pt-3 ">
    @foreach($pakets as $paket)
    <div id="tempatNominal" class="mb-4">
      <h3 class="font-semibold ms-1">{{ $paket['nama'] }}</h3>
      <div class="row row-cols-2 mt-1">
        @if(Auth::check())
        @if(Auth::user()->role == "Member")
        @foreach($paket['layanan'] as $nom)
        @php
        if(Request::get('encrypt_msg') AND Crypt::decryptString(Request::get('encrypt_msg')) == $nom['id']) {
        $checked = 'checked';
        } else {
        $checked = '';
        }
        @endphp
        <div class="col-lg-4 px-2 mt-2">
          <div class="list-group shadow h-100 ">
            <input type="radio" name="nominal" id="{{ $nom->id }}" value="{{ $nom->id }}" data-type="diamond" {{$checked}}>
            <label for="{{ $nom->id }}" class="list-group-item h-100 ">
              <div class="row">
                <div class="col">
                  <div class="row" onclick="location.href='#bayar'">
                    <div class="col hayutopup-prod selected-order ">{{ $nom->layanan}}</div>
                    </div>
                    <div class="row">
                      <div class="col nominal-price">
                        @if($nom->status_flashsale == "Yes" && $nom->expired_flash_sale >= date('Y-m-d'))
                        <span class="sale-price"><i>Rp {{ number_format($nom->harga_flashsale) }}</i></span>
                        <br>
                        <span class="regular-price decoration-red-500 line-through">Rp {{ number_format($nom->harga) }}</span>
                        @else
                        <span class="sale-price">Rp {{ number_format($nom->harga) }}</span>
                        @endif  
                        </div>
                        </div>
                        </div>
                        <div class="flex aspect-square w-8 items-center object-contain object-right">
                          <img src="{{ $nom->product_logo }}" alt>
                          </div>
                          </div>
                          </label>
                          </div>
                          </div>
                          @endforeach
                          @elseif(Auth::user()->role == "Platinum")
        @foreach($paket['layanan'] as $nom)
        @php
        if(Request::get('encrypt_msg') AND Crypt::decryptString(Request::get('encrypt_msg')) == $nom['id']) {
        $checked = 'checked';
        } else {
        $checked = '';
        }
        @endphp
        <div class="col-lg-4 px-2 mt-2">
          <div class="list-group shadow h-100 ">
            <input type="radio" name="nominal" id="{{ $nom->id }}" value="{{ $nom->id }}" data-type="diamond" {{$checked}}>
            <label for="{{ $nom->id }}" class="list-group-item h-100 bg-gradient">
              <div class="row">
                <div class="col">
                  <div class="row" onclick="location.href='#bayar'">
                    <div class="col hayutopup-prod selected-order ">{{ $nom->layanan}}</div>
                    </div>
                    <div class="row">
                      <div class="col nominal-price">
                        @if($nom->status_flashsale == "Yes" && $nom->expired_flash_sale >= date('Y-m-d'))
                        <span class="sale-price"><i>Rp {{ number_format($nom->harga_flashsale) }}</i></span>
                        <br>
                        <span class="regular-price decoration-red-500 line-through ">Rp {{ number_format($nom->harga_platinum) }}</span>
                        @else
                        <span class="sale-price">Rp {{ number_format($nom->harga_platinum) }}</span>
                        @endif  
                        </div>
                        </div>
                        </div>
                        <div class="flex aspect-square w-8 items-center object-contain object-right">
                          <img src="{{ $nom->product_logo }}" alt>
                          </div>
                          </div>
                          </label>
                          </div>
                          </div>
                          @endforeach
                          @elseif(Auth::user()->role == "Gold" || Auth::user()->role == "Admin")
        @foreach($paket['layanan'] as $nom)
        @php
        if(Request::get('encrypt_msg') AND Crypt::decryptString(Request::get('encrypt_msg')) == $nom['id']) {
        $checked = 'checked';
        } else {
        $checked = '';
        }
        @endphp
        <div class="col-lg-4 px-2 mt-2">
          <div class="list-group shadow h-100 ">
            <input type="radio" name="nominal" id="{{ $nom->id }}" value="{{ $nom->id }}" data-type="diamond" {{$checked}}>
            <label for="{{ $nom->id }}" class="list-group-item h-100 bg-gradient">
              <div class="row">
                <div class="col">
                  <div class="row" onclick="location.href='#bayar'">
                    <div class="col hayutopup-prod selected-order ">{{ $nom->layanan}}</div>
                    </div>
                    <div class="row">
                      <div class="col nominal-price">
                        @if($nom->status_flashsale == "Yes" && $nom->expired_flash_sale >= date('Y-m-d'))
                        <span class="sale-price "><i>Rp {{ number_format($nom->harga_flashsale) }}</i></span>
                        <br>
                        <span class="regular-price decoration-red-500 line-through">Rp {{ number_format($nom->harga_gold) }}</span>
                        @else
                        <span class="sale-price">Rp {{ number_format($nom->harga_gold) }}</span>
                        @endif  
                        </div>
                        </div>
                        </div>
                        <div class="flex aspect-square w-8 items-center object-contain object-right">
                          <img src="{{ $nom->product_logo }}" alt>
                          
                          </div>
                          </div>
                          </label>
                          </div>
                          </div>
                          @endforeach
                          @endif
                          @else
@foreach($paket['layanan'] as $nom)
        @php
        if(Request::get('encrypt_msg') AND Crypt::decryptString(Request::get('encrypt_msg')) == $nom['id']) {
        $checked = 'checked';
        } else {
        $checked = '';
        }
        @endphp
<div class="col-lg-4 px-2 mt-2">
  <div class="list-group shadow h-100 ">
    <input type="radio" name="nominal" id="{{ $nom->id }}" value="{{ $nom->id }}" data-type="diamond">
    <label for="{{ $nom->id }}" class="list-group-item h-100 bg-gradient">
      <div class="row">
        <div class="col">
          <div class="row" onclick="location.href='#bayar'">
            <div class="col hayutopup-prod selected-order ">{{ $nom->layanan}}</div>
            </div>
            <div class="row">
              <div class="col nominal-price">
                @if($nom->status_flashsale == "Yes" && $nom->expired_flash_sale >= date('Y-m-d'))
                <span class="sale-price "><i>Rp {{ number_format($nom->harga_flashsale) }}</i></span>
                <br>
                <span class="regular-price decoration-red-500 line-through ">Rp {{ number_format($nom->harga) }}</span>
                @else
                <span class="sale-price">Rp {{ number_format($nom->harga) }}</span>
                @endif  
                </div>
                </div>
                </div>
                <div class="flex aspect-square w-8 items-center object-contain object-right">
                  <img src="{{ $nom->product_logo }}" alt>
                  </div>
                  </div>
                  </label>
                  </div>
                  </div>
                  @endforeach
                  @endif
                  </div>
                  </div>
                  @endforeach
                  </div>
                  </div>
                  </div>
                  </div>
                  
                  
                  
                @if($kategori->tipe == "joki")
                <div class="card rounded-xl ">
                    <div class="card border-0 mb-0 shadow-form">
                        <div class="pl-2 py-1">
                            <div class="card-header flex align-items-center">
                       <!-- <img alt="step-two" srcset="/assets/icons/step-two.svg 1x, /assets/icons/step-two.svg 2x" src="/assets/icons/step-two.svg" width="26" height="26" decoding="async" data-nimg="1"
                                    loading="lazy" style="color: transparent; margin-left:-15px;" /> -->
                                <h4 class="card-title mt-2 ms-2 flex items-center font-extrabold leading-6 md:text-xl" style="color: rgb(234 234 234);">Pilih Jumlah Order</h4>
                            </div>
                        </div>
                    </div>
                    <div class="px-1">
                        <div class="card-body">
                            <div id="tempatNominal" class="mb-4">
                                <div class="col-lg-6">
                                    <div class="form-group mb-3 text-black">
                                        <input class="form-floating block w-full rounded-md bg-gray-300 focus:!bg-white border-gray-300 text-sm shadow-sm sm:text-sm focus:outline-none focus:border-[#2D2EAD] focus:ring-2 focus:ring-[#2D2EAD] py-[0.5rem] px-[0.75rem]" placeholder="Minimal Order 5" type="number" name="jumlah_joki" id="jumlah_joki" value="1"  required min="1"/>
                                    </div>
                                </div>
                            </div>
                            <p class="mt-2 text-sm" style="font-size: 12px; color: rgb(203, 203, 203);">Minimal Order adalah 5, Jika Kurang Dari Minimal Order Maka Uang Akan Hangus</p>
                        </div>
                    </div>
                </div>
                @endif
                <!--pilih pembayaran-->

                <div class="card rounded-xl" id="bayar">

                    <div class="card border-0 mb-0 shadow-form">

                        <div class="">
                            <div class="flex">
                                <div class="flex items-center justify-center rounded-tl-xl bg-primary-x px-4 py-2 text-xl font-semibold">3</div>

                                <h4 class="card-title mt-2 ms-2 lex items-center  font-extrabold leading-6 md:text-xl"
                                    style="color: rgb(234 234 234);">
                                    Pilih Pembayaran</h4>

                            </div>

                        </div>

                    </div>
   
                    <div class="px-1">

                        <div class="card-body">

                            <div class="row ">

                                <div class="col">

                                    <div class="area-list-payment-method">
                                        @auth          
                                        
                                        <div class="child-box payment-drawwer shadow">

                                            <div class="header short-payment-support-info-head"
                                                onclick="openPaymentDrawer(this)">

                                                <div class="left">

                                                    <b><i class="fas fa-bolt"></i> Saldo Akun</b>

                                                </div>

                                                @foreach($pay_method->take(1) as $p)

                                                <div class="right glowing-text {{$p->code}} "></div>

                                                @endforeach
                                                <a class="open-button-action-payment">

                                                    <i class="fas fa-chevron-down" aria-hidden="true"></i>

                                                </a>

                                            </div>

                                            <div class="button-action-payment"
                                                style="display: none; background-color: rgb(50, 50, 62);">

                                                <div class="row p-1">

                                                    <div class="col-lg-4 p-1">

                                                        <div class="list-group1 h-100" id="method-SALDO">

                                                            <input type="radio" name="pembayaran" id="SALDO" value="SALDO">

                                                            <label for="SALDO" class="list-group-item h-100">

                                                                <div class="info-top">

                                                                    <div>

                                                                        <i class="fas fa-wallet"></i>

                                                                        {{ !$config ? '' : $config->web_title }} PAY

                                                                    </div>

                                                                    <h6 class="whitespace-nowrap text-xs font-semibold pb-1 SALDO"></h6>

                                                                </div>

                                                               <div class="info-bottom text-dark selected-order">

                                                                    <span class="text-dark" id="pembay">

                                                                        Saldo

                                                                        <div class="bangjeff-dicek">

                                                                            Dicek Otomatis

                                                                        </div>

                                                                    </span>
                                                                </div>

                                                            </label>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                         <div class="short-payment-support-info flex h-8 w-full items-center justify-end overflow-hidden border-t hover:cursor-pointer transition-all duration-300 transform gap-2"
                                                onclick="openPaymentDrawer(this)">
                                                <span class="fas fa-wallet text-muted" aria-hidden="true"></span>
                                                

                                            </div>

                                        </div>
                                        @endif
                         
                                        
                                        
                                        

                                        
                                     <div class="child-box payment-drawwer shadow">
                                            <div class="header short-payment-support-info-head"
                                                onclick="openPaymentDrawer(this)">
                                                <div class="left">
                                                    <b><i class="fas fa-wallet" aria-hidden="true"></i>
                                                    QRIS</b>
                                                </div>
                                                @foreach($pay_method->take(1) as $p)
                                                <div class="right glowing-text {{$p->code}} "></div>
                                                @endforeach
                                                <a class="open-button-action-payment">

                                                    <i class="fas fa-chevron-down" aria-hidden="true"></i>

                                                </a>
                                            </div>

                                            <div class="button-action-payment"
                                                style="display: none; background-color: rgb(50, 50, 62);">
                                                <div class="row row-cols-2 row-cols-md-3 p-1">
                                                    @foreach($pay_method as $p)
                                                    @if($p->tipe == 'qris')
                                                    <div class="col-lg-4 p-1">
                                                        <div class="list-group1 h-100" id="method-{{$p->code}}">
                                                            <input type="radio" name="pembayaran" id="{{$p->code}}"
                                                                value="{{$p->code}}">
                                                            <label for="{{$p->code}}" class="list-group-item h-100">
                                                                <div class="info-top">
                                                                    <div>
                                                                        <img src="{{$p->images}}" alt="" height="10px">
                                                                    </div>
                                                                   
                                                                </div>
                                                                <div class="info-bottom text-left text-inherit text-dark selected-order">
                                                                    <span class="text-dark py-2"> 
                                                                    <h6 class="text-dark " id="pembay" >{{$p->name}}</h6>
                                                                        <div class="italic">
                                                                            {{$p->keterangan}}
                                                                        </div>
                                                                    </span>
                                                                </div>

                                                            </label>

                                                        </div>

                                                    </div>



                                                    @endif

                                                    @endforeach

                                                </div>

                                            </div>

                                            <div class="short-payment-support-info flex h-8 w-full items-center justify-end overflow-hidden border-t hover:cursor-pointer transition-all duration-300 transform gap-2"
                                                onclick="openPaymentDrawer(this)">

                                                @foreach($pay_method as $p)

                                                @if($p->tipe == 'qris')

                                                 <img class="bg-white rounded-sm" src="{{$p->images}}" style=" border: 2px solid white;">

                                                @endif

                                                @endforeach

                                                

                                            </div>

                                        </div>
                                        
                                        <div class="child-box payment-drawwer">
                                            <div class="header short-payment-support-info-head"
                                                onclick="openPaymentDrawer(this)">
                                                <div class="left">
                                                    <b><i class="fas fa-wallet" aria-hidden="true"></i>E-Wallet</b>
                                                </div>
                                                <a class="open-button-action-payment">
                                                    <i class="fas fa-chevron-down" aria-hidden="true"></i>
                                                </a>
                                            </div>
                                            <div class="button-action-payment"style="display: none; background-color: rgb(50, 50, 62);">
                                                <div class="row row-cols-2 row-cols-md-3 p-1">
                                                    @foreach($pay_method as $p)
                                                    @if($p->tipe == 'e-walet')
                                                    <div class="col-lg-4 p-1">
                                                        <div class="list-group1 h-100" id="method-{{$p->code}}">
                                                            <input type="radio" name="pembayaran" id="{{$p->code}}" value="{{$p->code}}">
                                                            <label for="{{$p->code}}" class="list-group-item h-100">
                                                                <div class="info-top">
                                                                    <div>
                                                                        <img src="{{$p->images}}" alt="" height="10px">
                                                                    </div>
                                                                    
                                                                </div>
                                                                <div class="info-bottom text-left text-dark selected-order">
                                                                    <span class="text-dark py-2"> 
                                                                    <h6 class="whitespace-nowrap text-xs font-semibold pb-1 {{$p->code}}"></h6>
                                                                        <div class="bangjeff-dicek italic">
                                                                            {{$p->keterangan}}
                                                                        </div>
                                                                    </span>
                                                                </div>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                            <div class="short-payment-support-info h-8 w-full items-center  overflow-hidden flex flex-nowrap border-t hover:cursor-pointer transition-all duration-300 transform"
                                                onclick="openPaymentDrawer(this)">
                                                @foreach($pay_method as $p)
                                                @if($p->tipe == 'e-walet')
                                               <div class="payment-method" style="scroll-snap-align: start; display: flex; align-items: center;">
                                                        <img class="bg-white rounded-sm" src="{{$p->images}}" style=" border: 2px solid white;">
                                                    </div>
                                                @endif
                                                @endforeach
                                            </div>
                                        </div>
                                        
                                        <div class="child-box payment-drawwer">
                                            <div class="header short-payment-support-info-head"
                                                onclick="openPaymentDrawer(this)" data-cf-modified-02988ce5d5669a4190e81d4d-="">
                                                <div class="left">
                                                    <b><i class="fas fa-credit-card" aria-hidden="true"></i> Virtual Account</b>
                                                </div>

                                                @foreach($pay_method->take(1) as $p)

                                                <div class="right glowing-text {{$p->code}}"></div>

                                                @endforeach
                                                <a class="open-button-action-payment">

                                                    <i class="fas fa-chevron-down" aria-hidden="true"></i>

                                                </a>

                                            </div>

                                            <div class="button-action-payment"
                                                style="display: none; background-color: rgb(50, 50, 62);">

                                                <div class="row row-cols-2 row-cols-md-3 p-1">





                                                    @foreach($pay_method as $p)



                                                    @if($p->tipe == 'virtual-account')



                                                    <div class="col-lg-4 p-1">

                                                        <div class="list-group1 h-100" id="method-{{$p->code}}">

                                                            <input type="radio" name="pembayaran" id="{{$p->code}}"
                                                                value="{{$p->code}}">

                                                            <label for="{{$p->code}}" class="list-group-item h-100">

                                                                <div class="info-top">

                                                                    <div>

                                                                        <img src="{{$p->images}}" alt="" height="10px">

                                                                    </div>
                                                                </div>
                                                                <div class="info-bottom text-left text-dark selected-order">
                                                                    <span class="text-dark py-2"> 
                                                                    <h6 class="whitespace-nowrap text-xs font-semibold pb-1 {{$p->code}}"></h6>
                                                                        <div class="bangjeff-dicek italic">
                                                                            {{$p->keterangan}}
                                                                        </div>
                                                                    </span>
                                                                </div>

                                                            </label>

                                                        </div>

                                                    </div>

                                                    @endif

                                                    @endforeach

                                                </div>

                                            </div>
                                            <div class="short-payment-support-info h-8 w-full items-center  overflow-hidden flex flex-nowrap border-t hover:cursor-pointer transition-all duration-300 transform"
                                                onclick="openPaymentDrawer(this)"
                                                style="border-radius: 0 0 6px 6px; overflow-y: hidden; scroll-snap-type: x mandatory;">
                                                <div class="flex" style="scroll-snap-type: x mandatory;">
                                                    @foreach($pay_method as $p)
                                                    @if($p->tipe == 'virtual-account')
                                                    <div class="payment-method"
                                                        style="scroll-snap-align: start; display: flex; align-items: center;">
                                                         <img class="bg-white rounded-sm" src="{{$p->images}}" style=" border: 2px solid white;">
                                                    </div>
                                                    @endif
                                                    @endforeach
                                                   
                                                </div>
                                            </div>
                                        </div>
                                     <div class="child-box payment-drawwer shadow">

                                            <div class="header short-payment-support-info-head"
                                                onclick="openPaymentDrawer(this)"
                                                data-cf-modified-02988ce5d5669a4190e81d4d-="">

                                                <div class="left">

                                                    <b><i class="fas fa-store" aria-hidden="true"></i>Convenience Store

                                                    </b>

                                                </div>

                                                @foreach($pay_method->take(1) as $p)

                                                <div class="right glowing-text {{$p->code}}"></div>

                                                @endforeach
                                                <a class="open-button-action-payment">

                                                    <i class="fas fa-chevron-down" aria-hidden="true"></i>

                                                </a>

                                            </div>

                                            <div class="button-action-payment"
                                                style="display: none; background-color: rgb(50, 50, 62);">

                                                <div class="row row-cols-2 row-cols-md-3 p-1">

                                                    @foreach($pay_method as $p)

                                                    @if($p->tipe == 'convenience-store')

                                                    <div class="col-lg-4 p-1">

                                                        <div class="list-group1 h-100" id="method-{{$p->code}}">

                                                            <input type="radio" name="pembayaran" id="{{$p->code}}"
                                                                value="{{$p->code}}">

                                                            <label for="{{$p->code}}" class="list-group-item h-100">

                                                                <div class="info-top">

                                                                    <div>

                                                                        <img src="{{$p->images}}" alt="" height="10px">

                                                                    </div>

                                                                    

                                                                </div>

                                                               <div class="info-bottom text-left text-dark selected-order">
                                                                    <span class="text-dark py-2"> 
                                                                    <h6 class="whitespace-nowrap text-xs font-semibold pb-1 {{$p->code}}"></h6>
                                                                        <div class="bangjeff-dicek italic">
                                                                            {{$p->keterangan}}
                                                                        </div>
                                                                    </span>
                                                                </div>

                                                            </label>

                                                        </div>

                                                    </div>

                                                    @endif

                                                    @endforeach

                                                </div>

                                            </div>

                                            <div class="short-payment-support-info h-8 w-full items-center  overflow-hidden flex flex-nowrap border-t hover:cursor-pointer transition-all duration-300 transform"
                                                onclick="openPaymentDrawer(this)">

                                                @foreach($pay_method as $p)

                                                @if($p->tipe == 'convenience-store')

                                                <img class="bg-white rounded-sm" src="{{$p->images}}" style=" border: 2px solid white;">

                                                @endif

                                                @endforeach

                                                

                                            </div>

                                        </div>
                                        
                                        <div class="child-box payment-drawwer">

                                            <div class="header short-payment-support-info-head"
                                                onclick="openPaymentDrawer(this)">

                                                <div class="left">

                                                    <b><i class="fas fa-mobile" aria-hidden="true"></i>

                                                        Pulsa</b>

                                                </div>

                                                @foreach($pay_method->take(1) as $p)

                                                <div class="right glowing-text {{$p->code}}"></div>

                                                @endforeach
                                                <a class="open-button-action-payment">

                                                    <i class="fas fa-chevron-down" aria-hidden="true"></i>

                                                </a>

                                            </div>

                                            <div class="button-action-payment"
                                                style="display: none; background-color: rgb(50, 50, 62);">

                                                <div class="row row-cols-2 row-cols-md-3 p-1">



                                                    @foreach($pay_method as $p)





                                                    @if($p->tipe == 'pulsa')

                                                    <div class="col-lg-4 p-1">

                                                        <div class="list-group1 h-100" id="method-{{$p->code}}">

                                                            <input type="radio" name="pembayaran" id="{{$p->code}}"
                                                                value="{{$p->code}}">

                                                            <label for="{{$p->code}}" class="list-group-item h-100">

                                                                <div class="info-top">

                                                                    <div>

                                                                        <img src="{{$p->images}}" alt="" height="10px">

                                                                    </div>

                                                                   

                                                                </div>

                                                               <div class="info-bottom text-left text-dark selected-order">
                                                                    <span class="text-dark py-2"> 
                                                                    <h6 class="whitespace-nowrap text-xs font-semibold pb-1 {{$p->code}}"></h6>
                                                                        <div class="bangjeff-dicek italic">
                                                                            {{$p->keterangan}}
                                                                        </div>
                                                                    </span>
                                                                </div>

                                                            </label>

                                                        </div>

                                                    </div>



                                                    @endif

                                                    @endforeach

                                                </div>

                                            </div>

                                            <div class="short-payment-support-info flex h-8 w-full items-center justify-start overflow-hidden  border-t hover:cursor-pointer transition-all duration-300 transform gap-x-2"
                                                onclick="openPaymentDrawer(this)">

                                                @foreach($pay_method as $p)

                                                @if($p->tipe == 'pulsa')

                                                <img class="bg-white rounded-sm" src="{{$p->images}}" style=" border: 2px solid white;">

                                                @endif

                                                @endforeach

                                                

                                            </div>

                                        </div>

                                    </div> 

                                </div> 

                            </div> 

                        </div>

                    </div>

                </div>



              <div class="card rounded-xl">

                    <div class="card border-0 mb-0 shadow-form">

                        <div class="">
                            <div class="flex">
                                <div class="flex items-center justify-center rounded-tl-xl bg-primary-x px-4 py-2 text-xl font-semibold">4</div>

                                <h4 class="card-title mt-2 ms-2 lex items-center  font-extrabold leading-6 md:text-xl"
                                    style="color: rgb(234 234 234);">

                                    Kode promo</h4>

                            </div>

                        </div>

                    </div>

                    <div class="px-2">

                        <div class="card-body">

                            <div class="form-group mb-2">

                                <div class="relative rounded-md shadow-sm">

                                    <div class="relative w-full flex items-center space-x-2 rounded-full">

                                      

                                        <input type="text"
                                            class="bg-input block w-full rounded-md text-foreground placeholder-muted-foreground text-xs shadow-sm focus:border-primary-x focus:outline-none focus:ring-1 focus:ring-primary-x py-[0.5rem] px-[0.75rem]"
                                            id="voucher" autocomplete="off" name="voucher" placeholder="Kode Voucher">

                                        <button type="button" id="check"
                                            class="absolute flex items-center justify-center truncate relative top-0 -right-[3px] rounded-lg bg-primary-x hover:bg-primary-x/75 p-2 py-2 px-4 text-xs font-medium focus:ring-2 focus:ring-primary-x"
                                            >

                                            Pakai Voucher

                                        </button>

                                    </div>
                                    
                                    <div class="pt-2 text-xs">
                            <button type="button" class="relative flex w-full items-center space-x-2 rounded-md border border-murky-500 bg-murky-600 py-2 pr-4 pl-3">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve" class="storke-2 h-5 w-5 text-primary-500">
                                    <defs></defs>
                                    <g transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;">
                                        <path d="M 38.666 57.455 c -2.708 0 -5.301 -1.55 -6.496 -4.171 c -1.631 -3.576 -0.049 -7.813 3.527 -9.445 c 1.733 -0.791 3.67 -0.86 5.454 -0.192 c 1.784 0.666 3.202 1.988 3.992 3.72 c 0.79 1.732 0.858 3.669 0.192 5.453 s -1.988 3.202 -3.72 3.992 C 40.658 57.248 39.654 57.454 38.666 57.455 z M 38.653 47.194 c -0.442 0 -0.883 0.095 -1.297 0.284 c -1.57 0.716 -2.264 2.576 -1.548 4.146 c 0.347 0.761 0.969 1.341 1.752 1.633 c 0.783 0.291 1.633 0.262 2.393 -0.084 c 0.761 -0.348 1.341 -0.97 1.633 -1.753 c 0.292 -0.783 0.263 -1.633 -0.084 -2.393 c 0 0 0 0 0 0 c -0.347 -0.761 -0.969 -1.341 -1.752 -1.634 C 39.393 47.261 39.023 47.194 38.653 47.194 z" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentcolor; fill-rule: nonzero; opacity: 1;"></path>
                                        <path d="M 46.257 72.49 c -0.204 0 -0.412 -0.032 -0.617 -0.099 c -1.051 -0.341 -1.626 -1.469 -1.286 -2.519 L 55.49 35.524 c 0.341 -1.05 1.467 -1.626 2.519 -1.286 c 1.051 0.34 1.626 1.468 1.285 2.519 L 48.159 71.106 C 47.885 71.952 47.1 72.49 46.257 72.49 z" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentcolor; fill-rule: nonzero; opacity: 1;"></path>
                                        <path d="M 64.324 63.742 c -2.709 0 -5.302 -1.55 -6.496 -4.17 c -0.791 -1.732 -0.859 -3.669 -0.193 -5.453 c 0.667 -1.784 1.988 -3.202 3.72 -3.992 c 3.575 -1.634 7.813 -0.051 9.444 3.527 l 0 0 c 1.632 3.577 0.049 7.813 -3.527 9.444 C 66.316 63.536 65.313 63.742 64.324 63.742 z M 64.312 53.484 c -0.442 0 -0.883 0.095 -1.297 0.283 c -0.761 0.348 -1.341 0.97 -1.633 1.753 c -0.293 0.783 -0.263 1.633 0.084 2.393 c 0.716 1.57 2.575 2.266 4.146 1.549 c 1.57 -0.717 2.264 -2.576 1.549 -4.146 c -0.348 -0.761 -0.97 -1.341 -1.753 -1.633 C 65.052 53.55 64.681 53.484 64.312 53.484 z" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentcolor; fill-rule: nonzero; opacity: 1;"></path>
                                        <path d="M 43.584 89.999 c -1.125 0 -2.252 -0.201 -3.338 -0.606 c -2.384 -0.891 -4.278 -2.656 -5.334 -4.971 L 14.466 39.6 c -1.759 -3.858 -1.873 -8.331 -0.313 -12.273 l 8.432 -21.3 c 1.891 -4.777 7.171 -7.185 12.016 -5.481 l 21.612 7.595 c 4 1.405 7.302 4.424 9.063 8.282 l 20.445 44.821 c 1.057 2.315 1.147 4.904 0.258 7.287 c -0.891 2.384 -2.656 4.278 -4.971 5.334 l -33.474 15.27 C 46.272 89.71 44.93 89.999 43.584 89.999 z M 31.429 4.001 c -2.205 0 -4.268 1.327 -5.126 3.497 l -8.432 21.3 c -1.162 2.936 -1.077 6.268 0.234 9.141 l 20.446 44.822 c 0.612 1.344 1.711 2.367 3.094 2.884 c 1.382 0.517 2.883 0.465 4.227 -0.148 l 33.474 -15.27 l 0 0 c 1.344 -0.613 2.367 -1.712 2.884 -3.094 c 0.517 -1.383 0.464 -2.884 -0.148 -4.228 L 61.637 18.083 c -1.311 -2.874 -3.772 -5.122 -6.75 -6.169 L 33.275 4.318 C 32.664 4.104 32.041 4.001 31.429 4.001 z" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentcolor; fill-rule: nonzero; opacity: 1;"></path>
                                        <circle cx="33.546" cy="14.146" r="3.636" transform="  matrix(1 0 0 1 0 0) " style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentcolor; fill-rule: nonzero; opacity: 1;"></circle>
                                        <path d="M 29.18 87.247 H 12.941 c -5.251 0 -9.524 -4.273 -9.524 -9.525 V 28.475 c 0 -4.238 1.752 -8.355 4.807 -11.294 l 6.496 -6.247 c 0.796 -0.767 2.063 -0.74 2.827 0.055 c 0.766 0.796 0.741 2.062 -0.055 2.827 l -6.495 6.247 c -2.275 2.189 -3.58 5.254 -3.58 8.411 v 49.248 c 0 3.047 2.478 5.525 5.524 5.525 H 29.18 c 1.104 0 2 0.895 2 2 C 31.179 86.352 30.284 87.247 29.18 87.247 z" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" tyle="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: currentcolor; fill-rule: nonzero; opacity: 1;"></path>
                                    </g>
                                </svg>
                                <span>
                                    <marquee width="100%" direction="left" style="flex-grow: 1;">
                                    <span class="mb-0 font-weight-normal"><strong>Ikuti Instagram dan sosial media kami lainnya, dan dapatkan penawaran kode promo terbaik.</strong>
                                </span> |
                                    <span class="mb-0 font-weight-normal"><strong>Tempat topup terpercaya di Indonesia~</strong>
                                </span>
                                    </marquee>
                                <span class="absolute right-2">
                                   
                                </span>
                            </span></button>
                        </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>



                <div class="card rounded-xl">

                    <div class="card border-0 mb-0 shadow-form">

                        <div class="">
                            <div class="flex">
                                <div class="flex items-center justify-center rounded-tl-xl bg-primary-x px-4 py-2 text-xl font-semibold">5</div>

                                <h4 class="card-title mt-2 ms-2 lex items-center  font-extrabold leading-6 md:text-xl"
                                    style="color: rgb(234 234 234);">

                                    Nomor WhatsApp</h4>

                            </div>

                        </div>

                    </div>

                    <div class="px-2">

                        <div class="card-body">

                            <div class="form-group mb-2">

              
               
                                <input class="bg-input block w-full rounded-md text-foreground placeholder-muted-foreground text-xs shadow-sm focus:border-primary-x focus:outline-none focus:ring-1 focus:ring-primary-x py-[0.5rem] px-[0.75rem]" placeholder="628xxxxx"
                                    type="number" name="nomor" id="nomor" required>
                </div>
                
                
                            

                            <p class="text-xs">Bukti pembelianmu akan kami

                                kirimkan ke WhatsApp.</p>



                           <div class="mt-0 mr-3">
                              

                                <div class="g-recaptcha " id="g-recaptcha" name="grecaptcha"
                                    data-sitekey="{{ !$config ? '' : $config->captcha_sitekey }}"></div>

                              

                            </div>

                            <div class="row mt-0">

                                <div class="col-lg-12 clearfix">

                                    <input type="hidden" id="apikey" name="apikey" value="">

                                    <input type="hidden" name="product_name" id="product_name" value="Mobile Legends">

                                    <input type="hidden" name="product_id" id="product_id" value="1">
                                    <input type="hidden" name="ktg_tipe" id="ktg_tipe" value="{{$kategori->tipe}}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <style>
                    @media (max-width: 764px) {
                        .melll {
                            display: none;
                        }
                    }

                    @media (min-width: 764px) {
                        .melll {
                            display: block;

                        }
                    }
                </style>

               <button
                        class="melll mt-4 items-center justify-center rounded-md bg-primary-x hover:bg-primary-x/75 px-4 py-2 text-sm font-medium text-white duration-300  disabled:cursor-not-allowed disabled:opacity-75 relative flex w-full gap-2 overflow-hidden"
                        id="order" type="button" onclick="startLoadingg()">
                    <div class="containerrrr">
                        <div class="flex justify-content-center">
                                
                            <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                            <p id="orderText" class="ms-2">Pesan Sekarang!</p>
                        </div>
                        <div id="spinner" class="spinner">
                            <i class="fa fa-spinner fa-spin"></i>
                            
                                
                        </div>
                    </div>
                </button>
                
                 
                <style>
                .containerrrr {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                
                .spinner {
                    display: none;
                }
                
                </style>
                <div class="sticky inset-x-0 bottom-0 z-10 -mx-4 !mt-0 w-screen d-md-none">
                    <div class="container space-y-0 py-3">
                        <div class="flex items-start justify-start space-x-4 py-2 md:hidden">
                            <div class="flex w-full flex-col space-y-1">
                                <div class="rounded-md border-l-4 border-yellow-400 bg-yellow-100 p-4">
                                    <div class="flex">
                                        <div class="flex-shrink-0">
                                            <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-5 w-5 text-yellow-500">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z">
                                                </path>
                                            </svg>
                                        </div>
                                        <div class="ml-3">
                                            <p class="text-sm text-yellow-700">Belum ada item produk yang dipilih.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    
                       <div class="flex rounded-lg border-1 border-dashed bg-gray-600 p-3 pt-2 pb-2 text-sm items-start justify-start space-x-4 py-1 md:hidden">
                            <div class="aspect-square h-20">
                                <img alt="icon" sizes="100vw" srcset="{{ $kategori->thumbnail }}"
                                    src="{{ $kategori->thumbnail }}" width="300" height="300" decoding="async"
                                    data-nimg="1" class="aspect-square h-20 rounded-lg object-cover" loading="lazy"
                                    style="color: transparent" />
                            </div>
                            <div class="flex w-full flex-col space-y-1">
                                <div class="text-xs font-semibold cana select glowing-text"></div>
                                <div class="text-xs font-semibold selected-order"></div>
                                <p class="text-xs font-semibold text-warning selected-order"></p>
                                <div class="flex w-full items-center">
                                    <p class="text-xs italic text-inherit select"></p>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="relative">
                            <button
                                
                                class="mt-4 inline-flex items-center justify-center rounded-md  px-4 py-2 text-sm font-medium text-white duration-300 bg-primary-x hover:bg-primary-x/75 disabled:cursor-not-allowed disabled:opacity-75 relative flex w-full gap-2 overflow-hidden"
                                id="orderr" onclick="startLoading()" type="button">
                                
                                <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                                Pesan Sekarang!
                                <div id="spinnerr" class="spinner"></div>
                                
                                
                            </button>
                        </div>
                    </div>
                </div>
                <!--testimoni bawah -->
                <div class="mt-4 block rounded-xl bg-card md:hidden d-md-none">
                    <div class="flex">
                        <div
                            class="flex items-center justify-center rounded-tl-xl bg-primary-x px-4 py-2 text-xl font-semibold">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                aria-hidden="true" class="h-4 w-4">
                                <path fill-rule="evenodd"
                                    d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <h3
                            class="flex w-full items-center justify-between rounded-tr-xl tihh-testi px-2 py-2 text-base font-semibold leading-6 text-white sm:px-4">
                            Testimonials</h3>
                    </div>   
                    
                   <div class="p-4">
                            <div class="mb-6 flex flex-col items-center justify-center">
                                <div class="flex items-center gap-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-10 w-10 flex-shrink-0 text-yellow-400">
                                        <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"></path>
                                    </svg>
                                    <div>
                                        <span class="text-5xl font-semibold text-card-foreground">{{ $averageRating ?? 'N/A' }}</span>
                                        <sub class="text-lg font-semibold text-card-foreground">/ 5.0</sub>
                                    </div>
                                </div>
                                <p class="pt-2 text-center text-sm text-card-foreground">
                                    Pelanggan merasa puas dengan produk ini. <br>
                                    Dari <span class="font-semibold">{{ number_format($totalRatings) }}</span> ulasan.
                                </p>
                            </div>
                            <div>
                                <h3 class="sr-only">Review data</h3>
                                <dl class="space-y-3 text-card-foreground">
                                    @for($i = 5; $i >= 1; $i--)
                                        @php
                                            $count = $ratingsCount[$i] ?? 0;
                                            $percentage = $totalRatings > 0 ? ($count / $totalRatings) * 100 : 0;
                                        @endphp
                                        <div class="flex items-center text-sm">
                                            <dt class="flex flex-1 items-center pl-1">
                                                <p class="text-text-color w-3 font-medium">{{ $i }}<span class="sr-only"> star reviews</span></p>
                                                <div aria-hidden="true" class="ml-1 flex flex-1 items-center">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="text-yellow-400 h-5 w-5 flex-shrink-0">
                                                        <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"></path>
                                                    </svg>
                                                    <div class="relative ml-3 flex-1">
                                                        <div class="h-3 rounded-[4px] border border-gray-200 bg-gray-100"></div>
                                                        <div class="absolute inset-y-0 rounded-[4px] border border-yellow-400 bg-yellow-400" style="width: {{ $percentage }}%;"></div>
                                                    </div>
                                                </div>
                                            </dt>
                                            <dd class="text-text-color ml-3 w-10 text-right text-sm tabular-nums">{{ number_format($count) }}<span class="sr-only"> reviews</span></dd>
                                        </div>
                                    @endfor
                                </dl>
                            </div>
                            <div class="mt-6">
                                <p class="text-sm/6 text-card-foreground">Apakah kamu menyukai produk ini? Beri tahu kami dan calon pembeli lainnya tentang pengalamanmu.</p>
                            </div>
                        </div>
                    
                    
                    @if(count($ratings) == 0)  
                    
                    <div class="col-lg-auto mt-3">
                        <div class="list-group shadow h-100">
                            <div class="alert alert-danger text-center alert-dismissible fade show" role="alert">
                            Produk Belum ada penilaian.</div>
                        </div>
                    </div>
                    @else  
                  
                  
                    
                    @foreach ($ratings as $rating) 
                    
                    
                    <div class="flow-root p-6">
                        <div class="-my-6 divide-y divide-muted">
                            <div class="py-3">
                                <div class="flex items-center">
                                    <div class="w-full">
                                        <div class="flex items-start justify-between">
                                            <div>
                                                <h4 class="mt-0.5 text-xs font-bold text-white">08{{substr($rating->no_pembeli,0,-13).'********'.substr($rating->no_pembeli, -3)}}</h4>
                                            </div>
                                            <div class="flex items-center">
                                                @for($i=1; $i<=5; $i++) @if($i <=$rating->bintang)
                                                    <i class="fa fa-star rating-color"></i>
                                                    @else
                                                    <i class="fa fa-star"></i>
                                                    @endif
                                                    @endfor
                                            </div>
                                        </div>
                                        <p class="sr-only">5 out of 5 stars</p>
                                    </div>
                                </div>
                                <div class="flex w-full justify-between pt-1 text-xxs">
                                    <span>“{{ $rating->comment }}”</span><span>{{$rating->created_at->format('Y-m-d H:i:s')}}</span>
                                </div>
                                <div class="text-murky-20 mt-1 space-y-6 text-xs italic card-header mt-2"></div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @endif
                    <div class="px-4 pb-4 sm:px-6 sm:pb-6">
                        <a class="inline-flex items-center bg-primary-x hover:bg-primary-x/75 rounded-lg p-1 px-4 gap-x-2 text-sm hover:text-white" href="{{ route('ratingcust') }}"
                            style="outline: none;">
                            <span>Lihat semua ulasan</span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                aria-hidden="true" class="h-4 w-4">
                                <path fill-rule="evenodd"
                                    d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </ul>
        </div>
</div>
</main>



<div class="container">

    <div class="modal fade" id="petunjukModal" tabindex="-1" aria-labelledby="petunjukModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content " style="background: none; border: none;">

                <div class="modal-body" style="background: none; border: none;">

                    <img src="{{ $kategori->petunjuk }}" alt="" class="img-fluid">

                </div>

                <div class="modal-footer" style="background: none; border: none;">

                    <button type="button" class="btn mx-auto w-25 text-white " data-bs-dismiss="modal"
                        style="background: none; border: none;">X</button>

                </div>

            </div>

        </div>

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

</div>

</div>

</div>

</div>

</div>

</div>





@endsection



@section('js')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>



<script>
    document.addEventListener("DOMContentLoaded", function () {
        const toggleGuest = document.getElementById("code-promo");
        const modal = document.getElementById("modalPromo");
        const closeModalButton = document.getElementById("closeModalPromo");

        toggleGuest.addEventListener("click", function () {
            modal.classList.remove("hidden");
        });

        closeModalButton.addEventListener("click", function () {
            modal.classList.add("hidden");
        });
    
    });
    
    function applyPromoCode(promoCode) {
    document.getElementById('voucher').value = promoCode;

    const modalPromoCode = document.getElementById("modalPromo");
    modalPromoCode.classList.add("hidden");

    // Menghapus atribut disabled dari tombol "Apply"
    $('#checkVoucher').removeAttr('disabled');
    
    var checkInputVoucher = (e) => {
        const content = $("#voucher").val().trim();
        $('#checkVoucher').prop('disabled', content === '');
    };
    
    $(document).off('keyup', '#voucher', checkInputVoucher); // Hapus event handler sebelumnya (opsional)
    $(document).on('keyup', '#voucher', checkInputVoucher);
}

</script>
<script>
    function showInitialElement() {
        var initialElement = document.querySelector('.flex.items-start.justify-start.space-x-4.py-2.md\\:hidden');
        var selectedElement = document.querySelector('.flex.items-start.justify-start.space-x-4.py-1.md\\:hidden');
        initialElement.style.display = 'flex';
        selectedElement.style.display = 'none';
    }

    function showSelectedElement() {
        var initialElement = document.querySelector('.flex.items-start.justify-start.space-x-4.py-2.md\\:hidden');
        var selectedElement = document.querySelector('.flex.items-start.justify-start.space-x-4.py-1.md\\:hidden');
        initialElement.style.display = 'none';
        selectedElement.style.display = 'flex';
    }

    function updateSelectedElement(name, price) {
        var selectedOrderElement = document.querySelector('.text-xs.font-semibold.selected-order');
        var energyYellowElement = document.querySelector('.text-xs.font-semibold.text-warning.selected-order');
        var viaElement = document.querySelector('.flex.w-full.items-center p.text-xs.italic');

        selectedOrderElement.textContent = name;
        energyYellowElement.textContent = price;
    }

    var listGroupItems = document.querySelectorAll('.list-group-item.h-100');

    listGroupItems.forEach(function (item) {
        item.addEventListener('click', function () {
            var name = this.querySelector('.hayutopup-prod').textContent;
            var price = this.querySelector('.sale-price') ? this.querySelector('.sale-price')
                .textContent : this.querySelector('.text-white.meltih').textContent;
            updateSelectedElement(name, price);
            showSelectedElement();
        });
    });

    showInitialElement();
</script>



<script>
    var listGroupItems = document.querySelectorAll('.list-group1');
    listGroupItems.forEach(function (item) {
        item.addEventListener('click', function () {
            var name = this.querySelector('.text-dark.meltihhh').textContent.trim();
            var selectElement = document.querySelector('.text-xs.italic.select');
            selectElement.textContent = name;
        });
    });
</script>
<script>
    var listGroupItems = document.querySelectorAll('#tempatNominal');
    listGroupItems.forEach(function (item) {
        item.addEventListener('click', function () {
            var name = this.querySelector('.font-semibold.ms-1').textContent.trim();
            var selectElement = document.querySelector('.text-xs.font-semibold.cana.select.glowing-text');
            selectElement.textContent = name;
        });
    });
</script>







<script>
    function startLoading() {
  var button = document.getElementById("orderr");
  var spinner = document.getElementById("spinnerr");

  button.classList.add("button-loading");
  spinner.style.display = "inline-block";

  setTimeout(function () {
    button.classList.remove("button-loading");
    spinner.style.display = "none";
  }, 4000);
}

    function startLoadingg() {
  var button = document.getElementById("order");
  var spinner = document.getElementById("spinner");

  button.classList.add("button-loading");
  spinner.style.display = "inline-block";

  setTimeout(function () {
    button.classList.remove("button-loading");
    spinner.style.display = "none";
  }, 4000);
}

</script>



<script>
    function openPaymentDrawer(elem) {

        var $this = $(elem);

        if ($('input[type="radio"][name="nominal"]:checked').val() == null) {

            toastr.warning("Silahkan pilih Nominal terlebih dahulu");

            $('html,body').animate({
                scrollTop: $('#tempatNominal').offset().top - 300
            }, 400);

            return;

        }



        $('.payment-drawwer').not(this).each(function () {

            var $parents = $(this);

            $parents.find('.button-action-payment').slideUp(function () {

                $parents.removeClass('active');

            });



            $parents.find('.short-payment-support-info').find('img').slideDown();

            $parents.find('.short-payment-support-info').find('i').removeClass('fa-chevron-up').addClass(

                'fa-chevron-down');

        });



        var $parents = $this.parents('.child-box');



        if (!$parents.find('.button-action-payment').is(":hidden")) {

            $parents.find('.button-action-payment').slideUp(function () {

                $parents.removeClass('active');

            });



            $parents.find('.short-payment-support-info').find('img').slideDown();

            $parents.find('.short-payment-support-info-head').find('.fa-chevron-up').removeClass('fa-chevron-up').addClass(

                'fa-chevron-down');



        } else {

            $parents.find('.button-action-payment').slideDown(function () {

                $parents.addClass('active');

            });

            $parents.find('.short-payment-support-info').find('img').slideUp();

            $parents.find('.short-payment-support-info-head').find('.fa-chevron-down').addClass('fa-chevron-up').removeClass(

                'fa-chevron-down');



            $('html, body').animate({

                scrollTop: $('#openPaymentDrawer').offset().top - 500

            }, 400);



        }

    }
</script>

<script type="text/javascript">
    function changeHarga(harga) {
        $(".QRIS").html(harga);
        $(".QRISC").html(harga);
        $(".QRIS_CUSTOM").html(harga);
        $(".GOPAY").html(harga);
        $(".PERMATAVA").html(harga);
        $(".CIMBVA").html(harga);
        $(".CIMBVA").html(harga);
        $(".BSI").html(harga);
        $(".BNCVA").html(harga);
        $(".BSIVA").html(harga);
        $(".BNIVA").html(harga);
        $(".BRIVA").html(harga);
        $(".MANDIRIVA").html(harga);
        $(".BCAVA").html(harga);
        $(".ALFAMART").html(harga);
        $(".INDOMARET").html(harga);
        $(".ALFAMIDI").html(harga);
        $(".MANDIRIVA").html(harga);
        $(".OVOS").html(harga);
        $(".QRIS2").html(harga);
        $(".MYBVA").html(harga);
        $(".SMSVA").html(harga);
        $(".MUAMALATVA").html(harga);
        $(".OVO").html(harga);
        $(".SHOPEEPAY").html(harga);
        $(".BSS").html(harga);
        $(".LINKAJA").html(harga);
        $(".DANA").html(harga);
        $(".SALDO").html(harga);
        $(".QRISREALTIME").html(harga);
        $(".BCATF").html(harga);
        $(".MANDIRITF").html(harga);
        $(".ASTRAPAY").html(harga);
        $(".OVOPUSH").html(harga);
        $(".VIRGO").html(harga);
        $(".TELKOMSEL").html(harga);
        $(".AXIS").html(harga);
        $(".XL").html(harga);
        $(".TRI").html(harga);
    }
    $(document).ready(function () {
        $("input[type=radio][name=nominal]").change(function () {
            var nominal = $("input[name='nominal']:checked").val();
            var jumlah_joki = $("#jumlah_joki").val();
            var ktg_tipe = $("#ktg_tipe").val();
            if (nominal) {
                $.ajax({
                    url: "