@extends('layouts.front')
@push('scripts')
    <script src="{{ url('assets/plugin/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ url('assets/js/ui-apexchart.js') }}"></script>
@endpush
@section('content')
    <div class="p-5 mt-5 container">
        <div class="border p-3">
            <h1 class="fw-bold text-color text-center my-5">REKAP PPDB KOTA SAMARINDA 2024</h1>
            <div class="row">
                <div class="col-sm p-1">
                    <div class="p-3 rounded d-flex" style="background-color: #88b975">
                        <div class="mx-2">
                            <img style="width: 50px" src="{{ asset('assets/content/images/rekap1.png') }}" alt="">
                        </div>
                        <div class="w-100" style="min-height: 120px">
                            <h5 class="text-white">SD</h5>
                            <h5 class="text-white fw-bold">340</h5>
                            <div class="progress w-100" role="progressbar" aria-label="Example with label"
                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg-success" style="width: 16% ;">16%
                                </div>
                            </div>
                            <h6 class="text-white text-center">16% dari total</h6>
                        </div>
                    </div>

                </div>
                <div class="col-sm p-1">
                    <div class="p-3 rounded d-flex" style="background-color: #75a5b9">
                        <div class="mx-2">
                            <img style="width: 50px" src="{{ asset('assets/content/images/rekap2.png') }}" alt="">
                        </div>
                        <div class="w-100" style="min-height: 120px">
                            <h5 class="text-white">SMP</h5>
                            <h5 class="text-white fw-bold">340</h5>
                            <div class="progress w-100" role="progressbar" aria-label="Example with label"
                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg-success " style="width: 16% ;">16%
                                </div>
                            </div>
                            <h6 class="text-white text-center">16% dari total</h6>
                        </div>
                    </div>

                </div>
                <div class="col-sm p-1">
                    <div class="p-3 rounded d-flex" style="background-color: #b9ae75">
                        <div class="mx-2">
                            <img style="width: 50px" src="{{ asset('assets/content/images/rekap3.png') }}" alt="">
                        </div>
                        <div class="w-100" style="min-height: 120px">
                            <h5 class="text-white">Kuota</h5>
                            <h5 class="text-white fw-bold">340</h5>
                            <div class="progress w-100" role="progressbar" aria-label="Example with label"
                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar  " style="width: 16% ;background-color:#ffffff!important;">16%
                                </div>
                            </div>
                            <h6 class="text-white text-center">16% dari total</h6>
                        </div>
                    </div>

                </div>
                <div class="col-sm p-1">
                    <div class="p-3 rounded d-flex" style="background-color: #b97575">
                        <div class="mx-2">
                            <img style="width: 50px" src="{{ asset('assets/content/images/rekap4.png') }}" alt="">
                        </div>
                        <div class="w-100" style="min-height: 120px">
                            <h5 class="text-white">Siswa</h5>
                            <h5 class="text-white fw-bold">340</h5>
                            <div class="progress w-100" role="progressbar" aria-label="Example with label"
                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar  " style="width: 16% ;background-color:#ffffff!important;">16%
                                </div>
                            </div>
                            <h6 class="text-white text-center">16% dari total</h6>
                        </div>
                    </div>

                </div>
            </div>
            <div class="row my-5">
                <div class="col">
                    <div class="card ">
                        <div class="card-header">
                            <h4>Bentuk Pendidikan</h4>
                        </div>
                        <div class="card-body">
                            <div id="bentukPendidikan"></div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card ">
                        <div class="card-header">
                            <h4>Jenis Kelamin</h4>
                        </div>
                        <div class="card-body">
                            <div id="jenisKelamin"></div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <div>

    </div>
@endsection