@extends('siswa.layouts.app')

@section('title', 'Materi - ' . optional(optional($mengajar)->mapel)->nama_mapel)

@push('styles')
<style>
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #2b8ef3;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        margin-bottom: 20px;
    }

    .back-link:hover { text-decoration: underline; }

    .mapel-header {
        background: linear-gradient(135deg, #2b8ef3, #60a5fa);
        border-radius: 20px;
        padding: 24px 28px;
        color: white;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .mapel-header-icon {
        background: rgba(255,255,255,0.2);
        width: 60px;
        height: 60px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mapel-header-title {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 4px;
    }

    .mapel-header-sub {
        font-size: 14px;
        opacity: 0.85;
        margin: 0;
    }

    .materi-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .materi-card {
        background: #fff;
        border-radius: 16px;
        padding: 20px 24px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        display: flex;
        align-items: center;
        gap: 16px;
        transition: box-shadow 0.2s;
    }

    .materi-card:hover {
        box-shadow: 0 4px 20px rgba(43,142,243,0.12);
    }

    .materi-file-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .materi-file-icon.pdf   { background: #fee2e2; }
    .materi-file-icon.doc   { background: #dbeafe; }
    .materi-file-icon.img   { background: #dcfce7; }
    .materi-file-icon.other { background: #f1f5f9; }

    .materi-info { flex: 1; }

    .materi-judul {
        font-size: 15px;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 4px;
    }

    .materi-meta {
        font-size: 12px;
        color: #94a3b8;
        margin: 0;
    }

    .materi-desc {
        font-size: 13px;
        color: #64748b;
        margin: 6px 0 0;
    }

    .btn-download {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #2b8ef3;
        color: white;
        border-radius: 10px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.2s;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .btn-download:hover {
        background: #1a7ae0;
        color: white;
    }

    .btn-no-file {
        background: #f1f5f9;
        color: #94a3b8;
        border-radius: 10px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #94a3b8;
    }

    .empty-state .empty-icon {
        margin-bottom: 12px;
        display: flex;
        justify-content: center;
    }
</style>
@endpush

@section('content')

<a href="{{ route('siswa.materi.index') }}" class="back-link">← Kembali ke Mata Pelajaran</a>

<div class="mapel-header">
    <div class="mapel-header-icon">
        <img src="{{ asset('images/icon/siswam/mapel.png') }}" alt="Ikon mata pelajaran" class="icon-md">
    </div>
    <div>
        <p class="mapel-header-title">{{ optional($mengajar->mapel)->nama_mapel ?? '-' }}</p>
        <p class="mapel-header-sub">Guru: {{ optional($mengajar->guru)->nama ?? '-' }} &bull; {{ $materiList->count() }} Materi</p>
    </div>
</div>

@if($materiList->isEmpty())
    <div class="empty-state">
        <div class="empty-icon">
            <img src="{{ asset('images/icon/siswam/mailbox.png') }}" alt="Belum ada materi" class="icon-mascot" style="width:80px; margin-top:0;">
        </div>
        <p>Belum ada materi yang diupload untuk mata pelajaran ini.</p>
    </div>
@else
    <div class="materi-list">
        @foreach($materiList as $materi)
            @php
                $ext = $materi->lampiran_materi
                    ? strtolower(pathinfo($materi->lampiran_materi, PATHINFO_EXTENSION))
                    : null;

                $iconClass = match(true) {
                    in_array($ext, ['pdf'])              => 'pdf',
                    in_array($ext, ['doc','docx'])       => 'doc',
                    in_array($ext, ['jpg','jpeg','png']) => 'img',
                    default                              => 'other',
                };

                $iconSrc = match($iconClass) {
                    'pdf'   => asset('images/icon/siswam/pdf.png'),
                    'doc'   => asset('images/icon/siswam/doc.png'),
                    'img'   => asset('images/icon/siswam/image.png'),
                    default => asset('images/icon/siswam/link.png'),
                };

                $iconAlt = match($iconClass) {
                    'pdf'   => 'File PDF',
                    'doc'   => 'File Word',
                    'img'   => 'File Gambar',
                    default => 'File lainnya',
                };
            @endphp

            <div class="materi-card">
                <div class="materi-file-icon {{ $iconClass }}">
                    <img src="{{ $iconSrc }}" alt="{{ $iconAlt }}" class="icon-md">
                </div>

                <div class="materi-info">
                    <p class="materi-judul">{{ $materi->judul_materi }}</p>
                    <p class="materi-meta">
                        Diupload {{ \Carbon\Carbon::parse($materi->tanggal_upload)->locale('id')->isoFormat('D MMMM YYYY') }}
                    </p>
                    @if($materi->deskripsi)
                        <p class="materi-desc">{{ $materi->deskripsi }}</p>
                    @endif
                </div>

                @if($materi->lampiran_materi)
                    <a href="{{ url('storage/app/public/' . $materi->lampiran_materi) }}"
                       target="_blank"
                       class="btn-download">
                        <img src="{{ asset('images/icon/siswam/download.png') }}" alt="Unduh materi" class="icon-sm">
                        Unduh
                    </a>
                @else
                    <span class="btn-no-file">Tidak ada file</span>
                @endif
            </div>
        @endforeach
    </div>
@endif

@endsection