@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" 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('users.index') !!}
  </div>

  @if($users->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')
          <a href="#" class="btn btn-success float-right" data-target="#adduser" data-toggle="modal"><i class="fas fa-plus mr-2"></i>Προσθήκη Μέλους Επιτροπής</a>
          @component('users.components.create')
          @endcomponent
          @endcan
        </div>
        <div class="box-body">
          <table id="users" class="table table-striped table-bordered" style="width:100%">
            <thead>
              <tr>
                <th></th>
                <th>Ονοματεπώνυμο</th>
                <th>Email</th>
                <th>Account Type</th>
                <th>Ενεργό Διάστημα</th>
                <th>Status</th>
                <th>Ενέργειες</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($users as $user)
              <tr>
                <td class="text-center">
                  @if($user->image)
                      <img src="{{ asset('images/'.$user->image) }}" class="user-image" alt="User Image">
                    @else
                      {!! Avatar::create($user->name)
                        ->setDimension(40)
                        ->setBackground('#203556')
                        ->setFontSize(14)
                        ->setForeground('#abd9dd')
                        ->setBorder(1, '#203556')->toSvg() !!}
                    @endif
                </td>
                <td class="align-middle">{{$user->name}}</td>
                <td class="align-middle">{{$user->email}}</td>
                <td class="align-middle">
                  @if ($user->usertype === 'admin')
                  <span class="text-danger text-bold">Διαχειριστής</span>
                  @elseif ($user->usertype === 'member')
                  <span class="text-primary text-bold">Μέλος Επιτροπής</span>
                  @endif
                </td>
                <td class="align-middle">{{$user->distance}}</td>
                <td class="align-middle">
                  @if($user->status == 0)
                    @can('members')
                      <button type="button" class="btn btn-sm btn-danger" name="button" disabled>
                        <span class="fas fa-times-circle mr-2"></span>Ανενεργός
                      </button>
                    @endcan
                    @can('admins')
                      <a href="#"
                        class="btn btn-sm btn-danger download-link"
                        data-toggle="modal"
                        data-target="#activation-{{$user->id}}"
                        data-placement="top" title="Ενεργοποίηση">
                        <span class="fas fa-times-circle mr-2"></span>Ανενεργός
                      </a>
                      {!! Form::model($user, ['route' => ['activation.user', $user->id], 'method'=>'PUT', 'class'=> 'form-horizontal','style'=>'display:inline-block']) !!}
                      @component('users.components.activation')
                        @slot('userid') {{$user->id}}@endslot
                        @slot('username') {{$user->name}}@endslot
                      @endcomponent
                    @endcan
                  @elseif ($user->status == 1)
                  <a href="#"
                    class="btn btn-sm btn-success" data-placement="top" title="Αιτήσεις">
                    <span class="fas fa-check-circle mr-2"></span>Ενεργός
                  </a>
                  @endif
                </td>
                <td class="align-middle">
                  @can('members')
                    <button type="button" class="btn btn-primary btn-sm" disabled>
                      <span class="fas fa-user-edit mr-2"></span>Επεξεργασία
                    </button>
                    <button type="button" class="btn btn-sm btn-danger" disabled>
                      <span class="fas fa-user-lock mr-2"></span>Διαγραφή
                    </button>
                  @endcan
                  @can('admins')
                  <a href="#"
                    data-toggle="modal"
                    data-target="#edituser-{{$user->id}}"
                    class="btn btn-sm btn-primary download-link"
                    aria-expanded="false" data-placement="top" title="Επεξεργασία Μέλους">
                    <span class="fas fa-user-edit mr-2"></span>Επεξεργασία
                  </a>
                  {!! Form::model($user, ['route' => ['update.user', $user->id], 'method'=>'PUT', 'class'=> 'form-horizontal','style'=>'display:inline-block']) !!}
                  @include('users.components.edit')
                  <a href="#"
                    data-toggle="modal"
                    data-target="#deleteuser-{{$user->id}}"
                    class="btn btn-sm btn-danger" data-placement="top" title="Διαγραφή Μέλους">
                    <span class="fas fa-user-lock mr-2"></span>Διαγραφή
                  </a>
                  @component('users.components.delete')
                    @slot('userid') {{$user->id}}@endslot
                    @slot('username') {{$user->name}}@endslot
                  @endcomponent
                  @endcan
                </td>
              </tr>
              @endforeach
            </tbody>
            <tfoot>
              <tr>
                <th></th>
                <th>Ονοματεπώνυμο</th>
                <th>Email</th>
                <th>Account Type</th>
                <th>Ενεργό Διάστημα</th>
                <th>Status</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://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <script type="text/javascript">

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

  $(document).ready(function() {
      $('#users').DataTable({
        "order": [[ 1, "asc" ]]
      });
  } );

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


  </script>
@endsection