@extends('layouts.admin.app')

@section('content')

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Dashboard
                {{-- <small>Control panel</small> --}}
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li class="active">Dashboard</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- Main row -->
            <div class="row">
                <!-- Left col -->
                <section class="col-lg-7 connectedSortable">
                    <!-- Custom tabs (Charts with tabs)-->
                    <div class="nav-tabs-custom">
                        <!-- Tabs within a box -->
                        <ul class="nav nav-tabs pull-right">
                            <li class="active"><a class="batang" href="#Batangs" data-toggle="tab">Area</a>
                            </li>
                            <li><a href="#sales-chart" data-toggle="tab">Pie</a></li>
                            <li class="pull-left header"><i class="fa fa-bar-chart"></i>Charts Konsultasi</li>
                        </ul>
                        <div class="tab-content no-padding">
                            <!-- Morris chart - Sales -->
                            <div class="tab-pane active" style="position: relative; height: 300px;" id="Batangs">
                                {!! $chart->container() !!}
                            </div>
                            <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
                                {!! $chartpie->container() !!}
                            </div>
                        </div>
                    </div>
                    <!-- /.nav-tabs-custom -->

                </section>

                <section class="col-lg-5 connectedSortable">
                    <!-- Calendar -->
                    <div class="box box-solid bg-green-gradient">
                        <div class="box-header">
                            <i class="fa fa-calendar"></i>

                            <h3 class="box-title">Calendar</h3>
                            <!-- tools box -->
                            <div class="pull-right box-tools">
                                <button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i
                                        class="fa fa-minus"></i>
                                </button>
                            </div>
                            <!-- /. tools -->
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body no-padding">
                            <!--The calendar -->
                            <div id="calendar" style="width: 100%"></div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->

                </section>
                <!-- /.Left col -->
                <!-- right col (We are only adding the ID to make the widgets sortable)-->

                <!-- Left col -->
                {{-- <section class="col-lg-5 connectedSortable"> --}}
                <!-- Custom tabs (Charts with tabs)-->
                {{-- <div class="nav-tabs-custom"> --}}
                <!-- Tabs within a box -->
                {{-- <ul class="nav nav-tabs pull-right"> --}}
                {{-- <li class="pull-left header"><i class="fa fa-bar-chart"></i>Charts Pengunjung</li> --}}
                {{-- </ul> --}}
                {{-- <div class="tab-content no-padding"> --}}
                <!-- Morris chart - Sales -->
                {{-- <div class="tab-pane active" style="position: relative; height: 300px;"> --}}

                {{-- </div> --}}
                {{-- <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div> --}}
                {{-- </div> --}}
                {{-- </div> --}}
                <!-- /.nav-tabs-custom -->

                {{-- </section> --}}


                <!-- right col -->

                <section class="col-lg-12 connectedSortable">
                    <!-- TABLE: LATEST ORDERS -->
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">List New Konsultasi</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>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="table-responsive">
                                <section class="todo">
                                    @include('admins.ListNewKonsul.load_todo_data')
                                </section>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.box-body -->

                        <!-- /.box-footer -->
                    </div>
                    <!-- /.box -->
                </section>


                <!-- /.Left col -->
                <!-- right col (We are only adding the ID to make the widgets sortable)-->


            </div>
            <!-- /.row (main row) -->

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->


@endsection
@section('footer')

    <script src=//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js charset=utf-8></script>
    {!! $chart->script() !!}
    {!! $chartpie->script() !!}

    <script>
        var original_api_url = {{ $chart->id }}_api_url;
        $(document).ready(function() {
            // ajax setup form csrf token
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Pusher.logToConsole = true;

            var pusher = new Pusher('cf41b2c9effee3d8c5c9', {
                cluster: 'ap1'
            });

            var channel = pusher.subscribe('my-channel-todoIn');
            channel.bind('my-todoIn', function(data) {
                if (data.status == 'Konsultasi') {
                    loadKonsul();
                }
            });

            var channel = pusher.subscribe('my-channel');
            channel.bind('my-event', function(data) {
                if (data.status == 'Approved') {
                    loadKonsul();
                }
            });
            var channel = pusher.subscribe('my-channel-notif');
            channel.bind('my-notif', function(data) {
                if (data.status == 'Konsultasi') {
                    {{ $chart->id }}_refresh(original_api_url);
                }
            });

            function loadKonsul() {
                $.ajax({
                    url: '/admins'
                }).done(function(data) {
                    $('.todo').html(data);
                }).fail(function() {
                    console.log("Failed to load data!");
                });
            }

        });
    </script>
@stop