@extends('Templates/templateAdmin')

@section('Main-content')
    <div class="row justify-content-center">

        <!-- Multiplos FieldSet -->
        <div class="col-12" id="msform">

            <div class="row justify-content-center">
                <div class="card-body">
                    <!-- Progressbar -->
                    <ul id="progressbar" class="nav nav-pills  flex-sm-row">
                        <li class="active flex-sm-fill">Project details</li>
                        <li class="flex-sm-fill">Articulated</li>
                        <li class="flex-sm-fill">Workstation</li>
                    </ul>
                </div>
            </div>

            <!-- Card details project -->
            <fieldset>

                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Valvulas da obra</h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="table-responsive">

                            {{-- <table id="example1" class="table table-bordered table-striped">

                                <thead>
                                    <tr>
                                        <th>Tag Vávula</th>
                                        <th>Tipo de Vávula</th>
                                        <th>Ambito</th>
                                        <th>Tarefas Elementares</th>
                                        <th>Tarefas atuais</th>
                                        <th>Data de entrada</th>
                                        <th>Data de conclusão</th>
                                        <th>Inspeção</th>
                                        <th>Visualizar</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th>PSV1234</th>
                                        <td>PSV</td>
                                        <td>Substituicao</td>
                                        <td>TE1- TE2- TE3- TE4- TE5</td>
                                        <td>TE1(I)-TE2</td>
                                        <td>2/10/2014-10:34</td>
                                        <td>2/10/2014-10:34</td>
                                        <td>Sim</td>
                                        <td class="text-center">
                                            <a href="#" data-toggle="modal" data-target="#modal-valvula">
                                                <i class="fa-solid fa-eye text-primary"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>CV1234</th>
                                        <td>CV</td>
                                        <td>Calibração</td>
                                        <td>TE1- TE2- TE3- TE4- TE5</td>
                                        <td>TE1-TE2</td>
                                        <td>2/10/2014-10:34</td>
                                        <td>2/10/2014-10:34</td>
                                        <td>Nao</td>
                                        <td class="text-center">
                                            <a href="#" data-toggle="modal" data-target="#modal-valvula">
                                                <i class="fa-solid fa-eye text-primary"></i>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table> --}}

                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Nome</th>
                                        <th>Email</th>
                                        <!-- ... Outras colunas ... -->
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Email</td>
                                        <td>Email</td>
                                        <td>Email</td>
                                        <!-- ... Outras colunas ... -->
                                    </tr>
                                </tbody>
                            </table>

                            <!-- /. Table-->
                        </div>
                        <!--/table obra-->
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- ./card -->
                <!-- ./Card card-Primary  -->

                <input type="button" name="next" class="btn btn-primary next float-right" value="Próximo" />

            </fieldset>

            <!-- ./Card details project -->


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

                    <div class="card-body">
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <div class="float-right">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </div>
                <!-- ./Card card-Primary  -->

                <input type="button" name="previous" class="btn btn-primary previous float-left" value="Previous" />
                <input type="button" name="next" class="btn btn-primary next float-right" value="Próximo" />

            </fieldset>

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

                    <div class="card-body">

                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <div class="float-right">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </div>
                <!-- ./Card card-Primary  -->

                <input type="button" name="previous" class="btn btn-primary previous float-left" value="Previous" />
            </fieldset>

        </div>
        <!-- Multiplos FieldSet -->
    </div>
@endsection

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


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














