@extends('layouts.pontoe.painel')
@section('content')
    <h5 class="mt-4">Olá, <b>{{userConnectedPontoe()->nome}}</b></h5>
    <small>
        @php
            //http://rberaldo.com.br/php-usando-a-classe-nativa-datetime/
            $date_time = new DateTime('now', new DateTimeZone('America/Sao_Paulo'));
            $formatter = new IntlDateFormatter('pt-BR', IntlDateFormatter::FULL, IntlDateFormatter::NONE);
            echo 'Hoje, ' . $formatter->format($date_time);
        @endphp
    </small>
    <hr class="mb-4">

    <div class="row mt-5">
        <div class="col-md-3">
            <div class="card">
                <div class="card-header text-white bg-success">
                    Trabalhando
                </div>
                <div class="card-body">
                    <h1 class="card-title"><b>{{$trabalhando}}</b></h1>
                    <p class="card-text">Servidor(es) bateu ponto de entrada.</p>
                    <a href="#" class="btn btn-light btn-sm" data-toggle="modal" data-target="#modalTrabalhando">Visualizar <i class="fa fa-eye" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-header text-white bg-danger">
                    Atrasados
                </div>
                <div class="card-body">
                    <h1 class="card-title"><b>{{$atrasados}}</b></h1>
                    <p class="card-text">Servidor(es) em atraso.</p>
                    <a href="#" class="btn btn-light btn-sm" data-toggle="modal" data-target="#modalAtrasados">Visualizar <i class="fa fa-eye" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-header text-white bg-warning">
                    Sem presença
                </div>
                <div class="card-body">
                    <h1 class="card-title"><b>{{$s_presenca}}</b></h1>
                    <p class="card-text">Servidor(es) em falta até o momento.</p>
                    <a href="#" class="btn btn-light btn-sm" data-toggle="modal" data-target="#modalSemPresenca">Visualizar <i class="fa fa-eye" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-header text-white bg-info">
                    Solicitações
                </div>
                <div class="card-body">
                    <h1 class="card-title"><b>{{$solicitacao}}</b></h1>
                    <a href="#" class="btn btn-light btn-sm" data-toggle="modal" data-target="#modalSolicitacoes">Visualizar <i class="fa fa-eye" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-5">
        <div class="col-md-9">
            <div class="card">
                <div class="card-header">
                    Servidores
                </div>
                <div class="card-body">
                    <table class="table table-hover table_dashboard">
                        <thead>
                        <tr>
                            <th width="10%">Matrícula</th>
                            <th width="85%">Funcionário</th>
                            <th width="5%">Perfil</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    Notificações
                </div>
                <div class="card-body">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Sem registros</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalTrabalhando" tabindex="-1" aria-labelledby="modalTrabalhando" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Servidores Trabalhando</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-hover table_trabalhando_modal" style="width:100%">
                        <thead>
                        <tr>
                            <th style="width:10%">Matrícula</th>
                            <th style="width:55%">Funcionário</th>
                            <th style="width:30%">Equipe</th>
                            <th style="width:5%">Perfil</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalAtrasados" tabindex="-1" aria-labelledby="modalAtrasados" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Servidores Atrasado(s)</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-hover table_atrasados_modal" style="width:100%">
                        <thead>
                        <tr>
                            <th style="width:10%">Matrícula</th>
                            <th style="width:55%">Funcionário</th>
                            <th style="width:30%">Equipe</th>
                            <th style="width:5%">Perfil</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalSemPresenca" tabindex="-1" aria-labelledby="modalSemPresenca" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Servidores sem Presença</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-hover table_s_presenca_modal" style="width:100%">
                        <thead>
                        <tr>
                            <th style="width:10%">Matrícula</th>
                            <th style="width:55%">Funcionário</th>
                            <th style="width:30%">Equipe</th>
                            <th style="width:5%">Perfil</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalSolicitacoes" tabindex="-1" aria-labelledby="modalSolicitacoes" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Solicitações em Aberto</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-hover table_solicitacoes_modal" style="width:100%">
                        <thead>
                        <tr>
                            <th style="width:10%">Matrícula</th>
                            <th style="width:25%">Funcionário</th>
                            <th style="width:50%">Solicitações</th>
                            <th style="width:10%">Enviado</th>
                            <th style="width:5%">Ações</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script type="text/javascript">
        $(document).ready(function () {
            const language = {
                "sEmptyTable": "Nenhum registro encontrado",
                "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                "sInfoPostFix": "",
                "sInfoThousands": ".",
                "sLengthMenu": "_MENU_ resultados por página",
                "sLoadingRecords": "Carregando...",
                "sProcessing": "Processando...",
                "sZeroRecords": "Nenhum registro encontrado",
                "sSearch": "Pesquisar",
                "oPaginate": {
                    "sNext": "Próximo",
                    "sPrevious": "Anterior",
                    "sFirst": "Primeiro",
                    "sLast": "Último"
                },
                "oAria": {
                    "sSortAscending": ": Ordenar colunas de forma ascendente",
                    "sSortDescending": ": Ordenar colunas de forma descendente"
                }
            }

            $('.table_dashboard').DataTable({
                iDisplayLength: 25,
                processing: true,
                serverSide: true,
                order: [[1, "desc"]],
                ajax: "{{ route('p_trabalhando.dashboard') }}",
                columns: [
                    {data: 'matricula', name: 'matricula'},
                    {data: 'funcionario', name: 'funcionario'},
                    {data: 'perfil', name: 'perfil', orderable: false, searchable: false},
                ],
                language: language,
            });

            $('.table_trabalhando_modal').DataTable({
                lengthChange: false,
                iDisplayLength: 10,
                processing: true,
                serverSide: true,
                order: [[1, "desc"]],
                ajax: "{{ route('p_trabalhando.modal') }}",
                columns: [
                    {data: 'matricula', name: 'matricula'},
                    {data: 'funcionario', name: 'funcionario'},
                    {data: 'equipe', name: 'equipe'},
                    {data: 'perfil', name: 'perfil', orderable: false, searchable: false},
                ],
                language: language,
            });

            $('.table_atrasados_modal').DataTable({
                lengthChange: false,
                iDisplayLength: 10,
                processing: true,
                serverSide: true,
                order: [[1, "desc"]],
                ajax: "{{ route('p_atrasados.modal') }}",
                columns: [
                    {data: 'matricula', name: 'matricula'},
                    {data: 'funcionario', name: 'funcionario'},
                    {data: 'equipe', name: 'equipe'},
                    {data: 'perfil', name: 'perfil', orderable: false, searchable: false},
                ],
                language: language,
            });
            $('.table_s_presenca_modal').DataTable({
                lengthChange: false,
                iDisplayLength: 15,
                processing: true,
                serverSide: true,
                order: [[1, "desc"]],
                ajax: "{{ route('p_spresenca.modal') }}",
                columns: [
                    {data: 'matricula', name: 'matricula'},
                    {data: 'funcionario', name: 'funcionario'},
                    {data: 'equipe', name: 'equipe'},
                    {data: 'perfil', name: 'perfil', orderable: false, searchable: false},
                ],
                language: language,
            });

            $('.table_solicitacoes_modal').DataTable({
                iDisplayLength: 25,
                processing: true,
                serverSide: true,
                order: [[0, "desc"]],
                ajax: "{{ route('p_solicitacao.modal') }}",
                columns: [
                    {data: 'matricula', name: 'matricula'},
                    {data: 'nome', name: 'nome'},
                    {data: 'solicitacao', name: 'solicitacao'},
                    {data: 'data_envio', name: 'data_envio'},
                    {data: 'acao', name: 'acao', orderable: false, searchable: false},
                ],
                language: language,
            });

            // $('#modalTrabalhando').modal('show')
        });
    </script>
@endpush