@extends('layouts.main-app')

@section('title', 'Project')

@section('content')

@include('components.navbar')
<div class="relative flex flex-col items-center justify-center h-[35rem]">
    <img class="absolute z-0 object-cover w-full h-full" src="{{asset('images/	
FOR HOMEPAGE AND ROBINSONS PLACE PAVIA.JPG')}}" alt="">
</div>

<!--<div class="relative flex flex-col items-center justify-center h-full">-->
<!--    <img class="absolute z-0 object-cover object-center w-full h-full" src="{{asset('images/projects/bg-services.jpg')}}" alt="">-->
<!--    <div class="container relative px-4 pt-8 pb-16 mx-auto text-white max-w-7xl">-->
<!--        <div data-aos="fade-down" data-aos-duration="1000" class="my-4 space-y-8">-->
<!--            <div>-->
<!--                <img class="w-full md:w-[25rem] h-auto" src="{{asset('images/projects/text-services.png')}}" alt="">-->
<!--                <h3 class="-mt-6 text-4xl italic md:text-6xl bodoni-moda">Our Commitment to <br> Excellence in Every Project</h3>-->
<!--            </div>-->
<!--            <p class="plus-jakarta-sans">-->
<!--                SPES Construction Inc. prides itself on a diverse portfolio that highlights our capability to handle various types of construction projects.-->
<!--                <br>-->
<!--                Here are some notable projects that exemplify our expertise and dedication-->
<!--            </p>-->
<!--        </div>-->
<!--        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 plus-jakarta-sans">-->
<!--            <div data-aos="zoom-in" data-aos-duration="1000" class="order-1 space-y-4 ">-->
<!--                <h3 class="text-4xl font-semibold text-[#cce6cc]">01.</h3>-->
<!--                <h1 class="text-2xl">Construction Management</h1>-->
<!--                <div class="border-b-2 border-b-white"></div>-->
<!--            </div>-->
<!--            <div data-aos="zoom-in" data-aos-duration="1000" class="order-4 space-y-4 md:order-2">-->
<!--                <h3 class="text-4xl font-semibold text-[#cce6cc]">04.</h3>-->
<!--                <h1 class="text-2xl">Renovation and Remodeling</h1>-->
<!--                <div class="border-b-2 border-b-white"></div>-->
<!--            </div>-->
<!--            <div data-aos="zoom-in" data-aos-duration="1000" class="order-2 space-y-4 md:order-3">-->
<!--                <h3 class="text-4xl font-semibold text-[#cce6cc]">02.</h3>-->
<!--                <h1 class="text-2xl">Design-Build</h1>-->
<!--                <div class="border-b-2 border-b-white"></div>-->
<!--            </div>-->
<!--            <div data-aos="zoom-in" data-aos-duration="1000" class="order-5 space-y-4 md:order-4">-->
<!--                <h3 class="text-4xl font-semibold text-[#cce6cc]">05.</h3>-->
<!--                <h1 class="text-2xl">Consulting Services</h1>-->
<!--                <div class="border-b-2 border-b-white"></div>-->
<!--            </div>-->
<!--            <div data-aos="zoom-in" data-aos-duration="1000" class="order-3 space-y-4 md:order-5">-->
<!--                <h3 class="text-4xl font-semibold text-[#cce6cc]">03.</h3>-->
<!--                <h1 class="text-2xl">General Contracting</h1>-->
<!--                <div class="border-b-2 border-b-white"></div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<div class="relative flex flex-col items-center justify-center h-full">
    <img class="absolute z-0 object-cover object-top w-full h-full" src="{{asset('images/projects/bg-ongoing.jpg')}}" alt="">
    <div class="container relative px-4 py-12 mx-auto space-y-8 max-w-7xl">
        <img data-aos="fade-down" data-aos-duration="1000" class="h-auto w-[25rem]" src="{{asset('images/projects/text-ongoing.png')}}" alt="">
        <div class="grid grid-cols-1 space-y-4 overflow-hidden md:grid-cols-2 plus-jakarta-sans">

            @foreach($ongoing_projects as $ongoingproject)
            <div data-aos="fade-right" data-aos-duration="1000" class="space-y-12 text-white">
                <h3 class="text-5xl italic bodoni-moda">{!!$ongoingproject->title!!}</h3>
                <p class="text-sm">
                    {{$ongoingproject->description}}
                </p>
                <div class="grid grid-cols-2">
                    <div class="space-y-2">
                        <h1>Location:</h1>
                        <img src="{{ asset($ongoingproject->location_image) }}" alt="">
                    </div>

                </div>
                <div class="space-y-8">
                    <p class="text-sm"> {{$ongoingproject->location_description}}</p>
                    <div>
                        <a href="#projects">
                            <button class="px-8 py-2 bg-transparent border-2 border-green-600 rounded-full">VIEW MORE</button>
                        </a>
                    </div>
                </div>
            </div>

            <div data-aos="fade-left" data-aos-duration="1000" class="relative">
                <!-- Splide -->
                <div id="splide" class="splide ">
                    <div class=" splide__track">
                        <ul class="splide__list ">
                            @foreach ($ongoingproject->carousels as $ongoingprojectcarousels)
                            <li class="splide__slide ">
                                <img class="object-cover w-full h-full " src="{{ asset($ongoingprojectcarousels->image) }}" alt="">
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                <!-- Buttons container -->
                <div class="absolute top-0 right-0 z-10 flex flex-col gap-2">
                    <button id="splide-prev" class="text-4xl text-red-600 bg-white opacity-70 hover:opacity-100">
                        <i class='bx bx-up-arrow-alt'></i>
                    </button>
                    <button id="splide-next" class="text-4xl text-red-600 bg-white opacity-70 hover:opacity-100">
                        <i class='bx bx-down-arrow-alt'></i>
                    </button>
                </div>
            </div>
            @endforeach


            <style>
                .splide__slide {
                    transition: transform 0.8s cubic-bezier(.42, .65, .27, .99);
                    height: 80%;
                    overflow: hidden;
                }

                .splide__slide.is-next {
                    height: 20%;
                    opacity: 0.5;
                    clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);
                    position: relative;
                }
            </style>

            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    var splide = new Splide('#splide', {
                        type: 'loop',
                        pagination: false,
                        direction: 'ttb', // Set direction to top-to-bottom (vertical)
                        height: '50rem', // Set a fixed height for the Splide container
                        perPage: 1, // Show one slide at a time
                        gap: '1rem', // Gap between slides
                        arrows: false, // Disable default arrows
                        flickMaxPages: 1, // Number of pages to move at once
                        flickPower: 300, // The power to flick
                        speed: 800, // Transition speed
                        easing: 'cubic-bezier(.42,.65,.27,.99)', // Easing function for the transition
                    }).mount();

                    // Custom navigation
                    document.getElementById('splide-prev').addEventListener('click', function() {
                        splide.go('<');
                    });

                    document.getElementById('splide-next').addEventListener('click', function() {
                        splide.go('>');
                    });

                    // Add 'is-next' class to the next slide and adjust heights
                    splide.on('move', function(newIndex) {
                        updateSlideHeights(newIndex);
                    });

                    function updateSlideHeights(newIndex) {
                        var slides = splide.Components.Elements.slides;
                        slides.forEach(function(slide, index) {
                            slide.style.height = '80%';
                            slide.classList.remove('is-next');

                            if (index === newIndex) {
                                slide.style.height = '80%';
                            } else if (index === (newIndex + 1) % slides.length) {
                                slide.style.height = '20%';
                                slide.classList.add('is-next');
                            }
                        });
                    }

                    // Initial height adjustment
                    updateSlideHeights(0);
                });
            </script>
        </div>
    </div>
