@extends('layouts.index')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/dataTables.bootstrap4.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/fullcalendar.css') }}">
    {{-- <link rel="stylesheet" href="css/fullcalendar.css"> --}}

@endsection
@section('contents')
    <div class="row justify-content-center">
        @if($mouvementArticles->count() > 0)
        {!! pageTitle("Mouvement sur l'article " . $mouvementArticles[0]->article->name) !!}
        {{-- {!! pageTitle("Gestion des Mouvement sur l'article " . $mouvementArticles[0]->article->name) !!} --}}

        {{-- <div class="col-lg-12  grid-margin ">
            <div class="card shadow">
                <div class="card-body">
                    <h4 class="card-title">La liste des Mouvement sur l'article {{ $mouvementArticles[0]->article->name }}</h4>
                    <div class="d-flex">
                        @if(IsAdmin())
                        <button type="button" class="btn mb-2 btn-outline-secondary">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="displayAll">
                                <label class="custom-control-label" for="displayAll">Afficher tous y compris ceux
                                    suppprimés</label>
                            </div>
                        </button>
                        @endif --}}
                        {{-- <button type="button" class="btn mb-2 btn-outline-info ml-auto" id="trigerModalForm"> --}}
                            {{-- <i class="fe fe-plus-circle fe-16 "></i> --}}
                            {{-- <span class="ml-3 text-bold">Ajouter une famille d'article </span> --}}
                        {{-- </button> --}}
                    {{-- </div>

                    <div class="table-responsive pt-3">
                        <table class="table table-striped table-bordered " id="categoryArticleTable">
                            <thead>
                                <tr class="text-center">
                                    <th> N°</th>
                                    <th> libelle </th>
                                    <th> description</th>
                                    <th> Action</th>
                                </tr>
                            </thead>

                        </table>
                    </div>
                </div>
            </div>
        </div> --}}
        <div class="col-12">
            <div class="row align-items-center my-3">
              <div class="col">
                {{-- <h2 class="page-title">Calendar</h2> --}}
              </div>
              <div class="col-auto">
                <button type="button" class="btn" data-toggle="modal" data-target=".modal-calendar"><span class="fe fe-filter fe-16 text-muted"></span></button>
                {{-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#eventModal"><span class="fe fe-plus fe-16 mr-3"></span>New Event</button> --}}
              </div>
            </div>
            <div id='calendar'></div>
            <!-- new event modal -->
            <div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="varyModalLabel">New Event</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body p-4">
                    <form>
                      <div class="form-group">
                        <label for="eventTitle" class="col-form-label">Title</label>
                        <input type="text" class="form-control" id="eventTitle" placeholder="Add event title">
                      </div>
                      <div class="form-group">
                        <label for="eventNote" class="col-form-label">Note</label>
                        <textarea class="form-control" id="eventNote" placeholder="Add some note for your event"></textarea>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-8">
                          <label for="eventType">Event type</label>
                          <select id="eventType" class="form-control select2">
                            <option value="work">Work</option>
                            <option value="home">Home</option>
                          </select>
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="date-input1">Start Date</label>
                          <div class="input-group">
                            <div class="input-group-prepend">
                              <div class="input-group-text" id="button-addon-date"><span class="fe fe-calendar fe-16"></span></div>
                            </div>
                            <input type="text" class="form-control drgpicker" id="drgpicker-start" value="04/24/2020">
                          </div>
                        </div>
                        <div class="form-group col-md-6">
                          <label for="startDate">Start Time</label>
                          <div class="input-group">
                            <div class="input-group-prepend">
                              <div class="input-group-text" id="button-addon-time"><span class="fe fe-clock fe-16"></span></div>
                            </div>
                            <input type="text" class="form-control time-input" id="start-time" placeholder="10:00 AM">
                          </div>
                        </div>
                      </div>
                      <div class="form-row">
                        <div class="form-group col-md-6">
                          <label for="date-input1">End Date</label>
                          <div class="input-group">
                            <div class="input-group-prepend">
                              <div class="input-group-text" id="button-addon-date"><span class="fe fe-calendar fe-16"></span></div>
                            </div>
                            <input type="text" class="form-control drgpicker" id="drgpicker-end" value="04/24/2020">
                          </div>
                        </div>
                        <div class="form-group col-md-6">
                          <label for="startDate">End Time</label>
                          <div class="input-group">
                            <div class="input-group-prepend">
                              <div class="input-group-text" id="button-addon-time"><span class="fe fe-clock fe-16"></span></div>
                            </div>
                            <input type="text" class="form-control time-input" id="end-time" placeholder="11:00 AM">
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer d-flex justify-content-between">
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="RepeatSwitch" checked>
                      <label class="custom-control-label" for="RepeatSwitch">All day</label>
                    </div>
                    <button type="button" class="btn mb-2 btn-primary">Save Event</button>
                  </div>
                </div>
              </div>
            </div> <!-- new event modal -->
          </div>
        @else
        <div class="col-lg-12  grid-margin ">
            <div class="card shadow">
                <div class="card-body">
                    <h4 class="card-title">Aucun Mouvement sur l'article à ce jour</h4>
                </div>
            </div>
        </div>
        @endif

    </div>
@endsection
@section('js')
    <!-- plugin js for this page -->
    <script src="{{ asset('assets/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/js/fullcalendar.js') }}"></script>
    <script>
        /** full calendar */
        var calendarEl = document.getElementById('calendar');
        if (calendarEl)
        {
          document.addEventListener('DOMContentLoaded', function()
          {
            var calendar = new FullCalendar.Calendar(calendarEl,
            {
                locale: 'fr',
              plugins: ['dayGrid', 'timeGrid', 'list', 'bootstrap'],
              timeZone: 'Africa/Porto-Novo',
              themeSystem: 'bootstrap',
              header:
              {
                left: 'today, prev, next',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
              },
              buttonIcons:
              {
                prev: 'fe-arrow-left',
                next: 'fe-arrow-right',
                prevYear: 'left-double-arrow',
                nextYear: 'right-double-arrow'
              },
              weekNumbers: true,
              eventLimit: true, // allow "more" link when too many events
              events: 'https://fullcalendar.io/demo-events.json'
            });
            calendar.render();
          });
        }
      </script>

    <script>
        
    </script>
@endsection()