@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;
        font-size: 48px;
    } */

    .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;
    }
  /* Our Partners Section Styles - Clean Version */
.our-partners {
    padding: 40px 0; /* Reduced from 80px */
    background: transparent; /* Removed gradient background */
    position: relative;
}

.our-partners .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.our-partners-block {
    text-align: center;
}

.our-partners .heading {
    font-size: 2.5rem; /* Reduced from 3rem */
    font-weight: 700;
    color: #333; /* Changed from white to dark */
    margin-bottom: 0.5rem; /* Reduced from 1rem */
}

.our-partners .subheading {
    font-size: 1.1rem; /* Reduced from 1.2rem */
    color: #666; /* Changed from white to gray */
    margin-bottom: 2rem; /* Reduced from 3rem */
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem; /* Reduced from 2rem */
    margin-bottom: 2rem; /* Reduced from 3rem */
}

.partner-card {
    background: white;
    border-radius: 15px; /* Reduced from 20px */
    padding: 1.5rem; /* Reduced from 2rem */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Softer shadow */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid #f0f0f0; /* Added subtle border */
}

.partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px; /* Reduced from 4px */
    background: linear-gradient(90deg, #6B73FF, #000DFF);
}

.partner-card:hover {
    transform: translateY(-5px); /* Reduced from -10px */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.partner-card a {
    text-decoration: none;
    color: inherit;
}

.partner-image {
    width: 100px; /* Reduced from 120px */
    height: 100px; /* Reduced from 120px */
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem; /* Reduced from 1.5rem */
    display: block;
    border: 3px solid #f0f0f0; /* Reduced from 4px */
    transition: all 0.3s ease;
}

.partner-card:hover .partner-image {
    border-color: #6B73FF;
    transform: scale(1.03); /* Reduced from 1.05 */
}

.partner-name {
    font-size: 1.2rem; /* Reduced from 1.3rem */
    font-weight: 600;
    color: #333;
    margin-bottom: 0.3rem; /* Reduced from 0.5rem */
}

.partner-role {
    color: #666;
    font-size: 0.9rem; /* Reduced from 0.95rem */
}

.our-partners .btn {
    display: inline-block;
    padding: 10px 30px;
    background: transparent;
    color: #2446C0;
    text-decoration: none;
    border: 2px solid #2446C0;
    border-radius: 5px; /* Rounded corners like Load More button */
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: none;
}

.our-partners .btn:hover {
    background: #2446C0;
    color: white;
    text-decoration: none;
}

/* Responsive design */
@media (max-width: 768px) {
    .our-partners {
        padding: 20px 0; /* Reduced padding on mobile */
    }
    
    .our-partners .heading {
        font-size: 2rem;
    }
    
    .partners-grid {
        grid-template-columns: 1fr;
        gap: 1rem; /* Reduced gap on mobile */
    }
    
    .partner-card {
        padding: 1rem; /* Reduced padding on mobile */
    }
}
</style>


<section class="banner">
    <!-- <img class="banner-background-ellipse" src="{{asset('webAssets/assets/images/banner-bg-img.png')}}" alt=""> -->
    <div class="container">
        <div class="banner-block">
            <div class="banner-items text-col">
                <div class="banner-heading">
                    <h1><span
                            class="blue-color">{!! $SiteSettings->web_heading ?? '' !!}</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")

</div>
</div>

</section>

<!-- Other Services -->
@include("website.otherService")

<!-- Partners -->

<section class="our-partners" id="our-partners">
    <div class="container">
        <div class="our-partners-block">
            <h4 class="heading">Our Partners</h4>
            <p class="subheading">Meet the amazing people who help us grow and succeed</p>
            
            <div class="partners-grid">
                @foreach($partners as $partner)
                    <div class="partner-card">
                        <a href="{{ route('showPartner.show', ['id' => $partner->id]) }}">
                            <img src="{{ asset($partner->profile_image) }}" 
                                 alt="{{ $partner->first_name }} {{ $partner->last_name }} - Partner" 
                                 class="partner-image">
                            <h5 class="partner-name">{{ $partner->first_name }} {{ $partner->last_name }}</h5>
                            <p class="partner-role">Partner</p>
                        </a>
                    </div>
                @endforeach
            </div>
            
            <div class="our-partners-action text-center">
                <a href="{{ route('explore.partners') }}" type="button" class="btn btn-secondary">Explore All
                    Partners</a>
            </div>
        </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 swiper = new Swiper('.swiper-container', {
    //     slidesPerView: 4,
    //     // slidesPerGroup: 1,
    //     spaceBetween: 20,
    //     navigation: {
    //         nextEl: '.swiper-button-next',
    //         prevEl: '.swiper-button-prev',
    //     },
    //     breakpoints: {

    //         375: {
    //             slidesPerView: 1,
    //         },
    //         450: {
    //             slidesPerView: 2,
    //         },

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

    // });





    // var swiper = new Swiper(".mySwiper", {
    //     slidesPerView: 3,
    //     spaceBetween: 20,
    //     // loop: true,
    //     pagination: {
    //         el: ".swiper-pagination",
    //         clickable: true,
    //     },
    //     navigation: {
    //         nextEl: '.swiper-button-next',
    //         prevEl: '.swiper-button-prev',
    //     },
    //     breakpoints: {

    //         375: {
    //             slidesPerView: 1,
    //         },
    //         450: {
    //             slidesPerView: 2,
    //         },

    //         767: {
    //             slidesPerView: 2,
    //             showSwitchArrows: false,
    //         },
    //         991: {
    //             slidesPerView: 3,
    //         },
    //     }

    // });

    // var swiper = new Swiper(".swiper.mySwiper.partners", {
    //     slidesPerView: 5,
    //     spaceBetween: 20,
    //     autoplay: false,
    //     slidesPerGroup: 1,
    //     breakpoints: {

    //         375: {
    //             slidesPerView: 1,
    //         },
    //         450: {
    //             slidesPerView: 2,
    //         },

    //         767: {
    //             slidesPerView: 2,
    //             showSwitchArrows: false,
    //         },
    //         991: {
    //             slidesPerView: 6,
    //         },
    //     }
    // });



    // // Service provider slider

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

    //         320: {
    //             slidesPerView: 1,
    //             spaceBetween: 20,
    //             slidesPerGroup: 1,
    //         },
    //         768: {
    //             slidesPerView: 2,
    //             spaceBetween: 20,
    //         },
    //         1024: {
    //             slidesPerView: 3,
    //             spaceBetween: 30,
    //         },
    //     },
    // });







    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,
            },
            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: {
            0: {
                slidesPerView: 1,
            },
            375: {
                slidesPerView: 1,
            },
            375: {
                slidesPerView: 1,
            },
            450: {
                slidesPerView: 2,
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            1024: {
                slidesPerView: 3,
                spaceBetween: 30,
            },
        },
    });
</script>
@endsection