@extends('layouts.container')
@section('title', 'Dashboard')
@section('css')
    <link href="{{asset('/engine/adminLTE/dist/css/skins/skin-black.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{asset('/engine/iCheck/flat/blue.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('body-class', 'skin-black')
@section('content')
    <div class="row">
        <div class="col-md-3">
            <div class="small-box bg-light-blue-gradient">
                <div class="inner">
                    <h3>&nbsp;</h3>
                    <p>SMS Gateway</p>
                </div>
                <div class="icon">
                    <i class="fa fa-envelope-o"></i>
                </div>
                <a href="#" class="small-box-footer">
                  <!-- href="{{ URL::route('smsgateway-all', 'inbox') }}" target="_blank" -->
                    More info <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="small-box bg-red-gradient">
                <div class="inner">
                    <h3>&nbsp;</h3>
                    <p>Cek Status</p>
                </div>
                <div class="icon">
                    <i class="fa fa-bank"></i>
                </div>
                <a href="{{ URL::route('caridokter-all') }}" target="_blank" class="small-box-footer">
                    More info <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="small-box bg-green-gradient">
                <div class="inner">
                    <h3>&nbsp;</h3>
                    <p>Laporan Serkom</p>
                </div>
                <div class="icon">
                    <i class="fa fa-sitemap"></i>
                </div>
                <a href="{{ URL::route('kipd-laporanserkom') }}" target="_blank" class="small-box-footer">
                    More info <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="small-box bg-yellow-gradient">
                <div class="inner">
                    <h3>&nbsp;</h3>
                    <p>Website</p>
                </div>
                <div class="icon">
                    <i class="fa fa-mail-reply"></i>
                </div>
                <a href="https://kolegiumipd.org" target="_blank" class="small-box-footer">
                    More info <i class="fa fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Spesialis Overview</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-8">
                            <p class="text-center">
                                <label for="tahun_pendaftaran">
                                    <strong>Pendaftaran Spesialis:</strong>
                                </label>
                                &nbsp;
                                <select name="tahun_pendaftaran" id="tahun_pendaftaran" class="form-control-static">
                                    @for ($i = date('Y'); $i >= date('Y') - 20; $i--)
                                        <option value="{{ $i }}">Tahun {{ $i }}</option>
                                    @endfor
                                </select>
                            </p>
                            <div class="chart">
                                <canvas width="703" height="180" id="barChart"
                                    style="height: 180px; width: 703px;"></canvas>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <p class="text-center">
                                <strong>Jumlah Spesialis sampai saat ini</strong>
                            </p>
                            <div class="progress-group">
                                <span class="progress-text">Total Spesialis Baru</span>
                                <span class="progress-number"><b class="s1">0</b></span>
                                <div class="progress sm">
                                    <div class="progress-bar progress-bar-aqua s1" style="width: 0%"></div>
                                </div>
                            </div>
                            <div class="progress-group">
                                <span class="progress-text">Total Subspesialis</span>
                                <span class="progress-number"><b class="s2">0</b></span>
                                <div class="progress sm">
                                    <div class="progress-bar progress-bar-red s2" style="width: 0%"></div>
                                </div>
                            </div>
                            <div class="progress-group">
                                <span class="progress-text">Total Fellowship</span>
                                <span class="progress-number"><b class="s3">0</b></span>
                                <div class="progress sm">
                                    <div class="progress-bar progress-bar-green s3" style="width: 0%"></div>
                                </div>
                            </div>
                            <div class="progress-group">
                                <span class="progress-text">Total Tambahan Subspesialis</span>
                                <span class="progress-number"><b class="s4">0</b></span>

                                <div class="progress sm">
                                    <div class="progress-bar progress-bar-yellow s4" style="width: 0%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box -->
        </div>
    </div>
    <div class="row">
        <div class="col-md-7">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">5 Pengguna Terakhir Login</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body" style="height: 300px; overflow: auto">
                    <ul class="products-list product-list-in-box" id="last-login-list">
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="box box-warning">
                <div class="box-header">
                    <h3 class="box-title">Data Belum Ada Reguler / Adaptasi</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body no-padding" style="max-height: 300px; overflow: auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th style="width: 10px">#</th>
                                <th>Nama (sesuai STR/ijasah)</th>
                                <th class="col-md-3 text-center">No. Registrasi</th>
                            </tr>
                        </thead>
                        <tbody id="data_spesialis_not_valid">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!--<div class="row">
          <div class="col-md-12">
           <div class="box box-danger">
            <div class="box-header">
             <h3 class="box-title">Data Sertifikat Expired</h3>
             <div class="box-tools pull-right">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
              </button>
             </div>
            </div>
            <div class="box-body no-padding" style="height: 300px; overflow: auto">
             <table class="table">
              <thead>
              <tr>
               <th style="width: 10px">#</th>
               <th>Nama (sesuai STR/ijasah)</th>
               <th class="col-md-4 text-center">No. Sertifikat</th>
               <th class="col-md-3 text-center">Tanggal Expired</th>
              </tr>
              </thead>
              <tbody id="data_spesialis_expired">
              </tbody>
             </table>
            </div>
           </div>
          </div>
         </div>-->
