@extends('layouts.student')
@section('title', $material->title)
@section('topbar-title', 'Materi')

@section('content')
<style>
    :root { --navy:#0d1b2a; --gold:#b8962e; --gold-2:#d4af4f; --gold-light:#f7f0dc; --cream:#faf8f4; --cream-2:#f3efe6; --border:#e5e0d5; --muted:#6b6560; }
    .serif { font-family:'Cormorant Garamond',Georgia,serif; }
    .section-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; }
    .back-link { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); text-decoration:none; margin-bottom:20px; }
    .back-link:hover { color:var(--navy); }

    .panel { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
    .panel-head { padding:18px 22px 16px; border-bottom:1px solid var(--border); }
    .panel-body { padding:20px 22px; }
    .panel-title { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:600; color:var(--navy); }

    .page-layout { display:grid; grid-template-columns:1fr 260px; gap:16px; }
    @media(max-width:960px) { .page-layout{grid-template-columns:1fr;} }

    /* Content areas */
    .video-wrap { aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
    .video-wrap iframe { width:100%; height:100%; }
    .link-box { background:var(--gold-light); border:1px solid rgba(184,150,46,.25); border-radius:12px; padding:18px 20px; }
    .text-content { font-size:13px; line-height:1.8; color:#374151; }
    .file-box { background:var(--cream); border:1px solid var(--border); border-radius:12px; padding:28px; text-align:center; }

    /* Sidebar */
    .info-item { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted); padding:8px 0; border-bottom:1px solid #f5f2ec; }
    .info-item:last-child { border-bottom:none; }
    .info-item i { color:var(--gold); font-size:12px; width:14px; }
    .quick-btn { display:block; font-size:12px; font-weight:500; padding:10px 12px; border-radius:10px; text-decoration:none; transition:background .12s; margin-bottom:6px; }
    .quick-btn:last-child { margin-bottom:0; }
    .quick-btn.primary { background:var(--navy); color:#fff; text-align:center; }
    .quick-btn.secondary { background:var(--cream-2); color:var(--navy); border:1px solid var(--border); }
    .quick-btn.secondary:hover { background:var(--cream); }
    .quick-btn.gold { background:var(--gold-light); color:var(--gold); }
    .quick-btn.gold:hover { background:#f0e5c0; }
</style>

<a href="{{ route('student.courses.show', $course) }}" class="back-link">
    <i class="fa fa-arrow-left" style="font-size:10px;"></i> Kembali ke {{ $course->title }}
</a>

@php
    $fileUrl = null;
    if (in_array($material->type, ['pdf', 'word', 'excel']) && $material->content) {
        $fileUrl = Storage::url($material->content);
    }
    $embedUrl = null;
    if ($material->type === 'video' && $material->content) {
        preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([A-Za-z0-9_\-]+)/', $material->content, $matches);
        if (!empty($matches[1])) {
            $embedUrl = 'https://www.youtube.com/embed/' . $matches[1];
        }
    }
@endphp

<div class="page-layout">
    {{-- Main content --}}
    <div>
        <div class="panel">
            <div class="panel-head">
                <div class="section-label">{{ ucfirst($material->type) }} · {{ $course->title }}</div>
                <h1 class="panel-title" style="margin-top:4px;font-size:20px;">{{ $material->title }}</h1>
                <div style="display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;">
                    @if($material->section)
                    <span style="font-size:10px;font-weight:600;padding:3px 9px;border-radius:20px;background:#f3e8ff;color:#6b21a8;">
                        <i class="fa fa-layer-group" style="margin-right:4px;font-size:9px;"></i>{{ $material->section->title }}
                    </span>
                    @endif
                    <span style="font-size:10px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--gold-light);color:var(--gold);">
                        <i class="fa fa-calendar" style="margin-right:4px;font-size:9px;"></i>{{ $material->created_at->translatedFormat('d F Y') }}
                    </span>
                </div>
            </div>
            <div class="panel-body">
                @if($material->type === 'video')
                    @if($embedUrl)
                    <div class="video-wrap">
                        <iframe src="{{ $embedUrl }}" title="{{ $material->title }}" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                    @else
                    <div class="file-box">
                        <i class="fa fa-video" style="font-size:32px;color:var(--muted);opacity:.4;display:block;margin-bottom:10px;"></i>
                        <p style="font-size:13px;color:var(--muted);margin-bottom:12px;">URL video tidak dapat ditampilkan.</p>
                        <a href="{{ $material->content }}" target="_blank"
                           style="display:inline-flex;align-items:center;gap:7px;background:var(--navy);color:#fff;font-size:12px;font-weight:500;padding:9px 16px;border-radius:10px;text-decoration:none;">
                            <i class="fa fa-external-link-alt" style="font-size:10px;"></i> Buka Video
                        </a>
                    </div>
                    @endif

                @elseif($material->type === 'link')
                <div class="link-box">
                    <div style="font-size:10px;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;">Tautan Eksternal</div>
                    <a href="{{ $material->content }}" target="_blank"
                       style="font-size:14px;font-weight:500;color:var(--navy);word-break:break-all;text-decoration:none;">
                        {{ $material->content }}
                    </a>
                    <div style="margin-top:12px;">
                        <a href="{{ $material->content }}" target="_blank"
                           style="display:inline-flex;align-items:center;gap:7px;background:var(--navy);color:#fff;font-size:12px;font-weight:500;padding:8px 14px;border-radius:9px;text-decoration:none;">
                            <i class="fa fa-external-link-alt" style="font-size:10px;"></i> Buka Tautan
                        </a>
                    </div>
                </div>

                @elseif($material->type === 'text')
                <div class="text-content">
                    {!! nl2br(e($material->content)) !!}
                </div>

                @elseif(in_array($material->type, ['pdf', 'word', 'excel']))
                <div class="file-box">
                    <i class="fa fa-file-alt" style="font-size:36px;color:var(--gold);display:block;margin-bottom:10px;"></i>
                    <p style="font-size:13px;color:var(--muted);margin-bottom:14px;">File materi tersedia untuk diunduh.</p>
                    @if($fileUrl)
                    <a href="{{ $fileUrl }}" target="_blank"
                       style="display:inline-flex;align-items:center;gap:7px;background:var(--navy);color:#fff;font-size:12px;font-weight:500;padding:9px 18px;border-radius:10px;text-decoration:none;">
                        <i class="fa fa-download" style="font-size:10px;"></i> Unduh / Buka File
                    </a>
                    @else
                    <p style="font-size:12px;color:#dc2626;">File tidak ditemukan.</p>
                    @endif
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Sidebar --}}
    <div style="display:flex;flex-direction:column;gap:12px;">
        <div class="panel">
            <div class="panel-head" style="display:block;">
                <div class="panel-title">Informasi Materi</div>
            </div>
            <div class="panel-body" style="padding-top:10px;">
                <div class="info-item"><i class="fa fa-file-alt"></i>{{ ucfirst($material->type) }}</div>
                <div class="info-item"><i class="fa fa-calendar"></i>{{ $material->created_at->format('d M Y') }}</div>
                <div class="info-item"><i class="fa fa-book-open"></i>{{ $course->title }}</div>
                @if($material->section)
                <div class="info-item"><i class="fa fa-layer-group"></i>{{ $material->section->title }}</div>
                @endif
            </div>
        </div>

        <div class="panel">
            <div class="panel-head" style="display:block;">
                <div class="panel-title">Aksi Cepat</div>
            </div>
            <div class="panel-body" style="padding-top:12px;">
                <a href="{{ route('student.courses.show', $course) }}" class="quick-btn secondary">
                    <i class="fa fa-arrow-left" style="margin-right:6px;font-size:10px;"></i> Daftar Materi
                </a>
                @if($material->type !== 'text' && $material->content)
                    @if($material->type === 'video' && $embedUrl)
                    <a href="{{ $material->content }}" target="_blank" class="quick-btn gold">
                        <i class="fa fa-external-link-alt" style="margin-right:6px;font-size:10px;"></i> Buka di YouTube
                    </a>
                    @elseif(in_array($material->type, ['pdf','word','excel']) && $fileUrl)
                    <a href="{{ $fileUrl }}" target="_blank" class="quick-btn gold">
                        <i class="fa fa-download" style="margin-right:6px;font-size:10px;"></i> Unduh File
                    </a>
                    @elseif($material->type === 'link')
                    <a href="{{ $material->content }}" target="_blank" class="quick-btn gold">
                        <i class="fa fa-external-link-alt" style="margin-right:6px;font-size:10px;"></i> Buka Tautan
                    </a>
                    @endif
                @endif
            </div>
        </div>
    </div>
</div>

@endsection