@extends('layouts.app')

@section('title', 'Recrutement')

@section('content')


<!-- =======================
Bannière Principale START -->
<section class="position-relative pt-8 pt-xl-9">
    <div class="container position-relative z-index-1 mb-5 mb-lg-7 pb-sm-6">
        <div class="row g-4 g-xxl-5">
            <!-- Contenu Hero START -->
            <div class="col-lg-10 col-xl-8 text-center mx-auto">


                <!-- Titre -->
                <div class="position-relative mb-5">
                    <h1 class="display-5 mb-0 lh-sm-base">Plus qu'un simple job, une <span class="text-primary">aventure</span>
                    </h1>

                </div>

                <p>Intégrez une équipe où votre passion pour la technologie trouve sa place. Contribuez à des projets qui changent la donne pour les entreprises locales et nationales, tout en évoluant dans un environnement stimulant et convivial.</p>
            </div>
            <!-- Contenu Hero END -->
        </div> <!-- Fin Row -->
    </div>
</section>
<!-- =======================
Bannière Principale END -->

<!-- =======================
Valeurs START -->
<section class="pt-0">
    <div class="container">
        <div class="row align-items-center">
            <!-- Image -->
            <div class="col-lg-5 text-center position-relative">

                <img src="{{asset('images/career/index.jpg')}}" class="rounded" alt="">
            </div>

            <!-- Contenu -->
            <div class="col-lg-7 ps-lg-7 mt-5 mt-lg-0">
                <h2 class="mb-4">Apporter de la valeur à nos clients</h2>
                <p class="mb-4 mb-sm-5">Nos valeurs sont centrées sur la création de valeur pour nos clients. Nous les aidons à gagner du temps, à simplifier leurs processus et à les accompagner dans leur développement. Pour cela, nous recherchons des personnes polyvalentes, exigeantes, curieuses et dynamiques.</p>
                <!-- Fonctionnalités START -->
                <div class="row row-cols-1 row-cols-sm-2 g-4 g-sm-6">
                    <!-- élément -->
                    <div class="col">
                        <div class="card card-body bg-transparent p-0">
                            <span class="h4 text-primary"><i class="bi bi-heart-fill"></i></span>
                            <h6 class="mb-2">Passion</h6>
                            <p class="mb-0">Nous mettons notre cœur dans tout ce que nous faisons et croyons fermement en notre mission.</p>
                        </div>
                    </div>

                    <!-- élément -->
                    <div class="col">
                        <div class="card card-body bg-transparent p-0">
                            <span class="h4 text-primary"><i class="bi bi-award-fill"></i></span>
                            <h6 class="mb-2">Exigence</h6>
                            <p class="mb-0">Notre objectif est la satisfaction et la fierté au travail. Nous nous engageons à maintenir des standards élevés.</p>
                        </div>
                    </div>

                    <!-- élément -->
                    <div class="col">
                        <div class="card card-body bg-transparent p-0">
                            <span class="h4 text-primary"><i class="bi bi-people-fill"></i></span>
                            <h6 class="mb-2">Impact</h6>
                            <p class="mb-0">Chaque membre de notre équipe joue un rôle essentiel dans notre croissance et notre succès.</p>
                        </div>
                    </div>

                    <!-- élément -->
                    <div class="col">
                        <div class="card card-body bg-transparent p-0">
                            <span class="h4 text-primary"><i class="bi bi-emoji-smile-fill"></i></span>
                            <h6 class="mb-2">Convivialité</h6>
                            <p class="mb-0">Nous valorisons les moments partagés, la communication ouverte et les activités de groupe pour renforcer nos liens.</p>
                        </div>
                    </div>
                </div>
                <!-- Fonctionnalités END -->

            </div>
        </div> <!-- Fin Row -->
    </div>
</section>
<!-- =======================
Valeurs END -->

<!-- =======================
Liste des emplois START -->
<section class="pt-0">
    <div class="container">
        <!-- Titre -->
        <div class="inner-container-small text-center mb-4 mb-sm-6">
            <h2 class="mb-3">Rejoignez notre équipe !</h2>
            <p class="mb-0">Découvrez nos postes ouverts et faites partie de l'aventure Systemin.</p>
        </div>
        <!-- Liste START -->
        <div class="row g-4 g-lg-6">
            <div class="col-lg-9 mx-auto">
                <!-- Contenu des onglets START -->
                <div class="tab-content" id="pills-tabContent">
                    <!-- Élément de contenu -->
                    <div class="tab-pane fade show active" id="pills-all" role="tabpanel" aria-labelledby="pills-all-tab" tabindex="0">
                        <!-- Élément de job -->
                        @foreach($careers as $career)
                        <!-- Élément de job -->
                        <div class="card card-body bg-light d-md-flex justify-content-md-between align-items-md-center flex-md-row p-4 mb-3">
                            <div class="mb-4 mb-md-0">
                                <!-- Badge -->
                                <div class="badge text-bg-dark mb-3">{{ $career['sector'] }}</div>
                                <!-- Titre -->
                                <h5 class="mb-0"><a href="{{ route('careers.show', $career['id']) }}" class="stretched-link">{{ $career['job_title'] }}</a></h5>

                                <!-- Liste -->
                                <div class="hstack gap-3 gap-sm-4 flex-wrap mt-3">
                                    <span><i class="bi bi-geo-alt me-2"></i>{{ $career['city'] }}, {{ $career['country'] }}</span>
                                    <span><i class="bi bi-clock me-2"></i>{{ $career['required_experience'] }}</span>
                                    <span><i class="bi bi-briefcase me-2"></i>{{ number_format($career['salary']) }}€</span>
                                </div>
                            </div>
                            <!-- Bouton -->
                            <div><a href="{{ route('careers.show', $career['id']) }}" class="btn btn-primary mb-0">Postuler maintenant<i class="bi bi-arrow-right ms-2"></i></a></div>
                        </div>
                        @endforeach

                    </div>

                </div>
            </div>
            <!-- Liste END -->
        </div>
</section>
<!-- =======================
Liste des emplois END -->

<!-- =======================
CTA START -->
<section class="bg-light position-relative overflow-hidden py-7">

    <!-- SVG decoration -->
    <figure class="position-absolute top-0 start-0 ms-n8 mt-5">
        <svg width="371" height="354" viewBox="0 0 371 354" fill="none" xmlns="http://www.w3.org/2000/svg">
            <ellipse cx="172.5" cy="176.5" rx="131.5" ry="125.5" fill="url(#paint0_linear_195_2)"></ellipse>
            <ellipse cx="185.5" cy="177" rx="185.5" ry="177" fill="url(#paint1_linear_195_2)"></ellipse>
            <defs>
                <linearGradient id="paint0_linear_195_2" x1="172.5" y1="51" x2="172.5" y2="302" gradientUnits="userSpaceOnUse">
                    <stop offset="0.0569271" stop-color="#D9D9D9" stop-opacity="0.5"></stop>
                    <stop offset="0.998202" stop-color="#D9D9D9" stop-opacity="0"></stop>
                </linearGradient>
                <linearGradient id="paint1_linear_195_2" x1="185.5" y1="0" x2="185.5" y2="354" gradientUnits="userSpaceOnUse">
                    <stop offset="0.0569271" stop-color="#D9D9D9" stop-opacity="0.2"></stop>
                    <stop offset="0.998202" stop-color="#D9D9D9" stop-opacity="0"></stop>
                </linearGradient>
            </defs>
        </svg>
    </figure>
</section>
<!-- =======================
CTA END -->


@endsection