@extends('student.main')

@section('title', 'Beranda')

@section('content')
    <div class="page-body mt-2 mt-lg-4">
        <div class="container-fluid">
            <div class="row g-xl-4 g-lg-3 g-2 row-deck justify-content-start">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="row">
                                    <div class="col-12 col-lg-2">
                                        <img src="https://pepi.siakadcloud.com/assets/v1/v2/icon/dashboard/sevi.svg"
                                            alt="">
                                    </div>
                                    <div class="col-12 col-lg-4 mt-2" style="border-right: 1px solid black">
                                        <p class="fw-bold text-primary mt-0 mb-1">Mahasiswa</p>
                                        <h6 class="fw-bold">Hi! {{ $student->name }}</h6>
                                        <p>
                                            Saat ini Anda berada di Semester {{ $student->level }} dengan hasil IPS & IPK
                                            sebagai
                                            berikut.
                                            Untuk melihat detail perkuliahan
                                            silakan klik <a class="text-primary fw-bold"
                                                href="{{ route('students.result.khs') }}">Lihat detail.</a>
                                        </p>
                                    </div>
                                    <div class="col-12 col-lg-6 mt-2">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <div class="d-block">
                                                    <small>IPS</small>
                                                    <h3 class="fw-bold">{{ $ipsScore }}</h3>
                                                </div>
                                                <div class="d-block mt-4">
                                                    <small>IPK</small>
                                                    <h3 class="fw-bold">{{ $ipkScore }}</h3>
                                                </div>
                                            </div>
                                            <div class="col-md-10">
                                                <div class="skeleton">
                                                    <div class="s-img"></div>
                                                    <div class="s-line first"></div>
                                                    <div class="s-line first"></div>
                                                    <div class="s-line first"></div>
                                                </div>
                                                <div class="skeleton">
                                                    <div class="s-img"></div>
                                                    <div class="s-line first"></div>
                                                    <div class="s-line first"></div>
                                                    <div class="s-line first"></div>
                                                </div>
                                                <div class="chart">
                                                    <div class="ct-chart" id="C_LineArea" style="height: 150px"></div>
                                                    <div class="d-flex justify-content-center">
                                                        <small>Grafik IPS (Semester)</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-7">
                    <livewire:student.dashboard.schedule />
                </div>

                <div class="col-md-5 d-flex">
                    <div class="card" style="height: 550px">
                        <div class="card-body" id="my_calendar"></div>
                        <script data-cfasync="false"
                            src="https://wrraptheme.com/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
                        <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js'></script>
                        <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/locales-all.min.js'></script>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @livewireScripts

@endsection

@push('custom-style')
    <link rel="stylesheet" href="{{ asset('assets/cssbundle/chartist.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/cssbundle/fullcalendar.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/skeleton.css') }}" />
@endpush

@push('custom-script')
    <script src="{{ asset('assets/js/bundle/chartist.bundle.js') }}"></script>
    <script src="{{ asset('js/dashboard_student.js') }}"></script>
@endpush