@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

@include('layouts.navbar')

<div>
    <!-- Banner -->
    <div class="relative w-full h-full overflow-hidden swiper-container">
        <div class="w-full swiper-wrapper ">
            @foreach ($banner as $banner)
            <div class="relative swiper-slide">
                <img src="{{ asset($banner->image_path) }}" alt="Banner" class="absolute object-cover w-full h-full">
                <div class="container relative max-w-screen-xl mx-auto lg:h-screen ">
                    <div class="flex flex-col justify-center text-white lg:h-screen align-center">
                        <div class="w-1/2 py-4 2xl:pb-14">
                            <!-- Title -->
                            <div class="px-2 2xl:pr-14">
                                <h1 class="py-2 text-xs font-semibold md:text-4xl">{{ $banner->title }}
                                </h1>
                            </div>
                            <!-- SubTitle -->
                            <div class="px-2 pr-8 pb-14 lg:pb-32 md:pr-14 lg:pr-24">
                                <p class="text-[0.5rem] md:text-base lg:text-lg">{{ $banner->subtitle }}</p>
                            </div>
                            <div class="px-2">
                                <a href="{{url('services')}}">
                                    <button
                                        class="text-white bg-[#FBAF43] font-medium rounded-full text-[0.5rem] px-2 py-1 md:text-base lg:text-md lg:px-8 lg:py-2">GET
                                        STARTED</button>
                                </a>

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


    <!-- Content -->
    <div class="container w-full h-full max-w-screen-xl mx-auto mt-8">
        <div class="grid items-center grid-cols-1 gap-8 px-4 overflow-hidden lg:grid-cols-2">

            <div data-aos="fade-right"
                data-aos-duration="1500" class="space-y-8">
                <h1 class="text-2xl font-bold ">Who We Are</h1>
                <p class="text-md">tipón is a Federation of Cooperative that provides back-end support services to member cooperative such as Human Resource Development & Organizational Development, Regulatory Compliance, Finance, Accounting & Administrative Services, General Legal Counselling, Treasury & Banking, Legal Documentation, Maintenance & Management, Information Technology, Marketing & Communication Services, Plans, Projects & Programs Monitoring, Business Platforms</p>
                <div class="flex justify-center lg:justify-start">
                    <a href="{{url('about_us')}}">
                        <button class="bg-[#FBAF43] text-white shadow-lg px-8 py-2 text-md rounded-full">KNOW MORE ABOUT US</button>
                    </a>

                </div>
            </div>

            <div data-aos="fade-left"
                data-aos-duration="1500">
                <img src="{{ asset('images/imgabout1.webp') }}" alt="Banner">
            </div>

            <div data-aos="fade-right"
                data-aos-duration="1500" class="py-14">
                <img src="{{ asset('images/imgabout2.webp') }}" alt="Banner">
            </div>

            <div data-aos="fade-left"
                data-aos-duration="1500">
                <h1 class="text-2xl font-bold text-right ">Why Us</h1>
                <div class="grid items-center grid-cols-1 gap-8 text-xs md:grid-cols-2">
                    <div>
                        <div class="flex gap-2 py-4">
                            <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                            <span class="flex items-center">VAT Exempted</span>
                        </div>
                        <hr>
                        <div class="flex gap-2 py-4">
                            <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                            <span class="flex items-center">Member-Owner Benefits</span>
                        </div>
                        <hr>
                        <div class="flex gap-2 py-4">
                            <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                            <span class="flex items-center">DO 174 Complaint</span>
                        </div>
                        <hr>
                        <div class="flex gap-2 py-4">
                            <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                            <span class="flex items-center">Interest on share capital and Patronage Refunds</span>
                        </div>
                    </div>
                    <div>
                        <div class="flex gap-2 py-4">
                            <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                            <span class="flex items-center">In-house Industrial Engineering Team</span>
                        </div>
                        <hr>
                        <div class="flex gap-2 py-4">
                            <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                            <span class="flex items-center">Partner Credit Cooperative Loans</span>
                        </div>
                        <hr>
                        <div class="flex gap-2 py-4">
                            <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                            <span class="flex items-center">In-house Medical Benefits</span>
                        </div>
                        <hr>
                        <div class="flex gap-2 py-4">
                            <img src="{{ asset('images/icon-check.webp') }}" alt="Banner" class="w-8 h-8">
                            <span class="flex items-center">High-yield Investment Opportunities</span>
                        </div>
                    </div>
                </div>

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

    <div class="relative">
        <img src="{{ asset('images/bg-services.webp') }}" alt="Banner"
            class="absolute object-cover w-full h-full ">
        <div data-aos="fade-up"
            data-aos-duration="1500" class="relative flex justify-center px-4 py-20">
            <div class="container max-w-screen-xl mx-auto space-y-8">
                <div class="">
                    <h1 class="text-2xl font-bold text-center text-white lg:text-4xl">Multi-Industry
                        Services</h1>
                    <p class="text-sm text-center text-white">At Tipón, we provide diverse, comprehensive support across industries to help member cooperatives thrive through services like HR development, IT solutions, and legal advisory.</p>
                </div>
                <div class="container relative py-4 mx-auto " data-aos=" fade-up" data-aos-duration="1500">
                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 ">
                        <div data-aos="zoom-in"
                            data-aos-duration="1500" class="relative ">
                            <img src=" {{ asset('images/card-service-1.webp') }}" alt="Card Service 1" class="w-full h-full ">
                            <div class="absolute inset-0 grid items-center grid-rows-2 p-8 gap-y-6">
                                <h1
                                    class="flex justify-center py-6 pl-4 text-lg text-white rounded xl:text-xl">
                                    AGRIBUSINESS
                                </h1>
                                <p class="text-xs text-white">Assisting agribusiness cooperatives with tools to optimize and grow their operations.</p>
                            </div>
                        </div>

                        <div data-aos="zoom-in"
                            data-aos-duration="1500" class="relative ">
                            <img src=" {{ asset('images/card-service-2.webp') }}" alt="Card Service 1" class="w-full h-full ">
                            <div class="absolute inset-0 grid items-center grid-rows-2 p-8 gap-y-6">
                                <h1
                                    class="flex justify-center py-6 pl-4 text-lg text-white rounded xl:text-xl">
                                    AVIATION SUPPORT
                                </h1>
                                <p class="text-xs text-white">Supporting aviation industry needs with reliable and efficient workforce solutions.</p>
                            </div>
                        </div>

                        <div data-aos="zoom-in"
                            data-aos-duration="1500" class="relative ">
                            <img src=" {{ asset('images/card-service-3.webp') }}" alt="Card Service 1"
                                class="w-full h-full ">
                            <div class="absolute inset-0 grid items-center grid-rows-2 p-8 gap-y-6">
                                <h1
                                    class="flex justify-center py-6 pl-4 text-lg text-white rounded xl:text-xl">
                                    CONSTRUCTION
                                </h1>
                                <p class="text-xs text-white">Helping construction cooperatives with services that streamline and enhance project delivery.</p>
                            </div>
                        </div>

                        <div data-aos="zoom-in"
                            data-aos-duration="1500" class="relative">
                            <img src=" {{ asset('images/card-service-4.webp') }}" alt="Card Service 1"
                                class="w-full h-full ">
                            <div class="absolute inset-0 grid items-center grid-rows-2 p-8 gap-y-6">
                                <h1
                                    class="flex justify-center py-6 pl-12 text-lg text-white rounded xl:text-xl">
                                    FACILITIES MAINTENANCE AND MANAGEMENT
                                </h1>
                                <p class="text-xs text-white">Ensuring well-maintained and managed facilities for seamless operations.</p>
                            </div>
                        </div>

                        <div data-aos="zoom-in"
                            data-aos-duration="1500" class="relative ">
                            <img src=" {{ asset('images/card-service-5.webp') }}" alt="Card Service 1"
                                class="w-full h-full ">
                            <div class="absolute inset-0 grid items-center grid-rows-2 p-8 gap-y-6">
                                <h1
                                    class="flex justify-center py-6 pl-4 text-lg text-white rounded xl:text-xl">
                                    MANUFACTURING
                                </h1>
                                <p class="text-xs text-white">Offering specialized support for cooperatives in manufacturing to boost productivity.</p>
                            </div>
                        </div>

                        <div data-aos="zoom-in"
                            data-aos-duration="1500" class="relative ">
                            <img src=" {{ asset('images/card-service-6.webp') }}" alt="Card Service 1"
                                class="w-full h-full ">
                            <div class="absolute inset-0 grid items-center grid-rows-2 p-8 gap-y-6">
                                <h1
                                    class="flex justify-center py-6 pl-12 text-lg text-white rounded xl:text-xl">
                                    HOTEL & HOSPITALITY
                                </h1>
                                <p class="text-xs text-white">Enhancing hospitality services for cooperative hotels to ensure guest satisfaction.</p>
                            </div>
                        </div>

                        <div data-aos="zoom-in"
                            data-aos-duration="1500" class="relative ">
                            <img src=" {{ asset('images/card-service-7.webp') }}" alt="Card Service 1"
                                class="w-full h-full ">
                            <div class="absolute inset-0 grid items-center grid-rows-2 p-8 gap-y-6">
                                <h1
                                    class="flex justify-center py-6 pl-12 text-lg text-white rounded xl:text-xl">
                                    RETAIL AND MERCHANDISING
                                </h1>
                                <p class="px-4 text-xs text-white 2xl:px-0">Boosting retail cooperatives with operational and logistical support.</p>
                            </div>
                        </div>

                        <div data-aos="zoom-in"
                            data-aos-duration="1500" class="relative ">
                            <img src=" {{ asset('images/card-service-8.webp') }}" alt="Card Service 1"
                                class="w-full h-full ">
                            <div class="absolute inset-0 grid items-center grid-rows-2 p-8 gap-y-6">
                                <h1
                                    class="flex justify-center py-6 pl-12 text-lg text-white rounded xl:text-xl">
                                    RESTAURANT & QSR
                                </h1>
                                <p class="text-xs text-white">Helping food service cooperatives deliver quality experiences and grow their businesses.</p>
                            </div>
                        </div>

                        <div class="hidden xl:block"></div>
                        <div data-aos="zoom-in"
                            data-aos-duration="1500" class="container relative mx-auto ">
                            <img src=" {{ asset('images/card-service-9.webp') }}" alt="Card Service 1"
                                class="w-full h-full ">
                            <div class="absolute inset-0 grid items-center grid-rows-2 p-8 gap-y-6">
                                <h1
                                    class="flex justify-center py-6 pl-4 text-lg text-white rounded xl:text-xl">
                                    SOLAR FARM
                                </h1>
                                <p class="text-xs text-white">Assisting in the sustainable growth of energy cooperatives through solar farm management.</p>
                            </div>
                        </div>

                        <div data-aos="zoom-in"
                            data-aos-duration="1500" class="container relative mx-auto ">
                            <img src=" {{ asset('images/card-service-10.webp') }}" alt="Card Service 1"
                                class="w-full h-full ">
                            <div class="absolute inset-0 grid items-center grid-rows-2 p-8 gap-y-6">
                                <h1
                                    class="flex justify-center py-6 pl-12 text-lg text-white rounded xl:text-xl">
                                    WAREHOUSE & SUPPLY CHAIN
                                </h1>
                                <p class="text-xs text-white">Streamlining logistics for cooperatives in warehousing and supply chain management.</p>
                            </div>
                        </div>
                        <div class="hidden xl:block"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div>
        <div class="h-full ">
            <div class="pt-8 bg-gray-50">
                <div data-aos="fade-up"
                    data-aos-duration="1500" class="max-w-screen-xl px-4 mx-auto sm:px-6 lg:px-8">
                    <div class="max-w-4xl mx-auto text-center">
                        <h2
                            class="font-extrabold leading-9 text-gray-900 lg:text-3xl dark:text-black sm:text-sm sm:leading-10">
                            Your Partner for Sustainable Growth
                        </h2>
                        <p class="mt-3 text-base leading-7 text-black sm:mt-4">
                            Growth isn’t just about expanding; it’s about sustainability. Through our shared cooperative values and expert assistance, we help members optimize operations and reach new heights while staying true to the principles of cooperative development.
                        </p>
                    </div>

                    @include('layouts.card')
                </div>
            </div>
        </div>
        <div class="bg-gray-50">
            <div class="container max-w-screen-xl py-32 mx-auto ">
                <div class="flex flex-col justify-between gap-4 overflow-hidden lg:flex-row">
                    <h1 data-aos="fade-right"
                        data-aos-duration="1500" class="text-4xl font-semibold text-center lg:text-start">Join Our Growing Team</h1>
                    <div data-aos="fade-left"
                        data-aos-duration="1500" class="flex items-center justify-center px-8 lg:justify-start">
                        <a href="{{url('career_portal')}}">
                            <button class=" bg-[#FBAF43] rounded-full text-white font-semibold shadow-xl p-2 px-4">VIEW
                                ALL JOB
                                OPPORTUNITIES</button>
                        </a>

                    </div>
                </div>
                <div class="grid grid-cols-1 py-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                    @foreach ($careers as $career)
                    <div data-aos="zoom-in"
                        data-aos-duration="1500" class="max-w-sm p-6 m-4 bg-white rounded-lg shadow-2xl">
                        <h2 class="mb-2 text-xl font-bold">{{ $career->title }}</h2>
                        <div class="flex items-center mb-4 text-gray-600">
                            <i class='bx bx-map'></i>
                            <span>{{ $career->location->location_name }}</span>
                        </div>
                        <p class="mb-6 text-gray-500">{!! $career->subtitle !!}</p>

                        <a href="{{url('/job_details',$career->id)}}">
                            <button class="bg-[#FBAF43] text-white font-semibold py-2 px-4 rounded-full">
                                APPLY NOW
                            </button>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="relative">
            <img src="{{ asset('images/bg-map.webp') }}" alt="Banner"
                class="absolute object-cover w-full h-full ">
            <div class="container relative grid max-w-screen-xl grid-cols-1 px-4 mx-auto overflow-hidden lg:grid-cols-2">
                <div data-aos="fade-right"
                    data-aos-duration="1500" class="py-4">
                    <h1 class="text-3xl font-semibold text-center text-white lg:text-start lg:text-6xl py-14">
                        Nationwide Capabilities
                    </h1>
                    <img src="{{ asset('images/obj-map.webp') }}" alt="Banner" class="w-full h-auto px-2">
                </div>
                <div data-aos="fade-left"
                    data-aos-duration="1500" class="pb-8">
                    @include('layouts.contact')
                </div>
            </div>
        </div>
    </div>

