@extends('layouts.homepage')

@section('content')

@php
    $heroImage = $hero->background_image ? asset('storage/homepage/heroSection/' . $hero->background_image) : asset('storage/homepage/heroSection/rakopiran2.jpg');
    $aboutBackgroundImage = $about['konten']->background_image ? asset('storage/homepage/homeAbout/' . $about['konten']->background_image) : asset('storage/homepage/heroSection/rakopiran2.jpg');
    // $aboutImage = $about['konten']->image ? asset('storage/homepage/homeAbout/' . $about['konten']->image) : asset('storage/homepage/heroSection/rakopiran2.jpg');
@endphp
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center"
    style="background: url('{{ $heroImage }}') top center; background-size: cover;">
    <div class="container position-relative text-center text-lg-start" data-aos="zoom-in" data-aos-delay="100">
        <div class="row">
            <div class="col-lg-8">
                <h1>{!! $hero->title !!}</h1>
                <h2>{{ $hero->subtitle }}</h2>

                <div class="btns">
                    @if($hero->button1_text)
                    <a href="{{ $hero->button1_url }}" class="btn-menu animated fadeInUp scrollto">{{ $hero->button1_text }}</a>
                    @endif
                    @if($hero->button2_text)
                    <a href="{{ $hero->button2_url }}" class="btn-book animated fadeInUp scrollto">{{ $hero->button2_text }}</a>
                    @endif
                </div>
            </div>
            @if($hero->video_url)
                <div class="col-lg-4 d-flex align-items-center justify-content-center position-relative" data-aos="zoom-in" data-aos-delay="200">
                    <a href="{{ $hero->video_url }}" class="glightbox play-btn"></a>
                </div>
            @endif
        </div>
    </div>
</section>

