@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


            <!-- =====================================================
                 DATA UTAMA
            ====================================================== -->

            <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') == $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 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>



                <!-- 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') == $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 -->

                <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>



                <!-- JAM MULAI -->

                <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>



                <!-- JAM SELESAI -->

                <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>



                <!-- STATUS -->

                <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>



            <!-- =====================================================
                 TUJUAN PEMBELAJARAN
            ====================================================== -->

            <div class="mt-4">

                <label class="block text-sm font-medium text-gray-700 mb-1">

                    Tujuan Pembelajaran *

                </label>


                <textarea
                    name="tujuan_pembelajaran"
                    rows="4"
                    required
                    class="w-full px-4 py-2 border rounded-lg @error('tujuan_pembelajaran') border-red-500 @enderror focus:ring-2 focus:ring-primary focus:border-primary"
                    placeholder="Tuliskan tujuan pembelajaran yang ingin dicapai peserta didik..."
                >{{ old('tujuan_pembelajaran') }}</textarea>


                <p class="text-xs text-gray-500 mt-1">

                    Tuliskan tujuan atau kompetensi yang diharapkan dicapai
                    peserta didik pada pembelajaran ini.

                </p>


                @error('tujuan_pembelajaran')

                    <p class="text-red-500 text-xs mt-1">

                        {{ $message }}

                    </p>

                @enderror

            </div>



            <!-- =====================================================
                 MATERI
            ====================================================== -->

            <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>



            <!-- =====================================================
                 KEGIATAN PEMBELAJARAN
            ====================================================== -->

            <div class="mt-4">

                <label class="block text-sm font-medium text-gray-700 mb-1">

                    Kegiatan Pembelajaran *

                </label>


                <textarea
                    name="kegiatan_pembelajaran"
                    rows="4"
                    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>



            <!-- =====================================================
                 UPLOAD DOKUMENTASI
            ====================================================== -->

            <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>

                                    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>


                <!-- PREVIEW -->

                <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>



            <!-- =====================================================
                 KETERANGAN
            ====================================================== -->

            <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>



            <!-- =====================================================
                 BUTTON
            ====================================================== -->

            <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

    // =========================================================
    // DATA KELAS UNTUK FILTER JURUSAN
    // =========================================================

    $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 () {


        // =====================================================
        // SELECT JURUSAN & KELAS
        // =====================================================

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

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


        const kelasData =
            @json($kelasData);


        const oldKelas =
            "{{ old('kelas_id') }}";


        // =====================================================
        // DETEKSI TINGKAT KELAS
        // =====================================================

        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;
        }


        // =====================================================
        // LOAD KELAS
        // =====================================================

        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
                    );

                }
            );

        }


        // =====================================================
        // JURUSAN BERUBAH
        // =====================================================

        if (jurusanSelect) {

            jurusanSelect.addEventListener(
                'change',
                function () {

                    loadKelas();

                }
            );

        }


        // =====================================================
        // JIKA VALIDATION ERROR
        // =====================================================

        if (
            jurusanSelect &&
            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