@extends('partials.master')
@section('title','Dashboard')
@section('content')
<!--begin::Row-->
<div class="row gy-5 g-xl-10">
    <!--begin::Col-->
    <div class="col-sm-3 col-xl-3 mb-xl-10 mb-10">
        <!--begin::Card widget 2-->
        <div class="card h-lg-100 light-secondary">
            <!--begin::Body-->
            <div class="card-body d-flex justify-content-between align-items-start flex-column">
                <!--begin::Icon-->
                <div class="m-0">
                <i class="ki-outline ki-chart-simple fs-2hx text-gray-600"></i>
                </div>
                <!--end::Icon-->
                <!--begin::Section-->
                <div class="d-flex flex-column my-7">
                    <!--begin::Number-->
                    <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">{{ $jml_kelas_x }}</span>
                    <!--end::Number-->
                    <!--begin::Follower-->
                    <div class="m-0">
                        <span class="fw-semibold fs-6 text-gray-400">Jumlah Kelas X</span><br><br>
                        <span class="fw-semibold fs-6 text-gray-400">Laki Laki : {{ $x_l }}</span></br>
                        <span class="fw-semibold fs-6 text-gray-400">Perempuan : {{ $x_p }}</span>
                    </div>
                    <!--end::Follower-->
                </div>
                <!--end::Section-->
                <!--begin::Badge-->
                <span class="badge badge-light-success fs-base">
                <!-- <i class="ki-outline ki-arrow-up fs-5 text-success ms-n1"></i>2.1%</span> -->
                <!--end::Badge-->
            </div>
            <!--end::Body-->
        </div>
        <!--end::Card widget 2-->
    </div>
    <!--end::Col-->
    <!--begin::Col-->
    <div class="col-sm-3 col-xl-3 mb-xl-10 mb-10">
        <!--begin::Card widget 2-->
        <div class="card h-lg-100">
            <!--begin::Body-->
            <div class="card-body d-flex justify-content-between align-items-start flex-column">
                <!--begin::Icon-->
                <div class="m-0">
                    <i class="ki-outline ki-chart-simple fs-2hx text-gray-600"></i>
                </div>
                <!--end::Icon-->
                <!--begin::Section-->
                <div class="d-flex flex-column my-7">
                    <!--begin::Number-->
                    <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">{{ $jml_kelas_xi }}</span>
                    <!--end::Number-->
                    <!--begin::Follower-->
                    <div class="m-0">
                        <span class="fw-semibold fs-6 text-gray-400">Jumlah Kelas XI</span></br></br>
                        <span class="fw-semibold fs-6 text-gray-400">Laki Laki : {{ $xi_l }}</span></br>
                        <span class="fw-semibold fs-6 text-gray-400">Perempuan : {{ $xi_p }}</span>
                    </div>
                    <!--end::Follower-->
                </div>
                <!--end::Section-->
                <!--begin::Badge-->
                <span class="badge badge-light-success fs-base">
                <!-- <i class="ki-outline ki-arrow-up fs-5 text-success ms-n1"></i>2.1%</span> -->
                <!--end::Badge-->
            </div>
            <!--end::Body-->
        </div>
        <!--end::Card widget 2-->
    </div>
    <!--end::Col-->
    <!--begin::Col-->
    <div class="col-sm-3 col-xl-3 mb-xl-10 mb-10">
        <!--begin::Card widget 2-->
        <div class="card h-lg-100">
            <!--begin::Body-->
            <div class="card-body d-flex justify-content-between align-items-start flex-column">
                <!--begin::Icon-->
                <div class="m-0">
                    <i class="ki-outline ki-chart-simple fs-2hx text-gray-600"></i>
                </div>
                <!--end::Icon-->
                <!--begin::Section-->
                <div class="d-flex flex-column my-7">
                    <!--begin::Number-->
                    <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">{{ $jml_kelas_xii }}</span>
                    <!--end::Number-->
                    <!--begin::Follower-->
                    <div class="m-0">
                        <span class="fw-semibold fs-6 text-gray-400">Jumlah Kelas XII</span><br><br>
                        <span class="fw-semibold fs-6 text-gray-400">Laki Laki : {{ $xii_l }}</span><br>
                        <span class="fw-semibold fs-6 text-gray-400">Perempuan : {{ $xii_p }}</span>
                    </div>
                    <!--end::Follower-->
                </div>
                <!--end::Section-->
                <!--begin::Badge-->
                <span class="badge badge-light-danger fs-base">
                <!-- <i class="ki-outline ki-arrow-down fs-5 text-danger ms-n1"></i>0.47%</span> -->
                <!--end::Badge-->
            </div>
            <!--end::Body-->
        </div>
        <!--end::Card widget 2-->
    </div>
    <!--end::Col-->
    <!--begin::Col-->
    <div class="col-sm-3 col-xl-3 mb-xl-10 mb-10">
        <!--begin::Card widget 2-->
        <div class="card h-lg-100">
            <!--begin::Body-->
            <div class="card-body d-flex justify-content-between align-items-start flex-column">
                <!--begin::Icon-->
                <div class="m-0">
                    <i class="ki-outline ki-chart-simple fs-2hx text-gray-600"></i>
                </div>
                <!--end::Icon-->
                <!--begin::Section-->
                <div class="d-flex flex-column my-7">
                    <!--begin::Number-->
                    <span class="fw-semibold fs-3x text-gray-800 lh-1 ls-n2">{{ $jml_total }}</span>
                    <!--end::Number-->
                    <!--begin::Follower-->
                    <div class="m-0">
                        <span class="fw-semibold fs-6 text-gray-400">Jumlah Total</span><br><br>
                        <span class="fw-semibold fs-6 text-gray-400">Laki Laki : {{ $jml_laki_laki }}</span></br>
                        <span class="fw-semibold fs-6 text-gray-400">Perempuan : {{ $jml_perempuan }}</span>
                    </div>
                    <!--end::Follower-->
                </div>
                <!--end::Section-->
                <!--begin::Badge-->
                <span class="badge badge-light-success fs-base">
                <!-- <i class="ki-outline ki-arrow-up fs-5 text-success ms-n1"></i>2.1%</span> -->
                <!--end::Badge-->
            </div>
            <!--end::Body-->
        </div>
        <!--end::Card widget 2-->
    </div>
    <!--end::Col-->