</div>

<div class="container ml-auto ">
    <div class="py-32 ">
        <div class="grid grid-cols-1 py-2 overflow-hidden lg:grid-cols-3 gap-14">
            <div data-aos="fade-right"
                data-aos-duration="1500" class="flex flex-col justify-between h-full">
                <div>
                    <h1 class="text-5xl font-bold">What's New at Asiapro</h1>
                    <p class="pt-4 ">Explore our blog to learn more about our news and updates</p>
                </div>
                <div class="flex flex-col items-center justify-between md:flex-row">
                    <a href="{{url('/news_and_promotions')}}">
                        <div>
                            <button class="bg-[#FBAF43] px-8 py-2 rounded-full text-white font-bold shadow-full">SEE
                                ALL ARTICLES</button>
                        </div>
                    </a>

                </div>
            </div>

            <div data-aos="fade-left"
                data-aos-duration="1500" class="relative w-full col-span-2">
                <div class="absolute left-0 z-10 lg:-ml-8 top-40">
                    <div class="flex flex-col items-center justify-center gap-4 ">
                        <button id="slider-button-left" class=" bg-gray-400 bg-opacity-50 text-2xl rounded-full  h-10 w-10 flex justify-center items-center text-[#115D8D]">
                            <i class='bx bx-left-arrow-alt'></i>
                        </button>

                    </div>

                </div>
                <div class="absolute right-0 z-10 lg:-ml-8 top-40">
                    <button id="slider-button-right" class=" bg-gray-400 bg-opacity-50 text-2xl rounded-full  h-10 w-10 flex justify-center items-center text-[#115D8D]">
                        <i class='bx bx-right-arrow-alt'></i>
                    </button>

                </div>

                <div class="relative z-0 swiper centered-slide-carousel pb-14">


                    <div class="relative swiper-wrapper">

                        @foreach ($newsItems as $news)
                        <div class="swiper-slide">
                            <a href="{{url('news_and_promotions_details', $news->id)}}">
                                <div class="w-full h-full mb-6 rounded-lg news-item hover:shadow-2xl">
                                    <img src="{{ asset($news->image_path) }}" alt="News Image"
                                        class="object-cover w-full rounded-t-lg">
                                    <div class="p-4">
                                        <!-- Date Section -->
                                        <div class="flex items-center gap-4 mb-2">
                                            <div
                                                class="bg-[#115D8D] text-white text-center rounded-lg p-4 flex flex-col justify-center items-center">
                                                <span
                                                    class="text-xl font-bold">{{ $news->created_at->format('d') }}</span>
                                                <span class="text-sm">{{ $news->created_at->format('M') }}</span>
                                            </div>
                                            <!-- Content Section -->
                                            <h4 class="text-sm font-bold">{{ $news->title }}</h4>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        @endforeach
                    </div>
                    <div class="items-end">
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('layouts.footer')

<!--JAVASCRIPT CODE-->
<script>
    var swiper = new Swiper(".centered-slide-carousel", {
        centeredSlides: false,
        paginationClickable: true,
        loop: true,
        slidesPerView: 1.5,
        spaceBetween: 30,
        slideToClickedSlide: true,
        pagination: {
            el: ".centered-slide-carousel .swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: "#slider-button-right",
            prevEl: "#slider-button-left",
        },
        breakpoints: {
            1920: {
                slidesPerView: 2.5,
                spaceBetween: 30
            },
            1028: {
                slidesPerView: 2.5,
                spaceBetween: 30
            },
            990: {
                slidesPerView: 2.5,
                spaceBetween: 30
            }
        }
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const swiper = new Swiper('.swiper-container', {
            // Optional parameters
            loop: true,
            // Enable keyboard navigation
            keyboard: {
                enabled: true,
                onlyInViewport: false,
            },
            // Add more configurations as needed
        });
    });
</script>



@endsection