@extends('layouts.app')

@section('title', $project["main_title"])

@section('content')

<!-- =======================
Case studies detail START -->
<section class="position-relative overflow-hidden pb-3 pt-xl-9">
	<div class="container pt-4 pt-xl-0">
		<div class="row">

			<!-- Title -->
			<div class="col-md-9 mx-auto text-center">
				<!-- Bread crumb -->
				<div class="d-flex justify-content-center position-relative mb-4">
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb breadcrumb-dots pb-0 mb-0">
							<li class="breadcrumb-item"><a href="{{route('welcome')}}">Accueil</a></li>
							<li class="breadcrumb-item"><a href=" {{route('projects.index')}} ">Toutes les solutions</a></li>
							<li class="breadcrumb-item active" aria-current="page">{{$project['main_title']}}</li>
						</ol>
					</nav>
				</div>
				<!-- Title -->
				<h1 class="mb-4">{{$project['main_title']}}</h1>
				<p>{{$project['main_description']}}</p>
			</div>

			<!-- Image -->
			<div class="col-12 mt-6">
				<div class="card h-300px h-md-400px h-xl-600px overflow-hidden" style="background:url({{$project['featured_image']}}) no-repeat; background-size:cover; background-position:center;"></div>
			</div>

			<!-- Info -->
			<div class="col-12 mt-6">
				<div class="row">
					<!-- Project info -->
					<div class="col-11 col-lg-5 col-xl-4 mx-auto mt-n8 mt-md-n9">
						<div class="card card-body bg-dark p-sm-5" project-bs-theme="dark">
							<!-- List -->
							<ul class="list-group list-group-borderless">
								<li class="list-group-item mb-3">
									<small>Client</small>
									<p class="text-white lead mt-1 mb-0">{{$project['client']}}</p>
								</li>

								<li class="list-group-item mb-3">
									<small>Siège social</small>
									<p class="text-white lead mt-1 mb-0">{{$project['headquarters']}}</p>
								</li>

								<li class="list-group-item mb-3">
									<small>Secteur d'activité</small>
									<p class="text-white lead mt-1 mb-0">{{$project['sector']}}</p>
								</li>

								<li class="list-group-item mb-3">
									<small>Durée du projet</small>
									<p class="text-white lead mt-1 mb-0">{{$project['project_duration']}}</p>
								</li>

								<li class="list-group-item d-grid mb-0">
									<a href="{{$project['project_url']}}" target="_blank" class="btn btn-lg btn-primary mb-0">Accéder au projet<i class="bi bi-box-arrow-up-right ms-2"></i></a>
								</li>
							</ul>
						</div>
					</div>

					<!-- Project detail -->
					<div class="col-lg-7 ms-auto ps-5 mt-6 mt-lg-0">
						<h4 class="mb-3">{{$project['subtitle1']}}</h4>
						<p class="lead">{{$project['description2']}}</p>
						<ul class="list-inline mb-6">
							@foreach(explode(', ', $project['tags']) as $tag)
							<li class="list-inline-item"> <a class="btn btn-outline-light rounded-pills btn-sm mb-lg-0" disabled>{{$tag}}</a> </li>
							@endforeach
						</ul>

						<h4 class="mb-3">Résumé technique du projet {{$project['main_title']}}</h4>
						<p>{{$project['desc_tech']}}</p>
						<ul class="list-group list-group-borderless">
							@foreach(explode(', ', $project['stacks']) as $stack)
							<li class="list-group-item d-flex"><i class="bi bi-check-circle text-primary me-2"></i>{{$stack}}</li>
							@endforeach
						</ul>
					</div>
				</div>
			</div>

			<!-- Images -->
			<div class="col-12 mt-6">
				<div class="row g-4 g-xl-6">
					<div class="col-sm-4">
						<img src="{{$project['image2']}}" class="rounded" alt="blog-img">
					</div>
					<div class="col-sm-4">
						<img src="{{$project['image3']}}" class="rounded mt-sm-6" alt="blog-img">
					</div>
					<div class="col-sm-4">
						<img src="{{$project['image4']}}" class="rounded" alt="blog-img">
					</div>
				</div>
			</div>

			<!-- Result and skillset content -->
			<div class="col-12">
				<div class="row g-4 mt-7">
					<!-- Result -->
					<div class="col-lg-5">
						<h4 class="mb-3">{{$project['advantages_title']}}</h4>
						<p class="lead mb-4">{{$project['advantage_description1']}}</p>
						<a href="{{$project['project_url']}}" target="_blank" class="btn btn-link heading-color text-primary-hover p-0 mb-0">Accéder au projet<i class="bi bi-box-arrow-up-right ms-2"></i></a>
					</div>

					<div class="col-lg-7 col-xl-6 ms-auto">
						<p>{{$project['advantage_description2']}}</p>

						<!-- Skillset START -->
						<div class="row row-cols-2 row-cols-md-3 mt-lg-6 g-4 g-lg-5">
							<!-- Item -->
							<div class="col">
								<h2 class="mb-0">{{$project['number1']}}<span class="text-primary mb-0">%</span></h2>
								<p class="mb-0">{{$project['number_description1']}}</p>
							</div>

							<!-- Item -->
							<div class="col">
								<h2 class="mb-0">{{$project['number2']}}<span class="text-primary mb-0">%</span></h2>
								<p class="mb-0">{{$project['number_description2']}}</p>
							</div>

							<!-- Item -->
							<div class="col">
								<h2 class="mb-0">{{$project['number3']}}<span class="text-primary mb-0">%</span></h2>
								<p class="mb-0">{{$project['number_description3']}}</p>
							</div>
						</div>
						<!-- Skillset END -->
					</div>
				</div>
			</div>

			<!-- Quote -->
			<div class="col-12 mt-6">
				<div class="card card-body bg-light p-sm-5 mb-4">
					<!-- Quote -->
					<h5 class="display-4 opacity-3 text-primary lh-0 mb-0"><i class="bi bi-quote"></i></h5>
					<q class="fs-5 heading-color">{{$project['testimonials'][0]['description']}}</q>
					<!-- Avatar -->
					<div class="d-flex align-items-center mt-4">
						<!-- Avatar -->
						<div class="avatar">
							<img class="avatar-img rounded-circle" src="{{$project['testimonials'][0]['client_photo']}}" alt="avatar">
						</div>
						<!-- Info -->
						<div class="ms-3">
							<h6 class="mb-0">{{$project['testimonials'][0]['client_name']}}</h6>
							<small>{{$project['testimonials'][0]['position']}}, {{$project['testimonials'][0]['client_company']}}</small>
						</div>
					</div>
				</div>
			</div>
		</div> <!-- Row END -->
	</div>
</section>
<!-- =======================
Case studies detail END -->

<!-- **************** MAIN CONTENT END **************** -->
@endsection