@extends('web.template.master')

@section('content')

<!-- HERO -->
<section class="hero1 d-flex flex-column justify-content-center align-items-center" id="home">
    <div class="bg-overlay"></div>
    <div class="container">
        <div class="row ">
            <div class="col-lg-6">
                <div class="col-lg-8 col-md-10 mx-auto col-12">
                    <div class="hero-text mt-5 text-center">
                        <br><br><br>

                        <h6 data-aos="fade-up" data-aos-delay="300">We professionally do</h6>
                        <h1 class="text-white" data-aos="fade-up" data-aos-delay="500">INTERIOR DETAILING</h1>
                        <!-- <a href="#feature" class="btn custom-btn mt-3" data-aos="fade-up" data-aos-delay="600">Get started</a> -->
                        <a href="#about" class="btn custom-btn bordered mt-3" data-aos="fade-up" data-aos-delay="700">learn more</a>

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

            <div class="col-lg-6">
                <div class="col-lg-8 col-md-10 mx-auto col-12">
                    <div class="hero-text mt-5 text-center">
                        <br><br><br>

                        <h6 data-aos="fade-up" data-aos-delay="300">We professionally do</h6>
                        <h1 class="text-white" data-aos="fade-up" data-aos-delay="500">EKSTERIOR DETAILING</h1>
                        <!-- <a href="#feature" class="btn custom-btn mt-3" data-aos="fade-up" data-aos-delay="600">Get started</a> -->
                        <a href="#about" class="btn custom-btn bordered mt-3" data-aos="fade-up" data-aos-delay="700">learn more</a>

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

<!-- FETURED -->
<section class="feature" id="feature">
    <div class="container">
        <div class="row">

            <div class="d-flex flex-column justify-content-center ml-lg-auto mr-lg-5 col-lg-5 col-md-6 col-12">
                <h2 class="mb-3 text-white" data-aos="fade-up">INGIN PESAN LAYANAN KAMI ?</h2>

                <!-- <h6 class="mb-4 text-white" data-aos="fade-up">Your membership is up to 2 months FREE ($62.50 per month)</h6> -->

                <!-- <p data-aos="fade-up" data-aos-delay="200">Gymso is free HTML template by <a rel="nofollow" href="https://www.tooplate.com" target="_parent">Tooplate</a> for your commercial website. Bootstrap v4.2.1 Layout. Feel free to use it.</p> -->

                <p data-aos="fade-up" data-aos-delay="200">
                    Dapatkan harga khusus setiap Senin s/d Kamis, dan kemudahan pembayaran layanan di tempat ataupun layan kunjung.
                    Nikmati Cicilan BCA 0% hingga 6 bulan dan pembayaran menggunakan Fintech lainnya.
                </p>

                <a href="#" class="btn custom-btn bg-color mt-3" data-aos="fade-up" data-aos-delay="300" data-toggle="modal" data-target="#membershipForm">Book Now</a>
            </div>

            <div class="mr-lg-auto mt-3 col-lg-4 col-md-6 col-12">
                <div class="row about-working-hours">
                    <div class="col-lg-6">
                        <h2 class="mb-4 text-white" data-aos="fade-up" data-aos-delay="500">Working Hours</h2>

                        @foreach($operasional1s as $index => $operasional1)
                        @if($operasional1->type === 'Closed')
                        <strong class="mt-3 d-block" data-aos="fade-up" data-aos-delay="700">{{$operasional1->day}}</strong>
                        <p data-aos="fade-up" data-aos-delay="800">{{$operasional1->type}}</p>
                        @else
                        <strong class="mt-3 d-block" data-aos="fade-up" data-aos-delay="700">{{$operasional1->day}}</strong>
                        <p data-aos="fade-up" data-aos-delay="800">{{date('H:i', strtotime($operasional1->open))}} - {{date('H:i', strtotime($operasional1->close))}}</p>
                        @endif
                        @endforeach

                        <!-- <strong class="d-block" data-aos="fade-up" data-aos-delay="600">Sunday : Closed</strong>
                            <strong class="mt-3 d-block" data-aos="fade-up" data-aos-delay="700">Monday - Friday</strong>
                            <p data-aos="fade-up" data-aos-delay="800">7:00 AM - 10:00 PM</p>
                            <strong class="mt-3 d-block" data-aos="fade-up" data-aos-delay="700">Saturday</strong>
                            <p data-aos="fade-up" data-aos-delay="800">6:00 AM - 4:00 PM</p> -->
                    </div>

                    <div class="col-lg-6" style="margin-top: 35px;">
                        <!-- <h2 class="mb-4 text-white" data-aos="fade-up" data-aos-delay="500"></h2> -->

                        @foreach($operasional2s as $index => $operasional2)
                        @if($operasional2->type === 'Closed')
                        <strong class="mt-3 d-block" data-aos="fade-up" data-aos-delay="700">{{$operasional2->day}}</strong>
                        <p data-aos="fade-up" data-aos-delay="800">{{$operasional2->type}}</p>
                        @else
                        <strong class="mt-3 d-block" data-aos="fade-up" data-aos-delay="700">{{$operasional2->day}}</strong>
                        <p data-aos="fade-up" data-aos-delay="800">{{date('H:i', strtotime($operasional2->open))}} - {{date('H:i', strtotime($operasional2->close))}}</p>
                        @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

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