@endsection
@section('js')
    <script src="{{asset('/engine/iCheck/icheck.min.js') }}" type="text/javascript"></script>
    <script src="{{asset('/engine/fastclick/fastclick.min.js') }}"></script>
    <script src="{{asset('/engine/slimScroll/jquery.slimscroll.min.js') }}" type="text/javascript"></script>
    <script src="{{asset('/engine/chartjs/chart.min.js') }}"></script>
    <script>
        var barChartOptions = {
            scaleBeginAtZero: true,
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            scaleShowHorizontalLines: true,
            scaleShowVerticalLines: true,
            barShowStroke: true,
            barStrokeWidth: 2,
            barValueSpacing: 5,
            barDatasetSpacing: 1,
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
            responsive: true,
            maintainAspectRatio: true
        };
        barChartOptions.datasetFill = true;

        function gettotal() {
            var $tahun = $('#tahun_pendaftaran').val();

            $.ajax({
                'url': '{{ URL::Route('laporanTotal', 'total') }}',
                'method': 'POST',
                'data': {
                    '_method': 'PUT',
                    'tahun': $tahun
                }
            }).done(function(total) {
                // $('.total_spesialis').html(total);

                $.ajax({
                    'url': '{{ URL::Route('laporanTotal', 'new') }}',
                    'method': 'POST',
                    'data': {
                        '_method': 'PUT',
                        'tahun': $tahun
                    }
                }).done(function(e) {
                    $subtotal = (e / total) * 100;

                    $('b.s1').html(e);
                    $('div.s1').css('width', $subtotal + '%');
                });

                $.ajax({
                    'url': '{{ URL::Route('laporanTotal', 'newsub') }}',
                    'method': 'POST',
                    'data': {
                        '_method': 'PUT',
                        'tahun': $tahun
                    }
                }).done(function(e) {
                    $subtotal = (e / total) * 100;

                    $('b.s2').html(e);
                    $('div.s2').css('width', $subtotal + '%');
                });

                $.ajax({
                    'url': '{{ URL::Route('laporanTotal', 'newfellowship') }}',
                    'method': 'POST',
                    'data': {
                        '_method': 'PUT',
                        'tahun': $tahun
                    }
                }).done(function(e) {
                    $subtotal = (e / total) * 100;

                    $('b.s3').html(e);
                    $('div.s3').css('width', $subtotal + '%');
                });

                $.ajax({
                    'url': '{{ URL::Route('laporanTotal', 'newkompetensi') }}',
                    'method': 'POST',
                    'data': {
                        '_method': 'PUT',
                        'tahun': $tahun
                    }
                }).done(function(e) {
                    $subtotal = (e / total) * 100;

                    $('b.s4').html(e);
                    $('div.s4').css('width', $subtotal + '%');
                });
            });

        }

        function createChart($tahun, $barChartOptions) {
            $(".chart").html("").html(
                '<canvas width="703" height="180" id="barChart" style="height: 180px; width: 703px;"></canvas>');
            var chartData = [];
            var data1, data2;
            var datalabels = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September",
                "Oktober", "November", "Desember"
            ];
            var url1 = '{{ URL::Route('laporanSpesialisGraph', ['tipe' => 'reguler', 'tahun' => ':tahun']) }}'
            url1 = url1.replace(':tahun', $tahun);

            $.ajax({
                'url': url1,
                'method': 'GET'
            }).done(function(e) {
                data1 = {
                    label: "Reguler",
                    fillColor: "rgba(60,141,188,0.9)",
                    strokeColor: "rgba(60,141,188,0.8)",
                    pointColor: "#3b8bba",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(60,141,188,1)",
                    data: e
                };

            });

			var url2 = '{{ URL::Route('laporanSpesialisGraph', ['tipe' => 'reguler', 'tahun' => ':tahun']) }}'
            url2 = url2.replace(':tahun', $tahun);

            $.ajax({
                'url': url2,
                'method': 'GET'
            }).done(function(e) {
                data2 = {
                    label: "Adaptasi",
                    fillColor: "#00ddff",
                    strokeColor: "#444444",
                    pointColor: "#3b8bba",
                    pointStrokeColor: "rgba(60,141,188,1)",
                    pointHighlightFill: "#00ddff",
                    pointHighlightStroke: "#444444",
                    data: e
                };

            });

            setTimeout(function() {
                chartData = {
                    labels: datalabels,
                    datasets: [data1, data2, data1 + data2]
                };
                var barChartCanvas = $("#barChart").get(0).getContext("2d");
                var barChart = new Chart(barChartCanvas);
                barChart.Bar(chartData, $barChartOptions);
            }, 3250);
        }

        var loadLog = function() {
            var chatbox = $('.direct-chat-messages');
            var checked = $("#AutoScroll").prop("checked");
            var me = ".user_{{ auth()->user()->id }}";
            $.ajax({
                url: "{{asset('logs/chat-' . date('Ymd') . '.html') }}",
                cache: false
            }).done(function(html) {
                chatbox.html(html);
                $(me).addClass('right');
            }).always(function(e) {
                var newscrollHeight = chatbox.prop('scrollHeight');
                if (checked) {
                    chatbox.animate({
                        scrollTop: newscrollHeight
                    }, 'fast');
                }
            });
        };

        $(function() {
            var chatbox = $('.direct-chat-messages');

            setTimeout(function() {
                gettotal();
            }, 4000);
            setInterval(loadLog, 3250);
            setTimeout(function() {
                var newscrollHeight = chatbox.prop('scrollHeight');
                chatbox.animate({
                    scrollTop: newscrollHeight
                }, 'fast');
            }, 3500);

            $.ajax({
                'url': '{{ URL::Route('laporanNotValid') }}',
                'method': 'POST',
                'data': {
                    '_method': 'PUT'
                }
            }).done(function(e) {
                $.each(e, function($index, $value) {
                    $('#data_spesialis_not_valid').append('<tr><td>' + ($index + 1) + '.</td><td>' +
                        $value['biodata_dokter']['biodata']['nama_lengkap'] +
                        '</td><td class="text-center">' + $value['no_registrasi'] + '</td></tr>'
                    )
                });
            });

            $.ajax({
                'url': '{{ URL::Route('laporanLastLogin') }}',
                'method': 'POST',
                'data': {
                    '_method': 'PUT'
                }
            }).done(function(e) {
                $.each(e['data'], function($index, $value) {
                    $('#last-login-list').append(
                        '<li class="item"><div class="product-img"><img src="{{asset('images/logo.thumbnails.png') }}" alt="' +
                        $value['email'] +
                        '"></div><div class="product-info"><a href="javascript:void(0)" class="product-title">' +
                        $value['email'] + '</a><span class="product-description">Login: ' +
                        $value['last_login'] + '</span></div></li>')
                });
            });

            /*
            $.ajax({
            	'url': '{{ URL::Route('dashboard-expired') }}',
            	'method': 'POST',
            	'data' : { '_method': 'PUT' }
            }).done(function(e) {
            	$.each(e, function($index, $value) {
            		var $date = new Date($value['expired']);
            		$('#data_spesialis_expired').append('<tr><td style="width: 10px">' + ($index+1) + '.</td><td>' + $value['biodata_dokter']['biodata']['nama_lengkap'] + '</td><td class="col-md-4 text-center">' + $value['sertifikat_expired'] + '</td><td class="col-md-3 text-center">' + $date.getDate() + '-' + ($date.getUTCMonth()+1) + '-' + $date.getFullYear() + '</td></tr>')
            	});
            });
            */

            $("#formchat").submit(function(e) {
                e.preventDefault();
                var clientmsg = $("#usermsg");
                if (clientmsg.val().trim() != '') {
                    $.ajax({
                        'url': "{{ URL::route('dashboard-chat') }}",
                        'method': 'POST',
                        'data': {
                            text: clientmsg.val(),
                            '_method': 'PUT'
                        }
                    }).done(function(e) {
                        loadLog();
                    }).always(function(e) {
                        clientmsg.val("");
                    });
                }
            });

            createChart('{{ date('Y') }}', barChartOptions);
            $('#tahun_pendaftaran').on('change', function(e) {
                createChart(e.currentTarget.value, barChartOptions);
            });
        });
    </script>
@endsection