@extends('layouts.main')
@push('styles')
<link href="{{asset('css/jsonTree.css')}}" rel='stylesheet' />
@endpush
@section('content')
<div class="row row-cards">
    <div class="col-sm-6 col-lg-3">
        <div class="card p-3">
            <div class="d-flex align-items-center">
            <span class="stamp stamp-md bg-red mr-3">
                <i class="fe fe-users"></i>
            </span>
            <div>
                <h4 class="m-0"><a href="javascript:void(0)">{{Auth::user()->employees()->count()}} <small>{{__('sidebar.employees')}}</small></a></h4>
            </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3">
        <div class="card p-3">
            <div class="d-flex align-items-center">
            <span class="stamp stamp-md bg-green mr-3">
                <i class="fe fe-truck"></i>
            </span>
            <div>
                <h4 class="m-0"><a href="javascript:void(0)">{{Auth::user()->vehicles()->count()}} <small>{{__('sidebar.vehicles')}}</small></a></h4>
            </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3">
        <div class="card p-3">
            <div class="d-flex align-items-center">
            <span class="stamp stamp-md bg-blue mr-3">
                <i class="fe fe-git-merge"></i>
            </span>
            <div>
                <h4 class="m-0"><a href="javascript:void(0)">{{Auth::user()->routes()->count()}} <small>{{__('sidebar.routes')}}</small></a></h4>
            </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3">
        <div class="card p-3">
            <div class="d-flex align-items-center">
            <span class="stamp stamp-md bg-azure mr-3">
                <i class="fe fe-git-branch"></i>
            </span>
            <div>
                <h4 class="m-0"><a href="javascript:void(0)">{{Auth::user()->optimal_routes()->count()}} <small>{{__('sidebar.optimal_routes')}}</small></a></h4>
            </div>
            </div>
        </div>
    </div>
</div>
<div class="row row-cards">
<div class="col-md-6">
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">{{__('strings.user_log')}}</h3>
    </div>
    @php $logs = \App\Models\UserLog::where('user_id', Auth::user()->ID_USER)->orderBy('created_at','desc')->limit(20)->get(); @endphp

    <div class="card-body o-auto" style="height: 25rem">
      <ul class="list-unstyled list-separated">
        @foreach($logs as $log)
        <li class="list-separated-item">
          <div class="row align-items-center">
            <div class="col-auto">
              <span class="avatar avatar-md d-block" style="background-image: url({{Auth::user()->getPhotoUri()}}{{Auth::user()->EMAIL}}.jpeg?@php echo time(); @endphp)"></span>
            </div>
            <div class="col">
              <div>
                <a href="javascript:void(0)" class="text-inherit">{{$log->log}}</a>
              </div>
              <small class="d-block item-except text-sm text-muted h-1x">
                <script>
                  document.write(moment.utc("{{$log->created_at}}").local().fromNow());
                </script>
              </small>
            </div>
            <div class="col-auto">
              <div class="item-action dropdown">
                <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
                <div class="dropdown-menu dropdown-menu-right">
                  <a href="#" onclick='showDetails(@json($log->request))' class="dropdown-item"><i class="dropdown-icon fe fe-plus"></i> {{__('strings.details')}} </a>
                </div>
              </div>
            </div>
          </div>
        </li>
        @endforeach
      </ul>
    </div>
  </div>
</div>


<div class="col-md-6">
    <div id="wrapper"></div>
</div>
@endsection('content')

@push('scripts')
<script src="{{asset('js/jsonTree.js')}}" type="text/javascript"></script>
<script>
  var wrapper = document.getElementById("wrapper");
  var tree = jsonTree.create(null, wrapper);
  function showDetails(data) {
    tree.loadData(data);
  }



  function parseJson(json) {
    var result = "";
    for (var key in json) {
      if(typeof json[key] == 'object') {
        result += '<strong>' + key + '</strong>:' + parseJson(json[key]);
      } else {
        result += '<strong>' + key + '</strong>:' + json[key];
      }
      result += '<br>';
    }
    return result;
  }
</script>
@endpush