@section('optional_js')
    <!--Revolution Slider-->
    <script src="{{ asset('assets/klinik/plugins/revolution/js/jquery.themepunch.revolution.min.js') }}"></script>
    <script src="{{ asset('assets/klinik/plugins/revolution/js/jquery.themepunch.tools.min.js') }}"></script>
    <script src="{{ asset('assets/klinik/plugins/revolution/js/extensions/revolution.extension.actions.min.js') }}"></script>
    <script src="{{ asset('assets/klinik/plugins/revolution/js/extensions/revolution.extension.carousel.min.js') }}"></script>
    <script src="{{ asset('assets/klinik/plugins/revolution/js/extensions/revolution.extension.kenburn.min.js') }}"></script>
    <script src="{{ asset('assets/klinik/plugins/revolution/js/extensions/revolution.extension.layeranimation.min.js') }}"></script>
    <script src="{{ asset('assets/klinik/plugins/revolution/js/extensions/revolution.extension.migration.min.js') }}"></script>
    <script src="{{ asset('assets/klinik/plugins/revolution/js/extensions/revolution.extension.navigation.min.js') }}"></script>
    <script src="{{ asset('assets/klinik/plugins/revolution/js/extensions/revolution.extension.parallax.min.js') }}"></script>
    <script src="{{ asset('assets/klinik/plugins/revolution/js/extensions/revolution.extension.slideanims.min.js') }}"></script>
    <script src="{{ asset('assets/klinik/plugins/revolution/js/extensions/revolution.extension.video.min.js') }}"></script>
    <script src="{{ asset('assets/klinik/js/main-slider-script.js') }}"></script>
    <!--Revolution Slider-->
    
