{% 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/relStatusColaborador.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: 100%;       /* antes era 150% */
            border-collapse: collapse;
            text-align: center;
            table-layout: auto; /* permite ajuste automático das colunas */
            word-wrap: break-word;
        }

        .tab_dados {
            width: 100%;       /* antes era 150% */
            border-collapse: collapse;
            text-align: center;
            table-layout: auto;
            word-wrap: break-word;
        }
        .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 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>Status APP:</b>
                                            </td>
                                            <td>
                                            <div>{{ds_status}}</div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <b>Status Sistema:</b>
                                            </td>
                                            <td>
                                            <div>{{ds_status_sistema}}</div>
                                            </td>
                                        </tr>
                                        
                                        
                                    </table>
                                    <div class="row">
                                        <div class="col-md-12">
                                            {% if arrDados is defined and arrDados|length > 0 %}
                                            <div class="table-responsive" style="overflow-x: auto;">
                                                <table id="tblResultado" class="table table-striped table-bordered" style="width:100%; table-layout: auto; word-wrap: break-word;">
                                                    <thead class="table-light">
                                                        <tr>
                                                            <th style="min-width:80px;">Código</th>
                                                            <th style="min-width:200px;">Nome do colaborador</th>
                                                            <th style="min-width:120px;">Admissão</th>
                                                            <th style="min-width:180px;">Posto de Trabalho</th>
                                                            <th style="min-width:150px;">CPF</th>
                                                            <th style="min-width:150px;">Status Sistema</th>
                                                            <th style="min-width:150px;">Status App</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {% set total = 0 %}
                                                        {% for item in arrDados %}
                                                            
                                                            {% set status = item.ds_status_app|lower %}
                                                            {% set corFundo = '' %}
                                                            {% set color = 'black' %}

                                                            {% if status == 'aguardando liberação' %}
                                                                {% set corFundo = '#e74c3c' %}
                                                            {% elseif status in ['não fez o novo cadastro', 'nao fez o novo cadastro'] %}
                                                                {% set corFundo = '#f1c40f' %}
                                                                {% set color = 'black' %}
                                                            {% elseif status == 'acesso cancelado' %}
                                                                {% set corFundo = '#bdc3c7' %}
                                                                {% set color = 'black' %}
                                                            {% elseif status == 'liberado' %}
                                                                {% set corFundo = '#2ecc71' %}
                                                            {% else %}
                                                                {% set corFundo = '#95a5a6' %}
                                                            {% endif %}

                                                            {% if item.ic_status == 2 %}
                                                                {% set status = 'acesso cancelado' %}
                                                                {% set corFundo = '#bdc3c7' %}
                                                                {% set color = 'black' %}
                                                            {% endif %}

                                                            {% if item.ic_status != 2 and ds_status != 'acesso cancelado' %}
                                                                <tr style="text-align:center; vertical-align:middle;">
                                                                    <td>{{ item.pk }}</td>
                                                                    <td>{{ item.ds_colaborador }}</td>
                                                                    <td>{{ item.dt_admissao }}</td>
                                                                    <td>{{ item.ds_lead }}</td>
                                                                    <td>{{ item.ds_cpf }}</td>
                                                                    <td>{{ item.ds_status_colaborador }}</td>
                                                                    <td>
                                                                        <span style="
                                                                            display:inline-block;
                                                                            background-color: {{ corFundo }};
                                                                            color: {{ color }};
                                                                            font-weight: 600;
                                                                            padding: 6px 12px;
                                                                            border-radius: 12px;
                                                                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                                                                            font-size: 0.9rem;
                                                                            text-transform: capitalize;
                                                                            min-width: 130px;
                                                                            text-align:center;
                                                                        ">
                                                                            {{ status }}
                                                                        </span>
                                                                    </td>
                                                                </tr>
                                                                {% set total = total + 1 %}
                                                            {% elseif ds_status == 'Acesso cancelado' and item.ic_status == 2 %}
                                                                <tr style="text-align:center; vertical-align:middle;">
                                                                    <td>{{ item.pk }}</td>
                                                                    <td>{{ item.ds_colaborador }}</td>
                                                                    <td>{{ item.dt_admissao }}</td>
                                                                    <td>{{ item.ds_lead }}</td>
                                                                    <td>{{ item.ds_cpf }}</td>
                                                                    <td colspan="2">
                                                                        <span style="
                                                                            display:inline-block;
                                                                            background-color: {{ corFundo }};
                                                                            color: {{ color }};
                                                                            font-weight: 600;
                                                                            padding: 6px 12px;
                                                                            border-radius: 12px;
                                                                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                                                                            font-size: 0.9rem;
                                                                            text-transform: capitalize;
                                                                            min-width: 130px;
                                                                            text-align:center;
                                                                        ">
                                                                            {{ status }}
                                                                        </span>
                                                                    </td>
                                                                </tr>
                                                                {% set total = total + 1 %}
                                                            {% endif %}
                                                        {% endfor %}
                                                    </tbody>
                                                    <tfoot>
                                                        <tr style="background-color:#e9e9e9; font-weight:700; text-align:center;">
                                                            <td colspan="6" style="text-align:right;">Total de colaboradores:</td>
                                                            <td>{{ total }}</td>
                                                        </tr>
                                                    </tfoot>



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

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

{% endblock %}