@extends('layouts.layout')
@section('title', 'Home')

@section('banner')
    {{-- slider --}}
    <section>
     
        
         <div id="carouselExampleControls" class="carousel slide main-banner" data-bs-pause="false" data-bs-interval="5000" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="{{asset('images/header-images/slider1.jpg')}}" class="w-100" alt="slider1">
            </div>
            <div class="carousel-item">
              <img src="{{asset('images/header-images/slider2.jpg')}}" class="w-100" alt="slider2">
            </div>
            <div class="carousel-item">
              <img src="{{asset('images/header-images/slider3.jpg')}}" class="w-100" alt="slider2">
            </div>
           <!--  <div class="carousel-item logo">
              <img src="{{asset('images/header-images/slider2.jpg')}}" class="w-100" alt="slider2">
            </div>-->
            
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
        @include('partials.index-telecharger')
      </section>

@endsection

@section('main')
    <!-- menu du semaine -->
    <section id="menu">
        <div class="container text-center my-5">
            <div class="row">
              <div class="col-md-12">
                <h2 class="titre text-uppercase">Un petit creux ou une grande faim ?</h2>
                <h3 class="sous-titre text-uppercase">Pomme de Pain vous régale à toute heure</h3>
              </div>
              @foreach ($menus as $item)
                 <div class="col-md-6 col-lg-3 col-sm-6 matin   @if($item->id !== 1) shadow-menu @endif  " style="color: {{$item->color}};">
                <strong class=""  style="color: {{$item->color}};" >{{$item->titre}} <span>&#8226;</span></strong>
                <ul >
                 @foreach ($item->categories as $category)
                      <li><a href="{{route('cart.produit',[$item->slug,$category->slug])}}">{{$category->titre}}</a></li>
                  @endforeach
                    
                </ul>
              </div>
              @endforeach
              

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

@section('first-block')
    @include('partials.first-block')
@endsection

@section('second-block')
    @include('partials.second-block')
@endsection