@endsection
<x-front-layout>
    
    <!--Main Slider-->
    <section class="main-slider">
        <div class="rev_slider_wrapper fullwidthbanner-container"  id="rev_slider_one_wrapper" data-source="gallery">
            <div class="rev_slider fullwidthabanner" id="rev_slider_one" data-version="5.4.1">
                <ul>
                    @foreach($banners as $banner)
                        <li data-index="rs-{{ $banner->id }}" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="300"  data-thumb=""  data-rotate="0"  data-saveperformance="off"  data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                        
                            <!-- MAIN IMAGE -->
                            <img alt="" class="rev-slidebg" data-bgfit="cover" data-bgparallax="20" data-bgposition="center center" data-bgrepeat="no-repeat" data-no-retina="" src="{{ Storage::url($banner->image) }}">

                            <div class="tp-caption" 
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[15,15,15,15]"
                            data-paddingright="[0,0,0,0]"
                            data-paddingtop="[0,0,0,0]"
                            data-responsive_offset="on"
                            data-type="text"
                            data-height="none"
                            data-width="['750','750','750','650']"
                            data-whitespace="normal"
                            data-hoffset="['0','0','0','0']"
                            data-voffset="['-180','-170','-180','-180']"
                            data-x="['left','left','left','left']"
                            data-y="['middle','middle','middle','middle']"
                            data-textalign="['top','top','top','top']"
                            data-frames='[{"delay":1000,"speed":1500,"frame":"0","from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'>
                            </div>

                            <div class="tp-caption" 
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[15,15,15,15]"
                            data-paddingright="[15,15,15,15]"
                            data-paddingtop="[0,0,0,0]"
                            data-responsive_offset="on"
                            data-type="text"
                            data-height="none"
                            data-width="['750','750','750','650']"
                            data-whitespace="normal"
                            data-hoffset="['0','0','0','0']"
                            data-voffset="['-100','-95','-100','-115']"
                            data-x="['left','left','left','left']"
                            data-y="['middle','middle','middle','middle']"
                            data-textalign="['top','top','top','top']"
                            data-frames='[{"delay":1000,"speed":1500,"frame":"0","from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'>
                                <h2>{!! $banner->title !!}</h2>
                            </div>

                            <div class="tp-caption" 
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[15,15,15,15]"
                            data-paddingright="[15,15,15,15]"
                            data-paddingtop="[0,0,0,0]"
                            data-responsive_offset="on"
                            data-type="text"
                            data-height="none"
                            data-width="['700','750','700','450']"
                            data-whitespace="normal"
                            data-hoffset="['0','0','0','0']"
                            data-voffset="['0','0','0','0']"
                            data-x="['left','left','left','left']"
                            data-y="['middle','middle','middle','middle']"
                            data-textalign="['top','top','top','top']"
                            data-frames='[{"delay":1000,"speed":1500,"frame":"0","from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'>
                                <div class="text">{!! $banner->description !!}</div>
                            </div>
                            
                            <div class="tp-caption tp-resizeme" 
                            data-paddingbottom="[0,0,0,0]"
                            data-paddingleft="[15,15,15,15]"
                            data-paddingright="[15,15,15,15]"
                            data-paddingtop="[0,0,0,0]"
                            data-responsive_offset="on"
                            data-type="text"
                            data-height="none"
                            data-whitespace="normal"
                            data-width="['650','650','700','300']"
                            data-hoffset="['0','0','0','0']"
                            data-voffset="['80','90','90','140']"
                            data-x="['left','left','left','left']"
                            data-y="['middle','middle','middle','middle']"
                            data-textalign="['top','top','top','top']"
                            data-frames='[{"delay":1000,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'>
                                <div class="btn-box">
                                    <a href="{{ route('member.home') }}" class="theme-btn btn-style-one"><span class="btn-title">Daftar Test Covid-19</span></a>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </section>
    <!-- End Main Slider-->

    <!-- Top Features -->
    <section class="top-features">
        <div class="auto-container">
            <div class="row">
                <!-- Feature Block -->
                <div class="feature-block col-lg-4 col-md-6 col-sm-12">
                    <div class="inner-box">
                        <span class="icon flaticon-charity"></span>
                        <h4><a href="#">Proses Aman, Cepat dan Efisien</a></h4>
                        <p>Proses pemeriksaan aman, cepat dan pelanggan bisa melakukan pendaftaran dan mendapatkan hasilnya secara online.</p>
                    </div>
                </div>

                <!-- Feature Block -->
                <div class="feature-block col-lg-4 col-md-6 col-sm-12">
                    <div class="inner-box">
                        <span class="icon flaticon-lifeline"></span>
                        <h4><a href="#">Laboratorium Standard Internasional</a></h4>
                        <p>Mesin laboratorium didukung teknologi internasional dan sesuai dengan ketentuan </p>
                    </div>
                </div>

                <!-- Feature Block -->
                <div class="feature-block col-lg-4 col-md-6 col-sm-12">
                    <div class="inner-box">
                        <span class="icon flaticon-doctor"></span>
                        <h4><a href="#">Tenaga Kesehatan Ahli dan Terlatih</a></h4>
                        <p>Nakes kami sudah terlatih dan dapat dipastikan proses pengambilan sampel berjalan dengan aman dan nyaman.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Features Section -->


    <!-- About Section -->
    <section class="about-section">
        <div class="auto-container">
            <div class="row">
                <!-- Content Column -->
                <div class="content-column col-lg-6 col-md-12 col-sm-12 order-2">
                    <div class="inner-column">
                        <div class="sec-title">
                            <h2>Selamat Datang di <br> Karunia Medical Clinic</h2>
                            <span class="divider"></span>
                            <p>Karunia Medical Clinic merupakan sebuah klinik yang berdiri dibawah naungan PT. Karunia Prima Medika. Klinik ini berlokasi di Balikpapan Baru Blok G3 No.11, Kota Balikpapan, Kalimantan Timur. Klinik ini memiliki berbagai macam layanan seperti pemeriksaan radiologi, MCU, dll.</p>
                            <p> Selain itu klinik ini juga melayani pemeriksaan COVID-19 guna mendeteksi virus COVID-19.</p>
                        </div>
                        <div class="link-box">
                            <a href="{{ route('front.about-us') }}" class="theme-btn btn-style-one"><span class="btn-title">Selengkapnya</span></a>
                        </div>
                    </div>
                </div>

                <!-- Images Column -->
                <div class="images-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="video-link">
                            <a href="https://youtu.be/zwlbu8N0Jjg" class="play-btn lightbox-image" data-fancybox="images"><span class="flaticon-play-button-1"></span></a>
                        </div>
                        <figure class="image-1"><img src="{{ asset('assets/klinik/images/resource/image-1-km.png') }}" alt=""></figure>
                        <figure class="image-2"><img src="{{ asset('assets/klinik/images/resource/image-2-km.png') }}" alt=""></figure>
                        <figure class="image-3">
                            <span class="hex"></span>
                            <img src="{{ asset('assets/klinik/images/resource/image-3-km.png') }}" alt="">
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End About Section -->

    <!-- Services Section -->
    <section class="services-section">
        <div class="auto-container">
            <div class="sec-title text-center">
                <span class="sub-title">LAYANAN KAMI</span>
                <h2>Dapatkan Layanan Pemeriksaan yang Berkualitas dari Kami</h2>
                <span class="divider"></span>
            </div>

            <div class="row">
                <!-- Service Block -->
                <div class="service-block col-lg-4 col-md-6 col-sm-12">
                    <div class="inner-box">
                        <span class="icon flaticon-heartbeat"></span>
                        <h5><a href="#">Medical Check-up</a></h5>
                        {{-- <div class="text">We offer extensive medical procedures to outbound & inbound patients what it is and we are very proud achievement staff.</div> --}}
                    </div>
                </div>

                <!-- Service Block -->
                <div class="service-block col-lg-4 col-md-6 col-sm-12">
                    <div class="inner-box">
                        <span class="icon flaticon-atom"></span>
                        <h5><a href="#">PCR Test</a></h5>
                        {{-- <div class="text">We offer extensive medical procedures to outbound & inbound patients what it is and we are very proud achievement staff.</div> --}}
                    </div>
                </div>

                <!-- Service Block -->
                <div class="service-block col-lg-4 col-md-6 col-sm-12">
                    <div class="inner-box">
                        <span class="icon flaticon-pregnancy-test"></span>
                        <h5><a href="#">Swab Antigen Test</a></h5>
                        {{-- <div class="text">We offer extensive medical procedures to outbound & inbound patients what it is and we are very proud achievement staff.</div> --}}
                    </div>
                </div>

                <!-- Service Block -->
                <div class="service-block col-lg-4 col-md-6 col-sm-12">
                    <div class="inner-box">
                        <span class="icon flaticon-medical"></span>
                        <h5><a href="#">Antibody Test</a></h5>
                        {{-- <div class="text">We offer extensive medical procedures to outbound & inbound patients what it is and we are very proud achievement staff.</div> --}}
                    </div>
                </div>

                <!-- Service Block -->
                <div class="service-block col-lg-4 col-md-6 col-sm-12">
                    <div class="inner-box">
                        <span class="icon flaticon-science"></span>
                        <h5><a href="#">Serologi Test</a></h5>
                        {{-- <div class="text">We offer extensive medical procedures to outbound & inbound patients what it is and we are very proud achievement staff.</div> --}}
                    </div>
                </div>

                <!-- Service Block -->
                <div class="service-block col-lg-4 col-md-6 col-sm-12">
                    <div class="inner-box">
                        <span class="icon flaticon-medical-report"></span>
                        <h5><a href="#">Pasca Covid Screening</a></h5>
                        {{-- <div class="text">We offer extensive medical procedures to outbound & inbound patients what it is and we are very proud achievement staff.</div> --}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Services Section -->

    <!-- About Section Two -->
    <section class="about-section-two">
        <div class="auto-container">
            <div class="row">
                <!-- Content Column -->
                <div class="content-column col-xl-6 col-lg-7 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="sec-title">
                            <h2>Cara Mudah Tes Covid-19 di Karunia Medical Clinic</h2>
                            <span class="divider"></span>
                            <p>Pilih sendiri waktu terbaik untuk melakukan pemeriksaan di Karunia Medical Clinic. Proses registrasi hingga mendapatkan hasil test bisa dilakukan secara Online agar efisien dan menghemat waktu anda yang berharga.</p>
                        </div>

                        <div class="row">
                            <!-- Feature BLock -->
                            <div class="feature-block-two col-lg-6 col-md-6 col-sm-12">
                                <div class="inner-box">
                                    <span class="icon flaticon-internet-1"></span>
                                    <h4>Registrasi Online</h4>
                                    <p>Lakukan registrasi online untuk test Covid-19 melalui website kami.</p>
                                </div>
                            </div>

                            <!-- Feature BLock -->
                            <div class="feature-block-two col-lg-6 col-md-6 col-sm-12">
                                <div class="inner-box">
                                    <span class="icon flaticon-clock"></span>
                                    <h4>Pilih Tanggal dan Waktu Test</h4>
                                    <p>Tentukan tanggal melakukan pengambilan sample untuk test.</p>
                                </div>
                            </div>

                            <!-- Feature BLock -->
                            <div class="feature-block-two col-lg-6 col-md-6 col-sm-12">
                                <div class="inner-box">
                                    <span class="icon flaticon-lab"></span>
                                    <h4>Lakukan Pengambilan Sample</h4>
                                    <p>Datang sesuai jadwal yang dipilih dan lakukan pengambilan sample test.</p>
                                </div>
                            </div>

                            <!-- Feature BLock -->
                            <div class="feature-block-two col-lg-6 col-md-6 col-sm-12">
                                <div class="inner-box">
                                    <span class="icon flaticon-medical-report"></span>
                                    <h4>Terima Hasil Secara Online</h4>
                                    <p>Tidak perlu datang ke klinik untuk mengambil hasil test, karena akan kami kirim hasilnya secara online.</p>
                                </div>
                            </div>

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

                <!-- Images Column -->
                <div class="image-column col-xl-6 col-lg-5 col-md-12 col-sm-12">
                    <div class="image-box">
                        <figure class="image"><img src="{{ asset('assets/klinik/images/resource/image-5-km.jpg') }}" alt=""></figure>
                        <div class="icon-box"><span class="icon flaticon-lab"></span></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End About Section Two -->

    @if($blog->count() > 0)
    <!-- News Section -->
    <section class="news-section">
        <div class="auto-container">
            <!-- Sec Title -->
            <div class="sec-title text-center">
                <h2>Temukan Berita & Promo Menarik Kami</h2>
                <span class="divider"></span>
            </div>

            <div class="row">
                @foreach($blog as $row)
                    <!-- News Block -->
                    <div class="news-block col-lg-4 col-md-6 col-sm-12 wow fadeInUp">
                        <div class="inner-box">
                            <div class="image-box">
                                <figure class="image"><a href="{{ route('front.post', $row->slug) }}"><img src="{{ Storage::url($row->image) }}" alt=""></a></figure>
                                <a href="#" class="date">{{ $row->created_at->format('F d, Y') }}</a>
                            </div>
                            <div class="lower-content">
                                <h4><a href="{{ route('front.post', $row->slug) }}">{{ $row->title }}</a></h4>
                                <div class="text">
                                    <p>{{ substr($row->content, 0, 200) }}</p><br>
                                    <a href="{{ route('front.post', $row->slug) }}" class="theme-btn btn-style-one small"><span class="btn-title">Baca Selengkapnya</span></a>
                                </div>
                                <div class="post-info">
                                    <div class="post-author">Posted by <a href="#">{{ $row->author->name }}</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--End News Section -->
    @endif
    
    <!-- Appointment Section -->
    <section class="appointment-section">
        <div class="image-layer" style="background-image: url({{ asset('assets/klinik/images/background/2.jpg')}});"></div>
        <div class="auto-container">
            <div class="row">
                <!-- Content Column -->
                <div class="content-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <span class="title">Layanan Corporate</span>
                        <h2>Butuh Tes Covid-19 <br>untuk Perusahaan Anda?</h2>
                        <div class="number">Hubungi kami : <strong>{{ Setting::getSetting('company-phone') }}</strong></div>
                        <a href="{{ route('company.home') }}" class="theme-btn btn-style-three"><span class="btn-title">Login Perusahaan</span></a>
                    </div>
                </div>
                <div class="image-column col-lg-6 col-md-12 col-sm-12">
                    <figure class="image"><img src="{{ asset('assets/klinik/images/resource/image-4-km.png') }}" alt=""></figure>
                </div>
            </div>
            <div style="padding: 50px 0 20px;"></div>
        </div>
    </section>
    <!-- End Appointment Section -->

</x-front-layout>