@extends('layouts.landing')

@section('title')
    Beranda
@endsection

@section('content')
    @push('css')
        <style>
            .smart-banner-temp[banner-slug="home-about"] img {
                margin-top: 50px !important;
                border-radius: 0.4rem;
                box-shadow: 0px 0px 31px -7px #cbcbcb;
                width: 1000px;
                height: 250px;
                object-fit: cover;
                background: #45c4a0;
            }
        </style>
    @endpush
    <section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-400 bg-content text-white"
        data-image-src="{{ asset('uploads/landing-page/home/images/' . Helper::homeSettings('heroBg')) }}">
        <div class="container pt-18 pb-16" style="z-index: 5; position: relative">
            <div class="row gx-0 gy-12 align-items-center">
                <div class="col-md-10 offset-md-1 offset-lg-0 col-lg-6 content text-center text-lg-start"
                    data-cues="slideInDown" data-group="page-title" data-delay="600">
                    <h1 class="display-2 mb-5 text-white">
                        {{ Helper::homeSettings('heroTitle') }}
                    </h1>
                    <p class="lead fs-lg lh-sm mb-7 pe-xl-10">
                        {{ Helper::homeSettings('heroDesc') }}
                    </p>
                    <div class="d-flex justify-content-center justify-content-lg-start" data-cues="slideInDown"
                        data-group="page-title-buttons" data-delay="900">
                        <span><a href="https://wa.link/gbw5rj"
                                class="btn btn-lg btn-white rounded-pill me-2">{{ __('message.Hubungi Kami') }}</a></span>
                    </div>
                </div>
                <!--/column -->
                <div class="col-lg-5 offset-lg-1">
                    <div id="carouselSlider" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            @forelse ($sliders as $key => $value)
                                <div class="carousel-item {{ $loop->first ? 'active' : '' }}" data-swiper-autoplay="2000">
                                    <img src="{{ asset('uploads/dataAspaki/slider/' . $value->image) }}"
                                        srcset="{{ asset('uploads/dataAspaki/slider/' . $value->image) }} 2x"
                                        class="rounded img-responsive w-100" alt="" />
                                </div>
                            @empty
                                <div class="swiper-slide">
                                    <p>{{ __('message.Tidak ada data') }}</p>
                                </div>
                            @endforelse <button class="carousel-control-prev" type="button"
                                data-bs-target="#carouselSlider" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselSlider"
                                data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            </button>
                            <!--/.swiper-wrapper -->
                        </div>
                        <div class="carousel-indicators">
                            @foreach ($sliders as $key => $value)
                                <button type="button" data-bs-target="#carouselSlider"
                                    data-bs-slide-to="{{ $key }}" class="{{ $loop->first ? 'active' : '' }}"
                                    aria-current="{{ $loop->first ? 'true' : 'false' }}"
                                    aria-label="Slide {{ $loop->iteration }}"></button>
                            @endforeach
                        </div>
                        <!--/.swiper -->
                    </div>
                    <!-- /.swiper-container -->
                </div>
                <!-- /column -->

                @push('script')
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            var mySwiper = new Swiper('.swiper-container', {
                                autoplay: {
                                    delay: 5000,
                                },
                            });
                        });
                    </script>
                @endpush

                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>

    <!-- /section -->
    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
                <div class="col-md-8 col-lg-6 col-xl-5 position-relative">
                    <a href="{{ asset('uploads/landing-page/home/images/' . Helper::homeSettings('aboutVideo')) }}"
                        class="btn btn-circle btn-primary btn-play ripple mx-auto mb-5 position-absolute"
                        style="
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        z-index: 3;
                    "
                        data-glightbox data-gallery="about"><i class="icn-caret-right"></i></a>
                    <div class="shape rounded bg-soft-primary rellax d-md-block" data-rellax-speed="0"
                        style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%"></div>
                    <figure class="rounded">
                        <img src="{{ asset('uploads/landing-page/home/images/' . Helper::homeSettings('aboutImage')) }}"
                            srcset="{{ asset('uploads/landing-page/home/images/' . Helper::homeSettings('aboutImage')) }} 2x"
                            alt="" />
                    </figure>
                </div>
                <!--/column -->
                <div class="col-lg-6 ">
                    <h2 class="display-4 mb-3">{{ Helper::homeSettings('aboutTitle') }}</h2>
                    <p class="lead fs-lg">
                        {{ Helper::homeSettings('aboutDesc') }}
                    </p>
                    <a href="{{ route('landing.about') }}"
                        class="btn btn-sm btn-primary rounded-pill me-2">{{ __('message.Selengkapnya') }}</a>
                    <!--/.row -->
                </div>

                <!--/column -->
            </div>
            <!--/.row -->
            @if (isset($smartAd->slug))
                <div class="col-lg-12 text-center">
                    <x-smart-ad-component slug="{{ $smartAd->slug }}" />
                </div>
            @endif
            <!--/column -->
        </div>
        <!-- /.container -->
    </section>
    <section class="wrapper bg-soft-primary">
        <div class="container py-8 py-md-10">
            <div class="row mb-10">
                <div class="col-xl-10 mx-auto">
                    <div class="row align-items-center counter-wrapper gy-6 text-center">
                        <div class="col-md-3">
                            <img src="{{ asset('') }}landing/assets/img/icons/lineal/check.svg"
                                class="svg-inject icon-svg icon-svg-lg text-primary mb-3" alt="" />
                            <h3 class="counter">{{ $counter['aktif'] }}</h3>
                            <p>{{ __('message.Member Aktif') }}</p>
                        </div>
                        <!--/column -->
                        <div class="col-md-3">
                            <img src="{{ asset('') }}landing/assets/img/icons/lineal/user.svg"
                                class="svg-inject icon-svg icon-svg-lg text-primary mb-3" alt="" />
                            <h3 class="counter">{{ $counter['iso'] }}</h3>
                            <p>ISO 13485</p>
                        </div>
                        <div class="col-md-3">
                            <img src="{{ asset('') }}landing/assets/img/icons/lineal/award-2.svg"
                                class="svg-inject icon-svg icon-svg-lg text-primary mb-3" alt="" />
                            <h3 class="counter">{{ $counter['fda'] }}</h3>
                            <p>US FDA</p>
                        </div>
                        <!--/column -->
                        <!--/column -->
                        <div class="col-md-3">
                            <img src="{{ asset('') }}landing/assets/img/icons/lineal/award-2.svg"
                                class="svg-inject icon-svg icon-svg-lg text-primary mb-3" alt="" />
                            <h3 class="counter">{{ $counter['cpakb'] ? '>' . $counter['cpakb'] : '0' }}</h3>
                            <p>CPAKB</p>
                        </div>
                        <!--/column -->

                    </div>
                    <!--/.row -->
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /section -->
    <!-- /section -->
    <section class="wrapper bg-light">
        <div class="container py-14 py-md-10">
            <div class="row gx-lg-8 gx-xl-12 gy-10 gy-lg-0">
                <div class="col-lg-4 mt-lg-2">
                    <h2 class="display-4 mb-3">{{ __('message.Kalender') }}</h2>
                    <p class="lead fs-lg mb-6 pe-xxl-5">
                        {{ __('message.Semua acara pada tahun ini') }}
                    </p>
                    <a href="{{ route('landing.events') }}" class="btn btn-soft-primary rounded-pill">
                        {{ __('message.Lihat Semua') }}
                    </a>
                </div>
                <!-- /column -->
                <div class="col-lg-8">
                    <div class="swiper-container blog grid-view mb-6" data-margin="30" data-dots="true"
                        data-items-md="2" data-items-xs="1">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @forelse ($events as $key => $value)
                                    <div class="swiper-slide">
                                        <article>
                                            <figure class="overlay overlay-1 hover-scale rounded mb-5 h-22">
                                                <a href="{{ route('landing.events.show', ['slug' => $value->slug]) }}">
                                                    <img src="{{ asset('uploads/landing-page/events/images/' . $value->photo) }}"
                                                        alt="" /></a>
                                                <figcaption>
                                                    <h5 class="from-top mb-0">{{ __('message.Read More') }}</h5>
                                                </figcaption>
                                            </figure>
                                            <div class="post-header">
                                                <!-- /.post-category -->
                                                <h2 class="post-title h3 mt-1 mb-3">
                                                    <a class="link-dark"
                                                        href="{{ route('landing.events.show', ['slug' => $value->slug]) }}">{{ substr($value->name, 0, 20) . '...' }}</a>
                                                </h2>
                                            </div>
                                            <!-- /.post-header -->
                                            <div class="post-footer">
                                                <ul class="post-meta mb-0">
                                                    <li class="post-date">
                                                        <i
                                                            class="uil uil-calendar-alt"></i><span>{{ date('d M Y', strtotime($value->date)) }}</span>
                                                    </li>
                                                </ul>
                                                <!-- /.post-meta -->
                                            </div>
                                            <!-- /.post-footer -->
                                        </article>
                                        <!-- /article -->
                                    </div>
                                @empty
                                    <div class="col-12">
                                        <h4 class="text-center">{{ __('message.Tidak ada data') }}</h4>
                                    </div>
                                @endforelse

                            </div>
                            <!--/.swiper-wrapper -->
                        </div>
                        <!-- /.swiper -->
                    </div>
                    <!-- /.swiper-container -->
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- Gallery -->
    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="row">
                <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center">
                    <h3 class="display-4 mb-10">{{ __('message.Galeri') }}</h3>
                    <h2 class="fs-15 text-uppercase text-muted mb-3">
                        <a href="{{ route('landing.gallery') }}" class="btn btn-soft-primary rounded-pill">
                            {{ __('message.Lihat Semua') }}
                        </a>
                    </h2>
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
            <div class="swiper-container grid-view mb-6" data-margin="30" data-dots="true" data-items-xl="3"
                data-items-md="2" data-items-xs="1">
                <div class="swiper">

                    <div class="swiper-wrapper">
                        @forelse ($galleries as $key => $value)
                            <div class="swiper-slide">
                                <figure class="overlay overlay-1 hover-scale rounded mb-5 h-22">
                                    <img src="{{ asset('uploads/landing-page/gallery/photo/' . $value->photo) }}"
                                        class="h-25"
                                        srcset="{{ asset('uploads/landing-page/gallery/photo/' . $value->photo) }}"
                                        alt="" /><a class="item-link"
                                        href="{{ asset('uploads/landing-page/gallery/photo/' . $value->photo) }}"
                                        data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a>
                                </figure>
                                <div class="project-details d-flex justify-content-center flex-column">
                                    <div class="post-header">
                                        <h2 class="post-title h3">
                                            <a href="{{ asset('uploads/landing-page/gallery/photo/' . $value->photo) }}"
                                                data-glightbox data-gallery="projects-group"
                                                class="link-dark">{{ $value->name }}</a>
                                        </h2>
                                        <!--<div class="post-category text-ash">Stationary</div>-->
                                    </div>
                                    <!-- /.post-header -->
                                </div>
                                <!-- /.project-details -->
                            </div>
                        @empty
                            <div class="col-12">
                                <h4 class="text-center">{{ __('message.Tidak ada data') }}</h4>
                            </div>
                        @endforelse
                    </div>

                    <!--/.swiper-wrapper -->
                </div>
                <!-- /.swiper -->
            </div>

            <!-- /.swiper-container -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /section -->
    <!-- Gallery -->
    <!-- Blog -->
    <section class="wrapper bg-light">
        <div class="container py-5 py-md-5">
            <div class="row">
                <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto">
                    <h3 class="display-4 mb-6 text-center">{{ __('message.Blog') }}</h3>
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
            <div class="position-relative">
                <div class="shape bg-dot primary rellax w-17 h-20" data-rellax-speed="1" style="top: 0; left: -1.7rem">
                </div>
                <div class="swiper-container dots-closer blog grid-view mb-6" data-margin="0" data-dots="true"
                    data-items-xl="3" data-items-md="2" data-items-xs="1">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            @forelse ($blogs as $key => $value)
                                <div class="swiper-slide">
                                    <div class="item-inner">
                                        <article>
                                            <div class="card">
                                                <figure class="card-img-top overlay overlay-1 hover-scale h-22 ">
                                                    <a href="{{ route('landing.blog.show', ['slug' => $value->slug]) }}">
                                                        <img src="{{ asset('uploads/landing-page/blog/' . '/thumbnail/' . $value->thumbnail) }}"
                                                            alt="" class="h-22" /></a>
                                                    <figcaption>
                                                        <h5 class="from-top mb-0">{{ __('message.Baca Lebih Lanjut') }}
                                                        </h5>
                                                    </figcaption>
                                                </figure>
                                                <div class="card-body">
                                                    <div class="post-header">
                                                        <div class="post-category text-line">
                                                            <a href="#" class="hover"
                                                                rel="category">{{ __('message.' . $value->blogCategory->name) }}</a>
                                                        </div>
                                                        <!-- /.post-category -->
                                                        <h2 class="post-title h3 mt-1 mb-3">
                                                            <a class="link-dark"
                                                                href="{{ route('landing.blog.show', ['slug' => $value->slug]) }}">{{ substr($value->title, 0, 45) . '...' }}</a>
                                                        </h2>
                                                    </div>
                                                    <!-- /.post-header -->
                                                    <div class="post-content">
                                                        <p>
                                                            {!! Str::words(strip_tags($value->description), 11, '....') !!}
                                                        </p>
                                                    </div>
                                                    <!-- /.post-content -->
                                                </div>
                                                <!--/.card-body -->
                                                <div class="card-footer">
                                                    <ul class="post-meta d-flex mb-0">
                                                        <li class="post-date">
                                                            <i
                                                                class="uil uil-calendar-alt"></i><span>{{ date('d M Y', strtotime($value->created_date)) }}</span>
                                                        </li>
                                                        {{-- <li class="post-comments">
                                                            <a href="#"><i class="uil uil-comment"></i>4</a>
                                                        </li> --}}
                                                        <li class="post-likes ms-auto">
                                                            <a href="javascript:void(0)"><i
                                                                    class="uil uil-user"></i>{{ $value->user->name }}</a>
                                                        </li>
                                                    </ul>
                                                    <!-- /.post-meta -->
                                                </div>
                                                <!-- /.card-footer -->
                                            </div>
                                            <!-- /.card -->
                                        </article>
                                        <!-- /article -->
                                    </div>
                                    <!-- /.item-inner -->
                                </div>
                            @empty
                                <div class="col-12">
                                    <h4 class="text-center">{{ __('message.Tidak ada data') }}</h4>
                                </div>
                            @endforelse

                        </div>
                        <!--/.swiper-wrapper -->
                    </div>
                    <!-- /.swiper -->
                </div>
                <!-- /.swiper-container -->
            </div>
            <!-- /.position-relative -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /section -->
    <!-- blog -->
    <!-- Client -->
    <section class="wrapper bg-light">
        <div class="container py-10 py-md-16 text-center">
            <h3 class="display-4 mb-10 text-center">{{ __('message.Partner Aspaki') }}</h3>

            <img src="{{ asset('uploads/partner.png') }}" class="d-block w-100" alt="">
            <!--<div class="swiper-container clients mb-0" data-margin="30" data-dots="false" data-autoplay-timeout="3000"-->
            <!--    data-items-xxl="7" data-items-xl="6" data-items-lg="5" data-items-md="4" data-items-xs="2">-->
            <!--    <div class="swiper" style="">-->
            <!--        <div class="swiper-wrapper">-->
            <!--            @forelse ($partners as $key => $value)
    -->
            <!--                <div class="swiper-slide px-5">-->
            <!--                    <img src="{{ asset('uploads/landing-page/partner/photo/' . $value->photo) }}" alt=""-->
            <!--                        class="h-18 w-18" />-->
            <!--                </div>-->
        <!--            @empty-->
            <!--                <div class="col-12">-->
            <!--                    <h4 class="text-center">No Data</h4>-->
            <!--                </div>-->
            <!--
    @endforelse-->

            <!--        </div>-->
            <!--/.swiper-wrapper -->
            <!--    </div>-->
            <!-- /.swiper -->
            <!--</div>-->

            <!-- /.swiper-container -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /section -->
    <!-- /section -->
    <!-- Client -->

    <!-- Testimony -->
    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="row gx-xl-12 gy-10">
                <div class="col-xl-4">
                    <h2 class="display-4 mt-10 mb-3">{{ __('message.Testimoni') }}</h2>
                    <p class="lead fs-lg mb-6">
                        {{ __('message.Apa yang mereka katakan kepada kami') }}
                    </p>
                </div>
                <!-- /column -->
                <div class="col-xl-8">
                    <div class="position-relative">
                        <div class="shape rounded-circle bg-soft-yellow rellax w-16 h-16" data-rellax-speed="1"
                            style="top: -0.7rem; right: -1.7rem"></div>
                        <div class="shape rounded-circle bg-line red rellax w-16 h-16" data-rellax-speed="1"
                            style="bottom: -0.5rem; left: -1.4rem"></div>
                        <div class="swiper-container dots-closer mb-6" data-margin="0" data-dots="true"
                            data-items-md="2" data-items-xs="1">
                            <div class="swiper">
                                <div class="swiper-wrapper">
                                    @forelse ($testimony as $key => $value)
                                        <div class="swiper-slide">
                                            <div class="item-inner">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <blockquote class="icon mb-0">
                                                            <p>
                                                                “{{ $value->desc }}”
                                                            </p>
                                                            <div class="blockquote-details">
                                                                <img class="rounded-circle w-12"
                                                                    src="{{ asset('uploads/landing-page/testimony/photo/' . $value->photo) }}"
                                                                    srcset="{{ asset('uploads/landing-page/testimony/photo/' . $value->photo) }}"
                                                                    alt="" />
                                                                <div class="info">
                                                                    <h5 class="mb-1">{{ $value->name }}</h5>
                                                                    <p class="mb-0">
                                                                        {{ $value->department }}</p>
                                                                </div>
                                                            </div>
                                                        </blockquote>
                                                    </div>
                                                    <!--/.card-body -->
                                                </div>
                                                <!-- /.card -->
                                            </div>
                                            <!-- /.item-inner -->
                                        </div>
                                    @empty
                                        <div class="col-12">
                                            <h4 class="text-center">{{ __('message.Tidak ada data') }}</h4>
                                        </div>
                                    @endforelse
                                </div>
                                <!--/.swiper-wrapper -->
                            </div>
                            <!-- /.swiper -->
                        </div>
                        <!-- /.swiper-container -->
                    </div>
                    <!-- /.position-relative -->
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /section -->
    <!-- Testimony -->
@endsection