@extends('layouts.contentNavbarLayoutFrontend')

@section('title', 'Career')

@section('content')
    <div class="pattern-square"></div>
    <!--Pageheader start-->
    <section class="py-5 py-lg-8">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="text-center">
                        <h1 class="mb-3">Career</h1>
                        <p class="mb-0">Career</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Pageheader end-->

    <!--Career start-->
    <section class="mb-xl-9">
        <div class="container">
            <div class="row mb-4">
                <div class="col-lg-12">
                    <h3>All Jobs</h3>
                </div>
            </div>

            <div class="row g-5">
                @foreach($careers as $career)
                    <div class="col-md-6">
                        <div class="card shadow-sm h-100 border-0 card-lift overflow-hidden">
                            <div class="row h-100 g-0">
                                <a href="{{ route('career.details', $career->id) }}" class="col-lg-5 col-md-12" style="
                                     background-image: url({{ !empty($career->image)  ? asset('uploads/career/' . $career->image) : asset('backend-assets/img/no-image/no-image.png') }});
                                     background-size: cover;
                                     background-repeat: no-repeat;
                                     background-position: center;
                                     min-height: 13rem;
                                  ">
                                </a>
                                <div class="col-lg-7 col-md-12">
                                    <div
                                        class="card-body h-100 d-flex align-items-start flex-column border rounded-end-lg-3 rounded-bottom-3 rounded-top-0 rounded-start-lg-0 border-start-lg-0 border-top-0 border-top-lg">
                                        <div class="mb-5">
                                            <h4 class="my-2">
                                                <a href="{{ route('career.details', $career->id) }}" class="text-reset">{{ $career->position }}</a>
                                            </h4>
                                            <span>Number: <small class="fw-bold">{{ $career->number }}</small></span>
                                            <br>
                                            <span>Email: <small class="fw-bold">{{ $career->email }}</small></span>
                                            <br>
                                            <span>Tel: <small class="fw-bold">{{ $career->tel }}</small></span>
                                            <br>
                                            <span>Company: <small class="fw-bold">{{ $career->company }}</small></span>
                                            <br>
                                            <span>Location: <small class="fw-bold">{{ $career->location }}</small></span>
                                        </div>
                                        <div class="mt-auto">
                                            <small>{{ date('M d, Y', strtotime($career->start_date)) }}</small>
                                            <span class="mx-1">-</span>
                                            <small>{{ date('M d, Y', strtotime($career->end_date)) }}</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--Career end-->
@endsection