{{-- Modal Show Equipments --}}
<div class="modal fade" id="modal-showEquipment-{{ $listEquipmentsProject->equipment_id }}">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h4 class="modal-title">Equipamento :
                    {{ $listEquipmentsProject->equipment_tag }}</h4>
            </div>
            
            <div class="modal-body">
                @if ($listEquipmentsProject->equipment_type_id == 1)
                    <div class="modal-cv">
                        <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">
                                                <i class="fa-sharp fa-solid fa-tag" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="tag" class="form-control card_inputs"
                                                    id="equipmentTag" placeholder="Tag..." aria-label="Tag Equipment"
                                                    aria-describedby="form-tagEquipment" required>
                                                <label>Tag <span class="required">*</span></label>
                                            </div>
                                        </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-sharp fa-regular fa-newspaper" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="equipmentDescription"
                                                    class="form-control card_inputs" id="equipmentDescription"
                                                    placeholder="Descricao Equipamento..." aria-label="Tag Equipment"
                                                    aria-describedby="form-equipmentDescription" required>
                                                <label>Descricao Equipamento <span class="required">*</span></label>
                                            </div>
                                        </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">
                                                <i class="fa-solid fa-barcode" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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">
                                                <label>Número de série </label>
                                            </div>
                                        </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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="equipmentBrand"
                                                    class="form-control card_inputs" id="equipmentBrand"
                                                    placeholder="Modelo" aria-label="Marca Equipamento"
                                                    aria-describedby="form-equipmentBrand">
                                                <label>Marca</label>
                                            </div>
                                        </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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="equipmentModel"
                                                    class="form-control card_inputs" id="equipmentModel"
                                                    placeholder="Modelo" aria-label="Modelo Equipamento"
                                                    aria-describedby="form-equipmentModel">
                                                <label>Modelo</label>
                                            </div>
                                        </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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="dimension"
                                                    class="form-control card_inputs" id="dimension"
                                                    placeholder="Dimensão" aria-label="Dimensao Equipamento"
                                                    aria-describedby="form-dimension" value="">
                                                <label>Dimensão</label>
                                            </div>
                                        </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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="rating" class="form-control card_inputs"
                                                    id="rating" placeholder="Rating..."
                                                    aria-label="Rating Equipamento" aria-describedby="form-rating">
                                                <label>Rating</label>
                                            </div>
                                        </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-sharp fa-regular fa-square-poll-vertical"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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">
                                                <label>Dim certa</label>
                                            </div>
                                        </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">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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">
                                                <label>Main Equipment</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="form-P_IidEquipment">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="P_IidEquipment"
                                                    class="form-control card_inputs" id="P_idEquipment"
                                                    placeholder="P&ID" aria-label="P&ID"
                                                    aria-describedby="form-P_IidEquipment">
                                                <label>P&ID</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="form-NumberSapEquipment">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="NumberSapEquipment"
                                                    class="form-control card_inputs" id="NumberSapEquipment"
                                                    placeholder="Modelo" aria-label="Numero SAP Equipamento"
                                                    aria-describedby="form-NumberSapEquipment">
                                                <label>Nº SAP</label>
                                            </div>
                                        </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">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="materialEquipment"
                                                    class="form-control card_inputs" id="materialEquipment"
                                                    placeholder="Modelo" aria-label="Material Equipamento"
                                                    aria-describedby="form-materialEquipment">
                                                <label>Material</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="form-manufacturerEquipment">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="manufacturerEquipment"
                                                    class="form-control card_inputs" id="manufacturerEquipment"
                                                    placeholder="Modelo" aria-label="Fabricante Equipamento"
                                                    aria-describedby="form-manufacturerEquipment">
                                                <label>Fabricante</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="form-isolationEquipment">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="isolationEquipment"
                                                    class="form-control card_inputs" id="isolationEquipment"
                                                    placeholder="Modelo" aria-label="Isolamento Equipamento"
                                                    aria-describedby="form-isolationEquipment">
                                                <label>Isolamento</label>
                                            </div>
                                        </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">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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">
                                                <label>Fabricante do atuador</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="form-ActuatorModel">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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">
                                                <label>Modelo do atuador</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="form-actuatorSerialNumber">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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">
                                                <label>N.º de série do atuador</label>
                                            </div>
                                        </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">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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">
                                                <label>Fabricante do posicionador</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="form-PositionerSerialNumber">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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">
                                                <label>N.º de série do posicionador</label>
                                            </div>
                                        </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-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <select class="form-control card_inputs" name="scaffold">
                                                    <option value="Sim">Sim</option>
                                                    <option value="Nao" selected>Nao
                                                    </option>
                                                </select>
                                                <label>Andaime?</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <select class="form-control card_inputs" name="crane">
                                                    <option value="Sim">Sim</option>
                                                    <option value="Nao" selected>Nao
                                                    </option>
                                                </select>
                                                <label>Grua?</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- ./row --}}
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    {{-- ./modal-cv --}}
                @elseif ($listEquipmentsProject->equipment_type_id == 2)
                    <div class="modal-isv">
                        <!-- 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">
                                                <i class="fa-sharp fa-solid fa-tag" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="tag" class="form-control card_inputs"
                                                    id="equipmentTag" placeholder="Tag..." aria-label="Tag Equipment"
                                                    aria-describedby="form-tagEquipment" required>
                                                <label>Tag <span class="required">*</span></label>
                                            </div>
                                        </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-sharp fa-regular fa-newspaper"
                                                    style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="equipmentDescription"
                                                    class="form-control card_inputs" id="equipmentDescription"
                                                    placeholder="Descricao Equipamento..." aria-label="Tag Equipment"
                                                    aria-describedby="form-equipmentDescription" required>
                                                <label>Descricao Equipamento <span class="required">*</span></label>
                                            </div>
                                        </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">
                                                <i class="fa-solid fa-barcode" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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">
                                                <label>Número de série </label>
                                            </div>
                                        </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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="equipmentBrand"
                                                    class="form-control card_inputs" id="equipmentBrand"
                                                    placeholder="Modelo" aria-label="Marca Equipamento"
                                                    aria-describedby="form-equipmentBrand">
                                                <label>Marca</label>
                                            </div>
                                        </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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="equipmentModel"
                                                    class="form-control card_inputs" id="equipmentModel"
                                                    placeholder="Modelo" aria-label="Modelo Equipamento"
                                                    aria-describedby="form-equipmentModel">
                                                <label>Modelo</label>
                                            </div>
                                        </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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="dimension"
                                                    class="form-control card_inputs" id="dimension"
                                                    placeholder="Dimensão" aria-label="Dimensao Equipamento"
                                                    aria-describedby="form-dimension">
                                                <label>Dimensão</label>
                                            </div>
                                        </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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="rating" class="form-control card_inputs"
                                                    id="rating" placeholder="Rating..."
                                                    aria-label="Rating Equipamento" aria-describedby="form-rating">
                                                <label>Rating</label>
                                            </div>
                                        </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-sharp fa-regular fa-square-poll-vertical"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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">
                                                <label>Dim certa</label>
                                            </div>
                                        </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">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="main_equipment"
                                                    class="form-control card_inputs" id="main_equipment"
                                                    placeholder="Modelo" aria-label="Main Equipment"
                                                    aria-describedby="form-main_equipment">
                                                <label>Main Equipment</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="form-P_IidEquipment">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="P_IidEquipment"
                                                    class="form-control card_inputs" id="P_idEquipment"
                                                    placeholder="Modelo" aria-label="P&ID"
                                                    aria-describedby="form-P_IidEquipment">
                                                <label>P&ID</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="form-NumberSapEquipment">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="NumberSapEquipment"
                                                    class="form-control card_inputs" id="NumberSapEquipment"
                                                    placeholder="Modelo" aria-label="Numero SAP Equipamento"
                                                    aria-describedby="form-NumberSapEquipment">
                                                <label>Nº SAP</label>
                                            </div>
                                        </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">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="materialEquipment"
                                                    class="form-control card_inputs" id="materialEquipment"
                                                    placeholder="Modelo" aria-label="Material Equipamento"
                                                    aria-describedby="form-materialEquipment">
                                                <label>Material</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="form-manufacturerEquipment">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="manufacturerEquipment"
                                                    class="form-control card_inputs" id="manufacturerEquipment"
                                                    placeholder="Modelo" aria-label="Fabricante Equipamento"
                                                    aria-describedby="form-manufacturerEquipment">
                                                <label>Fabricante</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-4">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" id="form-isolationEquipment">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="isolationEquipment"
                                                    class="form-control card_inputs" id="isolationEquipment"
                                                    placeholder="Modelo" aria-label="Isolamento Equipamento"
                                                    aria-describedby="form-isolationEquipment">
                                                <label>Isolamento</label>
                                            </div>
                                        </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-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <select class="form-control card_inputs" name="scaffold">
                                                    <option value="Sim">Sim</option>
                                                    <option value="Nao" selected>Nao
                                                    </option>
                                                </select>
                                                <label>Andaime?</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <select class="form-control card_inputs" name="crane">
                                                    <option value="Sim">Sim</option>
                                                    <option value="Nao" selected>Nao
                                                    </option>
                                                </select>
                                                <label>Grua?</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- ./row --}}
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- ./ISV-card -->

                    </div>
                    {{-- ./modal-isv --}}
                @elseif ($listEquipmentsProject->equipment_type_id == 3)
                    <div class="modal-psv">
                        <!-- 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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="tag" class="form-control card_inputs"
                                                    id="equipmentTag" placeholder="Tag..." aria-label="Tag Equipment"
                                                    aria-describedby="form-tagEquipment"
                                                    value="{{ $listEquipmentsProject->equipment_tag }}">
                                                <label>Tag</label>
                                            </div>
                                        </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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="equipmentDescription"
                                                    class="form-control card_inputs" id="equipmentDescription"
                                                    placeholder="Descricao Equipamento..." aria-label="Tag Equipment"
                                                    aria-describedby="form-equipmentDescription"
                                                    value="{{ $listEquipmentsProject->equipment_description }}">
                                                <label>Descricao Equipamento</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- 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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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"
                                                    value="{{ $listEquipmentsProject->equipment_serial_number }}">
                                                <label>Número de série </label>
                                            </div>
                                        </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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="equipmentBrand"
                                                    class="form-control card_inputs" id="equipmentBrand"
                                                    placeholder="Modelo" aria-label="Serial Number Equipment"
                                                    aria-describedby="form-equipmentBrand"
                                                    value="{{ $listEquipmentsProject->equipment_brand }}">
                                                <label>Marca</label>
                                            </div>
                                        </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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="equipmentModel"
                                                    class="form-control card_inputs" id="equipmentModel"
                                                    placeholder="Modelo" aria-label="Serial Number Equipment"
                                                    aria-describedby="form-equipmentModel"
                                                    value="{{ $listEquipmentsProject->equipment_model }}">
                                                <label>Modelo</label>
                                            </div>
                                        </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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="dimension"
                                                    class="form-control card_inputs" id="dimension"
                                                    placeholder="Dimensão" aria-label="Serial Number Equipment"
                                                    aria-describedby="form-dimension">
                                                <label>Dimensão</label>
                                            </div>
                                        </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;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="rating" class="form-control card_inputs"
                                                    id="rating" placeholder="Rating..."
                                                    aria-label="Serial Number Equipment"
                                                    aria-describedby="form-rating">
                                                <label>Rating</label>
                                            </div>
                                        </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-sharp fa-regular fa-square-poll-vertical"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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">
                                                <label>Dim certa</label>
                                            </div>
                                        </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-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="main_equipment"
                                                    class="form-control card_inputs" id="main_equipment"
                                                    placeholder="Modelo" aria-label="Main Equipment"
                                                    aria-describedby="form-main_equipment">
                                                <label>Main Equipment</label>
                                            </div>
                                        </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-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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">
                                                <label>P&ID</label>
                                            </div>
                                        </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-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="sap_number"
                                                    class="form-control card_inputs" id="sap_number"
                                                    placeholder="Modelo" aria-label="Numero Sap"
                                                    aria-describedby="form-sap_number">
                                                <label>Nº SAP</label>
                                            </div>
                                        </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-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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">
                                                <label>SP (Bar) Cold</label>
                                            </div>
                                        </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-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <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)">
                                                <label>Back Presure (Bar)</label>
                                            </div>
                                        </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-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="material"
                                                    class="form-control card_inputs" id="material"
                                                    placeholder="Material" aria-label="Material"
                                                    aria-describedby="form-material">
                                                <label>Material</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- ./row --}}

                                {{-- 2 inputs per line :  --}}
                                <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-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="manufacturer"
                                                    class="form-control card_inputs" id="manufacturer"
                                                    placeholder="Fabricante" aria-label="Fabricante"
                                                    aria-describedby="form-manufacturer">
                                                <label>Fabricante</label>
                                            </div>
                                        </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-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <input type="text" name="isolation"
                                                    class="form-control card_inputs" id="isolation"
                                                    placeholder="Isolamento" aria-label="Isolamento"
                                                    aria-describedby="form-isolation">
                                                <label>Isolamento</label>
                                            </div>
                                        </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-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <select class="form-control card_inputs" name="scaffold">
                                                    <option value="Sim">Sim
                                                    </option>
                                                    <option value="Nao" selected>
                                                        Nao
                                                    </option>
                                                </select>
                                                <label>Andaime?</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fa-solid fa-cubes" style="color: #00B0EA;"></i>
                                            </span>
                                            <div class="has-float-label">
                                                <select class="form-control card_inputs" name="crane">
                                                    <option value="Sim">Sim
                                                    </option>
                                                    <option value="Nao" selected>
                                                        Nao
                                                    </option>
                                                </select>
                                                <label>Grua?</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- ./row --}}
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    {{-- ./modal-psv --}}
                @endif
            </div>
            {{-- ./modal-body --}}

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

