@extends('layouts.main.app')

@section('content')
    {{-- Section 1 --}}
    <section class="mt-5 bg-gray">
        <div id="template-mo-zay-hero-carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#template-mo-zay-hero-carousel" data-slide-to="0" class="active" aria-current="true"></li>
                <li data-target="#template-mo-zay-hero-carousel" data-slide-to="1">
                </li>
                <li data-target="#template-mo-zay-hero-carousel" data-slide-to="2" class=""></li>
            </ol>
            <div class="carousel-inner p-5">
                <div class="carousel-item active carousel-item-start" id="carousel-item-1">
                    <div class="container">
                        <div class="row p-5">
                            <div class="mx-auto col-md-8 col-lg-6 order-lg-first d-none d-md-block">
                                <img class="img-fluid" src="{{ asset('img/main/section-1/1.svg') }}" alt="painting">
                            </div>

                            <div class="col-lg-6 mb-0 d-flex align-items-center">
                                <div class="text-align-left align-self-center">
                                    <h1 class="display-3 text-capitalize text-white">Davao’s Premier Place for Men’s
                                        Grooming!</h1>
                                    <p class='text-white'> Welcome to Perd's Barbershop, We are crafting looks that turn
                                        heads.</p>
                                    <a class="btn btn-success" href="/">Explore</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item carousel-item-next carousel-item-start" id="carousel-item-2">
                    <div class="container">
                        <div class="row p-5">
                            <div class="mx-auto col-md-8 col-lg-6 order-lg-last d-none d-md-block">
                                <img class="img-fluid" src="{{ asset('img/main/section-1/2.svg') }}" alt="print">
                            </div>
                            <div class="col-lg-6 mb-0 d-flex align-items-center">
                                <div class="text-align-left align-self-center">
                                    <h1 class="display-3 text-capitalize text-white">Grooming Greatness, Your Way!
                                    </h1>
                                    <p class='text-white'>Elevating your look, one cut at a time in Davao.</p>
                                    <a class="btn btn-success" href="/">Explore</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item" id="carousel-item-3">
                    <div class="container">
                        <div class="row p-5">
                            <div class="mx-auto col-md-8 col-lg-6 order-lg-first d-none d-md-block">
                                <img class="img-fluid" src="{{ asset('img/main/section-1/3.svg') }}" alt="sculpture">
                            </div>

                            <div class="col-lg-6 mb-0 d-flex align-items-center">
                                <div class="text-align-left align-self-center">
                                    <h1 class="display-3 text-capitalize text-white">Go-To for Timeless Styles!</h1>
                                    <p class='text-white'>Where tradition meets modernity in every cut
                                    </p>
                                    <a class="btn btn-success" href="/">Explore</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#template-mo-zay-hero-carousel"
                role="button" data-slide="prev">
                <i class="fas fa-chevron-left"></i>
            </a>
            <a class="carousel-control-next text-decoration-none w-auto pe-3" href="#template-mo-zay-hero-carousel"
                role="button" data-slide="next">
                <i class="fas fa-chevron-right"></i>
            </a>
        </div>
    </section>
    {{-- End Section 1 --}}

    {{-- Section 2 --}}
    <section class="bg-white py-2 py-md-5">
        <div class="container">
            <div class="row text-center pt-3">
                <div class="col-lg-6 m-auto">
                    <h1 class="d-md-block  font-weight-normal"> Services Offered <i class="fas fa-clipboard ml-1"></i>
                    </h1>
                    <p>A better life starts with a beautiful haircut</p>
                </div>
            </div>
            <div class="row">
                @foreach ($services as $service)
                    <div class="col-6 col-md-4 col-lg-3 d-flex services align-self-stretch p-4">
                        <div class="media block-6 d-block text-center">
                            <div>
                                <img class="img-fluid d-block mx-auto rounded"
                                    src="{{ handleNullFeaturedPhoto($service->featured_photo) }}" width=""
                                    alt="service">
                            </div>
                            <div class="media-body p-2 mt-3">
                                <h3 class=" font-weight-normal">{{ $service->name }}</h3>
                                <h4 class="font-weight-normal text-muted">{{ truncateText($service->description) }}</h4>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        <center>
            <hr class="w-75">
        </center>
    </section>
    {{-- End Section 2 --}}



    {{-- Section 3 --}}
    <section class="bg-white" id="contact">
        <div class="container">
            <div class="row">
                <div class="col-md-6 pr-md-5 aside-stretch py-5 choose d-none d-md-block">
                    <img class="img-fluid" src="{{ asset('img/main/section-3/contact.svg') }}" alt="contact">
                </div>
                <div class="col-md-6 py-0 py-md-5 pl-md-5">
                    <h1 class="mb-2 font-weight-normal text-primary">Get in Touch</h1>
                    <p>
                        Need help? Our team got you covered on your concerns or questions in mind.
                    </p>
                    <br>
                    <form action="#" class="ftco-animate fadeInUp ftco-animated">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Full Name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Email">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Phone">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Website">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <grammarly-extension data-grammarly-shadow-root="true"
                                    style="position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT">
                                </grammarly-extension>
                                <grammarly-extension data-grammarly-shadow-root="true"
                                    style="mix-blend-mode: darken; position: absolute; top: 0px; left: 0px; pointer-events: none;"
                                    class="cGcvT"></grammarly-extension>
                                <div class="form-group">
                                    <textarea name="" id="" cols="30" rows="7" class="form-control" placeholder="Message"
                                        spellcheck="false"></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <button type="button" class="btn btn-primary py-3 px-5">Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    {{-- Section 3 --}}

    {{-- Section 4 --}}
    <section>
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3959.1046852534014!2d125.62247149999999!3d7.1138659!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x32f96c6859c3fc1d%3A0x76e125a53dd94783!2sPerd&#39;S!5e0!3m2!1sen!2sph!4v1720071531712!5m2!1sen!2sph"
            width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"></iframe>
    </section>
    {{-- Section 4 --}}
@endsection