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


        <script>
            // Função para simular uma pesquisa manual ao escanear o QR Code
            function simulateManualSearch(value) {
                var searchInput = document.getElementById("qrtextleft"); // Campo de busca
                searchInput.value = value; // Insere o valor do QR code no campo de busca
    
                // Simula o evento de digitação no campo de busca para ativar o search
                var event = new Event('input', {
                    bubbles: true,
                    cancelable: true,
                });
                searchInput.dispatchEvent(event);
            }
    
            // Função para realizar a busca e navegação (após a leitura do QR code ou busca manual)
            function searchForValueAndNavigate(value, itemsSelector, containerSelector) {
                var searchQuery = value.toLowerCase();
                var found = false; // Variável para verificar se encontrou o item
    
                $(itemsSelector).each(function() {
                    var itemText = $(this).text().toLowerCase();
                    if (itemText.includes(searchQuery)) {
                        found = true;
                        window.location.href = $(this).attr('href'); // Navegar para a URL correspondente
                        return false; // Sair do loop após encontrar a correspondência
                    }
                });
    
                // Se não encontrar correspondência, fecha os itens abertos
                if (!found) {
                    $(containerSelector + ' .nav-item.menu-open').each(function() {
                        $(this).removeClass('menu-open').addClass('menu-closed');
                    });
                }
            }
    
            // Função de busca manual por input (usada no botão de busca)
            function triggerSearchFromInput() {
                let searchInput = document.getElementById("qrtextleft").value;
                searchForValueAndNavigate(searchInput, '#qrcode-equipment-list li a', '#qrcode-equipment-list');
            }
    
            // Configuração do QR Code Scanner
            let scanner = new Html5Qrcode("reader");
            let startScan = document.getElementById("startScan");
            let reader = document.getElementById("reader");
    
            startScan.addEventListener('click', function() {
                // Esconde o botão de início e exibe o leitor de QR Code
                startScan.style.display = "none";
                reader.style.display = "block";
    
                scanner.start({
                            facingMode: "environment"
                        }, {
                            fps: 20,
                            qrbox: {
                                width: 250,
                                height: 250
                            }
                        },
                        function(qrCodeMessage) {
                            // Ao escanear o QR Code, simula a pesquisa
                            scanner.stop().then(() => {
                                simulateManualSearch(
                                qrCodeMessage); // Preenche o campo de busca e simula a digitação
                                reader.style.display = "none";
                                startScan.style.display = "block";
    
                                // Aciona a navegação automática se encontrar o valor correspondente
                                searchForValueAndNavigate(qrCodeMessage, '#qrcode-equipment-list li a',
                                    '#qrcode-equipment-list');
                            });
                        },
                        function(errorMessage) {
                            // Em caso de erro no scan
                            console.log(errorMessage);
                        })
                    .catch(err => {
                        console.log(err);
                    });
            });
    
            // Função para lidar com a pesquisa no campo de input e exibir resultados dinamicamente
            function handleSearch(inputSelector, itemsSelector, containerSelector) {
                $(inputSelector).on('keyup', function() {
                    var searchQuery = $(this).val().toLowerCase();
                    var found = false; // Variável para verificar se encontrou algum item
    
                    $(itemsSelector).each(function() {
                        var itemText = $(this).text().toLowerCase();
                        if (itemText.includes(searchQuery)) {
                            $(this).show();
                            found = true;
                        } else {
                            $(this).hide();
                        }
                    });
    
                    // Altera a classe dos itens <li> quando o item é encontrado ou não
                    if (found) {
                        $(containerSelector + ' .nav-item.menu-closed').each(function() {
                            $(this).removeClass('menu-closed').addClass('menu-open');
                        });
                    } else {
                        $(containerSelector + ' .nav-item.menu-open').each(function() {
                            $(this).removeClass('menu-open').addClass('menu-closed');
                        });
                    }
                });
            }
    
            // Aplicando a funcionalidade de pesquisa ao campo de pesquisa principal
            handleSearch('#qrtextleft', '.searchable .nav.nav-pills.nav-sidebar.flex-column li.tags', '.searchable');
        </script>

    
    
    
@endsection