@extends('backoffice.layouts.master')

@section('content')

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
  <!--begin::Toolbar-->
  <div class="toolbar" id="kt_toolbar">
    <!--begin::Container-->
    <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
      <!--begin::Page title-->
      <div data-kt-swapper="true" data-kt-swapper-mode="prepend"
        data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
        class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
        <!--begin::Title-->
        <h1 class="d-flex text-dark fw-bolder fs-3 align-items-center my-1">{{ $titre }}</h1>
        <!--end::Title-->
        <!--begin::Separator-->
        <span class="h-20px border-gray-300 border-start mx-4"></span>
        <!--end::Separator-->
      </div>
      <!--end::Page title-->
    </div>
    <!--end::Container-->
  </div>
  <!--end::Toolbar-->
  <!--begin::Post-->
  <div class="post d-flex flex-column-fluid" id="kt_post">
    <!--begin::Container-->
    <div id="kt_content_container" class="container-xxl">
      <!--begin::Card-->
      <div class="card">
        <!--begin::Card header-->
        <div class="card-header border-0 pt-6">
          <!--begin::Card title-->
          <div class="card-title">

          </div>
          <!--begin::Card title-->
          <!--begin::Card toolbar-->
          <div class="card-toolbar">
            <!--begin::Toolbar-->
            <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
              <!--begin::Add-->
              <a class="btn btn-sm btn-primary flex-shrink-0 me-2 modalform" data-h="{{ '0|evenementforms|modal-lg' }}" data-toggle="tooltip"
                title="Ajouter un évènement" submitbtn="Ajouter">
                <!--begin::Svg Icon | path: icons/duotune/arrows/arr075.svg-->
                <span class="svg-icon svg-icon-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <rect opacity="0.5" x="11.364" y="20.364" width="16" height="2" rx="1"
                      transform="rotate(-90 11.364 20.364)" fill="currentColor" />
                    <rect x="4.36396" y="11.364" width="16" height="2" rx="1" fill="currentColor" />
                  </svg>
                </span>
                <!--end::Svg Icon-->
                Ajouter
              </a>
              <!--end::Add-->
            </div>
            <!--end::Toolbar-->
          </div>
          <!--end::Card toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body py-4">
          <!--begin::Table-->
          <div class="card card-p-0 card-flush">
            <div class="card-body">
            @if($evenement->status == 1)
              @php
                $icone = 'check';
                $status = 'Activé';
                $title = 'Désactiver';
                $color = 'success';
              @endphp
            @else
              @php
                $icone = 'ban';
                $status = 'Désactivé';
                $title = 'Activer';
                $color = 'danger';
              @endphp
            @endif
              <div class="row g-5 g-xl-10 mb-5 mb-xl-10">
                <div class="col-sm-4 col-xxl-3">
                  <!--begin::Card widget 14-->
                  <div class="card card-flush h-xl-100">
                    <!--begin::Body-->
                    <div class="card-body text-center pb-5">
                      <!--begin::Overlay-->
                      <a class="d-block overlay" data-fslightbox="lightbox-hot-sales"
                        href="/assets/uploads/{{ $evenement->image }}">
                        <!--begin::Image-->
                        <div class="overlay-wrapper bgi-no-repeat bgi-position-center bgi-size-cover card-rounded mb-7"
                          style="height: 266px;background-image:url('/assets/uploads/{{ $evenement->image }}">
                        </div>
                        <!--end::Image-->
                        <!--begin::Action-->
                        <div class="overlay-layer card-rounded bg-dark bg-opacity-25">
                          <i class="bi bi-eye-fill fs-2x text-white"></i>
                        </div>
                        <!--end::Action-->
                      </a>
                      <!--end::Overlay-->
                      <!--begin::Info-->
                      <div class="d-flex align-items-end flex-stack mb-1">
                        <!--begin::Title-->
                        <div class="text-start">
                          <span class="fw-bolder text-gray-800 cursor-pointer text-hover-primary fs-4 d-block">{{ $evenement->titre }}</span>
                        </div>
                        <!--end::Title-->
                      </div>
                      <!--end::Info-->
                    </div>
                    <!--end::Body-->
                    <!--begin::Footer-->
                    <div class="card-footer d-flex flex-stack pt-0">
                      <!--begin::Link-->
                      <a class="btn btn-sm btn-primary flex-shrink-0 me-2 modalform" data-h="{{ $evenement->id.'|photoforms|modal-lg' }}" data-toggle="tooltip" title="Ajouter des photos à: {{ $evenement->titre }}" submitbtn="Ajouter">Ajouter photos</a>
                      <!--end::Link-->
                      <!--begin::Link-->
                      <a class="status btn btn-sm btn-light flex-shrink-0" data-h="{{ $evenement->id.'|'.$evenement->status.'|Evenement' }}" data-toggle="tooltip" title="{{ $title }} la photo">{{ $title }}</a>
                                            <!--end::Link-->
                    </div>
                    <!--end::Footer-->
                  </div>
                  <!--end::Card widget 14-->
                </div>
              </div>
              <table class="table align-middle border rounded table-row-dashed fs-6 g-5" id="table_1">
                <thead>
                  <!--begin::Table row-->
                  <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase">
                    <th class="w-10px pe-2">
                      <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                        <input class="form-check-input" type="checkbox" data-kt-check="true"
                          data-kt-check-target="#kt_table_users .form-check-input" value="1" />
                      </div>
                    </th>
                    <th class="min-w-125px">Image</th>
                    <th class="min-w-125px">Titre</th>
                    <th class="min-w-125px">Date ajout</th>
                    <th class="min-w-100px">Statut</th>
                    <th class="min-w-125px">Actions</th>
                  </tr>
                  <!--end::Table row-->
                </thead>
                <tbody class="fw-bold text-gray-600">
                  @php
                    $i = 1;
                    foreach($photos as $data):
                      if($data->status == 1){
                        $icone = 'check';
                        $status = 'Activé';
                        $title = 'Désactivation';
                        $color = 'badge-light-success';
                      }else{
                        $icone = 'ban';
                        $status = 'Désactivé';
                        $title = 'Activation';
                        $color = 'badge-light-danger';
                      }
                  @endphp
                  <tr>
                    <td>
                      <div class="form-check form-check-sm form-check-custom form-check-solid">
                        <input class="form-check-input" type="checkbox" value="{{ $data->id }}" />
                      </div>
                    </td>
                    <td class="text-center">
                      <div class="d-flex flex-column">
                        <div class="symbol symbol-50px overflow-hidden me-3">
                          <a class="d-block overlay" data-fslightbox="lightbox-hot-sales" href="/assets/uploads/{{ $data->image }}">
                            <!--begin::Image-->
                            <div class="overlay-wrapper bgi-no-repeat bgi-position-center bgi-size-cover card-rounded mb-7"
                              style="height: 150px;background-image:url('/assets/uploads/{{ $data->image }}">
                            </div>
                            <!--end::Image-->
                            <!--begin::Action-->
                            <div class="overlay-layer card-rounded bg-dark bg-opacity-25">
                              <i class="bi bi-eye-fill fs-2x text-white"></i>
                            </div>
                            <!--end::Action-->
                          </a>
                        </div>
                      </div>
                    </td>
                    <td class="text-center">{{ $data->titre }}</td>
                    <td class="text-center">{{ $data->created_at }}</td>
                    <td class="text-center"><span data-kt-element="status" class="badge {{ $color }}">{{ $status }}</span></td>
                    <td class="text-center">
                      @if((in_array(3, Session::get('rights')[10])))
                        <a href="#" class="modalform" data-h="{{ $data->id }}|photomodiforms|modal-lg" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-dark" data-bs-placement="top" title="Modifier la photo" submitbtn="Modifier"><i class="fas fa-edit fa-size text-primary"></i></a>
                      @endif
                      @if((in_array(4, Session::get('rights')[10])))
                        <a href="#" class="status" data-h="{{ $data->id }}|{{ $data->status }}|Photo" data-toggle="tooltip" title="{{ $title }} de la photo"><i class="fas fa-{{ $icone }} fa-size {{ $color }}"></i></a>
                      @endif
                    </td>
                  </tr>
                  @php endforeach @endphp
                  <!--end::Table row-->
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!--end::Card body-->
      </div>
      <!--end::Card-->
    </div>
    <!--end::Container-->
  </div>
  <!--end::Post-->
</div>
@endsection

@section('scripts')
  <script src="/assets/backend/plugins/custom/fslightbox/fslightbox.bundle.js"></script>
@endsection