</div>
{{-- ./modal fade --}}






























{{-- Script ProgressBar --}}
@section('scripts')
    <script>
        $(document).ready(function() {
            var activeFieldsetIndex =
                "{{ session('activeFieldsetIndex') }}"; // Obtenha o índice do fieldset ativo da sessão

            if (activeFieldsetIndex !== "") {
                // Se activeFieldsetIndex não estiver vazio, mostre o fieldset correspondente
                var fieldsets = $("fieldset");
                fieldsets.hide(); // Esconda todos os fieldsets
                $(fieldsets.get(activeFieldsetIndex)).show(); // Mostre o fieldset ativo
                $("#progressbar li").eq(activeFieldsetIndex).addClass(
                    "active"); // Marque a progress bar correspondente como ativa
            }
        });


        //jQuery time
        var current_fs, next_fs, previous_fs; //fieldsets
        var left, opacity, scale; //fieldset properties which we will animate
        var animating; //flag to prevent quick multi-click glitches

        $(".next").click(function() {
            if (animating) return false;
            animating = true;

            current_fs = $(this).parent();
            next_fs = $(this).parent().next();

            $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

            current_fs.animate({
                opacity: 0
            }, 800, function() {
                current_fs.hide();
                next_fs.show();
                next_fs.css({
                    'opacity': 1
                });
                animating = false;
            });
        });

        $(".previous").click(function() {
            if (animating) return false;
            animating = true;

            current_fs = $(this).parent();
            previous_fs = $(this).parent().prev();

            $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

            current_fs.animate({
                opacity: 0
            }, 800, function() {
                current_fs.hide();
                previous_fs.show();
                previous_fs.css({
                    'opacity': 1
                });
                animating = false;
            });
        });
    </script>
