<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ config('app.name') }}</title>

  <link rel="icon" type="image/x-icon" href="{{ URL::asset('assets/dist/img/favicon.ico') }}">

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{{ URL::asset('assets/plugins/fontawesome-free/css/all.min.css') }}">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Tempusdominus Bootstrap 4 -->
  <link rel="stylesheet" href="{{ URL::asset('assets/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css') }}">
  <!-- iCheck -->
  <link rel="stylesheet" href="{{ URL::asset('assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
  <!-- JQVMap -->
  <link rel="stylesheet" href="{{ URL::asset('assets/plugins/jqvmap/jqvmap.min.css') }}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{{ URL::asset('assets/dist/css/adminlte.min.css') }}">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="{{ URL::asset('assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="{{ URL::asset('assets/plugins/daterangepicker/daterangepicker.css') }}">
  <!-- summernote -->
  <link rel="stylesheet" href="{{ URL::asset('assets/plugins/summernote/summernote-bs4.min.css') }}">

</head>

<body class="hold-transition sidebar-mini layout-fixed">
  <div class="wrapper">

    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
      <!-- Left navbar links -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link">
            <i class="fas fa-play"></i>
            <span class="badge badge-primary navbar-badge">{{ $equipmentsTodoCount }}</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link">
            <i class="fas fa-undo"></i>
            <span class="badge badge-warning navbar-badge">{{ $equipmentsReturnedCount }}</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link">
            <i class="fas fa-check"></i>
            <span class="badge badge-success navbar-badge">{{ $equipmentsDoneCount }}</span>
          </a>
        </li>
      </ul>
      <!-- Right navbar links -->
      <ul class="navbar-nav ml-auto">
        <li class="nav-item d-none d-sm-inline-block">
          <!--<div class="nav-link">{{ Auth::user()->user_name }}</div>-->
          <div class="nav-link">{{ $workstationName }}</div>
        </li>
        <!-- User Dropdown Menu -->
        <li class="nav-item dropdown">
          <a class="nav-link" data-toggle="dropdown" href="#">
            <img src="{{ URL::asset('assets/dist/img/ispt.jpg') }}" class="img-circle elevation-2" alt="User Image" style="width:30px;height:30px;">
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <form id="logout-form" action="{{ route('logout') }}" method="POST">
              @csrf
              @method('POST')
              <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                <i class="fas fa-sign-out-alt text-danger"></i>
                <span>Terminar sessão</span>
              </a>
            </form>
          </div>
        </li>
        <!-- Control sidebar -->
        <li class="nav-item">
          <a class="nav-link" data-widget="control-sidebar" data-controlsidebar-slide="true" href="#" role="button">
            <i class="fas fa-bars"></i>
          </a>
        </li>
      </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
      <!-- Brand Logo -->
      <a href="index3.html" class="brand-link">
        <img src="{{ URL::asset('assets/dist/img/ispt40.jpg') }}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
        <span class="brand-text font-weight-light">{{ config('app.name') }}</span>
      </a>

      <!-- Sidebar -->
      <div class="sidebar mt-4">

        <!-- SidebarSearch Form -->
        <div class="form-inline">
          <div class="input-group" data-widget="sidebar-search">
            <input id="qrtext" class="form-control form-control-sidebar text-white" type="search" placeholder="Procurar" aria-label="Search">
            <div class="input-group-append">
              <button class="btn btn-sidebar">
                <i class="fas fa-search fa-fw text-white"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- Sidebar Menu -->
        <nav class="mt-2">
          <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
            <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
            <li class="nav-item menu-closed">
              <a href="#" class="nav-link text-white" style="background-color: #007BFF;">
                <i class="nav-icon fas fa-play"></i>
                <p>
                  {{ $equipmentsTodoCount }} a iniciar
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                @foreach ($equipmentsTodo as $equipmentTodo)
                <li class="nav-item">
                  <a href="#" class="nav-link text-white">
                    <i class="fas fa-tag nav-icon"></i>
                    <p>{{ $equipmentTodo->equipment_tag }}</p>
                  </a>
                </li>
                @endforeach
              </ul>
            </li>

            <li class="nav-item menu-closed">
              <a href="#" class="nav-link text-white" style="background-color: #ba9420;">
                <i class="nav-icon fas fa-undo"></i>
                <p>
                  {{ $equipmentsReturnedCount }} retornadas
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                @foreach($equipmentsReturned as $equipmentReturned)
                <li class="nav-item">
                  <a href="#" class="nav-link text-white">
                    <i class="fas fa-tag nav-icon"></i>
                    <p>{{ $equipmentReturned->equipment_tag }}</p>
                  </a>
                </li>
                @endforeach
              </ul>
            </li>
          </ul>
        </nav>
        <!-- /.sidebar-menu -->
      </div>
      <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <!-- Info box1 -->
            <div class="col-sm-6">

            </div>

            <!-- /.col -->
            <div class="col-sm-6">

            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
      <!-- /.content-header -->

      <!-- Main content -->
      <section class="content">
        @yield('content')
      </section>
      <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
      <strong>Copyright &copy; 2017-{{ date('Y') }} <a href="https://www.isptgroup.com" target="_blank">ISPT - Industrial Services,
          SA</a>.</strong>
      Todos os direitos reservados.
      <div class="float-right d-none d-sm-inline-block">
        <b>Versão</b> {{ config('app.version') }}
      </div>
    </footer>


    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
      <!-- Control sidebar content goes here -->
      <div class="p-3 control-sidebar-content">

        <!-- SidebarSearch Form -->
        <div class="form-inline">
          <div class="input-group" data-widget="sidebar-search">
            <input class="form-control form-control-sidebar text-white" type="search" placeholder="Procurar" aria-label="Search">
            <div class="input-group-append">
              <button class="btn btn-sidebar">
                <i class="fas fa-search fa-fw text-white"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- Sidebar Menu -->
        <nav class="mt-2">
          <ul class="nav nav-pills nav-sidebar flex-column control-sidebar-treeview" role="menu" data-accordion="false">
            <!-- Add icons to the links using the .nav-icon class
                   with font-awesome or any other icon font library -->
            <li class="nav-item menu-closed">
              <a href="#" class="nav-link text-white" style="background-color: #28a745;">
                <i class="nav-icon fas fa-check"></i>
                <p>
                  {{ $equipmentsDoneCount }} válvulas concluídas
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                @foreach($equipmentsDone as $equipmentDone)
                <li class="nav-item-right">
                  <a href="#" class="nav-link text-white">
                    <i class="fas fa-tag nav-icon"></i>
                    <p>{{ $equipmentDone->equipment_tag }}</p>
                  </a>
                </li>
                @endforeach
              </ul>
            </li>


          </ul>
        </nav>
        <!-- /.control-sidebar-menu -->
      </div>
    </aside>
    <!-- /.control-sidebar -->



  </div>
  <!-- ./wrapper -->

  <!-- jQuery -->
  <script src="{{ URL::asset('assets/plugins/jquery/jquery.min.js') }}"></script>
  <!-- jQuery UI 1.11.4 -->
  <script src="{{ URL::asset('assets/plugins/jquery-ui/jquery-ui.min.js') }}"></script>
  <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
  <script>
    $.widget.bridge('uibutton', $.ui.button)
  </script>
  <!-- Bootstrap 4 -->
  <script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
  <!-- ChartJS -->
  <script src="{{ URL::asset('assets/plugins/chart.js/Chart.min.js') }}"></script>
  <!-- Sparkline -->
  <script src="{{ URL::asset('assets/plugins/sparklines/sparkline.js') }}"></script>
  <!-- JQVMap -->
  <script src="{{ URL::asset('assets/plugins/jqvmap/jquery.vmap.min.js') }}"></script>
  <script src="{{ URL::asset('assets/plugins/jqvmap/maps/jquery.vmap.usa.js') }}"></script>
  <!-- jQuery Knob Chart -->
  <script src="{{ URL::asset('assets/plugins/jquery-knob/jquery.knob.min.js') }}"></script>
  <!-- daterangepicker -->
  <script src="{{ URL::asset('assets/plugins/moment/moment.min.js') }}"></script>
  <script src="{{ URL::asset('assets/plugins/daterangepicker/daterangepicker.js') }}"></script>
  <!-- Tempusdominus Bootstrap 4 -->
  <script src="{{ URL::asset('assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}"></script>
  <!-- Summernote -->
  <script src="{{ URL::asset('assets/plugins/summernote/summernote-bs4.min.js') }}"></script>
  <!-- overlayScrollbars -->
  <script src="{{ URL::asset('assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>
  <!-- AdminLTE App -->
  <script src="{{ URL::asset('assets/dist/js/adminlte.js') }}"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <script src="{{ URL::asset('assets/dist/js/pages/dashboard.js') }}"></script>
  <!-- HTML5 QRCode-->
  <script src="{{ URL::asset('assets/plugins/html5-qrcode/html5-qrcode.min.js') }}"></script>
  <script>
    let scanner = new Html5Qrcode("reader");
    let startScan = document.getElementById("startScan");
    let reader = document.getElementById("reader");
    let qrtext = document.getElementById("qrtext");

    startScan.addEventListener('click', function() {
      // Hiding the startScan button and showing the reader
      startScan.style.display = "none";
      reader.style.display = "block";

      scanner.start({
            facingMode: "environment"
          }, {
            fps: 20,
            qrbox: {
              width: 250,
              height: 250
            }
          },
          function(qrCodeMessage) {
            // This is called when a QR Code is scanned
            scanner.stop().then(() => {
              qrtext.value = qrCodeMessage;
              reader.style.display = "none";
              startScan.style.display = "block";
            });
          },
          function(errorMessage) {
            // In case of errors
            console.log(errorMessage);
          }
        )
        .catch(err => {
          console.log(err);
        });
    });
  </script>

  <script>
    $(document).ready(function() {
      // Initially hide the nav-treeview
      $('.control-sidebar-treeview .nav-treeview').hide();

      $('.control-sidebar-treeview .nav-item > a').on('click', function(event) {
        event.preventDefault();

        var parentLi = $(this).parent();
        var childUl = parentLi.find('ul.nav-treeview');

        // Check if the childUl is visible
        if (childUl.is(':visible')) {
          // If it's visible, hide it
          childUl.slideUp('slow');
        } else {
          // If it's not visible, show it
          childUl.slideDown('slow');
        }
      });
    });
  </script>

</body>

</html>