@extends('client.layouts.main')

@section('title', 'Selamat datang')

@php
setlocale(LC_ALL, 'IND');
@endphp

@section('content')
<!-- slider-area -->
<section id="home" class="slider-area fix p-relative">

    <div class="slider-active2">
        <div class="single-slider slider-bg d-flex align-items-center"
            style="background-image:url(img/an-bg/header-bg.png)">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="slider-content s-slider-content text-left">
                            <h2 data-animation="fadeInUp" data-delay=".4s">Deteksi dini, <br/> yuk menjadi  <span>#PriaSehat</span> <br /> di usia matang
                               
                            </h2>
                            <p data-animation="fadeInUp" data-delay=".6s">Layanan skrining penurunan hormon testosteron pada pria usia dewasa tua.
                            </p>
                            {{-- <div class="slider-btn mt-25 ">
                                <a href="{{route('client.skrining')}}" class="btn ss-btn" data-animation="fadeInRight"
                            data-delay=".8s">Mulai Skrining
                            <i class="fas fa-chevron-right"></i></a>
                        </div> --}}
                    </div>
                </div>
                <div class="col-lg-6 mt-100 hero-home">
                    <img src="{{asset('client/img/bg/header-img.png')}}" alt="header-img" class="header-img" />
                </div>
            </div>
            <div class="row mt-5 ml-5">
                <a href="{{route('client.skrining')}}" class="col-lg-3 mb-2  feature-btn mr-5">
                    <h3>Skrining</h3>
                    <p>Cek status kesehatan dengan skrining mandiri</p>
                </a>
                <a href="{{route('client.dokter')}}" class="col-lg-3 mb-2    feature-btn mr-5">
                    <h3>Dokter Andrologi</h3>
                    <p>Konsultasi dengan para dokter terbaik kami</p>
                </a>
                <a href="{{route('client.edukasi')}}" class="col-lg-3 mb-2  feature-btn mr-5">
                    <h3>Artikel Androlog Bercerita</h3>
                    <p>Menambah wawasan dengan artikel terupdate</p>
                </a>
            </div>
        </div>
    </div>

    </div>
</section>
<!-- slider-area-end -->

<!-- blog-area -->
<section id="edukasi-section" class="blog-area  p-relative pt-100 pb-10 fix"
    style="background-image:url(img/an-bg/an-bg10.png); background-size: contain;background-repeat: no-repeat;background-position: center center;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-8 col-lg-10">
                <div class="section-title text-center mb-80">
                    <span> EVENT MENARIK </span>
                    <h2>Jangan Lewatkan Event Menarik Mendatang</h2>
                    <p>Kami memiliki beberapa event menarik mendatang yang bisa kamu ikuti untuk menambah wawasan
                        kesehatan.</p>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            @foreach (\App\Models\Event::latest()->take(3)->get() as $index => $item)
            <div class="col-lg-4 col-md-12">
                <div class="single-post mb-30">
                    <img style=" object-fit: cover;
                    width: 100%;
                    height: 300px;" src="{{asset($item->gambar)}}" alt="img" class="rounded">
                    <div style="height: 320px" class="blog-content text-center event-content">
                        <div class="mb-3">
                            <i class="far fa-calendar-alt"></i>
                            {{\Carbon\Carbon::parse($item->tanggal)->formatLocalized('%d %B %Y');}}
                        </div>
                        <h5 style="height: 50px;">{{substr($item->nama, 0, 70)}}{{strlen($item->nama) >= 70 ? '.....' : ''}}</h5>
                        <div class="blog-btn mb-3"><a href="{{route('client.event', $item->uuid)}}">Selengkapnya<i
                            class="fas fa-chevron-right"></i></a></div>
                        <div class="slider-btn mt-0">
                            <a href="{{$item->link}}" target="_blank" style="width: 250px !important" class="btn ss-btn"
                                data-animation="fadeInRight" data-delay=".8s">Bergabung Sekarang
                                <i class="fas fa-chevron-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
<!-- blog-area-end --

<!-- blog-area -->
<section id="edukasi-section" class="blog-area  p-relative pt-100 pb-10 fix"
    style="background-image:url(img/an-bg/an-bg10.png); background-size: contain;background-repeat: no-repeat;background-position: center center;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-8 col-lg-10">
                <div class="section-title text-center mb-80">
                    <span> EDUKASI UNTUK KAMU </span>
                    <h2>Jangan Lewatkan Edukasi Terbaru Dari Kami</h2>
                    <p>Kami bagikan berita dan informasi terbaru seputar kesehatan seksual dan reproduksi! Gabunglah
                        dengan kami dan tetap up-to-date dengan blog dan berita terkini di Skrining Hipogonadisme.</p>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            @forelse (\App\Models\Edukasi::latest()->where('home', true)->get() as $item)
            <div class="col-lg-4 col-md-12 mx-auto">
                <div class="single-post mb-30">
                    <div>
                        <a href="{{route('client.edukasi.detail', $item->uuid)}}">
                            <img style=" object-fit: cover;
                            width: 100%;
                            height: 300px;
                            border-radius: 10px;" src="{{asset($item->gambar[0]->file)}}" alt="img">
                        </a>
                    </div>
                    <div class="blog-content text-center">
                        <div class="b-meta mb-20">
                            <div class="row">
                                <div class="col-lg-6 col-md-6">
                                    <i class="far fa-calendar-alt"></i> {{$item->created_at}}
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <i class="fas fa-user"></i> Oleh Admin
                                </div>
                            </div>
                        </div>
                        <h5 style="height: 50px;">{{substr($item->judul, 0, 70)}}{{strlen($item->judul) >= 70 ? '.....' : ''}}</h5>
                        <div class="blog-btn"><a href="{{route('client.edukasi.detail', $item->uuid)}}">Selengkapnya<i
                                    class="fas fa-chevron-right"></i></a></div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12">
                <p class="text-center text-danger">Edukasi tidak ditemukan</p>
            </div>
            @endforelse

        </div>
    </div>
