@extends('dashboard._theme_dashboard')

@section('content')
    <div class="container-fluid">
        <div class="d-sm-flex justify-content-between align-items-center mb-4">
            <h5 class="text-dark mb-0">Cadastro de equipamento | Torres</h5>
            <a class="btn btn-primary btn-sm d-none d-sm-inline-block" role="button" href="#" style="font-size: 16px;">
                <strong><span style="color: rgba(255, 255, 255, 0.5);">Imprimir</span></strong>
            </a>
        </div>
        <div class="row">
            <div class="col-3">
                <label class="form-label" for="client_type">Cliente</label>
                <input class="form-control" type="text" value="Nome do Cliente" disabled>
            </div>
            <div class="col-3">
                <label class="form-label" for="client_type">Situação do equipamento</label>
                <select name="client_type" id="client_type" class="form-select">
                    <option value="12" selected="">Ativo</option>
                    <option value="13">Inativo</option>
                </select>
            </div>
            <div class="col-6 d-flex flex-column justify-content-end">
                <div class="form-check">
                    <div class="checkbox">
                        <input type="checkbox" name="processo_externo" id="processo_externo"
                               class="form-check-input" value="1">
                        <label for="processo_externo">Equipamento fora do controle de coletas</label>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <h5 class="text-dark mb-4">Informações da cadastro</h5>
        <div class="row">
            <div class="col-6 mb-1">
                <label class="form-label" for="name">Equipamento</label>
                <input type="text" class="form-control" id="name">
            </div>
            <div class="col-6"></div>

            <div class="col-4 mb-1">
                <label class="form-label" for="client_type">
                    Marca <i class="fal fa-plus-circle" data-bs-toggle="offcanvas" data-bs-target="#novaMarca"
                             aria-controls="offcanvasRight"></i>
                </label>
                <select name="client_type" id="client_type" class="form-select">
                    <option value="12">Exemplo 1</option>
                    <option value="13">Exemplo 2</option>
                </select>
            </div>
            <div class="col-4 mb-1">
                <label class="form-label" for="client_type">
                    Modelo <i class="fal fa-plus-circle"></i>
                </label>
                <select name="client_type" id="client_type" class="form-select">
                    <option value="12">Exemplo 1</option>
                    <option value="13">Exemplo 2</option>
                </select>
            </div>
            <div class="col-4 mb-1">
                <label class="form-label" for="client_type">
                    Circuito <i class="fal fa-plus-circle"></i>
                </label>
                <select name="client_type" id="client_type" class="form-select">
                    <option value="12">Exemplo 1</option>
                    <option value="13">Exemplo 2</option>
                </select>
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="document2">Ano Fabricação</label>
                <input type="text" class="form-control" id="document2">
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="document3">Ano Reforma</label>
                <input type="text" class="form-control" id="document3">
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="document3">Volume</label>
                <input type="text" class="form-control" id="document3">
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="client_type">
                    Unidade Vol. <i class="fal fa-plus-circle"></i>
                </label>
                <select name="client_type" id="client_type" class="form-select">
                    <option value="12">Exemplo 1</option>
                    <option value="13">Exemplo 2</option>
                </select>
            </div>
            <div class="col-4 mb-1">
                <label class="form-label" for="client_type">
                    Material <i class="fal fa-plus-circle"></i>
                </label>
                <select name="client_type" id="client_type" class="form-select">
                    <option value="12">Exemplo 1</option>
                    <option value="13">Exemplo 2</option>
                </select>
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="document3">Carga Térm.</label>
                <input type="text" class="form-control" id="document3">
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="client_type">
                    Unidade Carga <i class="fal fa-plus-circle"></i>
                </label>
                <select name="client_type" id="client_type" class="form-select">
                    <option value="12">Exemplo 1</option>
                    <option value="13">Exemplo 2</option>
                </select>
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="document3">N° Trocadores</label>
                <input type="text" class="form-control" id="document3">
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="document3">Delta t</label>
                <div class="input-group flex-nowrap">
                    <input type="text" class="form-control" id="document3">
                    <span class="input-group-text" id="addon-wrapping">
                               <strong>°C</strong>
                            </span>
                </div>
            </div>
            <div class="col-4"></div>
            <div class="col-6 mb-1">
                <label class="form-label" for="name">Bomba Dosadora</label>
                <input type="text" class="form-control" id="name">
            </div>
            <div class="col-6"></div>
            <div class="col-2 mb-1">
                <label class="form-label" for="document3">Vazão (L/H)</label>
                <input type="text" class="form-control" id="document3">
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="document3">C. Pressão (BAR)</label>
                <input type="text" class="form-control" id="document3">
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="document3">Núm. Mult.</label>
                <input type="text" class="form-control" id="document3">
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="document3">Núm. Série</label>
                <input type="text" class="form-control" id="document3">
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="document3">Capacidade</label>
                <input type="text" class="form-control" id="document3">
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="client_type">
                    Unidade Cap. <i class="fal fa-plus-circle"></i>
                </label>
                <select name="client_type" id="client_type" class="form-select">
                    <option value="12">Exemplo 1</option>
                    <option value="13">Exemplo 2</option>
                </select>
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="document3">Vazão Circulação</label>
                <input type="text" class="form-control" id="document3">
            </div>
            <div class="col-2 mb-1">
                <label class="form-label" for="client_type">
                    Unidade Vazão <i class="fal fa-plus-circle"></i>
                </label>
                <select name="client_type" id="client_type" class="form-select">
                    <option value="12">Exemplo 1</option>
                    <option value="13">Exemplo 2</option>
                </select>
            </div>
            <div class="col-4 mb-1">
                <label class="form-label" for="client_type">
                    Água de alimentação <i class="fal fa-plus-circle"></i>
                </label>
                <select name="client_type" id="client_type" class="form-select">
                    <option value="12">Exemplo 1</option>
                    <option value="13">Exemplo 2</option>
                </select>
            </div>
            <div class="col-4 mb-1">
                <label class="form-label" for="client_type">
                    Propriedade <i class="fal fa-plus-circle"></i>
                </label>
                <select name="client_type" id="client_type" class="form-select">
                    <option value="12">Exemplo 1</option>
                    <option value="13">Exemplo 2</option>
                </select>
            </div>

        </div>
        <hr>
        <h5 class="text-dark mb-4">Regime de operação</h5>
        <div class="row">
            <div class="col-3 mb-1">
                <label class="form-label" for="name">Horas</label>
                <input type="text" class="form-control" id="name">
            </div>
            <div class="col-3 mb-1">
                <label class="form-label" for="name">Dias</label>
                <input type="text" class="form-control" id="name">
            </div>
            <div class="col-3 mb-1">
                <label class="form-label" for="name">Drenagem Recomendada</label>
                <input type="text" class="form-control" id="name">
            </div>
            <div class="col-3 mb-1">
                <label class="form-label" for="name">Unidade</label>
                <input type="text" class="form-control" id="name">
            </div>
        </div>
        <hr>
        <h5 class="text-dark mb-4">Observações</h5>
        <div class="row">
            <div class="col-12 mb-1">
                <textarea class="form-control" rows="3"></textarea>
            </div>
        </div>
        <hr>
        <h5 class="text-dark mb-4">Arquivos complementares</h5>
        <div class="row">
            <div class="col-4 mb-1">
                <label class="form-label" for="name">Nome do arquivo</label>
                <input type="text" class="form-control" id="name">
            </div>
            <div class="col-4 mb-1">
                <label class="form-label" for="name">Selecionar arquivo</label>
                <input type="file" class="form-control" id="name">
            </div>
            <div class="col-12 text-end">
                <button class="btn btn-primary">Adicionar</button>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div style="margin: 10px;"></div>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th style="font-size: 12px;">Nome do arquivo</th>
                            <th style="font-size: 12px;">Data Upload</th>
                            <th style="font-size: 12px;">Tamanho</th>
                            <th style="font-size: 12px;">Formato</th>
                            <th style="font-size: 12px;">Remover</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td style="font-size: 12px;">Exemplo</td>
                            <td style="font-size: 12px;">01/02/2024</td>
                            <td style="font-size: 12px;">15MB</td>
                            <td style="font-size: 12px;">PDF</td>
                            <td style="font-size: 12px;text-align: center;"><i class="fal fa-times"></i></td>
                        </tr>
                        <tr>
                            <td style="font-size: 12px;">Exemplo</td>
                            <td style="font-size: 12px;">01/02/2024</td>
                            <td style="font-size: 12px;">15MB</td>
                            <td style="font-size: 12px;">PDF</td>
                            <td style="font-size: 12px;text-align: center;"><i class="fal fa-times"></i></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12 text-end">
                <button class="btn btn-primary">Salvar</button>
            </div>
        </div>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="novaMarca" aria-labelledby="novaMarca">
        <div class="offcanvas-header">
            <h5 id="offcanvasRightLabel">Marcas</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="row">
                <div class="col-12 mb-1">
                    <label class="form-label" for="name">Marca</label>
                    <input type="text" class="form-control" id="name">
                </div>
                <div class="col-12 text-end mb-1">
                    <button class="btn btn-primary">Salvar</button>
                </div>
                <div class="col-12 mb-1">
                    <div class="table-responsive">
                        <table class="table text-center">
                            <thead>
                            <tr>
                                <th>Marca</th>
                                <th>Editar / Remover</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>Exemplo 1</td>
                                <td><i class="fal fa-edit"></i> <i class="fal fa-times"></i></td>
                            </tr>
                            <tr>
                                <td>Exemplo 2</td>
                                <td><i class="fal fa-edit"></i> <i class="fal fa-times"></i></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('customJS')
    <script>
        $(document).ready(function () {
            $("#sidebar_client").addClass("active");
            $("#collapseClients").addClass("show");
            $("#sub_client_new").addClass("active").addClass("text-primary");
        });
    </script>
@endsection