@extends('front.master.master')
@section('title', __('recruitment'))
@section('content')
<div class="main-body body-home overflow-hidden">
        <!-- Head About Us -->
        <div class="head-about-us overflow-hidden">
            <div class="head-about position-relative">
                <img src="{{asset('front/images/p5.png')}}" alt="" class="w-100 bg-up">
                <div class="over-down w-100"></div>
                <div class="overlay-fix w-100 h-100 d-flex align-items-end pb-5">
                    <div class="container overflow-hidden pb-5">
                        <div class="over-info d-flex align-items-center justify-content-between flex-col pb-5">
                            <div class="right-in-view">
                                <div class="d-flex align-items-center">
                                    <div class="icon-title p-2 rounded-3 d-flex align-items-center justify-content-center">
                                        <img src="{{asset('front/images/p-white.png')}}" alt="">
                                    </div>
                                    <h2 class="text-white mx-3 fw-bold">{{__('recruitment')}}</h2>
                                </div>
                                <p class="text-white mt-4">{{__('The jobs available to apply to join the Kaden Investment team and be part of the development are published here')}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bread Crumb -->
        <div class="bread-crumb my-4">
            <div class="container">
                <ul class="d-flex align-items-center">
                    <li><a href="{{route('home')}}">{{__('Home')}}</a></li>
                    <li><a href="">{{__('recruitment')}}</a></li>
                </ul>
            </div>
        </div>

        <div class="container my-2">
            <h4 class="colorMain title-sec position-relative mt-0">{{__('Available jobs')}}</h4>
        </div>

        <!-- Section Recruitment -->
        <div class="section-recruitment py-5">
            <div class="container">
                <div class="row">
                    @foreach($jobs as $job)
                        <div class="col-md-4 col-xs-12 overflow-hidden">
                            <div class="box-recruitment my-3 rounded-3 position-relative pb-5" data-aos="fade-left" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="300">
                                <div class="p-3">
                                    <h5 class="text-white">{{Str::limit($job->title,70)}}</h5>
                                    <p class="text-white">{{Str::limit($job->category,40)}}</p>
                                </div>
                                <img src="{{asset('uploads/jobs/'.$job->image)}}" alt="" class="rounded-3">
                                <a href="{{route('recruitment.show',$job->id)}}" class="btn-button bgColorMain text-white rounded-3 d-flex align-items-center justify-content-center">المزيد</a>
                            </div>
                        </div>
                    @endforeach
                    <a href="" class="text-center my-5">
                        <span class="text-white">{{__('more')}}</span>
                        <i class="icon-arr-d colorMain mx-2"></i>
                    </a>
                </div>
            </div>
        </div>
</div>
@endsection