{% 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="{{ base_url() }}/assets/plugins/datepicker/locales/bootstrap-datepicker.pt-BR.min.js" charset="UTF-8"></script>
    <script src="/assets/js/local/ponto_acompanhamento_diario.js?v=14"></script>
{% endblock %}
{% block title %}
    Acompanhamento de Ponto Diário
{% 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>
    th, td {
            padding: 8px;
            text-align: center;
        }
        .pulsing-text {
            font-size: 2em;
            color: #ff0000;
            text-align: center;
            margin-top: 20%;
            animation: pulse 1s infinite;
        }
        .loader {
            position: relative;
            width: 100px;
            height: 100px;
            background-image: url(/assets/img/square.png);
            background-size: 60px 60px;
            background-position: center;
            background-repeat: no-repeat;
        }

        .loader:before , .loader:after{
            content: '';
            border-radius: 50%;
            position: absolute;
            inset: 0;
            box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
        }
        .loader:after {
            box-shadow: 0 2px 0 #14074f inset;
            animation: rotate 2s linear infinite;

        }

        @keyframes rotate {
            0% {  transform: rotate(0)}
            100% { transform: rotate(360deg)}
        }
    </style>
{% endblock %}
{% block content %}
<div style="
        height: 55vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center" id="carregar">
        <div class="loader" style="width: 100px;
        height: 100px;">
        </div>
    </div>
    <div class="row" id="exibir" style="display: none">
        <main class="main-content">  
            <div id="loader"></div>
                <div class="container col" id="exibir">
                    <div class="container col-md-12">
                        <div class="row">
                            <div class="col-md-8">
                                &nbsp;
                            </div>
                        </div> 
                        <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='row'>
                                        <div class="card-title col-sm-6">
                                            <h6 style= "color:#FF5403"  ><b>Acompanhamento de ponto diário</b></h6><input type="hidden" id="dt_emissao" >
                                        </div>
                                    </div>  
                                    <div class="card-body">
                                        <div class='row'>
                                            <div class="col-md-12 ">
                                                <label for="dt_inicio_print" >Período:</label>
                                            </div>
                                            <div class="col-md-3">
                                                <select class="form-control form-control-sm chzn-select noprint" id="dia" >
                                                    <option value="01">01</option>
                                                    <option value="02">02</option>
                                                    <option value="03">03</option>
                                                    <option value="04">04</option>
                                                    <option value="05">05</option>
                                                    <option value="06">06</option>
                                                    <option value="07">07</option>
                                                    <option value="08">08</option>
                                                    <option value="09">09</option>
                                                    <option value="10">10</option>
                                                    <option value="11">11</option>
                                                    <option value="12">12</option>
                                                    <option value="13">13</option>
                                                    <option value="14">14</option>
                                                    <option value="15">15</option>
                                                    <option value="16">16</option>
                                                    <option value="17">17</option>
                                                    <option value="18">18</option>
                                                    <option value="19">19</option>
                                                    <option value="20">20</option>
                                                    <option value="21">21</option>
                                                    <option value="22">22</option>
                                                    <option value="23">23</option>
                                                    <option value="24">24</option>
                                                    <option value="25">25</option>
                                                    <option value="26">26</option>
                                                    <option value="27">27</option>
                                                    <option value="28">28</option>
                                                    <option value="29">29</option>
                                                    <option value="30">30</option>
                                                    <option value="31">31</option>
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <select class="form-control form-control-sm chzn-select noprint" id="mes" >
                                                    <option value="01">Janeiro</option>
                                                    <option value="02">Fevereiro</option>
                                                    <option value="03">Março</option>
                                                    <option value="04">Abril</option>
                                                    <option value="05">Maio</option>
                                                    <option value="06">Junho</option>
                                                    <option value="07">Julho</option>
                                                    <option value="08">Agosto</option>
                                                    <option value="09">Setembro</option>
                                                    <option value="10">Outubro</option>
                                                    <option value="11">Novembro</option>
                                                    <option value="12">Dezembro</option>
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <select class="form-control form-control-sm chzn-select" id="ano" name="ano">
                                                    <option></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class='row'>
                                            <div class='col-md-4'>
                                                <label for="ds_colaborador">Posto de Trabalho:&nbsp;</label>
                                                <div class="noprint">
                                                    <select class="form-control form-control-sm chzn-select noprint" id="leads_pk" >
                                                        <option></option>
                                                    </select>
                                                </div>
                                                <span id="text-posto"></span>
                                            </div>
                                        </div>
                                        <div class='row'>
                                            
                                            <div class='col-md-4'>
                                                <label for="ds_colaborador">Colaborador:&nbsp;</label>
                                                <div class="noprint">
                                                    <select class="form-control form-control-sm chzn-select" id="colaborador_pk" >
                                                        <option></option>
                                                    </select>
                                                </div>
                                            </div>
                                                <span id="text-colaborador"></span>
                                        </div>
                                        <div class='row'>
                                            
                                            <div class='col-md-4'>
                                                <label for="ds_colaborador">Turnos:&nbsp;</label>
                                                <div class="noprint">
                                                    <select class="form-control form-control-sm chzn-select" id="turnos_pk" >
                                                        <option></option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row" >
                                            <div class="col-12 " >
                                                <div class="form-group m-3 p-0" align='center'>
                                                    <button type="button" id="cmdAtualizar"
                                                            class="btn btn-sm btn-primary btn-fill btn-finish">
                                                            Pesquisar
                                                    </button>
                                    
                                                </div>
                                            </div>
                                        </div>
                                        <br>
                                        <div class="row">
                                            <div class="col-12">
                                                <form id="ocorrenciaForm" method="GET" style="margin-top: 1%">
                                                    <div class="row mb-5">
                                                        
                                                        <div class="col-4" style="background-color: #92D050;text-align: center">
                                                            <b>Ponto Correto </b></div>
                                                        <div class="col-4" style="background-color: #FFFF00;text-align: center">
                                                            <b>Atrasado </b></div>
                                                        <div class="col-4" style="background-color: #f99856;text-align: center">
                                                            <b>Não Registrado</b></div>

                                                    </div>
                                                    
                                                </form>
                                            </div>
                                            <div class="row">
                                                <div id="datatable"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </main>
    </div>
{% endblock %}