@extends('main')
@section('content')
<div id="content" class="content">
    <!-- begin breadcrumb -->
    <ol class="breadcrumb pull-right">
        <li><a href="javascript:;">Home</a></li>
        <li class="active">Dashboard</li>
    </ol>
    <!-- end breadcrumb -->
    <!-- begin page-header -->
    <h1 class="page-header">Dashboard
        <!-- <small>header small text goes here...</small> -->
    </h1>
    <!-- end page-header -->
    <!-- begin panel -->
    <div class="panel panel-inverse">
        <div class="panel-heading">
            <div class="panel-heading-btn">
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
            </div>
            <h4 class="panel-title">Dashboard</h4>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="panel-body">
                    <h4 class="panel-title"><b>Grafik</b></h4>
                    <div class="row" style="padding: 20px;">
                        <div class="col-md-12" style="border: 1px solid #a8a8a9;">
                            <div id="chart_grafik" style=" height: 350px;"></div>
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th style="text-align: center; width: 10%; vertical-align: middle;">Subject</th>
                                            <th style="text-align: center; width: 5%; vertical-align: middle;">Jan</th>
                                            <th style="text-align: center; width: 5%; vertical-align: middle;">Feb</th>
                                            <th style="text-align: center; width: 5%; vertical-align: middle;">Mar</th>
                                            <th style="text-align: center; width: 5%; vertical-align: middle;">Apr</th>
                                            <th style="text-align: center; width: 5%; vertical-align: middle;">Mei</th>
                                            <th style="text-align: center; width: 5%; vertical-align: middle;">Jun</th>
                                            <th style="text-align: center; width: 5%; vertical-align: middle;">Jul</th>
                                            <th style="text-align: center; width: 5%; vertical-align: middle;">Agu</th>
                                            <th style="text-align: center; width: 5%; vertical-align: middle;">Sep</th>
                                            <th style="text-align: center; width: 5%; vertical-align: middle;">Okt</th>
                                            <th style="text-align: center; width: 5%; vertical-align: middle;">Nov</th>
                                            <th style="text-align: center; width: 5%; vertical-align: middle;">Des</th>
                                            <th style="text-align: center; width: 5%; vertical-align: middle;">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th style="text-align: left;">Peserta</th>
                                            <td style="text-align: center;">{{ $peserta_jan }}</td>
                                            <td style="text-align: center;">{{ $peserta_feb }}</td>
                                            <td style="text-align: center;">{{ $peserta_mar }}</td>
                                            <td style="text-align: center;">{{ $peserta_apr }}</td>
                                            <td style="text-align: center;">{{ $peserta_mei }}</td>
                                            <td style="text-align: center;">{{ $peserta_jun }}</td>
                                            <td style="text-align: center;">{{ $peserta_jul }}</td>
                                            <td style="text-align: center;">{{ $peserta_agu }}</td>
                                            <td style="text-align: center;">{{ $peserta_sep }}</td>
                                            <td style="text-align: center;">{{ $peserta_okt }}</td>
                                            <td style="text-align: center;">{{ $peserta_nov }}</td>
                                            <td style="text-align: center;">{{ $peserta_des }}</td>
                                            <td style="text-align: center;">{{ $peserta_tot }}</td>
                                        </tr>
                                        <tr>
                                            <th style="text-align: left;">Passed</th>
                                            <td style="text-align: center;">{{ $passed_jan }}</td>
                                            <td style="text-align: center;">{{ $passed_feb }}</td>
                                            <td style="text-align: center;">{{ $passed_mar }}</td>
                                            <td style="text-align: center;">{{ $passed_apr }}</td>
                                            <td style="text-align: center;">{{ $passed_mei }}</td>
                                            <td style="text-align: center;">{{ $passed_jun }}</td>
                                            <td style="text-align: center;">{{ $passed_jul }}</td>
                                            <td style="text-align: center;">{{ $passed_agu }}</td>
                                            <td style="text-align: center;">{{ $passed_sep }}</td>
                                            <td style="text-align: center;">{{ $passed_okt }}</td>
                                            <td style="text-align: center;">{{ $passed_nov }}</td>
                                            <td style="text-align: center;">{{ $passed_des }}</td>
                                            <td style="text-align: center;">{{ $passed_tot }}</td>
                                        </tr>
                                        <tr>
                                            <th style="text-align: left;">Not Passed</th>
                                            <td style="text-align: center;">{{ $not_jan }}</td>
                                            <td style="text-align: center;">{{ $not_feb }}</td>
                                            <td style="text-align: center;">{{ $not_mar }}</td>
                                            <td style="text-align: center;">{{ $not_apr }}</td>
                                            <td style="text-align: center;">{{ $not_mei }}</td>
                                            <td style="text-align: center;">{{ $not_jun }}</td>
                                            <td style="text-align: center;">{{ $not_jul }}</td>
                                            <td style="text-align: center;">{{ $not_agu }}</td>
                                            <td style="text-align: center;">{{ $not_sep }}</td>
                                            <td style="text-align: center;">{{ $not_okt }}</td>
                                            <td style="text-align: center;">{{ $not_nov }}</td>
                                            <td style="text-align: center;">{{ $not_des }}</td>
                                            <td style="text-align: center;">{{ $not_tot }}</td>
                                        </tr>
                                        <tr>
                                            <th style="text-align: left;">Passing Grade</th>
                                            <td style="text-align: center;">{{ $grade_jan . '%' }}</td>
                                            <td style="text-align: center;">{{ $grade_feb . '%' }}</td>
                                            <td style="text-align: center;">{{ $grade_mar . '%' }}</td>
                                            <td style="text-align: center;">{{ $grade_apr . '%' }}</td>
                                            <td style="text-align: center;">{{ $grade_mei . '%' }}</td>
                                            <td style="text-align: center;">{{ $grade_jun . '%' }}</td>
                                            <td style="text-align: center;">{{ $grade_jul . '%' }}</td>
                                            <td style="text-align: center;">{{ $grade_agu . '%' }}</td>
                                            <td style="text-align: center;">{{ $grade_sep . '%' }}</td>
                                            <td style="text-align: center;">{{ $grade_okt . '%' }}</td>
                                            <td style="text-align: center;">{{ $grade_nov . '%' }}</td>
                                            <td style="text-align: center;">{{ $grade_des . '%' }}</td>
                                            <td style="text-align: center;">{{ $grade_tot . '%' }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="row p-b-20">
                                <div class="col-md-12">
                                    @php
                                    $user = 'DETAILGRAFIK|' . Auth::user()->id . '|' . Auth::user()->perusahaan_id . '|' . 0 ;
                                    $kode = base64_encode($user);
                                    @endphp
                                    <a href="{{ url('/dashboard/detail-grafik') . '/' . $kode }}" type="button" class="btn btn-sm btn-primary" name="button_save" id="button_save" style="width: 100%;">Detail</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-md-12">
                <div class="panel-body">
                    <h4 class="panel-title"><b>Test Schedule H+10</b></h4>
                    <div class="height-sm" data-scrollbar="true">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th style="text-align: center; width: 5%; vertical-align: middle;">No</th>
                                    <th style="text-align: center; width: 22%; vertical-align: middle;">Nama Perusahaan</th>
                                    <th style="text-align: center; width: 22%; vertical-align: middle;">Nama Tes</th>
                                    <th style="text-align: center; width: 12%; vertical-align: middle;">Mulai</th>
                                    <th style="text-align: center; width: 12%; vertical-align: middle;">Selesai</th>
                                    <th style="text-align: center; width: 11%; vertical-align: middle;">Jumlah Peserta</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                $No = 1;
                                @endphp
                                @foreach ($reminders as $row)
                                <tr>
                                    <td style="text-align: center;">{{ $No }}</td>
                                    <td style="text-align: left;">{{ $row->nama_perusahaan }}</td>
                                    <td style="text-align: left;">{{ $row->nama_tes }}</td>
                                    <td style="text-align: left;">{{ $row->waktu_mulai }}</td>
                                    <td style="text-align: left;">{{ $row->waktu_selesai }}</td>
                                    <td style="text-align: center;">{{ $row->jumlah_peserta }}</td>
                                </tr>
                                @php
                                $No++;
                                @endphp
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="panel-body">
                    <h4 class="panel-title"><b>Log Activity User</b></h4>
                    <div class="height-sm" data-scrollbar="true">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th style="text-align: center; width: 5%; vertical-align: middle;">No</th>
                                    <th style="text-align: center; width: 42%; vertical-align: middle;">Keterangan </th>
                                    <th style="text-align: center; width: 42%; vertical-align: middle;">Dari</th>
                                    <th style="text-align: center; width: 11%; vertical-align: middle;">Tanggal</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                $No = 1;
                                @endphp
                                @foreach ($logs as $row)
                                <tr>
                                    <td style="text-align: center;">{{ $No }}</td>
                                    <td style="text-align: left;">{{ $row->keterangan }}</td>
                                    <td style="text-align: left;">{{ $row->name }}</td>
                                    <td style="text-align: center;">{{ $row->created_at }}</td>
                                </tr>
                                @php
                                $No++;
                                @endphp
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-body p-0">
            <div class="vertical-box">
                <div id="calendar" class="vertical-box-column p-15 calendar"></div>
            </div>
        </div>
    </div>

    <div id='datepicker'></div>
    <div class="modal fade" id="favoritesModal" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="form-horizontal" id="myform" name="myform" method="post">
                    <div class="modal-body">
                        @csrf
                        @foreach ($fieldsModal as $rows)
                        {!! $rows !!}
                        @endforeach
                    </div>
                    <div class="modal-footer">
                        <div class="form-group">
                            <label class="col-md-3 control-label">&nbsp;</label>
                            <div class="col-md-9">
                                @foreach ($buttonsModal as $rows)
                                {!! $rows !!}
                                @endforeach
                            </div>
                        </div>
                        <div class="form-group preloader-container">
                            <label class="col-md-3 control-label">&nbsp;</label>
                            <div class="col-md-9">
                                <img src="{{ asset('app/img/icon/preloader.gif') }}" alt="" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- end panel -->
</div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="{{ asset('app/js/form_validation.js') }}"></script>
<script>
    $(".preloader-container").hide();
    // $(document).ready(function() {
    $(function() {
        var event = {
            !!$schedule!!
        };
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        var calendar = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek ,basicDay'
            },
            buttonText: {
                prev: 'prev',
                next: 'next'
            },
            // timeFormat: 'h(:mm)t',
            // selectable: true,
            defaultDate: new Date(y, m, d),
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            selectHelper: true,
            dayClick: function(date, allDay, jsEvent, view) {
                // alert(date);
            },
            eventClick: function(event, jsEvent, view) {
                $('.modal').find('input').val('');
                $.ajax({
                    url: {
                        !!json_encode(url('/')) !!
                    } + "/testschedule/calender/" + event.id,
                    type: 'GET',
                    contentType: false, // The content type used when sending data to the server.
                    cache: false, // To unable request pages to be cached
                    processData: false,
                    success: function(response) {

                        if (response.status == 'success') {
                            $('.modal').find('#nama_tes').val(event.title);
                            $('.modal').find('#tanggal_mulai').val(event.start == null ? null : event.start.format("DD/MM/YYYY"));
                            $('.modal').find('#tanggal_selesai').val(response.data.tanggal_selesai);
                            $('.modal').find('#jam_mulai').val(event.start == null ? null : event.start.format("HH:mm"));
                            $('.modal').find('#jam_selesai').val(response.data.jam_selesai);
                        } else {
                            $('.modal').find('#nama_tes').val(event.title);
                            $('.modal').find('#tanggal_mulai').val(event.start == null ? null : event.start.format("DD/MM/YYYY"));
                            $('.modal').find('#tanggal_selesai').val(event.end == null ? null : event.end.format("DD/MM/YYYY"));
                            $('.modal').find('#jam_mulai').val(event.start == null ? null : event.start.format("HH:mm"));
                            $('.modal').find('#jam_selesai').val(event.end == null ? null : event.end.format("HH:mm"));
                        }
                    }
                });
                // change the border color just for fun
                $(this).css('border-color', 'red');
                $('.modal').modal('show');
            },
            select: function(start, end, allDay) {
                $('.modal').find('input').val('');
                $('.modal').modal('show');
                // $('#calendar').fullCalendar('renderEvent', ...event, true);
                // calendar.fullCalendar('renderEvent', 
                // ...event
                // // {
                // //     title: 'title',
                // //     start: start,
                // //     end: moment(new Date()),
                // //     allDay: allDay
                // // }
                // ,
                // true // make the event "stick"
                // );
                // $('#calendar').fullCalendar('unselect');
                // calendar.fullCalendar('unselect');
            },

            events: event,
            editable: true,
            eventLimit: true
        });

        $('#button_modal').click(function(e) {
            e.preventDefault();
            //     $("#myForm").submit();
            // });

            // $('#myform').on('submit', function (e) {
            //     e.preventDefault();

            var title = $('#nama_tes').val();
            var tanggal_mulai = $('#tanggal_mulai').val();
            var tanggal_selesai = $('#tanggal_selesai').val();
            var jam_mulai = $('#jam_mulai').val();
            var jam_selesai = $('#jam_selesai').val();

            var flag = "F";
            var no = 1;

            $(".mandatory-input").each(function() {
                var obj = $(this).attr("name");

                if ((trim($(this).val()) == "") || (trim($(this).val()) == "0") || (trim($(this).val()) == "__/__/____") || (trim($(this).val()) == "00/00/0000")) {
                    $(this).css("border-color", "red");
                    $(".style_form_input_" + obj).css("border-color", "red");
                    $(".style_form_input_" + obj).css("color", "red");

                    if (no == 1) {
                        $(this).focus();
                        no = 2;
                    }

                    flag = "T";
                } else {
                    $(this).css("border-color", "#DDDDDD");
                    $(".style_form_input_" + obj).css("border-color", "#DDDDDD");
                    $(".style_form_input_" + obj).css("color", "#DDDDDD");
                }
            });

            if (flag == "F") {
                var formData = new FormData();
                var csrf_token = "{{ csrf_token() }}";

                // formData.append('_token', "{{ csrf_token() }}");
                formData.append('nama_tes', 'nama_tes');
                formData.append('tanggal_mulai', tanggal_mulai);
                formData.append('tanggal_selesai', tanggal_selesai);
                formData.append('jam_mulai', jam_mulai);
                formData.append('jam_selesai', jam_selesai);
                // console.log('formData', formData, csrf_token, tanggal_mulai);
                $('.progress').show();
                $.ajax({
                    // headers: {'X-CSRF-TOKEN': csrf_token},
                    type: "POST",
                    dataType: "json",
                    url: {
                        !!json_encode(url('/')) !!
                    } + "/testschedule/calender",
                    // enctype: 'multipart/form-data',
                    data: {
                        "_token": csrf_token,
                        "nama_tes": nama_tes,
                        "tanggal_mulai": tanggal_mulai,
                        "tanggal_selesai": tanggal_selesai,
                        "jam_mulai": jam_mulai,
                        "jam_selesai": jam_selesai,
                    },
                    // contentType: false,      
                    // cache: false,             
                    // processData:false,
                    success: function(response) {
                        console.log(response);
                        if (response.status == 'success') {
                            $('.modal').find('#nama_tes').val(event.title);
                            $('.modal').find('#tanggal_mulai').val(event.start == null ? null : event.start.format("DD/MM/YYYY"));
                            $('.modal').find('#tanggal_selesai').val(response.data.tanggal_selesai);
                            $('.modal').find('#jam_mulai').val(event.start == null ? null : event.start.format("HH:mm"));
                            $('.modal').find('#jam_selesai').val(response.data.jam_selesai);
                        } else {
                            $('.modal').find('#nama_tes').val(event.title);
                            $('.modal').find('#tanggal_mulai').val(event.start == null ? null : event.start.format("DD/MM/YYYY"));
                            $('.modal').find('#tanggal_selesai').val(event.end == null ? null : event.end.format("DD/MM/YYYY"));
                            $('.modal').find('#jam_mulai').val(event.start == null ? null : event.start.format("HH:mm"));
                            $('.modal').find('#jam_selesai').val(event.end == null ? null : event.end.format("HH:mm"));
                        }
                    }
                })
            }
            // var start   = new Date();
            // var end = new Date(y, m, d);

            // if (title) {
            //     eventData = {
            //         title: title,
            //         // id: title,
            //         start: start,
            //         end: end,
            //         allDay: false,
            //         editable: true
            //     };
            //     $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
            // }
            // $('#calendar').fullCalendar('unselect');
            // // Clear modal inputs
            // $('.modal').find('input').val('');

            // // hide modal
            // $('.modal').modal('hide');
        });

        $('.fc-button-prev').click(function() {
            // alert(calendar.fullCalendar('removeEvents'));
            calendar.fullCalendar('renderEvent', {
                title: 'New',
                start: "2013-09-09 10:30"
            });

        });
    });
</script>
<script type="text/javascript">
    google.charts.load('current', {
        'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawVisualization);

    function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
            ['Bulan', 'Peserta', 'Passed', 'Not Passed'],
            ['Jan', ,,],
            ['Feb', ,,],
            ['Maret', ,,],
            ['April', ,,],
            ['Mei', ,,],
            ['Juni', ,,],
            ['Juli', ,,],
            ['Agus', ,,],
            ['Sep', ,,],
            ['Okt', ,,],
            ['Nov', ,,],
            ['Des', ,,]
        ]);

        var options = {
            title: 'Yearly Report',
            vAxis: {
                title: ''
            },
            hAxis: {
                title: ''
            },
            seriesType: 'bars',
            series: {
                1: {
                    type: 'line'
                },
                2: {
                    type: 'line'
                }
            },
            legend: {
                position: 'bottom',
                textStyle: {
                    fontSize: 12
                }
            },
            colors: ['#4485ff', '#16d500', '#ff0000']

        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_grafik'));
        chart.draw(data, options);
    }
</script>
@stop