@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;
        }

        .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: 32%;
            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-demissao i {
            margin-left: -2px;
        }

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

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

        .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: 95%;
            margin-left: 30px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
            margin-bottom: 30px;
        }

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

        .chart-geral-meio {
            width: 46%;
            margin-left: 30px;
            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%;
            }
            .chart-geral-terco {
                margin-left: 0px;
                width: 95%;
            }
        }

    </style>

@endsection

<div class="form-data">
    <form>
        <div style="display:flex;">
            <div style="margin-right:7px;">
                <label>Data Demissão 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 Demissão 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-blackboard"></i>
        </div>

        <div class="text-funcionarios">
            <div class="title-funcionarios">
                Qtd. Entrevistas
            </div>
            <div class="valor-funcionarios">
                {{ $qtdEntrevistas }}
            </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-asterisk"></i>
        </div>

        <div class="text-funcionarios">
            <div class="title-funcionarios">
                Tipo
            </div>
            <div class="valor-funcionarios">
                {{ $tipo }}
            </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-bookmark"></i>
        </div>

        <div class="text-funcionarios">
            <div class="title-funcionarios">
                Motivo
            </div>
            <div class="valor-funcionarios">
                {{ $motivo }}
            </div>
        </div>
    </div>

</div>

<div class="main-chart">
    <div class="chart-geral-terco">
        <div class="header-chart">
            Você se sentia Valorizado ?
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_valorizado"></div>
        </div>
    </div>

    <div class="chart-geral-terco">
        <div class="header-chart">
            Crescimento Profissional
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_profissional"></div>
        </div>
    </div>

    <div class="chart-geral-terco">
        <div class="header-chart">
            Voltaria a trabalhar na Empresa ?
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_voltaria"></div>
        </div>
    </div>

    <div class="chart-geral-terco">
        <div class="header-chart">
            Relacionamento com o Superior
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_supervisor"></div>
        </div>
    </div>

    <div class="chart-geral-terco">
        <div class="header-chart">
            Relacionamento com os Colegas
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_colegas"></div>
        </div>
    </div>

    <div class="chart-geral-terco">
        <div class="header-chart">
            Benefícios
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_beneficios"></div>
        </div>
    </div>

    <div class="chart-geral-terco">
        <div class="header-chart">
            Remuneração
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_remuneracao"></div>
        </div>
    </div>

    <div class="chart-geral-terco">
        <div class="header-chart">
            Ferramentas de Trabalho
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_ferramentas"></div>
        </div>
    </div>

    <div class="chart-geral-terco">
        <div class="header-chart">
            Canais de Comunicação
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_canais"></div>
        </div>
    </div>


</div>


@endsection

