@extends('layout2')
@section('title')
<title>{{ $seo_setting->seo_title }}</title>
@endsection

@section('title')
<meta name="description" content="{{ $seo_setting->seo_description }}">
@endsection
@section('frontend-content')

@if ($intro_visibility)
    <!--=========================
                BANNER START
            ==========================-->
    <section class="wsus__banner" style="background: url({{ asset($intro_section->home2_image) }});">
        <div class="wsus__banner_overlay">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12 col-md-12 col-lg-12 m-auto">
                        <div class="wsus__banner_text">
                            <!-- <h6>{{ $intro_section->title }}</h6> -->
                            <h1>{{ $intro_section->header_one }} <b>{{ $intro_section->header_two }}</b></h1>
                            <p>{{ $intro_section->description }}</p>
                            <form action="{{ route('services') }}">
                                <ul class="wsus__banner_search d-flex flex-wrap">
                                    <li>
                                        <p>{{__('user.I am looking to')}}..</p>
                                        <select name="service_area" class="select_2">
                                            <option value="">{{__('user.Location')}}</option>
                                            @foreach ($service_areas as $service_area)
                                                <option value="{{ $service_area->slug }}">{{ $service_area->name }}</option>
                                            @endforeach
                                        </select>
                                    </li>
                                    <li>
                                        <p>{{__('user.I am looking to')}}..</p>
                                        <select name="category" class="select_2">
                                            <option value="">{{__('user.Find Categories')}}</option>
                                            @foreach ($search_categories as $category)
                                                <option value="{{ $category->slug }}">{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </li>
                                    <li>
                                        <button type="submit" class="common_btn2">{{__('user.search')}}</button>
                                    </li>
                                </ul>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--=========================
                BANNER END
            ==========================-->
@endif

@if ($category_section->visibility)
    <!--=========================
                CATEGORIES START
            ==========================-->
    <section class="wsus__categories mt_90 xs_mt_60">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 m-auto">
                    <div class="wsus__section_heading text-center mb_45">
                        <h2>{{ $category_section->title }}</h2>
                        <p>{{ $category_section->description }}</p>
                    </div>
                </div>
            </div>
            <div class="row category_slider3">
                @foreach ($categories as $category)
                    <div class="col-xl-2">
                        <div class="wsus__single_categories">
                            <div class="wsus__single_cat_img">
                                <img src="{{ asset($category->icon) }}" alt="category" class="img-fluid w-100">
                            </div>
                            <!-- <span>
                                                <img src="{{ asset($category->icon) }}" alt="categories" class="img-fluid w-100">
                                            </span> -->
                            <a href="{{ route('services', ['category' => $category->slug]) }}">{{ $category->name }}</a>
                            <p>{{ $category->totalService }}+ {{__('user.Services')}}</p>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </section>
    <!--=========================
                CATEGORIES END
            ==========================-->
@endif

@if ($featured_service_section->visibility)
    <!--=========================
                FEATURED SERVICES START
            ==========================-->
    <section class="wsus__features_services mt_85 xs_mt_55 mb_100 xs_mb_70">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 m-auto">
                    <div class="wsus__section_heading text-center mb_45">
                        <h2>{{ $featured_service_section->title }}</h2>
                        <p>{{ $featured_service_section->description }}</p>
                    </div>
                </div>
            </div>
            <div class="row featured_service_slider2">
                @foreach ($featured_services as $featured_service)
                        <div class="col-xl-4">
                            <div class="wsus__single_services2">
                                <div class="wsus__services_img2">
                                    <img src="{{ asset($featured_service->image) }}" alt="service" class="img-fluid w-100">
                                    <a class="category"
                                        href="{{ route('services', ['category' => $featured_service->category->slug]) }}">{{ $featured_service->category->name }}</a>
                                </div>
                                <div class="wsus__services_text2">
                                    
                                    <ul class="d-flex justify-content-between">
                                        <li>{{ $featured_service->provider->name }}</li>

                                        @php
                                            $reviewQty = $featured_service->totalReview;
                                            $totalReview = $featured_service->averageRating;
                                            if ($reviewQty > 0) {
                                                $average = $totalReview;
                                                $intAverage = intval($average);
                                                $nextValue = $intAverage + 1;
                                                $reviewPoint = $intAverage;
                                                $halfReview = false;
                                                if ($intAverage < $average && $average < $nextValue) {
                                                    $reviewPoint = $intAverage + 0.5;
                                                    $halfReview = true;
                                                }
                                            }
                                        @endphp

                                        <li>
                                            @if ($reviewQty > 0)
                                                        <p>
                                                            @for ($i = 1; $i <= 5; $i++)
                                                                            @if ($i <= $reviewPoint)
                                                                                <i class="fas fa-star"></i>
                                                                            @elseif ($i > $reviewPoint)
                                                                                            @if ($halfReview == true)
                                                                                                            <i class="fas fa-star-half-alt"></i>
                                                                                                            @php
                                                                                                                $halfReview = false
                                                                                                            @endphp
                                                                                            @else
                                                                                                <i class="far fa-star"></i>
                                                                                            @endif
                                                                            @endif
                                                            @endfor
                                                            <span>({{ $featured_service->totalReview }})</span>
                                                        </p>
                                            @else
                                                <p>
                                                    <i class="far fa-star"></i>
                                                    <i class="far fa-star"></i>
                                                    <i class="far fa-star"></i>
                                                    <i class="far fa-star"></i>
                                                    <i class="far fa-star"></i>
                                                    <span>({{ $featured_service->totalReview }})</span>
                                                </p>
                                            @endif
                                        </li>
                                    </ul>
                                    <a class="title"
                                        href="{{ route('service', $featured_service->slug) }}">{{ $featured_service->name }}</a>
                                    <div class="single_service_footer2 d-flex flex-wrap justify-content-between align-items-center">
                                        <span>{{ $currency_icon->icon }}{{ $featured_service->price }}</span>
                                        <a class="common_btn2"
                                            href="{{ route('ready-to-booking', $featured_service->slug) }}">{{__('user.Book now')}}</a>
                                    </div>

                                </div>
                            </div>
                        </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--=========================
                FEATURED SERVICES END
            ==========================-->
@endif

@if ($contact_visbility)
    <!--=========================
                BOOKING SERVICE START
            ==========================-->
    <section class="wsus__booking_service" style=" background: rgba(239, 74, 107, 0.05);">
        <div class="wsus__booking_service_overlay">
            <div class="container">
                <div class="row">
                    <!-- <div class="col-xl-5 col-lg-6">
                                <div class="wsus__booking_service_img">
                                    <img src="{{ asset($contact_section->foreground) }}" alt="booking" class="img-fluid w-100">
                                    <div class="text">
                                        <span>{{ $contact_section->call_as_now }}</span>
                                        <h4>{{ $contact_section->phone }}</h4>
                                        <p>{{ $contact_section->available_time }}</p>
                                    </div>
                                </div>
                            </div> -->
                    <div>
                        <div class="">
                            
                            <div class="wsus__review_input mt_15 xs_mt_0">
                            <h2>{{ $contact_section->form_title }}</h2>
                            <p class="px-2">{{ $contact_section->form_description }}</p>
                                <form method="POST" action="{{ route('send-contact-message') }}" class="mt_20">
                                    @csrf
                                    <div class="flex">
                                        <div class="margin-t">

                                            <input type="text" name="name" placeholder="Enter Your Name">
                                        </div>
                                        <div class="margin-t">

                                            <input type="text" name="phone" placeholder="Enter Your Mobile No.">
                                        </div>
                                        <div class="margin-t">

                                            <input type="email" name="email" placeholder="Enter Your Email">

                                        </div>
                                        <div class="margin-t">

                                            <!-- <legend>{{__('user.subject')}}*</legend> -->
                                            <select name="category" class="input_category" >
                                                <option value="">{{__('user.Find Categories')}}</option>
                                                @foreach ($search_categories as $category)
                                                    <option value="{{ $category->slug }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>

                                        </div>


                                        @if($recaptchaSetting->status == 1)
                                            <div class="col-xl-12">
                                                <div class="wsus__single_com mt_20">
                                                    <div class="g-recaptcha" data-sitekey="{{ $recaptchaSetting->site_key }}">
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        <div class="col-xl-3 flex margin-t">
                                            <button type="submit"
                                                class="common_btn2 ">{{__('user.Send Message')}}</button>
                                        </div>

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--=========================
                BOOKING SERVICE END
            ==========================-->
@endif

@if ($coundown_visibility)
    <!--=========================
                COUNTER START
            ==========================-->
    <section class="wsus__counter wsus__counter2">
        <div class="container">
            <div class="wsus__counter2_bg">
                <div class="row">
                    @foreach ($counters as $counter)
                        <div class="col-xl-3 col-sm-6 col-lg-3">
                            <div class="wsus__single_counter">
                                <span>
                                    <img src="{{ asset($counter->icon) }}" alt="counter" class="img-fluid w-100">
                                </span>
                                <h4 class="counter">{{ $counter->number }}</h4>
                                <p>{{ $counter->title }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    <!--=========================
                COUNTER END
            ==========================-->
@endif

@if ($popular_service_section->visibility)
    <!--=========================
                POPULAR SERVICES START
            ==========================-->
    <section class="wsus__popular_services pt_250 xs_pt_220 pb_100 xs_pb_70"
        style="background: url({{ asset('frontend/images/popular_service_bg.jpg') }});">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 m-auto">
                    <div class="wsus__section_heading text-center mt_20 mb_20">
                        <h2>{{ $popular_service_section->title }}</h2>
                        <p>{{ $popular_service_section->description }}</p>
                    </div>
                </div>
            </div>
            <div class="row">

                @foreach ($popular_services as $popular_service)
                        <div class="col-xl-4 col-md-6 col-lg-4">
                            <div class="wsus__single_services2">
                                <div class="wsus__services_img2">
                                    <img src="{{ asset($popular_service->image) }}" alt="service" class="img-fluid w-100">
                                    <a class="category"
                                        href="{{ route('services', ['category' => $popular_service->category->slug]) }}">{{ $popular_service->category->name }}</a>
                                </div>
                                <div class="wsus__services_text2">
                                    <img src="{{ $popular_service->provider ? asset($popular_service->provider->image) : '' }}"
                                        alt="user" class="img-fluid">
                                    <ul class="d-flex justify-content-between">
                                        <li>{{ $popular_service->provider->name }}</li>

                                        @php
                                            $reviewQty = $popular_service->totalReview;
                                            $totalReview = $popular_service->averageRating;
                                            if ($reviewQty > 0) {
                                                $average = $totalReview;
                                                $intAverage = intval($average);
                                                $nextValue = $intAverage + 1;
                                                $reviewPoint = $intAverage;
                                                $halfReview = false;
                                                if ($intAverage < $average && $average < $nextValue) {
                                                    $reviewPoint = $intAverage + 0.5;
                                                    $halfReview = true;
                                                }
                                            }
                                        @endphp

                                        <li>
                                            @if ($reviewQty > 0)
                                                        <p>
                                                            @for ($i = 1; $i <= 5; $i++)
                                                                            @if ($i <= $reviewPoint)
                                                                                <i class="fas fa-star"></i>
                                                                            @elseif ($i > $reviewPoint)
                                                                                            @if ($halfReview == true)
                                                                                                            <i class="fas fa-star-half-alt"></i>
                                                                                                            @php
                                                                                                                $halfReview = false
                                                                                                            @endphp
                                                                                            @else
                                                                                                <i class="far fa-star"></i>
                                                                                            @endif
                                                                            @endif
                                                            @endfor
                                                            <span>({{ $popular_service->totalReview }})</span>
                                                        </p>
                                            @else
                                                <p>
                                                    <i class="far fa-star"></i>
                                                    <i class="far fa-star"></i>
                                                    <i class="far fa-star"></i>
                                                    <i class="far fa-star"></i>
                                                    <i class="far fa-star"></i>
                                                    <span>({{ $popular_service->totalReview }})</span>
                                                </p>
                                            @endif
                                        </li>
                                    </ul>
                                    <a class="title"
                                        href="{{ route('service', $popular_service->slug) }}">{{ $popular_service->name }}</a>
                                    <div class="single_service_footer2 d-flex flex-wrap justify-content-between align-items-center">
                                        <span>{{ $currency_icon->icon }}{{ $popular_service->price }}</span>
                                        <a class="common_btn2"
                                            href="{{ route('ready-to-booking', $popular_service->slug) }}">{{__('user.Book now')}}</a>
                                    </div>

                                </div>
                            </div>
                        </div>
                @endforeach
            </div>
        </div>
    </section>


    <br><br><br>
    <!--=========================
                POPULAR SERVICES END
            ==========================-->
@endif

@if ($mobile_app_section_visbility)
    <!--=========================
                APP DOWNLOAD2 START
            ==========================-->
    <!--<section class="wsus__app_download2 pt_65 xs_pt_10 pb_200">
                <div class="container">
                    <div class="row justify-content-between">
                        <div class="col-xl-6 col-md-5 col-lg-6">
                            <div class="wsus__app_download_img">
                                <img src="{{ asset($mobile_app->home2_app_image) }}" alt="app download" class="img-fluid w-100">
                            </div>
                        </div>
                        <div class="col-xl-5 col-md-7 col-lg-6">
                            <div class="wsus__app_download_text">
                                <h5>{{ $mobile_app->short_title }}</h5>
                                <h2>{{ $mobile_app->full_title }}</h2>
                                <p>{{ $mobile_app->description }}</p>
                                <ul class="d-flex flex-wrap">
                                    <li>
                                        <a href="{{ $mobile_app->play_store }}">
                                            <i class="fab fa-google-play"></i>
                                            <span>{{__('user.Available on the')}} <b>{{__('user.Google Play')}}</b></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ $mobile_app->app_store }}">
                                            <i class="fab fa-apple"></i>
                                            <span>{{__('user.Download on the')}} <b>{{__('user.App Store')}}</b></span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>-->
    <!--=========================
                APP DOWNLOAD2 END
            ==========================-->
