@extends('layouts.app')

@section('title', 'Recrutement')

@section('content')

<section class="pt-8">
	<div class="container">
		<div class="row">
			<div class="col-lg-10 col-xl-8 mx-auto">
				<!-- Breadcrumb & title -->
				<div class="text-center mb-5">
					<!-- Title -->
					<h2>{{ $career['job_title'] }}</h2>
				</div>

				<!-- Info -->
				<div class="card card-body bg-dark d-md-flex justify-content-md-between align-items-md-center flex-md-row p-5 mb-6" data-bs-theme="dark">
					<div class="mb-3 mb-md-0">
						<!-- Title -->
						<h4 class="mb-0">Information</h4>
						<!-- List -->
						<div class="hstack gap-3 gap-md-4 flex-wrap mt-3">
							<span class="badge text-bg-white">{{ $career['sector'] }}</span>
							<span><i class="bi bi-geo-alt me-2"></i>{{ $career['city'] }}, {{ $career['country'] }}</span>
							<span><i class="bi bi-briefcase me-2"></i>{{ number_format($career['salary']) }}€</span>
						</div>
					</div>
					<!-- Button -->
					<a href="#contact-form" class="btn btn-primary mb-0">Postuler maintenant<i class="bi bi-arrow-right ms-2"></i></a>
				</div>

				<!-- Detail list -->
				<div class="row">
					<div class="col-md-6">
						<h6>Compétences :</h6>
						<ul class="list-group list-group-borderless mb-4">
							@foreach(explode(',', $career['skills']) as $skill)
							<li class="list-group-item d-flex mb-0"><i class="bi bi-patch-check text-primary me-2"></i>{{ $skill }}</li>
							@endforeach
						</ul>
					</div>

					<div class="col-md-6">
						<h6>Responsabilités :</h6>
						<ul class="list-group list-group-borderless mb-4">
							@foreach(explode(',', $career['responsibilities']) as $responsibility)
							<li class="list-group-item d-flex mb-0"><i class="bi bi-patch-check text-primary me-2"></i>{{ $responsibility }}</li>
							@endforeach
						</ul>
					</div>

					<div class="col-md-6">
						<h6>Expérience :</h6>
						<ul class="list-group list-group-borderless mb-4">
							<li class="list-group-item mb-0"><i class="bi bi-patch-check text-primary me-2"></i>{{ $career['required_experience'] }}</li>
						</ul>
					</div>

					<div class="col-md-6">
						<h6>Prérequis :</h6>
						<p>{{ $career['prerequisites'] }}</p>
					</div>
				</div>

				<!-- Description -->
				<h6 class="mt-4">Description</h6>
				<p>{{ $career['description'] }}</p>

				<!-- Form -->
				<div class="card card-body bg-light border p-sm-5 mt-5" id="contact-form">
					<form class="row g-4" method="POST" action="{{route('contact.job')}}">
						@csrf
						<div class="col-md-6">
							<label class="form-label heading-color">Votre nom *</label>
							<input type="text" class="form-control form-control-lg" name="name" placeholder="Nom complet" required>
						</div>

						<div class="col-md-6">
							<label class="form-label heading-color">Adresse e-mail *</label>
							<input type="email" class="form-control form-control-lg" name="email" placeholder="nom@example.com" required>
						</div>

						<div class="col-md-6">
							<label class="form-label heading-color">Numéro de téléphone *</label>
							<input type="text" class="form-control form-control-lg" name="phone" placeholder="Telephone" required>
						</div>

						<div class="col-md-6">
							<input type="hidden" class="form-control form-control-lg" name="job_title" value="{{ $career['job_title'] }}" readonly>
						</div>

						<div class="col-12">
							<label class="form-label heading-color">Message *</label>
							<textarea class="form-control" name="message" placeholder="Écrivez votre message ici..." style="height: 150px" required></textarea>
						</div>
						<!-- Button -->
						<div class="col-12 d-grid">
							<button class="btn btn-lg btn-primary mb-0">Envoyer un message</button>
						</div>
					</form>
				</div>

			</div>
		</div>
	</div>
</section>
@endsection