<?php $__env->startSection('scripts'); ?>
    <script src="<?php echo e(URL::asset('js/views/cadastro/pessoa.js')); ?>"></script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('pagina'); ?>
    
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {font-family: Arial;}

        /* Style the tab */
        .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #fff;
        }

        /* Style the buttons inside the tab */
        .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        height: 40px;
        cursor: pointer;
        padding: 14px 16px;
        radius: 5px;
        transition: 0.3s;
        font-size: 12px;
        }

        /* Change background color of buttons on hover */
        .tab button:hover {
        background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
        background-color: #F98C3A;
        }

        /* Style the tab content */
        .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
        }
    </style>
</head>

<div class="content-wrapper">
    <input type="hidden" id="hdnUsuario" name="usuario" data="<?php echo e(Auth::user()->getId()); ?>"/>
    
    <div class="container-fluid mt-2">
        <?php if(session('mensagem')): ?>
            <?php if(session('mensagem')): ?>
                <div id="mensagem" class=" card-body alert alert-success text-center">
                    <i><?php echo e(session('mensagem')); ?></i>
                </div>
            <?php endif; ?>
        <?php elseif(session('exclusao')): ?>
            <?php if(session('exclusao')): ?>
                <div id="exclusao" class=" card-body alert alert-danger text-center">
                    <i><?php echo e(session('exclusao')); ?></i>
                </div>
            <?php endif; ?>
        <?php endif; ?>
        <div id="filtro" class="card mt-2" style="display: none; background-color:#fff; color:#056367; border-radius: 20px 0px 20px 0px;">
            <div class="card-body">
                <div class="row"  style="padding-right: 2px;">
                    <div class="col col-sm-4 col-12 text-left">
                        <label id="txtDescricao_label" for="txtPalavra"  class="col-form-label text-md-left">Busca Palavra</label>
                        <input id="txtPalavra" class="form-control" name="palavra" type="text" maxlength="50" value=""/>
                    </div>
                    <div class="col col-sm-8 col-12 text-right">
                        <label for="btnPesquisar" class="col-form-label text-md-left">&nbsp;</label>
                        <br/>
                        <button id="btnPesquisar" type="button" class="btn btn-outline-secondary" aria-label="Left Align" >
                            <i class="fas fa-search"></i> Pesquisar
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="cadastro" class="card mt-2" style="display: none; background-color:#fff; color:#056367; border-radius: 20px 0px 20px 0px;">
            <form method="POST" action="<?php echo e(route('cadastro.pessoa.salvar')); ?>">
            <?php echo csrf_field(); ?>
            <input type="hidden" id="hdnId" name="id" data=""/>
            <input type="hidden" id="hdnUnidade" name="unidade" data="<?php echo e(Auth::user()->getUnidade()); ?>"/>
            <div class="card-body">
                <div class="row" style="padding-right: 2px;">
                    <div class="col-md-6">
                        <h4 style="color:#056367;"><i class="fas fa-user-tie"></i> Pessoa</h4>
                    </div>
                    <div class="col-md-6">
                        <div class="col text-right">
                            <button id="btnVoltar" type="button" class="btn btn-outline-secondary" aria-label="Left Align" >
                                <i class="fas fa-arrow-left"></i> Voltar
                            </button>

                            <button id="btnSalvar" type="submit" class="btn btn-success" aria-label="Left Align" >
                            <i class="far fa-save"></i> Salvar
                            </button>
                            
                            <button id="btnExcluir" type="button" data="" class="btn btn-outline-danger" aria-label="Left Align" >
                                <i class="fas fa-trash-alt"></i> Excluir
                            </button>
                            
                        </div>
                    </div>
                    
                </div>
                

                <!-- <div class="tab">
                    <button id="btnTab1" class="tablinks" onclick="openTab(event, 'tab1')">Básico</button>
                    <button class="tablinks" onclick="openTab(event, 'tab2')">Pessoal</button>
                    <button class="tablinks" onclick="openTab(event, 'tab3')">Doc.</button>
                    <button class="tablinks" onclick="openTab(event, 'tab4')">Outras</button>
                </div> -->

                <ul class="nav nav-tabs nav-pills" id="myTab" role="tablist">
                    <li class="nav-item waves-effect waves-light">
                        <a class="nav-link active" id="tab-tab1" style="font-size: 12px;" data-toggle="tab" href="#tab1" role="tab" aria-controls="home" aria-selected="false">Básico</a>
                    </li>
                    <li class="nav-item waves-effect waves-light">
                        <a class="nav-link" id="tab-tab2" style="font-size: 12px;" data-toggle="tab" href="#tab2" role="tab" aria-controls="profile" aria-selected="false">Pessoal</a>
                    </li>
                    <li class="nav-item waves-effect waves-light">
                        <a class="nav-link " id="tab-tab3" style="font-size: 12px;" data-toggle="tab" href="#tab3" role="tab" aria-controls="contact" aria-selected="true">Profissional</a>
                    </li>
                </ul>


                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade" id="tab1" role="tabpanel" aria-labelledby="home-tab">
                        <div class="row" >
                            
                            <div class="col-md-6 col-12">
                                <label id="txtNome_label" for="txtNome"  class="col-form-label text-md-left">Nome</label>
                                <input id="txtNome" class="form-control" name="nome" type="text" maxlength="50" value="" required/>
                            </div>
                            
                            <div class="col-md-3 col-12">
                                <label id="txtFone_label" for="txtFone"  class="col-form-label text-md-left">Fone</label>
                                <input id="txtFone" class="form-control" name="fone" type="text" maxlength="20" value="" />
                            </div>
                            <div class="col-md-3 col-12">
                                <label id="txtCelular_label" for="txtCelular"  class="col-form-label text-md-left">Celular</label>
                                <input id="txtCelular" class="form-control" name="celular" type="text" maxlength="20" value="" />
                            </div>

                        </div>

                        <div class="row" >
                            <div class="col-md-6 col-12">
                                <label id="txtEmail_label" for="txtEmail"  class="col-form-label text-md-left">Email</label>
                                <input id="txtEmail" class="form-control" name="email" type="text" maxlength="50" value="" />
                            </div>
                            <div class="col-md-4 col-12">
                                <label id="txtRepres_label" for="txtRepres"  class="col-form-label text-md-left">Representante</label>
                                <input id="txtRepresentante" class="form-control" name="representante" type="text" maxlength="50" value="" />
                            </div>
                            <div class="col col-md-2 col-12">
                                <label for="cbTipo" class="col-form-label text-md-left">Tipo Pessoa</label>
                                <br/>
                                <select id="cbTipo" class="form-control" name="tipopessoa" required>
                                    <option value="F">FÍSICA</option>
                                    <option value="J">JURÍDICA</option>
                                </select>
                            </div>
                        </div>

                        <div class="row" >
                            <div class="col-md-6 col-12">
                                <label id="txtPalavraCh_label" for="txtEmail"  class="col-form-label text-md-left">Palavra Chave</label>
                                <textarea id="txtPalavraChave" class="form-control" rows = "3" name = "palavrachave" value="" maxlength="100"></textarea>
                            </div>
                            <div class="col-md-6 col-12">
                                <label id="txtObs_label" for="txtEmail"  class="col-form-label text-md-left">Observação</label>
                                <textarea id="txtObs" class="form-control" rows = "3" name = "obs" value="" maxlength="500"></textarea>
                            </div>
                        </div>


                    </div>
                

                    <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="home-tab">
                        <div class="row">

                            <div class="col col-md-2 col-12">
                                <label for="cbGenero" class="col-form-label text-md-left">Gênero</label>
                                <br/>
                                <select id="cbGenero" class="form-control" name="genero" >
                                    <option value="F">FEMININO</option>
                                    <option value="M">MASCULINO</option>
                                    <option value="N">NÃO SE APLICA (PJ)</option>
                                </select>
                            </div>
                            <div class="col col-md-2 col-12">
                                <label for="cbEstCivil" class="col-form-label text-md-left">Estado Civil</label>
                                <br/>
                                <select id="cbEstCivil" class="form-control" name="estcivil" >
                                    <option value="C">CASADO(A)</option>
                                    <option value="D">DIVORCIADO(A)</option>
                                    <option value="S">SOLTEIRO(A)</option>
                                    <option value="U">UNIÃO ESTÁVEL</option>
                                    <option value="V">VIUVO(A)</option>
                                    <option value="N">NÃO SE APLICA (PJ)</option>
                                </select>
                            </div>
                            <div class="col-md-2 col-12">
                                <label id="txtNascim_label" for="txtNascim"  class="col-form-label text-md-left">Data Nascim</label>
                                <input id="txtNascim" class="form-control" name="nascim" type="text" onKeyUp="mascara_data(this)" maxlength="10" value="" />
                            </div>
                            <div class="col-md-3 col-12">
                                <label id="txtMae_label" for="txtMae"  class="col-form-label text-md-left">Mãe</label>
                                <input id="txtMae" class="form-control" name="mae" type="text" maxlength="50" value="" />
                            </div>
                            <div class="col-md-3 col-12">
                                <label id="txtPai_label" for="txtPai"  class="col-form-label text-md-left">Pai</label>
                                <input id="txtPai" class="form-control" name="pai" type="text" maxlength="50" value="" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-12">
                                <label id="txtEndereco_label" for="txtEndereco"  class="col-form-label text-md-left">Endereço</label>
                                <input id="txtEndereco" class="form-control" name="endereco" type="text" maxlength="50" value="" />
                            </div>
                            <div class="col-md-1 col-3">
                                <label id="txtNro_label" for="txtNro"  class="col-form-label text-md-left">Nro</label>
                                <input id="txtNro" class="form-control" name="endereco" type="text" maxlength="10" value="" />
                            </div>
                            <div class="col-md-5 col-9">
                                <label id="txtComplem_label" for="txtComplem"  class="col-form-label text-md-left">Complemento</label>
                                <input id="txtComplemento" class="form-control" name="endereco" type="text" maxlength="50" value="" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4 col-7">
                                <label id="txtBairro_label" for="txtBairro"  class="col-form-label text-md-left">Bairro</label>
                                <input id="txtBairro" class="form-control" name="bairro" type="text" maxlength="50" value="" />
                            </div>
                            <div class="col-md-2 col-5">
                                <label id="txtCep_label" for="txtComplem"  class="col-form-label text-md-left">CEP</label>
                                <input id="txtCep" class="form-control" name="cep" type="text" maxlength="10" value="" />
                            </div>
                            <div class="col col-md-5 col-9">
                                <label id="txtCidade_label" for="txtCIDADE"  class="col-form-label text-md-left">Cidade</label>
                                <input id="txtCidade" class="form-control" name="cidade" type="text" maxlength="30" value="" />
                            </div>
                            <div class="col col-md-1 col-3">
                                <label id="txtUf_label" for="txtUf"  class="col-form-label text-md-left">UF</label>
                                <input id="txtUf" class="form-control" name="uf" type="text" maxlength="2" value="" />
                            </div>

                        </div>

                    </div>

                    <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="home-tab">
                        <div class="row" >
                            <div class="col-md-3 col-12">
                                <label id="txtCpf_label" for="txtCpf"  class="col-form-label text-md-left">CPF/CNPJ</label>
                                <input id="txtCpf" class="form-control" name="descricao" type="text" maxlength="20" value="" />
                            </div>
                            <div class="col-md-3 col-12">
                                <label id="txtRG_label" for="txtRg"  class="col-form-label text-md-left">RG</label>
                                <input id="txtRg" class="form-control" name="rg" type="text" maxlength="50" value="" />
                            </div>
                            <div class="col-md-3 col-12">
                                <label id="txtCtps_label" for="txtCtps"  class="col-form-label text-md-left">CTPS</label>
                                <input id="txtCtps" class="form-control" name="ctps" type="text" maxlength="50" value="" />
                            </div>
                            <div class="col-md-3 col-12">
                                <label id="txtPis_label" for="txtCpf"  class="col-form-label text-md-left">PIS/PASEP</label>
                                <input id="txtPispasep" class="form-control" name="pis" type="text" maxlength="50" value="" />
                            </div>
                        </div>
                        <div class="row" >
                            <div class="col-md-3 col-12">
                                <label id="txtPassaporte_label" for="txtPassaporte"  class="col-form-label text-md-left">Passaporte</label>
                                <input id="txtPassaporte" class="form-control" name="passaporte" type="text" maxlength="50" value="" />
                            </div>
                            <div class="col-md-3 col-12">
                                <label id="txtCnh_label" for="txtCnh"  class="col-form-label text-md-left">CNH</label>
                                <input id="txtCnh" class="form-control" name="cnh" type="text" maxlength="50" value="" />
                            </div>
                            <div class="col-md-3 col-12">
                                <label id="txtOab_label" for="txtRg"  class="col-form-label text-md-left">OAB</label>
                                <input id="txtOab" class="form-control" name="oab" type="text" maxlength="20" value="" />
                            </div>
                        </div>
                        <div class="row" >
                            <div class="col-md-4 col-12">
                                <label id="txtEmpresa_label" for="txtEmpresa"  class="col-form-label text-md-left">Empresa</label>
                                <input id="txtEmpresa" class="form-control" name="empresa" type="text" maxlength="50" value="" />
                            </div>
                            <div class="col-md-4 col-12">
                                <label id="txtProfisao_label" for="txtCnh"  class="col-form-label text-md-left">Profissão</label>
                                <input id="txtProfissao" class="form-control" name="profissao" type="text" maxlength="50" value="" />
                            </div>
                            <div class="col-md-4 col-12">
                                <label id="txtQualificacao_label" for="txtRg"  class="col-form-label text-md-left">Qualificação</label>
                                <input id="txtQualificacao" class="form-control" name="qualificacao" type="text" maxlength="50" value="" />
                            </div>
                        </div>

                    </div>

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

        <div id="lista" class="card mt-2" style="background-color:#fff; color:#056367; border-radius: 20px 0px 20px 0px;">
            <div class="card-body">
                <div class="row" style="padding-bottom: 5px; padding-right: 2px;">
                    <div class="col-md-6">
                        <h4 style="color:#056367;"><i class="fas fa-user-tie"></i> Pessoa</h4>
                    </div>
                    <div class="col-md-6 text-right">
                        <button id="btnFiltro" type="button" class="btn btn-outline-secondary" aria-label="Left Align" >
                            <i class="fas fa-filter"></i> Filtro
                        </button>
                        <button id="btnLimpaFiltro" type="button" class="btn btn-outline-warning" aria-label="Left Align" >
                            <i class="fas fa-filter"></i> Limpa Filtro
                        </button>
                        <button id="btnNovo" type="button" class="btn btn-outline-primary" aria-label="Left Align" >
                            <i class="fas fa-plus-circle"></i> Nova Pessoa
                        </button>
                    </div>
                    
                </div>
                <div class="row" >
                    <div class="col panel panel-primary table-responsive">

                        <table id="tbPessoa" class="table table-striped table-bordered text-left ">
                            <thead  style="background-color:#404040; color: #ccc; font-weight: bold;">
                                <tr>
                                    <th>Dados da Pessoa</th>
                                    
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>

                                

                            </tbody>
                        </table>

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

<script>
    /* function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
    } */

    function mascara_data(campo) {
        if (campo.value.length == 2) {
            campo.value += '-';
        }
        if (campo.value.length == 5) {
            campo.value += '-';
        }
    }
</script>


    <?php echo $__env->make('partials._modal_delete',
    [
        'rota'=>'cadastro.pessoa.delete',
        'titulo'=>'Confirma Exclusão',
        'mensagem_delete'=>'Tem certeza que deseja excluir a Pessoa?'
    ], \Illuminate\Support\Arr::except(get_defined_vars(), array('__data', '__path')))->render(); ?>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), array('__data', '__path')))->render(); ?>