@extends('main.layouts.app')

@section('title', 'Kuesioner')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <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">
            
            @if(!($kuesionerls && $kuesionermeta))
            <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">Isi kuesioner untuk mengetahui tingkat kemampuan metakocnitif <br>.Dan jenis gaya belajar yang kamu miliki</p>
                <a href="{{ route('kuesioner-panduan') }}" class="btn btn-primary w-25">Isi Kuesioner</a>
            </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/image%204.png" class="img-fluid" alt="View Badge User" />
            </div>
            </div>
            @endif
        </div>
    </div>
    <div style="height: 20px;"></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>
<!-- Pop-up Modal -->
<div class="modal fade show" id="kuesionerModal" tabindex="-1" aria-labelledby="kuesionerModalLabel" aria-modal="true" role="dialog" style="display: block; background: rgba(0,0,0,0.5);">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content shadow-lg border-0 rounded-4">
            <div class="modal-body p-4 position-relative">
                <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close" onclick="document.getElementById('kuesionerModal').style.display='none'"></button>
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0 me-4">
                        <img src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/image%204.png" class="img-fluid rounded-circle shadow" alt="View Badge User" style="width: 100px; height: 100px; object-fit: cover;" />
                    </div>
                    <div>
                        <h5 class="card-title text-primary mb-2">Hai, {{ auth()->user()->nama_lengkap ?? 'Tamu' }}</h5>
                        <p class="mb-3">Kamu belum mengisi kuesioner nih!<br>Yuk lengkapi kuesioner terlebih dahulu untuk dapat mengakses materi.</p>
                        <a href="{{ route('kuesioner-panduan') }}" class="btn btn-gradient-primary px-4 py-2 rounded-pill shadow-sm">Isi Kuesioner</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Optional: Modal backdrop for better UX -->
<style>
    .modal-backdrop-custom {
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
    }
    .btn-gradient-primary {
        background: linear-gradient(90deg, #4e54c8 0%, #8f94fb 100%);
        color: #fff;
        border: none;
    }
    .btn-gradient-primary:hover {
        background: linear-gradient(90deg, #8f94fb 0%, #4e54c8 100%);
        color: #fff;
    }
</style>
<script>
    // Optional: Close modal when clicking outside the modal content
    document.addEventListener('click', function(e) {
        var modal = document.getElementById('kuesionerModal');
        if (modal && e.target === modal) {
            modal.style.display = 'none';
        }
    });
</script>

@section('helpInstructions')
[
    "<h4>Selamat datang di Kuesioner!</h4><p>Hai! Kenalin aku Yura, yang akan mengajak kamu untuk menjelajah fitur kuesioner!</p>",
    "<p>Pada halaman ini, kamu bisa memulai mengerjakan kuesioner.</p>",
    "<h4>Mengapa saya ditampilkan halaman ini?</h4><p>Karena kamu adalah pengguna baru dan belum mengisi kuesioner. Yuk isi kuesioner agar bisa mengakses materi!</p>"
]
@endsection
@endsection