@extends('admin/_.app')


@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
      <h1 class="h3 mb-0 text-gray-800"></h1>
      <a href="{{ route('admin.actuality.all') }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
        <i class="fas fa-arrow-left fa-sm text-white-50"></i></a>
    </div>


    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <img class="img" src="{{ $actuality->getImg() }}" alt="">
                </div>
                <div class="col-md">
                    <form class="ess-form-checked" autocomplete="off" method="post" action="{{ route('admin.actuality.update') }}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="actualityId" value="{{ $actuality->id }}">

                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label>Date *</label>
                                    <input type="text" class="form-control ess-is-required ess-datepicker" name="dateA"
                                    data-inputmask="'mask': '99/99/9999'" data-msg="Veuiller renseigner la date" value="{{ date('d/m/Y', strtotime($actuality->dateA)) }}">
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label>Titre *</label>
                                    <input type="text" class="form-control ess-is-required" name="title"
                                    data-msg="Veuiller renseigner le titre" value="{{ $actuality->title }}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label>Sous-titre <small>(200)</small> *</label>
                                    <textarea name="subTitle" class="form-control" rows="2" maxlength="200">{{ $actuality->subTitle }}</textarea>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label>Description *</label>
                                    <textarea name="description" class="form-control ess-is-required" rows="4"
                                    data-msg="Veuiller renseigner la description">{{ $actuality->description }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                           <div class="col">
                            <div class="form-group">
                                <label for="exampleFormControlSelect1">Etat</label>
                                <select class="form-control ess-select2 " name="enabled">
                                    <option value="1"
                                        {{ $actuality->enabled==1 ? 'selected="selected"' : "" }}>
                                        Actif
                                    </option>
                                    <option value="0"
                                        {{ $actuality->enabled==0 ? 'selected="selected"' : "" }}>
                                        Inactif
                                    </option>
                                </select>
                            </div>
                           </div>
                           <div class="col">
                            <div class="form-group">
                                <label>Image principale</label>
                                <input type="file" class="form-control" name="img" accept="image/*">
                            </div>
                           </div>
                       </div>

                        <div><small>* Obligatoire</small></div>

                       <div class="row">
                         <div class="col">
                            <button type="submit" class="btn btn-primary btn-sm btn-icon-split mt-3">
                                <span class="icon text-gray-600">
                                  <i class="fas fa-arrow-right"></i>
                                </span>
                                <span class="text">Modifier</span>
                             </button>
                         </div>
                       </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md">
            <div class="card shadow">
              <div class="card-body">
                <div class="">
                  <button type="button" class="btn btn-sm btn-primary mt-2" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">
                      Ajouter des images
                  </button>
                  <hr>
                </div>
                  <ul class="photoLibrary">
                      @foreach ($actuality->photolibraries as $photolibrary)
                      <li>
                          <div class="img" style="background-image: url('{{ $photolibrary->getImg() }}');">
                            {{-- 
                            <a href="" class="btn btn-info btn-circle btn-sm">
                                <i class="fas fa-info-circle"></i>
                            </a> --}}
                            <a href="{{ route('admin.actuality.img.remove',['photoLibraryId'=>$photolibrary->id]) }}"
                            class="btn btn-danger btn-circle btn-sm ess-link-checked" data-msg="Confirmez-vous la supression ?">
                                <i class="fas fa-trash"></i>
                            </a>
                          </div>
                    </li>
                  @endforeach
                  </ul>
              </div>
            </div>
        </div>
        <div class="col-md">
            <div class="card shadow">
              <div class="card-body">
                <div class="">
                  <button type="button" class="btn btn-sm btn-primary mt-2" data-toggle="modal" data-target="#staticBackdrop">
                      Ajouter des Videos
                    </button>
                </div>
                  <ul class="photoLibrary">
                      @foreach ($actuality->movielibraries as $movielibrary)
                      <li class="ml-5">
                          <video width="220" height="140" controls>
                              <source src="{{ $movielibrary->getImg() }}" type="video/mp4">
                              <source src="{{ $movielibrary->getImg() }}" type="video/ogg">
                            Votre navigateur ne supporte pas les videos.
                          </video>
                          <div class="img">
                          <a href="" class="btn btn-info btn-circle btn-sm">
                              <i class="fas fa-info-circle"></i>
                          </a>
                          <a href="{{ route('admin.actuality.video.remove',['movieLibraryId'=>$movielibrary->id]) }}"
                          class="btn btn-danger btn-circle btn-sm ess-link-checked" data-msg="Souhaitez-vous suprimer la photo de la gallerie">
                              <i class="fas fa-trash"></i>
                          </a>
                  </li>
                  @endforeach
                  </ul>
              </div>
            </div>
        </div>
    </div>
</div>

<!-- Phototèque Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Phototèque</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form method="post" action="{{ route('admin.actuality.img.add') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="actualityId" value="{{ $actuality->id }}">
            <div class="form-group">
              <label for="Images" class="col-form-label">Images:</label>
              <input type="file" class="form-control" name="imgs[]" multiple accept="image/*">
            </div>
              <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Ajouter</button>
              </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Videotèque Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Videothèque</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" action="{{ route('admin.actuality.video.add') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="actualityId" value="{{ $actuality->id }}">
            <div class="form-group">
              <label for="Images" class="col-form-label">Video:</label>
              <input type="file" class="form-control" name="imgs[]" multiple accept="video/*">
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Ajouter</button>
              </div>
          </form>
      </div>
    </div>
  </div>
</div>
@endsection