@extends('Layouts.main')
@section('container')
    <div class="row">
        <div class="col-12 mb-3">
            <h5 class="mb-0 mt-0">TOR & UP</h5>
        </div>
        <div class="col-12">
            <div class="row mb-3">
                <div class="col-2">
                    <select id="periodetor" name="periodetor" class="form-control form-control-sm selectperiode">
                        @foreach ($periodes as $periode)
                            <option value="{{ $periode }}" {{ session('periode_tor') == $periode ? 'selected' : '' }}>
                                {{ $periode }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

        </div>
        <div class="col-12">
            <div class="card border shadow-none" style="height: 400px">
                <div class="card-body" id="tor"></div>
            </div>
            <div class="card border shadow-none" style="height: 400px">
                <div class="card-body" id="up"></div>
            </div>
        </div>
        <div class="col-12 mb-3">
            <h5 class="mb-0 mt-0">Sidang</h5>
            <span class="text-muted">Rekapitulasi dalam grafik</span>
        </div>
        <div class="col-12">
            <div class="row mb-3">
                <div class="col-2">
                    <select id="periodesidang" name="periodesidang" class="form-control form-control-sm selectperiode">
                        @foreach ($periodes as $periode)
                            <option value="{{ $periode }}"
                                {{ session('periode_sidang') == $periode ? 'selected' : '' }}>
                                {{ $periode }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-2">
                    <select id="bulansidang" name="bulansidang" class="form-control form-control-sm selectbulan">
                        @foreach ($bulans as $bulan)
                            <option value="{{ $bulan }}" {{ session('bulan_sidang') == $bulan ? 'selected' : '' }}>
                                {{ $bulan }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

        </div>

        <div class="col-12">
            <div class="card border shadow-none" style="height: 400px">
                <div class="card-body" id="sidang"></div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            tor()
            up()
            sidang()
            $('#periodetor').on('change', function() {
                tor()
                up()
            })

            $('#periodesidang').on('change', function() {
                sidang()
            })
        })

        function tor() {
            var periodetor = $('#periodetor').val()
            $.ajax({
                url: "{{ url('/tor/grafik') }}",
                type: "post",
                data: {
                    periodetor: periodetor
                },
                success: function(data) {
                    Highcharts.chart('tor', {

                        chart: {
                            type: 'column'
                        },

                        title: {
                            text: 'Rekapitulasi TOR per Prodi'
                        },

                        subtitle: {
                            text: 'Periode ' + periodetor
                        },

                        legend: {
                            align: 'center',
                            verticalAlign: 'bottom',
                            layout: 'horizontal'
                        },

                        xAxis: {
                            categories: data.kategori,
                            labels: {
                                x: -10
                            }
                        },

                        yAxis: {
                            allowDecimals: false,
                            title: {
                                text: 'Amount'
                            }
                        },

                        series: data.series,
                        plotOptions: {
                            column: {
                                dataLabels: {
                                    enabled: true,
                                    crop: false,
                                    overflow: 'none'
                                }
                            }
                        },
                        responsive: {
                            rules: [{
                                condition: {
                                    maxWidth: 500
                                },
                                chartOptions: {
                                    legend: {
                                        align: 'center',
                                        verticalAlign: 'bottom',
                                        layout: 'horizontal'
                                    },
                                    yAxis: {
                                        labels: {
                                            align: 'left',
                                            x: 0,
                                            y: -5
                                        },
                                        title: {
                                            text: null
                                        }
                                    },
                                    subtitle: {
                                        text: null
                                    },
                                    credits: {
                                        enabled: false
                                    }
                                }
                            }]
                        }
                    })
                }
            })

        }

        function up() {
            var periodetor = $('#periodetor').val()
            $.ajax({
                url: "{{ url('/tor/up/grafik') }}",
                type: "post",
                data: {
                    periodetor: periodetor
                },
                success: function(data) {
                    Highcharts.chart('up', {

                        chart: {
                            type: 'column'
                        },

                        title: {
                            text: 'Rekapitulasi UP per Prodi'
                        },

                        subtitle: {
                            text: 'Periode ' + periodetor
                        },

                        legend: {
                            align: 'center',
                            verticalAlign: 'bottom',
                            layout: 'horizontal'
                        },

                        xAxis: {
                            categories: data.kategori,
                            labels: {
                                x: -10
                            }
                        },

                        yAxis: {
                            allowDecimals: false,
                            title: {
                                text: 'Amount'
                            }
                        },

                        series: data.series,
                        plotOptions: {
                            column: {
                                dataLabels: {
                                    enabled: true,
                                    crop: false,
                                    overflow: 'none'
                                }
                            }
                        },
                        responsive: {
                            rules: [{
                                condition: {
                                    maxWidth: 500
                                },
                                chartOptions: {
                                    legend: {
                                        align: 'center',
                                        verticalAlign: 'bottom',
                                        layout: 'horizontal'
                                    },
                                    yAxis: {
                                        labels: {
                                            align: 'left',
                                            x: 0,
                                            y: -5
                                        },
                                        title: {
                                            text: null
                                        }
                                    },
                                    subtitle: {
                                        text: null
                                    },
                                    credits: {
                                        enabled: false
                                    }
                                }
                            }]
                        }
                    })
                }
            })

        }

        function sidang() {
            var periodesidang = $('#periodesidang').val()
            var bulansidang = $('#bulansidang').val()
            $.ajax({
                url: "{{ url('/sidang/grafik') }}",
                type: "post",
                data: {
                    periodesidang: periodesidang,
                    bulansidang: bulansidang
                },
                success: function(data) {
                    Highcharts.chart('sidang', {

                        chart: {
                            type: 'column'
                        },

                        title: {
                            text: 'Rekapitulasi Sidang per Prodi'
                        },

                        subtitle: {
                            text: 'Periode ' + bulansidang + ' ' + periodesidang
                        },

                        legend: {
                            align: 'center',
                            verticalAlign: 'bottom',
                            layout: 'horizontal'
                        },

                        xAxis: {
                            categories: data.kategori,
                            labels: {
                                x: -10
                            }
                        },

                        yAxis: {
                            allowDecimals: false,
                            title: {
                                text: 'Amount'
                            }
                        },

                        series: data.series,
                        plotOptions: {
                            column: {
                                dataLabels: {
                                    enabled: true,
                                    crop: false,
                                    overflow: 'none'
                                }
                            }
                        },
                        responsive: {
                            rules: [{
                                condition: {
                                    maxWidth: 500
                                },
                                chartOptions: {
                                    legend: {
                                        align: 'center',
                                        verticalAlign: 'bottom',
                                        layout: 'horizontal'
                                    },
                                    yAxis: {
                                        labels: {
                                            align: 'left',
                                            x: 0,
                                            y: -5
                                        },
                                        title: {
                                            text: null
                                        }
                                    },
                                    subtitle: {
                                        text: null
                                    },
                                    credits: {
                                        enabled: false
                                    }
                                }
                            }]
                        }
                    })
                }
            })

        }
    </script>
@endsection