@extends('layouts.app')

@section('scripts')
    <script src="{{{ URL::asset('js/views/cadastro/colaborador.js?123456') }}}"></script>
@endsection

@section('titulo')
    COLABORADOR - {{ Auth::user()->Unidade->getNome() }}
@endsection

@section('pagina')

<div class="content-wrapper">
    <input type="hidden" id="hdnUsuario"    name="idusuario"    data="{{ Auth::user()->getId() }}"/>
    <input type="hidden" id="hdnId"         name="id"           data=""/>
    <input type="hidden" id="hdnIdOcor"     name="idocor"       data=""/>
    <input type="hidden" id="hdnDatao"     name="datao"         data=""/>

    
    <div class="container-fluid mt-2">
        @csrf
        <div id="cadastro" class="card mt-2" style="display: none; background-color:#fff; color:#056367; border-radius: 20px 20px 20px 20px;">
            
            <div class="card-body">
                <div class="row" style="padding-right: 2px;">
                    <div class="col-md-6">
                        <h5 style="color:#056367;"><i class="fas fa-user"></i> Dados do Colaborador</h5>
                    </div>
                    <div class="col-md-6">
                        <div class="col text-right">
                            <button id="btnVoltar" type="button" class="btn btn-secondary btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-arrow-left"></i> Voltar
                            </button>
                            <button id="btnSalvar" type="button" data="" class="btn btn-success btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-save"></i> Salvar
                            </button>
                            <button id="btnExcluir" type="button" data="" class="btn btn-danger btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-trash"></i> Excluir
                            </button>
                            <button id="btnNovo2" type="button" class="btn btn-primary btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-plus-circle"></i> Novo
                            </button>
                        </div>
                    </div>
                    
                </div>
                <hr></hr>
                <div class="row" >
                    
                    <div class="col-md-4">
                        <label id="txtNome_label" for="txtNome"  class="col-form-label text-md-left">Nome do Colaborador <span style="color: #ff0000;">*</span></label>
                        <input id="txtNome" class="form-control" name="nome" type="text" maxlength="50"  value="" title="Nome da merendeira"/>
                    </div>
                    <div class="col-md-2">
                        <label id="txtCelular_label" for="txtData"  class="col-form-label text-md-left">Celular</label>
                        <input id="txtCelular" class="form-control" name="data" type="text" maxlength="20"  value="" title="Celular"/>
                    </div>
                    <div class="col-md-3">
                        <label id="cbFuncao_label" for="txtUf" class="col-form-label text-md-left">Função <span style="color: #ff0000;">*</span></label>
                        <br/>
                        <select id="cbFuncao" class="form-control" required>
                            
                        </select>
                    </div> 
                    <div class="col-md-2">
                        <label id="txtCpf_label" for="txtData"  class="col-form-label text-md-left">CPF</label>
                        <input id="txtCpf" class="form-control" name="cpf" type="text" maxlength="14"  value="" title="CPF"/>
                    </div>
                    <div class="col-md-1">
                        <label id="txtAtivo_label" for="txtAtivo"  class="col-form-label text-md-left">Ativo?</label>
                        <br/>
                        <label class="switch">
                            <input id="cbAtivo"  type="checkbox" data-off-color="danger" data-on-text="1" data-off-text="0">
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>
                <div class="row" >
                    <div class="col-md-7">
                        <label id="txtNome_label" for="txtNome"  class="col-form-label text-md-left">Endereço</label>
                        <input id="txtEndereco" class="form-control" name="endereco" type="text" maxlength="50"  value="" title="Endereço"/>
                    </div>
                    <div class="col-md-1">
                        <label id="txtNome_label" for="txtNome"  class="col-form-label text-md-left">Nº</label>
                        <input id="txtNro" class="form-control" name="endereco" type="text" maxlength="10"  value="" title="Número"/>
                    </div>
                    <div class="col-md-4">
                        <label id="txtNome_label" for="txtNome"  class="col-form-label text-md-left">Bairro</label>
                        <input id="txtBairro" class="form-control" name="bairro" type="text" maxlength="50"  value="" title="Bairro"/>
                    </div>
                </div>
                <div class="row" >
                    <div class="col-md-5">
                        <label id="txtComplemento_label" for="txtComplemento"  class="col-form-label text-md-left">Complemento</label>
                        <input id="txtComplemento" class="form-control" name="endereco" type="text" maxlength="50"  value="" title="Complemento"/>
                    </div>
                    <div class="col-md-2">
                        <label id="txtCep_label" for="txtNro"  class="col-form-label text-md-left">CEP</label>
                        <input id="txtCep" class="form-control" name="cep" type="text" maxlength="10"  value="" title="CEP"/>
                    </div>
                    <div class="col-md-1">
                        <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="" title="UF"/>
                    </div>
                    <div class="col-md-4">
                        <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="50"  value="" title="Cidade"/>
                    </div>
                </div>
                <div class="row" >
                    
                    <div class="col-md-12">
                        <label id="txtObs_label" for="txtObs"  class="col-form-label text-md-left">Observação</label>
                        <textarea id="txtObs" name="txtObs" style="width: 100%" rows="4" maxlength="500"></textarea>
                    </div>
                </div>

                <br>
                <div class="row" >
                    <div class="col-md-4">
                        <div class="col text-left">
                            <label id="txtLegenda_label" for="txtLegenda"  ><span style="color: #ff0000;">( * )</span> Campos obrigatórios</label>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="col text-right">
                            <button id="btnVoltarB" type="button" class="btn btn-secondary btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-arrow-left"></i> Voltar
                            </button>

                            <button id="btnSalvarB" type="button" data="" class="btn btn-success btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-save"></i> Salvar
                            </button>

                            <button id="btnExcluirB" type="button" data="" class="btn btn-danger btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-trash"></i> Excluir
                            </button>

                            <button id="btnNovo3" type="button" class="btn btn-primary btn-redondo" aria-label="Left Align" >
                                <i class="fas fa-plus-circle"></i> Novo
                            </button>
                        </div>
                    </div>
                </div>

            </div>
            
        </div>

        <div id="historico" class="card mt-2" style="display: none; background-color:#fff; color:#056367; border-radius: 20px 20px 20px 20px;">
            
            <div class="card-body">

                <div class="row mt-2" >
                    <div class="col-md-6">
                        <div class="row mt-2" id="ocorrencia1">
                            <div class="col-md-3">
                                <label id="txtDatao_label" for="txtDatamov"  class="col-form-label text-md-left">Data <span style="color: #ff0000;">*</span></label>
                                <input id="txtDatao" class="form-control" name="datao" onKeyUp="mascara_data(this)" type="text" maxlength="10" value="" />
                            </div>
                            <div class="col-md-9">
                                <div class="col text-right">
                                    <!-- <label id="txtPesquisar_label" for="txtNome"  class="col-form-label text-md-left">&nbsp;</label><br> -->
                                    <button id="btnVoltarO" type="button" class="btn btn-secondary btn-redondo" aria-label="Left Align" >
                                        <i class="fas fa-arrow-left"></i> Fechar
                                    </button>

                                    <button id="btnSalvarO" type="button" data="" class="btn btn-success btn-redondo" aria-label="Left Align" >
                                        <i class="fas fa-save"></i> Salvar
                                    </button>

                                    <button id="btnExcluirO" type="button" data="" class="btn btn-danger btn-redondo" aria-label="Left Align" >
                                        <i class="fas fa-trash"></i> Excluir
                                    </button>

                                    <button id="btnNovoO" type="button" class="btn btn-primary btn-redondo" aria-label="Left Align" >
                                        <i class="fas fa-plus-circle"></i> Novo
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mt-2" id="ocorrencia2">
                            <div class="col-md-12">
                                <label id="txtObs_label" for="txtDoc"  class="col-form-label text-md-left">Ocorrência <span style="color: #ff0000;">*</span></label>
                                <textarea id="txtOcorrencia" name="txtObs" style="width: 100%" rows="4" maxlength="500"></textarea>
                            </div>
                        </div>
                        <div class="row mt-2" >
                            <div class="col panel panel-primary table-responsive">

                                <table id="tbOcorrencia" class="table table-striped table-bordered text-left ">
                                    <thead  style="background-color:#404040; color: #ffff00; font-weight: bold;">
                                        <tr>
                                            <th><i class="fas fa-comment fa-lg"></i> Ocorrências</th>
                                            <th>
                                                <div class="col text-right">
                                                    <button id="btnNovaOcorrencia" type="button" class="btn btn-primary btn-redondo" aria-label="left Align" title="Nova ocorrência">
                                                        <i class="fas fa-plus-circle"></i> Novo
                                                    </button>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        

                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                
                    <div class="col-md-6">
                        <div class="row mt-2" >
                            <div class="col panel panel-primary table-responsive">
                                <table id="tbFinanceiro" class="table table-striped table-bordered text-left ">
                                    <thead  style="background-color:#404040; color: #ffff00; font-weight: bold;">
                                        <tr>
                                            <th><i class="fas fa-calculator fa-lg"></i> Histórico Financeiro</th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody>
                                        

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="lista" class="card mt-2" style="background-color:#fff; color:#056367; border-radius: 20px 20px 20px 20px;">
            <div class="card-body">
                <div class="row" style="padding-bottom: 5px; padding-right: 2px;">
                    <div class="col-md-6">
                        <h5 style="color:#056367;"><i class="fas fa-user"></i> Colaborador</h5>
                    </div>
                </div>
                <div class="row" style="padding-bottom: 5px; padding-right: 2px;">
                    <div class="col-md-2">
                        <label id="txtPalavra_label" for="txtNome"  class="col-form-label text-md-left">Palavra chave <span style="color: #C0C0C0;">Enter</span></label>
                        <input id="txtPalavra" class="form-control" name="palavra" type="text" maxlength="50" value="" style="background-color: #ffffb3;" title="Digite palavra para buscar e dê [Enter]"/>
                    </div>
                    
                    <div class="col-md-2">
                        <label id="cbFuncao_label" for="txtUf" class="col-form-label text-md-left">Função </label>
                        <br/>
                        <select id="cbFuncaoSel" class="form-control" required>
                            
                        </select>
                    </div> 
                    
                    <div class="col-md-8 text-right">
                        <label id="txtPesquisar_label" for="txtNome"  class="col-form-label text-md-left">&nbsp;</label><br>
                        <button id="btnPesquisar" type="button" class="btn btn-secondary btn-redondo" aria-label="Left Align" >
                            <i class="fas fa-search"></i> Pesquisar
                        </button>
                        <button id="btnNovo" type="button" class="btn btn-primary btn-redondo" aria-label="Left Align" >
                            <i class="fas fa-plus-circle"></i> Novo
                        </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 do Colaborador</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                

                            </tbody>
                        </table>

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

<script>

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

    function mascara_hora(campo) {
        if (campo.value.length == 2) {
            campo.value += ':';
        }
    }

    function mascara_letra(campo) {
        if (campo.value == '-') {
            campo.value += '';
        }
        if (campo.value == '=') {
            campo.value += '';
        }
    
    }

</script>

@endsection