@extends('layoutsutama.master2')
@section('content')
        <!-- dari sini -->
        <section class="relative pb-36 pt-44">
            <div class="container 2xl:max-w-[87.5rem] px-4 mx-auto">
                <div class="">
                    <div class="col-span-12 lg:col-span-7 2xl:col-span-1">
                        <h3 class="mb-8 !leading-relaxed md:text-2xl">East Java Running Festival Chapter Kediri </span></h3>
                        <p class="mb-5 text-lg text-slate-500 dark:text-zink-200">Kota Kediri, akan menjadi tuan rumah bagi pelaksanaan East Java Running Festival 2025.</p>
                        @if($buka)
                            @if ($showButton)
                            <div class="">
                                <h3 class="mb-8 !leading-relaxed md:text-2xl text-center">PRE SALE </span></h3>
                                <div class="grid grid-cols-1 mt-16 gap-x-5 md:grid-cols-2 xl:grid-cols-3">
                                    <div class="!shadow-lg text-15 card">
                                        <div class="card-body">
                                    
                                            <h5 class="mb-2 text-center"> <span class="align-middle">5K</span></h5>
                                            <p class="mb-4 text-slate-500 dark:text-zink-200"></p>

                                            <ul class="flex flex-col gap-2 mt-5">
                                                <div class="!shadow-lg text-15 card">
                                                    <div class="card-body">    
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100 dark:fill-green-500/20"></i>
                                                            <span><b>175K</b> (Kediri, Madiun)</span>
                                                        </li>
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100"></i>
                                                            <span><b>225K</b> (Surabaya)</span>
                                                        </li>
                                                    </div>
                                                </div>                                   
                                            </ul>

                                            <a href="{{ URL::To('registrasiPresale/'.$tik.'/'.$kode2.'/'.$kota) }}" type="button" class="w-full bg-white border-dashed text-custom-500 btn border-custom-500 hover:text-custom-500 hover:bg-custom-50 hover:border-custom-600 focus:text-custom-600 focus:bg-custom-50 focus:border-custom-600 active:text-custom-600 active:bg-custom-50 active:border-custom-600 dark:bg-zink-700 dark:ring-custom-400/20 dark:hover:bg-custom-800/20 dark:focus:bg-custom-800/20 dark:active:bg-custom-800/20">
                                                <span class="align-middle">REGISTER RACE</span>
                                            </a>
                                        </div>
                                    </div><!--end card-->
                                    <div class="!shadow-lg text-15 card">
                                        <div class="card-body">
                                            <h5 class="mb-2 text-center"> <span class="align-middle">10K</span></h5>
                                            <p class="mb-4 text-slate-500 dark:text-zink-200"></p>

                                            <ul class="flex flex-col gap-2 mt-5">
                                            
                                                <div class="!shadow-lg text-15 card">
                                                    <div class="card-body"> 
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100 dark:fill-green-500/20"></i>
                                                            <span><b>225K</b> (Kediri, Madiun)</span>
                                                        </li>
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100"></i>
                                                            <span><b>275K</b> (Surabaya)</span>
                                                        </li>
                                                    
                                                    </div>
                                                </div>    
                                                                    
                                            </ul>

                                            <a href="{{ URL::To('registrasiPresale/'.$tik.'/'.$kode3.'/'.$kota) }}" type="button" class="w-full bg-white border-dashed text-custom-500 btn border-custom-500 hover:text-custom-500 hover:bg-custom-50 hover:border-custom-600 focus:text-custom-600 focus:bg-custom-50 focus:border-custom-600 active:text-custom-600 active:bg-custom-50 active:border-custom-600 dark:bg-zink-700 dark:ring-custom-400/20 dark:hover:bg-custom-800/20 dark:focus:bg-custom-800/20 dark:active:bg-custom-800/20">
                                                <span class="align-middle">REGISTER RACE</span>
                                            </a>
                                        </div>
                                    </div><!--end card-->
                                    <div class="!shadow-lg text-15 card">
                                        <div class="card-body">
                                            <h5 class="mb-2 text-center"> <span class="align-middle">FUN WALK</span></h5>
                                        
                                            <p class="mb-4 text-slate-500 dark:text-zink-200"></p>
                                            <div class="my-4 h-px w-full bg-slate-200 dark:bg-navy-500"></div>

                                            <ul class="flex flex-col gap-2 mt-5">
                                            
                                                <div class="!shadow-lg text-15 card">
                                                    <div class="card-body"> 
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100 dark:fill-green-500/20"></i>
                                                            <span><b>75K</b> (Kediri, Madiun)</span>
                                                        </li>
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100"></i>
                                                            <span><b>85K</b> (Surabaya)</span>
                                                        </li>
                                                    
                                                    </div>
                                                </div>    
                                                                    
                                            </ul>

                                            <a href="{{ URL::To('registrasiPresale/'.$tik.'/'.$kode.'/'.$kota) }}" type="button" class="w-full bg-white border-dashed text-custom-500 btn border-custom-500 hover:text-custom-500 hover:bg-custom-50 hover:border-custom-600 focus:text-custom-600 focus:bg-custom-50 focus:border-custom-600 active:text-custom-600 active:bg-custom-50 active:border-custom-600 dark:bg-zink-700 dark:ring-custom-400/20 dark:hover:bg-custom-800/20 dark:focus:bg-custom-800/20 dark:active:bg-custom-800/20">
                                                <span class="align-middle">REGISTER RACE</span>
                                            </a>
                                        </div>
                                    </div>
                                    <!--end card-->
                                    
                                </div>
                            </div><br>
                            @endif
                            @if($showButton2)
                            <div class="">
                                <h3 class="mb-8 !leading-relaxed md:text-2xl text-center">REGULER </span></h3>
                                <div class="grid grid-cols-1 mt-16 gap-x-5 md:grid-cols-2 xl:grid-cols-3">
                                    <div class="!shadow-lg text-15 card">
                                        <div class="card-body">
                                    
                                            <!-- <h5 class="mb-2 text-center"> <span class="align-middle">5K</span></h5>
                                            <p class="mb-4 text-slate-500 dark:text-zink-200"></p> -->

                                            <ul class="flex flex-col gap-2 mt-5">
                                                <div class="!shadow-lg text-15 card">
                                                        <div class="relative">
                                                            <img class="transition-transform duration-500 ease-in-out group-hover/card:scale-105 rounded-t-md" src="{{URL::to('assets/images/category/WEB5K.webp')}}" alt="Image">
                                                        </div>
                                                    <div class="card-body">    
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100 dark:fill-green-500/20"></i>
                                                            <span><b>225K</b> (Banyuwangi, Kediri, Madiun)</span>
                                                        </li>
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100"></i>
                                                            <span><b>250K</b> (Surabaya)</span>
                                                        </li>
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100"></i>
                                                            <span><b>Pelajar harga khusus</b></span>
                                                        </li>
                                                    </div>
                                                </div>                                   
                                            </ul>

                                            <a href="{{ URL::To('registrasiPresale/'.$reg.'/'.$kode2.'/'.$kota) }}" type="button" class="w-full bg-white border-dashed text-custom-500 btn border-custom-500 hover:text-custom-500 hover:bg-custom-50 hover:border-custom-600 focus:text-custom-600 focus:bg-custom-50 focus:border-custom-600 active:text-custom-600 active:bg-custom-50 active:border-custom-600 dark:bg-zink-700 dark:ring-custom-400/20 dark:hover:bg-custom-800/20 dark:focus:bg-custom-800/20 dark:active:bg-custom-800/20">
                                                <span class="align-middle">REGISTER RACE</span>
                                            </a>
                                        </div>
                                    </div><!--end card-->
                                    <div class="!shadow-lg text-15 card">
                                        <div class="card-body">
                                            <!-- <h5 class="mb-2 text-center"> <span class="align-middle">10K</span></h5>
                                            <p class="mb-4 text-slate-500 dark:text-zink-200"></p> -->

                                            <ul class="flex flex-col gap-2 mt-5">
                                            
                                                <div class="!shadow-lg text-15 card">
                                                        <div class="relative">
                                                            <img class="transition-transform duration-500 ease-in-out group-hover/card:scale-105 rounded-t-md" src="{{URL::to('assets/images/category/WEB10K.webp')}}" alt="Image">
                                                        </div>
                                                    <div class="card-body"> 
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100 dark:fill-green-500/20"></i>
                                                            <span><b>275K</b> (Banyuwangi, Kediri, Madiun)</span>
                                                        </li>
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100"></i>
                                                            <span><b>300K</b> (Surabaya)</span>
                                                        </li>
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100"></i>
                                                            <span><b>Pelajar harga khusus</b></span>
                                                        </li>
                                                    
                                                    </div>
                                                </div>    
                                                                    
                                            </ul>

                                            <a href="{{ URL::To('registrasiPresale/'.$reg.'/'.$kode3.'/'.$kota) }}" type="button" class="w-full bg-white border-dashed text-custom-500 btn border-custom-500 hover:text-custom-500 hover:bg-custom-50 hover:border-custom-600 focus:text-custom-600 focus:bg-custom-50 focus:border-custom-600 active:text-custom-600 active:bg-custom-50 active:border-custom-600 dark:bg-zink-700 dark:ring-custom-400/20 dark:hover:bg-custom-800/20 dark:focus:bg-custom-800/20 dark:active:bg-custom-800/20">
                                                <span class="align-middle">REGISTER RACE</span>
                                            </a>
                                        </div>
                                    </div><!--end card-->
                                    <div class="!shadow-lg text-15 card">
                                        <div class="card-body">
                                            <!-- <h5 class="mb-2 text-center"> <span class="align-middle">FUN WALK</span></h5>
                                        
                                            <p class="mb-4 text-slate-500 dark:text-zink-200"></p> -->
                                            <div class="my-4 h-px w-full bg-slate-200 dark:bg-navy-500"></div>

                                            <ul class="flex flex-col gap-2 mt-5">
                                            
                                                <div class="!shadow-lg text-15 card">
                                                        <div class="relative">
                                                            <img class="transition-transform duration-500 ease-in-out group-hover/card:scale-105 rounded-t-md" src="{{URL::to('assets/images/category/WEBFUNWALK.webp')}}" alt="Image">
                                                        </div>
                                                    <div class="card-body"> 
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100 dark:fill-green-500/20"></i>
                                                            <span><b>85K</b> (Banyuwangi, Kediri, Madiun)</span>
                                                        </li>
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100"></i>
                                                            <span><b>100K</b> (Surabaya)</span>
                                                        </li>
                                                    
                                                    </div>
                                                </div>    
                                                                    
                                            </ul>

                                            <a href="{{ URL::To('registrasiPresale/'.$reg.'/'.$kode.'/'.$kota) }}" type="button" class="w-full bg-white border-dashed text-custom-500 btn border-custom-500 hover:text-custom-500 hover:bg-custom-50 hover:border-custom-600 focus:text-custom-600 focus:bg-custom-50 focus:border-custom-600 active:text-custom-600 active:bg-custom-50 active:border-custom-600 dark:bg-zink-700 dark:ring-custom-400/20 dark:hover:bg-custom-800/20 dark:focus:bg-custom-800/20 dark:active:bg-custom-800/20">
                                                <span class="align-middle">REGISTER RACE</span>
                                            </a>
                                        </div>
                                    </div>
                                    <!--end card-->
                                    
                                </div>
                            </div><br>
                            @endif
                            @if($showButton3)
                            <div class="">
                                <h3 class="mb-8 !leading-relaxed md:text-2xl text-center">BUNDLING</span></h3>
                                <div class="grid grid-cols-1 mt-16 gap-x-5 md:grid-cols-2 xl:grid-cols-2">
                                    <div class="!shadow-lg text-15 card">
                                        <div class="card-body">
                                    
                                            <h5 class="mb-2 text-center"> <span class="align-middle">Bundling 3 Event (non Surabaya)</span></h5>
                                            <p class="mb-4 text-slate-500 dark:text-zink-200"></p>

                                            <ul class="flex flex-col gap-2 mt-5">
                                                <div class="!shadow-lg text-15 card">
                                                    <div class="card-body">    
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100 dark:fill-green-500/20"></i>
                                                            <b>Bundling 5K</b><p class="line-through">675K<p> 630K
                                                        </li>
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100"></i>
                                                            <b>Bundling 10K</b><p class="line-through">825K<p> 780K
                                                        </li>
                                                    </div>
                                                </div>                                   
                                            </ul>

                                            <a href="{{ URL::To('registrasiPresale/'.$bundl.'/'.$kode4.'/'.$kota) }}" type="button" class="w-full bg-white border-dashed text-custom-500 btn border-custom-500 hover:text-custom-500 hover:bg-custom-50 hover:border-custom-600 focus:text-custom-600 focus:bg-custom-50 focus:border-custom-600 active:text-custom-600 active:bg-custom-50 active:border-custom-600 dark:bg-zink-700 dark:ring-custom-400/20 dark:hover:bg-custom-800/20 dark:focus:bg-custom-800/20 dark:active:bg-custom-800/20">
                                                <span class="align-middle">REGISTER RACE</span>
                                            </a>
                                        </div>
                                    </div><!--end card-->
                                    <div class="!shadow-lg text-15 card">
                                        <div class="card-body">
                                            <h5 class="mb-2 text-center"> <span class="align-middle">Bundling 4 Event (include Surabaya)</span></h5>
                                            <p class="mb-4 text-slate-500 dark:text-zink-200"></p>

                                            <ul class="flex flex-col gap-2 mt-5">
                                            
                                                <div class="!shadow-lg text-15 card">
                                                    <div class="card-body"> 
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100 dark:fill-green-500/20"></i>
                                                            <b>Bundling 5K</b><p class="line-through">925K<p> 865K
                                                        </li>
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100"></i>
                                                            <b>Bundling 10K</b><p class="line-through">1125K<p> 1000K
                                                        </li>
                                                    
                                                    </div>
                                                </div>    
                                                                    
                                            </ul>

                                            <a href="{{ URL::To('registrasiPresale/'.$bundl.'/'.$kode5.'/'.$kota) }}" type="button" class="w-full bg-white border-dashed text-custom-500 btn border-custom-500 hover:text-custom-500 hover:bg-custom-50 hover:border-custom-600 focus:text-custom-600 focus:bg-custom-50 focus:border-custom-600 active:text-custom-600 active:bg-custom-50 active:border-custom-600 dark:bg-zink-700 dark:ring-custom-400/20 dark:hover:bg-custom-800/20 dark:focus:bg-custom-800/20 dark:active:bg-custom-800/20">
                                                <span class="align-middle">REGISTER RACE</span>
                                            </a>
                                        </div>
                                    </div><!--end card-->
                                
                                    
                                </div>
                            </div><br>
                            @endif
                            @if($showButton4)
                            <div class="">
                                <h3 class="mb-8 !leading-relaxed md:text-2xl text-center">KIDS DASH</span></h3>
                                <div class="grid grid-cols-1 mt-16 gap-x-5 md:grid-cols-2 xl:grid-cols-2">
                                    <div class="!shadow-lg text-15 card">
                                        <div class="card-body">
                                    
                                            <h5 class="mb-2 text-center"> <span class="align-middle">Kategori A</span></h5>
                                            <p class="mb-4 text-slate-500 dark:text-zink-200"></p>

                                            <ul class="flex flex-col gap-2 mt-5">
                                                <div class="!shadow-lg text-15 card">
                                                    <div class="card-body">    
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100 dark:fill-green-500/20"></i>
                                                            <b>150K</b> 400 Meter
                                                        </li>
                                                    
                                                    </div>
                                                </div>                                   
                                            </ul>

                                            <a href="{{ URL::To('registrasiPresale/'.$kds.'/'.$kode7.'/'.$kota) }}" type="button" class="w-full bg-white border-dashed text-custom-500 btn border-custom-500 hover:text-custom-500 hover:bg-custom-50 hover:border-custom-600 focus:text-custom-600 focus:bg-custom-50 focus:border-custom-600 active:text-custom-600 active:bg-custom-50 active:border-custom-600 dark:bg-zink-700 dark:ring-custom-400/20 dark:hover:bg-custom-800/20 dark:focus:bg-custom-800/20 dark:active:bg-custom-800/20">
                                                <span class="align-middle">REGISTER RACE</span>
                                            </a>
                                        </div>
                                    </div><!--end card-->
                                    <div class="!shadow-lg text-15 card">
                                        <div class="card-body">
                                            <h5 class="mb-2 text-center"> <span class="align-middle">Kategori B</span></h5>
                                            <p class="mb-4 text-slate-500 dark:text-zink-200"></p>

                                            <ul class="flex flex-col gap-2 mt-5">
                                            
                                                <div class="!shadow-lg text-15 card">
                                                    <div class="card-body"> 
                                                        <li class="flex items-center gap-2">
                                                            <i data-lucide="dot" class="inline-block text-green-500 size-4 fill-green-100 dark:fill-green-500/20"></i>
                                                            <b>125K</b> 200 Meter
                                                        </li>
                                                    
                                                    
                                                    </div>
                                                </div>    
                                                                    
                                            </ul>

                                            <a href="{{ URL::To('registrasiPresale/'.$kds.'/'.$kode6.'/'.$kota) }}" type="button" class="w-full bg-white border-dashed text-custom-500 btn border-custom-500 hover:text-custom-500 hover:bg-custom-50 hover:border-custom-600 focus:text-custom-600 focus:bg-custom-50 focus:border-custom-600 active:text-custom-600 active:bg-custom-50 active:border-custom-600 dark:bg-zink-700 dark:ring-custom-400/20 dark:hover:bg-custom-800/20 dark:focus:bg-custom-800/20 dark:active:bg-custom-800/20">
                                                <span class="align-middle">REGISTER RACE</span>
                                            </a>
                                        </div>
                                    </div><!--end card-->
                                
                                    
                                </div>
                            </div>
                            @endif
                        @else
                            <div class="flex justify-center">
                                <div class="mx-auto size-21">
                                    <img src="assets/images/coming_soon2.png" alt="" class="size-21">
                                </div>
                            
                            </div>    
                        @endif    
                    </div>
                </div>
            </div>
        </section>
         <!-- sampai sini -->
@endsection