{% set area = 'relatorios' %}
{% 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/relFechamento.js?v=14"></script>
{% endblock %}
{% block title %}
    Relatório Fechamento
{% 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>

        .cabecalho{
            width: 100%; /* aqui pode ser auto ou 100%*/

        }
        .tab_dados_cabecalho {
            width: 150%;
            border-collapse: collapse;
            text-align: center;
        }
        .tab_dados_cabecalho a {
            color: slategrey;
            text-decoration: none;
        }
        .tab_dados_cabecalho th {
            color:black;
            background-color: #e9e9e9;

        }
        .tab_dados_cabecalho tr {
            height: 50px;
            border-bottom: 1px solid #D5D5D5;
        }
        .tab_dados_cabecalho tr:nth-child(odd) {
            background: #F7F7F7;
        }
        .tab_dados_cabecalho tr:nth-child(even) {
            background: #FFFFFF;
        }
        .tab_dados_cabecalho tr:hover {
            background: #F1F1F1;
        }

        .caixa_tabela{
            width: 100%; /* aqui pode ser auto ou 100%*/
            height: 360px; /* aqui pode ser auto ou 100%*/
            overflow-x:scroll;
            overflow-y:scroll;
        }
        .tab_dados {
            width: 150%;
            border-collapse: collapse;
            text-align: center;
        }
        .tab_dados a {
            color: #484848;
            text-decoration: none;
        }
        .tab_dados th {
            color:blue;
        }
        .tab_dados tr {
            height: 50px;
            border-bottom: 1px solid #D5D5D5;
        }
        .tab_dados tr:nth-child(odd) {
            background: #F7F7F7;
        }
        .tab_dados tr:nth-child(even) {
            background: #FFFFFF;
        }
        .tab_dados tr:hover {
            background: #F1F1F1;
        }
        tfoot tr td{
            border:0;
            height: 40px;
        }
        .tfoot{
            width: 100%;
        }

        .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 %}
<br><br><br><br>
    <main class="content_wrapper">
        <div class="container">
            <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-5">
                                        <h6 style= "color:#FF5403">Relatório Fechamento</h6>
                                    </div>
                                    <div class='col-sm-7' align="Right">
                                        <button type="button" class="btn btn-secondary btn-sm" id="cmdCancelar">Voltar</button>
                                        <button type="button" class="btn btn-primary btn-sm" id="cmdExport">Export</button>
                                    </div>
                                </div>
                                <hr style='height:1px; border:none; color:#14074F; background-color:#14074F; margin-top: 0px; margin-bottom: 0px;'>
                                <br>
                                <div id='form'>
                                    <table>
                                        <tr>
                                            <td>
                                                <b>Relatório:</b>
                                            </td>
                                            <td>
                                                Dados Colaboradores
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <b>Dt Emissão:</b>
                                            </td>
                                            <td>
                                                <div><span id="dt_emissao"></span></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <b>Usuário Emissão:</b>
                                            </td>
                                            <td>
                                                <div>{{ session['session_user']['par2'] }}</div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <b>Colaborador:</b>
                                            </td>
                                            <td>
                                            <div>{{ds_colaborador}}</div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <b>Posto de trabalho:</b>
                                            </td>
                                            <td>
                                            <div>{{ds_lead}}</div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <b>Período:</b>
                                            </td>
                                            <td>
                                            <div>{{dt_inicio}} - {{dt_fim}}</div>
                                            </td>
                                        </tr>
                                        
                                        
                                    </table>
                                    <div class="row">
                                        <div class="col-md-12">
                                            {% if arrDados is defined and arrDados|length > 0 %}
                                                
                                                <style>
                                                    .lead-title { font-size: 1.3rem; font-weight: 600; margin-top: 2rem; color: #333; }
                                                    .table-wrapper { width: 100%; overflow-x: auto; margin-bottom: 2rem; }
                                                    .table-pontos { width: 1800px; border-collapse: collapse; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); font-family: Arial, sans-serif; }
                                                    .table-pontos th, .table-pontos td { padding: 0.75rem 1rem; text-align: center; border: 1px solid #ccc; white-space: nowrap; }
                                                    .table-pontos thead { background-color: #f0f0f0; }
                                                    .table-pontos tbody tr:nth-child(even) { background-color: #fafafa; }
                                                    .table-pontos td:first-child { text-align: left; font-weight: 500; }
                                                    .fora-tolerancia { color: #d9534f; font-weight: bold; }
                                                    hr { border: none; border-top: 1px solid #ccc; margin: 2rem 0; }
                                                </style>

                                                {% for leadItem in arrDados %}
                                                    {% set lead = leadItem.lead %}
                                                    {% set colaboradores = leadItem.colaboradores %}
                                                    
                                                    {% if colaboradores|length > 0 %}
                                                        <h3 class="lead-title">Lead: {{ lead.ds_lead }}</h3>

                                                        <div class="table-wrapper">
                                                            <table class="table-pontos">
                                                                <thead>
                                                                    <tr>
                                                                        <th>R.E</th>
                                                                        <th>Colaborador</th>
                                                                        <th>Data Admissão</th>
                                                                        <th>Turno</th>
                                                                        <th>Dias de Escala</th>
                                                                        <th>Dias Trabalhados</th>
                                                                        <th>Salario</th>
                                                                        <th>VT Valor</th>
                                                                        <th>VT Não Utilizados</th>
                                                                        <th>Adic Noturno</th>
                                                                        <th>Insal 20%</th>
                                                                        <th>Insal 40%</th>
                                                                        <th>H.E Total</th>
                                                                        <th>Faltas Total</th>
                                                                        <th>DSR</th>
                                                                        <th>Atestado Total</th>
                                                                        <th>Atestado Dias</th>
                                                                        <th>Atrasos</th>
                                                                        <th>Assuidade</th>
                                                                        <th>Cesta</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    {% for colab in colaboradores %}
                                                                        {% set f = colab.fechamento ?: {} %}
                                                                        <tr>
                                                                            <td>{{ colab.ds_re ?: '' }}</td>
                                                                            <td>{{ colab.ds_colaborador ?: '' }}</td>
                                                                            <td>{{ colab.dt_admissao ?: '' }}</td>
                                                                            <td>{{ colab.ds_turno ?: '' }}</td>
                                                                            <td>{{ f.dias_escala ?: 0 }}</td>
                                                                            <td>{{ f.dias_trabalhados ?: 0 }}</td>
                                                                            <td>{{ colab.vl_salario ?: '0,00' }}</td>
                                                                            <td>{{ f.vt_valor ?: '0,00' }}</td>
                                                                            <td>{{ f.vt_valor ?: '0,00' }}</td>
                                                                            <td>--</td>
                                                                            <td>--</td>
                                                                            <td>--</td>
                                                                            <td>{{ f.hr_excedentes ?: '00:00' }}</td>
                                                                            <td>{{ f.faltas_total ?: 0 }}</td>
                                                                            <td>--</td>
                                                                            <td>{{ f.atestado_total ?: 0 }}</td>
                                                                            <td>{{ f.dias_atestado ?: 0 }}</td>
                                                                            <td class="{{ f.atrasos > 0 ? 'fora-tolerancia' : '' }}">{{ f.atrasos ?: 0 }}</td>
                                                                            <td>--</td>
                                                                            <td>--</td>
                                                                        </tr>
                                                                    {% endfor %}
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    {% endif %}
                                                {% endfor %}

                                            {% else %}
                                                <p>Nenhum dado encontrado para os filtros selecionados.</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>   
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

{% endblock %}