@extends('simaju.layouts.main')

@section('title', 'Edit Jurnal Mengajar')
@section('page-title', 'Edit 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.update', $jurnalMengajar->id) }}"
            method="POST"
            enctype="multipart/form-data"
        >

            @csrf
            @method('PUT')


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



                <!-- KELAS -->

                <div>

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

                        Kelas *

                    </label>


                    <select
                        name="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>


                        @foreach($kelasList as $k)

                            <option
                                value="{{ $k->id }}"
                                {{ old(
                                    'kelas_id',
                                    $jurnalMengajar->kelas_id
                                ) == $k->id ? 'selected' : '' }}
                            >

                                {{ $k->nama_kelas }}

                            </option>

                        @endforeach

                    </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',
                                    $jurnalMengajar->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',
                            $jurnalMengajar->tanggal->format('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',
                            $jurnalMengajar->jam_mulai
                        ) }}"
                        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',
                            $jurnalMengajar->jam_selesai
                        ) }}"
                        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>

                    <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',
                                $jurnalMengajar->status
                            ) == 'draft' ? 'selected' : '' }}
                        >
                            Draft
                        </option>


                        <option
                            value="submitted"
                            {{ old(
                                'status',
                                $jurnalMengajar->status
                            ) == 'submitted' ? 'selected' : '' }}
                        >
                            Submitted
                        </option>


                        <option
                            value="approved"
                            {{ old(
                                'status',
                                $jurnalMengajar->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',
                    $jurnalMengajar->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',
                        $jurnalMengajar->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',
                    $jurnalMengajar->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>


                @if($jurnalMengajar->kegiatan)

                    <div class="mb-3 p-3 bg-gray-50 rounded-lg">

                        <p class="text-sm text-gray-600 mb-2">

                            File saat ini:

                        </p>


                        @php

                            $ext = strtolower(
                                pathinfo(
                                    $jurnalMengajar->kegiatan,
                                    PATHINFO_EXTENSION
                                )
                            );

                        @endphp


                        @if(in_array($ext, [
                            'jpg',
                            'jpeg',
                            'png',
                            'gif',
                            'webp'
                        ]))

                            <img
                                src="{{ asset(
                                    'storage/kegiatan/' .
                                    $jurnalMengajar->kegiatan
                                ) }}"
                                class="max-h-32 rounded"
                                alt="Dokumentasi kegiatan"
                            >

                        @else

                            <a
                                href="{{ asset(
                                    'storage/kegiatan/' .
                                    $jurnalMengajar->kegiatan
                                ) }}"
                                target="_blank"
                                class="text-primary hover:underline"
                            >

                                <i class="fas fa-file mr-1"></i>

                                {{ $jurnalMengajar->kegiatan }}

                            </a>

                        @endif

                    </div>

                @endif


                <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-10 w-10 text-gray-400"
                            stroke="currentColor"
                            fill="none"
                            viewBox="0 0 48 48"
                        >

                            <path
                                d="M28 8H12a4 4 0 00-4 4v20m32-4v20m4-4V4m0 28l4-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"
                            >

                                <span>

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


                @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',
                    $jurnalMengajar->keterangan
                ) }}</textarea>


                @error('keterangan')

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

                        {{ $message }}

                    </p>

                @enderror

            </div>



            <!-- =====================================================
                 TOMBOL
            ====================================================== -->

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

                    <i class="fas fa-arrow-left mr-2"></i>

                    Batal

                </a>


                <button
                    type="submit"
                    class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-600"
                >

                    <i class="fas fa-save mr-2"></i>

                    Update

                </button>

            </div>

        </form>

    </div>

</div>

@endsection