@extends('welcome')
@section('calendar')
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
    fieldset {
      background-color: #eeeeee;
      display: block;
      margin-left: 2px;
      margin-right: 2px;
      padding-top: 0.35em;
      padding-bottom: 0.625em;
      padding-left: 0.75em;
      padding-right: 0.75em;
      border: 2px groove (internal value);
    }

    legend {
      background-color: gray;
      color: white;
      padding: 5px 10px;
    }
    </style>
@endsection
@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark">Tableau de Bord</h1>
        </div><!-- /.col -->
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active">Tableau de Bord</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->
<section class="content">
    <div class="container-fluid">
      <!-- Info boxes -->
      <div class="row">
        <div class="col-12 col-sm-6 col-md-4">
          <div class="info-box">
            <span class="info-box-icon bg-info elevation-1"><i class="fas fa-cog"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Activités Annuel</span>
              <span class="info-box-number">
                {{ $nbActiviteOfYear }}
              </span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-12 col-sm-6 col-md-4">
          <div class="info-box mb-3">
            <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-thumbs-down"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Reporting</span>
              <span class="info-box-number">{{ $nbActiviteReporting }}</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix hidden-md-up"></div>

        <div class="col-12 col-sm-6 col-md-4">
          <div class="info-box mb-3">
            <span class="info-box-icon bg-success elevation-1"><i class="fas fa-thumbs-up"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Planification</span>
              <span class="info-box-number">{{ $nbActivitePlanifie }}</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
       {{--   <div class="col-12 col-sm-6 col-md-3">
          <div class="info-box mb-3">
            <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">New Members</span>
              <span class="info-box-number">2,000</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>  --}}
        <!-- /.col -->
      </div>
      <!-- /.row -->

      <div class="row">
        <div class="col-md-12">
            @if($user->role=='admin')
          <div class="card">
            <div class="card-header">
              <h5 class="card-title"></h5>

            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <div class="row">
                  <div class="col-md-12">
                    <fieldset>
                        <legend>Recherche par periode et/ou par Personne:</legend>
                      <form action="{{ route('search.date') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-sm-5">
                                <input type="hidden" id="from" name="from"  value="{{ old('from') }}" class="form-control" required>
                            </div>
                            <div class="col-sm-5">
                                 <input type="hidden" id="to" name="to"  value="{{ old('to') }}" class="form-control" required>
                            </div>
                            <div class="col-sm-2">

                            </div>
                            <div class="col-sm-5">

                            <div class="form-group">
                                <label> Periode:</label>

                                <div class="input-group">
                                  <div class="input-group-prepend">
                                    <span class="input-group-text">
                                      <i class="far fa-calendar-alt"></i>
                                    </span>
                                  </div>
                                  <input type="text" name="daterange" class="form-control float-right" id="reservation">

                                </div>
                                <!-- /.input group -->
                              </div>
                            </div>
                            <div class="col-sm-5">

                                <div class="form-group">
                                    <label> Responsable:</label>

                                    <div class="input-group">
                                      <div class="input-group-prepend">
                                        <span class="input-group-text">
                                          <i class="far fa-user"></i>
                                        </span>
                                      </div>
                                      <select class="form-control" name="user_id">
                                        <option value="">Faites un choix</option>
                                        @foreach($users as $usr)
                                        <option value="{{ $usr->id }}">{{ $usr->name }}</option>
                                        @endforeach
                                    </select>
                                      <button type="submit" class="btn btn-success btn btn-sm "> Rechercher</button>
                                    </div>
                                    <!-- /.input group -->
                                  </div>
                                </div>
                        </div>

                      </form>
                    </fieldset>
                  </div>
                  <div class="col-md-12">
                    <fieldset>
                        <legend>Recherche par Personne:</legend>
                      <form action="{{ route('search.date') }}" method="POST">
                        @csrf
                        <div class="row">
                            <div class="col-sm-5">

                                <div class="form-group">
                                    <label> Responsable:</label>

                                    <div class="input-group">
                                      <div class="input-group-prepend">
                                        <span class="input-group-text">
                                          <i class="far fa-user"></i>
                                        </span>
                                      </div>
                                      <select class="form-control" name="user_id">
                                        <option value="">Faites un choix</option>
                                        @foreach($users as $usr)
                                        <option value="{{ $usr->id }}">{{ $usr->name }}</option>
                                        @endforeach
                                    </select>
                                      <button type="submit" class="btn btn-success btn btn-sm "> Rechercher</button>
                                    </div>
                                    <!-- /.input group -->
                                  </div>
                                </div>
                        </div>

                      </form>
                    </fieldset>
                  </div>
                <div class="col-md-12">

  @if($user->role=='admin')
  <h2>Activité Planifié</h2>
                <div class="card-body">


                <table id="example2" class="table table-bordered table-responsive-md table-striped text-center">
                    <thead>
                        <tr>
                            <th>Responsable</th>
                            <th>Activité</th>
                            <th>Avec</th>
                            <th>Lieu</th>
                            <th>Date</th>
                            {{--  <th>Niveau de Realisation</th>  --}}
                            @if($user->role=='admin')
                            <th>action</th>
                            @endif


                        </tr>
                    </thead>
                    <tbody>
                    @foreach ($activitePlanifies as $activite)
                        <tr>
                            <td>{{ $activite->user->name }}</td>
                            <td>{{ $activite->nom }}</td>
                            <td>{{ $activite->personne }}</td>
                            <td>{{ $activite->Lieu }}</td>
                            <td>{{ $activite->date }}</td>
                            {{--  <td>
                                @if($activite->etat==1)
                                 <span class="badge badge-success">
                                     Réalisé
                                     </span>
                                @else
                                <span class="badge badge-danger">
                                    non réalisé
                                </span>
                                @endif

                            </td>  --}}
                            @if($user->role=='admin')
                            <td>
                            <button type="button" class="btn btn-block btn-default btn-sm" data-toggle="modal" data-target="#modal-default{{ $activite->id }}">
                                <i class="fas fa-edit"></i> Modifier
                              </button>
                              <div class="modal fade" id="modal-default{{ $activite->id }}">
                                <div class="modal-dialog">
                                  <div class="modal-content">
                                    <div class="modal-header">
                                      <h4 class="modal-title">Modifier Etat</h4>
                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                      </button>
                                    </div>
                                    <form action="{{ route('update.etat') }}" method="POST">
                                        @csrf
                                    <div class="modal-body">
                                        @csrf
                                        <div class="col-lg-6">
                                            <div class="input-group">

                                                <label>Etat</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select class="form-control" name="etat" required="">
                                                    <option {{$activite->etat == 1 ? 'selected' : ''}} value="1">realisé</option>
                                                    <option value="0" {{$activite->etat == 0 ? 'selected' : ''}}>non realisé</option>
                                                </select>
                                            </div>
                                        </div>
                                        <input type="hidden" value="{{ $activite->id }}" name="activite_id">
                                    </div>
                                    <div class="modal-footer justify-content-between">
                                      <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                                      <input type="submit"class="btn btn-primary" value="modifier">
                                    </div>
                                    </form>
                                  </div>
                                  <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                              </div>
                            </td> @endif
                        </tr>
                        @endforeach

                    </tbody>
                </table>

                @endif
                <h2>Activité Reporting</h2>
                @if($user->role=='admin')
                <table id="example3" class="table table-bordered table-responsive-md table-striped text-center">
                    <thead>
                        <tr>
                            <th>Responsable</th>
                            <th>Activité</th>
                            <th>Date</th>
                            <th>Livrable</th>
                            <th>Observation</th>
                            @if($user->role=='admin')
                            <th>action</th>
                            @endif


                        </tr>
                    </thead>
                    <tbody>
                    @foreach ($activiteReportings as $activite)
                        <tr>
                            <td>{{ $activite->user->name }}</td>
                            <td>{{ $activite->nom }}</td>
                            <td>{{ $activite->date }}</td>
                            <td>{!! $activite->resultat !!}</td>
                            <td>
                                {!! $activite->observation !!}
                                {{--  @if($activite->etat==1)
                                 <span class="badge badge-success">
                                     Réalisé
                                     </span>
                                @else
                                <span class="badge badge-danger">
                                    non réalisé
                                </span>
                                @endif  --}}

                            </td>
                            @if($user->role=='admin')
                            <td>
                            <button type="button" class="btn btn-block btn-default btn-sm" data-toggle="modal" data-target="#modal-default{{ $activite->id }}">
                                <i class="fas fa-edit"></i> Modifier
                              </button>
                              <div class="modal fade" id="modal-default{{ $activite->id }}">
                                <div class="modal-dialog">
                                  <div class="modal-content">
                                    <div class="modal-header">
                                      <h4 class="modal-title">Modifier Etat</h4>
                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                      </button>
                                    </div>
                                    <form action="{{ route('update.etat') }}" method="POST">
                                        @csrf
                                    <div class="modal-body">
                                        @csrf
                                        <div class="col-lg-6">
                                            <div class="input-group">

                                                <label>Etat</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select class="form-control" name="etat" required="">
                                                    <option {{$activite->etat == 1 ? 'selected' : ''}} value="1">realisé</option>
                                                    <option value="0" {{$activite->etat == 0 ? 'selected' : ''}}>non realisé</option>
                                                </select>
                                            </div>
                                        </div>
                                        <input type="hidden" value="{{ $activite->id }}" name="activite_id">
                                    </div>
                                    <div class="modal-footer justify-content-between">
                                      <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                                      <input type="submit"class="btn btn-primary" value="modifier">
                                    </div>
                                    </form>
                                  </div>
                                  <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                              </div>
                           </td> @endif
                        </tr>
                        @endforeach

                    </tbody>
                </table>
                @endif

                </div>

                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div>
            <!-- ./card-body -->


          </div>
          <!-- /.card -->
        </div>
        @endif
        <!-- /.col -->
    </div>

        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Calendrier activités</h3>

                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                            <i class="fas fa-minus"></i></button>
                        <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
                            <i class="fas fa-times"></i></button>
                    </div>
                </div>
                <div class="card-body">
                    <div id='calendar'></div>
                </div>
                <div class="card-footer">

                </div>
        </div>
        </div>

      <!-- /.row -->

      <!-- Main row -->

      <!-- /.row -->
    </div>
    <!--/. container-fluid -->
  </section>
  <!-- /.content -->
