@extends('admin.layouts.app')

@section('title', 'History Materi')

@section('content')

<style>
.page-title {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 10px;
    margin-top: -20px;
}

.custom-card {
    background: white;
    border-radius: 20px;
    border: 2px solid #e5e5e5;
    padding: 25px;
}

.table-header { background: #a5e6ba; }

.search-box {
    background: #a5e6ba;
    border-radius: 30px;
    padding: 6px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-box input {
    border: none;
    outline: none;
    background: transparent;
    width: 160px;
}

.filter-select {
    border-radius: 10px;
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    font-size: 14px;
    color: #475569;
}

.mapel-badge {
    display: inline-block;
    background: #e6f0ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
}

.kelas-badge {
    display: inline-block;
    background: #f0fdf4;
    color: #166534;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
}

.guru-badge {
    display: inline-block;
    background: #fef9c3;
    color: #854d0e;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
}

.btn-unduh {
    background: #e6f0ff;
    color: #2b8ef3;
    border: none;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
}

.btn-unduh:hover { background: #bfdbfe; color: #1d4ed8; }

.btn-hapus {
    background: #fee2e2;
    color: #ef4444;
    border: none;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-hapus:hover { background: #fca5a5; }

.alert-success-custom {
    background: #dcfce7;
    color: #166534;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 14px;
}

.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: #94a3b8;
}
</style>

<h3 class="page-title">HISTORY MATERI</h3>

@if(session('success'))
    <div class="alert-success-custom">✅ {{ session('success') }}</div>
@endif

<div class="custom-card">

    {{-- FILTER & SEARCH --}}
    <form method="GET" action="{{ route('admin.materi.history') }}" class="d-flex flex-wrap gap-2 align-items-center mb-4">
        <select name="id_guru" class="filter-select" onchange="this.form.submit()">
            <option value="">👨‍🏫 Semua Guru</option>
            @foreach($gurus as $guru)
                <option value="{{ $guru->id_guru }}" {{ request('id_guru') == $guru->id_guru ? 'selected' : '' }}>
                    {{ $guru->nama }}
                </option>
            @endforeach
        </select>

        <div class="search-box">
            <input type="text" name="search" placeholder="Cari judul materi..."
                   value="{{ request('search') }}">
            <button style="border:none;background:none" type="submit">
                <img src="{{ asset('images/icon/main/search.png') }}" width="18">
            </button>
        </div>

        @if(request()->hasAny(['id_guru', 'search']))
            <a href="{{ route('admin.materi.history') }}"
               style="font-size:13px;color:#64748b;text-decoration:none">✕ Reset</a>
        @endif

        <span class="ms-auto" style="font-size:13px;color:#64748b">
            Total: <strong>{{ $materiList->total() }}</strong> materi
        </span>
    </form>

    @if($materiList->isEmpty())
        <div class="empty-state">
            <div style="font-size:48px;margin-bottom:12px">📭</div>
            <p>Tidak ada materi ditemukan.</p>
        </div>
    @else
        <div class="table-responsive">
        <table class="table align-middle">
            <thead class="table-header text-center">
                <tr>
                    <th>No</th>
                    <th>Judul Materi</th>
                    <th>Guru</th>
                    <th>Mata Pelajaran</th>
                    <th>Kelas</th>
                    <th>Tgl Upload</th>
                    <th>File</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($materiList as $i => $materi)
                <tr>
                    <td class="text-center">{{ $materiList->firstItem() + $i }}</td>
                    <td>
                        <div style="font-weight:600;color:#1e293b">{{ $materi->judul_materi }}</div>
                        @if($materi->deskripsi)
                            <div style="font-size:12px;color:#94a3b8;margin-top:2px">
                                {{ Str::limit($materi->deskripsi, 55) }}
                            </div>
                        @endif
                    </td>
                    <td class="text-center">
                        <span class="guru-badge">
                            {{ optional(optional($materi->mengajar)->guru)->nama ?? '-' }}
                        </span>
                    </td>
                    <td class="text-center">
                        <span class="mapel-badge">
                            {{ optional(optional($materi->mengajar)->mapel)->nama_mapel ?? '-' }}
                        </span>
                    </td>
                    <td class="text-center">
                        <span class="kelas-badge">
                            {{ optional(optional($materi->mengajar)->kelas)->tingkat }}
                            {{ optional(optional($materi->mengajar)->kelas)->nama_kelas ?? '-' }}
                        </span>
                    </td>
                    <td class="text-center" style="font-size:13px;color:#64748b">
                        {{ \Carbon\Carbon::parse($materi->tanggal_upload ?? $materi->created_at)->format('d M Y') }}
                        <div style="font-size:11px">
                            {{ \Carbon\Carbon::parse($materi->tanggal_upload ?? $materi->created_at)->format('H:i') }}
                        </div>
                    </td>
                    <td class="text-center">
                        @if($materi->lampiran_materi)
                            @php
                                $ext  = strtolower(pathinfo($materi->lampiran_materi, PATHINFO_EXTENSION));
                                $icon = match(true) {
                                    in_array($ext, ['pdf'])              => '📄',
                                    in_array($ext, ['doc','docx'])       => '📝',
                                    in_array($ext, ['ppt','pptx'])       => '📊',
                                    in_array($ext, ['jpg','jpeg','png']) => '🖼️',
                                    default                              => '📎',
                                };
                            @endphp
                            <a href="{{ asset('storage/' . $materi->lampiran_materi) }}"
                               target="_blank" class="btn-unduh">
                                {{ $icon }} Unduh
                            </a>
                        @else
                            <span style="font-size:12px;color:#94a3b8">Tidak ada</span>
                        @endif
                    </td>
                    <td class="text-center">
                        <form action="{{ route('admin.materi.destroy', $materi->id_materi) }}"
                              method="POST"
                              onsubmit="return confirm('Yakin hapus materi ini?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn-hapus">🗑️ Hapus</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        </div>

        <div class="d-flex justify-content-end mt-3">
            {{ $materiList->links() }}
        </div>
    @endif

</div>

@endsection