{% set area = 'rh' %}
{% extends "theme/base.twig" %}
{% block JSfiles %}
    {{ parent() }}
    <script src="/assets/plugins/jquery/js/jquery.datatables1.10.19.js"></script>
    <script src="/assets/plugins/jquery/js/dataTables.bootstrap4.min.js"></script>
    <script src="/assets/plugins/bootstrap-wizard/bootstrap.wizard.js" type="text/javascript"></script>
    <script src="/assets/plugins/daterangepicker/daterangepicker.js?v=14"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
    <script src="{{ base_url() }}/assets/plugins/datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="{{ base_url() }}/assets/plugins/daterangepicker/daterangepicker.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

    <script src="{{ base_url() }}/assets/plugins/datepicker/locales/bootstrap-datepicker.pt-BR.min.js" charset="UTF-8"></script>
    <script src="/assets/js/local/ponto_folha_registros_fechamento_res_form.js?v=14"></script>
{% endblock %}
{% block title %}
    Folha de Ponto
{% endblock %}
{% block CSSfiles %}
    {{ parent() }}
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
    <link href='{{ base_url() }}/assets/plugins/datepicker/css/bootstrap-datepicker.min.css' rel='stylesheet'>
    <link href='{{ base_url() }}/assets/plugins/bootstrap/css/dataTables.bootstrap4.min.css' rel='stylesheet' type='text/css'>
    <link href="/assets/plugins/bootstrap-wizard/bootstrap.wizard.css" rel="stylesheet" type="text/css">
    <link href='/assets/plugins/daterangepicker/daterangepicker.css?v={{ JSversion }}' rel='stylesheet' type='text/css'>
    <style>
        @import "bourbon";
            .label-float{
            position: relative;
            padding-top: 13px;
        }

        .label-float input[type=text]{
            border: 0;
            border-bottom: 2px solid lightgrey;
            outline: none;
            min-width: 300px;
            font-size: 16px;
            transition: all .3s ease-out;
            -webkit-transition: all .3s ease-out;
            -moz-transition: all .3s ease-out;
            
            border-radius:0;
        }

        .label-float input[type=text]:focus{
            border-bottom: 2px solid #3951b2;
        }

        .label-float input[type=text]:placeholder{
            color:transparent;
        }

        .label-float label{
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            margin-top: 13px;
            transition: all .3s ease-out;
            -webkit-transition: all .3s ease-out;
            -moz-transition: all .3s ease-out;
        }

        .label-float input[type=text]:required:invalid + label{
            color: red;
        }
        .label-float input[type=text]:focus:required:invalid{
            border-bottom: 2px solid red;
        }
        .label-float input:required:invalid + label:before{
            content: '*';
        }
        .label-float input[type=text]:focus + label,
        .label-float input[type=text]:not(:placeholder-shown) + label{
            font-size: 13px;
            margin-top: 0;
            color: #3951b2;
        }
        .oc_modal{
            cursor:pointer;
        }
        .doc_modal{
            cursor:pointer;
        }
        .processo_modal{
            cursor:pointer;
        }
    </style>
{% endblock %}
{% block content %}
<BR>
<BR>
<BR>
<main class="content_wrapper">
    <div class="container col-md-12">
            <div class="row">
                <div class="col-md-8">
                    &nbsp;
                </div>
            </div>
            <div class="row">
                <div tabindex="-1" role="dialog" aria-labelledby="modal-set-ramalLabel" >
                    <div class="col-lg" style="max-width:1245px;margin-left: auto;margin-right: auto;background-color: #F7F7F7;">
                        <div class="shadow-lg bg-white rounded mb-4" style="padding: 15px;background-color: #F7F7F7">
                           <div class="card-header" style="background-color: #F7F7F7">
                                <div class="card-title col-sm-4">
                                    <h5 style= "color:#FF5403">Colaboradores - Folha de Ponto Fechamento</h5>
                                </div>
                                <div class='col-sm-8' align="Right">
                                    <button type="button" class="btn btn-secondary btn-sm" id="cmdVoltar">Voltar</button>
                                </div>
                            </div>
                            <div class='card-body'>
                                <form method="post">
                                    <input type="hidden" id="pk" name="pk" value="{{ pk }}">
                                    <input type="hidden" id="leads_pk" name="leads_pk" value="{{ leads_pk }}">
                                    <div class='row'>
                                        <div class='col-md-1'>
                                            &nbsp;
                                        </div>
                                        <div class='col-md-2'>
                                            <label for='tipos_operacao_pk'>Empresa:</label>
                                        </div>
                                        <div class='col-md-5'>
                                            <b><div id="ds_empresa"></div></b>
                                        </div>            
                                    </div> 
                                    <div class='row'>
                                        <div class='col-md-1'>
                                            &nbsp;
                                        </div>
                                        <div class='col-md-2'>
                                            <label for='agenda_contratos_pk'>Posto de Trabalho: </label>
                                        </div>
                                        <div class='col-md-4'>
                                            <b><div id="ds_lead"></div></b>
                                        </div>            
                                    </div>         
                                
                                    <div class="row">
                                        <div class="col-md-1">
                                            &nbsp;
                                        </div>
                                        <div class='col-md-2'>
                                            <label for="dt_periodo_ini">Dt Periodo Folha Ini:&nbsp;</label>
                                        </div>
                                        <div class='col-md-4'>
                                            <b><div id="dt_periodo_ini"></div></b>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-1">
                                            &nbsp;
                                        </div>
                                        <div class='col-md-2'>
                                            <label for="dt_periodo_ini">Dt Periodo Folha fim:&nbsp;</label>

                                        </div>
                                        <div class='col-md-4'>
                                            <b><div id="dt_periodo_fim"></div></b>
                                        </div>
                                    </div>       
                                    
                                    <div class='row'>
                                        <div class='col-md-1'>
                                            &nbsp;
                                        </div>
                                        <div class='col-md-2'>
                                            <label for='obs_faturamento'> Observação:&nbsp;</label>

                                        </div>
                                        <div class='col-md-4'>
                                            <textarea id="obs" name="obs" rows="3" cols="30" disabled=""></textarea>
                                        </div> 
                                    </div>    
                                    <br>    
                                </form>
                                <div class="row">
                                    <div class="col-md-12">
                                    
                                        <button type="button" class="btn btn-primary" id="cmdMarcarTodos"><span id="descritivo_marcar"></span></a></button>
                                        <!--button type="button" class="btn btn-secondary" id="cmdRegerarFolha" data-dismiss="modal">Regerar Folha</a></button-->
                                        <button type="button" class="btn btn-primary" id="cmdPrintAll" data-dismiss="modal">Imprimir Todas</button>
                                        <!---button type="button" class="btn btn-success" id="cmdGerarPlanilhaExcel" data-dismiss="modal">Gerar Planilha Excel</button-->
                                        <hr>
                                        <table class="table table-striped table-bordered nowrap" style="width:100%" id="tblResultado">
                                            <thead>
                                                <tr>
                                                    <th>#</th>     
                                                    <th>Cód.</th>    
                                                    <th>Dt. Cadastro</th>
                                                    <th>Dt. ult. Atualização</th>
                                                    <th>Status</th>
                                                    <th>Colaborador</th>  
                                                    <th>Ação</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class='col-sm-8' align="Right">
                                        <button type="button" class="btn btn-secondary btn-sm" id="cmdVoltar">Voltar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    </div>
</main>
{% endblock %}