@extends("layouts.dashboard")

@section("wrapper")
    <div class="page-wrapper">
    @include("layouts.second-header")
<div class="container-fluid p-4">

    <div class="card">
        <div class="card-header bg-rouge d-flex justify-content-sm-start align-items-center" style="margin-top: -50px;">
            <div class="d-flex align-items-center" style="margin-right: 1.5rem !important;">
                <a href="{{ \Illuminate\Support\Facades\URL::previous() }}" class="btn mr-4 text-white">
                    <i class="lni lni-chevron-left"></i>@lang("Retour")
                </a>
                <h4 class="mb-0 text-white"><i class="{{$icon}}"></i>@lang("Nouvelle")   {{ $title ?? "Titre" }} </h4>
            </div>

            <div class="d-flex col-4 justify-content-sm-end align-items-end">
                <!--a href="{{ route("reservation.index") }}" class="btn mr-4 text-white">
                    <i class="lni lni-list"></i>@lang("Liste")
                </a-->

            </div>
        </div>
    </div>
    @if(session()->has('error'))
        @include("layouts.alert")
    @endif
               <div class="card-body">

  <div class="container">



            <div class="row">

            @if(count($espacepublicitaires) > 0)
                            @foreach($espacepublicitaires as $espacepublicitaire)
                    <div class="col-xs-12 col-sm-4">
                        <div class="card">
                            <a class="img-card" href="{{ route("reservation.annonce", $espacepublicitaire) }}">

                            <img  src="@if(Auth::user()->annonceur_id!=null) ../images/{{ $espacepublicitaire->imageFichier->nom }} @else ../../images/{{ $espacepublicitaire->imageFichier->nom }}} @endif" />
                          </a>
                            <div class="card-content">
                                <h4 class="card-title">
                                    <a href="#">{{$espacepublicitaire->libelle}}
                                  </a>
                                </h4>
                                <p class="">
                                 Emplacement:   {{$espacepublicitaire->emplacement}}
                                </p>
                                 <p class="">
                                  Tarif:  {{$espacepublicitaire->tarif}}
                                </p>
                                <p class="">
                                  Dimensions:  {{$espacepublicitaire->dimensions}}
                                </p>

                            </div>





                        </div>
                    </div>

                       @endforeach
                        @else

                            <p colspan="12" class="text-center">@lang("listeempty")</p>
                        @endif

    </div>
            </div>
        </div>
                           <div class="d-flex justify-content-center" class="pagination-block">

                        {{  $espacepublicitaires->appends(request()->input())->links('layouts.paginationlinks') }}
                    </div>
                </div>
            </div>
        </div>


</div>
</div>
  <style>
       .card {
  display: block;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    transition: box-shadow .25s;
}
.card:hover {
  box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.img-card {
  width: 100%;
  height:auto;
  border-top-left-radius:2px;
  border-top-right-radius:2px;
  display:block;
    overflow: hidden;
}
.img-card img{
  width: 100%;
  height: auto;
  object-fit:cover;
  transition: all .25s ease;
}
.card-content {
  padding:15px;
  height: 284px;
  text-align:left;
}
.card-title {
  margin-top:0px;
  font-weight: 700;
  font-size: 1.65em;
}
.card-title a {
  color: #000;
  text-decoration: none !important;
}
.card-read-more {
   display: flex;
  border-top: 1px solid #D4D4D4;
}
.card-read-more a {
  margin: 10px;
  text-decoration: none !important;
  padding:10px;
  font-weight:600;
  text-transform: uppercase
}
</style>
@endsection