@extends('layouts.superadmin')

@section('content')
<div x-data="{
    approveModalOpen: false,
    rejectModalOpen: false,
    approveApp: {},
    rejectApp: { id: null, name: '' },
    form: {
        mentor_id: '',
        batch_id: '',
        start_date: '',
        end_date: ''
    },
    batches: {{ Js::from(collect($batches ?? [])->mapWithKeys(fn($b) => [$b->id_batch => ['start' => $b->start_date ? \Carbon\Carbon::parse($b->start_date)->format('Y-m-d') : '', 'end' => $b->end_date ? \Carbon\Carbon::parse($b->end_date)->format('Y-m-d') : '']])) }},
    onBatchChange(id) {
        if (this.batches && this.batches[id]) {
            this.form.start_date = this.batches[id].start || '';
            this.form.end_date = this.batches[id].end || '';
        }
    },
    openApprove(app) {
        this.approveApp = app;
        this.form = { mentor_id: '', batch_id: '', start_date: '', end_date: '' };
        this.approveModalOpen = true;
    },
    openReject(id, name) {
        this.rejectApp = { id, name };
        this.rejectModalOpen = true;
    }
}" @keydown.escape.window="approveModalOpen = false; rejectModalOpen = false">

    <!-- Top Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
        <div>
            <h1 class="text-3xl font-bold text-[#13124E] tracking-tight">Pendaftaran Calon Intern</h1>
            <p class="text-xs text-gray-400 mt-1">Tinjau pendaftaran mandiri, unduh berkas CV, dan proses persetujuan akun magang.</p>
        </div>
    </div>

    <!-- Flash Messages -->
    @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-xs">
            <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 (isset($errors) && $errors->any())
        <div class="mb-6 p-4 rounded-xl bg-red-50 border border-red-200 text-xs font-medium text-red-800 shadow-xs">
            <div class="flex items-center gap-2 mb-1 font-semibold">
                <i class="fa-solid fa-circle-exclamation text-red-600 text-sm"></i>
                <span>Terjadi kesalahan:</span>
            </div>
            <ul class="list-disc list-inside text-red-700 ml-4 space-y-0.5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- STATS CARDS -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <!-- Total Pendaftar -->
        <div class="bg-white border border-gray-200/80 p-6 rounded-2xl shadow-xs flex justify-between items-start">
            <div>
                <p class="text-xs text-gray-400 font-medium mb-3">Total Pendaftar</p>
                <span class="text-4xl font-semibold text-[#13124E] leading-none">{{ $totalApplications }}</span>
            </div>
            <div class="text-[#13124E] text-base">
                <i class="fa-solid fa-users"></i>
            </div>
        </div>

        <!-- Menunggu Review -->
        <div class="bg-white border border-gray-200/80 p-6 rounded-2xl shadow-xs flex justify-between items-start">
            <div>
                <p class="text-xs text-gray-400 font-medium mb-3">Menunggu Review</p>
                <span class="text-4xl font-semibold text-[#13124E] leading-none">{{ $pendingCount }}</span>
            </div>
            <div class="text-[#13124E] text-base">
                <i class="fa-regular fa-clock"></i>
            </div>
        </div>

        <!-- Disetujui -->
        <div class="bg-white border border-gray-200/80 p-6 rounded-2xl shadow-xs flex justify-between items-start">
            <div>
                <p class="text-xs text-gray-400 font-medium mb-3">Disetujui</p>
                <span class="text-4xl font-semibold text-[#13124E] leading-none">{{ $approvedCount }}</span>
            </div>
            <div class="text-[#13124E] text-base">
                <i class="fa-solid fa-circle-check"></i>
            </div>
        </div>

        <!-- Ditolak -->
        <div class="bg-white border border-gray-200/80 p-6 rounded-2xl shadow-xs flex justify-between items-start">
            <div>
                <p class="text-xs text-gray-400 font-medium mb-3">Ditolak</p>
                <span class="text-4xl font-semibold text-[#13124E] leading-none">{{ $rejectedCount }}</span>
            </div>
            <div class="text-[#13124E] text-base">
                <i class="fa-solid fa-circle-xmark"></i>
            </div>
        </div>
    </div>

    <!-- TABEL & FILTER PENDAFTAR WITH LIVEWIRE SEARCH & URL STATE -->
    <livewire:superadmin.application-table />

    <!-- MODAL APPROVE INTERN -->
    <div id="approveModal" x-show="approveModalOpen" x-cloak :class="{ 'hidden': !approveModalOpen }" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-xs p-4">
        <div class="bg-white w-full max-w-xl rounded-2xl shadow-xl border border-gray-100 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
            <div class="px-5 py-3 bg-[#13124E] text-white flex items-center justify-between">
                <div>
                    <h3 class="font-bold text-sm sm:text-base">Persetujuan Akun Intern</h3>
                    <p class="text-[11px] text-gray-300 mt-0.5">Pendaftar: <span class="font-semibold text-white" x-text="approveApp.name || ''"></span></p>
                </div>
                <div class="flex items-center gap-2">
                    <template x-if="approveApp.cv_link">
                        <a :href="approveApp.cv_link" target="_blank" rel="noopener noreferrer"
                            class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-white/10 hover:bg-white/20 text-white text-[11px] font-medium border border-white/20 transition cursor-pointer"
                            title="Pratinjau / Buka Berkas CV Pendaftar">
                            <i class="fa-regular fa-eye text-xs"></i>
                            <span>Lihat CV</span>
                        </a>
                    </template>
                    <button type="button" @click="approveModalOpen = false" class="text-gray-300 hover:text-white transition cursor-pointer">
                        <i class="fa-solid fa-xmark text-lg"></i>
                    </button>
                </div>
            </div>

            <form id="approveForm" method="POST" :action="'{{ url('superadmin/pendaftaran-intern') }}/' + (approveApp.id_application || '') + '/approve'" class="p-4 space-y-2.5">
                @csrf

                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <!-- Posisi Magang -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Posisi / Role Magang</label>
                        <input type="text" name="position" placeholder="cth: Frontend Developer"
                            class="w-full px-3 py-2 rounded-xl border border-gray-200 text-xs focus:ring-2 focus:ring-[#13124E] focus:outline-none">
                    </div>

                    <!-- Pilih Mentor -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Pilih Mentor Pembimbing</label>
                        <div class="relative"
                            x-data="{
                                open: false,
                                search: '',
                                options: [
                                    { value: '', label: '-- Tanpa Mentor (Tugaskan Nanti) --' },
                                    @foreach ($mentors as $mentor)
                                        { value: '{{ $mentor->id_user }}', label: {{ Js::from($mentor->name . ' (' . $mentor->email . ')') }} },
                                    @endforeach
                                ],
                                get selectedLabel() {
                                    const found = this.options.find(o => String(o.value) === String(form.mentor_id));
                                    return found ? found.label : '-- Tanpa Mentor (Tugaskan Nanti) --';
                                },
                                get filteredOptions() {
                                    if (!this.search.trim()) return this.options;
                                    const q = this.search.toLowerCase();
                                    return this.options.filter(o => o.label.toLowerCase().includes(q));
                                },
                                select(val) {
                                    form.mentor_id = val;
                                    this.open = false;
                                    this.search = '';
                                }
                            }"
                            x-init="$watch('open', value => { if (value) $nextTick(() => $refs.searchInput?.focus()); })"
                            @click.outside="open = false"
                            @keydown.escape.window="open = false">

                            <input type="hidden" name="mentor_id" :value="form.mentor_id">

                            <button type="button" @click="open = !open"
                                class="w-full px-3 py-2 rounded-xl border border-gray-200 text-xs text-left bg-white focus:ring-2 focus:ring-[#13124E] focus:outline-none flex items-center justify-between cursor-pointer transition">
                                <span class="truncate" :class="form.mentor_id ? 'text-gray-900 font-medium' : 'text-gray-500'" x-text="selectedLabel"></span>
                                <i class="fa-solid fa-chevron-down text-[10px] text-gray-400 transition-transform duration-200 ml-2" :class="{ 'rotate-180': open }"></i>
                            </button>

                            <div x-show="open" x-cloak
                                class="absolute z-50 left-0 right-0 mt-1 bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden py-1">
                                <div class="p-2 border-b border-gray-100 bg-gray-50/50">
                                    <div class="relative">
                                        <span class="absolute inset-y-0 left-0 flex items-center pl-2.5 pointer-events-none text-gray-400">
                                            <i class="fa-solid fa-magnifying-glass text-[11px]"></i>
                                        </span>
                                        <input type="text" x-ref="searchInput" x-model="search" placeholder="Cari nama/email mentor..."
                                            class="w-full pl-8 pr-7 py-1.5 bg-white border border-gray-200 rounded-lg text-xs text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-[#13124E]">
                                        <button type="button" x-show="search.length > 0" @click="search = ''; $refs.searchInput.focus()"
                                            class="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400 hover:text-gray-600">
                                            <i class="fa-solid fa-xmark text-[11px]"></i>
                                        </button>
                                    </div>
                                </div>
                                <ul class="max-h-48 overflow-y-auto py-1 text-xs divide-y divide-gray-50">
                                    <template x-for="opt in filteredOptions" :key="opt.value">
                                        <li @click="select(opt.value)"
                                            class="px-3.5 py-2 cursor-pointer flex items-center justify-between hover:bg-indigo-50/60 transition"
                                            :class="String(form.mentor_id) === String(opt.value) ? 'bg-indigo-50/80 text-[#13124E] font-semibold' : 'text-gray-700'">
                                            <span class="truncate" x-text="opt.label"></span>
                                            <i x-show="String(form.mentor_id) === String(opt.value)" class="fa-solid fa-check text-xs text-indigo-600 ml-2"></i>
                                        </li>
                                    </template>
                                    <li x-show="filteredOptions.length === 0" class="px-3.5 py-2.5 text-center text-xs text-gray-400">
                                        Tidak ditemukan
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Batch Periode -->
                    <div class="md:col-span-2">
                        <label for="form_batch_id" class="block text-xs font-semibold text-gray-800 mb-1">
                            Batch Periode <span class="text-gray-400 font-normal text-[10px]">(intern)</span>
                        </label>
                        <div class="relative"
                            x-data="{
                                open: false,
                                search: '',
                                options: [
                                    { value: '', label: 'Otomatis (Sesuai tanggal periode)' },
                                    @foreach ($batches ?? [] as $b)
                                        { value: '{{ $b->id_batch }}', label: {{ Js::from($b->name . ' (' . ($b->start_date ? $b->start_date->translatedFormat('d M Y') : '') . ' s/d ' . ($b->end_date ? $b->end_date->translatedFormat('d M Y') : '') . ')') }} },
                                    @endforeach
                                ],
                                get selectedLabel() {
                                    const found = this.options.find(o => String(o.value) === String(form.batch_id));
                                    return found ? found.label : 'Otomatis (Sesuai tanggal periode)';
                                },
                                get filteredOptions() {
                                    if (!this.search.trim()) return this.options;
                                    const q = this.search.toLowerCase();
                                    return this.options.filter(o => o.label.toLowerCase().includes(q));
                                },
                                select(val) {
                                    form.batch_id = val;
                                    onBatchChange(val);
                                    this.open = false;
                                    this.search = '';
                                }
                            }"
                            x-init="$watch('open', value => { if (value) $nextTick(() => $refs.searchInput?.focus()); })"
                            @click.outside="open = false"
                            @keydown.escape.window="open = false">

                            <input type="hidden" id="form_batch_id" name="batch_id" :value="form.batch_id">

                            <button type="button" @click="open = !open"
                                class="w-full px-3.5 py-2 rounded-xl border border-gray-200 text-xs text-left bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500 flex items-center justify-between cursor-pointer transition">
                                <span class="truncate" :class="form.batch_id ? 'text-gray-900 font-medium' : 'text-gray-500'" x-text="selectedLabel"></span>
                                <i class="fa-solid fa-chevron-down text-[10px] text-gray-400 transition-transform duration-200 ml-2" :class="{ 'rotate-180': open }"></i>
                            </button>

                            <div x-show="open" x-cloak
                                class="absolute z-50 left-0 right-0 mt-1 bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden py-1">
                                <div class="p-2 border-b border-gray-100 bg-gray-50/50">
                                    <div class="relative">
                                        <span class="absolute inset-y-0 left-0 flex items-center pl-2.5 pointer-events-none text-gray-400">
                                            <i class="fa-solid fa-magnifying-glass text-[11px]"></i>
                                        </span>
                                        <input type="text" x-ref="searchInput" x-model="search" placeholder="Cari batch periode..."
                                            class="w-full pl-8 pr-7 py-1.5 bg-white border border-gray-200 rounded-lg text-xs text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                                        <button type="button" x-show="search.length > 0" @click="search = ''; $refs.searchInput.focus()"
                                            class="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400 hover:text-gray-600">
                                            <i class="fa-solid fa-xmark text-[11px]"></i>
                                        </button>
                                    </div>
                                </div>
                                <ul class="max-h-48 overflow-y-auto py-1 text-xs divide-y divide-gray-50">
                                    <template x-for="opt in filteredOptions" :key="opt.value">
                                        <li @click="select(opt.value)"
                                            class="px-3.5 py-2 cursor-pointer flex items-center justify-between hover:bg-indigo-50/60 transition"
                                            :class="String(form.batch_id) === String(opt.value) ? 'bg-indigo-50/80 text-[#13124E] font-semibold' : 'text-gray-700'">
                                            <span class="truncate" x-text="opt.label"></span>
                                            <i x-show="String(form.batch_id) === String(opt.value)" class="fa-solid fa-check text-xs text-indigo-600 ml-2"></i>
                                        </li>
                                    </template>
                                    <li x-show="filteredOptions.length === 0" class="px-3.5 py-2.5 text-center text-xs text-gray-400">
                                        Tidak ditemukan
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Periode Intern -->
                    <div class="md:col-span-2">
                        <label class="block text-xs font-semibold text-gray-800 mb-1">
                            Periode Intern <span class="text-gray-400 font-normal text-[10px]">(intern)</span>
                        </label>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div>
                                <span class="block text-[11px] text-gray-500 font-medium mb-1">Tanggal Mulai</span>
                                <div class="relative">
                                    <input id="form_start_date" name="start_date" type="date" x-model="form.start_date"
                                        class="w-full px-3.5 py-2 rounded-xl border border-gray-200 text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 cursor-pointer">
                                </div>
                            </div>
                            <div>
                                <span class="block text-[11px] text-gray-500 font-medium mb-1">Tanggal Selesai</span>
                                <div class="relative">
                                    <input id="form_end_date" name="end_date" type="date" x-model="form.end_date"
                                        class="w-full px-3.5 py-2 rounded-xl border border-gray-200 text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 cursor-pointer">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tombol Aksi -->
                <div class="flex items-center justify-end gap-2 pt-3 border-t border-gray-100">
                    <button type="button" @click="approveModalOpen = false"
                        class="px-4 py-2 rounded-xl border border-gray-200 text-xs font-semibold text-gray-600 hover:bg-gray-50 transition cursor-pointer">
                        Batal
                    </button>
                    <button type="submit"
                        class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-xs font-semibold text-white transition flex items-center gap-1.5 shadow-xs cursor-pointer">
                        <i class="fa-solid fa-check"></i>
                        <span>Setujui & Buat Akun</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL REJECT INTERN -->
    <div id="rejectModal" x-show="rejectModalOpen" x-cloak :class="{ 'hidden': !rejectModalOpen }" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-xs p-4">
        <div class="bg-white w-full max-w-md rounded-2xl shadow-xl border border-gray-100 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
            <div class="px-5 py-3 bg-rose-700 text-white flex items-center justify-between">
                <div>
                    <h3 class="font-bold text-sm sm:text-base">Tolak Pendaftaran</h3>
                    <p class="text-[11px] text-rose-100 mt-0.5">Kirim email penolakan berkas kepada calon intern.</p>
                </div>
                <button type="button" @click="rejectModalOpen = false" class="text-white hover:text-gray-200 transition cursor-pointer">
                    <i class="fa-solid fa-xmark text-base"></i>
                </button>
            </div>

            <form id="rejectForm" method="POST" :action="'{{ url('superadmin/pendaftaran-intern') }}/' + (rejectApp.id || '') + '/reject'" class="p-4 space-y-2.5">
                @csrf
                <p class="text-xs text-gray-600 leading-relaxed">
                    Apakah Anda yakin ingin menolak pendaftaran calon intern atas nama <strong class="text-gray-900" x-text="rejectApp.name || '-'">-</strong>?
                </p>

                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Alasan Penolakan (Opsional)</label>
                    <textarea name="rejection_reason" rows="2" placeholder="cth: Kuota batch sudah penuh, atau kualifikasi berkas belum memenuhi kriteria..."
                        class="w-full px-3 py-2 rounded-xl border border-gray-200 text-xs focus:ring-2 focus:ring-rose-600 focus:outline-none"></textarea>
                    <p class="text-[10px] text-gray-400 mt-0.5">Alasan ini akan dicantumkan dalam email notifikasi yang dikirim ke pendaftar.</p>
                </div>

                <div class="flex items-center justify-end gap-2 pt-2.5 border-t border-gray-100">
                    <button type="button" @click="rejectModalOpen = false"
                        class="px-4 py-2 rounded-xl border border-gray-200 text-xs font-semibold text-gray-600 hover:bg-gray-50 transition cursor-pointer">
                        Batal
                    </button>
                    <button type="submit"
                        class="px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-700 text-xs font-semibold text-white transition flex items-center gap-1.5 shadow-xs cursor-pointer">
                        <i class="fa-solid fa-xmark"></i>
                        <span>Konfirmasi Tolak</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection