@extends('simaju.layouts.main')

@section('title', 'Detail Jurnal Mengajar')
@section('page-title', 'Detail 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">


        <!-- =====================================================
             HEADER JURNAL
        ====================================================== -->

        <div class="flex flex-col sm:flex-row justify-between items-start gap-3 mb-6">

            <div>

                <h2 class="text-lg sm:text-xl font-semibold text-gray-800">

                    Jurnal Mengajar

                </h2>


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

                    Tanggal:
                    {{ $jurnalMengajar->tanggal->format('d F Y') }}

                </p>

            </div>


            <span
                class="px-3 py-1 text-sm rounded-full
                       {{ $jurnalMengajar->status_badge }}"
            >

                {{ $jurnalMengajar->status_label }}

            </span>

        </div>



        <!-- =====================================================
             INFORMASI UTAMA
        ====================================================== -->

        <div class="grid grid-cols-2 gap-3 sm:gap-4 mb-6">


            <!-- GURU -->

            <div class="bg-gray-50 rounded-lg p-3 sm:p-4">

                <p class="text-xs font-medium text-gray-500 uppercase">

                    Guru

                </p>


                <p class="text-gray-800 font-medium mt-1 text-sm sm:text-base">

                    {{ $jurnalMengajar->guru->nama ?? '-' }}

                </p>

            </div>



            <!-- KELAS -->

            <div class="bg-gray-50 rounded-lg p-3 sm:p-4">

                <p class="text-xs font-medium text-gray-500 uppercase">

                    Kelas

                </p>


                <p class="text-gray-800 font-medium mt-1 text-sm sm:text-base">

                    {{ $jurnalMengajar->kelas->nama_kelas ?? '-' }}

                </p>

            </div>



            <!-- MATA PELAJARAN -->

            <div class="bg-gray-50 rounded-lg p-3 sm:p-4">

                <p class="text-xs font-medium text-gray-500 uppercase">

                    Mata Pelajaran

                </p>


                <p class="text-gray-800 font-medium mt-1 text-sm sm:text-base">

                    {{ $jurnalMengajar->mataPelajaran->nama_mapel ?? '-' }}

                </p>

            </div>



            <!-- WAKTU -->

            <div class="bg-gray-50 rounded-lg p-3 sm:p-4">

                <p class="text-xs font-medium text-gray-500 uppercase">

                    Waktu

                </p>


                <p class="text-gray-800 font-medium mt-1 text-sm sm:text-base">

                    {{ $jurnalMengajar->jam_mulai }}

                    -

                    {{ $jurnalMengajar->jam_selesai }}

                </p>

            </div>

        </div>



        <!-- =====================================================
             ISI JURNAL
        ====================================================== -->

        <div class="space-y-5">


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

            <div>

                <div class="flex items-center gap-2 mb-2">

                    <i class="fas fa-bullseye text-primary"></i>

                    <p class="text-xs font-medium text-gray-500 uppercase">

                        Tujuan Pembelajaran

                    </p>

                </div>


                <div
                    class="bg-blue-50
                           border
                           border-blue-100
                           rounded-lg
                           p-4"
                >

                    @if(
                        $jurnalMengajar->tujuan_pembelajaran
                    )

                        <p
                            class="text-gray-800
                                   leading-relaxed
                                   whitespace-pre-wrap"
                        >

                            {{ $jurnalMengajar->tujuan_pembelajaran }}

                        </p>

                    @else

                        <p class="text-gray-400 italic">

                            Tujuan pembelajaran belum diisi.

                        </p>

                    @endif

                </div>

            </div>



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

            <div>

                <p class="text-xs font-medium text-gray-500 uppercase">

                    Materi

                </p>


                <div class="mt-2">

                    <p class="text-gray-800">

                        {{ $jurnalMengajar->materi }}

                    </p>

                </div>

            </div>



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

            <div>

                <p class="text-xs font-medium text-gray-500 uppercase">

                    Kegiatan Pembelajaran

                </p>


                <p
                    class="text-gray-800
                           mt-2
                           whitespace-pre-wrap
                           leading-relaxed"
                >

                    {{ $jurnalMengajar->kegiatan_pembelajaran }}

                </p>

            </div>



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

            @if($jurnalMengajar->keterangan)

                <div>

                    <p class="text-xs font-medium text-gray-500 uppercase">

                        Keterangan

                    </p>


                    <p
                        class="text-gray-800
                               mt-2
                               whitespace-pre-wrap"
                    >

                        {{ $jurnalMengajar->keterangan }}

                    </p>

                </div>

            @endif



            <!-- =================================================
                 DOKUMENTASI KEGIATAN
            ================================================== -->

            @if($jurnalMengajar->kegiatan)

                @php

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

                @endphp


                <div>

                    <p class="text-xs font-medium text-gray-500 uppercase mb-2">

                        Dokumentasi Kegiatan

                    </p>



                    <!-- GAMBAR -->

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

                        <img
                            src="{{ asset(
                                'storage/kegiatan/' .
                                $jurnalMengajar->kegiatan
                            ) }}"
                            alt="Dokumentasi Kegiatan"
                            class="max-w-full sm:max-w-md rounded-lg shadow-md border"
                            onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
                        >


                        <div
                            class="hidden
                                   p-4
                                   bg-red-50
                                   rounded-lg
                                   text-red-600
                                   text-sm"
                        >

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

                            Gambar tidak ditemukan

                        </div>



                    <!-- PDF -->

                    @elseif($ext === 'pdf')

                        <a
                            href="{{ asset(
                                'storage/kegiatan/' .
                                $jurnalMengajar->kegiatan
                            ) }}"
                            target="_blank"
                            class="inline-flex
                                   items-center
                                   gap-2
                                   px-4
                                   py-3
                                   bg-red-100
                                   text-red-700
                                   rounded-lg
                                   hover:bg-red-200
                                   transition-colors"
                        >

                            <i
                                class="fas fa-file-pdf text-xl"
                            ></i>

                            <span>

                                Lihat PDF

                            </span>

                        </a>

                    @endif

                </div>

            @endif

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

                Kembali

            </a>


            <a
                href="{{ route(
                    'simaju.jurnal-mengajar.edit',
                    $jurnalMengajar->id
                ) }}"
                class="px-4
                       py-2
                       bg-yellow-500
                       text-white
                       rounded-lg
                       hover:bg-yellow-600
                       text-center"
            >

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

                Edit

            </a>

        </div>

    </div>

</div>

@endsection