@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 | Águas Industriais</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">Água industrial 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-4 mb-1">
                <label class="form-label" for="name">Água Industrial</label>
                <input type="text" class="form-control" id="name">
            </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-4 mb-1">
                <label class="form-label" for="document3">Frequencia Coleta</label>
                <input type="text" class="form-control" id="document3">
            </div>
            <div class="col-4 mb-1">
                <label class="form-label" for="document3">Contador</label>
                <input type="text" class="form-control" id="document3">
            </div>
            <div class="col-4 mb-1">
                <label class="form-label" for="document3">Última Coleta</label>
                <input type="date" class="form-control" id="document3">
            </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">Listagem</h5>
        <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;">Água industrial</th>
                            <th style="font-size: 12px;">Coleta</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td style="font-size: 12px;">Água de reposição (Poço) 1</td>
                            <td style="font-size: 12px;">01/02/2024</td>
                        </tr>
                        <tr>
                            <td style="font-size: 12px;">Água de reposição (Poço) 2</td>
                            <td style="font-size: 12px;">01/02/2024</td>
                        </tr>
                        <tr>
                            <td style="font-size: 12px;">Água de reposição (Poço) 3</td>
                            <td style="font-size: 12px;">01/02/2024</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </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 d-flex flex-column justify-content-center 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