@endsection


@extends('Templates/templateAdmin')

@section('Main-content')
    @if (session('success'))
        <div class="alert alert-success" role="alert">
            {{ session('success') }}
        </div>
    @endif

    <div class="row justify-content-center">

        <!-- Multiplos FieldSet -->
        <div class="col-12" id="msform">

            <div class="row justify-content-center">
                <div class="card-body">
                    <!-- Progressbar -->
                    <ul id="progressbar" class="nav nav-pills  flex-sm-row">
                        <li class="active flex-sm-fill">Detalhes do projecto</li>
                        <li class="flex-sm-fill">Articulado</li>
                        <li class="flex-sm-fill">Postos de Trabalho</li>
                    </ul>
                </div>
            </div>

            <!-- Card details project -->
            <fieldset>
                <div class="card card-primary" id="CardDetalhes">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title mb-0">Detalhes da Obra</h3>
                    </div>

                    <div class="card-body">

                        <form method="POST" action="#" id="idDoFormulario">
                            @csrf

                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>Descrição da obra</label>
                                    <input type="text" name="description_project" class="form-control"
                                        placeholder="Descrição da obra;">
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>Nº. obra ISPT</label>
                                    <input type="number" name="n_project_ispt" class="form-control"
                                        placeholder="Nº. obra ISPT&hellip;">
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>Responsável obra ISPT</label>
                                    <input type="text" name="responsible_project_ispt" class="form-control"
                                        placeholder="Responsável obra ISPT&hellip;">
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>Responsável obra Empresa</label>
                                    <input type="text" name="responsible_project_company" class="form-control"
                                        placeholder="Responsável obra cliente&hellip;">
                                </div>
                            </div>
                            <div class="row">

                                <div class="form-group col-sm-6" id="companyField">
                                    <label>Empresa</label>
                                    <select class="form-control" name="user_id" id="company_select">
                                        <option value="#">Selecione uma Empresa...</option>
                                        {{-- @foreach ($companies as $company)
                                            <option value="{{ $company->id }}">{{ $company->name }}</option>
                                        @endforeach --}}
                                    </select>
                                </div>

                                <div class="form-group col-sm-6" id="installationField" hidden>
                                    <label>Instalação</label>
                                    <select class="form-control" name="installation_id" id="installationSelect">

                                        <!-- As opções de instalação serão preenchidas dinamicamente -->
                                    </select>
                                </div>

                            </div>

                            <div class="row" id="new_company_div">

                                <div class="form-group col-sm-6">
                                    <label>Nova Instalacao :</label>
                                    <input type="text" id="new_company_name" class="form-control"
                                        name="new_company_name" placeholder="Digite o nome da nova empresa">
                                </div>

                                <div class="form-group col-sm-6">
                                    <label>Nova Localização</label>
                                    <input type="text" class="form-control" name="new_company_address"
                                        placeholder="Localização...">
                                </div>
                            </div>


                            <div class="form-group" id="localization_installation_client">
                                <label>Localização</label>
                                <input type="text" class="form-control" placeholder="Localização" readonly>
                            </div>


                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>Nº. de obra cliente</label>
                                    <input type="number" name="" class="form-control"
                                        placeholder="Nº. de obra cliente&hellip;">
                                </div>

                                <!-- Date -->
                                <div class="form-group col-sm-6">
                                    <label>Datas:</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="far fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                        <input name="date_started" type="datetime-local"
                                            class="form-control float-right">
                                    </div>
                                    <!-- /.input group -->
                                </div>

                            </div>
                            <!-- /.card-body -->

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

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

                </div>
                <input type="button" name="next" class="btn btn-primary next float-right" value="Próximo" />
                {{-- /.card card-primary --}}
            </fieldset>

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

                    <div class="card-body">
                        <div class="container">
                            <div class="card card-success collapsed-card">
                                <div class="card-header">
                                    <h3 class="card-title">Criar Equipamentos Manualmente</h3>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                                class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                    <!-- /.card-tools -->
                                </div>
                                <!-- /.card-header -->
                                <div class="card-body">
                                    <div class="row">
                                        <div class="form-group col-sm-6">
                                            <label>Nº ISPT</label>
                                            <input type="text" class="form-control" placeholder="Nº ISPT...">
                                        </div>
                                        <div class="form-group col-sm-6">
                                            <label>TAG</label>
                                            <input type="text" class="form-control" placeholder="TAG equipamento...">
                                        </div>
                                    </div>
                                </div>

                            </div>
                            {{-- card card-success collapsed-card --}}



                            {{-- <form action="{{ route('createEquipamentProject') }}" method="post"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="form-group">
                                    <label for="inputDocumento">Selecione um documento:</label>
                                    <input type="file" class="form-control-file" id="inputDocumento" name="documento"
                                        accept=".xlsx, .xls">
                                </div>
                            </form> --}}

                            <form action="{{ route('createEquipamentProject') }}" method="post"
                                enctype="multipart/form-data">
                                @csrf

                                <div class="row">
                                    <div class="form-group col-sm-6">
                                        <label for="exampleInputFile">Import Articulated</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="exampleInputFile"
                                                    name="documento" accept=".xlsx, .xls">
                                                <label class="custom-file-label" for="exampleInputFile">Choose
                                                    File</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <button type="submit" class="btn btn-primary">Enviar</button>
                                    </div>
                                </div>
                                {{-- ./row --}}

                            </form>
                            <div class="row">
                                <div class="col-sm-6"></div>
                                <div class="col-sm-6"><a id="btn-download-template" href="{{ route('download') }}"
                                        class="btn btn-info">Baixar
                                        Template</a></div>
                            </div>

                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Fabrica</th>
                                        <th>Tipo de Equipamento</th>
                                        <th>Tag</th>
                                        <th>Descricao Equipamento</th>
                                        <th>Numero de Serie</th>
                                        <th>Marca</th>
                                        <th>Modelo</th>
                                        <th>Editar</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if (Session::has('listValves'))
                                        @foreach (Session::get('listValves') as $valve)
                                            <tr>
                                                <td>{{ $valve->equipment_id }}</td>
                                                <td>{{ $valve->unit_id }}</td>
                                                <td>{{ $valve->equipment_type_id }}</td>
                                                <td>{{ $valve->equipment_tag }}</td>
                                                <td>{{ $valve->equipment_description }}</td>
                                                <td>{{ $valve->equipment_serial_number }}</td>
                                                <td>{{ $valve->equipment_brand }}</td>
                                                <td>{{ $valve->equipment_model }}</td>
                                                <td>Botoes Editar</td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>


                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <div class="float-right">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </div>
                <!-- ./Card card-Primary  -->

                <input type="button" name="previous" class="btn btn-primary previous float-left" value="Previous" />
                <input type="button" name="next" class="btn btn-primary next float-right" value="Próximo" />

            </fieldset>

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

                    <div class="card-body">

                        <table id="company-table" class="table  dataTable no-footer dtr-inline">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Logo</th>
                                    <th>Nome</th>
                                    <th>Nif</th>
                                    <th>Telefone</th>
                                    <th>Ações</th>
                                    <th>
                                        <button type="button" name="bulk_delete" id="bulk_delete"
                                            class="btn-danger-ispt btn-xs">Desativar</button>
                                        <button type="button" name="bulk_enable" id="bulk_enable"
                                            class="btn-success-ispt btn-xs d-none">Ativar</button>
                                        <input type="checkbox" style="margin-left: 10px;" id="checkAll" />
                                    </th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>

                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <div class="float-right">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </div>
                <!-- ./Card card-Primary  -->

                <input type="button" name="previous" class="btn btn-primary previous float-left"
                    value="Previous" />
                <input type="button" name="next" class="btn btn-primary next float-right" value="Próximo" />
            </fieldset>

        </div>
        {{-- /.Multiplos FieldSet --}}
    </div>
    <!-- /.row justify-content-center -->



    <script>
        $(document).ready(function() {

            var installationsData; // Esta variável irá armazenar as informações das instalações
            $('#company_select').change(function() {
                var user_id = $(this).val();

                if (user_id == '#') {
                    $('#installationField').attr('hidden', 'hidden');
                    $('#localization_installation_client').hide();
                    $('#new_company_div').hide();
                    return;
                }

                $.get('/api/installations?user_id=' + user_id, function(data) {

                    var select = $('#installationSelect');
                    select.empty();

                    // Adicione as opções fixas aqui
                    select.append('<option value="#">Selecione uma instalação...</option>');
                    select.append(
                        '<option value="new_install">Criar uma nova Instalacao ?</option>');

                    // Agora você pode adicionar suas opções dinâmicas.
                    $.each(data, function(index, installation) {

                        select.append('<option value="' + installation.installation_id +
                            '">' +
                            installation.installation_name + '</option>');
                    });
                    // Armazene os dados em installationsData
                    installationsData = data;

                    $('#installationField').removeAttr('hidden');
                });
            });
            // Adicione este código para lidar com a mudança na seleção da instalação
            $('#installationSelect').change(function() {
                if (this.value == 'new_install') {
                    $('#new_company_div').show();
                    $('#localization_installation_client').hide();
                    return;
                }
                $('#new_company_div').hide();
                $('#localization_installation_client').show();

                if (this.value == '#') {
                    $('#new_company_div').hide();
                    $('#localization_installation_client').hide();
                    return;
                }

                // Verifique se installationsData está definido
                if (installationsData) {
                    // Encontre a instalação selecionada nos dados da instalação
                    var selectedInstallation = installationsData.find(function(installation) {
                        return installation.installation_id == this.value;
                    }.bind(this));

                    if (selectedInstallation) {
                        // Preencha o valor do campo de endereço com o endereço da instalação selecionada
                        $('#localization_installation_client input').val(selectedInstallation.address);
                    }
                }
            });

            $('#localization_installation_client').hide();
            $('#new_company_div').hide();
        });
    </script>

    <script>
        // Atribua a URL ao atributo formaction do botão
        document.getElementById('btn-download-template').setAttribute('formaction', downloadUrl);

        (function() {
            const tabelaExcel1 = document.getElementById('tabelaExcel1');

            function handleFormSubmit(event) {
                event.preventDefault(); // Previne o comportamento padrão do formulário
                const inputFile = document.getElementById('inputDocumento').files[0];
                const reader = new FileReader();
                reader.readAsBinaryString(inputFile);
                reader.onload = function() {
                    const fileData = reader.result;
                    const workbook = XLSX.read(fileData, {
                        type: 'binary'
                    });
                    const worksheet1 = workbook.Sheets[workbook.SheetNames[0]];
                    const tableData1 = XLSX.utils.sheet_to_json(worksheet1);
                    const tabelaHtml1 = criarTabelaHtml(tableData1);
                    const tabelaExcel1 = document.getElementById('tabelaExcel1');
                    if (tabelaExcel1 !== null) {
                        tabelaExcel1.innerHTML = tabelaHtml1;
                    }
                };
            }

            function criarTabelaHtml(dados) {

                const colunasObj = dados[2];
                const colunasheader = Object.keys(colunasObj).map(key =>
                    colunasObj[key]);

                console.log(dados);

                const colunasHtml = colunasheader.map(coluna => `<th>${coluna}</th>`).join('');

                const colunas = Object.keys(dados[2]);

                const linhasHtml = dados
                    .slice(3)
                    .map(linha => {
                        const celulasHtml = colunas.map(coluna => {
                            const valor = linha[coluna] !== undefined ? linha[coluna] : 'NULL';
                            return `<td>${valor}</td>`;
                        }).join('');
                        return `<tr>${celulasHtml}</tr>`;
                    })
                    .join('');

                // console.log()
                return `
                    <table class="table table-bordered">
                      <thead>
                        <tr>${colunasHtml}</tr>
                      </thead>
                      <tbody>
                        ${linhasHtml}
                      </tbody>
                    </table>
                  `;
            }

            const form = document.querySelector('form');
            form.addEventListener('submit', handleFormSubmit);
        })();
    </script>

@endsection

{{-- Script ProgressBar --}}
@section('scripts')
    <script>
        //jQuery time
        var current_fs, next_fs, previous_fs; //fieldsets
        var left, opacity, scale; //fieldset properties which we will animate
        var animating; //flag to prevent quick multi-click glitches

        $(".next").click(function() {
            if (animating) return false;
            animating = true;

            current_fs = $(this).parent();
            next_fs = $(this).parent().next();

            $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

            current_fs.animate({
                opacity: 0
            }, 800, function() {
                current_fs.hide();
                next_fs.show();
                next_fs.css({
                    'opacity': 1
                });
                animating = false;
            });
        });

        $(".previous").click(function() {
            if (animating) return false;
            animating = true;

            current_fs = $(this).parent();
            previous_fs = $(this).parent().prev();

            $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

            current_fs.animate({
                opacity: 0
            }, 800, function() {
                current_fs.hide();
                previous_fs.show();
                previous_fs.css({
                    'opacity': 1
                });
                animating = false;
            });
        });
    </script>
@endsection