@extends('layouts.main')

@section('titulopagina', 'Cliente')



@section('content')
<script>
@if(Session::has('msg'))
toastr.options = {
    "closeButton": false,
    "progressBar": true
}
toastr.success("{{ session('msg') }}");
@endif
</script>

<div class="row">
    
    <div class="col-12">
        <div class="card">
            <form class="form" action="/cliente" method="POST" >
                @csrf
                <div class="card-header bg-primary">
                    <h3 class="card-title"><i class="fa-solid fa-user-plus"></i> Cadastro de Cliente</h3>
                </div>
                <div class="card-body">

                    <div class="row gx-3">
                        <!-- Dados Pessoais -->
                        <div class="col-12">
                            <div class="row gx-2">
                                <div class="col-12">
                                    <div class="row gx-2">
                                        <div class="col-5">
                                            <div class="mb-1">
                                                <label class="form-label">Nome do Cliente <spam class="text-danger">*</spam> </label>
                                                <input type="text" class="form-control form-control-sm"
                                                    name="nome_cliente" required>
                                            </div>
                                        </div>

                                        
                                        <div class="col-2">
                                            <div class="mb-1">
                                                <label class="form-label">CPF <spam class="text-danger">*</spam></label>
                                                <input type="text" class="form-control form-control-sm" id="cpf"
                                                    name="cpf" type="text" onkeyup="cpfCheck(this)" maxlength="18"
                                                    onkeydown="javascript: fMasc( this, mCPF );" required>
                                                <span id="cpfResponse"></span>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="mb-1">
                                                <label class="form-label">RG</label>
                                                <input type="text" class="form-control form-control-sm" id="rg"
                                                    name="rg">
                                            </div>
                                        </div>
                                        <div class="col-1">
                                            <div class="mb-1">
                                                <label class="form-label">Genero</label>
                                                <select class="form-select form-select-sm" id="genero" name="genero">
                                                    <option selected></option>
                                                    <option value="M">Masculino</option>
                                                    <option value="F">Feminino</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="mb-3">
                                                <label class="form-label">Dt Nascimento</label>
                                                <input type="date" class="form-control form-control-sm"
                                                    name="dt_nascimento">
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- End Dados Pessoais -->

                    </div>
                    <!-- Start Tabs Opcionais -->
                    <ul class="nav nav-tabs" id="myTab" role="tablist">

                        <!-- Seleção de Abas -->
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="endereco-tab" data-bs-toggle="tab"
                                data-bs-target="#endereco" type="button" role="tab" aria-controls="endereco"
                                aria-selected="false">Endereço</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="parentesco-tab" data-bs-toggle="tab"
                                data-bs-target="#parentesco" type="button" role="tab" aria-controls="parentesco"
                                aria-selected="false">Parentesco</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="contato-tab" data-bs-toggle="tab" data-bs-target="#contato"
                                type="button" role="tab" aria-controls="contato" aria-selected="false">Contatos</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="observacao-tab" data-bs-toggle="tab"
                                data-bs-target="#observacao" type="button" role="tab" aria-controls="observacao"
                                aria-selected="false">Observação</button>
                        </li>
                        
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="endereco" role="tabpanel"
                            aria-labelledby="endereco-tab">
                            <div class="row gx-2 mt-2">
                                <div class="col-2">
                                    <div class="mb-1">
                                        <label class="form-label">Tipo</label>
                                        <select class="form-select form-select-sm" id="tipo" name="tipo">
                                            <option selected></option>
                                            <option value="Rua">Rua</option>
                                            <option value="Avenida">Avenida</option>
                                            <option value="Travessa">Travessa</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-8">
                                    <div class="mb-1">
                                        <label class="form-label">Endereço</label>
                                        <input type="text" class="form-control form-control-sm" id="endereco"
                                            name="endereco">
                                    </div>
                                </div>
                                <div class="col-2">
                                    <div class="mb-1">
                                        <label class="form-label">Número</label>
                                        <input type="number" class="form-control form-control-sm" name="numero">
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="mb-1">
                                        <label class="form-label">Complemento</label>
                                        <input type="text" name="complemento" class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="mb-1">
                                        <label class="form-label">Bairro</label>
                                        <input type="text" class="form-control form-control-sm" name="bairro">
                                    </div>

                                </div>
                                <div class="col-3">
                                    <div class="mb-1">
                                        <label class="form-label">Cidade</label>
                                        <input type="text" class="form-control form-control-sm" name="cidade">
                                    </div>
                                </div>
                                <div class="col-2">
                                    <div class="mb-1">
                                        <label class="form-label">UF</label>
                                        <select class="form-select form-select-sm" name="uf"
                                            aria-label=".form-select-sm example">
                                            <option selected></option>
                                            <option value="AL">AL</option>
                                            <option value="PE">PE</option>
                                            <option value="PB">PB</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="parentesco" role="tabpanel" aria-labelledby="parentesco-tab">
                            <div class="row gx-2 mt-2">
                                <div class="col-6">
                                    <div class="mb-1">
                                        <label class="form-label">Nome do Pai</label>
                                        <input type="tel" class="form-control form-control-sm" name="nome_pai">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-1">
                                        <label class="form-label">Nome da Mãe</label>
                                        <input type="tel" class="form-control form-control-sm" name="nome_mae">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-1">
                                        <label class="form-label">Responsável</label>
                                        <input type="tel" class="form-control form-control-sm" name="nome_responsavel">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="contato" role="tabpanel" aria-labelledby="contato-tab">
                            <div class="row gx-2 mt-2">
                                <div class="col-6">
                                    <div class="mb-1">
                                        <label class="form-label">Telefone 1</label>
                                        <input type="tel" class="form-control form-control-sm" name="tel1" id="telefone1">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-1">
                                        <label class="form-label">Telefone 2</label>
                                        <input type="tel" class="form-control form-control-sm" name="tel2" id="telefone2">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-1">
                                        <label class="form-label">Celular</label>
                                        <input type="tel" class="form-control form-control-sm" name="celular" id="celular">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-4">
                                        <label class="form-label">E-mail</label>
                                        <input type="email" class="form-control form-control-sm" name="email">
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="observacao" role="tabpanel" aria-labelledby="observacao-tab">
                            <div class="col-12">
                                <div class="mb-4">

                                    <div class="input-group">

                                        <textarea style="padding: 5px;" name="obervacao" id="observecao" cols="100"
                                            rows="5"></textarea>

                                    </div>

                                </div>
                            </div>

                        </div>

                    </div>


                </div>
                <div class="card-footer">
                    <div class="d-flex gap-2 justify-content-end">
                        <button class="btn btn-primary btn-sm" type="submit">CADASTRAR</button>
                        <button class="btn btn-primary btn-sm" type="reset">LIMPAR</button>

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

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


@endsection

@section('js')