@extends("website.layouts.layout")
@section('title', "Home Page")
@section("body")
<!--Banner-->

<style>
    .banner-heading h1 span h1,
    .banner-heading h1 span h2,
    .banner-heading h1 span h3,
    .banner-heading h1 span h4,
    .banner-heading h1 span h5,
    .banner-heading h1 span h6 {
        color: #2446C0;
    }

    .our-services .popular-projects {
        background-color: unset;
    }

    .swiper_wrap.swiperFour .popular-projects-newSwiperFour {
        overflow: hidden;
    }

    .swiper_wrap.swiperFour .popular-projects-newSwiperFour .nav {
        flex-direction: column;
    }

    .banner {
        padding: unset;
    }
</style>


<!-- Breadcrumbs -->


<section class="breadcrumb-block">
    <div class="container">
        <div class="services-breadcrumb-section">

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active " aria-current="page"><a href="javascript:void(0)">Book service</a>
                    </li>
                </ol>
            </nav>
        </div>
    </div>
</section>


<section class="banner">

    <!-- <img class="banner-background-ellipse" src="{{asset('webAssets/assets/images/banner-bg-img.png')}}" alt=""> -->
    <div class="banner-block">
        <div class="container">
            <div class="banner-items text-col">
                <div class="banner-heading">
                    <h1><span>Book Services</span>{!! $SiteSettings->web_title ?? '' !!}
                    </h1>
                </div>
                <div class="banner-form-items">
                    <div class="banner-paragraph">
                        <!-- <p>{!! $SiteSettings->web_tagline ?? '' !!}</p> -->
                    </div>

                    <div class="search-field">
                        <input id="search-input" type="text" placeholder="Search for something..."
                            onclick="showAllCategories()" onkeyup="search()">
                        <button class="btn btn-primary" onclick="search(); performSearch();">Search</button>

                    </div>

                    <div class="banner-search-items">
                        <ul id="category-list" class="catgory-text" style="border:0px;"></ul>
                    </div>
                </div>

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

<!--Our services -->

<section class="our-services">
    <div class="container">
        <div class="our-services-items">
            <div class="our-services-text-col">
                <h2 class="heading">{!! $SiteSettings->web_title_our_service ?? '' !!}</h2>
                <p class="paragraph">{!! $SiteSettings->web_tagline_our_service ?? '' !!}</p>
            </div>

            @if($groups->isNotEmpty())
                <div class="popular-projects">
                    <div class="swiper-button d-flex justify-content-end gap-16px">
                        <div class="swiper-button-prev newFour"></div>
                        <div class="swiper-button-next newFour"></div>
                    </div>
                    <div class="swiper_wrap  swiperFour">
                        <div class="swiper-container popular-projects-newSwiperFour">
                            <div class="swiper-wrapper">
                                @foreach($groups as $category)
                                    <div class="swiper-slide">
                                        <ul class="nav">
                                            <li
                                                class="nav-item @if($category['id'] == $subCategories[0]['group_id']) active-category  @endif">
                                                <a class="nav-link group-category" aria-current="page" href="#"
                                                    data-id="{{$category['id']}}"><img src="{{asset('/')}}{{$category['logo']}}"
                                                        alt="services" class="our-services-img">
                                                    <p class="our-services-para">{{$category['Group_name']}}</p>
                                                </a>

                                            </li>
                                            <ul>
                                    </div>
                                @endforeach

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


                <!-- </ul> -->

                <div class="moving-block">
                    <div class="moving-block-items">
                        <div class="moving-block-action group-sub-categories">

                            @foreach($subCategories as $sub)
                                <a class="btn" href="{{route('client.project.location')}}?sub_ctg_id={{$sub['id']}}"
                                    role="button">{{$sub['Category']}}</a>
                            @endforeach

                        </div>

                        <div class="moving-block-text-col">

                            <div class="moving-block-text-item text-item">

                                <div class="moving-block-heading" id="group-heading">
                                    <h4>{{$groups[0]['Group_name'] ?? ''}}</h4>
                                </div>

                                <div class="moving-block-paragraph">
                                    <div class="pcontent">
                                        <img src="{{asset('webAssets/assets/images/sq-img.svg')}}" alt="sq-img">

                                        <p id="group-description">{{$groups[0]['description']}}</p>



                                    </div>
                                </div>


                            </div>

                            <div class="moving-block-img-col">
                                <img class="loading-box-img" id="group-image"
                                    src="{{ !empty($groups[0]['banner']) ? asset($groups[0]['banner']) : asset('webAssets/assets/images/our-services-img-9.png') }}"
                                    alt="Category Banner">
                            </div>
                        </div>

                    </div>

                </div>
                <div class="moving-tasks-details">
                    <!-- @for($i=0;$i< sizeof($Category);$i++) @php if($i==5): break; endif; @endphp 
                                <div class="moving-tasks-num">
                                    <h3 class="moving-task-heading"> {{$Category[$i]['total_services']}}+</h3>
                                    <p>{{$Category[$i]['Category']}}:</p>
                                </div>
                                @endfor -->

                </div>
            @else
                <p class="text-center">No categories found.</p>
            @endif



        </div>
