@extends('Templates/templateAdmin')

@section('Main-content')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Gestão de ativos</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item active">Portefólio</li>
                            <li class="breadcrumb-item active">Gerir ativos</li>
                        </ol>
                    </div><!-- /.col -->
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <!-- Card box criar instalção -->
                <form>
                    <div class="card card-primary collapsed-card">
                        <div class="card-header">
                            <h3 class="card-title">Instalações</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">
                            <!-- Card box inserir nova instalação-->
                            <div class="card card-primary collapsed-card">
                                <div class="card-header">
                                    <h3 class="card-title">Inserir nova instalação</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="form-group">
                                        <label>Instalação</label>
                                        <input type="text" class="form-control" placeholder="Instalação&hellip;">
                                    </div>
                                    <div class="form-group">
                                        <label>Fábrica</label>
                                        <input type="text" class="form-control" placeholder="Fábrica&hellip;">
                                    </div>
                                    <div class="form-group">
                                        <label>Localização</label>
                                        <input type="text" class="form-control" placeholder="Localização&hellip;">
                                    </div>
                                </div>
                                <!-- /.card-body -->
                                <div class="card-footer">
                                    <div class="float-right">
                                        <button type="submit" class="btn btn-primary">Criar</button>
                                    </div>
                                </div>
                            </div>
                            <!-- Table Clientes-->
                            <div class="table-responsive">
                                <table id="example2" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Instalação</th>
                                            <th>Fábrica</th>
                                            <th>Cliente</th>
                                            <th>Editar</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($units as $unit)
                                            <tr>
                                                <td>{{ $unit->unit_name }}</td>
                                                <td>{{ $unit->plant_name }}</td>
                                                <td>{{ $unit->user_name }}</td>

                                                <td class="text-center d-flex justify-content-around">
                                                    <a href="#" data-toggle="modal"
                                                        data-target="#modal-edit-instalacao">
                                                        <i class="fa-solid fa-edit text-primary"></i>
                                                    </a>
                                                    <a href="#" data-toggle="modal" data-target="#modal-remover"><i
                                                            class="fa-solid fa-trash-alt text-danger"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.tabela-->
                        </div>
                    </div>
                    <!-- /.card -->
                </form>
                <!-- /.Card box criar instalção -->


                <!-- Card box criar equipamentos -->
                <form>
                    <div class="card card-primary collapsed-card">
                        <div class="card-header">
                            <h3 class="card-title">Equipamentos</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">
                            <!-- Card box inserir novo equipamento-->
                            <div class="card card-primary collapsed-card">
                                <div class="card-header">
                                    <h3 class="card-title">Inserir novo equipamento</h3>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                                class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <!-- select -->
                                    <div class="form-group">
                                        <label>Selecionar instalação</label>
                                        <select class="form-control">
                                            <option hidden>Selecionar instalação&hellip;</option>
                                            <option>Instalação A</option>
                                            <option>Instalação B</option>
                                            <option>Instalação C</option>
                                            <option>Instalação D</option>
                                            <option>Instalação E</option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label>Selecionar tipo de equipamento</label>
                                        <select id="equipament-list" class="form-control">
                                            <option>Selecionar tipo de equipamento&hellip;</option>
                                            <option value="psv">PSV</option>
                                            <option value="isolation">Válvula de isolamento</option>
                                            <option value="control">Válvula de controlo</option>
                                        </select>
                                    </div>

                                    <!-- general form elements disabled -->
                                    <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="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Equipamento associado</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Equipamento associado&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Serviço associado</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Serviço associado&hellip;">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>TAG</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="TAG&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Fabricante</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Fabricante&hellip;">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Número de série</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Número de série&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Modelo</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Modelo&hellip;">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>DN</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="DN&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>PN</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="PN&hellip;">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- /.card-body -->
                                    </div>

                                    <!-- general form elements disabled -->
                                    <div id="isolation-card" class="card card-secondary">
                                        <div class="card-header">
                                            <h3 class="card-title">Válvula de isolamento</h3>
                                        </div>
                                        <!-- /.card-header -->
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Equipamento associado</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Equipamento associado&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Serviço associado</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Serviço associado&hellip;">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>TAG</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="TAG&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Fabricante</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Fabricante&hellip;">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Número de série</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Número de série&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Modelo</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Modelo&hellip;">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>DN</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="DN&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>PN</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="PN&hellip;">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- /.card-body -->
                                    </div>
                                    <!-- general form elements disabled -->
                                    <div id="control-card" class="card card-secondary">
                                        <div class="card-header">
                                            <h3 class="card-title">Válvula de controlo</h3>
                                        </div>
                                        <!-- /.card-header -->
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Equipamento associado</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Equipamento associado&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Serviço associado</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Serviço associado&hellip;">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>TAG da válvula</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="TAG da válvula&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Fabricante da válvula</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Fabricante da válvula&hellip;">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Modelo da válvula</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Modelo da válvula&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>N.º de série da válvula</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="N.º de série da válvula&hellip;">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>DN</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="DN&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>PN</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="PN&hellip;">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <label>Fabricante do atuador</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Fabricante do atuador&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <label>Modelo do atuador</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Modelo do atuador&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <label>N.º de série do atuador</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="N.º de série do atuador&hellip;">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>Fabricante do posicionador</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Fabricante do posicionador&hellip;">
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label>N.º de série do posicionador</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="N.º de série do posicionador&hellip;">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="exampleInputFile">Importar Equipamentos</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="exampleInputFile">
                                                <label class="custom-file-label" for="exampleInputFile">Escolher
                                                    ficheiro</label>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                                <!-- /.card-body -->
                                <div class="card-footer">
                                    <div class="float-right">
                                        <button type="submit" class="btn btn-primary">Criar</button>
                                    </div>
                                </div>
                            </div>

                            <!-- Table Equipamentos-->
                            <div class="card-body table-responsive p-0">
                                <table class="table table-hover text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>ID equipamento</th>
                                            <th>tag</th>
                                            <th>Fabrica</th>
                                            <th>Tipo equipamento</th>
                                            <th>Descricao equipamento</th>
                                            <th>Numero de Serie </th>
                                            <th>Marca</th>
                                            <th>Modelo</th>
                                            <th>Activo</th>
                                            <th>Edicao</th>
                                        </tr>
                                    </thead>
                                    {{-- <tbody>
                                        @foreach ($equipaments as $equipament)
                                            <tr>
                                                <td>{{ $equipament->equipment_id }}</td>
                                                <td>{{ $equipament->tag }}</td>
                                                <td>{{ $equipament->factories_name }}</td>
                                                <td>{{ $equipament->equipment_type_name }}</td>
                                                <td>{{ $equipament->equipment_description }}</td>
                                                <td>{{ $equipament->serial_number }}</td>
                                                <td>{{ $equipament->brand }}</td>
                                                <td>{{ $equipament->model }}</td>
                                                <td>{{ $equipament->Is_active }}</td>

                                                <td class="text-center d-flex justify-content-around">
                                                    <a href="{{ route('showUnit', ['id' => $equipament->equipment_id]) }}">
                                                        <i class="fa-solid fa-eye text-secondary"></i>
                                                    </a>
                                                    <a href="#" data-toggle="modal" data-target="#modal-edit-psv">
                                                        <i class=" fa-solid fa-edit text-primary"></i>
                                                    </a>
                                                    <a href="#" data-toggle="modal" data-target="#modal-remover"><i
                                                            class="fa-solid fa-trash-alt text-danger"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody> --}}
                                </table>
                            </div>
                            <!-- /.tabela-->

                        </div>
                    </div>
                </form>
                <!-- /.card -->
                <!-- /.Card box criar equipamentos -->
            </div>
        </section>

        <!-- modal instalacao -->
        <div class="modal fade" id="modal-edit-instalacao">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h4 class="modal-title">Editar instalações</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Articulado de obra -->
                        <div class="form-group">
                            <label>Instalação</label>
                            <input type="text" class="form-control" placeholder="Instalação&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Fábrica</label>
                            <input type="text" class="form-control" placeholder="Fábrica&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Localização</label>
                            <input type="text" class="form-control" placeholder="Localização&hellip;">
                        </div>
                        <!--/Articulado de obra-->
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal instalacao-->

        <!-- modal psv-->
        <div class="modal fade" id="modal-edit-psv">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h4 class="modal-title">Editar PSV</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Articulado de obra -->
                        <div class="form-group">
                            <label>TAG</label>
                            <input type="text" class="form-control" placeholder="TAG&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Nº série</label>
                            <input type="text" class="form-control" placeholder="Nº série&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Fabricante</label>
                            <input type="text" class="form-control" placeholder="Fabricante&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Modelo</label>
                            <input type="text" class="form-control" placeholder="Modelo&hellip;">
                        </div>
                        <!-- /.card-body -->
                        <!--/Articulado de obra-->
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal psv -->

        <!-- modal isv -->
        <div class="modal fade" id="modal-edit-isv">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h4 class="modal-title">Editar Válvula de Isolamento</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Articulado de obra -->
                        <div class="form-group">
                            <label>TAG</label>
                            <input type="text" class="form-control" placeholder="TAG&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Nº série</label>
                            <input type="text" class="form-control" placeholder="Nº série&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Fabricante</label>
                            <input type="text" class="form-control" placeholder="Fabricante&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Modelo</label>
                            <input type="text" class="form-control" placeholder="Modelo&hellip;">
                        </div>
                        <!-- /.card-body -->
                        <div class="card-footer">
                            <div class="float-right">

                            </div>
                        </div>
                        <!--/Articulado de obra-->
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal isv-->

        <!-- modal cv-->
        <div class="modal fade" id="modal-edit-cv">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h4 class="modal-title">Editar Válvula de controlo</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Articulado de obra -->
                        <div class="form-group">
                            <label>TAG válvula</label>
                            <input type="text" class="form-control" placeholder="TAG válvula&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Nº série válvula</label>
                            <input type="text" class="form-control" placeholder="Nº série válvula&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Fabricante válvula</label>
                            <input type="text" class="form-control" placeholder="Fabricante válvula&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Modelo válvula</label>
                            <input type="text" class="form-control" placeholder="Modelo válvula&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Fabricante atuador</label>
                            <input type="text" class="form-control" placeholder="Fabricante atuador&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Modelo atuador</label>
                            <input type="text" class="form-control" placeholder="Modelo atuador&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Nº série atuador</label>
                            <input type="text" class="form-control" placeholder="Nº série atuador&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Fabricante posicionador</label>
                            <input type="text" class="form-control" placeholder="Fabricante posicionador&hellip;">
                        </div>
                        <div class="form-group">
                            <label>Nº série posicionador</label>
                            <input type="text" class="form-control" placeholder="Nº série posicionador&hellip;">
                        </div>
                        <!-- /.card-body -->
                        <!--/.Articulado de obra-->
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal cv-->

        <!-- modal Remover -->
        <div class="modal fade" id="modal-remover">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h4 class="modal-title">Remover</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">x</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Deseja realmente remover?</p>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                        <button type="submit" class="btn btn-danger">Remover</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal remover-->

    </div>
@endsection