@extends('layouts.main-app')

@section('title', 'Job Details')


@section('content')


@include('layouts.navbar')
<div class="relative">
    <img class="absolute inset-0 w-full h-full" src="{{asset('images/news/singlepage-banner.webp')}}" alt="">
    <div class="relative">
        <h1 class="py-2 text-2xl font-bold text-center text-white">Job Details</h1>
    </div>
</div>

<div class="container px-4 py-8 mx-auto max-screen-xl">
    <div class="grid grid-cols-1 lg:grid-cols-3 lg:gap-8">

        <div class="col-span-2">
            <div class="space-y-4">
                <h1 class="font-bold text-blue-500">Greenleaf Industries</h1>
                <h1 class="text-4xl font-bold">{{$careers->title}}</h1>
                <div class="flex items-center space-x-4">
                    <img src="{{asset($careers->mpc->image)}}" alt="">
                    <h1>Posted by <span class="font-bold">{{$careers->mpc->mpc_name}}</span></h1>
                </div>
                <div class="flex flex-col space-y-4 md:space-y-0 md:space-x-2 md:flex-row">
                    <button class="px-4 py-1 text-blue-600 bg-blue-100 rou nded-md">{{$careers->industry->industry_name}}</button>
                    <button class="px-4 py-1 text-red-600 bg-red-100 rounded-md">{{$careers->job_type}}</button>
                    <div class="flex items-center">
                        <i class='text-blue-400 bx bx-user'></i>
                        {{$careers->open_position}} Open Positions
                    </div>
                </div>

            </div>
            <hr class="my-4 border-gray-500">
            <div class="space-y-4">
                <div>{!!$careers->description!!}</div>
                <h1 class="text-xl font-bold">JOB OVERVIEW</h1>
                <div class="grid md:grid-cols-2">
                    <div class="py-2 space-y-2 shadow-xl">
                        <div class="px-4">
                            <h1 class="text-gray-500">Date Posted</h1>
                            <p>{{ $careers->created_at->format('F d Y') }}
                            </p>
                        </div>
                        <hr>
                        <div class="px-4">
                            <h1 class="text-gray-500">Office Hours</h1>
                            <p>{{$careers->office_hours}}</p>
                        </div>
                        <hr>
                        <div class="px-4">
                            <h1 class="text-gray-500">Experience</h1>
                            <p>{{$careers->experience}}</p>
                        </div>
                        <hr>
                        <div class="px-4">
                            <h1 class="text-gray-500">Location</h1>
                            <p>{{$careers->location->location_name}}</p>
                        </div>
                        <hr>
                        <div class="px-4">
                            <h1 class="text-gray-500">Holidays</h1>
                            <p>{{$careers->holidays}}</p>
                        </div>
                        <hr>
                        <div class="px-4">
                            <h1 class="text-gray-500">Salary Range</h1>
                            <p>{{$careers->salary_range}}</p>
                        </div>
                    </div>
                    <div></div>
                </div>
            </div>


        </div>

        <div class="space-y-8">
            <div class="space-y-4">
                <h1 class="py-4 text-xl font-bold">JOB APPLICATION FORM</h1>
                <form action="{{ route('save.jobapplication') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="p-8 space-y-4 shadow-xl">
                        <h1 class="font-bold">Position</h1>
                        <p class="text-gray-500">{{ $careers->title }}</p>
                        <div class="flex flex-col space-y-2">
                            <input required type="text" value="{{ $careers->id }}" readonly hidden id="career_id" name="career_id">
                            <input
                                required
                                type="text"
                                id="name"
                                name="name"
                                class="w-full rounded-full border-2 border-[#FBAF43] px-4 py-2 
                            @error('name') border-red-500 @enderror"
                                placeholder="Your Name">
                            @error('name')
                            <p class="text-xs text-red-500">{{ $message }}</p>
                            @enderror

                            <input
                                required
                                type="text"
                                id="address"
                                name="address"
                                class="w-full rounded-full border-2 border-[#FBAF43] px-4 py-2 
                            @error('address') border-red-500 @enderror"
                                placeholder="Address">
                            @error('address')
                            <p class="text-xs text-red-500">{{ $message }}</p>
                            @enderror

                            <input
                                required
                                type="email"
                                id="email"
                                name="email"
                                class="w-full rounded-full border-2 border-[#FBAF43] px-4 py-2 
                            @error('email') border-red-500 @enderror"
                                placeholder="Email Address">
                            @error('email')
                            <p class="text-xs text-red-500">{{ $message }}</p>
                            @enderror


                            <input
                                required
                                type="tel"
                                id="phone_number"
                                name="phone_number"
                                class="w-full rounded-full border-2 border-[#FBAF43] px-4 py-2
                            @error('phone_number') border-red-500 @enderror"
                                placeholder="Phone Number (+63)"
                                maxlength="11"
                                pattern="\d{11}"
                                oninput="this.value = this.value.slice(0, 11);">
                            @error('phone_number')
                            <p class="text-xs text-red-500">{{ $message }}</p>
                            @enderror

                        </div>

                        <h1 class="font-bold">Upload your Resume/CV</h1>

                        @include('layouts.cv')

                        <div>
                            <input required type="checkbox" class="border-[#FBAF43]">
                            <label> I would like to receive updates and newsletters from Asiapro Cooperative.</label>
                        </div>

                        <div>
                            <input required type="checkbox" class="border-[#FBAF43]">
                            <label> By submitting this form, you agree to our <span class="text-[#FBAF43] font-bold">Privacy Policy</span> and <span class="text-[#FBAF43] font-bold">Terms of Service</span></label>
                        </div>
                        <div class="my-4">
                            <button type="submit" class="w-full text-white bg-[#FBAF43] py-4 rounded-full shadow-xl">SUBMIT APPLICATION</button>
                        </div>
                    </div>
                </form>
            </div>

            <div>
                <h1 class="py-4 text-xl font-bold">RELATED POSITIONS</h1>
                @foreach (range(1,3) as $index)
                <div class="shadow-xl rounded-xl">
                    <div class="flex flex-col items-center p-4 space-x-4 xl:flex-row">
                        <div>
                            <img src="{{asset('images/news/img-left-2.webp')}}" alt="">
                        </div>
                        <div class="flex flex-col justify-center">
                            <h1 class="text-sm text-gray-700">Asiapro Cooperative</h1>
                            <h1 class="text-xl font-bold text-blue-500">Agricultural Project Manager</h1>
                            <div class="text-xs">
                                <i class='text-blue-500 bx bx-map'></i> Quezon City | <i class='text-blue-500 bx bx-time'></i> 6 Hours ago
                            </div>
                            <div class="flex flex-col space-y-4 md:space-y-0 md:space-x-4 md:flex-row">
                                <button class="px-4 py-1 text-blue-500 bg-blue-100 rounded-xl">Agribusiness</button>
                                <button class="px-4 py-1 text-red-500 bg-red-100 rounded-xl">Full-time</button>

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

    </div>
</div>



<div class="container max-w-screen-xl mx-auto">

    @include('layouts.newsletter')
</div>

@include('layouts.footer')


@endsection