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

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

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

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

        .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: #ffc107;
        }

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

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

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

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

        .valor-funcionarios {
            font-size: 12px;
            text-align: center;
        }

        .valor-funcionarios-sexo {
            font-size: 12px;
            text-align: left;
        }

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

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

            .cards-funcionarios {
                width: 95%;
            }

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

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

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

        }
   
    </style>

@endsection

<div class="form-data">
    <form>
        <div style="display:flex;">
            <div style="margin-right:7px;">
                <label>Data Admissã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 Admissã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">
        <div class="img-funcionario img-funcionario-total">
            <i class="glyphicon glyphicon-book"></i>
        </div>

        <div class="text-funcionarios">
            <div class="title-funcionarios">
                Escolaridade
            </div>
            <div class="valor-funcionarios">
                {{ $escolaridade }}
            </div>
        </div>
    </div>

    <div class="cards-funcionarios card-admissoes">
        <div class="img-funcionario img-funcionario-admissao">
            <i class="glyphicon glyphicon-briefcase"></i>
        </div>

        <div class="text-funcionarios">
            <div class="title-funcionarios">
                Cargo
            </div>
            <div class="valor-funcionarios">
                {{ $cargo }}
            </div>
        </div>
    </div>

    <div class="cards-funcionarios card-demissoes">
        <div class="img-funcionario img-funcionario-demissao">
            <i class="glyphicon glyphicon-calendar"></i>
        </div>

        <div class="text-funcionarios">
            <div class="title-funcionarios">
                Faixa Etária
            </div>
            <div class="valor-funcionarios" id="faixa">
                
            </div>
        </div>
    </div>

    <div class="cards-funcionarios card-turnover">
        <div class="img-funcionario img-funcionario-turnover">
            <i class="fa fa-venus-mars" aria-hidden="true"></i>
        </div>

        <div class="text-funcionarios">
            <div class="title-funcionarios">
                Sexo
            </div>
            <div class="valor-funcionarios-sexo">
                Homens: {{ $sexo[0]->total ?? "" }} <br>
                Mulheres: {{ $sexo[1]->total ?? "" }}
            </div>
        </div>
    </div>
</div>

<div class="main-chart">
    <div class="chart-geral-meio">
        <div class="header-chart">
            Faixas Etárias
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_etaria"></div>
        </div>
    </div>

    <div class="chart-geral-meio">
        <div class="header-chart">
            Escolaridade
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_escolaridade"></div>
        </div>
    </div>

    <div class="chart-geral-meio">
        <div class="header-chart">
            Operacional
        </div>
        <div class="main-chart-admissoes">
            <div id="chart_operacional"></div>
        </div>
    </div>

</div>



@endsection

@section('script')
<script>

$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: "{{ route('chart_etaria') }}",
    type: "POST",
    data: {
        data_inicial: $('#input_DI').val(),
        data_final: $('#input_DF').val()
    },
    success:function(data) {
    var options = {
    series: [{
        name: "Qtd",
        data: (data['etaria']).reverse()
    }],
        chart: {
        type: 'bar',
        height: 350
    },
    plotOptions: {
        bar: {
        borderRadius: 4,
        borderRadiusApplication: 'end',
        horizontal: true,
        }
    },
    dataLabels: {
        enabled: true
    },
    xaxis: {
        categories: (['18 a 23 anos', '23 a 33 anos', '33 a 43 anos', '43 a 53 anos', '53 a 60 anos', '60+']).reverse(),
    },
    
    };

    $('#faixa').html(data['maior']);
    var chart = new ApexCharts(document.querySelector("#chart_etaria"), options);
    chart.render();
    }
});

$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: "{{ route('chart_escolaridade') }}",
    type: "POST",
    data: {
        data_inicial: $('#input_DI').val(),
        data_final: $('#input_DF').val()
    },    
    success:function(data) {
        var options = {
          series: data['quantidade'],
          chart: {
          height: 390,
          type: 'radialBar',
        },
        plotOptions: {
          radialBar: {
            offsetY: 0,
            startAngle: 0,
            endAngle: 270,
            hollow: {
              margin: 5,
              size: '30%',
              background: 'transparent',
              image: undefined,
            },
            dataLabels: {
              name: {
                show: false,
              },
              value: {
                show: false,
              }
            },
            barLabels: {
              enabled: true,
              useSeriesColors: true,
              offsetX: -8,
              fontSize: '16px',
              formatter: function(seriesName, opts) {
                return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex]
              },
            },
          }
        },
        colors: ["#0d6efd", "#6c757d", "#198754", "#ffc107", "#dc3545", "#20c997", "#6610f2"],
        labels: data['escolaridade'],
        responsive: [{
          breakpoint: 480,
          options: {
            legend: {
                show: false
            }
          }
        }]
        };

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

$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: "{{ route('chart_operacional') }}",
    type: "POST",
    data: {
        data_inicial: $('#input_DI').val(),
        data_final: $('#input_DF').val()
    },
    
    success:function(data) {
        var colors = [
            "#0d6efd",
            "#6c757d",
            "#198754",
            "#dc3545",
            "#ffc107",
            "#0dcaf0",
            "#f8f9fa",
            "#212529",
            "#6c757d",
            "#ffffff",
            "#d100d1",
            "#40e0d0",
            "#f8f9fa",
            "#e9ecef",
            "#dee2e6",
            "#ced4da",
            "#adb5bd",
            "#6c757d",
            "#495057",
            "#343a40"
        ];
        var options = {
          series: [{
          data: data['quantidade']
        }],
          chart: {
          height: 350,
          type: 'bar',
          events: {
            click: function(chart, w, e) {
              // console.log(chart, w, e)
            }
          }
        },
        colors: colors,
        plotOptions: {
          bar: {
            columnWidth: '45%',
            distributed: true,
          }
        },
        dataLabels: {
          enabled: true
        },
        legend: {
          show: false
        },
        xaxis: {
          categories: data['cargo'],
          labels: {
            style: {
              colors: colors,
              fontSize: '12px'
            }
          }
        }
        };

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

</script>

@endsection