</div>


<div class="relative flex flex-col items-center justify-center h-full py-8 plus-jakarta-sans">
    <img class="absolute z-0 object-cover object-top w-full h-full" src="{{asset('images/home/bg-2.jpg')}}" alt="">
    <div id="projects" class="container relative px-4 mx-auto space-y-8 text-white max-w-7xl">
        <div class="grid grid-cols-1 my-4 space-y-12 md:grid-cols-2">
            <div data-aos="fade-down" data-aos-duration="1000">
                <h1 class="text-4xl font-bold">PROJECT SHOWCASE</h1>
            </div>
            <div></div>
            <div data-aos="fade-right" data-aos-duration="1000" class="flex flex-row items-center space-x-12 text-sm">
                <h1 class="">Sort by:</h1>
                <button id="category-button" class="px-12 py-2 bg-transparent border-2 border-green-600 rounded-full">CATEGORY</button>
                <div id="category-dropdown" class="hidden">
                    @foreach($category as $categories)
                    <button class="category-filter" data-category="{{$categories->category_name}}">{{$categories->category_name}}</button>
                    @endforeach
                </div>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const categoryButton = document.getElementById('category-button');
                        const categoryDropdown = document.getElementById('category-dropdown');
                        const categoryFilters = document.querySelectorAll('.category-filter');
                        const projectItems = document.querySelectorAll('.project-item');

                        // Show/Hide dropdown when category button is clicked
                        categoryButton.addEventListener('click', function() {
                            categoryDropdown.classList.toggle('hidden');
                        });

                        // Filter projects by category when a category is selected
                        categoryFilters.forEach(filter => {
                            filter.addEventListener('click', function() {
                                const selectedCategory = filter.dataset.category;
                                projectItems.forEach(item => {
                                    const itemCategory = item.dataset.category;
                                    if (selectedCategory === 'All' || itemCategory === selectedCategory) {
                                        item.style.display = '';
                                    } else {
                                        item.style.display = 'none';
                                    }
                                });
                                categoryDropdown.classList.add('hidden');
                            });
                        });
                    });
                </script>
            </div>
            <div data-aos="fade-right" data-aos-duration="1000" class="flex justify-end ">
                <div class="relative">
                    <input id="search-input" class="px-8 py-2 w-[15rem] md:w-[20rem] text-gray-400 text-sm placeholder-gray-400 bg-transparent border-2 border-white rounded-full pl-10" placeholder="SEARCH" type="text">
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            const searchInput = document.getElementById('search-input');
                            const projectItems = document.querySelectorAll('.project-item');

                            searchInput.addEventListener('input', function() {
                                const query = searchInput.value.toLowerCase();
                                projectItems.forEach(item => {
                                    const locationText = item.querySelector('h1').textContent.toLowerCase();
                                    if (locationText.includes(query)) {
                                        item.style.display = '';
                                    } else {
                                        item.style.display = 'none';
                                    }
                                });
                            });
                        });
                    </script>
                    <button><i class='absolute text-xl text-white transform -translate-y-1/2 right-6 bx bx-search top-1/2'></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
            @foreach($project as $projects)
            <div data-aos="zoom-in" data-aos-duration="1000" class="relative inline-block hover:shadow-2xl hover:shadow-[#cce6cc] project-item" data-category="{{ $projects->category->category_name }}">
                @foreach ($projects->projectImages as $project_images)
                <img src="{{  asset('images/uploads/project_images/' . $project_images->image_path )}}" alt="" class="block w-full h-[25rem] object-cover duration-300 ease-in-out ">
                @endforeach
                <div class="absolute inset-0 bottom-0 flex flex-col items-start justify-end p-8 space-y-4 text-white transition-opacity duration-300 ease-in-out bg-black opacity-0 bg-opacity-70 hover:opacity-100">
                    <p class="text-[#cce6cc] text-sm">{{ $projects->category->category_name }}</p>
                    <h1 class="text-xl font-bold">{{ $projects->title }}</h1>
                    <div class="border-[0.1rem] w-full border-white"></div>
                    <a href="{{ url('projects_details', $projects->id) }}">
                        <button class="text-sm font-semibold text-red-600">VIEW MORE</button>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
        <div data-aos-duration="1000" class="grid grid-cols-3 my-12">
            <div>
                <button id="prev-btn" class="flex items-center justify-center w-12 h-12 p-3 border-2 border-green-600 rounded-full hover:bg-red-600" aria-label="Previous Page">
                    <img src="{{asset('images/about_us/arrow-left.png')}}" alt="">
                </button>
            </div>
            <div class="flex justify-center space-x-2">
                @for ($i = 1; $i <= $totalPages; $i++)
                    <button class="w-12 h-12 text-white border-2 border-green-600 rounded-full pagination-btn extra-page-btn" data-page="{{ $i }}">
                    {{ str_pad($i, 2, '0', STR_PAD_LEFT) }}
                    </button>
                    @endfor

                    @if ($totalPages > 3)
                    <div class="flex items-end space-x-2">
                        <button class="w-2 h-2 text-white bg-green-600 rounded-full"></button>
                        <button class="w-2 h-2 text-white bg-green-600 rounded-full"></button>
                        <button class="w-2 h-2 text-white bg-green-600 rounded-full"></button>
                    </div>
                    @endif
            </div>
            <div class="flex justify-end">
                <button id="next-btn" class="flex items-center justify-center w-12 h-12 p-3 border-2 border-green-600 rounded-full hover:bg-red-600" aria-label="Next Page">
                    <img src="{{asset('images/about_us/arrow-right.png')}}" alt="">
                </button>
            </div>
        </div>


    </div>
