@extends('main.layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <!-- Konten dashboard -->
    <div class="row">
        <div class="col-lg-12 mx-auto mb-4 order-1">
            <div class="card">
                <div class="d-flex align-items-start row">
                    <div class="col-md-7">
                        <div class="card-body">
                            <h5 class="card-title text-primary">Hai, {{ auth()->user()->nama_lengkap ?? 'Tamu' }} 🎉</h5>
                            <p class="mb-4">Selamat Datang di Ametative HLE</p>
                        </div>
                    </div>
                    <div class="col-md-3 ms-auto text-end">
                        <div class="card-body pb-0 px-0 px-md-4">
                            <img src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/welcome.jpg" class="img-fluid" alt="Welcome Illustration" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Informasi Metakognitif dan Learning Style dengan Progress Bar -->
    <div class="row">
        <!-- Knowledge of Metakognitif -->
        <div class="col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-body d-flex flex-column align-items-center justify-content-center text-center" style="padding-top: 10px;">
                    <h5 class="card-title text-primary" style="margin-bottom: 0;">
                        <span class="ms-1">Knowledge of Metacognitive (KM)</span>
                    </h5>
                    <img src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/knowledge.png" class="img-fluid" alt="View Badge User">
		    @if($kuesionerls && $kuesionermeta)
                    <p class="mb-2" style="font-size: 32px; font-weight: bold;">{{ $kuesionermeta->km_class ?? 'unknown' }}</p>
		    @else
                    <p class="mb-2" style="font-size: 32px; font-weight: bold;">Tidak ada data</p>
		    @endif
                    <div class="w-100">
                        <div class="progress" style="height: 20px;">
                            <div class="progress-bar bg-info" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                60%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Regulation of Metakognitif -->
        <div class="col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-body d-flex flex-column align-items-center justify-content-center text-center" style="padding-top: 10px;">
                    <h5 class="card-title text-primary" style="margin-bottom: 0;">
                        <span class="ms-1">Regulation of Metacognitive (RM)</span>
                    </h5>
                    <img src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/1.png" 
                        class="img-fluid" alt="View Badge User" data-app-dark-img="illustrations/man-with-laptop-dark.png" data-app-light-img="illustrations/man-with-laptop-light.png" />
		    @if($kuesionerls && $kuesionermeta)
                    <p class="mb-2" style="font-size: 32px; font-weight: bold;">{{ $kuesionermeta->rm_class ?? 'unknown' }}</p>
		    @else
                    <p class="mb-2" style="font-size: 32px; font-weight: bold;">Tidak ada data</p>
		    @endif
                    <div class="w-100">
                        <div class="progress" style="height: 20px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
                                85%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Learning Style -->
        <div class="col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-body d-flex flex-column align-items-center justify-content-center text-center" style="padding-top: 10px;">
                    <h5 class="card-title text-primary" style="margin-bottom: 0;">
                        <span class="ms-1">Gaya Belajar</span>
                    </h5>
                    <img src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/2.png" 
                    class="img-fluid" alt="View Badge User" data-app-dark-img="illustrations/man-with-laptop-dark.png" data-app-light-img="illustrations/man-with-laptop-light.png" />
		    @if($kuesionerls && $kuesionermeta)
                    <p class="mb-2" style="font-size: 32px; font-weight: bold;">{{ $kuesionerls->result ?? 'unknown' }}</p>
		    @else
                    <p class="mb-2" style="font-size: 32px; font-weight: bold;">Tidak ada data</p>
		    @endif
                    <div class="w-100">
                        <div class="progress" style="height: 20px;">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                                70%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content-wrapper">
        <div class="row">
            <div class="col-lg-12 mx-auto mb-4 order-1">
                <div class="card">
                    <!-- Header -->
                    <div class="d-flex align-items-start row">
                        <div class="col-md-7">
                            <div class="card-body">
                                <h5 class="card-title text-primary">Pengisian Kuesioner</h5>
                            </div>
                        </div>
                    </div>

                    <!-- Tabel dengan padding -->
                    <div class="card-body pt-0"> <!-- Tambahkan card-body dengan pt-0 (padding-top: 0) -->
                        <div class="table-responsive px-3 pb-3"> <!-- Tambahkan padding horizontal dan bottom -->
                            <table class="table table-bordered">
                                <thead>
                                    <tr style="background-color: #f8f9fa;">
                                        <th class="text-center font-weight-bold" style="font-size: 14px;">Hasil MAI</th>
                                        <th class="text-center font-weight-bold" style="font-size: 14px;">Hasil LS</th>
                                        <th class="text-center font-weight-bold" style="font-size: 14px;">Diisi Tanggal</th>
                                        <th class="text-center font-weight-bold" style="font-size: 14px;">Terakhir Diedit</th>
                                        <th class="text-center font-weight-bold" style="font-size: 14px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if($kuesionerls && $kuesionermeta)
                                        <tr>
                                            <td class="text-center" style="font-size: 14px;">KM {{ $kuesionermeta->km_class ?? 'unknown' }}, RM {{ $kuesionermeta->rm_class ?? 'unknown' }}</td>
                                            <td class="text-center" style="font-size: 14px;">{{ $kuesionerls->result ?? 'unknown' }}</td>
                                            <td class="text-center" style="font-size: 14px;">{{ $kuesionerls->created_at->format('d M Y') }}</td>
                                            <td class="text-center" style="font-size: 14px;">{{ $kuesionerls->updated_at->format('d M Y') }}</td>
                                            <td>
                                                <a href="{{ route('kuesioner-ls') }}" class="btn btn-info btn-sm">Ubah</a>
                                            </td>
                                        </tr>
                                    @else
                                        <tr>
                                            <td colspan="6" class="text-center" style="font-size: 14px;">Belum ada data kuesioner gaya belajar.</td>
                                        </tr>
                                    @endif
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- Knowledge of Metacognitive (Kiri) -->
        <div class="col-lg-6 mb-4">
            <div class="card h-100">
                <div class="card-body" style="padding-top: 10px;">
                    <h5 class="card-title text-primary">Knowledge of Metacognitive</h5>
                    <p style="font-size: 14px; text-align: left;">
                        Knowledge of Metacognitive (KM) merupakan pengetahuan individu terhadap kognitifnya. Knowledge of metacognitive terdiri dari pengetahuan prosedural yang merupakan pengetahuan bagaimana seseorang melakukan sesuatu, pengetahuan deklaratif mencakup pengetahuan tentang kegiatan yang dilakukan, dan kondisional, serta pengetahuan prosisional yakni pengetahuan tentang kapan dan mengapa menggunakan pengetahuan prosedural dan deklaratif.
                    </p>
                </div>
            </div>
        </div>
        
        <!-- Regulation of Metacognitive (Kanan) -->
        <div class="col-lg-6 mb-4">
            <div class="card h-100">
                <div class="card-body" style="padding-top: 10px;">
                    <h5 class="card-title text-primary">Regulation of Metacognitive</h5>
                    <p style="font-size: 14px; text-align: left;">
                        Regulation of Metacognitive (RM) merupakan kemampuan mengontrol pembelajaran, melakukan sesuatu atau melakukan perbaikan terhadap kesalahannya. Pembelajar mengatur kegiatan pembelajarannya dengan melibatkan perencanaan dan pengawasan terhadap aktivitas kognitif yang digunakan. Kemampuan metacognitive ini merupakan kunci bagi pengembangan berpikir kritis.
                    </p>
                </div>
            </div>
        </div>
        
        <!-- Gaya Belajar (Full width di bawah) -->
        <div class="col-12 mb-4">
            <div class="card">
                <div class="card-body" style="padding-top: 10px;">
                    <h5 class="card-title text-primary">Gaya Belajar</h5>
                    <p style="font-size: 14px; text-align: left;">
                        Gaya belajar VARK merupakan pengembangan dari model belajar VAK yang dirumuskan oleh Walter Burke Barbe dan rekan kerjanya. Kemudian, Neil D. Fleming & Colleen E. Mills merumuskan ulang dan mengembangkannya di tahun 1992. Saat itu, mereka melakukan penelitian dengan membagikan kuesioner dan melakukan pengamatan di ruang-ruang kelas selama ribuan jam.dengan hal ini lahirlah gaya belajar VARK yang kita ketahui sekarang. yang meliputi Visual, Aural, Read dan Kinestetik.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

@section('helpInstructions')
[
    "<h4>Selamat datang di Beranda!</h4><p>Hai! Kenalin aku Yura, yang akan mengajak kamu untuk menjelajah fitur beranda!</p>",
    "<p>Di Beranda, kamu bisa melihat beberapa informasi seperti Metakognitif dan Gaya Belajar Kamu, serta mengedit kuesioner.</p>",
    "<p>Terdapat juga penjelasan mengenai apa itu RM, KM dan Gaya Belajar.</p>"
]
@endsection
@endsection