@php
    $isPublic = 0;

    if(env('FILESYSTEM_DRIVER') == 's3') {
        $fileurlbase = env('URLS3') . '/' . env('FILEKEY') . '/';
    } else {
        $fileurlbase = env('APP_URL') . '/';
    }

@endphp


@extends($isPublic ? 'layouts.app-public' : 'layouts.app')

@section('content')

@section('style')

    <style type="text/css">

        .form-data {
            margin-top: 15px;
            margin-left: 30px;
        }
                .form-data {
            margin-top: 15px;
            margin-left: 30px;
        }
        .main-card {
            width: 95%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 25px;
            margin-left: 30px;
        }

        .cards-funcionarios {
            min-width: 240px;
            width: 24%;
            height: 100px;
            border-radius: 15px;
            box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .card-total {
            background-color: #007bff;
        }

        .card-admissoes {
            background-color: #28a745;
        }

        .card-demissoes {
            background-color: #dc3545;
        }

        .card-turnover {
            background-color: #14a2b8;
        }

        .img-funcionario {
            background-color: white;
            border-radius: 50%;
            width: 58px;
            height: 58px;
            margin-left: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
        }

        .img-funcionario-total {
            color: #007bff;
        }

        .img-funcionario-admissao {
            color: #28a745;
        }
        .img-funcionario-demissao {
            color: #dc3545;
        }

        .img-funcionario-turnover {
            color: #14a2b8;
        }

        .img-funcionario-admissao i {
            margin-left: 3px;
        }

        .text-funcionarios {
            font-family: "Poppins", sans-serif;
            font-weight: 600;
            color: white;
            font-size: 18px;
            margin-left: 20px;
        }

        .valor-funcionarios {
            text-align: center;
        }

        th, td {
            white-space: nowrap;
        }

        .main-chart {
            display: flex;
            justify-content: space-between;
            width: 95%;
            margin-left: 30px;
            flex-wrap: wrap;
        }

        .chart-geral {
            width: 100%;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
            margin-bottom: 30px;
        }

        .chart-geral-meio {
            width: 49%;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
            margin-bottom: 30px;
        }

        .header-chart {
            border-radius: 10px 10px 0 0;
            font-size: 18px;
            text-align: center;
            font-family: "Poppins", sans-serif;
            font-weight: 600;
            color: white;
            background-color: #28a745;
            padding: 5px;
        }

        @media (max-width: 1250px) {

            .main-card {
                width: 100%;
                margin-left: 0px;
                justify-content: center;
            }

            .main-chart {
                display: flex;
                justify-content: center;
            }

            .chart-geral-meio {
                margin-left: 0px;
            }

            .chart-geral {
                margin-left: 0px;
            }
            .cards-funcionarios {
                width: 95%;
            }
            .chart-geral-meio {
                width: 95%;
            }
        }

    </style>

@endsection

<div class="form-data">
    <form>
        <div style="display:flex;">
            <div style="margin-right:7px;">
                <label>Data Inicial:</label>
                <input id="input_DI" autocomplete="off" class="form-control data componenteData" name="DI" placeholder="__/__/____" value="{{( $data_inicial )}}" type="text">
            </div>
            <div style="margin-right:7px;">
                <label>Data Final:</label>
                <input id="input_DF" autocomplete="off" class="form-control data componenteData" name="DF" placeholder="__/__/____" value="{{( $data_final )}}" type="text">
            </div>
            <div>
                <label>&nbsp;</label><br/>
                <button type="submit" class="btn btn-info"><i class="fa fa-refresh"></i></button>
            </div>
        </div>
    </form>
</div>

<div class="main-card">

    <div class="cards-funcionarios card-total" data-toggle="modal" data-target="#modal_funcionarios">
        <div class="img-funcionario img-funcionario-total">
            <i class="glyphicon glyphicon-user"></i>
        </div>

        <div class="text-funcionarios">
            <div class="title-funcionarios">
                Qtd. Total
            </div>
            <div class="valor-funcionarios">
                {{ count($funcionarios) }}
            </div>
        </div>
    </div>

    <div class="cards-funcionarios card-admissoes" data-toggle="modal" data-target="#modal_admissoes">
        <div class="img-funcionario img-funcionario-admissao">
            <i class="glyphicon glyphicon-plus"></i>
        </div>

        <div class="text-funcionarios">
            <div class="title-funcionarios">
                Admissões
            </div>
            <div class="valor-funcionarios">
                {{ count($admissoes) }}
            </div>
        </div>
    </div>

    <div class="cards-funcionarios card-demissoes" data-toggle="modal" data-target="#modal_demissao">
        <div class="img-funcionario img-funcionario-demissao">
            <i class="glyphicon glyphicon-minus"></i>
        </div>

        <div class="text-funcionarios">
            <div class="title-funcionarios">
                Demissões
            </div>
            <div class="valor-funcionarios">
                {{ count($demissoes) }}
            </div>
        </div>
    </div>

    <div class="cards-funcionarios card-turnover">
        <div class="img-funcionario img-funcionario-turnover">
            <i class="glyphicon glyphicon-refresh"></i>
        </div>

        <div class="text-funcionarios">
            <div class="title-funcionarios">
                Turnover (%)
            </div>
            <div class="valor-funcionarios">
                {{ $turnOver }}%
            </div>
        </div>
    </div>

</div>

<div class="main-chart">
    <div class="chart-geral-meio">
        <div class="header-chart">
            Funcionarios no fim do mês
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_funcionarios"></div>
        </div>
    </div>

    <div class="chart-geral-meio">
        <div class="header-chart">
            Taxa de Turnover
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_turnover"></div>
        </div>
    </div>

    <div class="chart-geral">
        <div class="header-chart">
            Admissão e Demissão
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_admissao"></div>
        </div>
    </div>

    <div class="chart-geral">
        <div class="header-chart">
            Motivos de Desligamento
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_desligamento"></div>
        </div>
    </div>
</div>


<!-- modal funcionario -->
<div class="modal fade" id="modal_funcionarios" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Funcionarios</h5>
          <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="display table-striped table-bordered stripe datatable-no-buttons" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nome</th>
                        <th>Contrato</th>
                        <th>Sexo</th>
                        <th>Data Nascimento</th>
                        <th>Escolaridade</th>
                        <th>Cargo</th>
                        <th>Setor</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($funcionarios as $funcionario)
                        <tr>
                            <td> {{ $funcionario->id }} </td>

                            <td>
                                <a href="{{ route('cadastro_de_funcionarios.edit', $funcionario->id) }}">
                                    {{ $funcionario->nome_completo }}
                                </a>
                            </td>

                            <td> {{ $funcionario->Get_tipo_de_contrato() }} </td>
                            <td> {{ $funcionario->Get_sexo() }} </td>
                            <td> {{ date("d/m/Y", strtotime($funcionario->data_nascimento)) }} </td>
                            <td> {{ $funcionario->Escolaridade->escolaridade ?? "-----"}} </td>
                            <td> {{ $funcionario->Cargo->cargos ?? "-----" }} </td>
                            <td> {{ $funcionario->Setor->setor ?? "-----" }} </td>
                        </tr>
                    @endforeach
                </tbody>

            </table>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>
  </div>

<!-- modal admissao -->
<div class="modal fade" id="modal_admissoes" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Admissões</h5>
          <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="display table-striped table-bordered stripe datatable-no-buttons" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID </th>
                        <th>Nome</th>
                        <th>Contrato</th>
                        <th>Sexo</th>
                        <th>Data Nascimento</th>
                        <th>Escolaridade</th>
                        <th>Cargo</th>
                        <th>Setor</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($admissoes as $admissao)
                        <tr>
                            <td> {{ $admissao->id }} </td>

                            <td>
                                <a href="{{ route('cadastro_de_funcionarios.edit', $admissao->id) }}">
                                    {{ $admissao->nome_completo }}
                                </a>
                            </td>

                            <td> {{ $admissao->Get_tipo_de_contrato() }} </td>
                            <td> {{ $admissao->Get_sexo() }} </td>
                            <td> {{ date("d/m/Y", strtotime($admissao->data_nascimento)) }} </td>
                            <td> {{ $admissao->Escolaridade->escolaridade ?? "-----" }} </td>
                            <td> {{ $admissao->Cargo->cargos ?? "-----" }} </td>
                            <td> {{ $admissao->Setor->setor ?? "-----" }} </td>
                        </tr>
                    @endforeach
                </tbody>

            </table>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Demissao -->
  <div class="modal fade" id="modal_demissao" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Demissões</h5>
          <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="display table-striped table-bordered stripe datatable-no-buttons" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nome</th>
                        <th>Contrato</th>
                        <th>Sexo</th>
                        <th>Data Nascimento</th>
                        <th>Escolaridade</th>
                        <th>Cargo</th>
                        <th>Setor</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($demissoes as $demissao)
                        <tr>
                            <td> {{ $demissao->id }} </td>

                            <td>
                                <a href="{{ route('cadastro_de_funcionarios.edit', $demissao->id) }}">
                                    {{ $demissao->nome_completo }}
                                </a>
                            </td>

                            <td> {{ $demissao->Get_tipo_de_contrato() }} </td>
                            <td> {{ $demissao->Get_sexo() }} </td>
                            <td> {{ date("d/m/Y", strtotime($demissao->data_nascimento)) }} </td>
                            <td> {{ $demissao->Escolaridade->escolaridade ?? "-----" }} </td>
                            <td> {{ $demissao->Cargo->cargos ?? "-----" }} </td>
                            <td> {{ $demissao->Setor->setor ?? "-----" }} </td>
                        </tr>
                    @endforeach
                </tbody>

            </table>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>
  </div>

@endsection

@section('script')

@include('datatable', ['key' => 0, 'order' => 'desc'])
<script>
    $.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: "{{ route('chart_admissao') }}",
    type: "POST",
    data: {
        data_inicial: $('#input_DI').val(),
        data_final: $('#input_DF').val()
    },

    success:function(data) {
        var options_admissao = {
            series: [{
            name: 'Admissões',
            data: data['admissao'],
            color: ['#28a745']
        }, {
            name: 'Demissões',
            data: data['demissao'],
            color: ['#dc3545']
        }],
            chart: {
            type: 'bar',
            height: 350
        },
        plotOptions: {
            bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
            },
        },
        dataLabels: {
            enabled: true
        },
        stroke: {
            show: true,
            width: 2,
            colors: ['transparent']
        },
        xaxis: {
            categories: ['Jan', 'Fev', 'Mar', 'Abr', 'Maio', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
        },
        yaxis: {
            title: {
            text: 'Pessoas'
            }
        },
        fill: {
            opacity: 1
        },
        tooltip: {
            y: {
            formatter: function (val) {
                return val
            }
            }
        }
        };

        var chart_admissao = new ApexCharts(document.querySelector("#chart_admissao"), options_admissao);
        chart_admissao.render();
    }
});


