@extends('frontend.layouts.partials.app')
@section('title', 'About Us')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')

@section('content')
    <section class="py-24 lg:pb-36 bg-gray-100 overflow-hidden">
        <div class="container px-4 mx-auto">
            <div class="max-w-xl text-center mx-auto mb-16">
                <h2 class="font-heading mb-5 text-6xl tracking-tighter">Open Positions</h2>
                <p class="text-xl text-gray-600 tracking-tight">Safeguarding Your Feature with Comprehensive Insureance
                    Solutions, Because Peace of Mind Matters.</p>
            </div>
            <div class="max-w-3xl mx-auto mt-2">
                <div class="flex flex-wrap -m-1">
                    @forelse ($careers as $career)
                        <div class="w-full p-1">
                            <div
                                class="block p-6 bg-white hover:bg-opacity-50 transform hover:-translate-y-1 rounded-lg transition duration-500">
                                <div class="flex flex-wrap items-center justify-between -m-2">
                                    <div class="w-auto p-2">
                                        <h3 class="mb-1 font-semibold tracking-tight">{{$career->name }}</h3>
                                        @php
                                            $jobType = 'Job Type:' . $career->job_type;
                                        @endphp
                                        <span class="text-gray-600 tracking-tight">{{ __($jobType) }}</span>
                                    </div>
                                    <div class="w-auto p-2">
                                        <div class="flex flex-row justify-center">
                                            <a href="{{ route('applyCareer', ['career' => $career->slug]) }}"
                                               class="py-2 px-5 rounded-md w-44 bg-[#005aab] text-white hover:scale-x-95 duration-200 transition ease-in-out">
                                                Apply </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                    @endforelse
                </div>
            </div>
        </div>
    </section>
@endsection