</div>

<style>
    /* Hide extra pagination buttons on small screens */
    @media (max-width: 768px) {
        .extra-page-btn {
            display: none;
        }
    }

    .pagination-btn.disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const itemsPerPage = 12; // Adjust as needed
        let currentPage = 1;
        const projectItems = document.querySelectorAll(".project-item");
        const paginationButtons = document.querySelectorAll(".pagination-btn");
        const prevBtn = document.getElementById("prev-btn");
        const nextBtn = document.getElementById("next-btn");

        function showPage(page) {
            projectItems.forEach((item, index) => {
                item.style.display = (Math.ceil((index + 1) / itemsPerPage) === page) ? "block" : "none";
            });

            const totalPages = Math.ceil(projectItems.length / itemsPerPage);

            paginationButtons.forEach(button => {
                const pageNumber = Number(button.dataset.page);
                button.classList.toggle("bg-red-600", pageNumber === page);
                button.classList.toggle("disabled", pageNumber > totalPages);
                button.disabled = pageNumber > totalPages; // Disable buttons for pages that don't exist
            });

            prevBtn.disabled = currentPage === 1;
            nextBtn.disabled = currentPage === totalPages;
        }

        function updatePagination() {
            paginationButtons.forEach(button => {
                button.classList.toggle("bg-red-600", Number(button.dataset.page) === currentPage);
            });
        }

        prevBtn.addEventListener("click", function() {
            if (currentPage > 1) {
                currentPage--;
                showPage(currentPage);
                updatePagination();
            }
        });

        nextBtn.addEventListener("click", function() {
            const totalPages = Math.ceil(projectItems.length / itemsPerPage);
            if (currentPage < totalPages) {
                currentPage++;
                showPage(currentPage);
                updatePagination();
            }
        });

        paginationButtons.forEach(button => {
            button.addEventListener("click", function() {
                const pageNumber = Number(this.dataset.page);
                if (pageNumber <= Math.ceil(projectItems.length / itemsPerPage)) {
                    currentPage = pageNumber;
                    showPage(currentPage);
                    updatePagination();
                }
            });
        });

        // Initialize the first page
        showPage(currentPage);
    });
</script>

@include('components.footer')


@endsection