@extends('layout/main')

@section('content')
    <!-- Start Hero Section -->
    <div class="hero">
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide Monggopro 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                    aria-label="Slide Monggopro 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                    aria-label="Slide Monggopro 3"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
                    aria-label="Slide Monggopro 4"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
                    aria-label="Slide Monggopro 5"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5"
                    aria-label="Slide Monggopro 6"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="{{ url('images/slide-monggopro-4.png') }}" class="d-block w-100 h-slider" alt="monggopro.com">
                </div>
                <div class="carousel-item">
                    <img src="{{ url('images/slide-monggopro-1.png') }}" class="d-block w-100 h-slider" alt="monggopro.com">
                </div>
                <div class="carousel-item">
                    <img src="{{ url('images/slide-monggopro-2.png') }}" class="d-block w-100 h-slider" alt="monggopro.com">
                </div>
                <div class="carousel-item">
                    <img src="{{ url('images/slide-monggopro-3.png') }}" class="d-block w-100 h-slider" alt="monggopro.com">
                </div>
                <div class="carousel-item">
                    <img src="{{ url('images/slide-monggopro-5.png') }}" class="d-block w-100 h-slider" alt="monggopro.com">
                </div>
                <div class="carousel-item">
                    <img src="{{ url('images/slide-monggopro-6.png') }}" class="d-block w-100 h-slider" alt="monggopro.com">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
    <!-- End Hero Section -->

    <!-- Start Why Choose Us Section -->
    <div class="why-choose-section pb-0">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-lg-6">
                    <h2 class="section-title text-uppercase">Monggopro</h2>
                    <p>
                        Monggopro adalah tempat sewa / rental kamera di Yogyakarta dari
                        tahun 2016, terdiri dari Kamera DSLR, Kamera Mirrorless, Kamera Pocket,
                        Kamera Aksi, Kamera 360°, Kamera Polaroid, Lensa, Drone, Stabilizer, Audio
                        Recorder, Lighting, Tripod, dan berbagai macam Aksesoris Kamera untuk
                        kebetuhan Fotography dan Videography kalian.
                    </p>

                    <div class="row my-5">
                        <div class="col-6 col-md-6">
                            <div class="feature">
                                <div class="icon">
                                    <img src="images/truck.svg" alt="Image" class="imf-fluid">
                                </div>
                                <p>Tersedia layanan antar dan ambil khusus ke penginapan/rumah, jadi gak perlu repot lagi.
                                </p>
                            </div>
                        </div>

                        <div class="col-6 col-md-6">
                            <div class="feature">
                                <div class="icon">
                                    <img src="images/bag.svg" alt="Image" class="imf-fluid">
                                </div>
                                <p>Monggopro juga menyediakan jasa foto, video dan drone yang siap mengabadikan moment
                                    special kalian.</p>
                            </div>
                        </div>

                        <div class="col-6 col-md-6">
                            <div class="feature">
                                <div class="icon">
                                    <img src="images/support.svg" alt="Image" class="imf-fluid">
                                </div>
                                <p>Selalu akan ada promo menarik dan diskon yang bikin kamu happy! So, see you guys.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-5">
                    <div class="img-wrap">
                        <img src="{{ url('images/monggopro.png') }}" alt="Image" class="img-fluid">
                    </div>
                </div>

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

    @if (count($params) > 0)
        <!-- Start Product Section -->
        <div class="product-section pt-2">
            <div class="container">
                <div class="col-md-12">
                    <h2 class="mb-4 mt-5 section-title text-uppercase">Paling <b class="text-primary">populer</b></h2>
                </div>
                <div class="row">
                    @foreach ($params as $key => $value)
                        <div class="col-12 col-md-4 col-lg-4 mb-5 mb-md-0 mt-5">
                            <div class="product-item">
                                @if ($value->gambar && file_exists(public_path("/images/products/$value->gambar")))
                                    <img src="{{ url('images/products/' . $value->gambar) }}"
                                        class="img-fluid product-thumbnail img-product-list">
                                @else
                                    <img src="{{ url('images/not_image.png') }}"
                                        class="img-fluid product-thumbnail img-product-list">
                                @endif
                                <span class="mt-3">
                                    {!! $value->getStokText() !!}
                                </span>
                                <h3 class="product-title">{{ $value->nama }}</h3>
                                <p>Kelengkapan</p>
                                <strong>
                                    <p>{{ $value->getKelengkapan() }}</p>
                                </strong>
                                @foreach (json_decode($value->harga) as $k => $val)
                                    <p class="p-0 m-0">
                                        <strong
                                            class="product-price">{{ formatRupiah($val) . ($k ? '/' . $k : '') }}</strong>
                                    </p>
                                @endforeach
                                <p class="call mt-4">
                                <p class="mb-0">Hubungi</p>
                                <strong class="text-success">
                                    <span class="fa fa-brands fa-whatsapp"></span>
                                    <a class="text-success" href="https://wa.me/{{ env('APP_HP') }}"
                                        target="_blank">{{ formatPhoneNumber() }}</a>
                                </strong>
                                </p>
                                @if ($value->url)
                                    <span class="icon-cross">
                                        <a href="{{ $value->url }}" target="_blank"
                                            rel="noopener noreferrer">Selengkaptnya</a>
                                    </span>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        <!-- End Product Section -->
    @endif
@endsection