@include('includes.header')
<div class="container page__heading-container">
  <div class="page__heading d-flex align-items-end">
    <div class="flex">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item">{{ $categorie }}</li>
          <li class="breadcrumb-item active"
          aria-current="page">Carnet</li>
        </ol>
      </nav>
      <h1 class="m-0">Carnet d'entretien</h1>
    </div>
    @if(Auth::user()->admin == 1)
    <div class="flatpickr-wrapper ml-3">
      <button type="button"
      class="btn btn-primary"
      data-toggle="modal"
      data-target="#newCarnet"><i class="fas fa-plus"></i>&nbsp;&nbsp;Ajouter un élément
    </div>
    @endif
    @include('includes.toast', ['msg' => $msg])
  </div>
  <div class="container page__container">
    <div class="row">
      <div class="col-8">
        <div id='calendar'></div>
      </div>
      <div class="col-4">
        <div class="form-group">
          <input id="search" type="text" class="form-control" placeholder="Recherche...">
        </div>
        @if(count($carnets) == 0) <i>Carnet vide.</i>
        @else
        @foreach($carnets as $carnet)
        <div class="carnetbox">
          <div class="alert alert-soft-secondary d-flex align-items-center" role="alert">
            <a href="#" style="color: #000;text-decoration:none" data-toggle="modal" data-target="#editCarnet{{ $carnet->id }}"><strong style="margin-right: 10px; width: 45%"><i class="far fa-calendar" style="margin-right: 5px"></i>{{ $carnet->date }}</strong>
            <div class="text-body"><i>{{ $carnet->titre }}</i></div></a>
          </div>
        </div>
        @endforeach
        @endif
      </div>
    </div>
  </div>
</div>
</div>
</div>
</div>
</div>
<!-- // END Header Layout Content -->
</div>
<!-- // END Header Layout -->
@include('widgets.newCarnet')
@foreach ($carnets as $carnet)
@include('widgets.editCarnet', ['id' => $carnet->id, 'titre' => $carnet->titre])
@endforeach
@include('includes.footer')
<script type="text/javascript">
  $(document).ready(function(){
    $("#search").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $(".carnetbox").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
  });
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      locale: 'fr',
      eventColor: 'green',
      eventClick: function(info) {
        $('#editCarnet'+info.event.id).modal();
      },
      events: [
      @foreach($carnets as $carnet)
      {
        title: '{{ $carnet->titre }}',
        id: '{{ $carnet->id }}',
        start: '{{ $carnet->date }}'
      },
      @endforeach
      ]
    });

    calendar.render();
  });
</script>
</body>

</html>