@extends('frontend.master')

@section('content')
<main class="main">

    <!-- breadcrumb -->
    <div class="site-breadcrumb" style="background: url(/assets/frontend/img/breadcrumb/01.jpg)">
        <div class="container">
            <h2 class="breadcrumb-title">{{ $metier->titre }}</h2>
            <ul class="breadcrumb-menu">
                <li><a href="/">Accueil</a></li>
                <li><a href="/nos-metiers">Nos Métiers</a></li>
                <li class="active">{{ $metier->titre }}</li>
            </ul>
        </div>
    </div>

    <div class="skill-area py-120">
        <div class="container">
            <div class="skill-wrap">
                <div class="row g-4 align-items-center">
                    <div class="col-lg-7">
                        <div class="skill-img wow fadeInLeft" data-wow-delay=".25s">
                            <img src="/assets/uploads/{{ $metier->image }}" alt="{{ $metier->titre }}">
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="service-details wow fadeInUp" data-wow-delay=".25s">
                            <h2 class="site-title mb-20">{{ $metier->titre }}</h2>
                            <div>{!! $metier->texte !!} </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="service-area bg py-120">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 mx-auto">
          <div class="site-heading text-center wow fadeInDown" data-wow-delay=".25s">
            <h2 class="site-title">Nos <span>métiers</span></h2>
            <div class="heading-divider"></div>
          </div>
        </div>
      </div>
      <div class="row g-4 wow fadeInUp" data-wow-delay=".25s">
        @php
          $i = 1;
        @endphp

        @foreach($metiers as $data)
          @php
            $url = $data->id . '-' . Str::slug($data->titre, '-');
          @endphp
        <div class="col-lg-4">
          <div class="service-item">
            <span class="count">0{{ $i }}</span>
            <div class="service-img">
              <img src="/assets/uploads/{{ $data->image }}" alt="">
            </div>
            <div class="service-icon">
              <img src="/assets/frontend/img/icon/{{ $data->icone }}" alt="">
            </div>
            <div class="service-content">
              <h4 class="service-title">
              <a href="/metiers/{{ $url }}">{{ $data->titre }}</a>
              </h4>
              <p class="service-text">
                {!! Str::words($data->texte, 18) !!}
              </p>
              <a href="/metiers/{{ $url }}" class="theme-btn">En savoir plus<i class="fas fa-arrow-right"></i></a>
            </div>
          </div>
        </div>
        @php $i++ @endphp
        @endforeach
      </div>
    </div>
  </div>
</main>
@endsection