@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-primary modalform" data-h="{{ '0|photoforms|modal-lg' }}"
                data-toggle="tooltip" title="Modification du slide" submitbtn="Modifier">
                <!--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-->
            <!--begin::Group actions-->
            <div class="d-flex justify-content-end align-items-center d-none" data-kt-user-table-toolbar="selected">
              <div class="fw-bolder me-5">
                <span class="me-2" data-kt-user-table-select="selected_count"></span>Selected
              </div>
              <button type="button" class="btn btn-danger" data-kt-user-table-select="delete_selected">Delete
                Selected</button>
            </div>
            <!--end::Group actions-->
          </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-header align-items-center py-5 gap-2 gap-md-5">
              <div class="card-title">
                <!--begin::Search-->
                <div class="d-flex align-items-center position-relative my-1">
                  <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                  <span class="svg-icon svg-icon-1 position-absolute ms-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
                        transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
                      <path
                        d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                        fill="currentColor" />
                    </svg>
                  </span>
                  <!--end::Svg Icon-->
                  <input type="text" data-kt-filter="search" class="form-control form-control-solid w-250px ps-14"
                    placeholder="Rechercher" />
                </div>
                <!--end::Search-->
              </div>
            </div>
            <div class="card-body">
              <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">
                  @foreach($actualites as $data)
                    @if($data->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
                  <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="d-flex align-items-center">
                      <div class="d-flex flex-column">
                        <div class="symbol symbol-50px overflow-hidden me-3">
                          <img alt="{{ $data->titre }}" src="/assets/uploads/{{ $data->image }}"
                            class="w-100">
                        </div>
                      </div>
                    </td>
                    <td>{{ $data->titre }}</td>
                    <td>{{ $data->created_at }}</td>
                    <td class="center"><span class="badge badge-light-{{ $color }} fw-bolder">{{ $status }}</span></td>
                    <td class="text-end">
                      <a href="#" class="btn btn-light btn-active-light-primary btn-sm" data-kt-menu-trigger="click"
                        data-kt-menu-placement="bottom-end">Actions
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
                        <span class="svg-icon svg-icon-5 m-0">
                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none">
                            <path
                              d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z"
                              fill="currentColor" />
                          </svg>
                        </span>
                      </a>
                      <div
                        class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
                        data-kt-menu="true">
                        <!--begin::Menu item-->
                        <div class="menu-item px-3">
                          <a href="#" class="menu-link px-3 modalform" data-h="{{ $data->id.'|actualiteforms|modal-lg' }}"
                            data-toggle="tooltip" title="Modification photo" submitbtn="Modifier">Modifier</a>
                        </div>
                        <!--end::Menu item-->
                        <!--begin::Menu item-->
                        <div class="menu-item px-3">
                          <a href="#" class="status menu-link px-3" data-h="{{ $data->id.'|'.$data->status.'|Actualite' }}" data-toggle="tooltip" title="{{ $title }} le actualite">{{ $title }}</a>
                        </div>
                        <!--end::Menu item-->
                      </div>
                      <!--end::Menu-->
                    </td>
                    <!--end::Action=-->
                  </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')

@endsection