</div>
<!--end::Row-->
<!--begin::Row-->
<div class="row g-5 g-xl-10 mb-5 mb-xl-10">
    <!--begin::Col-->
    <div class="col-xxl-4">
        <!--begin::Chart widget 23-->
        <div class="card card-flush overflow-hidden h-md-100">
            <!--begin::Header-->
            <div class="card-header py-5">
                <!--begin::Title-->
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold text-dark">DATA DAPODIK</span>
                    <span class="text-gray-400 mt-1 fw-semibold fs-6"></span>
                </h3>
                <!--end::Title-->
                <!--begin::Toolbar-->
                <div class="card-toolbar">
                    
                </div>
                <!--end::Toolbar-->
            </div>
            <!--end::Header-->
            <!--begin::Card body-->
            <div class="card-body pt-4">
                <!--begin::Alert-->
                <div class="alert alert-primary d-flex align-items-center p-5">
                    <!--begin::Icon-->
                    <i class="ki-duotone ki-shield-tick fs-2hx text-success me-4"><span class="path1"></span><span class="path2"></span></i>
                    <!--end::Icon-->

                    <!--begin::Wrapper-->
                    <div class="d-flex flex-column">
                        <!--begin::Title-->
                        <h4 class="mb-1 text-dark">Kelas X</h4>
                        <!--end::Title-->

                        <!--begin::Content-->
                        <span>Jumlah : {{ $djml_kelas_x }}</span>
                        <span>Laki-Laki :{{ $dx_l }}</span>
                        <span>Perempuan :{{ $dx_p }}</span>
                        <!--end::Content-->
                    </div>
                    <!--end::Wrapper-->
                </div>
                <!--end::Alert-->
                <!--begin::Alert-->
                <div class="alert alert-primary d-flex align-items-center p-5">
                    <!--begin::Icon-->
                    <i class="ki-duotone ki-shield-tick fs-2hx text-success me-4"><span class="path1"></span><span class="path2"></span></i>
                    <!--end::Icon-->

                    <!--begin::Wrapper-->
                    <div class="d-flex flex-column">
                        <!--begin::Title-->
                        <h4 class="mb-1 text-dark">Kelas XI</h4>
                        <!--end::Title-->

                        <!--begin::Content-->
                        <span>Jumlah : {{ $djml_kelas_xi }}</span>
                        <span>Laki-Laki :{{ $dxi_l }}</span>
                        <span>Perempuan :{{ $dxi_p }}</span>
                        <!--end::Content-->
                    </div>
                    <!--end::Wrapper-->
                </div>
                <!--end::Alert-->
                <!--begin::Alert-->
                <div class="alert alert-primary d-flex align-items-center p-5">
                    <!--begin::Icon-->
                    <i class="ki-duotone ki-shield-tick fs-2hx text-success me-4"><span class="path1"></span><span class="path2"></span></i>
                    <!--end::Icon-->

                    <!--begin::Wrapper-->
                    <div class="d-flex flex-column">
                        <!--begin::Title-->
                        <h4 class="mb-1 text-dark">Kelas XII</h4>
                        <!--end::Title-->

                        <!--begin::Content-->
                        <span>Jumlah : {{ $djml_kelas_xii }}</span>
                        <span>Laki-Laki :{{ $dxii_l }}</span>
                        <span>Perempuan :{{ $dxii_p }}</span>
                        <!--end::Content-->
                    </div>
                    <!--end::Wrapper-->
                </div>
                <!--end::Alert-->
                <!--begin::Alert-->
                <div class="alert alert-primary d-flex align-items-center p-5">
                    <!--begin::Icon-->
                    <i class="ki-duotone ki-shield-tick fs-2hx text-success me-4"><span class="path1"></span><span class="path2"></span></i>
                    <!--end::Icon-->

                    <!--begin::Wrapper-->
                    <div class="d-flex flex-column">
                        <!--begin::Title-->
                        <h4 class="mb-1 text-dark">Jumlah Total</h4>
                        <!--end::Title-->

                        <!--begin::Content-->
                        <span>Total :  {{ $djml_total }}</span>
                        <span>Laki-Laki :{{ $djml_laki_laki }}</span>
                        <span>Perempuan :{{ $djml_perempuan }}</span>
                        <!--end::Content-->
                    </div>
                    <!--end::Wrapper-->
                </div>
                <!--end::Alert-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Chart widget 23-->
    </div>
    <!--end::Col-->
    <!--begin::Col-->
    <div class="col-xxl-8">
        <!--begin::Chart widget 23-->
        <!-- <div class="card card-flush overflow-hidden h-md-100"> -->
        <div class="card">
            <!--begin::Header-->
            <div class="card-header py-5">
                <!--begin::Title-->
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold text-dark">DATA SISTA</span>
                    <span class="text-gray-400 mt-1 fw-semibold fs-6">Jumlah Siswa per Rombel</span>
                </h3>
                <!--end::Title-->
                <!--begin::Toolbar-->
                <div class="card-toolbar">
                    
                </div>
                <!--end::Toolbar-->
            </div>
            <!--end::Header-->
            <!--begin::Card body-->
            <div class="card-body pt-4">
            <div class="table-responsive">
                <!-- <table id="kt_datatable_zero_configuration" class="table table-row-bordered gy-5"> -->
                <!-- <table id="kt_datatable_vertical_scroll" class="table table-striped table-row-bordered gy-5 gs-7"> -->
                <!-- <table id="kt_datatable_fixed_columns" class="table table-striped table-row-bordered gy-5 gs-7"> -->
                <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
                    <thead>
                        <tr class="fw-semibold fs-6 text-muted">
                            <th>No</th>
                            <th>Rombel</th>
                            <th>Wali Kelas</th>
                            <th>Lk</th>
                            <th>Pr</th>
                            <th>Total</th>
                            <th hidden></th>
                            <th hidden></th>
                        </tr>
                    </thead>
                    <tbody>
                                                @foreach($rombel as $rombel)
                        <tr style="height: 8px;">
                            <td style="height: 8px;">{{ $i++ }}</td>
                            <td>{{ $rombel->nama_rombel }}</td>
                            <td>{{ $rombel->guru->nama_guru }}</td>
                            <td>{{ $rombel->jml_laki_laki }}</td>
                            <td>{{ $rombel->jml_perempuan }}</td>
                            <td>{{ $rombel->jml_total }}</td>
                            <td hidden></td>
                            <td hidden></td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>No</th>
                            <th>Rombel</th>
                            <th>Wali Kelas</th>
                            <th>Lk</th>
                            <th>Pr</th>
                            <th>Total</th>
                            <th hidden></th>
                            <th hidden></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Chart widget 23-->
    </div>
    <!--end::Col-->
