@extends('layouts.master')

@section('stylesheets')
  <link href="{{ asset('css/admin/select2-bootstrap4.css') }}" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
@endsection

@section('content')

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

  <div class="row justify-content-center">
    <div class="col-sm-8">
      <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-cog fa-stack-1x fa-inverse"></i>
          </span>
          <h3 class="box-title">Προσθήκη Έργου</h3>
        </div> <!-- .box box-success -->
        @if (count($errors) > 0)
        <div class="alert alert-danger">
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div> <!-- .alert alert-danger -->
        @endif
        <div class="box-body">
        {!! Form::open(['route'=> ['store.project'], 'method'=>'POST', 'class'=> 'form-horizontal needs-validation', 'files'=> true, 'novalidate']) !!}
          <div class="form-row">
            <input type="text" name="flag" value="project" hidden>
            <div class="col-md-2 mb-3">
              <label for="validcodeid">Κωδικός Έργου *</label>
              <input type="text" name="codeid" class="form-control" id="codeid" placeholder="Κωδικός Έργου" required>
              <div class="invalid-feedback">
                Παρακαλώ συμπληρώστε τον Κωδικό Έργου
              </div>
            </div>
            <div class="col-md-10 mb-3">
              <label for="validtitle">Τίτλος Έργου *</label>
              <input type="text" name="title" class="form-control" id="title" placeholder="Τίτλος Έργου" required>
              <div class="invalid-feedback">
                Παρακαλώ συμπληρώστε τον Τίτλο Έργου
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="col-md-6 mb-3">
              <label for="validcodeid">Χρηματοδότηση *</label>
              <select class="form-control" name="funding_id" class="form-control" id="funding_id" required>
                <option></option>
                @foreach ($fundings as $funding)
                <option value="{{$funding->id}}">{{$funding->funding_name}}</option>
                @endforeach
              </select>
              <div class="invalid-feedback">
                Παρακαλώ συμπληρώστε την Χρηματοδότηση του Έργου
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <label for="validcodeid">Επιστημονικός Υπεύθυνος *</label>
              <select class="form-control" name="researcher_id" class="form-control" id="researcher_id" required>
                <option></option>
                @foreach ($researchers as $researcher)
                <option value="{{$researcher->id}}">{{$researcher->firstname}} {{$researcher->lastname}}</option>
                @endforeach
              </select>
              <div class="invalid-feedback">
                Παρακαλώ συμπληρώστε τον Επιστημονικό Υπεύθυνο του Έργου
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="col-md-4 mb-3">
              <label for="validcodeid">Έναρξη Έργου</label>
              <input type="text" name="start" class="form-control" id="start" placeholder="Έναρξη Έργου">
              <div class="valid-feedback">
                Συμπληρώθηκε με επιτυχία το πεδίο: Έναρξη Έργου
              </div>
            </div>
            <div class="col-md-4 mb-3">
              <label for="validtitle">Λήξη Έργου</label>
              <input type="text" name="end" class="form-control" id="end" placeholder="Λήξη Έργου">
              <div class="valid-feedback">
                Συμπληρώθηκε με επιτυχία το πεδίο: Λήξη Έργου
              </div>
            </div>
            <div class="col-md-4 mb-3">
              <label for="validtitle">Προϋπολογισμός Έργου</label>
              <input type="text" name="budget" class="form-control" id="budget" placeholder="Προϋπολογισμός Έργου">
              <div class="valid-feedback">
                Συμπληρώθηκε με επιτυχία το πεδίο: Προϋπολογισμός Έργου
              </div>
            </div>
          </div>
          <div class="box box-primary">
            <div class="box-header">
              <span class="fa-stack fa-lg text-blue">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa fa-cogs fa-stack-1x fa-inverse"></i>
              </span>
              <h3 class="box-title">Επιλέξιμες Δαπάνες</h3>
            </div>
          </div>
          <div id="costfields">
            <div class="form-row">
              <div class="col-md-5 mb-3">
                <input type="text"
                  name="cost_name[]"
                  class="form-control"
                  id="cost_name"
                  placeholder="Επιλέξιμη Δαπάνη"
                  maxlength="255"
                  value="">
              </div>
              <div class="col-md-5 mb-3">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text">€</span>
                  </div>
                  <input type="text"
                    name="cost_budget[]"
                    class="form-control"
                    id="cost_budget"
                    placeholder="Κόστος Δαπάνης"
                    maxlength="255"
                    value="">
                </div>
              </div>
              <div class="col-md-2 mb-3">
                <button class="pull-right btn btn-success" type="button" onclick="costfields();">
                  <i class="fa fa-plus"></i>
                </button>
              </div>
            </div>
          </div> <!-- .costfields -->
          <div class="box box-warning">
            <div class="box-header">
              <span class="fa-stack fa-lg text-orange">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fas fa-euro-sign fa-stack-1x fa-inverse"></i>
              </span>
              <h3 class="box-title">Ετήσιος Προϋπολογισμός</h3>
            </div>
          </div> <!-- .box-budget -->
          <div id="budgetfields">
            <div class="form-row">
              <div class="col-md-1 mb-3">
                <input type="text"
                  name="budget_year[]"
                  class="form-control"
                  id="budget_year"
                  placeholder="Έτος"
                  maxlength="255"
                  value="">
              </div>
              <div class="col-md-2 mb-3">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text">€</span>
                  </div>
                  <input type="text"
                    name="budget_total[]"
                    class="form-control"
                    id="budget_total"
                    placeholder="Προϋπολογισμός"
                    maxlength="255"
                    value="">
                </div>
              </div>
              <div class="col-md-4 mb-3">
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text">Περιγραφή Αρχείου</span>
                  </div>
                  <input type="text"
                    name="description[]"
                    class="form-control"
                    id="description"
                    placeholder="..."
                    maxlength="255"
                    value="">
                </div>
              </div>
              <div class="col-md-3 mb-3">
                <input class="form-control-file" id="filename" name="filename[]" type="file">
              </div>
              <div class="col-md-2 mb-3">
                <button class="pull-right btn btn-success" type="button" onclick="budgetfields();">
                  <i class="fa fa-plus"></i>
                </button>
              </div>
            </div>
          </div> <!-- .budgetfields -->
          <div class="box-footer">
            <a href="{{route('index.projects')}}" class="btn btn-danger float-right">Ακύρωση</a>
            <button class="btn btn-primary float-right mr-3" type="submit" id="formsbj">Προσθήκη</button>
          </div>
        {!! Form::close() !!}
        </div> <!-- .box-body -->
      </div> <!-- .box box-success -->
    </div> <!-- .col-sm-8 -->
  </div> <!-- .row -->

