@extends('guru.layouts.app')

@section('content')
<section class="section">
  {{-- Breadcrumb --}}
  <div class="section-header">
    <h1>{{ $materi->judul }}</h1>
    <div class="section-header-breadcrumb">
      <div class="breadcrumb-item"><a href="{{ route('guru.dashboard') }}">Dashboard</a></div>
      <div class="breadcrumb-item"><a href="{{ route('guru.materi.index') }}">Materi</a></div>
      <div class="breadcrumb-item active">{{ $materi->judul }}</div>
    </div>
  </div>

  <div class="section-body">
    <div class="card">
      <div class="card-header">
        <h4 class="mb-0">Konten Materi</h4>
      </div>

      <div class="card-body">
      

        {{-- Tab hanya ditampilkan jika ada file --}}
        @if($materi->file)
        <ul class="nav nav-pills mb-3" id="materiTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="isi-tab" data-toggle="tab" href="#isi" role="tab" aria-controls="isi" aria-selected="true">
              <i class="fas fa-align-left"></i> Materi
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="file-tab" data-toggle="tab" href="#file" role="tab" aria-controls="file" aria-selected="false">
              <i class="fas fa-paperclip"></i> File
            </a>
          </li>
        </ul>
        @endif

        <div class="tab-content" id="materiTabContent">
          {{-- Tab Isi Materi --}}
          <div class="tab-pane fade show active" id="isi" role="tabpanel" aria-labelledby="isi-tab">
            <div class="p-3 bg-white border rounded">
              {!! $materi->isi !!}
            </div>
          </div>

          {{-- Tab File --}}
          @if($materi->file)
          <div class="tab-pane fade" id="file" role="tabpanel" aria-labelledby="file-tab">
            <div class="p-3 bg-white border rounded">
              @php
                $ext = pathinfo($materi->file, PATHINFO_EXTENSION);
                $fileUrl = asset('storage/' . $materi->file);
              @endphp

              @if(in_array($ext, ['jpg','jpeg','png','gif','svg']))
                <img src="{{ $fileUrl }}" alt="File Materi" class="img-fluid rounded">
              @elseif(in_array($ext, ['mp4', 'mov']))
                <video controls class="w-100 rounded shadow-sm">
                  <source src="{{ $fileUrl }}" type="video/{{ $ext }}">
                  Browser Anda tidak mendukung pemutaran video.
                </video>
              @elseif($ext === 'pdf')
                <embed src="{{ $fileUrl }}" type="application/pdf" width="100%" height="600px" class="rounded border" />
              @else
                <a href="{{ $fileUrl }}" target="_blank" class="btn btn-primary">
                  <i class="fas fa-download"></i> Unduh File
                </a>
              @endif
            </div>
          </div>
          @endif
        </div>
      </div> {{-- end card-body --}}
    </div> {{-- end card --}}
  </div> {{-- end section-body --}}
</section>
@endsection