@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>
<div class="bg-center bg-cover" style=" background-image: url('{{ url('/images/careers/Wallpaper.png') }}');">
    <div class="container mx-auto ">
        <div class="py-32 ml-4 text-white md:ml-20">
            <h1 class="text-2xl font-bold md:text-6xl">Careers</h1>
            <p class="text-sm text-justify md:text-xl">
                Michael Angelo Manpower Exponent Inc.
            </p>
        </div>
    </div>
</div>

<div class="flex items-center justify-center">
    <div class="container w-full mx-auto md:w-4/5 lg:w-3/4 xl:w-2/4">
        <div data-aos="fade-down" class="my-8 space-y-12 text-center text-gray-900">
            <h1 class="text-2xl font-bold md:text-4xl">
                Available Job Orders
            </h1>
            <p class="text-lg md:text-xl">
                Exciting Job Opportunities Await at Michelangelo Manpower Exponent, Inc. (MMEi)! 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-32">
    <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($cmsjoborder as $index => $joborder)
                <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">
                        {{$joborder->id}}
                    </th>
                    <td class="px-6 py-4">
                        {{$joborder->description}}
                    </td>
                    <td class="px-6 py-4">
                        {{optional($joborder->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>
@include('components.footer2')


@endsection