</section>

@include("website.popularServiceProvider")
@include("website.popularProjects")
<section class="project-steps">
    <div class="container">
        <div class="project-step-items">
            <div class="project-top-item">
                <h3 class="heading">Steps to accomplish your project</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>

            <div class="project-steps-container">

                <div class="project-step-row">
                    @foreach ($accomplishStep as $step)
                        <div class="project-step-col">
                            <div class="project-step-inner-col">
                                <div class="project-step-num">
                                    <h3 class="heading">{{ $step->step }}</h3>
                                </div>
                                <div class="project-step-text-col">
                                    <h6 class="heading new-heading">{!! $step->heading !!}</h6>
                                    <p>{!! $step->tagline !!}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>


        </div>
    </div>
</section>
@include("website.customerOpinion")
@include("website.otherService")
</div>
</div>

</section>



@endsection

@section("footerItems")
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var firstLink = document.querySelector('.nav .nav-item a');
        if (firstLink) {
            firstLink.click();
        }
    });
    $(".group-category").on("click", function (e) {
        e.preventDefault();
        let group_id = $(this).attr('data-id');

        $.ajax({
            url: "{{route('getSubCategories')}}",
            method: "POST",
            data: {
                _token: "{{csrf_token()}}",
                group_id
            },
            success: function (res) {
                let html = '';
                let html2 = '';
                if (Array.isArray(res)) {
                    res.forEach(element => {
                        // Make sure 'Category' is the correct property name in your response
                        html +=
                            `<a class="btn" href="{{route('client.project.location')}}?sub_ctg_id=${element.id}" role="button">${element.Category}</a>`;
                    });
                    const maxItems = 5;
                    res.slice(0, maxItems).forEach(element => {
                        html2 +=
                            `<div class="moving-tasks-num">
                                <h3 class="moving-task-heading">${element.totaljob}+</h3>
                                <p>${element.Category}</p>
                        </div>`;
                    });
                    $(".group-sub-categories").html(html);
                    $(".moving-tasks-details").html(html2);
                } else {
                    console.error("Response is not an array.");
                }
            },
            error: function (xhr, status, error) {
                console.error("Error:", error);
            }
        });

        $(".nav-item").removeClass("active-category");
        $(this).closest(".nav-item").addClass("active-category");
    });
    $(".group-category").on("click", function (e) {
        e.preventDefault();
        let group_id = $(this).attr('data-id');
        // console.log('2');
        $.ajax({
            url: "{{ route('getCategoryDetails', ['categoryId' => ':categoryId']) }}".replace(':categoryId',
                group_id),
            method: "GET",
            success: function (response) {
                // console.log(response);
                if (response.success) {
                    var groupName = response.success.Group_name;
                    var description = response.success.description;
                    var bannerPath = response.success.banner;
                    var starImage = '{{ asset("webAssets/assets/images/sq-img.svg") }}';

                    var imageSrc = '{{ asset(":bannerPath") }}'.replace(':bannerPath', bannerPath);
                    console.log("Image Source:", imageSrc);
                    document.getElementById('group-heading').innerHTML = '<h4>' + groupName + '</h4>';
                    document.getElementById('group-description').innerHTML = description;
                    $('.loading-box-img').attr('src', imageSrc);
                } else {
                    console.error(response.error);
                }
            },
            error: function (xhr, status, error) {
                console.error("Error:", error);
            }
        });
    });
</script>





