@extends('layouts/app')



@section('content')
    <style>
        table.dataTable tbody th, table.dataTable tbody td {
            padding: 5px !important;
        }
        .card{
            min-height:120px;
        }
    </style>
	<div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h3>Dashboard Raport</h3>
            </div>
            <div class="col-12 col-md-6 order-md-2 order-first">
                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Training Karyawan</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <section class="section">
		<div class="card">
            <div class="card-header" style="padding-bottom: 0px !important;margin-left:30px" >


                <div class="form-group row">
                    <div class="col-md-3">
                        <label for="">area</label>
                        <select name="area_id" id="area_id" class="form-control select2" style="width: 100%" onchange="changeLocation()">
                            <option value="-"> ALL </option>
                            @foreach($areas as $value)
                                <option value="{{ $value->id }}">{{ $value->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="staticEmail2">lokasi</label>
                        <select name="lokasi_id" id="lokasi_id" class="form-control select2" style="width: 100%">
                            <option value="-"> ALL </option>
                        </select>
                        
                    </div>
                    <div class="col-md-3">
                        
                        <label for="staticEmail2">divisi</label>
                        <select name="divisi_id" id="divisi_id" class="form-control select2" style="width: 100%">
                            <option value="-"> ALL </option>
                            @foreach($divisions as $value)
                                <option value="{{ $value->id }}">{{ $value->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                
                <div class="form-group row">
                    <div class="col-md-6">
                        <label for="staticEmail2">Tanggal</label>
                        <div class="input-group mb-3">
                            <input type="text" id="earlyDate" name="earlyDate" class="form-control flatpickr"
                                value="{{ date('Y-m-d', strtotime('first day of january this year')) }}">
                            <span class="input-group-text">to</span>
                            <input type="text" id="lastDate" name="lastDate" class="form-control flatpickr"
                                value="{{ date('Y-m-d') }}">
                        </div>
                        
                    </div>
                    
                    
                    <div class="col-2">
                        <label class="d-block">&nbsp;</label>
                        <button type="button" class="btn btn-primary btn-block" onClick="updateData()">Filter</button>
                    </div>
                </div>
                

                <div class="divider">
                    <div class="divider-text">RESULT</div>
                </div>
            </div>
            <div class="card-body">
               <div class="row">
                    <div class="col-md-4">
                        <div class="card" style="background: #EDF1F4;background: linear-gradient(to bottom,#C2E9FB,#A1C4FD);margin-bottom:1rem !important">
                            <div class="card-body py-4-5">
                                <div class="row">
                                    <div class="col-md-4" style="margin:auto;text-align:center">
                                        
                                        <h1 class="font-extrabold mb-0 text-white" style="font-size:45px; word-spacing:normal">{{ $count_training}}</h1>
                                    </div>
                                    <div class="col-md-8 ">
                                        <h5 class="text-blue font-bold" style="text-align:right">JUMLAH TRAINING</h5>
                                    </div>
                                </div> 
                            </div>
                        </div>
                        <div class="card" style="background: #EDF1F4;background: linear-gradient(to bottom,#C2E9FB,#A1C4FD);">
                            <div class="card-body">
                                <h5 class="text-center">Jumlah karyawan yang telah di training</h5>
                                    <div id="chartKaryawan">
                                            
                                    </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="card" style="background:rgb(52, 167, 255);
                            background: linear-gradient(
                            to bottom,
                            #EDF1F4,#C3CBDC
                            );">
                            <div class="card-header" style="background:rgb(52, 167, 255);
                            background: linear-gradient(
                            to bottom,
                            #C3CBDC,#EDF1F4
                            );">
                                <h5 class="text-blue font-bold" style="text-align:center">KARYAWAN YANG TIDAK MENGIKUTI TRAINING</h5>
                            </div>
                            <div class="card-body">
                            <table class="table table-bordered table-striped">
                            <thead style="background-color: darkorange;">
                                <tr>
                                    <th>Training</th>
                                    <th>Jumlah</th>
                                    <th>download</th>
                                </tr>
                            </thead>  
                            <tbody>
                                @foreach($modelNotTraining as $key => $value)
                                <tr>
                                    <td>{{$key}}</td>
                                    <td>{{$value}}</td>
                                    <td><a href="{{ url('training/dashboard/export_not_training/'.$key)}}" target="_blank" rel="noopener noreferrer">download</a></td>
                                </tr>
                                @endforeach
                            </tbody>  
                        </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card" style="background: #EDF1F4;
                            background: linear-gradient(
                            to bottom,
                            #EDF1F4,#C3CBDC
                            );">
                                        <div class="card-body">
                                            <div id="myChart" width="400" height="400"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="card" style="background: #EDF1F4;
                                background: linear-gradient(
                               180deg, rgb(223, 239, 255) 0%, rgb(137, 192, 255) 100%
                                );">
                            <div id="lineChart"></div>
                        </div>
                    </div>

                    
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                @if($akses->is_export == 1)
                                    <button class="btn" style="border: 2px solid green;min-width: 130px;padding: 3px;font-weight:bold;font-size: 10px;color:green" href="#"  onClick="exportData()" target="_blank" data-id="0" data-header="1"> <i class="fa fa-file-excel"></i>  download excel</button>
                                @endif
                                </div>
                                <div class="card-body table-responsive">
                                    <table class="table table-bordered table-striped" id="datatables">
                                        <thead style="background-color: darkorange;">
                                            <tr>
                                                <th>Nik</th>
                                                <th>Nama</th>
                                                <th>cabang</th>
                                                <th>divisi</th>
                                                <th>tanggal</th>
                                                <th>Nama Training</th>
                                                <th>Score</th>
                                            </tr>
                                        </thead>
                                    </table>    
                                </div>
                            </div>
                        </div>
               </div>
			</div>
		</div>
	</section>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="{{ asset('template/assets/js/form-binding.min.js') }}"></script>
	<script>
        var table,
        RadialChart,
        LineChart;
        var chart; 
        (function() {
            setRadialChart();
            updateData();
        })();

        function changeLocation(){
            let area_id = $('#area_id').val();
            $.ajax({
                url: "{{ url('training/dashboard/get-location') }}",
                type: "get",
                dataType: "json",
                data: {
                    area_id: area_id
                },
                success: function(data){
                    $("#lokasi_id").find("option").not(':first').remove();
                    for (let i=0;i<data.length;i++) {
                        let select = document.getElementById("lokasi_id");
                        let option = document.createElement('option');
                        option.value=data[i].id;
                        option.text=data[i].nama;
                        select.add(option);
                    }
                }
            });
        }

        async function updateData(){
            let dataChart = await getData();
            
            if(await dataChart){
                setBarChart(dataChart);
                setLineChart(dataChart);
            }
            let dataDataTable = await setDataTable(); 
        }        

        function getData(){
            return $.ajax({
                url: "{{ url('training/dashboard/data') }}",
                type: "post",
                dataType: "json",
                data: {
                    area_id: $('#area_id').val(),
                    lokasi_id: $('#lokasi_id').val(),
                    divisi_id: $('#divisi_id').val(),
                    earlyDate: $('#earlyDate').val(),
                    lastDate: $('#lastDate').val()
                },
                succcess: function(data){
                }
            });

        }

        function setRadialChart(){
            let options = {
                    series: [{{$percentage_employee_trained}}],
                    chart: {
                        height: 200,
                        type: 'radialBar',
                        toolbar: {
                            show: true
                        }
                    },
                    plotOptions: {
                        radialBar: {
                            startAngle: -135,
                            endAngle: 225,
                            hollow: {
                            margin: 0,
                            size: '70%',
                            background: '#fff',
                            image: undefined,
                            imageOffsetX: 0,
                            imageOffsetY: 0,
                            position: 'front',
                            dropShadow: {
                                enabled: true,
                                top: 3,
                                left: 0,
                                blur: 4,
                                opacity: 0.5
                            }
                            },
                            track: {
                                background: '#fff',
                                strokeWidth: '67%',
                                margin: 0, // margin is in pixels
                                dropShadow: {
                                    enabled: true,
                                    top: -3,
                                    left: 0,
                                    blur: 4,
                                    opacity: 0.7
                                }
                            },
                        
                            dataLabels: {
                                show: true,
                                name: {
                                    offsetY: -10,
                                    show: true,
                                    color: '#888',
                                    fontSize: '12px'
                                },
                                value: {
                                    formatter: function(val) {
                                        return parseFloat(val).toFixed(1);
                                    },
                                    color: '#ff8c00',
                                    fontSize: '36px',
                                    fontWeight: 700,
                                    show: true,
                                }
                            }
                        }
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shade: 'dark',
                            type: 'horizontal',
                            shadeIntensity: 0.5,
                            gradientToColors: ['#ABE5A1'],
                            inverseColors: true,
                            opacityFrom: 1,
                            opacityTo: 1,
                            stops: [0, 100]
                        }
                    },
                    stroke: {
                        lineCap: 'round'
                    },
                    labels: ['Percent'],
                };

                RadialChart = new ApexCharts(document.querySelector("#chartKaryawan"), options);
                RadialChart.render();
        }

        function setBarChart(paramBarChart){
            let options = {
                    series: [{
                        data: paramBarChart.barData.value
                    }],
                    chart: {
                        type: 'bar',
                        height: 350
                    },
                    plotOptions: {
                        bar: {
                            borderRadius: 4,
                            borderRadiusApplication: 'end',
                            horizontal: true,
                        }
                    },
                    title: {
                        text: 'Jumlah karyawan yang telah mengikuti training',
                        align: 'left'
                    },
                    subtitle:{
                        text: $('#earlyDate').val()+' sampai '+$('#lastDate').val()
                    },
                    grid: {
                        show: false, // you can either change hear to disable all grids
                    },
                    dataLabels: {
                        enabled: false
                    },
                    yaxis: {
                        title: {
                            text: 'Nama Training'
                        },
                    },
                    xaxis: {
                        categories: paramBarChart.barData.name,
                        title: {
                            text: 'Jumlah Karyawan'
                        },
                    }
                };


            if(chart != null){
                chart.updateOptions({
                    subtitle:{
                        text: $('#earlyDate').val()+' sampai '+$('#lastDate').val()
                },
                series: [{
                        data: paramBarChart.barData.value
                    }],
                    xaxis: {
                        categories: paramBarChart.barData.name,
                    }
                })
            }else{
                chart = new ApexCharts(document.querySelector("#myChart"), options);
                chart.render();
            }
        }

        function setLineChart(param){
            console.log(param)
            // for(let i = 0; i < param.lineData.length; i++){
            //     param.lineData[i].data = param.lineData[i].data.map(function(item){
            //         return [(new Date(item[0])).toISOString(), item[1]]
            //     })
            // }
            console.log(param.lineData)
            let options = {
                series: param.lineData,
                chart: {
                    type: 'area',
                    stacked: false,
                    height: 350,
                    zoom: {
                        type: 'x',
                        enabled: true,
                        autoScaleYaxis: true
                    },
                    toolbar: {
                        autoSelected: 'zoom'
                    }
                },
                dataLabels: {
                enabled: false
                },
                markers: {
                size: 0,
                },
                title: {
                    text: 'Jumlah Karyawan yang telah mengikuti training',
                    align: 'left'
                },
                subtitle:{
                    text: $('#earlyDate').val()+' sampai '+$('#lastDate').val()
                },
                fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    inverseColors: false,
                    opacityFrom: 0.9,
                    opacityTo: 0,
                    stops: [0, 90, 100]
                },
                },
                grid: {
                        show: false, // you can either change hear to disable all grids
                    },
                yaxis: {
                    title: {
                        text: 'Jumlah'
                    },
                },
                xaxis: {
                    type: 'datetime',
                },
                tooltip: {
                    shared: false,
                }
            };

           
            if(LineChart != null){
                LineChart.updateOptions({
                    subtitle:{
                        text: $('#earlyDate').val()+' sampai '+$('#lastDate').val()
                },
                series: param.lineData,
                })
            }else{
                LineChart = new ApexCharts(document.querySelector("#lineChart"), options);
                LineChart.render();
            }

        }

        function setDataTable(){
            if(table != null){
                table.destroy()
            }
            let earlyDate = $('#earlyDate').val()
            let lastDate = $('#lastDate').val()
            table = $('#datatables').DataTable({
                processing: true,
                responsive: true,
                serverSide: true,
                destroy: true,
                ajax: {
                    url: "{{ url('training/dashboard/get-data-table') }}",
                    type: "POST",
                    data: {                    
                        area_id: $('#area_id').val(),
                        lokasi_id: $('#lokasi_id').val(),
                        divisi_id: $('#divisi_id').val(),
                        earlyDate: earlyDate,
                        lastDate: lastDate
                    }
                },
                columns: [
                    {
                        data: 'nik',
                        orderable: false,
                        searchable: false,
                        width: '5%'
                    },
                    {
                        data: 'nama',
                        name: 'nama'
                    },
                    {
                        data: 'lokasi',
                        name: 'lokasi'
                    },
                    {
                        data: 'divisi',
                        name: 'divisi'
                    },
                    {
                        data: 'date',
                        name: 'date',
                        width: '5%',
                    },
                    {
                        data: 'nama_training',
                        name: 'nama_training'
                    },
                    {
                        data: 'score',
                        name: 'score',   
                        width: '5%',    
                        render:function(data,type,row){
                                return parseInt(data);
                            },
                    },
                ]
            });
        }
        
        function exportData(){
            let earlyDate = $('#earlyDate').val();
            let lastDate = $('#lastDate').val();
            location.href = `{{ url('training/dashboard/export') }}/${earlyDate}/${lastDate}`;
        }
	</script>
@endpush