@endif

@if ($join_as_provider_visibility)
    <!--=========================
                SELLER JOIN2 START
            ==========================-->
    <section class="wsus__seller_join_2">
        <div class="container-fluid" style="padding: 0;">
            <div class="wsus__seller_join2_bg pt_80 xs_pt_50 pb_80 xs_pb_50"
                style="background: url({{ asset($join_as_a_provider->home2_image) }});">
                <div class="row">
                    <div class="col-lg-8 m-auto">
                        <div class="wsus__seller_join2_text wsus__seller_join_text text-center">

                            <h3>{{ $join_as_a_provider->title }}</h3>
                            <a href="{{ route('join-as-a-provider') }}">{{ $join_as_a_provider->button_text }}</a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--=========================
                SELLER JOIN2 END
            ==========================-->
@endif


@if ($testimonial_section->visibility)
    <!--=========================
                TESTIMONIAL START
            ==========================-->
    <section class="wsus__testimonial testimonial2 pt_90 xs_pt_60 pb_100 xs_pb_70">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 m-auto">
                    <div class="wsus__section_heading text-center mb_45">
                        <h2>{{ $testimonial_section->title }}</h2>
                        <p>{{ $testimonial_section->description }}</p>
                    </div>
                </div>
            </div>
            <div class="row testi_slider2">

                @foreach ($testimonials as $testimonial)
                    <div class="col-xl-6">
                        <div class="wsus__single_testimonial">
                            <p class="review_text">{{ $testimonial->comment }}</p>
                            <span class="testi_shapes">
                                <img src="{{ asset('frontend/images/testi_shapes.png') }}" alt="testimonials"
                                    class="img-fluid w-100">
                            </span>
                            <div class="wsus__single_testimonial_img">
                                <img src="{{ asset($testimonial->image) }}" alt="clients" class="img-fluid">
                                <p><span>{{ $testimonial->name }}</span> {{ $testimonial->designation }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--=========================
                TESTIMONIAL END
            ==========================-->
@endif

@if ($blog_section->visibility)
    <!--=========================
                BLOG START
            ==========================-->
    <section class="wsus__blog  pt_85 xs_pt_60 pb_100 xs_pb_70">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 m-auto">
                    <div class="wsus__section_heading text-center mb_20">
                        <h2>{{ $blog_section->title }}</h2>
                        <p>{{ $blog_section->description }}</p>
                    </div>
                </div>
            </div>
            <div class="row">

                @foreach ($blogs as $blog)
                    <div class="col-lg-4 col-md-6">
                        <div class="wsus__single_blog">
                            <div class="wsus__single_blog_img">
                                <img src="{{ asset($blog->image) }}" alt="blog" class="img-fluid w-100">
                            </div>
                            <div class="wsus__single_blog_text">
                                <ul class="d-flex flex-wrap">
                                    <li><i class="far fa-user"></i> {{__('user.By Admin')}}</li>
                                    <li><i class="far fa-comment-alt-lines"></i>
                                        {{ $blog->total_comment }}{{__('user. Comments')}}</li>
                                </ul>
                                <h2><a href="{{ route('blog', $blog->slug) }}">{{ $blog->title }}</a></h2>
                                <a href="{{ route('blog', $blog->slug) }}">{{__('user.Learn More')}} <i
                                        class="far fa-long-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--=========================
                BLOG END
            ==========================-->
@endif

@if ($partner_visbility)
    <!--=========================
                BRAND SLIDER END
            ==========================-->
    <!--<section class="wsus__home2_brand mt_75 xs_mt_45">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="wsus__brand_list">
                                <div class="row justify-content-center">
                                    @foreach ($partners as $partner)
                                        <div class="col-xl-2 col-sm-6 col-md-4 col-lg-3">
                                            <div class="wsus__single_brand">
                                                <a href="{{ $partner->link ? $partner->link : 'javascript:;' }}">
                                                    <img src="{{ asset($partner->logo) }}" alt="brand" class="img-fluid w-100">
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>-->
    <!--=========================
                BRAND SLIDER END
            ==========================-->

@endif

@if ($subscription_visbility)
    <!--=========================
                SUBSCRIBE START
            ==========================-->
    <!-- <section class="wsus__subscribe mt_100 xs_mt_70"
        style="background: url({{ asset($subscriber->home2_background_image) }});">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-xl-8 col-lg-8">
                    <div class="wsus__subscribe_text pt_90 xs_pt_60 pb_100 xs_pb_70">
                        <h3>{{ $subscriber->title }}</h3>
                        <p>{{ $subscriber->description }}</p>
                        
                    </div>
                </div>
                <div class="col-xl-5 col-md-6 d-none d-lg-block">
                            <div class="wsus__subscribe_img">
                                <img src="{{ asset($subscriber->foreground_image) }}" alt="subecribe" class="img-fluid w-100">
                            </div>
                        </div>
            </div>
        </div>
    </section> -->
    <!--=========================
                SUBSCRIBE END
            ==========================-->
@endif

<script>
    (function ($) {
        "use strict";
        $(document).ready(function () {
            $("#subscriberForm").on('submit', function (e) {
                e.preventDefault();
                var isDemo = "{{ env('APP_MODE') }}"
                if (isDemo == 'DEMO') {
                    toastr.error('This Is Demo Version. You Can Not Change Anything');
                    return;
                }

                let loading = "{{__('user.Processing...')}}"

                $("#subscribe_btn").html(loading);
                $("#subscribe_btn").attr('disabled', true);

                $.ajax({
                    type: 'POST',
                    data: $('#subscriberForm').serialize(),
                    url: "{{ route('subscribe-request') }}",
                    success: function (response) {
                        if (response.status == 1) {
                            toastr.success(response.message);
                            let subscribe = "{{__('user.Subscribe')}}"
                            $("#subscribe_btn").html(subscribe);
                            $("#subscribe_btn").attr('disabled', false);
                            $("#subscriberForm").trigger("reset");
                        }

                        if (response.status == 0) {
                            toastr.error(response.message);
                            let subscribe = "{{__('user.Subscribe')}}"
                            $("#subscribe_btn").html(subscribe);
                            $("#subscribe_btn").attr('disabled', false);
                            $("#subscriberForm").trigger("reset");
                        }
                    },
                    error: function (err) {
                        toastr.error('Something went wrong');
                        let subscribe = "{{__('user.Subscribe')}}"
                        $("#subscribe_btn").html(subscribe);
                        $("#subscribe_btn").attr('disabled', false);
                        $("#subscriberForm").trigger("reset");
                    }
                });
            })

        });
    })(jQuery);


</script>
@endsection