@extends('site.layouts.app')

@section('title', 'Home')

@section('meta_description', 'This is the description for SEO')
@section('meta_keywords', 'SEO, Keywords, Web Development')
@section('meta_author', 'John Doe')

@section('content')
    {{-- home slider start --}}

    <section class="page11">
        <div class="container">
            <div class="row py-70">
                <div class="offset-xl-1 col-lg-6 col-xl-5 page11-left pt-xl-5">
                    <h1 class="col-xl-10 mb-xl-4">{{ $homeSliders->title }}</h1>
                    <div class="owl-carousel owl-theme banner-slider">
                        @foreach($carousals as $carousal)
                            <div class="item">
                                <p style="font-size:25px;
                                color:#00AC6B;
                                font-weight:bold;" >{!! str_replace('$price', "<b style='font-size:25px;color:red;'>$".$config->value." (INR ".$config->inr_value.")</b>", $carousal->title) !!}</p>
                            </div>
                        @endforeach
                        <div class="item">
                            <p style="font-size:25px;
                            color:#00AC6B;
                            font-weight:bold;">Get started with AWS...</p>
                        </div>
                        <!-- <div class="item">
                            <p style="font-size:25px;
                            color:#00AC6B;
                            font-weight:bold;" >Videos and articles on AWS - helpful for AWS real time projects</p>
                        </div>
                        <div class="item">
                            <p style="font-size:25px;
                            color:#00AC6B;
                            font-weight:bold;">Videos and articles on AWS - from baby steps to advanced level</p>
                        </div>
                        <div class="item">
                            <p style="font-size:25px;
                            color:#00AC6B;
                            font-weight:bold;" >Interview FAQs on AWS - questions and answers</p>
                        </div>
                        <div class="item">
                            <p style="font-size:25px;
                            color:#00AC6B;
                            font-weight:bold;" >Blogs,articles,and global trainings on AWS</p>
                        </div>
                        <div class="item">
                            <p style="font-size:25px;
                            color:#00AC6B;
                            font-weight:bold;">We keep upgrading the contents every day.</p>
                        </div>
                        <div class="item">
                            <p style="font-size:25px;
                            color:#00AC6B;
                            font-weight:bold;" >Price - only <b style="font-size: 25px;
    color: red;">$125</b> and enjoy the services free for lifetime!!!</p>
                        </div> -->
                    </div>
                    <div class="page11-btn">
                        <a href="{{ route('login') }}">Go to Dashboard <i class="fa fa-arrow-right"
                                style="vertical-align: text-bottom;color:#ff9b26;"></i></a>
                    </div>
                </div>
                <div class="col-lg-6 col-xl-5 pt-4 pt-lg-0 page11-right ">
                    <img class="img-fluid" src="{{ asset($homeSliders->home_slide) }}" alt="{{ $homeSliders->title }}">
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- home slider end --}}




    <!-- about-area -->
    <section class="about">
        <div class="container">
            <div class="row py-70  justify-content-between about-inner">

                <div class="col-lg-5 order-2 order-lg-1 pt-4 pt-lg-0 about-lft ">
                    <img class="img-fluid" src="{{ asset('site/assets/images/Inrotaction.png') }}" alt="about-us">
                </div>
                <div class="col-lg-7 order-1 order-lg-2 about-right">
                    <h5>Introduction</h5>
                    <p>Cloud computing has changed the way organizations host small to high-scale applications. The Internet has been represented by the symbol cloud for years. In any meetings or presentations, the cloud has always been the symbol of the internet. Cloud computing is the delivery of computing as a service rather than a product. Be it a network, storage, server, or platform, everything is delivered as a service like we use electricity in our homes. In cloud computing, IT-related capabilities are provided to users as a material service over the network. It means all IT-related functionality can be used just using a computer and an internet connection.</p>
                    <div class="page11-btn">
                        <a href="{{ route('home.about') }}">Read More <i class="fa fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about cloud-computing">
        <div class="container">
            <div class="row justify-content-between about-inner py-0">
                <div class="col-lg-7 about-right">
                    <h5>Why Cloud Computing</h5>
                    <ul class="bullet mb-lg-0 ps-3" style="font-size: 17px;
                    font-weight: 500;
                    margin-bottom: 25px;
                    color: #81858e;
                }">
                        <li>The approach of cloud computing helps us to attain such service over the internet.</li>
                        <li>There are many services provided by public cloud providers over the internet:
                            <ul>
                                <br>
                                <li><a href="https://www.techtarget.com/searchdatamanagement/definition/database-as-a-service-DBaaS" target="_blank">Database as a service</a></li>
                                <li><a href="https://backendless.com/what-is-api-as-a-service/">API as a service</a target="_blank"></li>
                                <li><a href="https://www.forcepoint.com/cyber-edu/security-as-a-service-secaas" target="_blank">Security as a service</a></li>
                                <li><a href="https://www.techtarget.com/searchcustomerexperience/definition/CRM-customer-relationship-management" target="_blank">CRM as a service</a></li>
                                <li><a href="https://www.techtarget.com/searchvirtualdesktop/definition/desktop-as-a-service-DaaS" target="_blank">Desktop as a service</a></li>
                            </ul>
                        </li>
                        <li>Every cloud service comes under the following categories:
                            <ul>
                                <br>
                                <li><a href="https://www.techtarget.com/searchcloudcomputing/definition/Infrastructure-as-a-Service-IaaS" target="_blank">IaaS (Infrastructure as a service)</a> </li>
                                <li><a href="https://www.techtarget.com/searchcloudcomputing/definition/Platform-as-a-Service-PaaS" target="_blank">PaaS (platform as a service)</a> </li>
                                <li><a href="https://www.techtarget.com/searchcloudcomputing/definition/Software-as-a-Service" target="_blank">SaaS (Software as service)</a> </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-5 about-lft align-self-center">
                    <img class="img-fluid" src="{{ asset('site/assets/images/image-cloud.png') }}" alt="about-us">
                </div>
            </div>
        </div>
    </section>

    <!-- about-area-end -->

    <!-- blog-area -->
    @if (count($blogs) > 0)
        <section class="blogs">
            <div class="container">
                <div class="row py-70 blogs-inner">
                    <div class="col-lg-4 blog1 pt-4">
                        {{-- <h5 class="mb-4">OUR LATEST<br></h5> --}}
                        <h5 class="mb-4">LATEST TRAININGS</h5>
                        {{-- <p>Unlocking the Power of AWS: Dive into our latest blogs for expert insights on Cloud Computing excellence.</p> --}}
                        <div class="blog-btn pb-4 pb-lg-0">
                            <a href="{{ route('home.blogs') }}">Read More <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="owl-carousel owl-theme slider3">
                            @foreach ($blogs as $item)
                                <div class="item">
                                    <a href="{{ route('blog.details', $item->slug) }}">
                                        <img class="img-fluid" src="{{ asset($item->image) }}" width="280"
                                            height="245" alt="{{ $item->title }}">
                                    </a>
                                    <div class="blog-links">
                                        <a href="{{ route('blog.details', $item->slug) }}"
                                            class="blog-link1">{{ $item->title }}</a>
                                        <a href="{{ route('blog.details', $item->slug) }}" class=""><i
                                                class="fa fa-arrow-right" style="color:#FF9B26;font-size: 19px;"></i></a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif



    <!-- blog-area-end -->

    <!-- testimonial-area -->

    

    {{-- @if (count($testimonials) > 0)
    <section class="testimonials">
        <div class="container">
            <h4 class="text-center testi-heading">TESTIMONIALS</h4>
            <div class="owl-carousel owl-theme slider2">
                @foreach ($testimonials as $key => $testimonial)
                <div class="item">
                    <div class="testi-box1">
                        <div class="tesi-box1-inner d-flex">
                            <div class="tesi-image">
                                <img class="img-fluid" src="{{ asset($testimonial->image) }}" alt="{{ $testimonial->title }}">
                            </div>
                            <div class="testi-name">
                                <p class="name">{{ $testimonial->name }}</p>
                                <p class="work">{{ $testimonial->title }}</p>
                            </div>
                        </div>
                        <div class="testi-content2">
                            <p class="testi-content">{!! $testimonial->description !!}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif --}}


    <!-- testimonial-area-end -->

    <!-- faq-area -->

    <section class="faq">
        <div class=" container">
            <h2 class="faq-heading" style="margin-top:0px;
            margin-bottom:0px;">FREQUENTLY ASKED QUESTIONS</h2>
            <div class="accordion col-xl-10 mx-auto" id="accordionExample">
                @foreach ($faqs as $faq)
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapse{{ $faq->id }}" aria-expanded="true"
                                aria-controls="collapse{{ $faq->id }}">
                                {{ $faq->question }}
                            </button>
                        </h2>
                        <div id="collapse{{ $faq->id }}" class="accordion-collapse collapse"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                 {!! str_replace('$price', "<b>$".$config->value." (INR ".$config->inr_value.")</b>", $faq->question_answer) !!}
                            </div>
                        </div>
                    </div>
                @endforeach
                <div class="fq-btn text-center mt-5">
                    <a href="{{ route('home.faq') }}">View More</a>
                </div>
            </div>
        </div>
    </section>

    <!-- faq-area-end -->

    <!-- contact-us area -->

    <section class="contact-us">
        <div class="container">
            <div class="row py-50 mb-5 contact-us-inner">
                <div class="col-lg-6 contact-lft  px-2 d-flex justify-content-end">
                    <img class="img-fluid" src="{{ asset('site/assets/images/Contact us (1).png') }}" alt="contact-us">
                </div>
                <div class="col-lg-6">
                    <div class="contact-form">
                        <p class="touch">Any queries? <strong>Ask me</strong></p>
                        <br>
                        {{-- <p class="intrest">Intrested to Explore More? Get in touch with our Experts and transpire<br>a
                            complete Digital Marketing Startegy for You</p> --}}

                        <form method="post" action="{{ route('store.message') }}" class="page11-form" id="myForm">

                            @csrf
                            <div class="form-group">
                                <input type="text" id="name" name="name" @if(Auth::check()) readonly @endif class="form-control"
                                    placeholder="Full Name*" value="{{Auth::user()->name ?? ""}}" required="">
                            </div>
                            <div class="form-group">
                                <input type="email" id="email" name="email"  @if(Auth::check()) readonly @endif class="form-control "
                                    placeholder="Email Id*" value="{{Auth::user()->email ?? ""}}" required="">
                            </div>
                            <div class="form-group">
                                <input type="number" id="phone" name="phone"  @if(Auth::check()) readonly @endif class="form-control "
                                    placeholder="Phone Number*" value="{{Auth::user()->mobile_number ?? ""}}" required="">
                            </div>
                            @if(Auth::check())
                                <div class="form-group">
                                    <input type="text" id="Country"  @if(Auth::check()) readonly @endif class="form-control "
                                        value="{{Auth::user()->country->name ?? ""}}">
                                </div>
                            @endif
                             <div class="form-group">
                                <select class="form-control" id="enquiry_for" name="enquiry_for" required="">
                                    <option value="">Select Enquiry</option>
                                    <option value="1">Feedback</option>
                                    <option value="2">Suggestion</option>
                                    <option value="3">Technical enquiry</option>
                                    <option value="4">Payment enquiry</option>
                                    <option value="5">Refund enquiry</option>
                                    <option value="6">Do not disturb enquiry</option>
                                    <option value="7">Resend emails enquiry</option>
                                    <option value="8">General enquiry</option>
                                </select>
                              </div>
                            <div class="form-group">
                                <textarea id="messgae" name="message" row="5" placeholder="Message*">
                  </textarea>
                            </div>
                            {{-- <p class="click-text"> By Clicking on send,you agree to our Terms of use and Privacy Policy</p> --}}
                            <button type="submit">Submit <i class="fa fa-arrow-right"></i></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script type="text/javascript">
        $(document).ready(function() {

            $('#myForm').validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 3,
                    },
                    phone: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 15,
                    },
                    email: {
                        required: true,
                        email: true,
                    },
                    enquiry_for: {
                        required: true,
                    },

                    message: {
                        required: true,
                    },
                },
                messages: {
                    name: {
                        required: 'Please Enter Your Name',
                        minlength: 'Name should be at least 3 characters',
                    },
                    phone: {
                        required: 'Please Enter Your Phone Number',
                        digits: 'Phone number should contain only digits',
                        minlength: 'Phone number should be exactly 10 digits',
                        maxlength: 'Phone number should be exactly 15 digits',
                    },

                    email: {
                        required: 'Please Enter Your Email',
                        email: 'Please enter a valid email address',
                    },
                    enquiry_for:{
                        required: 'Please Enter Enquiry',
                    },
                    message: {
                        required: 'Please Enter a Message',
                    },

                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                },
            });
        });
    </script>



    <!-- contact-us area-end -->
@endsection