</section>
<!-- blog-area-end -->


<!-- dokter-area -->
<section id="blog" class="blog-area  p-relative pt-100 pb-90 fix"
    style="background-image:url(img/an-bg/an-bg10.png); background-size: contain;background-repeat: no-repeat;background-position: center center;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-8 col-lg-10">
                <div class="section-title text-center mb-80">
                    <span> DOKTER TERBAIK KAMI </span>
                    <h2>Konsultasikan Diri Anda Sekarang</h2>
                    <p>Kami memberikan dokter terbaik yang bisa membantu anda konsultasi tentang Hipogonadisme.</p>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            @foreach ($data['dokter'] as $item)
            <div class="col-xl-4">
                <div class="single-post mb-30">
                    <div style="margin-bottom: -50px; z-index: 10;">
                        <img style=" object-fit: cover;
                        width: 100%;
                        height: 300px;
                        border-radius: 10px;" src="{{asset($item->foto)}}" alt="img">
                    </div>
                    <div class="blog-content text-center ">
                        <h5 style="height: 50px;">{{substr($item->nama, 0, 100)}}{{strlen($item->nama) >= 100 ? '.....' : ''}}</h5>
                        <div class="slider-btn mt-3">
                            <a href="https://wa.me/{{$item->no_hp}}" target="_blank" class="btn ss-btn"
                                data-animation="fadeInRight" data-delay=".8s">Konsultasi
                                <i class="fa-brands fa-whatsapp"></i></a>
                        </div>
                        <div data-bs-toggle="modal" data-bs-target="#detailModal-{{$item->uuid}}">
                            <p class="mt-15 cursor-pointer">Lihat Detail</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Detail Modal -->
            <div class="modal fade mt-5 pt-3" id="detailModal-{{$item->uuid}}" tabindex="-1"
                aria-labelledby="detailModalLabel-{{$item->uuid}}" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="detailModalLabel-{{$item->uuid}}">{{$item->nama}}</h5>
                        </div>
                        <div class="modal-body d-flex detail-dokter" style="height: 400px; overflow-x: auto;">
                            <img class="w-50 mr-3" height="300" src="{{asset($item->foto)}}" alt="Foto Dokter">
                            <div class="w-100">
                                <p class="mb-0">Kota : </p>
                                @foreach ($item->kota as $item2)
                                {{$loop->iteration}}. {{$item2->nama}} <br />
                                @endforeach
                                <hr class="my-3">
                                <p class="mb-0">Lokasi Praktek : </p>
                                @foreach ($item->lokasi as $item2)
                                {{$loop->iteration}}. {{$item2->lokasi}} 
                                @if ($item2->link)
                                <a href="{{$item2->link}}" target="_blank" class="ml-2"><i
                                    class="fa-sharp fa-solid fa-map-location-dot"></i></a> 
                                @endif
                                <br />
                                @endforeach
                                <hr class="my-3">
                                <p>Lama Praktek : {{$item->lama_praktek}} Tahun</p>
                                <hr class="my-3">
                                <p>No. HP : {{$item->no_hp}}</p>
                                <div class="slider-btn mt-10 ">
                                    <a href="https://wa.me/{{$item->no_hp}}" target="_blank" class="btn ss-btn"
                                        data-animation="fadeInRight" data-delay=".8s">Konsultasi
                                        <i class="fa-brands fa-whatsapp"></i></a>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary p-3" data-bs-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach

            <div class="col-xl-12" style="margin: auto !important;">
                <div class="section-title text-center mb-80">
                    <a class="btn ss-btn mx-auto" href="{{route('client.dokter')}}">Semua Dokter
                        <i class="fas fa-chevron-right"></i></a>
                </div>
                <div style="margin: auto !important;">
                </div>
            </div>
        </div>

    </div>
</section>
<!-- dokter-area-end -->

@endsection

@push('scripts')
@if (session('success'))
<script>
    Swal.fire({
        title: '{{session("success")}}',
        icon: 'success',
        confirmButtonText: 'Tutup'
    })

</script>
@endif


<script>
    $(document).ready(function () {
        $(".owl-carousel").owlCarousel({
            items: 3,
            loop: true,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
        });

        $(".owl-carousel").trigger('play.owl.autoplay', [3000])
    });

</script>
@endpush