@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">Raport 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="row g-3 mt-3">
                <div class="col-auto">
                    <label for="staticEmail2">Tipe</label>
                </div>
                <div class="col-auto">
                    <select name="type" id="type" class="form-control" onchange="getKategori()">
                        @foreach($types as $value)
                            <option value="{{ $value->raport_key }}">{{ $value->raport_value }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-auto">
                    <label for="staticEmail2">Kategori</label>
                </div>
                <div class="col-auto raport_kategori_div">
                    <select name="raport_kategori" id="raport_kategori" class="form-control" style="min-width: 200px">
                        <option value="">Pilih Kategori</option>
                    </select>
                </div>
            </div>

            <div class="row g-3 mt-3">
                <div class="col-auto">
                    <label for="staticEmail2">Tanggal</label>
                </div>
                <div class="col-auto">
                    <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-auto">
                    <button type="button" class="btn btn-primary mb-3" 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);">
                            <div class="card-body py-4-5">
                                <div class="row">
                                    <div class="col-md-4" style="margin:auto;text-align:center">
                                        
                                        <h2 class="font-extrabold mb-0 text-white"><span id="countAll"></span></h2>
                                    </div>
                                    <div class="col-md-8 ">
                                        <h5 class="text-blue font-bold" style="text-align:right">TOTAL <span class="typeText"></span></h5>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card" style="background: #EDF1F4;background: linear-gradient(to bottom,#C2E9FB,#A1C4FD);">
                            <div class="card-body py-4-5">
                                <div class="row">
                                    <div class="col-md-4" style="margin:auto;text-align:center">
                                        
                                        <h2 class="font-extrabold mb-0 text-white"><span id="countAllLastYear"></span></h2>
                                    </div>
                                    <div class="col-md-8 ">
                                        <h5 class="text-blue font-bold" style="text-align:right">TOTAL <span class="typeText"></span> TAHUN LALU</h5>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card" style="background: #EDF1F4;background: linear-gradient(to bottom,#C2E9FB,#A1C4FD);">
                            <div class="card-body py-4-5">
                                <div class="row">
                                    <div class="col-md-4" style="margin:auto;text-align:center">
                                        <h2 class="font-extrabold mb-0 text-white"><span id="countAllThisYear"></span></h2>
                                    </div>
                                    <div class="col-md-8 ">
                                        <h5 class="text-blue font-bold" style="text-align:right">TOTAL <span class="typeText"></span> TAHUN INI</h5>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <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-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>Kategori</th>
                                                <th>Tanggal</th>
                                                <th>File</th>
                                                <th>Keterangan</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;
        var chart; 
        (function() {
            updateData();
            if($('#type').val() != ""){
                getKategori();
            }
        })();

        function getKategori(){
            var type = $('#type').val()
            $.ajax({
                url: "{{ url('raport/get-kategori') }}",
                type: "POST",
                data: {
                    type: type
                },
                success: function(data){
                    var html = '<option value="">Pilih Kategori</option>'
                    data.forEach(function(item){
                        html += '<option value="'+item.id+'">'+item.nama+'</option>'
                    })
                    $('#raport_kategori').html(html)
                }
            })
        }

        async function updateData(){
            $('.typeText').html($('#type option:selected').text())
            let totalDataType = await getTotalByType();
            let dataChart = await getChartData();
            
            if(await getTotalByType && await dataChart){
                $('#countAll').html(totalDataType.raport_all[0].total)
                $('#countAllLastYear').html(totalDataType.raport_last_year[0].total);
                $('#countAllThisYear').html(totalDataType.raport_this_year[0].total)
                setChart(dataChart);
            }
            let dataDataTable = await setDataTable(); 
        }        

        function getTotalByType(){
            return $.ajax({
                url: "{{ url('raport/get-total-by-type') }}",
                type: "post",
                dataType: "json",
                data: {
                    type: $('#type').val(),
                    kategori: $('#raport_kategori').val(),
                    earlyDate: $('#earlyDate').val(),
                    lastDate: $('#lastDate').val()
                },
                succcess: function(data){
                }
            });
        }

        function getChartData(){
            return $.ajax({
                url: "{{ route('raport.get-data-chart') }}",
                type: "post",
                dataType: "json",
                data: {
                    type: $('#type').val(),
                    kategori: $('#raport_kategori').val(),
                    earlyDate: $('#earlyDate').val(),
                    lastDate: $('#lastDate').val()
                },
                succcess: function(data){
                }
            });
        }

        function setDataTable(){
            if(table != null){
                table.destroy()
            }
            let type = $('#type').val()
            let kategori = $('#raport_kategori').val()
            let earlyDate = $('#earlyDate').val()
            let lastDate = $('#lastDate').val()
            table = $('#datatables').DataTable({
                processing: true,
                responsive: true,
                serverSide: true,
                destroy: true,
                ajax: {
                    url: "{{ url('raport/get-data-table') }}",
                    type: "POST",
                    data: {
                        type: type,
                        kategori: kategori,
                        earlyDate: earlyDate,
                        lastDate: lastDate
                    }
                },
                columns: [
                    {
                        data: 'nik',
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data: 'nama',
                        name: 'nama'
                    },
                    {
                        data: 'raport_kategori.nama',
                        name: 'nama',
                        render:function(data,type,row){
                            console.log(data)
                                return data == null ? $('#type option:selected').html() : $('#type option:selected').html() +' - '+ data;
                            },
                    },
                    {
                        data: 'tanggal',
                        name: 'tanggal'
                    },
                    {data:"file",render:function(data,type,row){
                                return data == null ? "" :
                                    `<a href="{{ asset('uploads') }}/${row.nik}/raport/${row.type}/${data}" target="_blank">Lampiran</a>`;
                            }},
                    {
                        data: 'keterangan',
                        name: 'keterangan'
                    }
                ]
            });
        }

        function setChart(data){
            var options = {
                series: 
                [data.data],
                chart: {
                    toolbar: {
                        show: true,
                        offsetX: 0,
                        offsetY: 0,
                        tools: {
                        download: true,
                        selection: true,
                        zoom: true,
                        zoomin: true,
                        zoomout: true,
                        pan: true,
                        reset: true | '<img src="/static/icons/reset.png" width="20">',
                        customIcons: []
                        },
                        autoSelected: 'zoom' 
                    },
                    height: 250,
                    type: 'line',
                    dropShadow: {
                        enabled: true,
                        color: '#FEB019',
                        top: 18,
                        left: 7,
                        blur: 10,
                        opacity: 0.3
                    },
                },
                colors:['#FEB019'],
                dataLabels: {
                    enabled: true,
                },
                stroke: {
                    curve: 'smooth'
                },
                title: {
                    text: 'Jumlah karyawan yang mendapat '+$('#type option:selected').text(),
                    align: 'left'
                },
                grid: {
                    show: false, // you can either change hear to disable all grids
                },
                markers: {
                    size: 1
                },
                xaxis: {
                    categories: data.tanggal,
                    title: {
                        text: 'Waktu'
                    },
                    labels: {
                        rotate: -45,
                    }
                },
                yaxis: {
                    title: {
                        text: 'Jumlah'
                    },
                },
                legend: {
                    position: 'top',
                    horizontalAlign: 'right',
                    floating: true,
                    offsetY: -25,
                    offsetX: -5
                }
            };
            
            if(chart != null){
                chart.updateOptions({
                    title: {
                                text: 'Jumlah karyawan yang mendapat '+$('#type option:selected').text(),
                            },
                            series: [data.data],
                            xaxis: {
                                categories: data.tanggal,
                            }
                })
            }else{
                chart = new ApexCharts(document.querySelector("#myChart"), options);
                chart.render();
            }
        }

        function exportData(){
            console.log('export')
            let type = $('#type').val();
            let kategori = $('#raport_kategori').val() == '' ? '-' : $('#raport_kategori').val();
            let earlyDate = $('#earlyDate').val();
            let lastDate = $('#lastDate').val();
            location.href = `{{ url('raport/export') }}/${type}/${kategori}/${earlyDate}/${lastDate}`;
        }
	</script>
@endpush