</div>
@endsection
@section('script')
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script>
    $(function() {
        const currentDate = new Date();
        const currentDayOfMonth = currentDate.getDate();
        const currentMonth = currentDate.getMonth(); // Be careful! January is 0, not 1
        const currentYear = currentDate.getFullYear();

        $('#from').val( currentYear + "-" + (currentMonth + 1) + "-" + currentDayOfMonth  );
        $('#to').val(currentYear+ "-" + (currentMonth + 1) + "-" +  currentDayOfMonth  );
      $('input[name="daterange"]').daterangepicker({
        "locale": {
            "format": "DD/MM/YYYY",
            "separator": " - ",
            "applyLabel": "Appliquer",
            "cancelLabel": "Annuler",
            "fromLabel": "De",
            "toLabel": "A",
            "customRangeLabel": "Custom",
            "weekLabel": "S",
            "daysOfWeek": [
                "Di",
                "Lu",
                "Ma",
                "Me",
                "Je",
                "Ve",
                "Sa"
            ],
            "monthNames": [
                "Janvier",
                "Fevrier",
                "Mars",
                "Avril",
                "Mai",
                "Juin",
                "Juillet",
                "Auout",
                "Septembre",
                "Octobre",
                "Novembre",
                "Decembre"
            ]},
        opens: 'left'
      }, function(start, end, label) {
        console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
        $('#from').val(start.format('YYYY-MM-DD'));
        $('#to').val(end.format('YYYY-MM-DD'));
      });


    });
    </script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/locale-all.js'></script>
    <script>
        $(document).ready(function() {
            // page is now ready, initialize the calendar...

            $('#calendar').fullCalendar({
                // put your options and callbacks here
                locale: 'fr',
                events : [
                    @foreach($activites as $activite)

                    {

                        title : '{{ $activite->nom}}',

                        start : '{{ $activite->date }}',
                        end: '{{$activite->datefin }}',
                        url : '{{ route('activite.show', $activite->id) }}'
                    },

                    @endforeach
                ]
            })
        });

    </script>
@endsection