<!-- ABOUT -->
<section class="about section" id="about">
    <div class="container">
        <div class="row">
            <div class="mt-lg-2 mb-lg-0 mb-4 col-lg-5 col-md-10 mx-auto col-12">
                <h3 class="mb-4" data-aos="fade-up" data-aos-delay="300"><i class="fa fa-street-view"></i> KENALI KAMI</h3>
                <p data-aos="fade-up" data-aos-delay="350">
                    Salon Mobil Panggilan dengan metode terbaik hadir di Pamulang. untuk layanan cakupan Tangerang selatan dan sekitarnya.
                    Dengan Metode dan SOP kerja yang mengacu kepada Asosiasi Detailer Internasional dan tersertifikasi oleh IDA - Amerika.
                </p>

                <h3 class="mb-4" data-aos="fade-up" data-aos-delay="400"><i class="fa fa-gear"></i> LAYANAN KAMI</h3>
                <h5 class="mb-4" data-aos="fade-up" data-aos-delay="450">Exterior Car Detailing</h5>
                <p data-aos="fade-up" data-aos-delay="500">
                    Regular Exterior Polish ; finished wax carnauba untuk mengembalikan tampilan kendaraan menjadi seperti baru
                    Nano Pain Pro ; Finished dengan wax premium Polymer untuk tampilan kendaraan kilap lebih lama
                    Ceramic Coating ; finished dengan Silica 9H untuk kilap sepanjang masa
                </p>

                <h5 class="mb-4" data-aos="fade-up" data-aos-delay="550">Interior Car Cleaning</h5>
                <p data-aos="fade-up" data-aos-delay="600">
                    Quick Interior Cleaning ; Vacum dengan lebih detil serta pengkilapan atas interior kendaraan
                    General Interior Cleaning ; Pembersihan interior keseluruhan agar interior tampil seperti baru
                    Strip Off Interior Cleaning : Pembersihan interior detail dengan bongkar jok dan karpet untuk kebersihan menyeluruh
                </p>

                <h5 class="mb-4" data-aos="fade-up" data-aos-delay="650">Motor Bike </h5>
                <p data-aos="fade-up" data-aos-delay="700">
                    Salon motor ; untuk pembersihan detail dan pengkilapan warna motor terlihat seperti baru
                    Ceramic Coating ; untuk tampilan bersih dan kilap permanen lebih lama pada motor
                </p>

                <h3 class="mb-4" data-aos="fade-up" data-aos-delay="750"><i class="fa fa-star"></i> NILAI KAMI</h3>
                <h5 class="mb-4" data-aos="fade-up" data-aos-delay="800">Feel Like New</h5>
                <p data-aos="fade-up" data-aos-delay="850">
                    Kami hadir untuk memberi pengalaman baru dalam dunia Salon Mobil Panggilan dengan harga yang terjangkau namun tetap menciptakan kualitas terbaik
                </p>


            </div>

            <div class="ml-lg-auto col-lg-6 col-md-6 col-12">
                <div class="team-thumb" data-aos="fade-up" data-aos-delay="700">
                    <img src="{{asset('/images/web_banner1.jpg')}}" class="img-fluid" alt="Trainer">

                    <div class="team-info d-flex flex-column">
                        <span>Untuk Kualitas Terbaik kami hanya menggunakan material yang diakui aman untuk kendaraan anda</span>
                    </div>
                </div>
                <br>
                <div class="team-thumb" data-aos="fade-up" data-aos-delay="750">
                    <img src="{{asset('/images/web_banner2.jpg')}}" class="img-fluid" alt="Trainer">

                    <div class="team-info d-flex flex-column">
                        <span>Untuk Kualitas Terbaik kami hanya menggunakan material yang diakui aman untuk kendaraan anda</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- WORKRESULT -->