$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: "{{ route('chart_funcionarios') }}",
    type: "POST",
    data: {
        data_inicial: $('#input_DI').val(),
        data_final: $('#input_DF').val()
    },

    success:function(data) {
        var options_funcionarios = {
            series: [{
            name: 'Funcionários',
            data: data['funcionarios'],
            color: ['#28a745']
        }],
            chart: {
            type: 'bar',
            height: 350
        },
        plotOptions: {
            bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
            },
        },
        dataLabels: {
            enabled: true
        },
        stroke: {
            show: true,
            width: 2,
            colors: ['transparent']
        },
        xaxis: {
            categories: data['meses'],
        },
        yaxis: {
            title: {
            text: 'Pessoas'
            }
        },
        fill: {
            opacity: 1
        },
        tooltip: {
            y: {
            formatter: function (val) {
                return val
            }
            }
        }
        };

        var chart_funcionarios = new ApexCharts(document.querySelector("#chart_funcionarios"), options_funcionarios);
        chart_funcionarios.render();
    }
});

$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: "{{ route('chart_turnover') }}",
    type: "POST",
    data: {
        data_inicial: $('#input_DI').val(),
        data_final: $('#input_DF').val()
    },

    success:function(data) {
        var options = {
          series: [{
            name: "Taxa Turnover",
            data: data['turnover']
        }],
          chart: {
          height: 350,
          type: 'line',
          zoom: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          curve: 'straight'
        },
        grid: {
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          },
        },
        xaxis: {
          categories: data['meses'],
        },tooltip: {
            y: {
            formatter: function (val) {
                return val + "%"
            }
            }
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart_turnover"), options);
        chart.render();
    }
});

$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: "{{ route('chart_motivos') }}",
    type: "POST",
    data: {
        data_inicial: $('#input_DI').val(),
        data_final: $('#input_DF').val()
    },

    success:function(data) {
        var options = {
          series: [{
          name: 'Término do contrato',
          data: [data['termino']]
        }, {
          name: 'Pedido de Demissão',
          data: [data['pedido']]
        }, {
          name: 'Dispensa Sem Justa Causa',
          data: [data['sem_causa']]
        }, {
          name: 'Dispensa Por Justa Causa',
          data: [data['com_causa']]
        }, {
          name: 'Outros',
          data: [data['outros']]
        }],
          chart: {
          type: 'bar',
          height: 350
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
          },
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: ['Desligamentos'],
        },
        yaxis: {
          title: {
            text: 'Qtd.'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return val
            }
          }
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart_desligamento"), options);
        chart.render();
    }
});

</script>

@endsection