@extends('layouts.app')
@section('title', 'Ruang Ilmu')
@section('page-title', '📚 Ruang Ilmu — The Vault')

@section('content')

{{-- Preview Mode Banner --}}
@if($isPreview)
<div class="preview-banner">
    <span>👁️ Preview Mode</span>
    <p>Login untuk mengakses dan mengunduh materi kuliah secara penuh.</p>
    <a href="{{ route('login') }}" class="btn btn-primary btn-sm">Login Sekarang</a>
</div>
@endif

{{-- Header --}}
<div class="vault-header">
    <div>
        <h2>Repositori Materi Kuliah</h2>
        <p class="text-muted">Materi terstruktur per semester — PDF, slide, dan source code.</p>
    </div>
    @auth
    @if(auth()->user()->isDosen())
    {{-- Tombol upload ada di halaman detail mata kuliah --}}
    @endif
    @endauth
</div>

{{-- Grid Semester --}}
<div class="semester-grid">
    @foreach($semesters as $semester)
    <div class="semester-card" style="border-top: 3px solid {{ $semester->color }}">
        <div class="semester-card-header">
            <h3 class="semester-card-title" style="color: {{ $semester->color }}">
                {{ $semester->name }}
            </h3>
            <span class="semester-year">{{ $semester->year }}</span>
        </div>

        <div class="course-cards">
            @foreach($semester->courses as $course)
            <a href="{{ route('vault.course', $course) }}" class="course-card">
                <span class="course-card-icon">{{ $course->icon ?? '📁' }}</span>
                <div class="course-card-info">
                    <div class="course-card-name">{{ $course->name }}</div>
                    <div class="course-card-code">{{ $course->code }}</div>
                    @if(!$isPreview)
                    <div class="course-card-count">
                        {{ $course->materials->count() }} materi
                    </div>
                    @else
                    <div class="course-card-count text-muted">
                        🔒 Login untuk akses
                    </div>
                    @endif
                </div>
            </a>
            @endforeach
        </div>
    </div>
    @endforeach
</div>

@endsection