@extends('Templates/templateAdmin')

@section('Main-content')

    @if (session('success'))
        <div class="content">

            <div class="alert alert-success" role="alert" id="alert-message-success" style="transition: opacity 1s;">
                {{ session('success') }}
            </div>
        </div>
        <script>
            setTimeout(function() {
                $('#alert-message-success').fadeOut('slow', function() {
                    $(this).remove();
                });
            }, 5000); // A mensagem desaparecerá após 5 segundos
        </script>
    @endif
    @if (session('danger'))
        <div class="content">
            <div class="alert alert-danger" role="alert" id="alert-message-danger" style="transition: opacity 1s;">
                {{ session('danger') }}
            </div>
        </div>
        <script>
            setTimeout(function() {
                $('#alert-message-danger').fadeOut('slow', function() {
                    $(this).remove();
                });
            }, 5000); // A mensagem desaparecerá após 5 segundos
        </script>
    @endif



    @if (session('dangerLogs') && !empty(session('dangerLogs')))
        <div class="content pt-3">
            <div class="card card-danger collapsed-card">

                <div class="card-header clickable">
                    <h3 class="card-title" style="color:black">Erros do Template</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool collapse-button" data-card-widget="collapse"><i
                                class="fas fa-plus"></i></button>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-sm">
                            <div class="card card-danger">

                                <div class="card-header clickable">
                                    <h3 class="card-title" style="color:black">Linhas Ignoradas</h3>
                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool collapse-button"
                                            data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                                    </div>
                                </div>


                                <div class="card-body" style="padding: 0;margin-bottom: 0%">
                                    <ul class="list-group scrollable-list">
                                        @foreach (session('dangerLogs') as $ignoredLine)
                                            <li class="list-group-item d-flex align-items-center" aria-current="true">
                                                <span class="line-text">Linha({{ $ignoredLine['line'] }})</span>
                                                <span class="empty-fields"><b> - Campos :</b>
                                                    {{ implode(', ', $ignoredLine['emptyFields']) }}</span>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>

                            </div>{{-- ./card card-danger --}}
                        </div>
                    </div>
                </div>

            </div>
        </div>
    @endif


    <input type="hidden" value="{{ $receiveNumberProject->company_projects_id }}" id="receiveNumberProject">


    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ $receiveNumberProject->company_project_description }}</h1>
                    <input type="hidden" value="{{ $receiveNumberProject->company_projects_id }}"
                        id="receiveNumberProject">
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                        {{-- <li class="breadcrumb-item"><a href="{{ route('')}}./preparadas.html">Preparadas</a></li> --}}
                        <li class="breadcrumb-item active">{{ $receiveNumberProject->company_project_description }}</li>
                    </ol>
                </div><!-- /.col -->
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content-header -->

    <fieldset class="content">
        <div class="container-fluid">

            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Articulado</h3>
                </div>
                <!-- ./Card-header -->

                <div class="card-body">

                    {{-- Criar Equipamentos Manualmente --}}
                    <div class="card card-success collapsed-card">

                        <div class="card-header clickable">
                            <h3 class="card-title" style="color:black">Criar Equipamentos Manualmente</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool collapse-button" data-card-widget="collapse"><i
                                        class="fas fa-plus"></i></button>
                            </div>
                        </div>

                        <!-- /.card-header -->
                        <div class="card-body">
                            <form action="{{ route('articulated_2CreateEquipment') }}" method="POST">
                                @csrf
                                {{-- Vai receber o valor do ID da obra e passar diretamente para o controller, esta em hidden pois não e necessario mostrar seu campo ao utilizador --}}
                                <input type="hidden" name="numberProject" value="{{ $numberProject }}">

                                <div class="row">
                                    <!-- select -->
                                    <div class="form-group col-sm">
                                        <label>Fabrica</label>
                                        <select class="form-control" name="unit_id" id="unit_select" required>
                                            <option value='' hidden>Selecione Fabrica...</option>
                                            <option value="new">Criar Fabrica...</option>
                                            @foreach ($checkUnits as $checkUnit)
                                                <option value="{{ $checkUnit->unit_id }}">
                                                    {{ $checkUnit->unit_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group col-sm" id="new_unit_div">
                                        <label>Nova Fabrica :</label>
                                        <input type="text" id="new_unit_name" class="form-control" name="new_unit_name"
                                            placeholder="Digite o nome da nova Fabrica" required>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label>Tipo de equipamento</label>
                                    <select class="form-control" name="equipmentTypeId" {{-- equipmentType_id --}}
                                        id="equipmentType_id_list" required>
                                        <option value='' hidden>Selecionar Tipo de equipamento...</option>
                                        @foreach ($typeEquipments as $typeEquipment)
                                            <option value="{{ $typeEquipment->equipment_type_id }}">
                                                {{ $typeEquipment->equipment_type_name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- PSV-card -->
                                <div id="psv_card" class="card card-secondary">
                                    <div class="card-header">
                                        <h3 class="card-title">PSV</h3>
                                    </div>
                                    <!-- /.card-header -->
                                    <div class="card-body">

                                        <div class="row">
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-tagEquipment">
                                                        <i class="fa-sharp fa-solid fa-tag" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Tag"></i>
                                                        <span style="color:red;"">*</span>
                                                    </span>
                                                    <input type="text" name="tag" class="form-control card_inputs"
                                                        id="equipmentTag" placeholder="Tag..." aria-label="Tag Equipment"
                                                        aria-describedby="form-tagEquipment" required>
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-equipmentDescription">
                                                        {{-- <i class="fa fa-id-badge"></i> --}}
                                                        <i class="fa-sharp fa-regular fa-newspaper"
                                                            style="color: #00B0EA;" data-toggle="tooltip"
                                                            title="Descrição do equipamento"></i>
                                                        <span style="color:red;"">*</span>
                                                    </span>
                                                    <input type="text" name="equipmentDescription"
                                                        class="form-control card_inputs" id="equipmentDescription"
                                                        placeholder="Descrição Equipamento..." aria-label="Tag Equipment"
                                                        aria-describedby="form-equipmentDescription" required>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- ./row -->

                                        {{-- 3 inputs per line :equipmentSerialNumber, equipmentBrand, equipmentModel  --}}
                                        <div class="row">
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-serialNumberEquipment">
                                                        <i class="fa-solid fa-barcode" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Número de série"></i>
                                                    </span>
                                                    <input type="text" name="serialNumberEquipment"
                                                        class="form-control card_inputs" id="equipmentSerialNumber"
                                                        placeholder="Número de série" aria-label="Serial Number Equipment"
                                                        aria-describedby="form-serialNumberEquipment">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-equipmentBrand">
                                                        <i class="fa-solid fa-object-group" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Marca"></i>
                                                    </span>
                                                    <input type="text" name="equipmentBrand"
                                                        class="form-control card_inputs" id="equipmentBrand"
                                                        placeholder="Marca" aria-label="Serial Number Equipment"
                                                        aria-describedby="form-equipmentBrand">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-equipmentModel">
                                                        <i class="fa-solid fa-cubes" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Modelo"></i>
                                                    </span>
                                                    <input type="text" name="equipmentModel"
                                                        class="form-control card_inputs" id="equipmentModel"
                                                        placeholder="Modelo" aria-label="Serial Number Equipment"
                                                        aria-describedby="form-equipmentModel">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 3 inputs per line :equipmentDimension, equipmentRating, equipmentDimcerta  --}}
                                        <div class="row">
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-dimension">
                                                        <i class="fa-solid fa-ruler " style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Dimensão"></i>
                                                    </span>
                                                    <input type="text" name="dimension"
                                                        class="form-control card_inputs" id="dimension"
                                                        placeholder="Dimensão" aria-label="Serial Number Equipment"
                                                        aria-describedby="form-dimension">
                                                </div>
                                            </div>

                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-rating">
                                                        <i class="fa-solid fa-ranking-star" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Rating"></i>
                                                    </span>
                                                    <input type="text" name="rating" class="form-control card_inputs"
                                                        id="rating" placeholder="Rating..."
                                                        aria-label="Serial Number Equipment"
                                                        aria-describedby="form-rating">
                                                </div>
                                            </div>

                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-dim_certa">
                                                        <i class="fa-solid fa-ruler-vertical" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Dim Certa"></i>
                                                    </span>
                                                    <input type="text" name="dim_certa"
                                                        class="form-control card_inputs" id="dim_certa"
                                                        placeholder="Dim certa..." aria-label="Serial Number Equipment"
                                                        aria-describedby="form-dim_certa">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 3 inputs per line : main_equipment, p&id, sap_number --}}
                                        <div class="row">
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-main_equipment">
                                                        <i class="fa-solid fa-sliders" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Main Equipment"></i>
                                                    </span>
                                                    <input type="text" name="main_equipment"
                                                        class="form-control card_inputs" id="main_equipment"
                                                        placeholder="Main Equipment" aria-label="Main Equipment"
                                                        aria-describedby="form-main_equipment">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-p&id">
                                                        <i class="fa-solid fa-map-location-dot" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="P&ID"></i>
                                                    </span>
                                                    <input type="text" name="p&id" class="form-control card_inputs"
                                                        id="p&id" placeholder="P&ID" aria-label="P&id"
                                                        aria-describedby="form-p&id">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-sap_number">
                                                        <i class="fa-solid fa-hashtag" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Número Sap"></i>
                                                    </span>
                                                    <input type="text" name="sap_number"
                                                        class="form-control card_inputs" id="sap_number"
                                                        placeholder="Nº SAP" aria-label="Numero Sap"
                                                        aria-describedby="form-sap_number">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 3 inputs per line :SP_(Bar)_Cold, Back_Presure_(Bar), material  --}}
                                        <div class="row">
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-SP_(Bar)_Cold">
                                                        <i class="fa-solid fa-signal" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="SP (Bar) Cold"></i>
                                                    </span>
                                                    <input type="text" name="sp_(Bar)_Cold"
                                                        class="form-control card_inputs" id="SP_(Bar)_Cold"
                                                        placeholder="SP (Bar) Cold" aria-label="SP (Bar) Cold"
                                                        aria-describedby="form-SP_(Bar)_Cold">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-Back_Presure_(Bar)">
                                                        <i class="fa-solid fa-stopwatch" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Back_Presure_(Bar)"></i>
                                                    </span>
                                                    <input type="text" name="back_Presure_(Bar)"
                                                        class="form-control card_inputs" id="Back_Presure_(Bar)"
                                                        placeholder="Back Presure (Bar)" aria-label="Back Presure (Bar)"
                                                        aria-describedby="form-Back_Presure_(Bar)">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-material">
                                                        <i class="fa-brands fa-codepen" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Material"></i>
                                                    </span>
                                                    <input type="text" name="material"
                                                        class="form-control card_inputs" id="material"
                                                        placeholder="Material" aria-label="Material"
                                                        aria-describedby="form-material">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 2 inputs per line : manufacturer, isolation --}}
                                        <div class="row">
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-manufacturer">
                                                        <i class="fa-solid fa-building" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Fabricante"></i>
                                                    </span>
                                                    <input type="text" name="manufacturer"
                                                        class="form-control card_inputs" id="manufacturer"
                                                        placeholder="Fabricante" aria-label="Fabricante"
                                                        aria-describedby="form-manufacturer">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-isolation">
                                                        <i class="fa-solid fa-lock" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Isolamento"></i>
                                                    </span>
                                                    <input type="text" name="isolation"
                                                        class="form-control card_inputs" id="isolation"
                                                        placeholder="Isolamento" aria-label="Isolamento"
                                                        aria-describedby="form-isolation">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 2 Selects per line :psv_scaffold, psv_crane --}}
                                        <div class="row">
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fa-solid fa-stairs" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Andaime"></i>
                                                    </span>
                                                    <select class="form-control card_inputs" name="scaffold">
                                                        <option value="Sim">Sim</option>
                                                        <option value="Nao" selected>Nao</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fa-solid fa-truck-arrow-right" style="color: #00B0EA;"
                                                            data-toggle="tooltip" title="Grua"></i>
                                                    </span>
                                                    <select class="form-control card_inputs" name="crane">
                                                        <option value="Sim">Sim</option>
                                                        <option value="Nao" selected>Nao</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                                {{-- ./psv_card --}}

                                <!-- ISV-card -->
                                <div id="isv_card" class="card card-primary">
                                    <div class="card-header">
                                        <h3 class="card-title">ISV</h3>
                                    </div>
                                    <!-- /.card-header -->
                                    <div class="card-body">
                                        {{-- 2 inputs per line :equipmentTag ,equipmentDescription --}}
                                        <div class="row">
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-tagEquipment"
                                                        data-toggle="tooltip" title="Tag">
                                                        <i class="fa-sharp fa-solid fa-tag" style="color: #00B0EA;"></i>
                                                        <span style="color:red;"">*</span>
                                                    </span>
                                                    <input type="text" name="tag" class="form-control card_inputs"
                                                        id="equipmentTag" placeholder="Tag..." aria-label="Tag Equipment"
                                                        aria-describedby="form-tagEquipment" required>
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-equipmentDescription"
                                                        data-toggle="tooltip" title="Descrição do equipamento">
                                                        <i class="fa-sharp fa-regular fa-newspaper"
                                                            style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="equipmentDescription"
                                                        class="form-control card_inputs" id="equipmentDescription"
                                                        placeholder="Descrição Equipamento..." aria-label="Tag Equipment"
                                                        aria-describedby="form-equipmentDescription" required>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 3 inputs per line :serialNumberEquipment, equipmentBrand, equipmentModel  --}}
                                        <div class="row">
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-serialNumberEquipment"
                                                        data-toggle="tooltip" title="Número de série">
                                                        <i class="fa-solid fa-barcode" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="serialNumberEquipment"
                                                        class="form-control card_inputs" id="equipmentSerialNumber"
                                                        placeholder="Número de série" aria-label="Serial Number Equipment"
                                                        aria-describedby="form-serialNumberEquipment">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-equipmentBrand"
                                                        data-toggle="tooltip" title="Marca">
                                                        <i class="fa-solid fa-object-group" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="equipmentBrand"
                                                        class="form-control card_inputs" id="equipmentBrand"
                                                        placeholder="Marca" aria-label="Marca Equipamento"
                                                        aria-describedby="form-equipmentBrand">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-equipmentModel"
                                                        data-toggle="tooltip" title="Modelo">
                                                        <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="equipmentModel"
                                                        class="form-control card_inputs" id="equipmentModel"
                                                        placeholder="Modelo" aria-label="Modelo Equipamento"
                                                        aria-describedby="form-equipmentModel">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 3 inputs per line :equipmentDimension, equipmentRating, equipmentDimcerta  --}}
                                        <div class="row">
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-dimension"
                                                        data-toggle="tooltip" title="Dimensão">
                                                        <i class="fa-solid fa-ruler " style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="dimension"
                                                        class="form-control card_inputs" id="dimension"
                                                        placeholder="Dimensão" aria-label="Dimensao Equipamento"
                                                        aria-describedby="form-dimension">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-rating" data-toggle="tooltip"
                                                        title="Rating">
                                                        <i class="fa-solid fa-ranking-star" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="rating" class="form-control card_inputs"
                                                        id="rating" placeholder="Rating..."
                                                        aria-label="Rating Equipamento" aria-describedby="form-rating">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-dim_certa"
                                                        data-toggle="tooltip" title="Dim Certa">
                                                        <i class="fa-solid fa-ruler-vertical" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="dim_certa"
                                                        class="form-control card_inputs" id="dim_certa"
                                                        placeholder="Dim certa..." aria-label="Dim certa Equipamento"
                                                        aria-describedby="form-dim_certa">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 3 Inputs per line :main_equipment ,p&id ,sap_number --}}
                                        <div class="row">
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-main_equipment"
                                                        data-toggle="tooltip" title="Main Equipment">
                                                        <i class="fa-solid fa-sliders" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="main_equipment"
                                                        class="form-control card_inputs" id="main_equipment"
                                                        placeholder="Main Equipment" aria-label="Main Equipment"
                                                        aria-describedby="form-main_equipment">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-P_IidEquipment"
                                                        data-toggle="tooltip" title="P&ID">
                                                        <i class="fa-solid fa-map-location-dot"
                                                            style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="p&id" class="form-control card_inputs"
                                                        id="P_idEquipment" placeholder="P&ID" aria-label="P&ID"
                                                        aria-describedby="form-P_IidEquipment">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-NumberSapEquipment"
                                                        data-toggle="tooltip" title="Numero SAP">
                                                        <i class="fa-solid fa-hashtag" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="sap_number"
                                                        class="form-control card_inputs" id="NumberSapEquipment"
                                                        placeholder="Nº SAP" aria-label="Numero SAP Equipamento"
                                                        aria-describedby="form-NumberSapEquipment">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 3 Inputs per line :material ,manufacturerEquipment ,isolationEquipment    --}}
                                        <div class="row">
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-materialEquipment"
                                                        data-toggle="tooltip" title="Material">
                                                        <i class="fa-brands fa-codepen" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="material"
                                                        class="form-control card_inputs" id="materialEquipment"
                                                        placeholder="Material" aria-label="Material Equipamento"
                                                        aria-describedby="form-materialEquipment">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-manufacturerEquipment"
                                                        data-toggle="tooltip" title="Fabricante">
                                                        <i class="fa-solid fa-building"" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="manufacturer"
                                                        class="form-control card_inputs" id="manufacturerEquipment"
                                                        placeholder="Fabricante" aria-label="Fabricante Equipamento"
                                                        aria-describedby="form-manufacturerEquipment">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-isolationEquipment"
                                                        data-toggle="tooltip" title="Isolamento">
                                                        <i class="fa-solid fa-lock" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="isolation"
                                                        class="form-control card_inputs" id="isolationEquipment"
                                                        placeholder="Isolamento" aria-label="Isolamento Equipamento"
                                                        aria-describedby="form-isolationEquipment">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 2 Selects per line :psv_scaffold, psv_crane --}}
                                        <div class="row">
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" data-toggle="tooltip" title="Andaime">
                                                        <i class="fa-solid fa-stairs"" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <select class="form-control card_inputs" name="scaffold">
                                                        <option value="Sim">Sim</option>
                                                        <option value="Nao" selected>Nao</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" data-toggle="tooltip" title="Grua">
                                                        <i class="fa-solid fa-truck-arrow-right"
                                                            style="color: #00B0EA;"></i>
                                                    </span>
                                                    <select class="form-control card_inputs" name="crane">
                                                        <option value="Sim">Sim</option>
                                                        <option value="Nao" selected>Nao</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                                <!-- ./ISV-card -->

                                <!-- CV-card -->
                                <div id="cv_card" class="card card-info">

                                    <div class="card-header">
                                        <h3 class="card-title">CV</h3>
                                    </div>
                                    <!-- /.card-header -->
                                    <div class="card-body">
                                        {{-- 2 inputs per line :equipmentTag ,equipmentDescription --}}
                                        <div class="row">
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-tagEquipment"
                                                        data-toggle="tooltip" title="Tag">
                                                        <i class="fa-sharp fa-solid fa-tag" style="color: #00B0EA;"></i>
                                                        <span style="color:red;"">*</span>
                                                    </span>
                                                    <input type="text" name="tag" class="form-control card_inputs"
                                                        id="equipmentTag" placeholder="Tag..." aria-label="Tag Equipment"
                                                        aria-describedby="form-tagEquipment" required>
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-equipmentDescription"
                                                        data-toggle="tooltip" title="Descrição Equipamento">
                                                        <i class="fa-sharp fa-regular fa-newspaper"
                                                            style="color: #00B0EA;"></i>
                                                        <span style="color:red;"">*</span>
                                                    </span>
                                                    <input type="text" name="equipmentDescription"
                                                        class="form-control card_inputs" id="equipmentDescription"
                                                        placeholder="Descrição Equipamento..."
                                                        aria-label="equipmentDescription"
                                                        aria-describedby="form-equipmentDescription" required>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 3 inputs per line :serialNumberEquipment, equipmentBrand, equipmentModel  --}}
                                        <div class="row">
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-serialNumberEquipment"
                                                        data-toggle="tooltip" title="Número de série">
                                                        <i class="fa-solid fa-barcode" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="serialNumberEquipment"
                                                        class="form-control card_inputs" id="equipmentSerialNumber"
                                                        placeholder="Número de série" aria-label="Serial Number Equipment"
                                                        aria-describedby="form-serialNumberEquipment">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-equipmentBrand"
                                                        data-toggle="tooltip" title="Marca">
                                                        <i class="fa-solid fa-object-group" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="equipmentBrand"
                                                        class="form-control card_inputs" id="equipmentBrand"
                                                        placeholder="Marca" aria-label="Marca Equipamento"
                                                        aria-describedby="form-equipmentBrand">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-equipmentModel"
                                                        data-toggle="tooltip" title="Modelo">
                                                        <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="equipmentModel"
                                                        class="form-control card_inputs" id="equipmentModel"
                                                        placeholder="Modelo" aria-label="Modelo Equipamento"
                                                        aria-describedby="form-equipmentModel">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 3 inputs per line :equipmentDimension, equipmentRating, equipmentDimcerta  --}}
                                        <div class="row">
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-dimension"
                                                        data-toggle="tooltip" title="Dimensão">
                                                        <i class="fa-solid fa-ruler " style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="dimension"
                                                        class="form-control card_inputs" id="dimension"
                                                        placeholder="Dimensão" aria-label="Dimensao Equipamento"
                                                        aria-describedby="form-dimension">
                                                </div>
                                            </div>

                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-rating" data-toggle="tooltip"
                                                        title="Rating">
                                                        <i class="fa-solid fa-ranking-star" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="rating" class="form-control card_inputs"
                                                        id="rating" placeholder="Rating..."
                                                        aria-label="Rating Equipamento" aria-describedby="form-rating">
                                                </div>
                                            </div>

                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-dim_certa"
                                                        data-toggle="tooltip" title="Dim certa">
                                                        <i class="fa-solid fa-ruler-vertical" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="dim_certa"
                                                        class="form-control card_inputs" id="dim_certa"
                                                        placeholder="Dim certa..." aria-label="Dim certa Equipamento"
                                                        aria-describedby="form-dim_certa">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 3 Inputs per line :main_equipment ,P_idEquipment ,NumberSapEquipment --}}
                                        <div class="row">
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-main_equipment"
                                                        data-toggle="tooltip" title="Main Equipment">
                                                        <i class="fa-solid fa-sliders" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="main_equipment"
                                                        class="form-control card_inputs" id="main_equipment"
                                                        placeholder="Main Equipment" aria-label="Main Equipment"
                                                        aria-describedby="form-main_equipment">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-P_IidEquipment"
                                                        data-toggle="tooltip" title="P&ID">
                                                        <i class="fa-solid fa-map-location-dot"
                                                            style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="p&id" class="form-control card_inputs"
                                                        id="p&id" placeholder="P&ID" aria-label="P&ID"
                                                        aria-describedby="form-P_IidEquipment">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-NumberSapEquipment"
                                                        data-toggle="tooltip" title="Nº SAP">
                                                        <i class="fa-solid fa-hashtag" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="sap_number"
                                                        class="form-control card_inputs" id="sap_number"
                                                        placeholder="Nº SAP" aria-label="Numero SAP Equipamento"
                                                        aria-describedby="form-NumberSapEquipment">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 3 Inputs per line :materialEquipment ,manufacturerEquipment ,isolationEquipment    --}}
                                        <div class="row">
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-materialEquipment"
                                                        data-toggle="tooltip" title="Material">
                                                        <i class="fa-brands fa-codepen" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="material"
                                                        class="form-control card_inputs" id="material"
                                                        placeholder="Material" aria-label="Material Equipamento"
                                                        aria-describedby="form-materialEquipment">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-manufacturerEquipment"
                                                        data-toggle="tooltip" title="Fabricante">
                                                        <i class="fa-solid fa-building" style="color: #00B0EA;"></i>
                                                    </span>

                                                    <input type="text" name="manufacturer"
                                                        class="form-control card_inputs" id="manufacturerEquipment"
                                                        placeholder="Fabricante" aria-label="Fabricante Equipamento"
                                                        aria-describedby="form-manufacturerEquipment">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-isolationEquipment"
                                                        data-toggle="tooltip" title="Isolamento">
                                                        <i class="fa-solid fa-lock" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="isolation"
                                                        class="form-control card_inputs" id="isolation"
                                                        placeholder="Isolamento" aria-label="Isolamento Equipamento"
                                                        aria-describedby="form-isolationEquipment">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 3 Inputs per line : actuatorManufacturer,   --}}
                                        <div class="row">
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-actuatorManufacturer"
                                                        data-toggle="tooltip" title="Fabricante do atuador">
                                                        <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="actuatorManufacturer"
                                                        class="form-control card_inputs" id="actuatorManufacturer"
                                                        placeholder="Fabricante do atuador"
                                                        aria-label="Fabricante do Atuador"
                                                        aria-describedby="form-actuatorManufacturer">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-ActuatorModel"
                                                        data-toggle="tooltip" title="Modelo do atuador">
                                                        <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="ActuatorModel"
                                                        class="form-control card_inputs" id="ActuatorModel"
                                                        placeholder="Modelo do atuador" aria-label="Modelo do atuador"
                                                        aria-describedby="form-ActuatorModel">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-4">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-actuatorSerialNumber"
                                                        data-toggle="tooltip" title="N.º de série do atuador">
                                                        <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="actuatorSerialNumber"
                                                        class="form-control card_inputs" id="actuatorSerialNumber"
                                                        placeholder="N.º de série do atuador"
                                                        aria-label="Numero de série do atuado"
                                                        aria-describedby="form-actuatorSerialNumber">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./Row --}}

                                        {{-- 2 Inputs per line : actuatorManufacturer,   --}}
                                        <div class="row">
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-PositionerManufacturer"
                                                        data-toggle="tooltip" title="Fabricante do posicionador">
                                                        <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="PositionerManufacturer"
                                                        class="form-control card_inputs" id="PositionerManufacturer"
                                                        placeholder="Fabricante do posicionador"
                                                        aria-label="Fabricante do posicionador"
                                                        aria-describedby="form-PositionerManufacturer">
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="form-PositionerSerialNumber"
                                                        data-toggle="tooltip" title="N.º de série do posicionador">
                                                        <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <input type="text" name="PositionerSerialNumber"
                                                        class="form-control card_inputs" id="PositionerSerialNumber"
                                                        placeholder="N.º de série do posicionador"
                                                        aria-label="Numero de série do posicionador"
                                                        aria-describedby="form-PositionerSerialNumber">
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}

                                        {{-- 2 Selects per line :psv_scaffold, psv_crane --}}
                                        <div class="row">
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" data-toggle="tooltip" title="Andaime">
                                                        <i class="fa-solid fa-stairs" style="color: #00B0EA;"></i>
                                                    </span>
                                                    <select class="form-control card_inputs" name="scaffold">
                                                        <option value="Sim">Sim</option>
                                                        <option value="Nao" selected>Nao</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group col-sm-6">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" data-toggle="tooltip" title="Grua">
                                                        <i class="fa-solid fa-truck-arrow-right"
                                                            style="color: #00B0EA;"></i>
                                                    </span>
                                                    <select class="form-control card_inputs" name="crane">
                                                        <option value="Sim">Sim</option>
                                                        <option value="Nao" selected>Nao</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- ./row --}}
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                                <!-- ./CV-card -->

                                <div class="form-group">
                                    <label>Âmbitos</label>
                                    <select class="form-control" name="EquipmentAmbit" id="AmbitsEquipments_list"
                                        required>
                                        <option value='' hidden>Selecionar Âmbitos...</option>
                                    </select>
                                </div>


                                <div class="form-group col-sm-4">
                                    <button type="submit" class="btn btn-primary">Guardar</button>
                                </div>
                            </form>
                        </div>

                    </div>

                    {{-- Selecionar Equipamentos --}}
                    <div class="card card-primary collapsed-card">

                        <div class="card-header clickable">
                            <h3 class="card-title">Selecionar Equipamentos ja existentes</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool collapse-button"
                                    data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                            </div>
                        </div>

                        <div class="card-body">

                            <div class="table-responsive">
                                <div class="row text-center">

                                    <div class="form-group col-sm">
                                        <label>Fabrica</label>
                                        <select class="form-control" name="unit_id" id="unit_select2">
                                            {{-- Antes era : 'unit_select' (caso de algum erro) --}}
                                            <option value='#' hidden>Selecione Fabrica...</option>
                                            @foreach ($checkUnits as $checkUnit)
                                                <option value="{{ $checkUnit->unit_id }}">
                                                    {{ $checkUnit->unit_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group col-sm">
                                        <label>Tipo de equipamento</label>
                                        <select class="form-control" name="equipmentType_id" id="equipmentType_id_list">
                                            <option value='#' hidden>Selecionar Tipo de equipamento...
                                            </option>

                                            @foreach ($typeEquipments as $typeEquipment)
                                                <option value="{{ $typeEquipment->equipment_type_id }}">
                                                    {{ $typeEquipment->equipment_type_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- <div class="form-group col-sm-4">
                                        <label for="">Pesquisa</label>
                                        <input class="form-control" type="text">
                                    </div> --}}

                                </div>
                                <table id="tableSelectEquipements" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Tag</th>
                                            <th>Descrição Equipamento</th>
                                            <th>Tipo de Equipamento</th>
                                            <th>Fabrica</th>
                                            <th>Selecionar Equipamentos</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            {{-- ./table-responsive --}}
                            <br>
                            <div class="row">
                                <div class="col-sm-6">
                                    <input type="checkbox" id="select-all"> Selecionar todos
                                </div>
                                <div class="col-sm-6">
                                    <a type="button" id="addingEquipmentToProject" class="btn btn-success float-right"
                                        href="#" data-toggle="modal" data-target="#modal-addingEquipmentToProject">
                                        Adicionar
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h5 style="color: #09255C;">Criar Pelo Template:</h5>
                    <div class="card">
                        <div class="card-header" style="background-color: #EAF3F6;">
                            <form action="{{ route('processStep2') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="numberProject" value="{{ $numberProject }}">

                                <div class="row align-items-center">
                                    <div class="col-2 col-md-2 col-lg-1">
                                        <a href="{{ route('download', ['numberProject' => $numberProject]) }}"
                                            class="input-group-text border rounded-left"
                                            style="background-color: #ffffff; display: flex; align-items: center; justify-content: center;"
                                            data-toggle="tooltip" title="Baixar Template">
                                            <i class="fa-solid fa-download" style="color: #09255C;"></i>
                                        </a>
                                    </div>
                                    <div class="col-10 col-md col-lg">
                                        <div class="input-group">
                                            <span class="input-group-text border rounded-left"
                                                style="background-color: #ffffff;" data-toggle="tooltip"
                                                title="Seleciona a Funcao do Template">
                                                <i class="fa-solid fa-list-check" style="color: #09255C;"></i>
                                            </span>
                                            <select class="form-control" style="border: 1px solid #09255C;"
                                                name="chooseIfSelectOrCreateEquipments">
                                                <option value="selectEquipments">Selecionar</option>
                                                <option value="createEquipments" selected>Criar Novos</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-9 col-md col-lg">
                                        <div class="input-group">
                                            <span class="input-group-text border rounded-left"
                                                style="background-color: #ffffff;" data-toggle="tooltip"
                                                title="Seleciona o template que vai utilizar">
                                                <i class="fa-solid fa-file-arrow-up" style="color: #09255C;"></i>
                                            </span>
                                            <div class="custom-file border rounded-right"
                                                style="border-left: none; position: relative;">
                                                <input type="file" class="custom-file-input" id="exampleInputFile"
                                                    name="documento" accept=".xlsx, .xls"
                                                    style="opacity: 0; position: absolute; z-index: -1;">
                                                <label class="custom-file-label" for="exampleInputFile"
                                                    style="background-color: #ffffff; border: 1px solid #09255C; cursor: pointer; color: #09255C;">
                                                    Importar Articulado
                                                </label>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-3 col-md-1 col-lg-1">
                                        <button type="submit" class="btn"
                                            style="background-color: #09255C; color: #ffffff;">Enviar</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <script>
                        $(function() {
                            $('[data-toggle="tooltip"]').tooltip();
                        })
                    </script>

                    {{-- Pendente --}}
                    <div class="row">
                        <div class="form-group col-sm-4">
                            <a href='#' data-toggle='modal' data-target='#modal-pedingEquipments'>
                                <br>
                                <button class="btn btn-danger" style="color:black">
                                    Pendentes
                                    @if (isset($pendingEquipments))
                                        ({{ count($pendingEquipments) }})
                                    @endif
                                </button>
                            </a>
                        </div>
                    </div>


                    <div class="row text-center">

                        <div class="col-sm" id="card-receiveUnitsClientRelated">
                            <div class="form-group">
                                <label>Fábricas </label>

                                <select class="form-control" id="receiveUnitsClientRelated1"
                                    name="receiveUnitsClientRelated">
                                    <option value='#' selected>Mostrar Todos</option>
                                    @foreach ($checkUnits as $checkUnit)
                                        <option value="{{ $checkUnit->unit_id }}">
                                            {{ $checkUnit->unit_name }}
                                        </option>
                                    @endforeach
                                </select>

                            </div>
                        </div>

                        <div class="form-group col-sm">
                            <label>Tipo de Equipamento </label>
                            <select id="tipo_valvulasList" name="equipmentTypeId" class="form-control">
                                <option value='#' selected>Mostrar Todos</option>
                                @foreach ($typeEquipments as $typeEquipment)
                                    <option value="{{ $typeEquipment->equipment_type_id }}">
                                        {{ $typeEquipment->equipment_type_name }}</option>
                                @endforeach
                            </select>
                        </div>

                    </div>
                    <!-- row text-center -->

                    <table id="showProjectEquipment" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>NªIspt</th>
                                <th>Tag</th>
                                <th>Descrição</th>
                                <th>Ambito</th>
                                <th>Fabrica</th>
                                <th>Tipo</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                    </table>
                    <!-- ./Card-danger -->
                </div>



                <div class="card-footer">
                    <div class="float-right">
                        {{-- <button type="submit" class="btn btn-primary">Guardar</button> --}}
                    </div>
                </div>

            </div>
            <!-- ./Card card-Primary  -->

            <a style="margin: 10px" href="{{ route('projectDetails_1', ['id' => $numberProject]) }}"
                class="btn btn-primary  float-left">Detalhes obra</a>
            <a style="margin: 10px" href="{{ route('workStation_3', ['id' => $numberProject]) }}"
                class="btn btn-primary  float-right">Postos de Trabalho</a>

        </div>
        {{-- ./container-fluid --}}
    </fieldset>
    {{-- ./content --}}


    @foreach ($listEquipmentsProjects as $equipment)
        <div class="modal fade" id="modal-confirmDeleteEquipmentInProject-{{ $equipment->equipment_id }}">
            <div class="modal-dialog">
                <!-- Conteúdo da modal -->
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h4 class="modal-title">Apagar Equipamento</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('deleteEquipmentInProject') }}" method="post">
                            @csrf
                            Tem certeza de que deseja apagar o equipamento : {{ $equipment->equipment_tag }}?
                            <br><br>
                            <input type="hidden" name="equipmentId" value="{{ $equipment->equipment_id }}">
                            <select class="form-control" name="deleteEquipmentProject" id="">
                                <option value="complete">Apagar Por Completo</option>
                                <option value="onlyProject">Apagar da Obra</option>
                            </select>

                            <div class="modal-footer justify-content-between">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                                <button type="submit" class="btn btn-success">Apagar</button>
                            </div>

                        </form>

                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modal-changeAmbitEquipment-{{ $equipment->equipment_id }}">
            <div class="modal-dialog">
                <!-- Conteúdo da modal -->
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h4 class="modal-title">Trocar o Ambito, Equipamento : {{ $equipment->equipment_id }} </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{ route('changeAmbitEquipment') }}" method="post">
                            @csrf
                            <p>Seleciona o ambito para qual deseja ser trocado.</p>
                            <input type="hidden" class="equipmentType_id"
                                value="{{ $equipment->equipment_type_id }}">
                            <input type="hidden" name="equipmentID" value="{{ $equipment->equipment_id }}">
                            <select class="form-control ambitsEquipments_list" name="receveAmbit" id="receveAmbit">
                            </select>
                            <br>
                            <button data-dismiss="modal" class="btn btn-danger float-left ">Sair</button>
                            <button class="btn btn-primary  float-right" type="submit">Trocar</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    <div class="modal fade" id="modal-addingEquipmentToProject">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="table-responsive">

                    </div>
                </div>
            </div>
        </div>
    </div>


    {{-- modal-pedingEquipments --}}
    <div class="modal fade" id="modal-pedingEquipments">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                <!--Codigo Novo -->
                <fieldset class="content">
                    <div class="container-fluid">
                        <h2 class="text-center">Equipamentos Pendentes de Criacao:</h2>
                        @isset($pendingEquipments)
                            <ul class="list-group scrollable-list-xl">
                                @foreach ($pendingEquipments as $pendingEquipment)
                                    <li class="list-group-item align-items-center" aria-current="true">
                                        <div class="card card-primary collapsed-card" style="padding: 0;margin:0;">
                                            <div class="card-header clickable">
                                                <h3 class="card-title">Equipamento :
                                                    {{ $pendingEquipment->pending_equipment_tag }}</h3>
                                                <div class="card-tools">
                                                    <button type="button" class="btn btn-tool collapse-button"
                                                        data-card-widget="collapse"><i class="fas fa-plus"></i></button>
                                                </div>
                                            </div>

                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-sm-8">
                                                        <ul>
                                                            <li><b>Equipamento pendente (Tag): </b>
                                                                {{ $pendingEquipment->pending_equipment_tag }}</li>
                                                            <li><b>Equipamento pendente (Descrição):
                                                                </b>{{ $pendingEquipment->pending_equipment_description }}</li>
                                                            @if (isset($groupedArrayForPendingEquipments) && !empty($groupedArrayForPendingEquipments))
                                                                @foreach ($groupedArrayForPendingEquipments[1][1] as $equipmentLog)
                                                                    @if ($equipmentLog['pendingEquipmentId'] == $pendingEquipment->pending_equipment_id)
                                                                        <li> <b>Equipamento copiado de Execel:</b>
                                                                            {{ $groupedArrayForPendingEquipments[0] }} -
                                                                            {{ $groupedArrayForPendingEquipments[1][0] }}</li>
                                                                        <li><b>Linha de
                                                                                criação:{{ $equipmentLog['rowExecel'] }}</b>
                                                                        </li>
                                                                        @if ($equipmentLog['foundInExcel'])
                                                                            <li> <b>Linha de cópia:
                                                                                    {{ $equipmentLog['rowExcelDuplicated'] ?? 'Não duplicado' }}
                                                                                </b> </li>
                                                                        @endif
                                                                    @endif
                                                                @endforeach
                                                            @else
                                                                <li>Sem dados Disponiveis sobre sua criacao!!!</li>
                                                            @endif
                                                        </ul>

                                                    </div>
                                                    <div class="col-sm-4">
                                                        <ul class="text-center d-flex justify-content-around">
                                                            <a href="#" data-toggle="modal"
                                                                data-target="#modal-PendingEquipmentCreate-{{ $pendingEquipment->pending_equipment_id }}">
                                                                <i class="fa-solid fa-eye text-secondary"></i>
                                                            </a>
                                                            <a href="#" data-toggle="modal"
                                                                data-target="#modal-PendingEquipmentRemove-{{ $pendingEquipment->pending_equipment_id }}">
                                                                <i class="fa-solid fa-trash-alt text-danger"></i>
                                                            </a>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <p colspan="9" class="text-center">Sem dados existentes !!!</p>
                        @endisset
                        <footer class="m-3">
                            <button class="btn btn-danger" data-toggle="modal"
                                data-target="#modal-confirmToExcludeAllPententEquipment">
                                Excluir Todos
                            </button>
                            <button data-dismiss="modal" class="btn btn-primary float-right mb-3">Sair</button>
                        </footer>
                    </div>
                </fieldset>

            </div>
            {{-- ./modal-content --}}
        </div>
    </div>
    {{-- ./modal-pedingEquipments --}}

    @if (isset($pendingEquipments))
        <!-- modal- confirmToExcludeAllPententEquipment  -->
        <div class="modal fade" id="modal-confirmToExcludeAllPententEquipment">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="card card-primary" style="padding: 0;margin:0;">
                        <div class="card-header ">
                            <h3 class="card-title">Confirmação de Exclusão Total</h3>
                        </div>

                        <div class="card-body">
                            <p>"Tem a certeza de que pretende eliminar todos os equipamentos pendentes desta obra? A ação é
                                irreversível."</p>
                            <form action="{{ route('deletePendingEquipments') }}" method="POST">
                                @csrf 
                                @foreach ($pendingEquipments as $pendingEquipment)
                                    <input type="hidden" name="pendingEquipmentIds[]"
                                        value="{{ $pendingEquipment->pending_equipment_id }}">
                                @endforeach
                                <button type="submit" class="btn btn-danger float-right mb-3">Excluir Todos</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @foreach ($pendingEquipments as $pendingEquipment)
            <!-- modal-PendingEquipmentCreate  -->

            <div class="modal fade" id="modal-PendingEquipmentCreate-{{ $pendingEquipment->pending_equipment_id }}">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header bg-primary">
                            <h4 class="modal-title">Criar Equipamento</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">x</span>
                            </button>
                        </div>
                        <form
                            action="{{ route('CreateNewEquipmentFromPendingEquipment', $pendingEquipment->pending_equipment_id) }}"
                            method="POST">
                            @csrf

                            {{-- <div class="modal-body">
                                <p>Ao optar por criar o equipamento, ele assumira a o nome ja exsitentes + (1) para indicar
                                    o numero da copia e para diferencias como um equipamento idividual em relacao ao
                                    equipamento original de mesma TAG</p>
                                <h4>Tag: {{ $pendingEquipment->pending_equipment_tag }} <strong>(Número da copia)</strong>
                                </h4>
                                <h4>Descrição: {{ $pendingEquipment->pending_equipment_description }}
                                    <strong>(Número da copia)</strong>
                                </h4>
                                <h4>{{ $pendingEquipment->pending_equipment_type_id }}(Tipo de Equipamento)</h4>
                                <select class="form-control" name="EquipmentAmbit"
                                    id="AmbitsEquipments_list-{{ $pendingEquipment->pending_equipment_id }}" required>
                                    <option value='' hidden>Selecionar Âmbitos...</option>
                                </select>
                            </div> --}}

                            <div class="modal-body">
                                <p>Ao optar por criar o equipamento, este assumirá o nome já existente acrescido de (+1) para indicar o número da cópia e para diferenciá-lo como um equipamento individual em relação ao equipamento original de mesma TAG.</p>
                                <h4><b>Tag:</b>  {{ $pendingEquipment->pending_equipment_tag }} <strong>(Número da copia)</strong>
                                </h4>
                                <h4><b>Descrição:</b>  {{ $pendingEquipment->pending_equipment_description }}
                                    <strong>(Número da copia)</strong>
                                </h4>

                                <h4>{{ $pendingEquipment->pending_equipment_type_id }}({{ $pendingEquipment->equipmentType->equipment_type_name }})</h4>
                                <select class="form-control" name="EquipmentAmbit"
                                    id="AmbitsEquipments_list-{{ $pendingEquipment->pending_equipment_id }}" required>
                                    <option value='' hidden>Selecionar Âmbitos...</option>
                                </select>
                            </div>

                            <div class="modal-footer justify-content-between">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                                <button type="submit" class="btn btn-success">Criar</button>
                            </div>
                        </form>
                    </div>
                    <!-- /.modal-content -->
                </div>
            </div>
            <!-- ./modal-PendingEquipmentCreate -->

            <!-- modal-PendingEquipmentRemove -->
            <div class="modal fade" id="modal-PendingEquipmentRemove-{{ $pendingEquipment->pending_equipment_id }}">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header bg-primary">
                            <h4 class="modal-title">Remover</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">x</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>Deseja realmente remover o equipamento ?</p>
                            <h4>{{ $pendingEquipment->pending_equipment_tag }}</h4>
                            <h4>{{ $pendingEquipment->pending_equipment_description }}</h4>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <form action="{{ route('removeEquipment', $pendingEquipment->pending_equipment_id) }}"
                                method="POST">
                                @csrf
                                @method('DELETE')
                                <div class="modal-footer justify-content-between">
                                    <button type="button" class="btn btn-default"
                                        data-dismiss="modal">Fechar</button>
                                    <button type="submit" class="btn btn-danger">Remover</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- ./modal-PendingEquipmentRemove -->
        @endforeach
    @endif



@endsection

@section('scriptsTemplateAdmin')
    <script>
        var dataTable;
        $(document).ready(function() {

            dataTable = $('#showProjectEquipment').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('getDataEquipment') }}',
                    type: 'GET',
                    data: function(d) {
                        d.numberProject = $('#receiveNumberProject').val();
                        d.checkUnits = $('#receiveUnitsClientRelated1').val();
                        d.tipo_valvulasList = $('#tipo_valvulasList').val();
                    }
                },
                columns: [{
                        data: 'ispt_number',
                        name: 'ispt_number'
                    },
                    {
                        data: 'equipment_tag',
                        name: 'equipment_tag'
                    },
                    {
                        data: 'equipment_description',
                        name: 'equipment_description'
                    },
                    {
                        data: 'ambit',
                        name: 'ambit'
                    },
                    {
                        data: 'unit_name',
                        name: 'unit_name'
                    },
                    {
                        data: 'equipment_type_name',
                        name: 'equipment_type_name'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
            });
        });

        $('#receiveUnitsClientRelated1, #receiveNumberProject, #tipo_valvulasList').on('change', function() {
            dataTable.ajax.reload();
        });
    </script>

    {{-- <script type="text/javascript">
    $(document).ready(function() {
        // $('#card-receiveUnitsClientRelated').hide();

        // Evento de mudança para o campo onde numberProject é selecionado
        $('#receiveNumberProject').on('change', function() {
            
            var numberProject = $(this).val();

            if (numberProject) {
                $.ajax({
                    url: '/api/receiveUnits/' +  numberProject,
                    type: 'GET',
                    success: function(data) {
                        // Supondo que 'data' é um array de objetos com 'id' e 'name'
                        var options = "<option value='#' selected>Mostrar Todos</option>";
                        $.each(data, function(index, item) {
                            options += "<option value='" + item.id + "'>" + item
                                .name + "</option>";
                        });

                        $('#receiveUnitsClientRelated').html(options);
                    },
                    error: function() {
                        // Tratamento de erro
                        console.log('Erro ao carregar dados');
                    }
                });
            }
        });
    });
</script> --}}


    {{-- Nao vai precisar de scritp, pois este filtro nao vai precisar ser altera. --}}
    {{-- <script type="text/javascript">
    $(document).ready(function() {
        $('#receiveNumberProject').on('change', function() {
            var numberProject = $(this).val();

            if (numberProject) {
                $.ajax({
                    url: '/api/receiveUnits/' + numberProject,
                    type: 'GET',
                    success: function(data) {
                        console.log(data);
                        var options = "<option value='#' selected>Mostrar Todos</option>";
                        $.each(data, function(index, item) {
                            options += "<option value='" + item.id + "'>" + item
                                .name + "</option>";
                        });

                        $('#receiveUnitsClientRelated').html(options);
                    },
                    error: function() {
                        console.log('Erro ao carregar dados');
                    }
                });
            }
        });
    });
</script> --}}


    {{-- <script>
        $(document).ready(function() {
            $('#equipmentType_id_list').on('change', function() {
                var equipmentTypeID = $(this).val();
                if (equipmentTypeID) {
                    $.ajax({
                        url: '/api/ambits/' + equipmentTypeID,
                        type: 'GET',
                        success: function(data) {
                            $('#AmbitsEquipments_list').empty(); // Limpar o select de ambits
                            $('#AmbitsEquipments_list').append(
                                '<option value="" hidden>Selecionar Tipo de Âmbito...</option>'
                            );
                            $.each(data, function(key, value) {
                                $('#AmbitsEquipments_list').append('<option value="' +
                                    value.ambits_id + '">' + value
                                    .ambits_description + '</option>');
                            });
                        }
                    });
                } else {
                    $('#AmbitsEquipments_list')
                        .empty(); // Limpar o select de ambits se não há tipo de equipamento selecionado
                    $('#AmbitsEquipments_list').append(
                        '<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                }
            });
        });
    </script> --}}

    {{-- <script>
        $(document).ready(function() {
            // Asumindo que você tenha um mecanismo para obter o equipmentTypeID a partir de outra parte do seu formulário/modal
            // Por exemplo, você pode ter um campo oculto que armazena o equipmentTypeID
            var equipmentTypeID =
            '{{ $pendingEquipment->pending_equipment_type_id }}'; // Usando Blade para inserir o valor

            if (equipmentTypeID) {
                $.ajax({
                    url: '/api/ambits/' + equipmentTypeID,
                    type: 'GET',
                    success: function(data) {
                        var selectId =
                            "AmbitsEquipments_list-{{ $pendingEquipment->pending_equipment_id }}"; // Corrigido para usar o ID dinâmico
                        $('#' + selectId).empty(); // Limpar o select de ambits
                        $('#' + selectId).append(
                            '<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                        $.each(data, function(key, value) {
                            $('#' + selectId).append('<option value="' + value.ambits_id +
                                '">' + value.ambits_description + '</option>');
                        });
                    }
                });
            } else {
                var selectId =
                "AmbitsEquipments_list-{{ $pendingEquipment->pending_equipment_id }}"; // Corrigido para usar o ID dinâmico
                $('#' + selectId).empty(); // Limpar o select de ambits se não há tipo de equipamento selecionado
                $('#' + selectId).append('<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
            }
        });
    </script> --}}

    <script>
        $(document).ready(function() {
            @isset($pendingEquipment)
                // Se $pendingEquipment está definido, executa o AJAX
                var equipmentTypeID =
                '{{ $pendingEquipment->pending_equipment_type_id }}'; // Usando Blade para inserir o valor
                var selectId =
                "AmbitsEquipments_list-{{ $pendingEquipment->pending_equipment_id }}"; // Usando Blade para inserir o valor

                if (equipmentTypeID) {
                    $.ajax({
                        url: '/api/ambits/' + equipmentTypeID,
                        type: 'GET',
                        success: function(data) {
                            $('#' + selectId).empty(); // Limpar o select de ambits
                            $('#' + selectId).append(
                                '<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                            $.each(data, function(key, value) {
                                $('#' + selectId).append('<option value="' + value.ambits_id +
                                    '">' + value.ambits_description + '</option>');
                            });
                        }
                    });
                } else {
                    $('#' + selectId)
                .empty(); // Limpar o select de ambits se não há tipo de equipamento selecionado
                    $('#' + selectId).append('<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                }
            @endisset
        });
    </script>

    {{-- <script>
        $(document).ready(function() {
            @isset($pendingEquipment)
                // Substituído por leitura do input hidden
                var equipmentTypeID = $('#pendingEquipmentTypeID').val(); // Lê o valor do input oculto
                var selectId = "AmbitsEquipments_list-{{ $pendingEquipment->pending_equipment_id }}"; // Mantém como estava
    
                if (equipmentTypeID) {
                    $.ajax({
                        url: '/api/ambits/' + equipmentTypeID,
                        type: 'GET',
                        success: function(data) {
                            $('#' + selectId).empty(); // Limpa o select de âmbitos
                            $('#' + selectId).append('<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                            $.each(data, function(key, value) {
                                $('#' + selectId).append('<option value="' + value.ambits_id + '">' + value.ambits_description + '</option>');
                            });
                        }
                    });
                } else {
                    $('#' + selectId).empty(); // Limpa o select de âmbitos se não houver tipo de equipamento selecionado
                    $('#' + selectId).append('<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                }
            @endisset
        });
    </script>
     --}}



     {{-- Script para trocas de ambito --}}
    <script>
        $(document).ready(function() {
            $('.equipmentType_id').each(function() {
                var equipmentTypeInput = $(this);
                var equipmentTypeID = equipmentTypeInput.val();
                var ambitsSelect = equipmentTypeInput.closest('.modal-body').find('.ambitsEquipments_list');

                if (equipmentTypeID) {
                    $.ajax({
                        url: '/api/ambits/' + equipmentTypeID,
                        type: 'GET',
                        success: function(data) {
                            ambitsSelect.empty();
                            ambitsSelect.append(
                                '<option value="" hidden>Selecionar Tipo de Âmbito...</option>'
                            );
                            $.each(data, function(key, value) {
                                ambitsSelect.append('<option value="' + value
                                    .ambits_id + '">' + value.ambits_description +
                                    '</option>');
                            });
                        }
                    });
                } else {
                    ambitsSelect.empty();
                    ambitsSelect.append('<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                }
            });
        });
    </script>


    <script>
        $(function() {
            $('#new_unit_div').hide(); // inicialmente ocultamos a div
            $('#new_unit_name').prop('required', false); // inicialmente removemos o requisito

            $('#unit_select').change(function() { // evento quando o valor do select muda
                if ($(this).val() == 'new') { // se a opção selecionada é "new"
                    $('#new_unit_div').show(); // mostramos a div
                    $('#new_unit_name').prop('required', true); // adicionamos o requisito
                } else {
                    $('#new_unit_div').hide(); // senão, ocultamos a div
                    $('#new_unit_name').prop('required', false); // removemos o requisito
                }
            });
        });
    </script>

    <script>
        $(function() {
            $('#psv_card').hide();
            $('#isv_card').hide();
            $('#cv_card').hide();

            $('#equipmentType_id_list').change(function() {
                // esconde todos os cards
                $('#psv_card').hide();
                $('#isv_card').hide();
                $('#cv_card').hide();

                // desabilita todos os inputs
                $('.card_inputs').prop('disabled', true);


                switch ($(this).val()) {
                    case '1':
                        $('#cv_card').show();
                        $('#cv_card .card_inputs').prop('disabled', false);
                        break;
                    case '2':
                        $('#isv_card').show();
                        $('#isv_card .card_inputs').prop('disabled', false);
                        break;
                    case '3':
                        $('#psv_card').show();
                        $('#psv_card .card_inputs').prop('disabled', false);
                        break;
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('.fa-eye').parent().click(function(event) {
                event.preventDefault(); // Isso impede que o link seja seguido
                var id = $(this).data('id');
                $('#card-' + id).toggle(); // Isso mostra ou oculta o cartão correspondente
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('.show-card').click(function(e) {
                e.preventDefault(); // Para evitar que o link execute a ação padrão

                var id = $(this).data('id'); // Obtém o id do elemento clicado

                // Alterna a visibilidade do cartão correspondente
                $('#card-' + id).toggle();
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#modal-remover').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                console.log(button); // Log do objeto button para verificar se é o correto
                var id = button.attr('data-id'); // 
                console.log(id);
                var form = $(this).find('form');
                var action = form.attr('action');
                form.attr('action', action.replace(':ID', id));
                $('#equipament_id').val(id);
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            var selectedTasks = []; // Esta variável armazena todas as tarefas selecionadas

            $('.open-modal').click(function(e) {
                e.preventDefault();

                // Limpar os campos de input para cada equipamento 
                $('input[name^="attributes"]').val('');

                // Limpa todos os checkboxes ao abrir a modal
                $('input[name^="ordemTasks"]').prop('checked', false);

                var equipmentId = $(this).data('equipment-id');

                console.log($(this).data());

                $.ajax({
                    url: '/api/equipment/' + equipmentId,
                    method: 'GET',
                    success: function(data) {
                        data.attributes.forEach(function(item) {
                            // Procura o input com name igual a general_attributes_equipment_id e preenche com specific_attributes_value
                            $('input[name="attributes[' + item
                                .general_attributes_equipment_id + ']"]').val(item
                                .specific_attributes_value);
                        });

                        // Limpa o array de tarefas selecionadas
                        selectedTasks = [];

                        data.OrdemTasks.forEach(function(item) {
                            // Procura o checkbox com name igual a elemental_tasks_id e marca como checked
                            var checkbox = $('input[name="ordemTasks[' + item
                                .elemental_tasks_id + ']"]');
                            checkbox.prop('checked', true);

                            // Encontra o objeto correspondente em data.allElementalTasks
                            var correspondingTask = data.allElementalTasks.find(
                                function(task) {
                                    return task.elemental_tasks_id == item
                                        .elemental_tasks_id;
                                });

                            // Verifica se encontrou o objeto correspondente
                            if (correspondingTask) {
                                // Adiciona a tarefa ao array de tarefas selecionadas
                                selectedTasks.push(correspondingTask
                                    .elemental_tasks_code);
                            }
                        });
                        // console.log(selectedTasks);

                        // Limpa o select
                        $('#ArrayListElementsTasks').empty();

                        // Adiciona as opções ao select na ordem correta
                        $.each(selectedTasks, function(index, value) {
                            $('#ArrayListElementsTasks').append(new Option(value,
                                value));
                        });

                        // Abre a modal
                        $('#modal-showEquipment').modal('show');
                    }
                });

                $('#modal-showEquipment').on('hide.bs.modal', function() {
                    // Desmarca todos os checkboxes
                    $('input[name^="ordemTasks"]').prop('checked', false);

                    // Limpa o array de tarefas selecionadas
                    selectedTasks = [];

                    // Limpa o select
                    $('#ArrayListElementsTasks').empty();
                });
            });

            // Monitora mudanças em todos os checkboxes
            $('input[name^="ordemTasks"]').change(function() {
                var taskNumberMatch = this.name.match(/\d+$/);
                if (taskNumberMatch !== null) {
                    var taskName = 'TE' + taskNumberMatch[0];

                    if (this.checked) {
                        // Adiciona a tarefa no array e ordena
                        selectedTasks.push(taskName);
                        selectedTasks.sort();
                    } else {
                        // Remove a tarefa do array
                        var index = selectedTasks.indexOf(taskName);
                        if (index > -1) {
                            selectedTasks.splice(index, 1);
                        }
                    }

                    // Limpa o select
                    $('#ArrayListElementsTasks').empty();

                    // Adiciona as opções ao select na ordem correta
                    $.each(selectedTasks, function(index, value) {
                        $('#ArrayListElementsTasks').append(new Option(value, value));
                    });
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // Detecta quando qualquer checkbox é selecionado ou desmarcado
            $('input[name^="ordemTasks"]').change(function() {
                // Obtém o valor do checkbox (TE1, TE2, etc.)
                var taskValue = $(this).parent().prev().prev().text();

                if (this.checked) {
                    // Adiciona uma nova opção ao select
                    $('#ArrayListElementsTasks').append($('<option>', {
                        value: taskValue,
                        text: taskValue
                    }));
                } else {
                    // Remove a opção do select
                    $("#ArrayListElementsTasks option[value='" + taskValue + "']").remove();
                }
            });

            // Adiciona as opções que já estão marcadas ao carregar a página
            $('input[name^="ordemTasks"]:checked').each(function() {
                var taskValue = $(this).parent().prev().prev().text();

                // Adiciona uma nova opção ao select
                $('#ArrayListElementsTasks').append($('<option>', {
                    value: taskValue,
                    text: taskValue
                }));
            });
        });
    </script>

    <script>
        $(function() {
            $('#descriptionAdditionalTask').hide();

            $('#checkboxAddicionalTask').change(function() {
                if ($('#checkboxAddicionalTask').is(':checked')) {
                    $('#descriptionAdditionalTask').fadeIn();
                } else {
                    $('#descriptionAdditionalTask').hide();
                }
            });
        })
    </script>

    <script>
        $(function() {
            $("#ProjectEquipmentTable").DataTable({
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
            }).buttons().container().appendTo('#ProjectEquipmentTable_wrapper .col-md-6:eq(0)');
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#tableSelectEquipements').DataTable({
                autoWidth: false,
                processing: true,
                serverSide: true,
                // Alterar esta parte para a nova forma.
                ajax: {
                    // url: '/api/receiveAllInstallationEquipment/' + $('#receiveNumberProject').val()
                    url: '{{ route('api_receiveAllInstallationEquipment') }}',
                    type: 'GET',
                    data: function(d) {
                        d.receiveNumberProject = $('#receiveNumberProject').val();
                    }
                },
                columns: [{
                        data: 'equipment_tag',
                        name: 'equipment_tag'
                    },
                    {
                        data: 'equipment_description',
                        name: 'equipment_description'
                    },
                    {
                        data: 'equipment_type',
                        name: 'equipment_type'
                    },
                    {
                        data: 'unit',
                        name: 'unit'
                    },
                    {
                        data: 'equipment_id',
                        name: 'equipment_id',
                        render: function(data, type, row) {
                            return '<input type="checkbox" class="equipment-checkbox" value="' +
                                data + '">';
                        },
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            // var selectedEquipments = [];
            // $(document).on('click', '.equipment-checkbox', function() {
            //     var equipmentId = $(this).val();

            //     if ($(this).is(':checked')) {
            //         // Adiciona o equipmentId ao array se a checkbox está marcada
            //         selectedEquipments.push(equipmentId);
            //     } else {
            //         // Remove o equipmentId do array se a checkbox está desmarcada
            //         var index = selectedEquipments.indexOf(equipmentId);
            //         if (index > -1) {
            //             selectedEquipments.splice(index, 1);
            //         }
            //     }
            // });

            // $(document).on('click', '#select-all', function() {
            //     var isChecked = $(this).is(':checked');

            //     // Seleciona ou desseleciona todas as checkboxes
            //     $('.equipment-checkbox').prop('checked', isChecked);

            //     // Adiciona ou remove todos os IDs de equipamento do array selectedEquipments
            //     if (isChecked) {
            //         $('.equipment-checkbox').each(function() {
            //             var equipmentId = $(this).val();
            //             if ($.inArray(equipmentId, selectedEquipments) === -1) {
            //                 selectedEquipments.push(equipmentId);
            //             }
            //         });
            //     } else {
            //         selectedEquipments = [];
            //     }
            // });



            // $(document).on('click', '.equipment-checkbox', function() {
            //     var equipmentId = $(this).val();

            //     if ($(this).is(':checked')) {
            //         // Adiciona o equipmentId ao array se a checkbox está marcada
            //         if ($.inArray(equipmentId, selectedEquipments) === -1) {
            //             selectedEquipments.push(equipmentId);
            //         }
            //     } else {
            //         // Remove o equipmentId do array se a checkbox está desmarcada
            //         var index = selectedEquipments.indexOf(equipmentId);
            //         if (index > -1) {
            //             selectedEquipments.splice(index, 1);
            //         }

            //         // Desmarca a checkbox "selecionar todos"
            //         $('#select-all').prop('checked', false);
            //     }
            // });
            // $(document).on('click', '#addingEquipmentToProject', function() {
            //         // Faça uma solicitação AJAX para a rota desejada
            //         $.ajax({
            //             url: '/api/getEquipmentDetails/' + selectedEquipments, // Substitua por sua rota
            //             method: 'GET',
            //             success: function(response) {
            //                 console.log(response);
            //             },
            //         });
            //     });


            var selectedEquipments = [];

            $(document).on('click', '.equipment-checkbox', function() {
                var equipmentId = $(this).val();

                if ($(this).is(':checked')) {
                    // Adiciona o equipmentId ao array se a checkbox está marcada
                    if ($.inArray(equipmentId, selectedEquipments) === -1) {
                        selectedEquipments.push(equipmentId);
                    }
                } else {
                    // Remove o equipmentId do array se a checkbox está desmarcada
                    var index = selectedEquipments.indexOf(equipmentId);
                    if (index > -1) {
                        selectedEquipments.splice(index, 1);
                    }

                    // Desmarca a checkbox "selecionar todos"
                    $('#select-all').prop('checked', false);
                }
            });

            $(document).on('click', '#select-all', function() {
                var isChecked = $(this).is(':checked');

                // Seleciona ou desseleciona todas as checkboxes
                $('.equipment-checkbox').prop('checked', isChecked);

                // Adiciona ou remove todos os IDs de equipamento do array selectedEquipments
                if (isChecked) {
                    $('.equipment-checkbox').each(function() {
                        var equipmentId = $(this).val();
                        if ($.inArray(equipmentId, selectedEquipments) === -1) {
                            selectedEquipments.push(equipmentId);
                        }
                    });
                } else {
                    selectedEquipments = [];
                }
            });

            $(document).on('click', '#addingEquipmentToProject', function() {
                // Faça uma solicitação AJAX para a rota desejada
                $.ajax({
                    url: '/api/getEquipmentDetails/' + selectedEquipments, // Substitua por sua rota
                    method: 'GET',

                    success: function(response) {

                        $('#modal-addingEquipmentToProject .table-responsive').empty();

                        var form = $(
                            '<form action="{{ route('receiveEquipmentToAssociateTasks') }}" method="post"></form>'
                        );
                        // Ira receber o Número da obra atualmente relacionada
                        var receiveNumberProject = $('<input>', {
                            type: 'hidden',
                            name: 'receiveNumberProject',
                            value: $('#receiveNumberProject').val()
                        });

                        form.append(receiveNumberProject);

                        form.append('{{ csrf_field() }}');

                        var table = $(
                                '<table class="table table-bordered table-striped"></table>')
                            .addClass('table');
                        var thead = $(
                            '<thead><tr><th>Id</th><th>Tag</th><th>Description</th><th>Unit ID</th><th>Type ID</th><th>Ambits</th></tr></thead>'
                        );
                        table.append(thead);

                        var tbody = $('<tbody></tbody>');

                        response.forEach(function(equipment, index) {


                            var row = $('<tr></tr>');

                            row.append($('<td></td>').text(equipment.equipment_id)
                                .append($('<input>', {
                                    type: 'hidden',
                                    name: 'equipment[' + index +
                                        '][equipment_id]',
                                    value: equipment.equipment_id
                                })));
                            row.append($('<td></td>').text(equipment.equipment_tag)
                                .append($('<input>', {
                                    type: 'hidden',
                                    name: 'equipment[' + index +
                                        '][equipment_tag]',
                                    value: equipment.equipment_tag
                                })));
                            row.append($('<td></td>').text(equipment
                                    .equipment_description)
                                .append($('<input>', {
                                    type: 'hidden',
                                    name: 'equipment[' + index +
                                        '][equipment_description]',
                                    value: equipment.equipment_description
                                })));
                            row.append($('<td></td>').text(equipment.unit_id)
                                .append($('<input>', {
                                    type: 'hidden',
                                    name: 'equipment[' + index +
                                        '][unit_id]',
                                    value: equipment.unit_id
                                })));
                            row.append($('<td></td>').text(equipment.equipment_type_id)
                                .append($('<input>', {
                                    type: 'hidden',
                                    name: 'equipment[' + index +
                                        '][equipment_type_id]',
                                    value: equipment.equipment_type_id
                                })));


                            // Adiciona um select para cada linha com os ambits do equipamento
                            var select = $(
                                '<select class="form-control" name="equipment[' +
                                index + '][ambit_id]">');
                            Object.values(equipment.ambits).forEach(function(ambit) {
                                var option = new Option(ambit
                                    .ambits_description, ambit.ambits_id);
                                select.append(option);
                            });
                            row.append($('<td></td>').append(select));
                            tbody.append(row);
                        });

                        table.append(tbody);

                        // Adiciona um botão de enviar ao formulário
                        form.append(table);
                        form.append(
                            '<button type="submit" class="btn btn-primary">Submit</button>');

                        $('#modal-addingEquipmentToProject .table-responsive').append(form);
                        $('#modal-addingEquipmentToProject').modal('show');
                    }


                });
            });

        });
    </script>

    <script>
        $(document).ready(function() {
            $('#exampleInputFile').on('change', function() {
                // Obtendo o nome do arquivo
                var fileName = $(this).val().split('\\').pop();

                // Substituindo o texto do rótulo
                $(this).next('.custom-file-label').html(fileName);
            })
        });
    </script>


    <script>
        $(document).ready(function() {
            $('[id^="modal-PendingEquipmentCreate-"]').on('show.bs.modal', function(e) {
                // Pega o id do equipamento pendente do id da modal
                var pendingEquipmentID = e.target.id.split('-').pop();

                // Pega o valor do tipo de equipamento do elemento h4
                var equipmentTypeID = $(this).find('h4').last().text();

                // Realiza a chamada AJAX
                if (equipmentTypeID) {
                    $.ajax({
                        url: '/api/ambits/' + equipmentTypeID,
                        type: 'GET',
                        success: function(data) {
                            $('#AmbitsEquipments_list-' + pendingEquipmentID).empty();
                            $('#AmbitsEquipments_list-' + pendingEquipmentID).append(
                                '<option value="" hidden>Selecionar Tipo de Âmbito...</option>'
                            );
                            $.each(data, function(key, value) {
                                $('#AmbitsEquipments_list-' + pendingEquipmentID)
                                    .append('<option value="' +

                                        value.ambits_id + '">' + value
                                        .ambits_description + '</option>');
                            });
                        }
                    });
                } else {
                    $('#AmbitsEquipments_list-' + pendingEquipmentID).empty();
                    $('#AmbitsEquipments_list-' + pendingEquipmentID).append(
                        '<option value="" hidden>Selecionar Tipo de Âmbito...</option>');
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $('#mytable').DataTable();
        });
    </script>


    {{-- <script type="text/javascript">
        $(document).ready(function() {
            $('#cardHeader').on('click', function(e) {
                // Verifica se o clique não foi no botão
                if (!$(e.target).is('#collapseButton') && !$(e.target).is('#collapseButton *')) {
                    $('#collapseButton').trigger('click');
                }
            });
        });
    </script> --}}


    <script type="text/javascript">
        $(document).ready(function() {
            $('.clickable').on('click', function(e) {
                // Verifica se o clique não foi no botão
                if (!$(e.target).is('.collapse-button') && !$(e.target).is('.collapse-button *')) {
                    $(this).find('.collapse-button').trigger('click');
                }
            });
        });
    </script>
@endsection