@extends('layouts.master')
@section('stylesheets')
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  <style media="screen">
  .dateformat {
    display:none;
  }
  </style>
  {{-- <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> --}}
@endsection

@section('content')

  <div class="content-header">
    <h1>
      Επιτροπή Ερευνών
      <small>Version 1.0</small>
    </h1>
    {!! Breadcrumbs::render('meetings') !!}
  </div>

  @if($meetings->count() === 0)
  <div class="row">
    <div class="col">
      <div class="alert alert-danger text-center" role="alert">
        <h5>Δεν υπάρχουν καταχωρημένες συνεδριάσεις</h5>
      </div>
    </div>
  </div>
  @else

  <div class="row">
    <div class="col">
      <div class="box">
        <div class="box-header">
          <h3 class="box-title">Λίστα Συνεδριάσεων</h3>
          @can('admins')
            <div class="btn btn-success float-right">
              <a href="#" class="download-link"
                data-target="#confirmAdd"
                data-toggle="modal">
                <i class="fas fa-plus mr-2"></i>Προσθήκη Συνεδρίασης</a>
            </div>
          @endcan
          @component('meetings.components.create')
          @endcomponent
        </div>
        <div class="box-body">
          <table id="meetings" class="table table-striped table-bordered" style="width:100%">
            <thead>
              <tr>
                <th>Αριθμός Συνεδρίασης</th>
                <th>Ημερομηνία-Ώρα</th>
                <th>Created On</th>
                <th>Status</th>
                <th>Ημερήσια Διάταξη</th>
                <th>Πρακτικό</th>
                <th>Αιτήσεις</th>
                <th>Ενέργειες</th>
                <th>Εισήγηση</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($meetings as $meeting)
                <tr>
                    <td>{{$meeting->number_meeting}}</td>
                    <td>{{ $meeting->date_meeting }} - {{$meeting->hour_meeting}}</td>
                    <td>
                      <span class="dateformat">{{ date('Y-m-d', strtotime($meeting->created_at)) }}</span>{{ date('j M. Y', strtotime($meeting->created_at)) }}</td>
                    <td>@include('meetings.columns.status')</td>
                    <td>@include('meetings.columns.agenda')</td>
                    <td>@include('meetings.columns.minute')</td>
                    <td>@include('meetings.columns.subjects')</td>
                    <td>@include('meetings.columns.actions')</td>
                    <td>@include('meetings.columns.suggestion')</td>
                </tr>
              @endforeach
            </tbody>
            <tfoot>
              <tr>
                <th>Αριθμός Συνεδρίασης</th>
                <th>Ημερομηνία-Ώρα</th>
                <th>Created On</th>
                <th>Status</th>
                <th>Ημερήσια Διάταξη</th>
                <th>Πρακτικό</th>
                <th>Αιτήσεις</th>
                <th>Ενέργειες</th>
                <th>Εισήγηση</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  </div>

  @endif
@endsection

@section('javascripts')
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <script type="text/javascript">

  $(document).ready(function() {
      $('#meetings').DataTable({
        "order": [[ 2, "desc" ]]
      });
  } );

  // Example starter JavaScript for disabling form submissions if there are invalid fields
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();

  $('#datetimepicker3').datetimepicker({
    format: 'LT'
  });

  $('input[name="date_meeting"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    locale: {
      format: 'DD/MM/YYYY'
    }
  });

  </script>
@endsection