@extends('layouts.main-app')

@section('title', 'Home')

@section('content')
    @include('layouts.navbar')

    <div class="relative 2xl:h-[40rem] overflow-hidden bg-[#356d1c]">
        <!-- Swiper Container -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                @foreach ($banner as $banners)
                    <!-- Swiper Slide -->
                    <div class="swiper-slide">
                        <div class="grid grid-cols-2">
                            <!-- Left side with text content -->
                        <div class="">
                            <div class="relative z-50  2xl:pl-44">
                                <div
                                    class="flex pt-[8rem] md:pt-[10rem] xl:pt-[12rem] flex-col justify-center text-center md:w-full space-y-20 xl:space-y-40 px-4">
                                    <div class="space-y-2">
                                        <h1
                                            class="text-sm text-start text-white font-bold md:text-4xl xl:text-5xl max-w-screen-sm">
                                            {!! $banners->title !!}
                                        </h1>
                                        <p class="text-sm md:text-2xl text-white font-light text-start py-14">
                                            {{ $banners->subtitle }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Right side with image -->
                        <div>
                            <img class="object-cover w-full h-full" src="{{ asset($banners->image_path) }}" alt="">
                        </div>
                        </div>
                        
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class=" h-full relative">
        <img class="absolute object-cover object-bottom w-full h-full"
            src="{{ asset('images/Revision-Folders/Resources/bg-numbers-with-globe.jpg') }}" alt="">

        <div>
            <div class="relative w-full flex justify-center">
                <div class="absolute xl:container xl:mx-auto w-full h-full z-50 -mt-24 xl:pl-44">
                    <div class="hidden lg:flex lg:flex-row xl:gap-4 xl:p-8 lg:w-full">
                        <!-- 1st Card -->
                        <div class="card">
                            <div
                                class="w-full max-w-2xl h-80 flex flex-col bg-gradient-to-b from-[#ffffff] to-[#b3ffb3] rounded-2xl p-4">
                                <div>
                                    <img src="{{ asset('images/Revision-Folders/Resources/icon-satisfaction.webp') }}"
                                        alt="">
                                </div>
                                <div>
                                    <h1 class="text-[0.80rem] text-[#356d1c] font-bold text-xl ">Client
                                        Satisfaction
                                    </h1>
                                </div>
                                <div class="flex-grow">
                                    <p class="text-sm text-start font-normal max-w-sm text-black">
                                        We ensure that we provide experienced professionals to fit demands of the job and
                                        the environment
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- 2nd Card -->
                        <div class="card">
                            <div
                                class="w-full max-w-2xl h-80 flex flex-col bg-gradient-to-b from-[#ffffff] to-[#b3ffb3] rounded-2xl p-4">
                                <div>
                                    <img src="{{ asset('images/Revision-Folders/Resources/icon-dynamic.webp') }}"
                                        alt="">
                                </div>
                                <div>
                                    <h1 class="text-[0.80rem] text-[#356d1c] font-bold text-xl  text-center">Dynamic
                                    </h1>
                                </div>
                                <div class="flex-grow">
                                    <p class="text-sm text-start font-normal max-w-sm text-black">
                                        We only field highly qualified applicants committed towards team/company progress as
                                        manifested by our roster...
                                    </p>
                                </div>
                            </div>
                        </div>


                        <!-- 3rd Card -->
                        <div class="card">
                            <div
                                class="w-full max-w-2xl h-80 flex flex-col bg-gradient-to-b from-[#ffffff] to-[#b3ffb3] rounded-2xl p-4">
                                <div>
                                    <img src="{{ asset('images/Revision-Folders/Resources/icon-quality.webp') }}"
                                        alt="">
                                </div>
                                <div>
                                    <h1 class="text-[0.80rem] text-[#356d1c] font-bold text-xl">Quality
                                    </h1>
                                </div>
                                <div class="flex-grow">
                                    <p class="text-sm text-start font-normal max-w-sm text-black">
                                        We recruit and deploy carefully screened and selected applicants at minimum cost.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- 4th Card -->
                        <div class="card">
                            <div
                                class="w-full max-w-2xl h-80 flex flex-col bg-gradient-to-b from-[#ffffff] to-[#b3ffb3] rounded-2xl p-4">
                                <div>
                                    <img src="{{ asset('images/Revision-Folders/Resources/icon-proactive.webp') }}"
                                        alt="">
                                </div>
                                <div>
                                    <h1 class="text-[0.80rem] text-[#356d1c] font-bold text-xl">Proactive
                                    </h1>
                                </div>
                                <div class="flex-grow">
                                    <p class="text-sm text-start font-normal max-w-sm text-black">
                                        With the ever- progressing IT field, we take pride in our pool of services for their
                                        change oriented and perceptive characteristics
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- 5th Card -->
                        <div class="card">
                            <div
                                class="w-full max-w-2xl h-80 flex flex-col bg-gradient-to-b from-[#ffffff] to-[#b3ffb3] rounded-2xl p-4">
                                <div>
                                    <img src="{{ asset('images/Revision-Folders/Resources/icon-partnership.webp') }}"
                                        alt="">
                                </div>
                                <div>
                                    <h1 class="text-[0.80rem] text-[#356d1c] font-bold text-xl">Partnership
                                    </h1>
                                </div>
                                <div class="flex-grow">
                                    <p class="text-sm text-start font-normal max-w-sm text-black">
                                        This is a dialogue. We recognize the importance of constant communication;
                                        therefore, our lines are always open to take your ...
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="max-w-screen-xl mx-auto z-50 relative">
                <!-- "Let's Get Your Project Started!" Section -->
                <div class="w-full flex flex-col justify-center text-center h-full">
                    <div class="h-full flex-row items-center p-14 md:py-52 lg:py-52 xl:py-72">
                        <h4 class="text-2xl lg:text-3xl font-semibold">SUCCESS BY NUMBERS</h4>
                        <div class="border border-t bg-yellow-400 w-44 md:w-96 h-2 mx-auto"></div>

                        <div class="flex justify-center items-center w-full py-4 md:py-14">
                            <p class="text-xl md:text-5xl font-bold w-full">Real Results for Real Businesses</p>
                        </div>
                        <div class="flex flex-col md:flex-row justify-center gap-x-4 xl:gap-x-32 relative w-full gap-y-4">
                            <!-- 1st Card Bottom -->
                            <div class="flex justify-center items-center " data-max-count="300" data-aos="zoom-in">
                                <div class="bg-white rounded-2xl p-4 w-52 lg:p-14 lg:w-80 shadow-lg">
                                    <div id="counter1" class="text-3xl lg:text-6xl p-4 text-[#356d1c] font-bold counter">
                                        0
                                    </div>
                                    <div class="text-center text-gray-700 text-sm lg:text-lg font-medium">
                                        Deployed Manpower
                                    </div>

                                </div>
                            </div>

                            <!-- 2nd Card Center -->
                            <div class="flex justify-center " data-max-count="90" data-aos="zoom-in">
                                <div class="top-0">
                                    <div class="bg-white border rounded-2xl p-4 w-52 lg:p-14 lg:w-80 shadow-lg">
                                        <div id="counter2"
                                            class="text-3xl lg:text-6xl p-4 text-[#356d1c] font-bold counter">
                                            0
                                        </div>
                                        <div class="text-center text-gray-700 font-medium">
                                            Local Partners
                                        </div>

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

                            <!-- 3rd Card Bottom -->
                            <div class=" xl:py-36 flex justify-center items-center " data-max-count="500"
                                data-aos="zoom-in">
                                <div class="bg-white border rounded-2xl p-4 lg:p-14 lg:w-80 shadow-lg">
                                    <div id="counter3" class="text-3xl lg:text-6xl p-4 text-[#356d1c] font-bold counter">
                                        0
                                    </div>
                                    <div class="text-center text-gray-700 font-medium">
                                        Career Opportunities
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="relative bg-[#356d1c] ">
        <div class=" xl:pl-44 relative">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-14 py-8 px-4">
                <div>
                    <div class="flex items-center gap-4">
                        <hr class="border-t bg-yellow-500  px-8 py-1 ">
                        <h1 class="font-bold text-base 2xl:text-3xl text-white">ABOUT US</h1>
                    </div>
                    <p class="pt-4   text-lg 2xl:text-4xl text-white font-semibold tracking-wide py-4">Your Trusted
                        Partner in
                        Talent
                        Acquisition
                    </p>
                    <p class="text-white pb-8 2xl:pb-4 text-sm 2xl:text-lg">
                        Primover Consultancy Services Inc. (PCSI) is a leading consultancy firm dedicated to empowering
                        business with top Filipino talent since 2000. We bridge the gap between your specific requirements
                        and highly qualified professionals accross various IT and non-IT sectors.
                    </p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                        <div class="grid grid-rows-2 gap-2">
                            <div>
                                <img src="{{ asset('images/Revision-Folders/Resources/img-about-1.webp') }}" alt="">
                            </div>
                            <div>
                                <img src="{{ asset('images/Revision-Folders/Resources/img-about-2.webp') }}" alt="">
                            </div>
                        </div>
                        <div>
                            <img src="{{ asset('images/Revision-Folders/Resources/img-about-3.webp') }}" alt="">
                        </div>

                    </div>

                </div>
                <div class="w-full relative col-span-2">
                    <div class="swiper centered-slide-carousel relative pb-14">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="flip-card">
                                    <div class="flip-card-content">
                                        <div class="flip-card-front">
                                            <img class="w-full h-auto absolute"
                                                src="{{ asset('images/Revision-Folders/Resources/card-vision-f.webp') }}"
                                                alt="Card Vision Front">
                                            <div class="relative py-24 md:py-32 xl:py-52">
                                                <p class="font-bold text-sm xl:text-5xl xl:py-14">VISION</p>
                                                <p class="text-xs xl:text-base px-2 xl:px-0">PCSI envisions itself as a
                                                    long-term key
                                                    player in the
                                                    recruitment sector,
                                                    positively influencing companies, jobseekers, and the Philippine economy
                                                    for...</p>
                                            </div>
                                        </div>
                                        <div class="flip-card-back">
                                            <img class="w-full h-auto absolute"
                                                src="{{ asset('images/Revision-Folders/Resources/card-vision-b.webp') }}"
                                                alt="Card Vision Back">
                                            <p class="relative p-4 sm:p-8 lg:p-14 text-sm lg:text-base">Lorem ipsum odor
                                                amet,
                                                consectetuer
                                                adipiscing
                                                elit.
                                                Consequat ad netus
                                                pretium, pellentesque maecenas sapien placerat faucibus. Vitae sem litora
                                                potenti fermentum curae amet. Fringilla ullamcorper donec ultrices mattis
                                                pharetra auctor; nisl venenatis.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide ">
                                <div class="flip-card">
                                    <div class="flip-card-content">
                                        <div class="flip-card-front ">
                                            <img class="w-full h-auto absolute"
                                                src="{{ asset('images/Revision-Folders/Resources/card-mission-f.webp') }}"
                                                alt="Card Mission Front">
                                            <div class="relative py-24 md:py-32 xl:py-52">
                                                <p class="font-bold text-sm xl:text-5xl xl:py-14">MISSION</p>
                                                <p class="text-xs xl:text-base px-2 lg:px-0">PCSI envisions itself as a
                                                    long-term key
                                                    player in the
                                                    recruitment sector,
                                                    positively influencing companies, jobseekers, and the Philippine economy
                                                    for...</p>
                                            </div>
                                        </div>
                                        <div class="flip-card-back">
                                            <img class="w-full h-auto absolute"
                                                src="{{ asset('images/Revision-Folders/Resources/card-mission-b.webp') }}"
                                                alt="Card Mission Back">
                                            <p class="relative p-4 sm:p-8 lg:p-14 text-sm lg:text-base">Lorem ipsum odor
                                                amet,
                                                consectetuer
                                                adipiscing
                                                elit.
                                                Consequat ad netus
                                                pretium, pellentesque maecenas sapien placerat faucibus. Vitae sem litora
                                                potenti fermentum curae amet. Fringilla ullamcorper donec ultrices mattis
                                                pharetra auctor; nisl venenatis.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="swiper-pagination"></div> --}}
                        {{-- <div class="flex justify-between px-4">
                            <div class="py-4">
                                <button
                                    class="bg-white text-[#356d1c] px-8 py-2 rounded-full font-semibold shadow-full">Discover
                                    More</button>
                            </div>
                        </div> --}}
                    </div>
                    <div class="flex justify-start lg:px-48 lg:py-4">
                        <a href="{{ url('/about_us') }}">
    <button class="bg-white text-[#356d1c] px-8 py-2 rounded-full font-semibold shadow-full">
        Discover More
    </button>