<section class="class section" id="class">
    <div class="container">
        <div class="row">

            <div class="col-lg-12 col-12 text-center mb-5">

                <h3 data-aos="fade-up">Hasil Kerja Kami</h3>
                <h6 data-aos="fade-up" data-aos-delay="200">Follow Instagram / Facebook Page untuk update pekerjaan kami</h6>

            </div>

            @foreach($workresults as $index => $workresult)
            <div class="col-lg-3 col-md-6 col-12 text-center" data-aos="fade-up" data-aos-delay="{{($workresult->delay+50)}}" style="padding-bottom: 20px;">
                <a data-toggle="modal" data-target="#img{{($workresult->id)}}">

                    <div class="class-thumb">

                        <img src="{{url('/images/image').'/'.$workresult->image}}" class="img-fluid" alt="Class" style="min-width: 250px;min-height: 200px;max-height: 200px;">

                        <div class="class-info">
                            <span><strong>{{($workresult->title)}}</strong></span>
                        </div>
                    </div>
                </a>
            </div>

            <!-- modal -->
            <div class="modal fade" id="img{{($workresult->id)}}">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body" style="background-image:url('/images/image/{{$workresult->image}}');background-size: cover;background-size: 100% 100%;background-repeat: no-repeat;height:400px;">

                        </div>
                        <div class="text-center" style="text-align: justify;">
                            <p>
                                {{($workresult->description)}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            <div class="col-lg-12 col-12 text-center mb-5" data-aos="fade-up" data-aos-delay="450" style="padding-top: 60px;">
                <a type="button" href="{{url('/workresult/all')}}" class="btn btn-primary">Lihat Selengkapnya</a>
            </div>
        </div>
    </div>
</section>


<!-- TESTIMONI -->
<section class="schedule section" id="schedule">
    <div class="container">
        <div class="row">

            <div class="col-lg-12 col-12 text-center mb-5">

                <h3 data-aos="fade-up">TESTIMONIALS</h3>
                <h6 data-aos="fade-up" data-aos-delay="200">What Clients Say</h6>

            </div>

            @foreach($testimonis as $index => $testimoni)
            <div class="col-lg-3 col-md-6 col-12 text-center" data-aos="fade-up" data-aos-delay="{{($testimoni->delay+50)}}" style="padding-bottom: 20px;">

                <a data-toggle="modal" data-target="#testimoni{{($testimoni->id)}}">
                    <div class="team-thumb">
                        <img src="{{url('/images/image').'/'.$testimoni->image}}" class="img-fluid" style="min-height: 250px;" alt="Trainer">

                        <div class="team-info d-flex flex-column">
                            <span>{{$testimoni->title}}</span>
                        </div>
                    </div>
                </a>
            </div>

            <!-- modal -->
            <div class="modal fade" id="testimoni{{($testimoni->id)}}">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body" style="background-image:url('/images/image/{{$testimoni->image}}');background-size: cover;background-size: 100% 100%;background-repeat: no-repeat;height:400px;">

                        </div>
                        <div class="text-center" style="text-align: justify;">
                            <p>
                                {{($testimoni->description)}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            <div class="col-lg-12 col-12 text-center mb-5" data-aos="fade-up" data-aos-delay="650" style="padding-top: 60px;">
                <a type="button" href="{{url('/testimoni/all')}}" class="btn btn-primary">Lihat Selengkapnya</a>
            </div>
        </div>
    </div>
</section>

<!-- GALLERY -->
<section class="gallery section" id="gallery">
    <div class="container">
        <div class="row">

            <div class="col-lg-12 col-12 text-center mb-5">

                <h3 data-aos="fade-up">Gallery</h3>
                <!-- <h6 data-aos="fade-up" data-aos-delay="200">Follow Instagram / Facebook Page untuk update pekerjaan kami</h6> -->

            </div>

            @foreach($galleries as $index => $gallery)
            <div class="col-lg-3 col-md-6 col-12 text-center" data-aos="fade-up" data-aos-delay="{{($gallery->delay+50)}}" style="padding-bottom: 20px;">
                <a data-toggle="modal" data-target="#gallery{{($gallery->id)}}">

                    <div class="class-thumb">

                        <img src="{{url('/images/image').'/'.$gallery->image}}" class="img-fluid" alt="Class" style="min-height: 200px;max-height: 200px;">

                        <!-- <div class="class-info">
                                <span><strong>{{($gallery->title)}}</strong></span>
                            </div> -->
                    </div>
                </a>
            </div>

            <!-- modal -->
            <div class="modal fade" id="gallery{{($gallery->id)}}">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body" style="background-image:url('/images/image/{{$gallery->image}}');background-size: cover;background-size: 100% 100%;background-repeat: no-repeat;height:400px;">

                        </div>
                        <div class="text-center" style="text-align: justify;">
                            <p>
                                {{($gallery->description)}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            <div class="col-lg-12 col-12 text-center mb-5" data-aos="fade-up" data-aos-delay="800" style="padding-top: 60px;">
                <a type="button" href="{{url('/gallery/all')}}" class="btn btn-primary">Lihat Selengkapnya</a>
            </div>
        </div>
    </div>
</section>

<!-- BLOG -->
<section class="section" id="schedule">
    <div class="container">
        <div class="row">

            <div class="col-lg-12 col-12 text-center mb-5">

                <h3 data-aos="fade-up">Our Blog</h3>
                <h6 data-aos="fade-up" data-aos-delay="200">Latest Articles</h6>

            </div>

            @foreach($posts as $index => $post)
            <div class="col-lg-4 col-md-6 col-12 text-center" data-aos="fade-up" data-aos-delay="{{($post->delay+50)}}" style="padding-bottom: 20px;">
                <div class="blog-box">
                    <img class="img-responsive img-fluid" src="{{url('/images/image').'/'.$post->image}}" style="min-height: 250px;">
                    <p class="blog-date">Interior Design</p>
                    <div class="blog-box-content">
                        <a class="text-hover" href="#">{{$post->title}}</a>
                    </div>
                    <div class="blog-box-footer"></div>
                </div>
            </div>
            @endforeach
            <div class="col-lg-12 col-12 text-center mb-5" data-aos="fade-up" data-aos-delay="600" style="padding-top: 50px;">
                <a type="button" href="{{url('/testimoni/all')}}" class="btn btn-primary">Lihat Selengkapnya</a>
            </div>
        </div>
    </div>
</section>


<!-- CONTACT -->
<section class="contact section" id="contact">
    <div class="container">
        <div class="row">

            <div class="ml-auto col-lg-5 col-md-6 col-12">
                <h2 class="mb-4 pb-2" data-aos="fade-up" data-aos-delay="200">Feel free to ask anything</h2>

                <form class="contact-form webform" data-aos="fade-up" data-aos-delay="400" role="form" action="{{url('/mailbox/add')}}" method="post" enctype="multipart/form-data">
                    {{csrf_field()}}
                    <input type="text" class="form-control" name="nama" placeholder="Name">

                    <input type="email" class="form-control" name="email" placeholder="Email">

                    <textarea class="form-control" rows="5" name="catatan" placeholder="Message"></textarea>

                    <div class="g-recaptcha" data-sitekey="6LfRZiIaAAAAALgPuYJjnNLT1Uydz0BqVdfZpEHe"></div>


                    <button type="submit" class="form-control" id="submit-button" name="submit">Send Message</button>
                </form>
            </div>

            <div class="mx-auto mt-4 mt-lg-0 mt-md-0 col-lg-5 col-md-6 col-12">
                <h2 class="mb-4" data-aos="fade-up" data-aos-delay="600">Where you can <span>find us</span></h2>

                <p data-aos="fade-up" data-aos-delay="800"><i class="fa fa-map-marker mr-1"></i> Shinestly Detailing <br> Jl. Anggur IV Blok A35 No.8, Pamulang Barat, Banten 15435</p>
                <!-- How to change your own map point
	                1. Go to Google Maps
	                2. Click on your location point
	                3. Click "Share" and choose "Embed map" tab
	                4. Copy only URL and paste it within the src="" field below-->

                <div class="google-map" data-aos="fade-up" data-aos-delay="900">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3965.4550746486657!2d106.73377831449426!3d-6.335047663747267!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69ef316179b6ff%3A0x8660b47e0b9e13d7!2sShinestly%20Car%20Detailing!5e0!3m2!1sen!2sid!4v1606273703306!5m2!1sen!2sid" width="1920" height="250" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection