@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

@include('components.navbar')
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<script>
    AOS.init();
</script>

<section class="splide custom-pagination">
    <div class="splide__track">
        <ul class="splide__list">
            @foreach($banner as $banners)
            <div class="splide__slide">
                <div data-aos="fade-right" class="relative flex items-center justify-center w-screen min-h-full josefinfont">
                    <img src="{{ url('/banner/images/'. $banners->banner) }}" alt="Banner" class="object-cover w-full bg-center h-96 lg:h-full">
                    <div class="container absolute py-12 mx-auto xl:py-12">
                        <div class="flex flex-col mx-4 md:mx-8 lg:mx-12 xl:mx-20">
                            <div class="w-full space-y-2 md:w-2/4">
                                <h3 class="text-lg font-bold text-white md:text-lg lg:text-xl xl:text-6xl">
                                    {{$banners->title}}
                                </h3>
                                <h1 class="text-sm text-white lg:text-lg xl:text-lg">
                                    {!! nl2br($banners->caption) !!}
                                </h1>
                            </div>
                        </div>
                    </div>
                    <img src="{{url('images/mask.png')}}" alt="" class="absolute hidden md:block -bottom-8 -right-20 h-96">
                </div>
            </div>
            @endforeach
        </ul>
    </div>
</section>

<script>
    var splide = new Splide('.splide.custom-pagination', {
        arrows: false,
        type: 'loop',
        pagination: true,
        autoplay: true, // Enable autoplay
        interval: 5000,
    });

    splide.mount();
</script>

<div class="flex items-center justify-center josefinfont">
    <div class="container mx-auto">
        <div data-aos="fade-down" class="grid grid-cols-1 my-20 md:grid-cols-2 ">
            <div class="space-y-12 ">
                <div class="mx-4 space-y-8 md:mx-8 lg:mx-20">
                    <h1 class="text-2xl font-bold lg:text-4xl">Make Future Better</h1>
                    <p class="text-sm text-justify lg:text-lg">
                        Landing a job abroad doesn’t guarantee better future. Your employment must be
                        legally processed and deployed by a professional and responsible agency.
                        Our vision is to provide employment within your reach but our mission is to be an
                        instrument of our workers’ success. Together, we can make your future better.
                    </p>
                </div>

                <div class="grid grid-cols-1 mx-4 gap-y-4 md:mx-8 lg:mx-20">
                    <div class="flex items-center justify-center text-center ">
                        <a class="w-full" href="{{url('careers')}}">
                            <button class="w-full">
                                <ul class="grid w-full grid-cols-5 px-8 py-4 border-2 shadow-xl rounded-2xl">
                                    <li class="flex items-center justify-start">
                                        <img src="{{asset('images/recruitment_icon.png')}}" class="w-12 h-12" alt="">
                                    </li>
                                    <li class="flex items-center justify-center col-span-3">
                                        <p class="text-xs font-bold md:text-sm lg:text-lg">Apply Online</p>
                                    </li>
                                    <li class="flex items-center justify-end">
                                        <svg fill="#000000" class="w-4 h-4" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.01 512.01" xml:space="preserve">
                                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                            <g id="SVGRepo_iconCarrier">
                                                <g>
                                                    <g>
                                                        <path d="M505.754,240.923L271.088,6.256c-3.989-4.011-9.408-6.251-15.083-6.251H21.338c-8.619,0-16.427,5.184-19.712,13.163 c-3.307,7.979-1.472,17.152,4.629,23.253l219.584,219.584L6.256,475.59c-6.101,6.101-7.936,15.275-4.629,23.253 c3.285,7.979,11.093,13.163,19.712,13.163h234.667c5.675,0,11.093-2.24,15.083-6.251l234.667-234.667 C514.096,262.747,514.096,249.264,505.754,240.923z"></path>
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                    </li>
                                </ul>
                            </button>
                        </a>
                    </div>
                    <div class="flex items-center justify-center text-center ">
                        <a class="w-full showrequirementsmodal">
                            <button class="w-full ">
                                <ul class="grid w-full grid-cols-5 px-8 py-4 border-2 shadow-xl rounded-2xl">
                                    <li class="flex items-center justify-start">
                                        <img src="{{asset('images/About_icon.png')}}" class="w-12 h-12" alt="">
                                    </li>
                                    <li class="flex items-center justify-center col-span-3">
                                        <p class="text-xs font-bold md:text-sm lg:text-lg">List of Requirement</p>
                                    </li>
                                    <li class="flex items-center justify-end">
                                        <svg fill="#000000" class="w-4 h-4" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.01 512.01" xml:space="preserve">
                                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                            <g id="SVGRepo_iconCarrier">
                                                <g>
                                                    <g>
                                                        <path d="M505.754,240.923L271.088,6.256c-3.989-4.011-9.408-6.251-15.083-6.251H21.338c-8.619,0-16.427,5.184-19.712,13.163 c-3.307,7.979-1.472,17.152,4.629,23.253l219.584,219.584L6.256,475.59c-6.101,6.101-7.936,15.275-4.629,23.253 c3.285,7.979,11.093,13.163,19.712,13.163h234.667c5.675,0,11.093-2.24,15.083-6.251l234.667-234.667 C514.096,262.747,514.096,249.264,505.754,240.923z"></path>
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                    </li>
                                </ul>
                            </button>
                        </a>
                    </div>

                    <div class="flex items-center justify-center text-center ">
                        <a class="w-full" href="{{url('branches')}}">
                            <button class="w-full">
                                <ul class="grid w-full grid-cols-5 px-8 py-4 border-2 shadow-xl rounded-2xl">
                                    <li class="flex items-center justify-start">
                                        <img src="{{asset('images/office_Icon.png')}}" class="w-12 h-12" alt="">
                                    </li>
                                    <li class="flex items-center justify-center col-span-3">
                                        <p class="text-xs font-bold md:text-sm lg:text-lg">List of Branches</p>
                                    </li>
                                    <li class="flex items-center justify-end">
                                        <svg fill="#000000" class="w-4 h-4" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.01 512.01" xml:space="preserve">
                                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                            <g id="SVGRepo_iconCarrier">
                                                <g>
                                                    <g>
                                                        <path d="M505.754,240.923L271.088,6.256c-3.989-4.011-9.408-6.251-15.083-6.251H21.338c-8.619,0-16.427,5.184-19.712,13.163 c-3.307,7.979-1.472,17.152,4.629,23.253l219.584,219.584L6.256,475.59c-6.101,6.101-7.936,15.275-4.629,23.253 c3.285,7.979,11.093,13.163,19.712,13.163h234.667c5.675,0,11.093-2.24,15.083-6.251l234.667-234.667 C514.096,262.747,514.096,249.264,505.754,240.923z"></path>
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                    </li>
                                </ul>
                            </button>
                        </a>
                    </div>
                </div>
            </div>
            <div class="m-auto ">
                <img src="{{asset('images/vector.png')}}" alt="">
            </div>
        </div>
    </div>
</div>

<div class="flex justify-center text-center item-center josefinfont">
    <div class="container">
        <div data-aos="fade-down" class="text-center">
            <h3 class="text-2xl font-bold text-black lg:text-4xl"> Our Employment Process</h3>
        </div>
    </div>
</div>


<div class="relative flex items-center justify-center text-center josefinfont">
    <div class="container relative mx-auto">
        <div class="relative grid grid-cols-1 gap-8 mx-4 my-12 md:grid-cols-2 lg:grid-cols-4 md:mx-8 lg:mx-12 xl:mx-20">
            <div class="absolute inset-0 flex items-center justify-center">
                <img src="{{asset('images/circle.png')}}" class="hidden w-auto -mt-20 lg:block" alt="">
            </div>
            @foreach($progresscircle as $progress_circle)
            <!-- Circle 1 -->
            <div data-aos="flip-left" class="relative z-10 flex flex-col items-center justify-center text-center">
                <div class="bg-white progress-circle" data-percentage="{{$progress_circle->circle_value}}" data-max-percentage="{{$progress_circle->max_circle_value}}">
                    <svg class="w-full h-full">
                        <circle cx="50%" cy="50%" r="45%" stroke-width="10" class="text-gray-200" stroke="currentColor" fill="none" />
                        <circle cx="50%" cy="50%" r="45%" stroke-width="10" class="text-red-500" stroke="currentColor" fill="none" stroke-dasharray="282.743" />
                    </svg>
                    <span class="absolute inset-0 flex items-center justify-center text-xl font-semibold">{{$progress_circle->circle_value}}</span>
                </div>
                <h3 class="mt-4 text-lg font-bold lg:text-2xl">{{$progress_circle->title}}</h3>
                <p class="text-gray-500">{{$progress_circle->description}}</p>
            </div>
            <script>
                document.addEventListener("DOMContentLoaded", () => {
                    document.querySelectorAll(".progress-circle").forEach(circle => {
                        const percentage = circle.getAttribute("data-percentage");
                        const maxPercentage = circle.getAttribute("data-max-percentage");
                        const circumference = 2 * Math.PI * 45;
                        const offset = circumference - (percentage / maxPercentage) * circumference;
                        const progress = circle.querySelector("circle.text-red-500");
                        progress.style.strokeDashoffset = offset;
                    });
                });
            </script>
            @endforeach
        </div>
    </div>
</div>


<section class="my-8 splide custom-pagination2 " id="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <!-- Initial slide with all job titles -->
            <li class="splide__slide" data-slide-index="0">
                <div data-aos="fade-right" class="relative flex items-center justify-center w-screen min-h-full">
                    <img src="{{ url('/images/MODOW.png') }}" alt="MODOW" class="object-cover w-full lg:object-contain lg:h-full h-96">
                    <div class="container absolute py-12 mx-auto xl:py-12">
                        <div class="flex flex-col items-end justify-end mx-4 text-right md:mx-8 lg:mx-12 xl:mx-20">
                            <div class="w-full space-y-2 md:w-2/4">
                                <h3 class="text-lg font-bold text-white md:text-lg lg:text-xl xl:text-4xl josefinfont">
                                    Looking for a Safe and
                                    <br>
                                    Tested Employment Agency?
                                </h3>
                                <h1 class="text-sm text-white lg:text-xl xl:text-xl josefinfont">
                                    You came to the right agency!
                                </h1>
                                <a class="" href="{{url('careers')}}">
                                    <button class="px-8 py-2 mt-8 text-sm font-bold text-black bg-white rounded-full">Apply Now</button>
                                </a>

                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <!-- Individual job slides -->
            @foreach($featuredjobs as $featured_jobs)
            <li class="splide__slide">
                <div data-aos="fade-right" class="relative flex items-center justify-center w-screen min-h-full">
                    <img src="{{ url('featured_jobs/images/'. $featured_jobs->image) }}" alt="{{ $featured_jobs->country }}" class="object-cover w-full lg:object-contain lg:h-full h-96">
                    <div class="container absolute w-full py-12 mx-auto xl:py-12 md:w-2/4">
                        <div class="flex flex-col items-center justify-center mx-4 text-center text-white md:mx-8 lg:mx-12 xl:mx-20 gap-y-4">
                            <div class="space-y-2 josefinfont">
                                <h3 class="text-xl font-bold md:text-xl lg:text-2xl xl:text-4xl">{{ $featured_jobs->country }}</h3>
                                <h3 class="text-sm font-bold md:text-sm lg:text-md xl:text-xl">{{ $featured_jobs->hiring_status }}</h3>
                                <h3 class="text-sm md:text-sm lg:text-md xl:text-lg">{{ $featured_jobs->description }}</h3>
                                <p class="text-sm font-bold md:text-sm lg:text-md xl:text-lg">{{ $featured_jobs->registration }}</p>
                                <p class="text-sm font-bold md:text-sm lg:text-md xl:text-lg">{{ $featured_jobs->salary }}</p>
                            </div>
                            <a href="{{ url('careers') }}?search={{ $featured_jobs->country }}">
                                <button class="flex items-center px-4 py-2 space-x-2 text-sm text-black bg-white rounded-full lg:px-8">
                                    <p class="font-bold">Apply Now</p>
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </li>
            @endforeach
        </ul>
    </div>
</section>

<script>
    var splide = new Splide('.splide.custom-pagination2', {
        arrows: true,
        pagination: false,
        type: 'loop',
        autoplay: true, // Enable autoplay
        interval: 5000,
    });

    splide.mount();
</script>


<div class="flex justify-center text-center item-center">
    <div class="container">
        <div data-aos="fade-down" class="mb-12 space-y-8 text-center">
            <h1 class="text-2xl font-bold lg:text-4xl josefinfont">
                Available Job Orders
            </h1>
            <p class="text-lg lg:text-xl josefinfont">
                Exciting Job Opportunities Await at Michelangelo Manpower Exponent, Inc. (MMEi)!
                <br> Explore our latest job offers and take the next step in your career with MMEi!
            </p>
        </div>
    </div>
</div>

<div data-aos="fade-up" class="container mx-auto mb-12">
    <div class="relative mx-4 overflow-x-auto md:mx-8 lg:mx-20">
        <table class="w-full text-sm text-center text-gray-900 ">
            <thead class="text-lg font-bold text-gray-900 uppercase bg-white ">
                <tr>
                    <th scope="col" class="px-6 py-3">
                        REG NO
                    </th>
                    <th scope="col" class="px-6 py-3">
                        DESCRIPTION
                    </th>
                    <th scope="col" class="px-6 py-3">
                        COUNTRY
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Action
                    </th>
                </tr>
            </thead>

            <tbody>
                @foreach($career->take(5) as $index => $careers)
                <tr class="{{ $index % 2 == 0 ? 'bg-gray-300' : 'bg-white' }} text-center text-lg uppercase text-gray-900 border-b">
                    <th scope="row" class="px-6 py-4 font-medium whitespace-nowrap">
                        {{$careers->id}}
                    </th>
                    <td class="px-6 py-4">
                        {{$careers->description}}
                    </td>
                    <td class="px-6 py-4">
                        {{optional($careers->country)->country}}
                    </td>

                    <td class="px-6 py-4">
                        <a href="{{url('apply_here')}}">
                            <button class="px-12 py-2 text-sm font-semibold text-gray-900 bg-white rounded-full shadow-lg ">
                                Apply
                            </button>
                        </a>
                    </td>


                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="flex flex-col items-center justify-center mb-32 space-y-8" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
    <a href="{{ url('careers') }}">
        <button class="px-12 py-4 font-semibold text-white bg-red-600 lg:px-16 rounded-3xl">View More</button>
    </a>
</div>

<div class="flex items-center justify-center">
    <div class="container mx-auto">
        <div class="hidden requirementsmodal">
            <div class="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-screen bg-black bg-opacity-70 closerequirementsmodal">
                <div class="w-full p-12 bg-white rounded-xl md:w-2/4 xl:w-1/5">
                    <div class="flex flex-col items-center justify-center space-y-4 text-center text-black josefinfont">
                        <img class="w-auto h-40 animate-pulse" src="{{asset('images/logo.jpg')}}" alt="">
                        <ul class="text-left">
                            <li><i class='bx bx-radio-circle-marked'></i>Must have valid Passport</li>
                            <li><i class='bx bx-radio-circle-marked'></i>Must be Medically Fit</li>
                            <li><i class='bx bx-radio-circle-marked'></i>Should have E-Registration</li>
                            <li><i class='bx bx-radio-circle-marked'></i>Should have PEOS</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const requirementsmodal = document.querySelector('.requirementsmodal');
        const showrequirementsmodal = document.querySelector('.showrequirementsmodal');
        const closerequirementsmodal = document.querySelector('.closerequirementsmodal');

        showrequirementsmodal.addEventListener('click', function(event) {
            requirementsmodal.classList.remove('hidden');
        });
        closerequirementsmodal.addEventListener('click', function() {
            requirementsmodal.classList.add('hidden');

        });
    });
</script>
@include('components.footer')


@endsection