</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div>
        <div class="relative">
            <img class="absolute z-0 object-cover w-full h-full"
                src="{{ asset('images/Revision-Folders/Resources/bg-careers.jpg') }}" alt="">
            <div class="container mx-auto">
                <div class="grid grid-cols-1 md:grid-cols-2 relative w-full">
                    <div class="flex justify-center items-center gap-4 mt-32 md:mt-24">
                        <div class="bg-yellow-400 w-32 h-1"></div>
                        <div>
                            <h2 class="text-black text-xl md:text-3xl font-bold">CAREER OPPORTUNITIES</h2>
                        </div>
                    </div>
                    <div class="p-10">
                        <!-- Flex container for alignment -->
                        <div class="flex flex-col md:flex-row justify-end gap-8 mt-32 md:mt-24">
                            <!-- Dynamic button containers for categories -->
                            @foreach ($category as $categories)
                                <div class="bg-[#356d1c] rounded-full flex items-center justify-center relative w-60 h-12">
                                    <div>
                                        <a href="{{ url('job_opportunities_single_page', $categories->id) }}">
                                            <button class="text-white font-semibold w-full">
                                                {{ $categories->name }}
                                            </button>
                                        </a>
                                    </div>
                                    <div class="hidden lg:block">
                                        <img class="absolute right-4 top-1/2 transform -translate-y-1/2"
                                            src="{{ asset('images/Revision-Folders/Resources/icon-arrow.png') }}"
                                            alt="">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 p-14 relative inset-0 z-20">
                    @foreach ($careers as $career)
                        <div class="card-services max-w-full sm:max-w-md md:max-w-lg lg:max-w-xl">
                            <div class="bg-white h-full w-full 2xl:p-6">
                                <div class="flex flex-col md:flex-row justify-between">
                                    <h1 class="font-semibold text-2xl 2xl:text-3xl">{{ $career->position }}</h1>
                                </div>
                                <div class="p-4 text-sm 2xl:text-lg">
                                    <h1 class="font-semibold">Job Qualifications</h1>
                                    <p class=" pl-5 mt-2">
                                        @foreach (explode(',', str_replace(['{', '}'], '', $career->qualifications)) as $qualification)
                                            <p>{!! $qualification !!}</p>
                                        @endforeach
                                    </p>
                                </div>
                                <a href="{{ url('job_description', $career->id) }}"
                                    class="card-services-button mt-4 text-center">Apply Now</a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white h-full w-full">
        <div class=" w-full flex justify-center">
            <div>
                <h1 class="flex justify-center text-base md:text-4xl font-bold m-12">Our Service</h1>
                <div class="bg-yellow-400 p-1 w-72 md:w-96 "></div>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 justify-start md:justify-center relative">
            <div>
                <!--Empty Div-->
            </div>
            <div class="relative">
                <!-- Image Section -->
                <div class="p-10 lg:p-20 flex flex-col md:flex-row justify-center gap-10">
                    <div
                        class="bg-gradient-to-b from-[#ffffff] via-[#ffffff] to-[#b3ffb3] p-8 lg:p-14 rounded-2xl shadow-2xl">
                        <h1 class="text-green-800 font-bold text-center text-2xl lg:text-4xl pb-8 lg:pb-14">STAFF
                            AUGMENTATION</h1>
                        <p class="text-center text-green-800">Flexibly expand your team with skilled professionals on a
                            temporary basis. Reduce costs and access specialized talent without permanent hiring.</p>
                    </div>
                    <div
                        class="bg-gradient-to-b from-[#ffffff] via-[#ffffff] to-[#b3ffb3] p-8 lg:p-14 rounded-2xl shadow-2xl">
                        <h1 class="text-green-800 font-bold text-center text-2xl md:text-4xl pb-8 lg:pb-14 lg:px-14">
                            MANAGED
                            SERVICES</h1>
                        <p class="text-center text-green-800">Flexibly expand your team with skilled professionals on a
                            temporary basis. Reduce costs and access specialized talent without permanent hiring.</p>
                    </div>
                </div>



                <!-- Text Section Inside the Image -->
                {{-- <div class="absolute inset-0 grid grid-rows-2 text-green-800 font-bold">

                    <h1 class="text-base lg:text-3xl uppercase w-1/2 flex text-start items-center px-40 lg:px-72">
                        Staff
                        Augmentation</h1>
                    <div class="w-3/4">
                        <p class="text-[0.7rem] md:text-xl font-light max-w-md p-4">
                            Flexibly expand your team with skilled professionals on a temporary basis. Reduce costs and
                            access
                            specialized talent without permanent hiring.
                        </p>
                    </div>

                </div> --}}
            </div>

        </div>

        <div>
            <!--Empty Div-->
        </div>
    </div>
    </div>
    </div>
    </div>
    </div>

    <style>
        /* From Uiverse.io by Fcodingx */
        .card {
            width: 190px;
            height: 120px;
            padding: 0.5rem;
            border-radius: 8px;
            transform: skewX(10deg);
            transition: .4s;
            overflow: hidden;
            color: white;
        }

        .card:hover {
            width: 15rem;
            height: 30rem;
            transform: skew(0deg);
        }

        .align {
            padding: 1rem;
            display: flex;
            flex-direction: row;
            gap: 5px;
            align-self: flex-start;
        }

        .card h1 {
            text-align: start;
            margin: 1.3rem;
        }

        .swiper-wrapper {
            width: 100%;
            height: auto;
        }



        /*FOR FLIP CARD CAROUSEL*/
        /* Flip-card container styling */
        .flip-card {
            width: 30rem;
            height: 30rem;
            cursor: pointer;
            perspective: 1000px;
            display: flex;
            justify-content: start;
            align-items: start;
        }

        /* Inner content styling */
        .flip-card-content {
            width: 100%;
            height: 100%;
            text-align: center;
            position: relative;
            transition: all 2.0s;
            transform-style: preserve-3d;
        }

        /* Flip on hover */
        .flip-card:hover .flip-card-content {
            transform: rotateY(180deg);
        }

        /* Front and back faces of the card */
        .flip-card-front,
        .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }

        /* Back face */
        .flip-card-back {
            transform: rotateY(180deg);
        }

        /* Responsive adjustments */
        @media (max-width: 1024px) {
            .flip-card {
                width: 20rem;
                height: 20rem;
            }

            .flip-card-content p {
                padding: 2rem;
            }
        }

        @media (max-width: 768px) {
            .flip-card {
                width: 20rem;
                height: 20rem;
            }

            .flip-card-content p {
                padding: 1.5rem;
            }
        }

        @media (max-width: 640px) {
            .flip-card {
                width: 15rem;
                height: 15rem;
            }

            .flip-card-content p {
                padding: 1rem;
            }
        }

        /* Original card style */
        .card {
            width: 190px;
            height: 120px;
            padding: 0.5rem;
            border-radius: 8px;
            transform: skewX(10deg);
            transition: .4s;
            overflow: hidden;
            color: white;
        }

        .card:hover {
            width: 15rem;
            height: 30rem;
            transform: skew(0deg);
        }

        .align {
            padding: 1rem;
            display: flex;
            flex-direction: row;
            gap: 5px;
            align-self: flex-start;
        }

        .card h1 {
            text-align: start;
            margin: 1.3rem;
        }

        .swiper-wrapper {
            width: 100%;
            height: auto;
        }



        /*FOR CAREERS ANIMATION*/
        /* From Uiverse.io by alexruix */
        .card-services {
            width: 100%;
            max-width: 40rem;
            height: auto;
            border-radius: 20px;
            background: #ffffff;
            position: relative;
            padding: 1.8rem;
            border: 2px solid #c3c6ce;
            transition: 0.5s ease-out;
            overflow: visible;
        }

        .card-services-details {
            color: black;
            height: 100%;
            gap: 0.5em;
            display: grid;
            place-content: center;
        }

        .card-services-button {
            transform: translate(-50%, 125%);
            width: 60%;
            border-radius: 1rem;
            border: none;
            background-color: #42684f;
            color: #fff;
            font-size: 1rem;
            padding: 0.5rem 1rem;
            position: absolute;
            left: 50%;
            bottom: 0;
            opacity: 0;
            transition: 0.3s ease-out;
        }

        .card-services .text-body {
            color: rgb(134, 134, 134);
        }

        .card-services .text-title {
            font-size: 1.5em;
            font-weight: bold;
        }

        .card-services:hover {
            border-color: #42684f;
            box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
        }

        .card-services:hover .card-services-button {
            transform: translate(-50%, 50%);
            opacity: 1;
        }
    </style>

    <script>
        var swiper = new Swiper('.swiper-container', {
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            
            // autoplay: {
            //     delay: 5000, // Carousel auto-slide every 5 seconds
            //     disableOnInteraction: false, // Keep autoplay even when interacting
            // },
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            new Swiper('.centered-slide-carousel', {
                loop: false,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                autoplay: {
                    delay: 3000, // Carousel auto-slide every 5 seconds
                    disableOnInteraction: false, // Keep autoplay even when interacting
                },
                centeredSlides: true,
                slidesPerView: 1.9,
                spaceBetween: 20,
                breakpoints: {
                    1024: {
                        slidesPerView: 1.5,
                        spaceBetween: 10,
                    },
                    768: {
                        slidesPerView: 1.9,
                        spaceBetween: 20,
                    },
                    320: {
                        slidesPerView: 1,
                        spaceBetween: 10,
                    },
                },
            });
        });
    </script>

    <script>
        function updateCounter(id, endValue) {
            const element = document.getElementById(id);
            let count = 0;
            const increment = 5; // Increase this value to speed up counting
            const intervalTime = 15; // Decrease this value to speed up counting
            const interval = setInterval(() => {
                if (count >= endValue) {
                    clearInterval(interval);
                    element.textContent = `${endValue}+`; // Add `+` when counting is done
                } else {
                    count = Math.min(count + increment, endValue); // Ensure count does not exceed endValue
                    element.textContent = `${count}+`; // Add `+` while counting
                }
            }, intervalTime); // Adjust the interval time for speed of increment
        }

        // Initialize counters
        document.addEventListener('DOMContentLoaded', () => {
            updateCounter('counter1', 300); // Update with actual end value
            updateCounter('counter2', 90); // Update with actual end value
            updateCounter('counter3', 500); // Update with actual end value
        });
    </script>




    @include('layouts.footer')
@endsection