@extends('simaju.layouts.main')

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

@section('content')
<div class="max-w-3xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">

        <form action="{{ route('simaju.modul-ajar.update', $modulAjar->id) }}"
              method="POST"
              enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                {{-- Guru --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Guru *
                    </label>
                    <select name="guru_id" required
                        class="w-full px-4 py-2 border rounded-lg @error('guru_id') border-red-500 @enderror">
                        <option value="">Pilih Guru</option>
                        @foreach($guruList as $g)
                            <option value="{{ $g->id }}"
                                {{ old('guru_id', $modulAjar->guru_id) == $g->id ? 'selected' : '' }}>
                                {{ $g->nama }}
                            </option>
                        @endforeach
                    </select>
                    @error('guru_id')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Jurusan --}}
                <div>
                    <label for="jurusan_id" class="block text-sm font-medium text-gray-700 mb-1">
                        Jurusan *
                    </label>
                    <select id="jurusan_id" name="jurusan_id" required
                        class="w-full px-4 py-2 border rounded-lg @error('jurusan_id') border-red-500 @enderror">
                        <option value="">Pilih Jurusan</option>
                        @foreach($jurusanList as $j)
                            <option value="{{ $j->id }}"
                                {{ (string) old('jurusan_id', $modulAjar->kelas->jurusan_id ?? '') === (string) $j->id ? 'selected' : '' }}>
                                {{ $j->nama_jurusan }}
                            </option>
                        @endforeach
                    </select>
                    @error('jurusan_id')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Kelas --}}
                <div>
                    <label for="kelas_id" class="block text-sm font-medium text-gray-700 mb-1">
                        Kelas *
                    </label>
                    <select id="kelas_id" name="kelas_id" required
                        class="w-full px-4 py-2 border rounded-lg @error('kelas_id') border-red-500 @enderror">
                        <option value="">Pilih Jurusan Terlebih Dahulu</option>
                    </select>
                    @error('kelas_id')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Mata Pelajaran --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Mata Pelajaran *
                    </label>
                    <select name="mata_pelajaran_id" required
                        class="w-full px-4 py-2 border rounded-lg @error('mata_pelajaran_id') border-red-500 @enderror">
                        <option value="">Pilih Mapel</option>
                        @foreach($mapelList as $m)
                            <option value="{{ $m->id }}"
                                {{ old('mata_pelajaran_id', $modulAjar->mata_pelajaran_id) == $m->id ? 'selected' : '' }}>
                                {{ $m->kode_mapel }} - {{ $m->nama_mapel }}
                            </option>
                        @endforeach
                    </select>
                    @error('mata_pelajaran_id')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- TANGGAL MENGAJAR --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Tanggal Mengajar *
                    </label>
                    <input
                        type="date"
                        name="tanggal_mengajar"
                        value="{{ old('tanggal_mengajar', $modulAjar->tanggal_mengajar ? \Carbon\Carbon::parse($modulAjar->tanggal_mengajar)->format('Y-m-d') : '') }}"
                        required
                        class="w-full px-4 py-2 border rounded-lg @error('tanggal_mengajar') border-red-500 @enderror">
                    <p class="text-xs text-gray-500 mt-1">
                        Isi sesuai tanggal pelaksanaan pembelajaran.
                    </p>
                    @error('tanggal_mengajar')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </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="{{ old('tahun_ajaran', $modulAjar->tahun_ajaran) }}"
                        required
                        class="w-full px-4 py-2 border rounded-lg @error('tahun_ajaran') border-red-500 @enderror">
                    @error('tahun_ajaran')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Semester --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Semester *
                    </label>
                    <select name="semester" required
                        class="w-full px-4 py-2 border rounded-lg @error('semester') border-red-500 @enderror">
                        <option value="ganjil" {{ old('semester', $modulAjar->semester) == 'ganjil' ? 'selected' : '' }}>
                            Ganjil
                        </option>
                        <option value="genap" {{ old('semester', $modulAjar->semester) == 'genap' ? 'selected' : '' }}>
                            Genap
                        </option>
                    </select>
                    @error('semester')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Status --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Status *
                    </label>
                    <select name="status" required
                        class="w-full px-4 py-2 border rounded-lg @error('status') border-red-500 @enderror">
                        <option value="draft" {{ old('status', $modulAjar->status) == 'draft' ? 'selected' : '' }}>
                            Draft
                        </option>
                        <option value="published" {{ old('status', $modulAjar->status) == 'published' ? 'selected' : '' }}>
                            Published
                        </option>
                    </select>
                    @error('status')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

            </div>

            {{-- Judul Modul --}}
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Judul Modul *
                </label>
                <input type="text" name="judul"
                    value="{{ old('judul', $modulAjar->judul) }}"
                    required
                    class="w-full px-4 py-2 border rounded-lg @error('judul') border-red-500 @enderror">
                @error('judul')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- Deskripsi --}}
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Deskripsi
                </label>
                <textarea name="deskripsi" rows="2"
                    class="w-full px-4 py-2 border rounded-lg @error('deskripsi') border-red-500 @enderror">{{ old('deskripsi', $modulAjar->deskripsi) }}</textarea>
                @error('deskripsi')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- File Modul --}}
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Ganti File
                </label>
                <p class="text-xs text-gray-500 mb-2">
                    File saat ini: {{ $modulAjar->nama_file }}
                    ({{ $modulAjar->ukuran_file_formatted }})
                </p>

                <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-primary transition-colors">
                    <div class="space-y-1 text-center">
                        <svg class="mx-auto h-12 w-12 text-gray-400"
                             stroke="currentColor" fill="none" viewBox="0 0 48 48">
                            <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                                  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>

                        <div class="text-sm text-gray-600">
                            <label for="file-upload"
                                   class="cursor-pointer font-medium text-primary hover:text-blue-500">
                                <span>Upload file baru</span>
                                <input id="file-upload" name="file" type="file"
                                       accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx"
                                       class="sr-only">
                            </label>
                        </div>

                        <p id="nama-file" class="text-xs text-gray-500">
                            PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX (Maksimal 10 MB)
                        </p>
                    </div>
                </div>

                @error('file')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- Tombol --}}
            <div class="mt-6 flex justify-end gap-3">
                <a href="{{ route('simaju.modul-ajar.index') }}"
                   class="px-4 py-2 border rounded-lg hover:bg-gray-50">
                    Batal
                </a>
                <button type="submit"
                    class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600">
                    Update
                </button>
            </div>

        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const jurusanSelect = document.getElementById('jurusan_id');
    const kelasSelect = document.getElementById('kelas_id');
    const fileInput = document.getElementById('file-upload');
    const namaFile = document.getElementById('nama-file');
    const defaultFileText = 'PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX (Maksimal 10 MB)';

    const kelasData = @json($kelasList->map(function ($k) {
        return [
            'id' => $k->id,
            'jurusan_id' => $k->jurusan_id,
            'tingkat' => (string) $k->tingkat,
            'rombel' => (string) ($k->rombel ?? ''),
        ];
    })->values());

    // Prioritaskan nilai dari validasi sebelumnya, lalu kelas yang sedang diedit.
    const kelasAwal = @json(old('kelas_id', $modulAjar->kelas_id));

    function tingkatRomawi(tingkat) {
        const nilai = String(tingkat).toUpperCase().trim();
        if (nilai === '10' || nilai === 'X') return 'X';
        if (nilai === '11' || nilai === 'XI') return 'XI';
        if (nilai === '12' || nilai === 'XII') return 'XII';
        return null;
    }

    function filterKelas(resetKelas = false) {
        const jurusanId = jurusanSelect.value;
        const targetKelasId = resetKelas ? null : (kelasAwal ? String(kelasAwal) : null);
        kelasSelect.innerHTML = '';

        const placeholder = document.createElement('option');
        placeholder.value = '';
        placeholder.textContent = jurusanId ? 'Pilih Kelas' : 'Pilih Jurusan Terlebih Dahulu';
        kelasSelect.appendChild(placeholder);

        if (!jurusanId) return;

        const tingkatTerpilih = {};
        const kelasJurusan = kelasData.filter(k => String(k.jurusan_id) === String(jurusanId));

        // Jika kelas yang sedang diedit cocok dengan jurusan, pertahankan ID kelas tersebut.
        kelasJurusan.forEach(function (kelas) {
            const romawi = tingkatRomawi(kelas.tingkat);
            if (!romawi) return;
            if (!tingkatTerpilih[romawi] || String(kelas.id) === targetKelasId) {
                tingkatTerpilih[romawi] = kelas;
            }
        });

        ['X', 'XI', 'XII'].forEach(function (romawi) {
            const kelas = tingkatTerpilih[romawi];
            if (!kelas) return;

            const option = document.createElement('option');
            option.value = kelas.id;
            option.textContent = romawi;
            if (String(kelas.id) === targetKelasId) option.selected = true;
            kelasSelect.appendChild(option);
        });
    }

    jurusanSelect.addEventListener('change', function () {
        filterKelas(true);
    });

    filterKelas(false);

    if (fileInput) {
        fileInput.addEventListener('change', function () {
            namaFile.textContent = this.files && this.files.length > 0
                ? 'File dipilih: ' + this.files[0].name
                : defaultFileText;
        });
    }
});
</script>
@endsection