{{-- resources/views/livewire/siswa/konseling.blade.php --}}
@php use Illuminate\Support\Str; @endphp

<div class="max-w-5xl mx-auto space-y-6" x-data
     @scroll-to-form.window="$el.scrollIntoView({behavior:'smooth', block:'start'})"
     x-on:keydown.escape.window="$wire.showEditModal && $wire.closeEditModal(); $wire.showDeleteModal && $wire.closeDeleteModal()">

    {{-- Header --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-semibold">Konseling</h1>
            <p class="text-xs text-slate-500">Ajukan konseling dan kelola riwayat pengajuanmu</p>
        </div>
    </div>

    {{-- Flash --}}
    @if (session('success'))
        <div class="rounded-lg bg-green-50 text-green-800 p-3 text-sm flex items-center gap-2">
            <i class="bi bi-check-circle-fill"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    {{-- Form Create (tetap di halaman) --}}
    <div class="bg-white rounded-2xl shadow ring-1 ring-slate-200 p-6 space-y-4">
        <div class="flex items-center gap-2">
            <i class="bi bi-clipboard2-plus text-orange-600"></i>
            <h2 class="font-medium">Buat Pengajuan Konseling</h2>
        </div>

        <form wire:submit.prevent="save" class="grid gap-4">
            <div class="grid sm:grid-cols-2 gap-4">
                {{-- Kategori --}}
                <div>
                    <label for="kategori_id" class="block text-sm mb-1">Kategori <span class="text-red-600">*</span></label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                            <i class="bi bi-tag"></i>
                        </span>
                        <select
                            id="kategori_id"
                            wire:model.defer="kategori_id"
                            class="w-full rounded-lg pl-9 pr-3 py-2 text-sm
                                   border {{ $errors->has('kategori_id') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-orange-500 focus:border-orange-500' }}"
                            aria-invalid="{{ $errors->has('kategori_id') ? 'true' : 'false' }}"
                            @error('kategori_id') aria-describedby="kategori_id-error" @enderror
                        >
                            <option value="">— Pilih Kategori —</option>
                            @foreach ($categories as $c)
                                <option value="{{ $c->id }}">{{ $c->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    @error('kategori_id')
                        <p id="kategori_id-error" class="text-xs text-red-600 mt-1">{{ $message }}</p>
                    @else
                        <p class="text-[11px] text-slate-500 mt-1">Pilih topik yang paling relevan.</p>
                    @enderror
                </div>

                {{-- Judul --}}
                <div>
                    <label for="judul" class="block text-sm mb-1">Judul <span class="text-red-600">*</span></label>
                    <div class="relative group">
                        <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                            <i class="bi bi-type"></i>
                        </span>
                        <input
                            id="judul"
                            type="text"
                            wire:model.defer="judul"
                            autocomplete="off"
                            placeholder="Ringkas masalah yang ingin dikonsulkan"
                            class="w-full rounded-lg pl-9 pr-10 py-2 text-sm
                                   border {{ $errors->has('judul') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-orange-500 focus:border-orange-500' }}"
                            aria-invalid="{{ $errors->has('judul') ? 'true' : 'false' }}"
                            @error('judul') aria-describedby="judul-error" @enderror
                        >
                    </div>
                    @error('judul')
                        <p id="judul-error" class="text-xs text-red-600 mt-1">{{ $message }}</p>
                    @else
                        <p class="text:[11px] text-slate-500 mt-1">Contoh: “Kesulitan fokus belajar matematika”.</p>
                    @enderror
                </div>
            </div>

            {{-- Deskripsi --}}
            <div x-data
                 @input="$refs.ta.style.height='auto';$refs.ta.style.height=($refs.ta.scrollHeight)+'px'">
                <label for="deskripsi" class="block text-sm mb-1">Deskripsi <span class="text-red-600">*</span></label>
                <div class="relative">
                    <span class="absolute left-3 top-3 text-slate-400 pointer-events-none">
                        <i class="bi bi-chat-text"></i>
                    </span>
                    <textarea
                        id="deskripsi"
                        x-ref="ta"
                        rows="4"
                        wire:model.defer="deskripsi"
                        placeholder="Jelaskan detail permasalahanmu..."
                        class="w-full rounded-lg pl-9 pr-3 py-2 text-sm resize-none
                               border {{ $errors->has('deskripsi') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-orange-500 focus:border-orange-500' }}"
                        aria-invalid="{{ $errors->has('deskripsi') ? 'true' : 'false' }}"
                        @error('deskripsi') aria-describedby="deskripsi-error" @enderror
                    ></textarea>
                </div>
                @error('deskripsi')
                    <p id="deskripsi-error" class="text-xs text-red-600 mt-1">{{ $message }}</p>
                @else
                    <p class="text-[11px] text-slate-500 mt-1">Berikan konteks singkat: kapan mulai terjadi, frekuensi, dampak.</p>
                @enderror
            </div>

            <div class="flex items-center gap-3 pt-1">
                <button type="submit"
                        class="inline-flex items-center gap-2 rounded-lg bg-orange-600 text-white px-4 py-2 hover:bg-orange-700 transition
                               disabled:opacity-60 disabled:cursor-not-allowed"
                        wire:loading.attr="disabled">
                    <i class="bi bi-send"></i> Kirim
                </button>
                <button type="button" wire:click="resetForm"
                        class="inline-flex items-center gap-2 rounded-lg bg-slate-100 px-4 py-2 hover:bg-slate-200 transition">
                    <i class="bi bi-arrow-counterclockwise"></i> Reset
                </button>
            </div>
        </form>
    </div>

    {{-- Filter & Riwayat --}}
    <div class="bg-white rounded-2xl shadow ring-1 ring-slate-200">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-3 border-b border-slate-200">
            <div class="flex items-center gap-2">
                <i class="bi bi-clock-history text-emerald-600"></i>
                <h2 class="font-medium">Riwayat Konseling</h2>
            </div>

            <div class="flex items-center gap-2">
                {{-- Search --}}
                <label class="relative">
                    <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                        <i class="bi bi-search"></i>
                    </span>
                    <input type="text" wire:model.live="search" placeholder="Cari judul/deskripsi…"
                           class="w-56 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-orange-500 focus:border-orange-500">
                </label>

                {{-- Filter Kategori --}}
                <label class="relative">
                    <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                        <i class="bi bi-filter"></i>
                    </span>
                    <select wire:model.live="filterKategori"
                            class="w-56 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-orange-500 focus:border-orange-500">
                        <option value="">Semua Kategori</option>
                        @foreach ($categories as $c)
                            <option value="{{ $c->id }}">{{ $c->nama }}</option>
                        @endforeach
                    </select>
                </label>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 text-left">
                    <tr>
                        <th class="px-4 py-3 font-medium text-slate-600 w-16">#</th>
                        <th class="px-4 py-3 font-medium text-slate-600">Judul</th>
                        <th class="px-4 py-3 font-medium text-slate-600">Kategori</th>
                        <th class="px-4 py-3 font-medium text-slate-600 w-40">Dikirim</th>
                        <th class="px-4 py-3 font-medium text-slate-600 w-40">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($riwayat as $i => $row)
                        <tr class="hover:bg-slate-50">
                            <td class="px-4 py-3 text-slate-500">
                                {{ ($riwayat->currentPage()-1)*$riwayat->perPage() + $i + 1 }}
                            </td>
                            <td class="px-4 py-3 font-medium">{{ $row->judul }}</td>
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center rounded-full bg-orange-100 px-2 py-0.5 text-[11px] font-semibold text-orange-700">
                                    {{ $row->kategori->nama ?? '—' }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-slate-600">
                                {{ $row->created_at?->format('d M Y H:i') }}
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2">
                                    <a href="{{ route('siswa.konseling.hasil', $row) }}"
                                       class="inline-flex items-center gap-1 rounded-lg bg-slate-100 px-3 py-1.5 hover:bg-slate-200 transition">
                                        <i class="bi bi-eye"></i> Detail
                                    </a>

                                    <button type="button"
                                            wire:click="openEdit({{ $row->id }})"
                                            class="inline-flex items-center gap-1 rounded-lg bg-emerald-100 px-3 py-1.5 hover:bg-emerald-200 transition">
                                        <i class="bi bi-pencil-square"></i> Edit
                                    </button>

                                    <button type="button"
                                            wire:click="confirmDelete({{ $row->id }})"
                                            class="inline-flex items-center gap-1 rounded-lg bg-red-100 px-3 py-1.5 hover:bg-red-200 transition">
                                        <i class="bi bi-trash3"></i> Hapus
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-4 py-10 text-center text-slate-500">
                                Belum ada pengajuan.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="px-4 py-3 border-t border-slate-200">
            {{ $riwayat->links() }}
        </div>
    </div>

    {{-- =========================================================
         MODAL: EDIT
    ========================================================== --}}
    @if($showEditModal)
    <div class="fixed inset-0 z-50 flex items-center justify-center" role="dialog" aria-modal="true" aria-labelledby="edit-title">
        {{-- Backdrop --}}
        <div class="absolute inset-0 bg-black/30" wire:click="closeEditModal" aria-hidden="true"></div>

        {{-- Panel --}}
        <div class="relative w-full max-w-lg mx-4 rounded-2xl bg-white shadow-xl ring-1 ring-slate-200"
             wire:keydown.escape="closeEditModal">
            <div class="px-5 py-4 border-b border-slate-200 flex items-center justify-between">
                <h3 id="edit-title" class="text-base font-semibold flex items-center gap-2">
                    <i class="bi bi-pencil-square text-emerald-600"></i> Edit Pengajuan Konseling
                </h3>
                <button class="p-2 rounded hover:bg-slate-100" wire:click="closeEditModal" aria-label="Tutup">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <form wire:submit.prevent="update" class="px-5 py-4 space-y-4">
                {{-- Kategori --}}
                <div>
                    <label for="edit_kategori_id" class="block text-sm mb-1">Kategori <span class="text-red-600">*</span></label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                            <i class="bi bi-tag"></i>
                        </span>
                        <select
                            id="edit_kategori_id"
                            wire:model.defer="kategori_id"
                            class="w-full rounded-lg pl-9 pr-3 py-2 text-sm
                                   border {{ $errors->has('kategori_id') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-emerald-500 focus:border-emerald-500' }}"
                            aria-invalid="{{ $errors->has('kategori_id') ? 'true' : 'false' }}"
                            @error('kategori_id') aria-describedby="edit_kategori_id-error" @enderror
                        >
                            <option value="">— Pilih Kategori —</option>
                            @foreach ($categories as $c)
                                <option value="{{ $c->id }}">{{ $c->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    @error('kategori_id')
                        <p id="edit_kategori_id-error" class="text-xs text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Judul --}}
                <div x-data x-init="$nextTick(() => { $dispatch('focus-edit-title') })" @focus-edit-title.window="document.getElementById('edit_judul')?.focus()">
                    <label for="edit_judul" class="block text-sm mb-1">Judul <span class="text-red-600">*</span></label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                            <i class="bi bi-type"></i>
                        </span>
                        <input
                            id="edit_judul"
                            type="text"
                            wire:model.defer="judul"
                            class="w-full rounded-lg pl-9 pr-3 py-2 text-sm
                                   border {{ $errors->has('judul') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-emerald-500 focus:border-emerald-500' }}"
                            aria-invalid="{{ $errors->has('judul') ? 'true' : 'false' }}"
                            @error('judul') aria-describedby="edit_judul-error" @enderror
                        >
                    </div>
                    @error('judul')
                        <p id="edit_judul-error" class="text-xs text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Deskripsi --}}
                <div x-data @input="$refs.ta2.style.height='auto';$refs.ta2.style.height=($refs.ta2.scrollHeight)+'px'">
                    <label for="edit_deskripsi" class="block text-sm mb-1">Deskripsi <span class="text-red-600">*</span></label>
                    <div class="relative">
                        <span class="absolute left-3 top-3 text-slate-400 pointer-events-none">
                            <i class="bi bi-chat-text"></i>
                        </span>
                        <textarea
                            id="edit_deskripsi"
                            x-ref="ta2"
                            rows="4"
                            wire:model.defer="deskripsi"
                            class="w-full rounded-lg pl-9 pr-3 py-2 text-sm resize-none
                                   border {{ $errors->has('deskripsi') ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-slate-300 focus:ring-emerald-500 focus:border-emerald-500' }}"
                            aria-invalid="{{ $errors->has('deskripsi') ? 'true' : 'false' }}"
                            @error('deskripsi') aria-describedby="edit_deskripsi-error" @enderror
                        ></textarea>
                    </div>
                    @error('deskripsi')
                        <p id="edit_deskripsi-error" class="text-xs text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center justify-end gap-2 pt-2">
                    <button type="button" wire:click="closeEditModal"
                            class="inline-flex items-center gap-2 rounded-lg bg-slate-100 px-4 py-2 hover:bg-slate-200 transition">
                        <i class="bi bi-x-circle"></i> Batal
                    </button>
                    <button type="submit"
                            class="inline-flex items-center gap-2 rounded-lg bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700 transition
                                   disabled:opacity-60 disabled:cursor-not-allowed"
                            wire:loading.attr="disabled">
                        <i class="bi bi-check2-circle"></i> Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
    @endif

    {{-- =========================================================
         MODAL: DELETE
    ========================================================== --}}
    @if($showDeleteModal)
    <div class="fixed inset-0 z-50 flex items-center justify-center" role="dialog" aria-modal="true" aria-labelledby="delete-title">
        {{-- Backdrop --}}
        <div class="absolute inset-0 bg-black/30" wire:click="closeDeleteModal" aria-hidden="true"></div>

        {{-- Panel --}}
        <div class="relative w-full max-w-md mx-4 rounded-2xl bg-white shadow-xl ring-1 ring-slate-200"
             wire:keydown.escape="closeDeleteModal">
            <div class="px-5 py-4 border-b border-slate-200 flex items-center justify-between">
                <h3 id="delete-title" class="text-base font-semibold flex items-center gap-2">
                    <i class="bi bi-exclamation-triangle-fill text-red-600"></i> Konfirmasi Hapus
                </h3>
                <button class="p-2 rounded hover:bg-slate-100" wire:click="closeDeleteModal" aria-label="Tutup">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <div class="px-5 py-4 space-y-3">
                <p class="text-sm text-slate-600">
                    Apakah Anda yakin ingin menghapus pengajuan ini? Tindakan ini tidak dapat dibatalkan.
                </p>

                <div class="flex items-center justify-end gap-2 pt-2">
                    <button type="button" wire:click="closeDeleteModal"
                            class="inline-flex items-center gap-2 rounded-lg bg-slate-100 px-4 py-2 hover:bg-slate-200 transition">
                        <i class="bi bi-x-circle"></i> Batal
                    </button>
                    <button type="button" wire:click="delete"
                            class="inline-flex items-center gap-2 rounded-lg bg-red-600 text-white px-4 py-2 hover:bg-red-700 transition
                                   disabled:opacity-60 disabled:cursor-not-allowed"
                            wire:loading.attr="disabled">
                        <i class="bi bi-trash3-fill"></i> Hapus
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>