@extends('layouts.siswa')

@section('title', 'Detail Mata Pelajaran')
@section('page_title', 'Mata Pelajaran')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/mapel-detail.css') }}">
@endpush

@section('content')
<!-- Back Link -->
<div style="margin-bottom: 20px;">
    <a href="{{ route('siswa.mapel') }}" class="btn btn-outline" style="text-decoration: none; display: inline-flex; align-items: center; gap: 8px;">
        <i class="fa-solid fa-arrow-left"></i> Kembali ke Semua Mapel
    </a>
</div>

<!-- SUBJECT HEADER BANNER -->
<div class="subject-header">
    <div class="subject-icon-large">
        <i class="fa-solid fa-book-open"></i>
    </div>
    <div class="subject-title-area">
        <h1 style="text-transform: capitalize; color: white;">{{ $mapel->nama_mapel }}</h1>
        <p style="color: rgba(255, 255, 255, 0.9);">Mempelajari materi, mengerjakan latihan soal, dan mengeksplorasi ilmu baru. Persiapkan dirimu untuk menjadi juara!</p>
    </div>
</div>

<!-- TABS NAVIGATION -->
<div class="tabs-nav">
    <button class="tab-btn active" onclick="switchTab('materi', this)">
        <i class="fa-solid fa-book-open-reader"></i> Materi Belajar
    </button>
    <button class="tab-btn" onclick="switchTab('tugas', this)">
        <i class="fa-solid fa-pen-clip"></i> Tugas & Latihan
    </button>
</div>

<!-- TAB CONTENT: MATERI -->
<div id="materi" class="tab-content active">
    <div class="content-list">

        @forelse($materiList as $materi)
            @php
                $iconClass = 'icon-pdf';
                $icon = 'fa-file-pdf';

                if (strtolower($materi->tipe_file) === 'mp4' || strtolower($materi->tipe_file) === 'video') {
                    $iconClass = 'icon-video';
                    $icon = 'fa-circle-play';
                }

                // Formatted file size
                $size = $materi->ukuran_file;
                if ($size >= 1048576) {
                    $sizeText = round($size / 1048576, 2) . ' MB';
                } elseif ($size >= 1024) {
                    $sizeText = round($size / 1024, 2) . ' KB';
                } else {
                    $sizeText = $size . ' B';
                }

                $guruName = $materi->guru?->name ?: 'Guru';
            @endphp
            <div class="content-item">
                <div class="item-left">
                    <div class="item-icon {{ $iconClass }}">
                        <i class="fa-solid {{ $icon }}"></i>
                    </div>
                    <div class="item-details">
                        <h4>{{ $materi->judul }}</h4>
                        <div class="item-meta">
                            <span><i class="fa-regular fa-clock"></i> Diupload: {{ $materi->created_at->translatedFormat('d M Y') }}</span>
                            <span>&bull;</span>
                            <span><i class="fa-solid fa-user-tie"></i> Oleh: {{ $guruName }}</span>
                            <span>&bull;</span>
                            <span><i class="fa-solid fa-file-lines"></i> {{ strtoupper($materi->tipe_file ?: 'file') }} ({{ $sizeText }})</span>
                        </div>
                    </div>
                </div>
                @if($materi->path_file)
                    <a href="{{ route('materi.preview', $materi->id) }}" target="_blank" class="btn btn-outline btn-sm" style="display: inline-flex; align-items: center; gap: 6px; text-decoration: none;">
                        Buka Materi <i class="fa-solid fa-arrow-up-right-from-square"></i>
                    </a>
                @else
                    <button class="btn btn-outline btn-sm" disabled style="opacity: 0.6; cursor: not-allowed;">
                        Tidak ada file
                    </button>
                @endif
            </div>
        @empty
            <div style="padding: 40px 16px; text-align: center; color: var(--text-gray); width: 100%;">
                <i class="fa-regular fa-folder-open" style="font-size: 2.5rem; color: #cbd5e1; margin-bottom: 12px; display: block;"></i>
                Belum ada materi belajar untuk mata pelajaran ini.
            </div>
        @endforelse

    </div>
</div>

<!-- TAB CONTENT: TUGAS -->
<div id="tugas" class="tab-content">
    <div class="content-list">

        @forelse($tugasList as $tugas)
            @php
                $submission = $submissions->get($tugas->id);
                $statusText = 'Belum Dikerjakan';
                $badgeClass = 'badge-libur';
                $btnText = 'Kerjakan';
                $btnIcon = 'fa-pen';

                if ($submission) {
                    if ($submission->status === 'Sudah Mengumpulkan') {
                        $statusText = 'Menunggu Penilaian';
                        $badgeClass = 'badge-selesai';
                        $btnText = 'Lihat Detail';
                        $btnIcon = 'fa-eye';
                    } elseif ($submission->status === 'Dinilai') {
                        $statusText = 'Sudah Dinilai (Nilai: ' . $submission->nilai . ')';
                        $badgeClass = 'badge-aktif';
                        $btnText = 'Lihat Nilai';
                        $btnIcon = 'fa-check';
                    }
                }
            @endphp
            <div class="content-item">
                <div class="item-left">
                    <div class="item-icon icon-task">
                        <i class="fa-solid fa-list-check"></i>
                    </div>
                    <div class="item-details">
                        <h4>{{ $tugas->judul }}</h4>
                        <div class="item-meta">
                            <span><i class="fa-solid fa-calendar-xmark"></i> Tenggat: {{ $tugas->deadline->translatedFormat('d M Y, H:i') }} WIB</span>
                            <span>&bull;</span>
                            <span class="badge {{ $badgeClass }}" style="font-size: 11px;">{{ $statusText }}</span>
                        </div>
                    </div>
                </div>
                <a href="{{ route('siswa.tugas.show', $tugas->id) }}" class="btn btn-primary btn-sm" style="text-decoration: none; display: inline-flex; align-items: center; gap: 6px;">
                    {{ $btnText }} <i class="fa-solid {{ $btnIcon }}"></i>
                </a>
            </div>
        @empty
            <div style="padding: 40px 16px; text-align: center; color: var(--text-gray); width: 100%;">
                <i class="fa-solid fa-list-check" style="font-size: 2.5rem; color: #cbd5e1; margin-bottom: 12px; display: block;"></i>
                Tidak ada tugas untuk mata pelajaran ini saat ini.
            </div>
        @endforelse

    </div>
</div>
@endsection

@push('scripts')
<script>
    // Tab Switching Script
    function switchTab(tabId, element) {
        // Remove active class from all buttons and contents
        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

        // Add active class to clicked button and target content
        element.classList.add('active');
        document.getElementById(tabId).classList.add('active');
    }
</script>
@endpush