@endsection

@section('javascripts')
  <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 src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
  <script type="text/javascript">

  $(document).ready(function() {
      $('#researcher_id').select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: $(this).attr('placeholder'),
        allowClear: Boolean($(this).data('allow-clear'))
      });
  });

  (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);
  })();

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

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

  var formrow = 1;
  var formbudget = 1;
  var formupload = 1;
  function costfields()
  {

    formrow++;
    var objTo = document.getElementById('costfields');
    var divform = document.createElement("div");
    divform.setAttribute("class", "removeclass"+formrow);
    var rdiv = 'removeclass'+formrow;

    divform.innerHTML = '<div id="costfields"><div class="form-row"><div class="col-md-5 mb-3"><input type="text"data-serial="'+formrow+'"name="cost_name[]"class="form-control"id="cost_name'+formrow+'"placeholder="Επιλέξιμη Δαπάνη"maxlength="255"value=""required></div><div class="col-md-5 mb-3"><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text">€</span></div><input type="text"name="cost_budget[]"class="form-control"id="cost_budget'+formrow+'"placeholder="Κόστος Δαπάνης"maxlength="255"value=""required></div></div><div class="col-md-2 mb-3"><button class="pull-right btn btn-danger" onclick="remove_costfields('+ formrow +');" type="button"><i class="fa fa-minus"></i></button></div></div></div>';

    objTo.appendChild(divform);

  }

  function remove_costfields(rid)
  {
    $('.removeclass'+rid).remove();
  }

  function budgetfields()
  {

    formbudget++;
    var budgetTo = document.getElementById('budgetfields');
    var budgetform = document.createElement("div");
    budgetform.setAttribute("class", "removebudget"+formbudget);
    var bdiv = 'removebudget'+formbudget;

    // budgetform.innerHTML = '<div id="budgetfields"><div class="form-row"><div class="col-md-5 mb-3"><input type="text"data-serial="'+formbudget+'"name="budget_year[]"class="form-control"id="budget_year'+formrow+'"placeholder="Έτος"maxlength="255"value=""required></div><div class="col-md-5 mb-3"><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text">€</span></div><input type="text"name="budget_total[]"class="form-control"id="budget_total'+formbudget+'"placeholder="Προϋπολογισμός"maxlength="255"value=""required></div></div><div class="col-md-2 mb-3"><button class="pull-right btn btn-danger" onclick="remove_budgetfields('+ formbudget +');" type="button"><i class="fa fa-minus"></i></button></div></div></div>';

budgetform.innerHTML = '<div id="budgetfields"><div class="form-row"><div class="col-md-1 mb-3"><input type="text" name="budget_year[]" class="form-control" id="budget_year'+formbudget+'" placeholder="Έτος" maxlength="255" value=""></div><div class="col-md-2 mb-3"><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text">€</span></div><input type="text" name="budget_total[]" class="form-control" id="budget_total'+formbudget+'" placeholder="Προϋπολογισμός" maxlength="255" value=""></div></div><div class="col-md-4 mb-3"><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text">Περιγραφή Αρχείου</span></div><input type="text" name="description[]" class="form-control" id="description'+formbudget+'" placeholder="..." maxlength="255" value=""></div></div><div class="col-md-3 mb-3"><input class="form-control-file" id="filename'+formbudget+'" name="filename[]" type="file"></div><div class="col-md-2 mb-3"><button class="pull-right btn btn-danger" onclick="remove_budgetfields('+ formbudget +');" type="button"><i class="fa fa-minus"></i></button></div></div></div>';

    budgetTo.appendChild(budgetform);

  }


  function remove_budgetfields(bid)
  {
    $('.removebudget'+bid).remove();
  }

  </script>
@endsection