@extends('layouts.layouts')

@section('content')
    <main class="app-main"> <!--begin::App Content Header-->
        <div class="app-content-header"> <!--begin::Container-->
            <div class="container-fluid"> <!--begin::Row-->
                <div class="row">
                    <div class="col-sm-6">
                        <h3 class="mb-0">Data mahasiswa</h3>
                    </div>

                </div> <!--end::Row-->
            </div> <!--end::Container-->
        </div> <!--end::App Content Header--> <!--begin::App Content-->
        <div class="app-content"> <!--begin::Container-->
            <div class="container-fluid"> <!--
            begin::Row-->
                <div class="row"> <!-- Start col -->
                    <div class="col-md-12"> <!--begin::Row-->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Data Program Studi</h3>
                                <div class="card-tools"> <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"> <i data-lte-icon="expand" class="bi bi-plus-lg"></i> <i data-lte-icon="collapse" class="bi bi-dash-lg"></i> </button> <button type="button" class="btn btn-tool" data-lte-toggle="card-remove"> <i class="bi bi-x-lg"></i> </button> </div>
                            </div> <!-- /.card-header -->
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table m-0">
                                        <thead>
                                        <tr>
                                            <th style="width: 10px"></th>
                                            <th >Nama Program Studi</th>
                                            <th >Jumlah mahasiswa</th>
                                            <th >Lulus</th>
                                            <th >Tidak lulus</th>
                                            <th >Persentae</th>
                                        </tr>

                                        </thead>
                                        <tbody>
                                        @foreach($results as $key => $item)
                                            <tr class="align-middle">

                                                <td>{{ $key + 1 }}</td>
                                                <td>
                                                    {{$item->program_studi}}
                                                </td>
                                                <td>
                                                    {{$item->total}}
                                                </td>
                                                <td>
                                                    {{$item->lulus}}
                                                </td>
                                                <td>
                                                    {{$item->tidak_lulus}}
                                                </td>
                                                <td>
                                                    {{ round($item->persen)  }} %
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div> <!-- /.table-responsive -->
                            </div> <!-- /.card-body -->

                        </div> <!-- /.card -->
                    </div> <!-- /.col -->
                    <br>
                    <br><br><br><br>
                </div>
                <br>
                <div class="row">
                    <div class="col-lg-8">
                        <div class="card mb-4">
                            <div class="card-header border-0">
                            </div>
                            <div class="card-body">
                                <div class="position-relative mb-4">
                                    <div id="sales-chart"></div>
                                </div>
                            </div>
                        </div> <!-- /.card -->
                    </div>
                    <div class="col-md-4"> <!--begin::Quick Example-->
                        <div class="card card-primary card-outline mb-4"> <!--begin::Header-->
                            <div class="card-header">
                                <div class="card-title">Analisa</div>
                            </div> <!--end::Header--> <!--begin::Form-->
                            <form action="{{ route('save.analisa3') }}" method="POST" > <!--begin::Body-->
                                @csrf
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label for="exampleInputPassword1" class="form-label">Analisa</label>
                                        <textarea id="summernote" class="form-control summernote" name="analisa3" rows="10" >{{ $data->analisa3 }}</textarea>
                                    </div>

                                </div> <!--end::Body--> <!--begin::Footer-->
                                <div class="card-footer"> <button type="submit" class="btn btn-primary">Submit</button> </div> <!--end::Footer-->
                            </form> <!--end::Form-->
                        </div> <!--end::Quick Example--> <!--begin::Input Group-->
                    </div> <!--end::Col--> <!--begin::Col-->
                </div>
            </div> <!--end::Container-->
        </div> <!--end::App Content-->
    </main> <!--end::App Main--> <!--begin::Footer-->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.js"></script>

    <script>
        // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
        // IT'S ALL JUST JUNK FOR DEMO
        // ++++++++++++++++++++++++++++++++++++++++++

        console.log({!! json_encode($series) !!})
        console.log({!! json_encode($categoies) !!})
        $(document).ready(function() {
            $('#summernote').summernote();
        });

        var options = {
            series: {!! json_encode($series) !!},
            chart: {
                height: 500,
                width : 800,
                type: 'line',
                stacked: false
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                width: [1, 1, 4,4]
            },
            title: {
                text: 'Data  Mahasiswa',
                align: 'left',
                offsetX: 110
            },
            xaxis: {
                categories: {!! json_encode($categoies) !!},
            },
            yaxis: [
                {
                    seriesName: 'Income',
                    axisTicks: {
                        show: true,
                    },
                    axisBorder: {
                        show: true,
                        color: '#008FFB'
                    },
                    labels: {
                        style: {
                            colors: '#008FFB',
                        }
                    },
                    title: {
                        text: "Income (thousand crores)",
                        style: {
                            color: '#008FFB',
                        }
                    },
                    tooltip: {
                        enabled: true
                    }
                },
                {
                    seriesName: 'Persentase mahasiswa',
                    opposite: true,
                    axisTicks: {
                        show: true,
                    },
                    axisBorder: {
                        show: true,
                        color: '#00E396'
                    },
                    labels: {
                        style: {
                            colors: '#00E396',
                        }
                    },
                    title: {
                        text: "Persentase Mahasiswa",
                        style: {
                            color: '#00E396',
                        }
                    },
                },

            ],
            tooltip: {
                fixed: {
                    enabled: true,
                    position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
                    offsetY: 30,
                    offsetX: 60
                },
            },
            legend: {
                horizontalAlign: 'left',
                offsetX: 40
            }
        };





        const sales_chart = new ApexCharts(
            document.querySelector("#sales-chart"),
            options
        );
        sales_chart.render();
    </script> <!--end::Script-->


@endsection