@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" />

@endsection

@section('content')

@component('partials.breadcrumbs')
  @slot('breadcrumb') {!! Breadcrumbs::render('home') !!} @endslot
@endcomponent

<div class="row align-items-start mb-4" id="info-boxes">
  <!-- ΣΥΝΟΛΟ ΕΠΑΦΩΝ ΚΑΤΑΛΟΓΟΥ -->
  <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12">
    @component('components.infoboxes.infobox')
      @slot('bgcolor') bg-info @endslot
      @slot('number') {{$users->count()}}@endslot
      @slot('title') Σύνολο Contact @endslot
      @slot('url') # @endslot
    @endcomponent
  </div>

  <!-- ΣΥΝΟΛΟ ΕΠΑΦΩΝ ΚΑΤΑΛΟΓΟΥ -->
  <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12">
    @component('components.infoboxes.infobox')
      @if($pending->count() == 0)
        @slot('bgcolor') bg-success @endslot
      @elseif($pending->count() <= '10')
        @slot('bgcolor') bg-info @endslot
      @else
        @slot('bgcolor') bg-warning @endslot
      @endif
      @slot('number') {{$pending->count()}}@endslot
      @slot('title') Σύνολο Νέων Αιτημάτων @endslot
      @slot('url') # @endslot
    @endcomponent
  </div>

  <!-- ΣΥΝΟΛΟ ΕΠΑΦΩΝ ΚΑΤΑΛΟΓΟΥ -->
  <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12">
    @component('components.infoboxes.infobox')
      @slot('bgcolor') bg-info @endslot
      @slot('number') {{$pending_completed->count()}}@endslot
      @slot('title') Ολοκληρωμένα Αιτήματα @endslot
      @slot('url') /admin/pending/completed @endslot
    @endcomponent
  </div>

  <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12">

  </div>

</div>

<h5 class="box-title mt-2">Νέα Αιτήματα</h5>
<div class="row align-items-start mb-4" id="request-boxes">
  @include('components.request_infoboxes.requests_block')
</div>

<div class="row align-items-start mb-4" id="administrators">
  @include('components.administrators.table')
  @include('components.latest_contacts.table')
</div>

@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">


    $(document).ready(function() {
      $('#admins-box').DataTable({
        "order": [0, "asc"]
      });
    } );

    $(document).ready(function() {
      $('#latest-box').DataTable({
        "order": [0, "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