@extends('layouts.master')

@section('stylesheets')
  <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" />
@endsection

@section('content')

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

  <div class="row">
    <div class="col">
      <div class="box box-success">
        <div class="box-header">
          <span class="fa-stack fa-lg text-green">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-tasks fa-stack-1x fa-inverse"></i>
          </span>
          <h3 class="box-title">Προσθήκη Συνεδρίασης</h3>
        </div>
        @if (count($errors) > 0)
          <div class="alert alert-danger">
            <ul>
              @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
              @endforeach
            </ul>
          </div>
        @endif

        <div class="box-body">
          <form class="needs-validation" novalidate method="post" action="{{route('store.meetings')}}">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <div class="form-row">
              <div class="col-md-4 mb-3">
                <label for="validationTooltip01">Αριθμός Συνεδρίασης *</label>
                <input type="text" name="number_meeting" class="form-control" id="validationTooltip01 number_meeting" placeholder="..." required>
                <div class="invalid-tooltip">
                  Παρακαλώ προσθέστε αριθμό συνεδρίασης
                </div>
              </div>
              <div class="col-md-4 mb-3">
                <label for="validationTooltip02">Ημερομηνία Συνεδρίασης</label>
                <input type="text" class="form-control" name="date_meeting" id="validationTooltip02 date_meeting" placeholder="..." required>
                <div class="invalid-tooltip">
                  Παρακαλώ προσθέστε ημερομηνία συνεδρίασης
                </div>
              </div>
              <div class="col-md-4 mb-3">
                <div class="form-group">
                  <label for="validationtime">Ώρα Συνεδρίασης</label>
                    <div class="input-group date" id="datetimepicker3" data-target-input="nearest">
                        <input type="text" class="form-control datetimepicker-input" name="hour_meeting" id="validationTooltipTime hour_meeting" placeholder="..." data-target="#datetimepicker3" required/>
                        <div class="input-group-append" data-target="#datetimepicker3" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-clock-o"></i></div>
                        </div>
                        <div class="invalid-tooltip">
                          Παρακαλώ προσθέστε ώρα συνεδρίασης
                        </div>
                    </div>
                </div>
              </div>
            </div>
            <div class="box-footer">
              <a href="{{route('index.meetings')}}" class="btn btn-danger float-right">Ακύρωση</a>
              <button class="btn btn-primary float-right mr-3" type="submit">Προσθήκη</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

@endsection

@section('javascripts')
  <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>
  // 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