@section('script')
<script>
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        url: "{{ route('chart-desligamentos') }}",
        type: "POST",
        data: {
          data_inicial: $('#input_DI').val(),
          data_final: $('#input_DF').val()
        },
    
        success:function(data) {
        var options = {
            series: [{
            name: 'Sempre',
            data: [data.valorizacao_sempre]
        }, {
          name: 'As Vezes',
          data: [data.valorizacao_as_vezes]
        }, {
          name: 'Nunca',
          data: [data.valorizacao_nunca]
        }],
          chart: {
          type: 'bar',
          height: 250
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
          },
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: ['Aprovação'],
        },
        yaxis: {
          title: {
            text: 'Votos'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return "Respostas: " + val
            }
          }
        }
        };

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

        var options = {
            series: [{
            name: 'Sempre',
            data: [data.profissional_sempre]
        }, {
          name: 'As Vezes',
          data: [data.profissional_as_vezes]
        }, {
          name: 'Nunca',
          data: [data.profissional_nunca]
        }],
          chart: {
          type: 'bar',
          height: 250
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
          },
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: ['Crescimento Profissional'],
        },
        yaxis: {
          title: {
            text: 'Votos'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return "Respostas: " + val
            }
          }
        }
        };

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

        var options = {
            series: [{
            name: 'Sim',
            data: [data.voltaria_sempre]
        }, {
          name: 'Talvez',
          data: [data.voltaria_as_vezes]
        }, {
          name: 'Não',
          data: [data.voltaria_nunca]
        }],
          chart: {
          type: 'bar',
          height: 250
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
          },
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: ['Voltaria trabalhar ?'],
        },
        yaxis: {
          title: {
            text: 'Votos'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return "Respostas: " + val
            }
          }
        }
        };

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

        var options = {
            series: [{
            name: 'Ótimo',
            data: [data.supervisor_otimo]
        }, {
          name: 'Bom',
          data: [data.supervisor_bom]
        }, {
          name: 'Regular',
          data: [data.supervisor_regular]
        }, {
            name: 'Ruim',
            data: [data.supervisor_ruim]
        }],
          chart: {
          type: 'bar',
          height: 250
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
          },
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: ['Relacionamento com o Supervisor'],
        },
        yaxis: {
          title: {
            text: 'Votos'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return "Respostas: " + val
            }
          }
        }
        };

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

        var options = {
            series: [{
            name: 'Ótimo',
            data: [data.colegas_otimo]
        }, {
          name: 'Bom',
          data: [data.colegas_bom]
        }, {
          name: 'Regular',
          data: [data.colegas_regular]
        }, {
            name: 'Ruim',
            data: [data.colegas_ruim]
        }],
          chart: {
          type: 'bar',
          height: 250
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
          },
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: ['Relacionamento com os Colegas'],
        },
        yaxis: {
          title: {
            text: 'Votos'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return "Respostas: " + val
            }
          }
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart_colegas"), options);
        chart.render();
        
        var options = {
            series: [{
            name: 'Ótimo',
            data: [data.beneficios_otimo]
        }, {
          name: 'Bom',
          data: [data.beneficios_bom]
        }, {
          name: 'Regular',
          data: [data.beneficios_regular]
        }, {
            name: 'Ruim',
            data: [data.beneficios_ruim]
        }],
          chart: {
          type: 'bar',
          height: 250
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
          },
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: ['Beneficios'],
        },
        yaxis: {
          title: {
            text: 'Votos'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return "Respostas: " + val
            }
          }
        }
        };

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

        var options = {
            series: [{
            name: 'Ótimo',
            data: [data.remuneracao_otimo]
        }, {
          name: 'Bom',
          data: [data.remuneracao_bom]
        }, {
          name: 'Regular',
          data: [data.remuneracao_regular]
        }, {
            name: 'Ruim',
            data: [data.remuneracao_ruim]
        }],
          chart: {
          type: 'bar',
          height: 250
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
          },
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: ['Remuneracao'],
        },
        yaxis: {
          title: {
            text: 'Votos'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return "Respostas: " + val
            }
          }
        }
        };

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

        var options = {
            series: [{
            name: 'Ótimo',
            data: [data.ferramenta_otimo]
        }, {
          name: 'Bom',
          data: [data.ferramenta_bom]
        }, {
          name: 'Regular',
          data: [data.ferramenta_regular]
        }, {
            name: 'Ruim',
            data: [data.ferramenta_ruim]
        }],
          chart: {
          type: 'bar',
          height: 250
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
          },
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: ['Ferramentas'],
        },
        yaxis: {
          title: {
            text: 'Votos'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return "Respostas: " + val
            }
          }
        }
        };

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

        var options = {
            series: [{
            name: 'Ótimo',
            data: [data.canais_otimo]
        }, {
          name: 'Bom',
          data: [data.canais_bom]
        }, {
          name: 'Regular',
          data: [data.canais_regular]
        }, {
            name: 'Ruim',
            data: [data.canais_ruim]
        }],
          chart: {
          type: 'bar',
          height: 250
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            borderRadius: 5,
            borderRadiusApplication: 'end'
          },
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: ['Canais de Comunicação'],
        },
        yaxis: {
          title: {
            text: 'Votos'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return "Respostas: " + val
            }
          }
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart_canais"), options);
        chart.render();
      
      
        
        }
    });
</script>
@endsection