<main id="main">
    <!-- ======= About Section ======= -->
    <section id="about" class="about" 
    style="background: url('{{ $aboutBackgroundImage }}') top center; background-size: cover;">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h2>{{ $about['judul']->title }}</h2>
                <p>{{ $about['judul']->subtitle }}</p>
            </div>

            <div class="row">
                <div class="col-lg-6 order-1 order-lg-2" data-aos="zoom-in" data-aos-delay="100">
                    <div class="about-img">
                        <img src="{{ asset('storage/homepage/homeAbout/' . $about['konten']->image) }}" alt="">
                    </div>
                </div>
                <div class="col-lg-6 pt-4 pt-lg-0 order-2 order-lg-1 content">
                    <h3>{{ $about['konten']->title }}</h3>
                    {!! $about['konten']->description !!}
                </div>
            </div>

        </div>
    </section><!-- End About Section -->

    <!-- ======= Why Us Section ======= -->
    <section id="why-us" class="why-us">
        <div class="container" data-aos="fade-up">

            <div class="section-title">
                <h2>{{ $whyUs['judul']->title }}</h2>
                <p>{{ $whyUs['judul']->subtitle }}</p>
            </div>

            <div class="row">
                @foreach($whyUs['konten'] as $index => $item)
                    <div class="col-lg-4">
                        <div class="box" data-aos="zoom-in" data-aos-delay="{{ 100 * ($index + 1) }}">
                            <span>{{ sprintf('%02d', $index + 1) }}</span>
                            <h4>{{ $item->title }}</h4>
                            <p>{{ $item->description }}</p>
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
    </section><!-- End Why Us Section -->

    <!-- ======= Menu Section ======= -->
    <section id="menu" class="menu section-bg">
        <div class="container" data-aos="fade-up">

            <div class="section-title">
                <h2>{{ $menu['judul']->title }}</h2>
                <p>{{ $menu['judul']->subtitle }}</p>
            </div>

            <div class="row" data-aos="fade-up" data-aos-delay="100">
                <div class="col-lg-12 d-flex justify-content-center">
                    <ul id="menu-flters">
                        <li data-filter="*" class="filter-active">All</li>
                        @foreach ($menu['konten']['category'] as $category )
                            <li data-filter=".filter-{{ strtolower($category->name) }}">{{ $category->name }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <div class="row menu-container" data-aos="fade-up" data-aos-delay="200">

                @foreach($menu['konten']['menu'] as $row)
                <div class="col-lg-6 menu-item filter-{{ strtolower($row->category->name) }}">
                    <img src="homepage/img/menu/lobster-bisque.jpg" class="menu-img" alt="">
                    <div class="menu-content">
                        <a href="#">{{ $row->name }}</a><span>{{ formatRupiah($row->price) }}</span>
                    </div>
                    <div class="menu-ingredients">
                        Lorem, deren, trataro, filede, nerada
                    </div>
                </div>
                @endforeach

            </div>

        </div>
    </section><!-- End Menu Section -->

    <!-- ======= Specials Section ======= -->
    <section id="specials" class="specials">
        <div class="container" data-aos="fade-up">

            <div class="section-title">
                <h2>{{ $special['judul']->title }}</h2>
                <p>{{ $special['judul']->subtitle }}</p>
            </div>

            <div class="row" data-aos="fade-up" data-aos-delay="100">
                <div class="col-lg-3">
                    <ul class="nav nav-tabs flex-column">
                        @foreach($special['konten'] as $index => $item)
                        <li class="nav-item">
                            <a class="nav-link {{ $index === 0 ? 'active show' : '' }}" data-bs-toggle="tab" href="#tab-{{ $index + 1 }}">{{ $item->tab_title }}</a>
                        </li>
                        @endforeach
                    </ul>
                </div>
                <div class="col-lg-9 mt-4 mt-lg-0">
                    <div class="tab-content">
                        @foreach($special['konten'] as $index => $item)
                        <div class="tab-pane {{ $index === 0 ? 'active show' : '' }}" id="tab-{{ $index + 1 }}">
                            <div class="row">
                                <div class="col-lg-8 details order-2 order-lg-1">
                                    <h3>{{ $item->title }}</h3>
                                    <p class="fst-italic">{{ $item->subtitle }}</p>
                                    <p>{{ $item->description }}</p>
                                </div>
                                <div class="col-lg-4 text-center order-1 order-lg-2">
                                    <img src="{{ asset($item->image ? 'storage/homepage/homeSpecial/' . $item->image : 'storage/image/spesial/spesial.jpg') }}" alt="" class="img-fluid">
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

        </div>
    </section><!-- End Specials Section -->

    <!-- ======= Testimonials Section ======= -->
    <section id="testimonials" class="testimonials section-bg">
        <div class="container" data-aos="fade-up">

            <div class="section-title">
                <h2>{{ $testimonial['judul']->title }}</h2>
                <p>{{ $testimonial['judul']->subtitle }}</p>
            </div>

            <div class="testimonials-slider swiper-container" data-aos="fade-up" data-aos-delay="100">
                <div class="swiper-wrapper">

                    @foreach ($testimonial['konten'] as $testimonial => $item)
                    <div class="swiper-slide">
                        <div class="testimonial-item">
                            <p>
                                <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                                {{-- lokasi bersebelahan dengan situs cagar budaya  Panggung Krapyak Kandang Menjangan.Tempat ini menyajikan berbagai varian minuman kopi dan minuman tradisional (wedangan rempah")Juga tersedia berbagai camilan roti. Halaman parkir luas dngan kapasitas 40an sepeda motor atau 7 mobil roda 4. Free wifi, stop kontak tersedia di beberapa bagian tempat ,tempat cuci tangan, toilet. Tersedia juga biji/bubuk kopi dalam kemasan dengan harga sangat terjangkau. --}}
                                {{ $item->quote }}
                                <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                            </p>
                            <img src="storage/image/foto/noprofile1.png" class="testimonial-img" alt="">
                            <h3>{{ $item->user->name }}</h3>
                            <h4>{{ $item->user->role }}</h4>
                        </div>
                    </div>
                    @endforeach <!-- End testimonial item -->
                </div>
                <div class="swiper-pagination"></div>
            </div>

        </div>
    </section><!-- End Testimonials Section -->

    <!-- ======= Gallery Section ======= -->
    <section id="gallery" class="gallery">

        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h2>Gallery</h2>
                <p>Some photos from Our RaKopiran Coffee</p>
            </div>
        </div>

        <div class="container-fluid" data-aos="fade-up" data-aos-delay="100">

            <div class="row g-0">

                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery2.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery2.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery8.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery8.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery3.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery3.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery22.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery22.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery1.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery1.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery12.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery12.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery13.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery13.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery19a.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery19a.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery9.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery9.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery10.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery10.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery17.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery17.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery23.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery23.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery15.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery15.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery16.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery16.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4">
                    <div class="gallery-item">
                        <a href="storage/image/galerry/galery21.jpg" class="gallery-lightbox" data-gall="gallery-item">
                            <img src="storage/image/galerry/galery21.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>

            </div>

        </div>
    </section><!-- End Gallery Section -->

    <!-- ======= Contact Section ======= -->
    <section id="contact" class="contact">
        <div class="container" data-aos="fade-up">

            <div class="section-title">
                <h2>Contact</h2>
                <p>Contact Us</p>
            </div>
        </div>

        <div class="container" data-aos="fade-up">
            <div class="row">
                <div class="col-lg-7 mt-lg-0">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3952.641243332833!2d110.36039989999999!3d-7.8277418999999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a572f47b213f1%3A0xed5291f9a55e7395!2zS2FmZSBSYSBLb3BpcmFuICjqpo_qpqXqprPqprrqpqvqpo_qprrqprTqpqXqprbqpqvqpqTqp4Ap!5e0!3m2!1sid!2sid!4v1720790763322!5m2!1sid!2sid" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            {{-- <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15811.126376980796!2d110.3312544!3d-7.8129293!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a57e1fc72ac09%3A0xd0b1d610e1e8ccd7!2sCoffee%20Wae!5e0!3m2!1sid!2sid!4v1718332700088!5m2!1sid!2sid" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> --}}

                <div class="col-lg-5">
                    <div class="info">
                        <div class="address">
                            <i class="bi bi-geo-alt"></i>
                            <h4>Location:</h4>
                            <p>Jl. KH. Ali Maksum No. 105, Panggung Krapyak, Panggungharjo, Kec. Sewon, Kabupaten Bantul, Daerah Istimewa Yogyakarta 55188</p>
                        </div>

                        <div class="open-hours">
                            <i class="bi bi-clock"></i>
                            <h4>Open Hours:</h4>
                            <p>
                                Sunday-Saturday:<br>
                                10:00 AM - 23:00 PM
                            </p>
                        </div>

                        <div class="email">
                            <i class="bi bi-envelope"></i>
                            <h4>Email:</h4>
                            <p>rakopiran@gmail.com</p>
                        </div>

                        <div class="phone">
                            <i class="bi bi-instagram"></i>
                            <h4>Instagram:</h4>
                            <p>ra.kopiran</p>
                        </div>

                        <div class="phone">
                            <i class="bi bi-phone"></i>
                            <h4>Call:</h4>
                            <p> (+62) 8213 5631 375</p>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </section><!-- End Contact Section -->

</main>

@endsection