<script>
    function showAllCategories() {
        fetch('/allSubCategories')
            .then(response => response.json())
            .then(data => {
                const categories = data;
                if (categories.length) {
                    const list = document.getElementById('category-list');
                    list.setAttribute("style", "border:1px solid #2446C0;");
                    list.innerHTML = '';

                    let i = 0;
                    categories.forEach(category => {
                        i++;

                        if (i < 10) {
                            const listItem = document.createElement('li');
                            listItem.style.cursor =
                                'pointer'; // Change cursor to pointer to indicate clickability

                            // Set the URL based on the category data
                            const url = `{{ route('services') }}?sub_ctg_id=${category.id}-p`;

                            // Add click event listener to the <li>
                            listItem.addEventListener('click', function () {
                                window.location.href = url;
                            });

                            // Set the content of the <li>
                            listItem.innerHTML = category.Group_name;

                            // Append the <li> to the list
                            list.appendChild(listItem);
                        }
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }


    function search() {
        var searchQuery = document.getElementById('search-input').value;

        fetch('/searchCategory', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                search: searchQuery
            })
        })
            .then(response => response.json())
            .then(data => {
                const filteredCategories = data.success.data;
                const list = document.getElementById('category-list');
                list.innerHTML = '';

                filteredCategories.forEach(item => {
                    const listItem = document.createElement('li');
                    listItem.style.cursor = 'pointer'; // Change cursor to pointer to indicate clickability

                    // Set the URL based on the type of item
                    let url = '';
                    if (item.type === 'group') {
                        url = `{{ route('services') }}?sub_ctg_id=${item.id}-p`;
                    } else if (item.type === 'category') {
                        url = `{{ route('client.project.location') }}?sub_ctg_id=${item.id}`;
                    }

                    // Add click event listener to the <li>
                    listItem.addEventListener('click', function () {
                        window.location.href = url;
                    });

                    // Set the content of the <li>
                    listItem.innerHTML = item.value;

                    // Append the <li> to the list
                    list.appendChild(listItem);
                });
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }



    document.body.addEventListener('click', function (event) {
        var categoryList = document.getElementById('category-list');
        var targetElement = event.target; // Element that triggered the event

        if (!categoryList.contains(targetElement)) {
            const list = document.getElementById('category-list');
            list.innerHTML = '';

            list.setAttribute("style", "border:0px ");
        }
    });
</script>


<script>


    var swiperOne = new Swiper('.swipertwo .swiper-container', {
        slidesPerView: 4,
        spaceBetween: 20,
        navigation: {
            nextEl: '.swiper-button-next.new',
            prevEl: '.swiper-button-prev.new',
        },
        breakpoints: {
            0: {
                slidesPerView: 1,
            },
            375: {
                slidesPerView: 1,
            },
            450: {
                slidesPerView: 2,
            },

            767: {
                slidesPerView: 3,
            },
            991: {
                slidesPerView: 4,
            },
            1160: {
                slidesPerView: 4,
            },
        }

    });

    var swipertwo = new Swiper(".swiperThree .swiper-container", {
        slidesPerView: 3,
        spaceBetween: 20,
        slidesPerGroup: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next.opinions-next',
            prevEl: '.swiper-button-prev.opinions-prev',
        },

        breakpoints: {
            0: {
                slidesPerView: 1,
            },
            375: {
                slidesPerView: 1,
            },
            450: {
                slidesPerView: 2,
            },
            767: {
                slidesPerView: 2,
            },
            991: {
                slidesPerView: 3,
            },
        },
    });


    var swiperFour = new Swiper('.swiperFour .swiper-container', {
        slidesPerView: 6,
        spaceBetween: 10,
        navigation: {
            nextEl: '.swiper-button-next.newFour',
            prevEl: '.swiper-button-prev.newFour',
        },
        breakpoints: {
            0: {
                slidesPerView: 1,
            },
            375: {
                slidesPerView: 1,
            },
            450: {
                slidesPerView: 2,
            },

            767: {
                slidesPerView: 3,
            },
            991: {
                slidesPerView: 4,
            },
            1160: {
                slidesPerView: 6,
            },
        }

    });







    var swiper = new Swiper(".swipersliderone", {
        slidesPerView: 3,
        spaceBetween: 30,
        slidesPerGroup: 1,
        navigation: {
            nextEl: '.swiper-button-next.newTwo',
            prevEl: '.swiper-button-prev.newTwo',
        },
        breakpoints: {

            320: {
                slidesPerView: 1,
                spaceBetween: 20,
                slidesPerGroup: 1,
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            1024: {
                slidesPerView: 3,
                spaceBetween: 30,
            },
        },
    });
</script>
@endsection