@extends('layouts.admin')

@section('title')
    Superadmin -
@endsection

@section('toolbar')
    <div class="toolbar py-5 py-lg-5" id="kt_toolbar">
        <div id="kt_toolbar_container" class="container-xxl d-flex flex-stack flex-wrap">
            <div class="page-title d-flex flex-column me-3">
                <h1 class="d-flex text-dark fw-bolder my-1 fs-3">Dashboard</h1>
            </div>
            <div class="d-flex flex-row flex-nowrap align-items-center py-2 py-md-1 w-200px gap-3">
                <h5 class="text-nowrap mb-0">PPDB : </h5>
                <x-select name="tingkat" prefix="search_" class="form-select border-0" :value="$tingkat" :options="$list_tingkat" data-control="select2" />
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            <div class="row">
                <div class="col-md-8">
                    <div class="d-flex flex-row flex-wrap gap-6 justify-content-center">
                        <div class="card card-flush">
                            <div class="card-header pt-5">
                                <div class="card-title d-flex flex-column">
                                    <span class="fs-2hx fw-bolder text-dark me-2 lh-1 ls-n2">{{ format_number($jumlah_siswa) }}</span>
                                    <span class="text-gray-400 pt-1 fw-bold fs-6">Jumlah data siswa</span>
                                </div>
                            </div>
                            <div class="card-body d-flex align-items-end">
                                <div class="d-flex align-items-center flex-wrap">
                                    <div class="d-flex me-7 me-xxl-10">
                                        <div id="chart_siswa" class="min-h-auto"></div>
                                    </div>
                                    <div class="d-flex flex-column content-justify-center flex-grow-1">
                                        <div class="d-flex fs-6 fw-bold align-items-center">
                                            <div class="bullet w-8px h-6px rounded-2 bg-success me-3"></div>
                                            <div class="fs-6 fw-bold text-gray-400 flex-shrink-0">Dalam Kota</div>
                                            <div class="separator separator-dashed min-w-10px flex-grow-1 mx-2"></div>
                                            <div class="ms-auto fw-boldest text-gray-700 text-end">{{ format_number($jumlah_dalam_kota) }} ({{ $jumlah_siswa > 0 ? round(($jumlah_dalam_kota / $jumlah_siswa) * 100) : 0 }}%)</div>
                                        </div>
                                        <div class="d-flex fs-6 fw-bold align-items-center my-1">
                                            <div class="bullet w-8px h-6px rounded-2 bg-primary me-3"></div>
                                            <div class="fs-6 fw-bold text-gray-400 flex-shrink-0">LUAR KOTA</div>
                                            <div class="separator separator-dashed min-w-10px flex-grow-1 mx-2"></div>
                                            <div class="ms-auto fw-boldest text-gray-700 text-end">{{ format_number($jumlah_luar_kota) }} ({{ $jumlah_siswa > 0 ? round(($jumlah_luar_kota / $jumlah_siswa) * 100) : 0 }}%)</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @foreach($data_jenis_dokumen as $item)
                            <div class="card card-flush">
                                <div class="card-body d-flex align-items-end pt-0">
                                    <div class="d-flex align-items-center flex-column mt-6 w-100">
                                        <div class="d-flex flex-center mb-5 mb-xxl-0">
                                            <div id="chart_isi_{{ $item['dokumen_id'] }}" style="height: 260px"></div>
                                        </div>
                                        <div class="text-center position-absolute bottom-0 start-50 translate-middle-x w-100 mb-10">
                                            <p class="fw-bold fs-4 text-gray-400 mb-4 px-5">
                                                {{ $item['jumlah'] }} / {{ $jumlah_siswa }}
                                                <br>
                                                Jumlah siswa yang sudah mengupload {{ strtolower($item['dokumen']) }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="table-responsive">
                        <table class="table table-sm align-middle gs-0 gy-4">
                            <thead>
                            <tr class="fw-bolder text-muted bg-light">
                                <th class="ps-4 rounded-start">Sekolah</th>
                                <th class="pe-4 text-center rounded-end">Seleksi</th>
                            </tr>
                            </thead>
                            <tbody>
                            @php($no = 1)
                            @foreach($sekolah as $value)
                                <tr>
                                    <td class="ps-4">{{ $value->nama }}</td>
                                    <td class="pe-4 text-center">{{ $value->seleksi }} / {{ $value->pagu }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $tingkat = $('#search_tingkat');
        $tingkat.change(() => {
            let tingkat = $tingkat.find('option:selected').val();
            window.location.href = "{{ route('admin') }}?tingkat=" + tingkat;
        });

        let e = document.getElementById("chart_siswa");
        if (e) {
            let a = {size: 70, lineWidth: 11, rotate: 0,},
                t = document.createElement("canvas"),
                l = document.createElement("span");
            let o = t.getContext("2d");
            (t.width = t.height = a.size),
                e.appendChild(l),
                e.appendChild(t),
                o.translate(a.size / 2, a.size / 2),
                o.rotate((a.rotate / 180 - 0.5) * Math.PI);
            let r = (a.size - a.lineWidth) / 2,
                i = function (e, a, t) {
                    (t = Math.min(Math.max(0, t || 1), 1)),
                        o.beginPath(),
                        o.arc(0, 0, r, 0, 2 * Math.PI * t, !1), (o.strokeStyle = e),
                        (o.lineCap = "round"),
                        (o.lineWidth = a),
                        o.stroke();
                };
            i("#E4E6EF", a.lineWidth, 1),
                i(KTUtil.getCssVariableValue("--bs-success"), a.lineWidth, {{ $jumlah_siswa > 0 ? ($jumlah_dalam_kota / $jumlah_siswa) : 0 }}),
                i(KTUtil.getCssVariableValue("--bs-primary"), a.lineWidth, {{ $jumlah_siswa > 0 ? $jumlah_luar_kota / $jumlah_siswa : 0 }});
        }

        let data_jenis_dokumen = JSON.parse('@json($data_jenis_dokumen)');
        $.each(data_jenis_dokumen, (i, value) => {
            let e = document.getElementById('chart_isi_' + value.dokumen_id),
                h = parseInt(KTUtil.css(e, "height"));
            if (e) {
                let c = {
                    labels: [value.dokumen],
                    series: [value.persentase],
                    chart: { fontFamily: "inherit", height: h, type: "radialBar", offsetY: 0 },
                    plotOptions: {
                        radialBar: {
                            startAngle: -90,
                            endAngle: 90,
                            hollow: { margin: 0, size: "70%" },
                            dataLabels: {
                                showOn: "always",
                                name: { show: !0, fontSize: "13px", fontWeight: "700", offsetY: -5, color: KTUtil.getCssVariableValue("--bs-gray-500") },
                                value: { color: KTUtil.getCssVariableValue("--bs-gray-700"), fontSize: "30px", fontWeight: "700", offsetY: -40, show: !0 },
                            },
                        },
                    },
                    colors: [KTUtil.getCssVariableValue("--bs-primary")],
                    stroke: { lineCap: "round" },
                };
                new ApexCharts(e, c).render();
            }
        });
    </script>
@endpush