@extends('simaju.layouts.main')
@section('title', 'Tambah Jurnal Mengajar')
@section('page-title', 'Tambah Jurnal Mengajar')
@section('content')
<div class="max-w-3xl mx-auto px-2 sm:px-0">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 sm:p-6">
        <form action="{{ route('simaju.jurnal-mengajar.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <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') == $g->id ? 'selected' : '' }}>{{ $g->nama }}</option>
                        @endforeach
                    </select>
                    @error('guru_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    {{-- Jurusan --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Jurusan *
                </label>
            
                <select name="jurusan_id"
                        id="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 $jurusan)
                        <option value="{{ $jurusan->id }}"
                            {{ old('jurusan_id') == $jurusan->id ? 'selected' : '' }}>
                            {{ $jurusan->nama_jurusan }}
                        </option>
                    @endforeach
                </select>
            
                @error('jurusan_id')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>
            
            
            {{-- Kelas --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    Kelas *
                </label>
            
                <select name="kelas_id"
                        id="kelas_id"
                        required
                        class="w-full px-4 py-2 border rounded-lg @error('kelas_id') border-red-500 @enderror">
            
                    <option value="">Pilih Kelas</option>
            
                </select>
            
                @error('kelas_id')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>
                <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') == $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>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Tanggal *</label>
                    <input type="date" name="tanggal" value="{{ old('tanggal', date('Y-m-d')) }}" required class="w-full px-4 py-2 border rounded-lg @error('tanggal') border-red-500 @enderror">
                    @error('tanggal') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Jam Mulai *</label>
                    <input type="time" name="jam_mulai" value="{{ old('jam_mulai', '07:00') }}" required class="w-full px-4 py-2 border rounded-lg @error('jam_mulai') border-red-500 @enderror">
                    @error('jam_mulai') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Jam Selesai *</label>
                    <input type="time" name="jam_selesai" value="{{ old('jam_selesai', '08:30') }}" required class="w-full px-4 py-2 border rounded-lg @error('jam_selesai') border-red-500 @enderror">
                    @error('jam_selesai') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="md:col-span-2">
                    <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') == 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="submitted" {{ old('status') == 'submitted' ? 'selected' : '' }}>Submitted</option>
                        <option value="approved" {{ old('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                    </select>
                    @error('status') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Materi *</label>
                <input type="text" name="materi" value="{{ old('materi') }}" required class="w-full px-4 py-2 border rounded-lg @error('materi') border-red-500 @enderror" placeholder="Materi yang diajarkan">
                @error('materi') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Kegiatan Pembelajaran *</label>
                <textarea name="kegiatan_pembelajaran" rows="3" required class="w-full px-4 py-2 border rounded-lg @error('kegiatan_pembelajaran') border-red-500 @enderror" placeholder="Deskripsikan kegiatan pembelajaran...">{{ old('kegiatan_pembelajaran') }}</textarea>
                @error('kegiatan_pembelajaran') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Upload Dokumentasi Kegiatan</label>
                <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-4v20m4-4V4m0 28v-4m-16 8l4-4m12 4l4-4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <div class="flex text-sm text-gray-600 justify-center">
                            <label for="kegiatan" class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80 focus-within:outline-none">
                                <span class="">Upload file</span>
                                <input id="kegiatan" name="kegiatan" type="file" class="sr-only" accept="image/*,.pdf">
                            </label>
                            <p class="pl-1">atau drag and drop</p>
                        </div>
                        <p class="text-xs text-gray-500">JPG, PNG, PDF (Maks. 5MB)</p>
                    </div>
                </div>
                <div id="preview-container" class="mt-3 hidden">
                    <img id="preview-image" class="max-h-40 rounded-lg mx-auto">
                    <p id="preview-filename" class="text-center text-sm text-gray-500 mt-2"></p>
                </div>
                @error('kegiatan') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Keterangan</label>
                <textarea name="keterangan" rows="2" class="w-full px-4 py-2 border rounded-lg @error('keterangan') border-red-500 @enderror" placeholder="Keterangan tambahan (opsional)">{{ old('keterangan') }}</textarea>
                @error('keterangan') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            <div class="mt-6 flex flex-col sm:flex-row justify-end gap-3">
                <a href="{{ route('simaju.jurnal-mengajar.index') }}" class="px-4 py-2 border rounded-lg hover:bg-gray-50 text-center">Batal</a>
                <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-600">Simpan</button>
            </div>
        </form>
    </div>
</div>
@endsection

    @push('scripts')

@php
    $kelasData = [];

    foreach ($kelasList as $kelas) {
        $kelasData[] = [
            'id' => $kelas->id,
            'jurusan_id' => $kelas->jurusan_id,
            'nama_kelas' => $kelas->nama_kelas,
        ];
    }
@endphp

<script>
document.addEventListener('DOMContentLoaded', function () {

    const jurusanSelect = document.getElementById('jurusan_id');
    const kelasSelect = document.getElementById('kelas_id');

    const kelasData = @json($kelasData);
    const oldKelas = "{{ old('kelas_id') }}";

    function getTingkat(namaKelas) {

        if (!namaKelas) {
            return null;
        }

        const nama = namaKelas.toUpperCase().trim();

        // XII harus dicek lebih dahulu
        if (nama.includes('XII')) {
            return 'XII';
        }

        if (nama.includes('XI')) {
            return 'XI';
        }

        if (nama.includes('X')) {
            return 'X';
        }

        return null;
    }


    function loadKelas() {

        const jurusanId = jurusanSelect.value;

        kelasSelect.innerHTML =
            '<option value="">Pilih Kelas</option>';

        if (!jurusanId) {
            return;
        }

        const tingkatTersedia = {};

        kelasData.forEach(function(kelas) {

            // Hanya kelas dari jurusan yang dipilih
            if (
                String(kelas.jurusan_id) !== String(jurusanId)
            ) {
                return;
            }

            const tingkat = getTingkat(kelas.nama_kelas);

            if (
                tingkat &&
                !tingkatTersedia[tingkat]
            ) {
                tingkatTersedia[tingkat] = kelas;
            }

        });


        ['X', 'XI', 'XII'].forEach(function(tingkat) {

            if (!tingkatTersedia[tingkat]) {
                return;
            }

            const kelas = tingkatTersedia[tingkat];

            const option = document.createElement('option');

            option.value = kelas.id;
            option.textContent = tingkat;

            if (
                String(oldKelas) === String(kelas.id)
            ) {
                option.selected = true;
            }

            kelasSelect.appendChild(option);

        });
    }


    // Saat jurusan dipilih
    jurusanSelect.addEventListener('change', function() {
        loadKelas();
    });


    // Jika kembali dari validation error
    if (jurusanSelect.value) {
        loadKelas();
    }


    /*
    |--------------------------------------------------------------------------
    | Preview Dokumentasi
    |--------------------------------------------------------------------------
    */

    const kegiatanInput =
        document.getElementById('kegiatan');

    if (kegiatanInput) {

        kegiatanInput.addEventListener(
            'change',
            function(e) {

                const file = e.target.files[0];

                const preview =
                    document.getElementById(
                        'preview-container'
                    );

                const image =
                    document.getElementById(
                        'preview-image'
                    );

                const filename =
                    document.getElementById(
                        'preview-filename'
                    );

                if (file) {

                    if (
                        file.type.startsWith('image/')
                    ) {

                        image.src =
                            URL.createObjectURL(file);

                        image.classList.remove(
                            'hidden'
                        );

                    } else {

                        image.classList.add(
                            'hidden'
                        );
                    }

                    filename.textContent = file.name;

                    preview.classList.remove(
                        'hidden'
                    );

                } else {

                    preview.classList.add(
                        'hidden'
                    );
                }
            }
        );
    }

});
</script>

@endpush