@extends('layouts.app')


@section('content')
<script type="text/javascript" src="{{url('/')}}/assets/clock/clock.js"></script>
<link rel="stylesheet" href="{{url('/')}}//assets/clock/clock.css" />

<div class="container">
   
<article class="clock">
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</article>
    <br />
    @if (\Session::has('success'))
      <div class="alert alert-success">
        <p>{{ \Session::get('success') }}</p>
      </div><br />
     @endif
     <a href="{{action('TaskController@create')}}" class="btn btn-success">Create</a>
     <table id="table" class="table table-striped">
        <thead>
          <tr>
            <th width="10%">ID</th>
            <th width="10%">
            
            
            <div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm"></span>
  </div>
  <input type="text" id='inputname' onkeyup="filter()" class="form-control" placeholder='Name [scrivi per filtrare]' aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
            
            </th>
            <th width="30%">Started at</th>
            
            <th width="10%">Running</th>
            <th>Enabled </th>
            <th width="30%" colspan="1">Action</th>
          </tr>
        </thead>




        <tbody>
            @php
              $lastCategory = "" ;
            @endphp
            @foreach($tasks as $passport)
              
              @php
                  $date= $passport['lastrun'];
                  $category = $passport["category"];
              @endphp

           

            @if ($category!=$lastCategory  AND strlen($category)>1 )
              
              <TR class='trCat' >
                <td colspan="6">
                    <span  data-cat="{{$category}}" class="btncat glyphicon glyphicon-folder-open openfolder"></span>
                  <span class='cont'>
                      <a href="#" data-cat="{{$category}}" class="btncat badge badge-dark">{{$category}}</a>
                  </span> 
                  
                  <td>
              </TR>
            @endif
            

           
            
            <tr data-cat="{{$category}}">
              <td align="center">
              <div class='divid'>{{$passport['id']}}</div>
              
                  @if ($passport['filename'])
                    <img width='50' src='images/{{$passport['filename']}}'/>
                  @endif
              </td>
              <td>
<span style='font-size:12px;background-color:#{{$passport['color']}};' class='label label-info label-lg'>   {{$passport['name']}}</span>
<div>

<h4><span class="label label-default">{{$passport['url']}}</span></h4>
<div>{{$passport['description']}}</div>
</div>
            
                            </td>
              <td>{{$date}} <br />Passed time:<b> {{$timeFormat}}</b></td>
              
              <td>
              @php


              if( $passport['running'])
                  echo   '<div class="loader"></div>' ;
                else
                  echo  '<div class="noloader">No</div>'
              @endphp
            
              
              </td>
              <td>
              <span class="glyphicon glyphicon-ok"></span>             
              
              </td>
              
              <td>
                  <a href="{{action('TaskController@show', $passport['id'])}}" class="btn btn-info btn-md">
                      <span class="glyphicon glyphicon-zoom-in"></span> History
                    </a>
                
                <a href="{{action('TaskController@edit', $passport['id'])}}" class="btn btn-warning">Edit</a>
              </td>

              <td>
                <form action="{{action('TaskController@destroy', $passport['id'])}}" method="post">
                  @csrf
                  <input name="_method" type="hidden" value="DELETE">
                  <button  onclick="return confirm('Are you sure you would like to delete this task ?');" class="btn btn-danger" type="submit">Delete</button>
                </form>
              </td>
            </tr>

            @php
              $lastCategory = $category ;
            @endphp

            @endforeach
          </tbody>
        </table>
       

<script>
function filter() {
      var input, filter, table, tr, td, i;
      input = document.getElementById("inputname");
      filter = input.value.toUpperCase();
      table = document.getElementById("table");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {

    /*  if( tr[i].classList.contains('trCat') )
        {
          continue;
        } */

        td = tr[i].getElementsByTagName("td")[1];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }       
      }
}
</script>

<style>
.clock{
  z-index: 1200;
    position: fixed;
    left: 0;
    top: 0;
    height: 72px;
    width: 72px;
}
.trCat{
  /* background: #f7e3a5!important; */
  background:#d8d5cd!important;
  cursor: pointer;
}
.openfolder{
  font-size:18px;
  vertical-align: inherit;
  cursor: pointer;
  margin-right: 5px;


  }
.divid {
  text-align:center;
  vertical-align:middle;
  font-size:20px;
  padding-top: 12%;
  color:white;
  font-size:bold;
  border-radius:50%;  
  height: 40px;
  width: 40px;
  background-color: red;
  background-image:
    radial-gradient(
      circle at top right,
      yellow,
      #f06d06 50%
    );
}
</style>

</div>
<meta http-equiv="refresh" content="15"/>
<script>
  $(document).ready(function(){





    //Datatable

    $(".trCat").click( function(){
      $(this).find('.openfolder').triggerHandler('click');
    });

    $(".btncat").click( function(){
        var cat = $(this).attr('data-cat') ;

        $("tr[data-cat='"  +  cat + "']"). fadeToggle( "fast", "linear" );

      $(this).parent().find('.glyphicon').toggleClass("glyphicon-folder-close").toggleClass("glyphicon-folder-open");


    } );


  }  );

  </script>

@endsection