@extends('layouts.app')

@push('head-script')
<style>
    .carousel-control.left{
        background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0, 0, 0, 0) 100%) !important;
    }
    .carousel-control.right{
        background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0, 0, 0, 0) 100%) !important;
    }
    .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev{
        color:#BDBDBD;
        border: 1px solid #000;
        background-color:#d3d3d3;
        width: 30px !important;
        height: 24px !important;
    }
    .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next{
        color:#BDBDBD;
        border: 1px solid #000;
        background-color:#d3d3d3;
        width: 30px !important;
        height: 24px !important;
    }
    .carousel-indicators{
        display:none;
    }
    .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev{
        font-size:18px;
    }
    .fc-event{
        font-size: 10px !important;
    }
    #calendar .fc-view-container .fc-view .fc-more-popover{
        top: 136px !important;
        left: 105px !important;
    }
    @keyframes fa-blink {
        0% { opacity: 1; }
        25% { opacity: 0.25; }
        50% { opacity: 0.5; }
        75% { opacity: 0.75; }
        100% { opacity: 0; }
    }
    .fa-blink {
        -webkit-animation: fa-blink 1.75s linear infinite;
        -moz-animation: fa-blink 1.75s linear infinite;
        -ms-animation: fa-blink 1.75s linear infinite;
        -o-animation: fa-blink 1.75s linear infinite;
        animation: fa-blink 1.75s linear infinite;
    }
    .dashboard-clock {
        font-size: 26px;
        font-weight: 300;
    }
    #slash-custom{
        position: inherit;
        content: "/";
        color: red;
        font-weight: 100;
        font-size: 3.3em;
    }
    #description_recent_tasks p{
        margin-bottom:5px;
    }
    .view_all{
        display:block;
        color: #337ab7;
        text-align:center;
    }
</style>
@endpush
@section('page-title')


<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h4 class="page-title "><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}</h4>
    </div>
</div>
<!-- /.page title -->
<!-- .breadcrumb -->
@endsection

@push('head-script')
<link rel="stylesheet" href="{{ asset('plugins/bower_components/calendar/dist/fullcalendar.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/morrisjs/morris.css') }}"><!--Owl carousel CSS -->
<link rel="stylesheet" href="{{ asset('plugins/bower_components/owl.carousel/owl.carousel.min.css') }}"><!--Owl carousel CSS -->
<link rel="stylesheet" href="{{ asset('plugins/bower_components/owl.carousel/owl.theme.default.css') }}"><!--Owl carousel CSS -->

<style>
    .custom-panel-heading{
        border: 1px solid #ccc;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    .custom-panel-body{
        border: 1px solid #ccc;
    }
    .col-in {
        padding: 0 20px !important;

    }

    .fc-event {
        font-size: 10px !important;
    }

    .dashboard-settings {
        padding-bottom: 8px !important;
    }
    .front-dashboard .white-box{
        margin-bottom: 8px;
    }
    @media (min-width: 769px) {
        #wrapper .panel-wrapper {
            height: 530px;
            overflow-y: auto;
        }
    }

</style>
@endpush

@section('content')

<div class="white-box">
    <div class="row">
        <div class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-heading custom-panel-heading">
                    <div class="row">
                        <div class="col-lg-6">
                            <h4 style="margin-top:6px">Order Per Service</h4>
                        </div>
                        <div class="col-lg-6">
                            <div class="input-daterange input-group" id="date-perservice">
                                <input type="text" class="form-control" autocomplete="off" id="start-date_perservice"
                                       placeholder="@lang('app.startDate')" value="" />
                                <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                                <input type="text" class="form-control" id="end-date_perservice" autocomplete="off"
                                       placeholder="@lang('app.endDate')" value="" />
                            </div>
                        </div>
                    </div>

                </div>
                <div class="panel-body custom-panel-body">
                    <div id="pie_service_order">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-heading custom-panel-heading">
                    <div class="row">
                        <div class="col-lg-6">
                            <h4 style="margin-top:6px">Order Per Status</h4>
                        </div>
                        <div class="col-lg-6">
                            <div class="input-daterange input-group" id="date-perstatus">
                                <input type="text" class="form-control" autocomplete="off" id="start-date_perstatus"
                                       placeholder="@lang('app.startDate')" value="" />
                                <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                                <input type="text" class="form-control" id="end-date_perstatus" autocomplete="off"
                                       placeholder="@lang('app.endDate')" value="" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body custom-panel-body">
                    <div id="pie_status_order">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading custom-panel-heading">

                    <div class="row">
                        <div class="col-lg-6">
                            <h4 style="margin-top:6px">Jobs Distribution Per Service</h4>
                        </div>
                        <div class="col-lg-6">
                            <div class="input-daterange input-group" id="date-jobsvendor">
                                <input type="text" class="form-control" autocomplete="off" id="start-date_jobsvendor"
                                       placeholder="@lang('app.startDate')" value="" />
                                <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                                <input type="text" class="form-control" id="end-date_jobsvendor" autocomplete="off"
                                       placeholder="@lang('app.endDate')" value="" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body custom-panel-body">
                    <div class="row">
                        <div class="col-md-2" id="total_projects" style="padding-right:0px;">

                        </div>
                        <div class="col-md-8" style="padding-left:0px;padding-right:0px;">
                            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                <!-- Wrapper for slides -->
                                <div class="detail_piechart_allocated">

                                </div>


                            </div>
                        </div>
                        <div class="col-md-2" style="padding-left:0px;" id="total_job_done_undone">

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

        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading custom-panel-heading">
                    <div class="row">
                        <div class="col-lg-6">
                            <h4 style="margin-top:6px">Percentage Breached Response Time</h4>
                        </div>
                        <div class="col-lg-6">
                            <div class="input-daterange input-group" id="date-responsetime">
                                <input type="text" class="form-control" autocomplete="off" id="start-date_responsetime"
                                       placeholder="@lang('app.startDate')" value="" />
                                <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                                <input type="text" class="form-control" id="end-date_responsetime" autocomplete="off"
                                       placeholder="@lang('app.endDate')" value="" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body custom-panel-body">
                    <div id="myCarousel_1" class="carousel slide" data-ride="carousel">
                        <!-- Wrapper for slides -->
                        <div class="piechart_breached_response_time">

                        </div>


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

        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading custom-panel-heading">
                    <div class="row">
                        <div class="col-lg-6">
                            <h4 style="margin-top:6px">Percentage Breached Resolve Time</h4>
                        </div>
                        <div class="col-lg-6">
                            <div class="input-daterange input-group" id="date-resolvetime">
                                <input type="text" class="form-control" autocomplete="off" id="start-date_resolvetime"
                                       placeholder="@lang('app.startDate')" value="" />
                                <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                                <input type="text" class="form-control" id="end-date_resolvetime" autocomplete="off"
                                       placeholder="@lang('app.endDate')" value="" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body custom-panel-body">
                    <div id="myCarousel_2" class="carousel slide" data-ride="carousel">
                        <!-- Wrapper for slides -->
                        <div class="piechart_breached_resolve_time">

                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading custom-panel-heading">

                    <div class="row">
                        <div class="col-lg-6">
                            <h4 style="margin-top:6px">Total Claims Per Services</h4>
                        </div>
                        <div class="col-lg-6">
                            <div class="input-daterange input-group" id="date-claimservices">
                                <input type="text" class="form-control" autocomplete="off" id="start-date_claimservices"
                                       placeholder="@lang('app.startDate')" value="" />
                                <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                                <input type="text" class="form-control" id="end-date_claimservices" autocomplete="off"
                                       placeholder="@lang('app.endDate')" value="" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body custom-panel-body">
                    <div id="total_claim_services">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading custom-panel-heading">
                    <div class="row">
                        <div class="col-lg-6">
                            <h4 style="margin-top:6px">Jobs Blast Vs Won Vs Breached</h4>
                        </div>
                        <div class="col-lg-6">
                            <div class="input-daterange input-group" id="date-blastwon">
                                <input type="text" class="form-control" autocomplete="off" id="start-date_blastwon"
                                       placeholder="@lang('app.startDate')" value="" />
                                <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                                <input type="text" class="form-control" id="end-date_blastwon" autocomplete="off"
                                       placeholder="@lang('app.endDate')" value="" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body custom-panel-body">
                    <div id="total_blast_vs_breached_vendor">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading custom-panel-heading">
                    <div class="row">
                        <div class="col-lg-6">
                            <h4 style="margin-top:6px">Jobs Done Vs Breached</h4>
                        </div>
                        <div class="col-lg-6">
                            <div class="input-daterange input-group" id="date-donebreach">
                                <input type="text" class="form-control" autocomplete="off" id="start-donebreach"
                                       placeholder="@lang('app.startDate')" value="" />
                                <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                                <input type="text" class="form-control" id="end-donebreach" autocomplete="off"
                                       placeholder="@lang('app.endDate')" value="" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body custom-panel-body">
                    <div id="total_breached_vendor">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading custom-panel-heading">
                    <div class="row">
                        <div class="col-lg-6">
                            <h4 style="margin-top:6px">Cancellation Per Service</h4>
                        </div>
                        <div class="col-lg-6">
                            <div class="input-daterange input-group" id="date-cancellationservice">
                                <input type="text" class="form-control" autocomplete="off" id="start-cancellationservice"
                                       placeholder="@lang('app.startDate')" value="" />
                                <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                                <input type="text" class="form-control" id="end-cancellationservice" autocomplete="off"
                                       placeholder="@lang('app.endDate')" value="" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body custom-panel-body">
                    <div id="total_cancel_services">

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

        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading custom-panel-heading">
                    <div class="row">
                        <div class="col-lg-8">
                            <h4 style="margin-top:6px">Revenue Per Service</h4>
                        </div>
                        <div class="col-lg-4">
                            <select name="year" id="year_revenue" class="form-control">
                                <option value="2025">2025</option>
                                                                    <option value="2024">2024</option>
                                                                    <option value="2023">2023</option>
                                                                    <option value="2022">2022</option>
                                                                    <option value="2021">2021</option>
                                                                    <option value="2020">2020</option>
                                                                    <option value="2019">2019</option>
                                                                    <option value="2018">2018</option>
                                                                    <option value="2017">2017</option>
                                                                    <option value="2016">2016</option>
                                                                    <option value="2015">2015</option>
                                                            </select>
                        </div>
                    </div>
                </div>
                <div class="panel-body custom-panel-body">
                    <div id="total_revenue_perservice">

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

@endsection


@push('footer-script')
<script src="{{ asset('plugins/bower_components/raphael/raphael-min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/morrisjs/morris.js') }}"></script>

<script src="{{ asset('plugins/bower_components/waypoints/lib/jquery.waypoints.js') }}"></script>
<script src="{{ asset('plugins/bower_components/counterup/jquery.counterup.min.js') }}"></script>

<!-- jQuery for carousel -->
<script src="{{ asset('plugins/bower_components/owl.carousel/owl.carousel.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/owl.carousel/owl.custom.js') }}"></script>

<!--weather icon -->
<script src="{{ asset('plugins/bower_components/skycons/skycons.js') }}"></script>

<script src="{{ asset('plugins/bower_components/moment/moment.js') }}"></script>
<script src="{{ asset('plugins/bower_components/calendar/dist/fullcalendar.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/calendar/dist/jquery.fullcalendar.js') }}"></script>
<script src="{{ asset('plugins/bower_components/calendar/dist/locale-all.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('js/moment-timezone.js') }}"></script>
<script src="{{ asset('js/Chart.min.js') }}"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script>
    function get_pie_service_order() {
    var start_date = $('#start-date_perservice').val();
    var end_date = $('#end-date_perservice').val();
    $.get('/admin/vm_get_ajax_service_order?start=' + start_date + '&end=' + end_date, function (res) {
    Highcharts.chart('pie_service_order', {
    chart: {
    plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
    },
            title: {
            text: null
            },
            credits: {
            enabled: false
            },
            plotOptions: {
            pie: {
            allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                    enabled: false
                    },
                    showInLegend: true
            }
            },
            series: [{
            name: 'Orders',
                    colorByPoint: true,
                    data: res.data
            }]
    });
    }, 'json');
    }
    get_pie_service_order()

            function get_pie_status_order() {
            var start_date = $('#start-date_perstatus').val();
            var end_date = $('#end-date_perstatus').val();
            $.get('/admin/vm_get_ajax_status_order?start=' + start_date + '&end=' + end_date, function (res) {
            Highcharts.chart('pie_status_order', {
            chart: {
            plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
            },
                    title: {
                    text: null
                    },
                    credits: {
                    enabled: false
                    },
                    plotOptions: {
                    pie: {
                    allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                            enabled: false
                            },
                            showInLegend: true
                    }
                    },
                    series: [{
                    name: 'Orders',
                            colorByPoint: true,
                            data: res.data
                    }]
            });
            }, 'json');
            }
    get_pie_status_order()
    function total_claim_services() {
    var start_date = $('#start-date_claimservices').val();
    var end_date = $('#end-date_claimservices').val();
    $.get('/admin/vm_ajax_total_claim_services?start=' + start_date + '&end=' + end_date, function (res)
    {
    Highcharts.chart('total_claim_services', {
    chart: {
    type: 'column'
    },
            title: {
            text: ' '
            },
            xAxis: {
            categories: res.nama,
                    crosshair: true
            },
            credits: {
            enabled: false
            },
            yAxis: {
            min: 0,
                    title: {
                    text: 'Claims Per Services'
                    }
            },
            tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
            },
            plotOptions: {
            column: {
            pointPadding: 0.2,
                    borderWidth: 0
            }
            },
            series: [{
            name: 'Claims Order',
                    data: res.total_claim
            }]
    });
    }, 'json');
    }
    total_claim_services();
    function total_blast_vs_breached_vendor() {
    var start_date = $('#start-date_blastwon').val();
    var end_date = $('#end-date_blastwon').val();
    var url = '/admin/vm_ajax_total_breached_vs_blast?start=' + start_date + '&end=' + end_date;
    $.get(url, function (res)
    {
    Highcharts.chart('total_blast_vs_breached_vendor', {
    chart: {
    type: 'column'
    },
            title: {
            text: ' '
            },
            xAxis: {
            categories: res.name,
                    crosshair: true
            },
            yAxis: {
            min: 0,
                    title: {
                    text: 'Blast Vs Won Vs Breached'
                    }
            },
            credits: {
            enabled: false
            },
            tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
            },
            plotOptions: {
            column: {
            pointPadding: 0.2,
                    borderWidth: 0
            }
            },
            series: [{
            name: 'New',
                    data: res.total_new
            }, {
            name: 'Won',
                    data: res.total_won
            },
            {
            name: 'Breached',
                    data: res.total_breached_response

            }]
    });
    }, 'json');
    }
    total_blast_vs_breached_vendor();
    function total_breached_vendor() {
    var start_date = $('#start-donebreach').val();
    var end_date = $('#end-donebreach').val();
    var url = '/admin/vm_ajax_total_breached?start=' + start_date + '&end=' + end_date;
    $.get(url, function (res)
    {
    Highcharts.chart('total_breached_vendor', {
    chart: {
    type: 'column'
    },
            title: {
            text: ' '
            },
            xAxis: {
            categories: res.name,
                    crosshair: true
            },
            yAxis: {
            min: 0,
                    title: {
                    text: 'Jobs Breached Vs Jobs Done'
                    }
            },
            credits: {
            enabled: false
            },
            tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
            },
            plotOptions: {
            column: {
            pointPadding: 0.2,
                    borderWidth: 0
            }
            },
            series: [{
            name: 'Jobs Done',
                    data: res.total_jobs_done
            }, {
            name: 'Job Breached Response',
                    data: res.total_breached_response
            },
            {
            name: 'Job Breached Resolve',
                    data: res.total_breached

            }]
    });
    }, 'json');
    }
    total_breached_vendor();
    function get_total_cancel_services() {
    var start_date = $('#start-cancellationservice').val();
    var end_date = $('#end-cancellationservice').val();
    $.get('/admin/vm_ajax_total_cancel_services?start=' + start_date + '&end=' + end_date, function (res) {
    Highcharts.chart('total_cancel_services', {
    chart: {
    type: 'column'
    },
            title: {
            text: null
            },
            xAxis: {
            categories: res.categories,
                    crosshair: true
            },
            yAxis: {
            min: 0,
                    title: {
                    text: 'Orders'
                    }
            },
            tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
            },
            plotOptions: {
            column: {
            pointPadding: 0.2,
                    borderWidth: 0
            }
            },
            series: [{
            name: 'Total Blast',
                    data: res.total_blast
            }, {
            name: 'Total Take',
                    data: res.total_take
            }, {
            name: 'Total Cancel',
                    data: res.total_cancel
            }]
    });
    }, 'json');
    }
    get_total_cancel_services()

            function get_data_vendors() {
            var start_date = $('#start-date_jobsvendor').val();
            var end_date = $('#end-date_jobsvendor').val();
            var url = '/admin/vm_ajax_get_data_vendors?start=' + start_date + '&end=' + end_date;
            $.get(url, function (y) {
            $('.detail_piechart_allocated').html(y)
            });
            }
    get_data_vendors()

            function get_total_job_vendor_allocated() {
            var start_date = $('#start-date_jobsvendor').val();
            var end_date = $('#end-date_jobsvendor').val();
            var url = '/admin/vm_job_vendor_allocated?start=' + start_date + '&end=' + end_date;
            $.get(url, function (res) {
            $.each(res, function (i, data) {
            chart = new Highcharts.Chart({
            chart: {
            color: '#fff',
                    renderTo: 'allocated_vendor_' + data.id,
                    marginBottom: 0,
                    marginTop: 0,
                    type: 'pie'
            },
                    title: {
                    text: data.name,
                            y: 70,
                            style: {
                            fontSize: '12px',
                            }
                    },
                    plotOptions: {
                    pie: {
                    shadow: false,
                            borderColor: null
                    }
                    },
                    credits: {
                    enabled: false
                    },
                    tooltip: {
                    formatter: function () {
                    return '<b>' + this.point.name + '</b>: ' + this.y;
                    }
                    },
                    legend: {
                    position: 'bottom',
                            layout: 'vertical',
                            symbolRadius: 0,
                            itemStyle: {
                            "color": "#000"
                            }
                    },
                    series: [{
                    data: [{
                    y: data.total_close,
                            name: data.total_close + " Jobs Done",
                            color: "#0800ff"
                    }, {
                    y: data.total_progress,
                            name: data.total_progress + " On Progress",
                            color: "#ff0a0a"
                    },{
                        y: data.total_new,
                            name: data.total_new + " New",
                            color: "#16fc8d"
                    }],
                            size: '120%',
                            innerSize: '60%',
                            showInLegend: true,
                            dataLabels: {
                            enabled: false
                            },
                            marker: {
                            symbol: 'square',
                                    radius: 12
                            }
                    }]
            });
            });
            }, 'json');
            }

    function get_total_job_done() {

    var start_date = $('#start-date_jobsvendor').val();
    var end_date = $('#end-date_jobsvendor').val();
    var url = '/admin/vm_ajax_total_job_done?start=' + start_date + '&end=' + end_date;
    $.get(url, function (res)
    {
    chart = new Highcharts.Chart({
    chart: {
    color: '#fff',
            renderTo: 'total_job_done_undone',
            marginBottom: 0,
            marginTop: 0,
            type: 'pie'
    },
            title: {
            text: 'Jobs Done',
                    y: 50
            },
            credits: {
            enabled: false
            },
            plotOptions: {
            pie: {
            shadow: false,
                    borderColor: null
            }
            },
            tooltip: {
            formatter: function () {
            return '<b>' + this.point.name + '</b>: ' + this.y;
            }
            },
            legend: {
            position: 'bottom',
                    layout: 'vertical',
                    symbolRadius: 0,
                    itemStyle: {
                    "color": "#000"
                    }
            },
            series: [{
            data: [{
            y: res.total_close,
                    name: res.total_close + " Jobs Done",
                    color: "#0800ff"
            }, {
            y: res.total_progress,
                    name: res.total_progress + " On Progress",
                    color: "#ff0a0a"
            },{
                y: res.total_pending,
                    name: res.total_pending + " Pending",
                    color: "#faff84"
            }],
                    size: '100%',
                    innerSize: '60%',
                    showInLegend: true,
                    dataLabels: {
                    enabled: false
                    },
                    marker: {
                    symbol: 'square',
                            radius: 12
                    }
            }]
    });
    }, 'json');
    }

    get_total_job_done()

            function get_total_project() {
            var start_date = $('#start-date_jobsvendor').val();
            var end_date = $('#end-date_jobsvendor').val();
            var url = '/admin/vm_ajax_total_job?start=' + start_date + '&end=' + end_date;
            $.get(url, function (res)
            {
            chart = new Highcharts.Chart({
            chart: {
            color: '#fff',
                    renderTo: 'total_projects',
                    marginBottom: 0,
                    marginTop: 0,
                    type: 'pie'
            },
                    title: {
                    text: 'Jobs Allocated',
                            y: 50
                    },
                    credits: {
                    enabled: false
                    },
                    plotOptions: {
                    pie: {
                    shadow: false,
                            borderColor: null
                    }
                    },
                    tooltip: {
                    formatter: function () {
                    return '<b>' + this.point.name + '</b>: ' + this.y;
                    }
                    },
                    legend: {
                    position: 'bottom',
                            layout: 'vertical',
                            symbolRadius: 0,
                            itemStyle: {
                            "color": "#000"
                            }
                    },
                    series: [{
                    data: [{
                    y: res.total_new,
                            name: res.total_new + " Jobs New",
                            color: "#16fc8d"
                    }, {
                    y: res.total_cancel,
                            name: res.total_cancel + " Jobs Cancel",
                            color: "#cecece"
                    }],
                            size: '100%',
                            innerSize: '60%',
                            showInLegend: true,
                            dataLabels: {
                            enabled: false
                            },
                            marker: {
                            symbol: 'square',
                                    radius: 12
                            }
                    }]
            });
            }, 'json');
            }
    get_total_project()

            function get_data_vendor_breached_response() {

            var start_date = $('#start-date_responsetime').val();
            var end_date = $('#end-date_responsetime').val();
            var url = '/admin/vm_get_vendor_breached_response?start=' + start_date + '&end=' + end_date;
            $.get(url, function (y) {
            $('.piechart_breached_response_time').html(y)
            });
            }
    get_data_vendor_breached_response()

            function percentage_breached_response_time() {
            var start_date = $('#start-date_responsetime').val();
            var end_date = $('#end-date_responsetime').val();
            var url = '/admin/vm_percentage_breached_response_time?start=' + start_date + '&end=' + end_date;
            $.get(url, function (res) {
            $.each(res, function (i, data) {
            chart = new Highcharts.Chart({
            chart: {
            color: '#fff',
                    renderTo: 'percentage_breached_response_time_' + data.id,
                    marginBottom: 0,
                    marginTop: 0,
                    type: 'pie'
            },
                    title: {
                    text: data.name,
                            y: 45,
                            style: {
                            fontSize: '12px',
                            }
                    },
                    plotOptions: {
                    pie: {
                    shadow: false,
                            borderColor: null
                    }
                    },
                    tooltip: {
                    formatter: function () {
                    return '<b>' + this.point.name + '</b>';
                    }
                    },
                    credits: {
                    enabled: false
                    },
                    legend: {
                    position: 'bottom',
                            layout: 'vertical',
                            symbolRadius: 0,
                            itemStyle: {
                            "color": "#000"
                            }
                    },
                    series: [{
                    data: [{
                    y: data.total_paket,
                            name: data.total_paket + "%" + " Not Breached",
                            color: "#0800ff"
                    }, {
                    y: data.total_breached_response,
                            name: data.total_breached_response + "%" + " Breached",
                            color: "#ff0a0a"
                    }],
                            size: '100%',
                            innerSize: '60%',
                            showInLegend: true,
                            dataLabels: {
                            enabled: false
                            },
                            marker: {
                            symbol: 'square',
                                    radius: 12
                            }
                    }]
            });
            });
            }, 'json');
            }

    function get_data_vendor_breached_resolve() {
    var start_date = $('#start-date_resolvetime').val();
    var end_date = $('#end-date_resolvetime').val();
    var url = '/admin/vm_get_vendor_breached_resolve?start=' + start_date + '&end=' + end_date;
    $.get(url, function (y) {
    $('.piechart_breached_resolve_time').html(y)
    });
    }
    get_data_vendor_breached_resolve()

            function percentage_breached_resolve_time() {
            var start_date = $('#start-date_resolvetime').val();
            var end_date = $('#end-date_resolvetime').val();
            var url = '/admin/vm_percentage_breached_resolve_time?start=' + start_date + '&end=' + end_date;
            $.get(url, function (res) {
            $.each(res, function (i, data) {
                console.log(data);
            chart = new Highcharts.Chart({
            chart: {
            color: '#fff',
                    renderTo: 'percentage_breached_resolve_time_' + data.id,
                    marginBottom: 0,
                    marginTop: 0,
                    type: 'pie'
            },
                    title: {
                    text: data.name,
                            y: 45,
                            style: {
                            fontSize: '12px',
                            }
                    },
                    plotOptions: {
                    pie: {
                    shadow: false,
                            borderColor: null
                    }
                    },
                    tooltip: {
                    formatter: function () {
                    return '<b>' + this.point.name + '</b>';
                    }
                    },
                    credits: {
                    enabled: false
                    },
                    legend: {
                    position: 'bottom',
                            layout: 'vertical',
                            symbolRadius: 0,
                            itemStyle: {
                            "color": "#000"
                            }
                    },
                    series: [{
                    data: [{
                    y: data.total_paket,
                            name: data.total_paket + "%" + " Not Breached",
                            color: "#0800ff"
                    }, {
                    y: data.total_breached_resolve,
                            name: data.total_breached_resolve + "%" + " Breached",
                            color: "#ff0a0a"
                    }],
                            size: '100%',
                            innerSize: '60%',
                            showInLegend: true,
                            dataLabels: {
                            enabled: false
                            },
                            marker: {
                            symbol: 'square',
                                    radius: 12
                            }
                    }]
            });
            });
            }, 'json');
            }

    function get_order_revenue() {
    var year = $('#year_revenue').val();
    $.get('/admin/vm_get_revenue_order?year=' + year, function (res) {
    $("#total_revenue_perservice").highcharts({
    chart: {
    type: 'areaspline'
    },
            title: {
            text: null
            },
            xAxis: {
            categories: [
                    'January',
                    'February',
                    'March',
                    'April',
                    'May',
                    'June',
                    'July',
                    'August',
                    'September',
                    'October',
                    'November',
                    'December'
            ]
            },
            yAxis: {
            title: {
            text: 'Revenue'
            }
            },
            tooltip: {
            shared: true
            },
            credits: {
            enabled: false
            },
            plotOptions: {
            areaspline: {
            fillOpacity: 0.5
            }
            },
            series: res.series
    });
    }, 'json');
    }
    get_order_revenue()
            setTimeout(function () {
            percentage_breached_resolve_time()
                    percentage_breached_response_time()
                    get_total_job_vendor_allocated()
                    }, 3000);
    jQuery('#date-perservice').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
            });
    jQuery('#date-perstatus').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
            });
    jQuery('#date-pervendor').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
            });
    jQuery('#date-jobsvendor').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
            });
    jQuery('#date-responsetime').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
            });
    jQuery('#date-resolvetime').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
            });
    jQuery('#date-usage').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
            });
    jQuery('#date-claimsvendor').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
            });
    jQuery('#date-claimservices').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
            });
    jQuery('#date-blastwon').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
            });
    jQuery('#date-donebreach').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
            });
    jQuery('#date-cancellationvendor').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
            });
    jQuery('#date-cancellationservice').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
            });
    $('#start-date_perservice').on('change', function () {
    get_pie_service_order()
            })
            $('#end-date_perservice').on('change', function () {
    get_pie_service_order()
            })

            $('#start-date_perstatus').on('change', function () {
    get_pie_status_order()
            })
            $('#end-date_perstatus').on('change', function () {
    get_pie_status_order()
            })

            $('#start-date_jobsvendor').on('change', function () {
    get_total_project();
    get_total_job_vendor_allocated();
    get_total_job_done();
    })
            $('#end-date_jobsvendor').on('change', function () {
    get_total_project();
    get_total_job_vendor_allocated();
    get_total_job_done();
    })

            $('#start-date_responsetime').on('change', function () {
    percentage_breached_response_time()
            })
            $('#end-date_responsetime').on('change', function () {
    percentage_breached_response_time()
            })

            $('#start-date_resolvetime').on('change', function () {
    percentage_breached_resolve_time()
            })
            $('#end-date_resolvetime').on('change', function () {
    percentage_breached_resolve_time()
            })

            $('#start-date_claimservices').on('change', function () {
    total_claim_services()
            })
            $('#end-date_claimservices').on('change', function () {
    total_claim_services()
            })

            $('#start-date_blastwon').on('change', function () {
    total_blast_vs_breached_vendor()
            })
            $('#end-date_blastwon').on('change', function () {
    total_blast_vs_breached_vendor()
            })

            $('#start-donebreach').on('change', function () {
    total_breached_vendor()
            })
            $('#end-donebreach').on('change', function () {
    total_breached_vendor()
            })

            $('#start-cancellationservice').on('change', function () {
    get_total_cancel_services()
            })
            $('#end-cancellationservice').on('change', function () {
    get_total_cancel_services()
            })
            
            $('#year_revenue').on('change', function(){
                get_order_revenue()
            })
</script>
@endpush