</div>
<!--end::Row-->
<script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>
<script>var hostUrl = "assets/";</script>
		<!--begin::Global Javascript Bundle(mandatory for all pages)-->
		<script src="{{ asset('assets/plugins/global/plugins.bundle.js') }}"></script>
		<script src="{{ asset('assets/js/scripts.bundle.js') }}"></script>
		<!--end::Global Javascript Bundle-->
		<!--begin::Vendors Javascript(used for this page only)-->
		<script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
		<!--end::Vendors Javascript-->
		<!--begin::Custom Javascript(used for this page only)-->
		<script src="{{ asset('assets/js/custom/apps/user-management/users/list/table.js') }}"></script>
		<script src="{{ asset('assets/js/custom/apps/user-management/users/list/export-users.js') }}"></script>
		<script src="{{ asset('assets/js/custom/apps/user-management/users/list/add.js') }}"></script>
		<script src="{{ asset('assets/js/widgets.bundle.js') }}"></script>
		<script src="{{ asset('assets/js/custom/widgets.js') }}"></script>
		<script src="{{ asset('assets/js/custom/apps/chat/chat.js') }}"></script>
		<script src="{{ asset('assets/js/custom/utilities/modals/create-campaign.js') }}"></script>
		<script src="{{ asset('assets/js/custom/utilities/modals/users-search.js') }}"></script>
		<!--end::Custom Javascript-->
		<!--end::Javascript-->
        <!--Custom Javascript-->
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        @if($message = Session::get('success'))
            <script>
            Swal.fire({
            icon: 'success',
            title: 'Success',
            text: '{{ $message }}',
            footer: ''
            })
            </script>
        @endif
        <!--end::Javascript-->
<script>
    $("#kt_datatable_zero_configuration").DataTable();
</script>



@endsection