@extends('main.layouts.app')

@section('title', 'Materi')

@section('content')
<div class="container-fluid">
    <!-- Sidebar -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h5 class="text-primary">Learning Style</h5>
            <button class="btn btn-sm btn-outline-primary" id="hideSidebarBtn">
                <i class="fas fa-chevron-left"></i>
            </button>
        </div>
        <ul class="nav flex-column">
            <li class="nav-item">
                <button class="nav-link btn btn-light w-100 text-start learning-style-btn active" data-style="visual">Visual</button>
            </li>
            <li class="nav-item">
                <button class="nav-link btn btn-light w-100 text-start learning-style-btn" data-style="auditory">Auditory</button>
            </li>
            <li class="nav-item">
                <button class="nav-link btn btn-light w-100 text-start learning-style-btn" data-style="kinesthetic">Kinesthetic</button>
            </li>
            <li class="nav-item">
                <button class="nav-link btn btn-light w-100 text-start learning-style-btn" data-style="readwrite">Read/Write</button>
            </li>
        </ul>
    </div>

    <!-- Show Sidebar Button (Hidden by default) -->
    <button class="btn btn-primary show-sidebar-btn" id="showSidebarBtn" style="display: none;">
        <i class="fas fa-chevron-right"></i>
    </button>

    <!-- Main Content -->
    <div class="main-content" id="mainContent">
        <div class="container-xxl flex-grow-1 container-p-y">
            <!-- Welcome Section -->
            <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">Gaya belajar kamu adalah</p>
                                    <h2 class="card-title text-primary learning-style-title">Visual</h2>
                                </div>
                            </div>
                            <div class="col-md-3 ms-auto text-end">
                                <div class="card-body pb-0 px-0 px-md-5">
                                    <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>

            <!-- Content Based on Learning Style -->
            <div class="row">
                <div class="col-lg-12 mx-auto mb-4 order-1">
                    <div class="card">
                        <div class="card-body">
                            <h2 class="card-title text-primary">Perhatikan konten di bawah ini</h2>
                        </div>
                        <div class="card-body">
                            <!-- Visual Content -->
                            <div class="learning-style-content" id="visual-content">
                                <img src="{{ asset('frontend/assets/file/visual_example.png') }}" class="img-fluid" alt="Visual Example" />
                            </div>

                            <!-- Auditory Content -->
                            <div class="learning-style-content" id="auditory-content" style="display: none;">
                                <p>Berikut adalah penjelasan dalam format audio untuk gaya belajar Auditory:</p>
                                <audio controls>
                                    <source src="{{ asset('frontend/assets/file/auditory_example.mp3') }}" type="audio/mpeg">
                                    Browser Anda tidak mendukung elemen audio.
                                </audio>
                            </div>

                            <!-- Kinesthetic Content -->
                            <div class="learning-style-content" id="kinesthetic-content" style="display: none;">
                                <p>Berikut adalah aktivitas interaktif untuk gaya belajar Kinesthetic:</p>
                                <button class="btn btn-primary">Coba Simulasi</button>
                            </div>

                            <!-- Read/Write Content -->
                            <div class="learning-style-content" id="readwrite-content" style="display: none;">
                                <p>Berikut adalah teks bacaan untuk gaya belajar Read/Write:</p>
                                <p>Branching dalam pemrograman menggunakan pernyataan if untuk membuat keputusan berdasarkan kondisi tertentu. Jika kondisi benar, maka pernyataan di dalam blok if akan dijalankan. Jika salah, maka blok lain (opsional) akan dijalankan.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        height: 100%;
        background-color: #f8f9fa;
        border-right: 1px solid #dee2e6;
        padding: 20px;
        transition: transform 0.3s ease;
        z-index: 1000;
    }
    .sidebar-hidden {
        transform: translateX(-250px);
    }
    .sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .nav-link {
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 5px;
    }
    .nav-link.active {
        background-color: #4e54c8;
        color: white;
    }
    .show-sidebar-btn {
        position: fixed;
        top: 20px;
        left: 10px;
        z-index: 1001;
    }
    .main-content {
        margin-left: 250px;
        transition: margin-left 0.3s ease;
    }
    .main-content-expanded {
        margin-left: 0;
    }
    .learning-style-content {
        transition: opacity 0.3s ease;
    }
</style>

<script>
    // Hide/Show Sidebar
    const sidebar = document.getElementById('sidebar');
    const mainContent = document.getElementById('mainContent');
    const hideSidebarBtn = document.getElementById('hideSidebarBtn');
    const showSidebarBtn = document.getElementById('showSidebarBtn');

    hideSidebarBtn.addEventListener('click', () => {
        sidebar.classList.add('sidebar-hidden');
        mainContent.classList.add('main-content-expanded');
        showSidebarBtn.style.display = 'block';
    });

    showSidebarBtn.addEventListener('click', () => {
        sidebar.classList.remove('sidebar-hidden');
        mainContent.classList.remove('main-content-expanded');
        showSidebarBtn.style.display = 'none';
    });

    // Learning Style Switch
    const learningStyleButtons = document.querySelectorAll('.learning-style-btn');
    const learningStyleTitle = document.querySelector('.learning-style-title');
    const contents = document.querySelectorAll('.learning-style-content');

    learningStyleButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Remove active class from all buttons
            learningStyleButtons.forEach(btn => btn.classList.remove('active'));
            // Add active class to clicked button
            button.classList.add('active');

            // Hide all content
            contents.forEach(content => content.style.display = 'none');

            // Show selected content
            const style = button.getAttribute('data-style');
            document.getElementById(`${style}-content`).style.display = 'block';

            // Update title
            learningStyleTitle.textContent = style.charAt(0).toUpperCase() + style.slice(1);
        });
    });
</script>
@endsection