```blade
@extends('simaju.layouts.main')

@section('title', 'Modul Ajar')
@section('page-title', 'Modul Ajar')

@section('content')
<div class="space-y-6">

    {{-- HEADER --}}
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
        <div>
            <h2 class="text-lg font-semibold text-gray-800">
                Daftar Modul Ajar
            </h2>
            <p class="text-sm text-gray-500 mt-1">
                Kelola modul ajar berdasarkan guru, jurusan, kelas, dan mata pelajaran.
            </p>
        </div>

        <a href="{{ route('simaju.modul-ajar.create') }}"
           class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600
                  flex items-center justify-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor"
                 viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round"
                      stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Upload Modul
        </a>
    </div>

    {{-- PESAN NOTIFIKASI --}}
    @if(session('success'))
        <div class="p-4 rounded-lg bg-green-50 border border-green-200 text-green-700">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="p-4 rounded-lg bg-red-50 border border-red-200 text-red-700">
            {{ session('error') }}
        </div>
    @endif

    {{-- FILTER --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <h3 class="font-semibold text-gray-800 mb-4">Filter Modul Ajar</h3>

        <form method="GET"
              action="{{ route('simaju.modul-ajar.index') }}"
              class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">

            {{-- GURU --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Guru
                </label>
                <select name="guru_id"
                        class="w-full px-3 py-2 border rounded-lg text-sm">
                    <option value="">Semua Guru</option>
                    @foreach($guruList as $g)
                        <option value="{{ $g->id }}"
                            {{ request('guru_id') == $g->id ? 'selected' : '' }}>
                            {{ $g->nama }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- JURUSAN --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Jurusan
                </label>
                <select name="jurusan_id" id="filter_jurusan_id"
                        class="w-full px-3 py-2 border rounded-lg text-sm">
                    <option value="">Semua Jurusan</option>
                    @foreach($jurusanList as $j)
                        <option value="{{ $j->id }}"
                            {{ request('jurusan_id') == $j->id ? 'selected' : '' }}>
                            {{ $j->nama_jurusan }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- KELAS --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Kelas
                </label>
                <select name="kelas_id" id="filter_kelas_id"
                        class="w-full px-3 py-2 border rounded-lg text-sm">
                    <option value="">Semua Kelas</option>

                    @foreach($kelasList as $k)
                        @if(in_array((string) $k->tingkat, ['10', '11', '12']))
                            <option value="{{ $k->id }}"
                                data-jurusan="{{ $k->jurusan_id }}"
                                {{ request('kelas_id') == $k->id ? 'selected' : '' }}>
                                {{ $k->getTingkatRomawi() }}
                                @if($k->rombel)
                                    - {{ $k->rombel }}
                                @endif
                                ({{ $k->jurusan->nama_jurusan ?? 'Tanpa Jurusan' }})
                            </option>
                        @endif
                    @endforeach
                </select>
            </div>

            {{-- MATA PELAJARAN --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Mata Pelajaran
                </label>
                <select name="mata_pelajaran_id"
                        class="w-full px-3 py-2 border rounded-lg text-sm">
                    <option value="">Semua Mata Pelajaran</option>
                    @foreach($mapelList as $m)
                        <option value="{{ $m->id }}"
                            {{ request('mata_pelajaran_id') == $m->id ? 'selected' : '' }}>
                            {{ $m->nama_mapel }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- TAHUN AJARAN --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Tahun Ajaran
                </label>
                <input type="text"
                       name="tahun_ajaran"
                       value="{{ request('tahun_ajaran') }}"
                       placeholder="2026/2027"
                       class="w-full px-3 py-2 border rounded-lg text-sm">
            </div>

            {{-- SEMESTER --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Semester
                </label>
                <select name="semester"
                        class="w-full px-3 py-2 border rounded-lg text-sm">
                    <option value="">Semua Semester</option>
                    <option value="ganjil"
                        {{ request('semester') == 'ganjil' ? 'selected' : '' }}>
                        Ganjil
                    </option>
                    <option value="genap"
                        {{ request('semester') == 'genap' ? 'selected' : '' }}>
                        Genap
                    </option>
                </select>
            </div>

            {{-- TOMBOL FILTER --}}
            <div class="lg:col-span-3 flex flex-wrap gap-2">
                <button type="submit"
                        class="px-4 py-2 bg-primary text-white rounded-lg
                               text-sm hover:bg-blue-600">
                    Terapkan Filter
                </button>

                <a href="{{ route('simaju.modul-ajar.index') }}"
                   class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">
                    Reset
                </a>
            </div>
        </form>
    </div>

    {{-- TABEL MODUL --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full min-w-[1000px]">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
                            No.
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
                            Judul Modul
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
                            Guru
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
                            Jurusan
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
                            Kelas
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
                            Mata Pelajaran
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
                            File
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
                            Status
                        </th>
                        <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">
                            Aksi
                        </th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-200">
                    @forelse($moduls as $m)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-sm text-gray-600">
                                {{ $moduls->firstItem() + $loop->index }}
                            </td>

                            <td class="px-4 py-3">
                                <div class="font-medium text-gray-900">
                                    {{ $m->judul }}
                                </div>
                                <div class="text-xs text-gray-500 mt-1">
                                    {{ $m->tahun_ajaran }}
                                    ·
                                    {{ $m->semester_label }}
                                </div>
                                @if($m->tanggal_mengajar)
                                    <div class="text-xs text-gray-500 mt-1">
                                        {{ \Carbon\Carbon::parse($m->tanggal_mengajar)->format('d-m-Y') }}
                                    </div>
                                @endif
                            </td>

                            <td class="px-4 py-3 text-sm">
                                {{ $m->guru->nama ?? '-' }}
                            </td>

                            <td class="px-4 py-3 text-sm">
                                {{ $m->kelas->jurusan->nama_jurusan ?? '-' }}
                            </td>

                            <td class="px-4 py-3 text-sm">
                                @if($m->kelas)
                                    {{ $m->kelas->getTingkatRomawi() }}
                                    @if($m->kelas->rombel)
                                        - {{ $m->kelas->rombel }}
                                    @endif
                                @else
                                    -
                                @endif
                            </td>

                            <td class="px-4 py-3 text-sm">
                                {{ $m->mataPelajaran->nama_mapel ?? '-' }}
                            </td>

                            <td class="px-4 py-3">
                                <div class="text-sm text-gray-800">
                                    {{ $m->nama_file ?? '-' }}
                                </div>
                                <div class="text-xs text-gray-500 mt-1">
                                    {{ $m->ukuran_file_formatted ?? '-' }}
                                </div>
                            </td>

                            <td class="px-4 py-3">
                                <span class="inline-block px-2 py-1 text-xs rounded-full
                                    {{ $m->status_badge }}">
                                    {{ $m->status === 'published' ? 'Published' : 'Draft' }}
                                </span>
                            </td>

                            <td class="px-4 py-3">
                                <div class="flex justify-center items-center gap-1">

                                    {{-- DOWNLOAD --}}
                                    <a href="{{ route('simaju.modul-ajar.download', $m->id) }}"
                                       class="p-2 text-green-600 hover:bg-green-50 rounded"
                                       title="Download file">
                                        <svg class="w-4 h-4" fill="none"
                                             stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round"
                                                  stroke-linejoin="round" stroke-width="2"
                                                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                                        </svg>
                                    </a>

                                    {{-- EDIT --}}
                                    <a href="{{ route('simaju.modul-ajar.edit', $m->id) }}"
                                       class="p-2 text-yellow-600 hover:bg-yellow-50 rounded"
                                       title="Edit modul">
                                        <svg class="w-4 h-4" fill="none"
                                             stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round"
                                                  stroke-linejoin="round" stroke-width="2"
                                                  d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                        </svg>
                                    </a>

                                    {{-- HAPUS --}}
                                    <form action="{{ route('simaju.modul-ajar.destroy', $m->id) }}"
                                          method="POST"
                                          onsubmit="return confirm('Apakah Anda yakin ingin menghapus modul ini?')">
                                        @csrf
                                        @method('DELETE')

                                        <button type="submit"
                                                class="p-2 text-red-600 hover:bg-red-50 rounded"
                                                title="Hapus modul">
                                            <svg class="w-4 h-4" fill="none"
                                                 stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round"
                                                      stroke-linejoin="round" stroke-width="2"
                                                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                            </svg>
                                        </button>
                                    </form>

                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9"
                                class="px-4 py-12 text-center text-gray-500">
                                <div class="font-medium">Tidak ada modul ajar</div>
                                <div class="text-sm mt-1">
                                    Silakan ubah filter atau upload modul ajar baru.
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- JUMLAH DAN PAGINATION --}}
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3">
        <p class="text-sm text-gray-500">
            Menampilkan {{ $moduls->firstItem() ?? 0 }}
            sampai {{ $moduls->lastItem() ?? 0 }}
            dari {{ $moduls->total() }} modul ajar.
        </p>

        @if($moduls->hasPages())
            <div>
                {{ $moduls->withQueryString()->links() }}
            </div>
        @endif
    </div>

</div>

{{-- FILTER KELAS BERDASARKAN JURUSAN --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const jurusanSelect = document.getElementById('filter_jurusan_id');
    const kelasSelect = document.getElementById('filter_kelas_id');

    if (!jurusanSelect || !kelasSelect) {
        return;
    }

    const semuaOpsiKelas = Array.from(kelasSelect.options).filter(function (option) {
        return option.value !== '';
    });

    function filterKelas() {
        const jurusanId = jurusanSelect.value;
        const kelasSebelumnya = kelasSelect.value;
        let kelasMasihCocok = false;

        semuaOpsiKelas.forEach(function (option) {
            const cocok = jurusanId === '' ||
                option.dataset.jurusan === jurusanId;

            option.hidden = !cocok;
            option.disabled = !cocok;

            if (cocok && option.value === kelasSebelumnya) {
                kelasMasihCocok = true;
            }
        });

        if (!kelasMasihCocok) {
            kelasSelect.value = '';
        }
    }

    jurusanSelect.addEventListener('change', filterKelas);
    filterKelas();
});
</script>
@endsection
```