@extends(backpack_view('blank'))
@section('style')
@endsection
@section('after_styles')
    <link rel="stylesheet" href="{{ asset('gantt/skins/dhtmlxgantt_meadow.css') }}" type="text/css" media="screen" title="no title" charset="utf-8">
    <style>
        /* basic positioning */
        .legend { list-style: none; }
        .legend li { float: left; margin-right: 10px; margin-top:10px; }
        .legend span { border: 1px solid #ccc; float: left; width: 15px; height: 15px; margin: 5px; }
        /* your colors */
        .legend .sesuaisla { background-color: #ccffcc; }
        .legend .klienslowrespon { background-color: #fff998; }
        .legend .pengerjaanlamban { background-color: #ff9c9e; }
        .legend .projectbatal { background-color: #80817F; }
        .weekend{ background: #f4f7f4 !important;}
        .baseline {
            background: #ffd180;
            border: 0px solid rgb(255, 153, 0);
        }
    </style>
@endsection
@section('content')
    <main class="pt-2">
        <nav aria-label="breadcrumb" class="d-none d-lg-block">
            <ol class="breadcrumb bg-transparent p-0 justify-content-end">
                <li class="breadcrumb-item text-capitalize"><a href="{{ url('dashboard') }}">Dashboard</a></li>
            </ol>
        </nav>
        <h2>
            <span class="text-capitalize">Dashboard On Time Delivery Report</span>
        </h2>
        <div class="row">
            <div class="form-group col-md-7 required" element="div">

            </div>
            <div class="form-group col-md-2 required" element="div">
                <label>Tanggal Awal</label>
                <input type="date" id="tgl_awal_filter" value="{{ $tanggal['tgl_awal_filter'] }}" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" placeholder="yyyy-mm-dd" class="form-control">
            </div>

            <div class="form-group col-md-2 required" element="div">
                <label>Tanggal Akhir</label>
                <input type="date" id="tgl_akhir_filter" value="{{ $tanggal['tgl_akhir_filter'] }}" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" placeholder="yyyy-mm-dd" class="form-control">
            </div>
            <div class="form-group col-md-1 required" element="div">
            <label>&ensp;</label><br>
                <button type="button" class="btn btn-primary" onclick="Filter()"><span class="la la-ban"></span> Filter</button>
            </div>


        </div>

    </main>
    <div class="row">
        <div class="col-sm-6 col-lg-3">
            <a id="link_total" href="{{route('tasks.index', ['tgl_awal' => $tanggal['tgl_awal_filter'], 'tgl_akhir' => $tanggal['tgl_akhir_filter']])}}" class="card border-0 text-white bg-primary">
                <div class="card-body">

                    <div class="d-flex justify-content-between">
                        <h4 class="h3 bold-text">TOTAL PROJECT</h4>
                        <div id="kpi_total" class="text-value">{{ $monitoringKPI->total }}</div>
                    </div>


                    <div class="progress progress-white progress-xs my-2">
                        <div id="total" class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="{{ $monitoringKPI->total }}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <small class="text-value">Total pekerjaan.</small>
                </div>

            </a>
        </div>

        <div class="col-sm-6 col-lg-2">
            <a id="link_final" href="{{route('tasks.index', ['status'=> 'final', 'tgl_awal' => $tanggal['tgl_awal_filter'], 'tgl_akhir' => $tanggal['tgl_akhir_filter']])}}" class="card border-0 text-white bg-success">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <h4 class="h3 bold-text">SELESAI</h4>
                        <div id="kpi_selesai" class="text-value">{{ $monitoringKPI->total_selesai }}</div>
                    </div>


                    <div class="progress progress-white progress-xs my-2">
                        <div id="selesai" class="progress-bar" role="progressbar" style="width:0%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <small class="text-value">Sesuai SLA.</small>
                </div>

            </a>
        </div>
        <div class="col-sm-6 col-lg-3">
            <a id="link_onprogress" href="{{route('tasks.index', ['status'=> 'onprogress', 'tgl_awal' => $tanggal['tgl_awal_filter'], 'tgl_akhir' => $tanggal['tgl_akhir_filter']])}}" class="card border-0 text-white bg-warning">
                <div class="card-body">

                    <div class="d-flex justify-content-between">
                        <h4 class="h3 bold-text">ON PROGRESS</h4>
                        <div id="kpi_onprogress" class="text-value">{{ $monitoringKPI->total_onprogress }}</div>
                    </div>

                    <div class="progress progress-white progress-xs my-2">
                        <div id="progress" class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <small class="text-value">Sedang dalam pengerjaan.</small>
                </div>

            </a>
        </div>

        <div class="col-sm-6 col-lg-2">
            <a id="link_pending" href="{{route('tasks.index', ['status'=> 'pending', 'tgl_awal' => $tanggal['tgl_awal_filter'], 'tgl_akhir' => $tanggal['tgl_akhir_filter']])}}" class="card border-0 text-white bg-danger">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <h4 class="h3 bold-text">PENDING</h4>
                        <div id="kpi_pending" class="text-value">{{ $monitoringKPI->total_pending }}</div>
                    </div>

                    <div class="progress progress-white progress-xs my-2">
                        <div id="pending" class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <small class="text-value">Pekerjaan dipending.</small>
                </div>

            </a>
        </div>
    <div class="col-sm-6 col-lg-2">
        <a id="link_batal" href="{{route('tasks.index', ['status'=> 'batal', 'tgl_awal' => $tanggal['tgl_awal_filter'], 'tgl_akhir' => $tanggal['tgl_akhir_filter']])}}" class="card border-0 text-white bg-dark">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <h4 class="h3 bold-text">BATAL</h4>
                    <div id="kpi_batal" class="text-value">{{ $monitoringKPI->total_batal }}</div>
                </div>



                <div class="progress progress-white progress-xs my-2">
                    <div id="batal" class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>

                <small class="text-value">Pekerjaan dibatalkan.</small>
            </div>

        </a>
    </div>

    <br/>
    <div class="row">
        <div class="col-sm-6 col-lg-12">
            @include('monitoring.delivery')
        </div>
    </div>
    <br/>
    {{-- TODO: Filter Tenaga Ahli --}}
    <div class="row">
        <div class="highcharts-title">
            <h3 class="text-center mb-0 mt-3">Tenaga Ahli</h3>
        </div>
        @php
            $categories = ['PENILAI', 'SURVEYOR']
           @endphp
        <div class="col-sm-6 col-lg-6">
            @include('monitoring.produktivitas', compact('categories'))
        </div>
        <div class="col-sm-6 col-lg-6">
            @include('monitoring.produktivitasonprogress', compact('categories'))
        </div>
    </div>
    <br/>
    {{-- TODO: Filter Reviewer --}}
    <div class="row">
        <div class="highcharts-title">
            <h3 class="text-center mb-0 mt-3">Reviewer</h3>
        </div>
        @php
            $categories = ['PENILAI', 'SURVEYOR'];
            $prefix_id = "reviewer_";
        @endphp
        <div class="col-sm-6 col-lg-6">
            @include('monitoring.produktivitas_reviewer')
        </div>
        <div class="col-sm-6 col-lg-6">
            @include('monitoring.produktivitasonprogress_reviewer')
        </div>
    </div>
    <br/>
    <div class="row">
        <div class="col-sm-12 col-lg-12">
            @include('monitoring.pekerjaanonprogress')
        </div>
    </div>
    <br/>
    <!-- highchart jenispekerjaan (valuation, consulting, advisory) -->
    <div class="row">
        <div class="col-md-5">
            @include('monitoring.channelpekerjaan')
        </div>
        <div class="col-md-7">
            @include('monitoring.jenispekerjaan')
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm-12 col-lg-12">
            <div>
                <div>
                    <div id="formObjectPenilaian">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                <div class="row">

                                    {{--DISINI MAPS--}}
                                    <div class="col-md-12">
                                        <div class="my-2">
                                            <div id="map" class="w-100" style="height: 420px !important;"></div>
                                        </div>
                                    </div>
                                    <div class="card pt-2">
                                        <div class="card-body">
                                            <p id="" class="nama"></p>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('after_scripts')
@include('monitoring.gmaps')
@include('monitoring.object_maps')
    <script src="{{ asset('assets/highcharts/highcharts.js') }}"></script>
    <script src="{{ asset('assets/highcharts/modules/exporting.js') }}"></script>
    <script src="{{ asset('assets/highcharts/modules/export-data.js') }}"></script>
    <script src="{{ asset('assets/highcharts/modules/accessibility.js') }}"></script>
    <script src="{{ asset('assets/highcharts/highcharts-more.js') }}"></script>
    <script src="{{ asset('assets/highcharts/modules/data.js') }}"></script>
    <script src="{{ asset('assets/highcharts/modules/variable-pie.js') }}"></script>
    <script>
        function Filter(val) {
            var tgl_awal = document.getElementById("tgl_awal_filter").value;
            var tgl_akhir = document.getElementById("tgl_akhir_filter").value;

            $.ajax({
                type : 'get',
                url : "{{ url('monitoring/getkpi') }}"+'/'+tgl_awal+'/'+tgl_akhir,
                success: function(data){
                    // console.log(data.data);
                            // Mengambil nilai total data
                            var dataTotal = data.data.total;
                            var dataOnProgress = data.data.total_onprogress;
                            var dataPending = data.total_pending;
                            console.log('pending', dataPending, data);
                            var dataSelesai = data.data.total_selesai;
                            var dataBatal = data.data.total_batal;

                            // Menghitung persentase
                            var total = (dataTotal / dataTotal) * 100;
                            var onProgress = (dataOnProgress / dataTotal) * 100;
                            var pending = (dataPending / dataTotal) * 100;
                            var selesai = (dataSelesai / dataTotal) * 100;
                            var batal  = (dataBatal / dataTotal) * 100;
                            // var progress = (dataTotal / data)

                            // Memanipulasi style width pada elemen dengan id "total"
                            var totalElement = document.getElementById('total');
                            totalElement.style.width = total + '%';
                            // Menetapkan nilai pada atribut aria-valuenow
                            totalElement.setAttribute('aria-valuenow', dataTotal);
                            // console.log(data.total, data);
                            var progressElement = document.getElementById('progress');
                            progressElement.style.width = onProgress + '%';
                            // Menetapkan nilai pada atribut aria-valuenow
                            progressElement.setAttribute('aria-valuenow', dataOnProgress);

                            var pendingElement = document.getElementById('pending');
                            pendingElement.style.width = pending + '%';
                            pendingElement.setAttribute('aria-valuenow', dataPending);

                            var SelesaiElement = document.getElementById('selesai');
                            SelesaiElement.style.width = selesai + '%';
                            SelesaiElement.setAttribute('aria-valuenow', dataSelesai);

                            var batalElement = document.getElementById('batal');
                            batalElement.style.width = batal + '%';
                            batalElement.setAttribute('aria-valuenow', dataBatal);

                    $('#kpi_total').text(data.data.total);
                    $('#kpi_selesai').text(data.data.total_selesai);
                    $('#kpi_onprogress').text(data.data.total_onprogress);
                    $('#kpi_pending').text(data.data.total_pending);
                    $('#kpi_batal').text(data.data.total_batal);

                    document.getElementById("link_total").setAttribute('href', "{{ url('tasks') }}?tgl_awal="+tgl_awal+"&tgl_akhir="+tgl_akhir+"");
                    document.getElementById("link_onprogress").setAttribute('href', "{{ url('tasks') }}?status=onprogress&tgl_awal="+tgl_awal+"&tgl_akhir="+tgl_akhir+"");
                    document.getElementById("link_final").setAttribute('href', "{{ url('tasks') }}?status=final&tgl_awal="+tgl_awal+"&tgl_akhir="+tgl_akhir+"");
                    document.getElementById("link_batal").setAttribute('href', "{{ url('tasks') }}?status=batal&tgl_awal="+tgl_awal+"&tgl_akhir="+tgl_akhir+"");
                    document.getElementById("link_pending").setAttribute('href', "{{ url('tasks') }}?status=pending&tgl_awal="+tgl_awal+"&tgl_akhir="+tgl_akhir+"");

                }
            });

            $.ajax({
                url: "{{ route('monitoring.index.semicircledelivery') }}",
                type: "GET",
                dataType: "json",
                data : {
                    tgl_awal : tgl_awal,
                    tgl_akhir : tgl_akhir,
                },
                success: function(data) {
                    // console.log(data.data);
                    while(semiCircleDelivery.series.length>0){
                        semiCircleDelivery.series[0].remove(false) //false = don't redraw
                    }
                    var checkPieTotal = 0
                    for (var i = 0; i < data.length; i++) {
                        (data[i].y == 0) ? checkPieTotal++ : '' ;
                    }
                    if (checkPieTotal == data.length) {
                        $('#semi-circle-delivery').html('<div class="align-middle text-center" style="height: 400px;margin-top:10px;"><br><br><br><br><br><br><h5><span class="badge badge-secondary">No Data Available</span></h5></div>')
                    }else{
                        semiCircleDelivery.redraw() // update the visual aspect
                        semiCircleDelivery.addSeries({
                            type: 'pie',
                            innerSize: '50%',
                            name: 'Pekerjaan Selesai',
                            dataLabels: {
                                enabled: false
                            },
                            data: data
                        });
                    }
                },
                cache: false
            });

            //Tenaga Ahli (Total)
            $.ajax({
                url: "{{ route('monitoring.index.productivity') }}",
                type: "GET",
                dataType: "json",
                data : {
                    categories: ['PENILAI', 'SURVEYOR'],
                    tgl_awal : tgl_awal,
                    tgl_akhir : tgl_akhir,
                },
                success: function(data) {
                    while(tenaga_ahli_pieProductivity.series.length>0){
                        tenaga_ahli_pieProductivity.series[0].remove(false) //false = don't redraw
                    }
                    var checkPieTotal = 0
                    for (var i = 0; i < data.length; i++) {
                        (data[i].y == 0) ? checkPieTotal++ : '' ;
                    }
                    //if (checkPieTotal == data.length) {
                    //    $('#tenaga_ahli_circle-productivity').html('<div class="align-middle text-center" style="height: 400px;margin-top:10px;"><br><br><br><br><br><br><h5><span class="badge badge-secondary">No Data</span></h5></div>')
                    //}else{
                        tenaga_ahli_pieProductivity.redraw() // update the visual aspect
                        tenaga_ahli_pieProductivity.addSeries({
                            type: 'pie',
                            name: 'Productivity',
                            data: data
                        });
                    //}
                },
                cache: false
            });

            //Tenaga Ahli On Progress
            $.ajax({
                url: "{{ route('monitoring.index.productivityonprogress') }}",
                type: "GET",
                dataType: "json",
                data : {
                    categories: ['PENILAI', 'SURVEYOR'],
                    tgl_awal : tgl_awal,
                    tgl_akhir : tgl_akhir,
                },
                success: function(data) {
                    while(tenagaAhliPieProductivityOnProgress.series.length>0){
                        tenagaAhliPieProductivityOnProgress.series[0].remove(false) //false = don't redraw
                    }
                    var checkPieTotal = 0
                    for (var i = 0; i < data.length; i++) {
                        (data[i].y == 0) ? checkPieTotal++ : '' ;
                    }
                    //if (checkPieTotal == data.length) {
                    //    $('#tenaga_ahli_circle_productivityonprogress').html('<div class="align-middle text-center" style="height: 400px;margin-top:10px;"><br><br><br><br><br><br><h5><span class="badge badge-secondary">No Data</span></h5></div>')
                    //}else{
                        tenagaAhliPieProductivityOnProgress.redraw() // update the visual aspect
                        tenagaAhliPieProductivityOnProgress.addSeries({
                            type: 'pie',
                            name: 'Productivity',
                            data: data
                        });
                    //}
                },
                cache: false
            });

            //Reviewe (On Progress)
            $.ajax({
                url: "{{ route('monitoring.index.productivityonprogress') }}",
                type: "GET",
                dataType: "json",
                data : {
                    categories: ['PENILAI', 'SURVEYOR'],
                    tgl_awal : tgl_awal,
                    tgl_akhir : tgl_akhir,
                },
                success: function(data) {
                    while(reviewerPieProductivityOnProgress.series.length>0){
                        reviewerPieProductivityOnProgress.series[0].remove(false) //false = don't redraw
                    }
                    var checkPieTotal = 0
                    for (var i = 0; i < data.length; i++) {
                        (data[i].y == 0) ? checkPieTotal++ : '' ;
                    }
                    //if (checkPieTotal == data.length) {
                    //    $('#reviewer_circle_productivityonprogress').html('<div class="align-middle text-center" style="height: 400px;margin-top:10px;"><br><br><br><br><br><br><h5><span class="badge badge-secondary">No Data</span></h5></div>')
                    //}else{
                        reviewerPieProductivityOnProgress.redraw() // update the visual aspect
                        reviewerPieProductivityOnProgress.addSeries({
                            type: 'pie',
                            name: 'Productivity',
                            data: data
                        });
                    //}
                },
                cache: false
            });
            //Reviewer (Total)
            $.ajax({
                url: "{{ route('monitoring.index.productivity') }}",
                type: "GET",
                dataType: "json",
                data : {
                    categories: ['REVIEWER'],
                    tgl_awal : tgl_awal,
                    tgl_akhir : tgl_akhir,
                },
                success: function(data) {
                    while(reviewer_pieProductivity.series.length>0){
                        reviewer_pieProductivity.series[0].remove(false) //false = don't redraw
                    }
                    var checkPieTotal = 0
                    for (var i = 0; i < data.length; i++) {
                        (data[i].y == 0) ? checkPieTotal++ : '' ;
                    }
                    //if (checkPieTotal == data.length) {
                    //    $('#reviewer_circle-productivity').html('<div class="align-middle text-center" style="height: 400px;margin-top:10px;"><br><br><br><br><br><br><h5><span class="badge badge-secondary">No Data</span></h5></div>')
                    //}else{
                        reviewer_pieProductivity.redraw() // update the visual aspect
                        reviewer_pieProductivity.addSeries({
                            type: 'pie',
                            name: 'Productivity',
                            data: data
                        });
                    //}
                },
                cache: false
            });

            //Pekerjaan On Progress
            $.ajax({
                url: "{{ route('monitoring.index.pekerjaanonprogress') }}",
                type: "GET",
                dataType: "json",
                data : {
                    tgl_awal : tgl_awal,
                    tgl_akhir : tgl_akhir,
                },
                success: function(data) {
                    barChartPekerjaan.update({
                        series: [{
                            data: data.data
                        }]
                    }, true, true);
                    barChartPekerjaan.redraw() // update the visual aspect
                },
                cache: false
            });

            //Channel
            $.ajax({
                url: "{{ route('monitoring.index.channelpekerjaan') }}",
                type: "GET",
                dataType: "json",
                data : {
                    tgl_awal : tgl_awal,
                    tgl_akhir : tgl_akhir,
                },
                success: function(data) {
                    barChartChannel.xAxis[0].setCategories(data.categories);
                    barChartChannel.update({
                        series: {
                            data : data.data
                        }
                    }, true, true);
                    barChartChannel.redraw() // update the visual aspect
                },
                cache: false
            });

            //Jenis Pekerjaan
            $.ajax({
                url: "{{ route('monitoring.index.jenispekerjaan') }}",
                type: "GET",
                dataType: "json",
                data : {
                    tgl_awal : tgl_awal,
                    tgl_akhir : tgl_akhir,
                },
                success: function(data) {
                    barChartJenis.xAxis[0].setCategories(data.categories);
                    barChartJenis.update({
                        series: {
                            data : data.data
                        }
                    }, true, true);
                    barChartJenis.redraw() // update the visual aspect
                },
                cache: false
            });
        }
    </script>
@endsection