@extends('Templates/templateAdmin')

@section('Content-WorkstationsLayout')
        <!-- Navbar -->
        <!-- Parte de cima da pagina (header)-->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light" style="background-color: #00B0EA">

            <!-- 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"
                            style="color:#1f2d3d"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">
                        <i class="fas fa-play" style="color:#1f3d2f"></i>
                        <span class="badge  badge-info navbar-badge">{{ count($receiveAllEquipmentOfProject) }}</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link">
                        <i class="fa-solid fa-hourglass-start" style="color:#1f2d3d"></i>
                        <span class="badge badge-success navbar-badge"
                            style="background-color: #1b4cad;">{{ count($executionEquipment) }} </span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link">
                        <i class="fa-solid fa-rotate-left" style="color:#1f2d3d"></i>
                        <span class="badge badge-success navbar-badge"
                            style="background-color: orange;">{{ count($equipmentToReview) }} </span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link">
                        <i class="fas fa-check" style="color:#1f2d3d"></i>
                        <span class="badge badge-success navbar-badge"
                            style="background-color: #28a745">{{ count($completedEquipments) }} </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" style="color:#1f2d3d">{{ $receiveDataWs->nomenclature_workstation }}
                    </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">

                        <div class="nav-link" style="color:#1f2d3d">{{ $receiveDataWs->nomenclature_workstation }}
                        </div>

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

            </ul>

        </nav>
        <!-- /.navbar -->

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

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

                <!-- SidebarSearch Form -->
                <div class="form-inline">
                    <div class="input-group" data-widget="sidebar-search">
                        <input id="qrtextleft" class="form-control form-control-sidebar text-white" type="search"
                            placeholder="Tag/Equipamento" aria-label="Search">
                        <div class="input-group-append">
                            <button class="btn btn-sidebar" onclick="triggerSearchFromInput()">
                                <i class="fas fa-search fa-fw text-white"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Sidebar Menu -->
                <nav class="mt-5">

                    <ul class="nav nav-pills nav-sidebar flex-column searchable" data-widget="treeview" role="menu"
                        data-accordion="false">

                        <!-- Por iniciar -->
                        <li class="nav-item has-treeview menu-closed">
                            <a href="#" class="nav-link text-white" style="background-color: #007BFF;">
                                <i class="nav-icon fas fa-play"></i>
                                <p>
                                    Por iniciar: {{ count($receiveAllEquipmentOfProject) }}
                                    <i class="right fas fa-angle-left"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview pl-3">
                                @foreach ($receiveAllEquipmentOfProject as $equipmentOfProject)
                                    <div class="row text-white">
                                        <div class="col d-flex align-items-center ml-3">
                                            <i class="fas fa-tag mr-2"></i>
                                            <p class="mb-0 text-truncate" style="flex-grow: 1;">
                                                {{ $equipmentOfProject->equipment_tag }}
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </ul>
                        </li>

                        <!-- Em execução -->
                        <li class="nav-item has-treeview menu-closed mt-1">
                            <a href="#" class="nav-link text-white" style="background-color: #1b4cad;">
                                {{-- <i class="fa-solid fa-rotate-left"></i> --}}
                                <i class="fa-solid fa-hourglass-start"></i>
                                <p>
                                    Em execução : {{ count($executionEquipment) }}
                                    <i class="right fas fa-angle-left"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                @foreach ($executionEquipment as $equipmentOfProject)
                                    <div class="row text-white">
                                        <div class="col d-flex align-items-center ml-3">
                                            <i class="fas fa-tag mr-2"></i>
                                            <p class="mb-0 text-truncate" style="flex-grow: 1;">
                                                {{ $equipmentOfProject->equipment_tag }}
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </ul>
                        </li>

                        <!-- Por rever -->
                        <li class="nav-item has-treeview menu-closed mt-1">
                            <a href="#" class="nav-link text-white" style="background-color: orange;">
                                <i class="fa-solid fa-rotate-left"></i>
                                <p>
                                    Por rever : {{ count($equipmentToReview) }}
                                    <i class="right fas fa-angle-left"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                @foreach ($equipmentToReview as $equipmentOfProject)
                                    <div class="row text-white">
                                        <div class="col d-flex align-items-center ml-3">
                                            <i class="fas fa-tag mr-2"></i>
                                            <p class="mb-0 text-truncate" style="flex-grow: 1;">
                                                {{ $equipmentOfProject->equipment_tag }}
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </ul>
                        </li>

                        <!-- Concluidos -->
                        <li class="nav-item has-treeview menu-closed mt-1">
                            <a href="#" class="nav-link text-white" style="background-color: green;">
                                <i class="nav-icon fas fa-check"></i>
                                <p> Concluidos :
                                    {{ count($completedEquipments) }}
                                    <!-- válvulas concluídas -->
                                    <i class="right fas fa-angle-left"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                @foreach ($completedEquipments as $equipmentDone)
                                    <div class="row text-white">
                                        <div class="col d-flex align-items-center ml-3">
                                            <i class="fas fa-tag mr-2"></i>
                                            <p class="mb-0 text-truncate" style="flex-grow: 1;">
                                                {{ $equipmentDone->equipment_tag }}
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </ul>
                        </li>

                    </ul>

                    <ul class="nav nav-pills nav-sidebar flex-column searchable" id="qrcode-equipment-list"
                        style="display: none;">
                        <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> {{ count($receiveQrcodeEquipmentsProject) }} a iniciar QrCodes
                                    <i class="right fas fa-angle-left"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                @foreach ($receiveQrcodeEquipmentsProject as $equipmentOfProject)
                                    <li class="nav-item">
                                        <a href="{{ route('getEquipmentData', ['equipment_id' => $equipmentOfProject->equipment_id, 'component_tag' => $equipmentOfProject->component_tag]) }}"
                                            class="nav-link text-white">
                                            <i class="fas fa-tag nav-icon"></i>
                                            <p class="Tags">{{ $equipmentOfProject->component_tag }}</p>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </li>
                    </ul>


                </nav>
                <!-- /.sidebar-menu -->

            </div>
            <!-- /.sidebar -->
        </aside>

        <div class="content-wrapper">
            @yield('Main-content')
        </div>
    
@endsection