@extends('layouts.mentor')

@section('content')
<div x-data="{
    modalOpen: false,
    intern: {
        id_intern: '',
        name: '',
        school: '',
        position: '',
        start_date: '',
        end_date: '',
        preview_url: '#',
        status: ''
    },
    decision: 'none',
    openModal(data) {
        this.intern = data;
        this.decision = (data.status || '').toLowerCase();
        this.modalOpen = true;
    }
}" @keydown.escape.window="modalOpen = false">
    <!-- Header Title -->
    <div class="mb-6">
      <h2 class="text-3xl font-bold text-[#030164] tracking-tight">Daftar Intern</h2>
      <p class="text-xs text-gray-400 mt-1">Kelola dan pantau data anak bimbingan magang Anda.</p>
    </div>

    @if (session('success'))
        <div class="mb-6 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-xs font-medium text-emerald-800 flex items-center justify-between shadow-sm">
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-circle-check text-emerald-600 text-sm"></i>
                <span>{{ session('success') }}</span>
            </div>
        </div>
    @endif

    @if (session('error'))
        <div class="mb-6 p-4 rounded-xl bg-rose-50 border border-rose-200 text-xs font-medium text-rose-800 flex items-center justify-between shadow-sm">
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-circle-exclamation text-rose-600 text-sm"></i>
                <span>{{ session('error') }}</span>
            </div>
        </div>
    @endif

    <!-- LIVEWIRE TABLE WITH REAL-TIME SEARCH & URL STATE -->
    <livewire:mentor.daftar-intern-table />

    <!-- MODAL PENILAIAN INTERN  -->
    <div id="penilaianModal" x-show="modalOpen" x-cloak :class="{ 'hidden': !modalOpen }" class="fixed inset-0 z-50 bg-black/40 backdrop-blur-2xs flex items-center justify-center p-4 overflow-y-auto">
        <div class="bg-white rounded-3xl max-w-xl w-full p-4 sm:p-5 shadow-2xl relative my-3 sm:my-4 max-h-[90vh] overflow-y-auto">
            <!-- Header -->
            <div class="flex items-center justify-between pb-3 border-b border-gray-100 mb-3">
                <div class="flex items-center gap-2.5">
                    <div class="w-9 h-9 rounded-xl bg-indigo-50 border border-indigo-100 text-[#13124E] flex items-center justify-center text-base shadow-2xs shrink-0">
                        <i class="fa-regular fa-square-check"></i>
                    </div>
                    <div>
                        <h3 class="text-sm sm:text-base font-bold text-gray-900 leading-tight">Penilaian Intern</h3>
                        <p class="text-[11px] text-gray-400 mt-0.5">Tentukan keputusan akhir untuk intern Anda.</p>
                    </div>
                </div>
                <button type="button" @click="modalOpen = false" class="text-gray-400 hover:text-gray-600 text-base p-1 cursor-pointer">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <!-- Form -->
            <form id="penilaianForm" method="POST" :action="'/mentor/interns/' + intern.id_intern + '/status'">
                @csrf
                @method('PATCH')

                <!-- Nama -->
                <div class="mb-2.5">
                    <label class="block text-xs font-semibold text-gray-800 mb-1">Nama</label>
                    <input id="penilaian_name" type="text" readonly x-model="intern.name"
                        class="w-full px-3 py-2 rounded-xl border border-gray-100 bg-[#f9fafb] text-xs text-gray-800 focus:outline-none cursor-default">
                </div>

                <!-- Sekolah & Posisi -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 mb-2.5">
                    <div>
                        <label class="block text-xs font-semibold text-gray-800 mb-1">Sekolah</label>
                        <input id="penilaian_school" type="text" readonly x-model="intern.school"
                            class="w-full px-3 py-2 rounded-xl border border-gray-100 bg-[#f9fafb] text-xs text-gray-800 focus:outline-none cursor-default">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-800 mb-1">Posisi</label>
                        <input id="penilaian_position" type="text" readonly x-model="intern.position"
                            class="w-full px-3 py-2 rounded-xl border border-gray-100 bg-[#f9fafb] text-xs text-gray-800 focus:outline-none cursor-default">
                    </div>
                </div>

                <!-- Periode Magang -->
                <div class="mb-2.5">
                    <label class="block text-xs font-semibold text-gray-800 mb-1">Periode Magang</label>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
                        <div>
                            <span class="block text-[11px] text-gray-500 font-medium mb-1">Tanggal Mulai</span>
                            <div class="relative flex items-center">
                                <input id="penilaian_start_date" type="text" readonly x-model="intern.start_date"
                                    class="w-full px-3 py-2 pr-10 rounded-xl border border-gray-100 bg-[#f9fafb] text-xs text-gray-800 focus:outline-none cursor-default">
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400">
                                    <i class="fa-regular fa-calendar text-xs leading-none"></i>
                                </div>
                            </div>
                        </div>
                        <div>
                            <span class="block text-[11px] text-gray-500 font-medium mb-1">Tanggal Selesai</span>
                            <div class="relative flex items-center">
                                <input id="penilaian_end_date" type="text" readonly x-model="intern.end_date"
                                    class="w-full px-3 py-2 pr-10 rounded-xl border border-gray-100 bg-[#f9fafb] text-xs text-gray-800 focus:outline-none cursor-default">
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400">
                                    <i class="fa-regular fa-calendar text-xs leading-none"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Keputusan -->
                <div class="mb-2">
                    <label class="block text-xs font-semibold text-gray-800 mb-0.5">Keputusan <span class="text-rose-500 font-bold">*</span></label>
                    <p class="text-[11px] text-gray-400 mb-1.5">Pilih hasil penilaian berdasarkan pelaksanaan magang.</p>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
                        <!-- Option Lulus -->
                        <label :class="decision === 'lulus' ? 'border-[#13124E] bg-indigo-50/50 ring-1 ring-[#13124E]' : 'border-gray-200 bg-white'" class="flex items-center gap-2.5 p-2.5 rounded-xl border cursor-pointer transition">
                            <input type="radio" name="status" value="lulus" x-model="decision" class="text-indigo-900 focus:ring-0 cursor-pointer">
                            <div>
                                <div class="text-xs font-bold text-gray-900">Lulus</div>
                                <div class="text-[10px] text-gray-400">Memenuhi kriteria magang</div>
                            </div>
                        </label>

                        <!-- Option Fail -->
                        <label :class="decision === 'fail' ? 'border-[#13124E] bg-indigo-50/50 ring-1 ring-[#13124E]' : 'border-gray-200 bg-white'" class="flex items-center gap-2.5 p-2.5 rounded-xl border cursor-pointer transition">
                            <input type="radio" name="status" value="fail" x-model="decision" class="text-indigo-900 focus:ring-0 cursor-pointer">
                            <div>
                                <div class="text-xs font-bold text-gray-900">Fail</div>
                                <div class="text-[10px] text-gray-400">Belum memenuhi kriteria</div>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Feedback Banner: LULUS -->
                <div id="bannerLulus" x-show="decision === 'lulus'" x-cloak :class="{ 'hidden': decision !== 'lulus' }" class="bg-[#f0fdf4] border border-[#dcfce7] rounded-xl p-3 mt-2">
                    <div class="flex items-center gap-2 text-xs font-bold text-[#166534]">
                        <i class="fa-regular fa-circle-check text-emerald-600 text-sm"></i>
                        <span>Intern dinyatakan lulus</span>
                    </div>
                    <p class="text-[11px] text-[#15803d] mt-0.5 mb-2">
                        Sertifikat intern dapat dilihat melalui tombol di bawah ini.
                    </p>
                    <a id="btnPreviewCertificate" :href="intern.preview_url || '#'" target="_blank"
                        class="w-full bg-white border border-[#bbf7d0] hover:bg-emerald-50/50 text-gray-800 font-semibold text-xs py-1.5 px-3 rounded-lg flex items-center justify-center gap-2 transition shadow-2xs">
                        <i class="fa-regular fa-eye text-emerald-700 text-xs"></i>
                        <span>Lihat Sertifikat Intern</span>
                        <i class="fa-solid fa-arrow-up-right-from-square text-[10px] text-gray-500"></i>
                    </a>
                </div>

                <!-- Feedback Banner: FAIL -->
                <div id="bannerFail" x-show="decision === 'fail'" x-cloak :class="{ 'hidden': decision !== 'fail' }" class="bg-[#fef2f2] border border-[#fee2e2] rounded-xl p-3 mt-2">
                    <div class="flex items-center gap-2 text-xs font-bold text-[#991b1b]">
                        <i class="fa-solid fa-circle-exclamation text-red-500 text-sm"></i>
                        <span>Intern dinyatakan tidak lulus</span>
                    </div>
                    <p class="text-[11px] text-[#b91c1c] mt-0.5">
                        Sertifikat intern tidak tersedia untuk keputusan Fail.
                    </p>
                </div>

                <!-- Actions Footer -->
                <div class="flex items-center justify-end gap-2.5 pt-3 mt-3 border-t border-gray-100">
                    <button type="button" @click="modalOpen = false"
                        class="px-4 py-2 rounded-xl border border-gray-200 text-xs font-semibold text-gray-700 bg-white hover:bg-gray-50 transition cursor-pointer">
                        Batal
                    </button>
                    <button type="submit"
                        class="px-5 py-2 rounded-xl bg-[#13124E] hover:bg-[#1E1B6B] text-white text-xs font-semibold transition shadow-xs cursor-pointer">
                        Simpan Penilaian
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection