@extends('layouts.app')

@section('page-title')
<div class="row bg-title">

    <!-- .page title -->
    <div class="col-lg-8 col-md-5 col-sm-6 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}

        </h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-4 col-sm-6 col-md-7 col-xs-12 text-right">
        <a href="#" class="btn btn-outline btn-success btn-sm" data-toggle="modal" data-target="#mdl_export_orders">Export <i class="fa fa-file-pdf-o" aria-hidden="true"></i></a>
        <ol class="breadcrumb">
            <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
            <li class="active">{{ __($pageTitle) }}</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
<style>
    .profile-image {
        position: relative;
        width: 16%;
    }
    .profile-image-img {
        width: 96px;
        height: 96px;
    }
    img.circle-border {
        border: 6px solid #FFFFFF;
        border-radius: 50%;
    }
    .tabs_status_order{
        border-top:2px solid #fff;
    }
    .tabs_status_order.active{
        border-top:2px solid #9D3293;
    }
    .tabs_status_order.active .get_workorder_status{
        color:#9D3293;
    }
    .modal-title{
        font-size: 25px;
        font-weight: 700;
    }

    .modal-content{
        border-radius: 25px;
    }

    .modal-header{
        background-color: #041731;
        border-radius: 25px 25px 0 0;
    }
    .btn-close-modal{
        color: #fff;
        background: #041731;
        border-radius: 30px;
        padding: 5px 48px 5px 48px;
    }
    .close span{
        font-weight: 200;
        border: 1px solid;
        border-radius: 50%;
        padding: 0 4px;
    }

</style>

@endpush



@section('content')

<div class="row">

    <div class="col-xs-12">
        <div class="sttabs tabs-style-line">
            <div class="white-box">
                <div class="panel panel-default">
                    <div class="panel-heading custom-panel-heading">Chart Respon Time</div>
                    <div class="panel-body custom-panel-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div id="chart_respon_time"></div>
                            </div>
                            <div class="col-lg-12">
                                <div id="chart_respon_time_staff"></div>
                            </div>
                            <div class="col-lg-12">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Department</th>
                                                <th>January</th>
                                                <th>February</th>
                                                <th>March</th>
                                                <th>April</th>
                                                <th>May</th>
                                                <th>June</th>
                                                <th>July</th>
                                                <th>Agustus</th>
                                                <th>September</th>
                                                <th>October</th>
                                                <th>November</th>
                                                <th>December</th>
                                            </tr>
                                        </thead>
                                        <tbody id="table_respon_time_dept"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Staff</th>
                                                <th>January</th>
                                                <th>February</th>
                                                <th>March</th>
                                                <th>April</th>
                                                <th>May</th>
                                                <th>June</th>
                                                <th>July</th>
                                                <th>Agustus</th>
                                                <th>September</th>
                                                <th>October</th>
                                                <th>November</th>
                                                <th>December</th>
                                            </tr>
                                        </thead>
                                        <tbody id="table_respon_time_staff"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- .row -->
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
    function chart_respon_time() {
    var url = '/admin/ajax_get_response_time/2023';
    $.get(url, function (res)
    {

    Highcharts.chart('chart_respon_time', {
    chart: {
    type: 'column'
    },
            title: {
            text: ' '
            },
            xAxis: {
            categories: res.name,
                    crosshair: true
            },
            yAxis: {
            min: 0,
                    title: {
                    text: 'Chart Respon Time Department'
                    }
            },
            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: res.data
    });
    }, 'json');
    }
    chart_respon_time()
            function chart_respon_time_staff() {
            var url = '/admin/ajax_get_response_time_staff/2023';
            $.get(url, function (res)
            {

            Highcharts.chart('chart_respon_time_staff', {
            chart: {
            type: 'column'
            },
                    title: {
                    text: ' '
                    },
                    xAxis: {
                    categories: res.name,
                            crosshair: true
                    },
                    yAxis: {
                    min: 0,
                            title: {
                            text: 'Chart Respon Time Staff'
                            }
                    },
                    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: res.data
            });
            }, 'json');
            }
    chart_respon_time_staff()
            function table_respon_time_dept(){
            var url = '/admin/ajax_get_response_time/2023?data=yes';
            var htmll = '';
            $.get(url, function (res){

            $.each(res.data, function(key, value) {
            htmll += '<tr>';
            htmll += '<td>' + value.name + '</td>';
            $.each(value.data, function(key_d, d) {
            htmll += '<td>' + d + '</td>';
            })
                    htmll += '</tr>';
            });
            $('#table_respon_time_dept').html(htmll)
            }, 'json');
            }
            table_respon_time_dept()
    function table_respon_time_staff(){
    var url = '/admin/ajax_get_response_time_staff/2023?data=yes';
    var htmll = '';
    $.get(url, function (res){

    $.each(res.data, function(key, value) {
    htmll += '<tr>';
    htmll += '<td>' + value.name + '</td>';
    $.each(value.data, function(key_d, d) {
    htmll += '<td>' + d + '</td>';
    })
            htmll += '</tr>';
    });
    $('#table_respon_time_staff').html(htmll)
    }, 'json');
    }

    table_respon_time_staff()
</script>
@endpush