@extends('layouts.app')

@section('content')
<!-- TOP NAVIGATION -->
<nav class="header-navbar navbar navbar-with-menu navbar-fixed-top navbar-semi-dark navbar-shadow">
  <div class="navbar-wrapper">
    <div class="navbar-header">
      <ul class="nav navbar-nav">
        <li class="nav-item mobile-menu hidden-md-up float-xs-left"><a id="firstTimeMenuToggle" class="nav-link nav-menu-main menu-toggle hidden-xs"><i
              class="icon-menu5 font-large-1"></i></a></li>
        <li class="nav-item">
          <a href="/" class="navbar-brand nav-link">
            <img alt="branding logo" id="logoNav" style="width:100%;" src="{{ getSettings('general-settings','logo_dark') }}"
              data-expand="{{ getSettings('general-settings','logo_dark') }}" data-collapse="{{ getSettings('general-settings','logo_dark_small') }}"
              class="brand-logo">
          </a>
        </li>
        <li class="nav-item hidden-md-up float-xs-right"><a data-toggle="collapse" data-target="#navbar-mobile" class="nav-link open-navbar-container"><i
              class="icon-ellipsis pe-2x icon-icon-rotate-right-right"></i></a></li>
      </ul>
    </div>
    <div class="navbar-container content container-fluid">
      <div id="navbar-mobile" class="collapse navbar-toggleable-sm">
        <ul class="nav navbar-nav">
          <li class="nav-item hidden-sm-down"><a class="nav-link nav-menu-main menu-toggle hidden-xs"><i class="icon-menu5"></i></a></li>
          <li class="nav-item hidden-sm-down"><a href="javascript::void()" class="nav-link nav-link-expand"><i class="ficon icon-expand2"></i></a></li>
        </ul>
        <ul class="nav navbar-nav float-xs-right">

          <li class="dropdown dropdown-user nav-item"><a href="javascript:void()" data-toggle="dropdown" class="dropdown-toggle nav-link dropdown-user-link"><span
                class="avatar avatar-online"><img src="/robust-assets/images/portrait/small/avatar-s-1.png" alt="avatar"><i></i></span><span
                class="user-name">{{ Auth::user()->name }}</span></a>
            <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" href="{{ url('/logout') }}" onclick="event.preventDefault();
                          document.getElementById('logout-form').submit();">
                <i class="icon-power3"></i>Logout
              </a>
              <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
                {{ csrf_field() }}
              </form>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>
<!-- END TOP NAVIGATION -->
<!-- MAIN NAVIGATION -->
<!-- main menu-->
<div id="main-menu" ng-if="!hideMenu" ng-controller="sideNav" data-scroll-to-active="true" class="main-menu menu-dark menu-fixed menu-shadow menu-accordion">

  <!-- main menu header-->
  <div class="main-menu-header">
    <input type="text" placeholder="Search" class="menu-search form-control round" />
  </div>
  <!-- / main menu header-->
  <!-- main menu content-->
  <div class="main-menu-content ps-container ps-theme-light ps-active-y">
    <ul id="main-menu-navigation" data-menu="menu-navigation" class="navigation navigation-main" style="min-height:100vh">
      @include('partial.menu', ['items' => $menu_main->roots()])
    </ul>
    <div class="main-menu-footer footer-close"></div>
  </div>
  <!-- /main menu content-->
</div>
<!-- / main menu-->
<!-- END MAIN NAVIGATION -->
<!-- THE CONTENT -->
<div ng-controller="sideNav" ng-class="{'ml-0':hideMenu}" class="robust-content content container-fluid">
  <div class="content-wrapper">
    <div class="content-header row">
    </div>
    <div class="content-body">
      <div ng-view ng-if="appReady"></div>
    </div>
  </div>
</div>
<!-- END CONTENT -->
@endsection

@section('csses')
<!-- 
  <link rel="stylesheet" type="text/css" href="/robust-assets/css/plugins/forms/selects/select2.min.css">
-->
<link rel="stylesheet" href="/bower_components/select2/select2.css">
<link rel="stylesheet" type="text/css" href="/bower_components/angular-ui-select/dist/select.css">
<link rel="stylesheet" type="text/css" href="/robust-assets/css/plugins/extensions/toastr.css">
<link rel="stylesheet" type="text/css" href="/robust-assets/js/plugins/angular-loading-bar/loading-bar.css">
<link rel="stylesheet" type="text/css" href="/robust-assets/js/plugins/angular-images/ng-image-input-with-preview.min.css">
<link rel="stylesheet" type="text/css" href="/bower_components/angular-datatables/dist/css/angular-datatables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="/bower_components/bootstrap-daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="/bower_components/ng-tags-input/ng-tags-input.min.css">
<link rel="stylesheet" href="/bower_components/moment-picker/dist/angular-moment-picker.min.css">
<link rel="stylesheet" href="/bower_components/moment-picker/dist/themes/material-ui.min.css">
<link rel="stylesheet" href="/bower_components/angular-tooltips/dist/angular-tooltips.min.css">
<link rel="stylesheet" href="/assets/css/rowGroup.bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/ng-print.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
<!-- UIGRID -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/angular-ui/bower-ui-grid/ui-grid.min.css">
<!-- angular datetimepicker -->
<link rel="stylesheet" href="/bower_components/ng-material-datetimepicker/dist/material-datetimepicker.min.css">
<!-- textangular -->
<link rel='stylesheet' href='/bower_components/textAngular/dist/textAngular.css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .hideTillLoaded {
  display: none !important;
}
</style>
@endsection

@section('jses')

<script type="text/javascript" src="/bower_components/select2/select2.js"></script>
<script type="text/javascript" src="/bower_components/angular-ui-select2/src/select2.js"></script>
<script type="text/javascript" src="/bower_components/angular-ui-select/dist/select.js"></script>
<script src="/robust-assets/js/plugins/extensions/toastr.min.js" type="text/javascript"></script>

<script>
  function setCsrf() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
  }
  function reCsrf() {
    $.ajax({
      url: "/api/refreshCsrf",
      dataType: 'json',
      async: false
    })
      .done(function (data) {
        $('meta[name="csrf-token"]').attr('content', data.token);
        setCsrf();
      });
  }
  $(document).ready(function () {
    setTimeout(function () {
      $('#firstTimeMenuToggle').trigger('click');
    }, 1000);
  })
</script>
<!-- Include the socket.io -->
<script src="/robust-assets/js/plugins/socket.io/socket.io.min.js"></script>
<script>
  var socket = io.connect('{{ getSettings('general-settings','socketioHost') }}:{{ getSettings('general-settings','socketioPort') }}', {
    query: 'uid=