@extends('layouts.app')
@section('title', $material->title)
@section('page-title', '📚 ' . $material->course->name)

@section('content')

<div class="material-detail">

    {{-- Breadcrumb --}}
    <div class="breadcrumb">
        <a href="{{ route('vault.index') }}">Ruang Ilmu</a> ›
        <a href="{{ route('vault.course', $material->course) }}">{{ $material->course->name }}</a> ›
        <span>{{ $material->title }}</span>
    </div>

    {{-- Material info --}}
    <div class="material-hero">
        <div class="material-hero-icon">{{ $material->type_icon }}</div>
        <div class="material-hero-info">
            <h2>{{ $material->title }}</h2>
            <p class="material-meta-row">
                <span>{{ $material->course->name }}</span> ·
                <span>{{ $material->uploader->name }}</span> ·
                <span>{{ $material->file_size_formatted }}</span> ·
                <span>⬇ {{ $material->download_count }}x diunduh</span> ·
                <span>{{ $material->created_at->format('d M Y') }}</span>
            </p>
            @if($material->description)
            <p class="material-description">{{ $material->description }}</p>
            @endif
        </div>
        <div class="material-actions">
            <a href="{{ route('vault.download', $material) }}" class="btn btn-primary">
                ⬇ Unduh Materi
            </a>
            <a href="{{ route('forum.create', ['course_id' => $material->course_id, 'material_id' => $material->id]) }}"
               class="btn btn-outline">
                💬 Tanya di Forum
            </a>
        </div>
    </div>

    {{-- Preview PDF (jika PDF) --}}
    @if($material->file_type === 'pdf')
    <div class="pdf-preview">
        <iframe src="{{ $material->file_url }}" width="100%" height="600px" class="pdf-frame"></iframe>
    </div>
    @endif

    {{-- Komentar langsung di materi --}}
    <div class="material-comments-section">
        <h3>💬 Komentar & Pertanyaan ({{ $comments->count() }})</h3>

        {{-- Form komentar --}}
        <form method="POST" action="{{ route('vault.comment', $material) }}" class="comment-form">
            @csrf
            <textarea name="body" class="form-input" rows="3"
                      placeholder="Tanyakan sesuatu tentang materi ini..."></textarea>

            {{-- Code snippet toggle --}}
            <div class="code-toggle" x-data="{ showCode: false }">
                <button type="button" @click="showCode = !showCode" class="btn btn-ghost btn-sm">
                    💻 Tambah Kode
                </button>
                <div x-show="showCode" class="code-input-area">
                    <select name="code_language" class="form-input form-input-sm">
                        @foreach(\App\Models\Post::SUPPORTED_LANGUAGES as $lang)
                        <option value="{{ $lang }}">{{ strtoupper($lang) }}</option>
                        @endforeach
                    </select>
                    <textarea name="code_snippet" class="form-input code-textarea"
                              rows="6" placeholder="// Paste kode di sini..."></textarea>
                </div>
            </div>

            <button type="submit" class="btn btn-primary btn-sm">Kirim Komentar</button>
        </form>

        {{-- Daftar komentar --}}
        @forelse($comments as $comment)
        @include('partials.comment-item', ['comment' => $comment])
        @empty
        <div class="empty-state">Belum ada komentar. Jadilah yang pertama bertanya! 💬</div>
        @endforelse
    </div>

</div>

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.13.5/cdn.min.js" defer></script>
@endpush

@endsection