@extends("layouts.dashboard")

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

        <div class="card">
            <div class="card-header bg-rouge d-flex justify-content-sm-start align-items-center" style="margin-top: -30px;">
                <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("Liste")  {{ $title ?? "Titre" }} </h4>
                </div>
                <div class="col-4 d-flex justify-content-sm-center align-items-center">
                    <div style="margin-left: 5px;margin-top: 5px"><h7 class="ml-5 text-white">{{ $espacepublicitaires->total() }} @lang("Enregistrement")</h7></div>
                </div>
                <div class="col-4 d-flex justify-content-sm-end align-items-end">
                    <a href="@if(Auth::user()->annonceur_id!=null){{ route("espacepublicitaire.index") }}@else{{ route("espacepublicitaire_a.index") }} @endif" class="btn text-white">
                        <i class="lni lni-list"></i>@lang("Liste")
                    </a>
                    @can('espacepublicitaire-create')
                    <a href="@if(Auth::user()->annonceur_id!=null){{ route("espacepublicitaire.create") }}@else{{ route("espacepublicitaire_a.create") }} @endif" class="btn text-white">
                        <i class="lni lni-plus"></i>@lang("Ajouter")
                    </a>
                     @endcan
                      @can('espacepublicitaire-pdf')
                <a href="@if(Auth::user()->annonceur_id==null){{ route("espacepublicitaire.pdf") }}@else{{ route("espacepublicitaire_a.pdf") }} @endif" class="btn text-white">
                    <i class="fa fa-file-pdf"></i>@lang("PDF")
                </a>
               @endcan
                </div>
            </div>
        </div>
        @include("layouts.alert")

        <div class="card">
            <div class="card-body bg-primary p-1">

                <div class="row m-0">
                    <form class="row" action="@if(Auth::user()->annonceur_id!=null){{ route("espacepublicitaire.index") }}@else{{ route("espacepublicitaire_a.index") }} @endif" method="GET">
                    <div class="col p-0">
			<select id="natureannonce_id" name="natureannonce_id" class="form-control search-slt select2">
				<option value="">@lang("Nature")</option>
				@foreach ($natureannonces as $natureannonce)
				{{request()->input('natureannonce_id')==$natureannonce->id}}
				<option value="{{$natureannonce->id}}" @if(request()->input('natureannonce_id')== $natureannonce->id) selected @endif>{{$natureannonce->libelle}}</option>
				@endforeach
			</select>
		</div>
                                   <div class="col p-0">
                    <input type="text" id="emplacement" name="emplacement" class="form-control search-slt" placeholder="@lang("emplacement")" value="{{ request()->input('emplacement') }}">
                </div>            <div class="col p-0">
                    <input type="text" id="libelle" name="libelle" class="form-control search-slt" placeholder="@lang("libelle")" value="{{ request()->input('libelle') }}">
                </div>
                        <div class="col p-0">
                            <input type="date" id="datedebut" name="datedebut" value="{{ request()->input('datedebut') }}" class="form-control search-slt" placeholder="@lang("datedebut")">
                        </div>
                        <div class="col p-0">
                            <input type="date" id="datefin" name="datefin"  value="{{ request()->input('datefin') }}"class="form-control search-slt" placeholder="@lang("datefin")">
                        </div>
                                <div class="col p-0">
                                    <select id="statut" name="statut" class="form-control search-slt select2">
                                        <option value="" @if(request()->input('statut')==null) selected @endif>@lang("Statut")</option>
                                        <option value="1" @if(request()->input('statut')== "1") selected @endif>@lang("Activer")</option>
                                        <option value="0" @if(request()->input('statut')== "0") selected @endif>@lang("Désactiver")</option>
                                    </select>
                                </div>
                        <div class="col-auto p-0">
                            <button type="submit" class="btn btn-primary wrn-btn radius-0"><i class="fa fa-search"></i></button>
                        </div>
                    </form>
                </div>
            </div>
            <hr>

            <div class="card-body">

  <div class="container">



            <div class="row">

            @if(count($espacepublicitaires) > 0)
                            @foreach($espacepublicitaires as $espacepublicitaire)
                    <div class="col-xs-3 col-sm-3">
                        <div class="card">
                            <a class="img-card" href="@if(Auth::user()->annonceur_id!=null){{ route("espacepublicitaire.show", $espacepublicitaire) }}@else{{ route("espacepublicitaire_a.show", $espacepublicitaire) }} @endif">
                              @if($espacepublicitaire->imageFichier!=null)
                            <img src="@if(Auth::user()->annonceur_id!=null) images/{{ $espacepublicitaire->imageFichier->nom }} @else ../images/{{ $espacepublicitaire->imageFichier->nom }} @endif" style="max-height: 500px;" />
                             @else
                              <img  id="preview-image-before-upload" src="https://caer.univ-amu.fr/wp-content/uploads/default-placeholder.png"
                              alt="preview image" style="max-height: 200px;">
                             @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="">
                                  Longueur:  {{$espacepublicitaire->longueur}}
                                </p>
                                <p class="">
                                  Largeur:  {{$espacepublicitaire->largeur}}
                                </p>
                                <p class="">
                                  Nature:  {{$espacepublicitaire->natureAnnonce->libelle}}
                                </p>
                            </div>
                            <table>


                            <td class="card-read-more" data-url="@if(Auth::user()->annonceur_id!=null){{ route("espacepublicitaire.statut", $espacepublicitaire) }}@else{{ route("espacepublicitaire_a.statut", $espacepublicitaire) }} @endif">
                                <a href="@if(Auth::user()->annonceur_id!=null){{ route("espacepublicitaire.show", $espacepublicitaire) }}@else{{ route("espacepublicitaire_a.show", $espacepublicitaire) }} @endif" class="btn text-primary"><span class="fa fa-eye"></span> </a>

                                       @can('espacepublicitaire-edit')
                                      <a href="@if(Auth::user()->annonceur_id!=null){{ route("espacepublicitaire.edit", $espacepublicitaire) }}@else{{ route("espacepublicitaire_a.edit", $espacepublicitaire) }} @endif" class="btn text-secondary"><span class="fa fa-pencil"></span> </a>
                                      @endcan
                                       @can('espacepublicitaire-statut')
                                      @if($espacepublicitaire->active == 1)
                                            <button type="button" data-toggle="modal" data-target="#exampleModal" class="btn text-danger mr-sm-2"
                                                    onclick="confirmAction(this)" data-toggle="tooltip" data-placement="top" title="@lang("Desactiver")">
                                                <span class="fa fa-ban"></span>@lang("Desactiver")
                                            </button>
                                        @else
                                            <button type="button" data-toggle="modal" data-target="#exampleModal" class="btn text-success mr-sm-2"
                                                    onclick="confirmAction(this)" data-toggle="tooltip" data-placement="top" title="@lang("Activer")">
                                                <span class="fa fa-check"></span>@lang("Activer")
                                            </button>
                                        @endif
                                        @endcan

</td>
</table>
                        </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>



        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">@lang("Confirmation")</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form method="post" id="statutForm">
                        @csrf
                        @method("put")
                        <div class="modal-body">
                            <p>
                               @lang("QuestionConfirmation")
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal"> @lang("Non")</button>
                            <button class="btn btn-primary">@lang("Oui")</button>
                        </div>
                    </form>
                </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