{{-- resources/views/livewire/kepala-sekolah/bimbingan.blade.php --}}
@php use Illuminate\Support\Facades\Storage; @endphp

<div x-data="{ showDetail: @entangle('showDetail') }" class="space-y-6">
    {{-- Header + Tabs --}}
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-xl font-semibold">Bimbingan Online & Bimbingan Offline</h1>
            <p class="text-xs text-slate-500">Tampilan untuk Kepala Sekolah</p>
        </div>

        <div class="flex items-center gap-2">
            <button type="button" wire:click="setMode('konseling')"
                class="px-3 py-2 rounded-lg text-sm border
                {{ $mode === 'konseling' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-slate-700 border-slate-200 hover:bg-slate-50' }}">
                <i class="bi bi-chat-dots"></i> Bimbingan Online
            </button>
            <button type="button" wire:click="setMode('offline')"
                class="px-3 py-2 rounded-lg text-sm border
                {{ $mode === 'offline' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-slate-700 border-slate-200 hover:bg-slate-50' }}">
                <i class="bi bi-people"></i> Bimbingan Offline
            </button>
        </div>
    </div>

    {{-- Filter bar --}}
    <div class="flex flex-wrap 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="{{ $mode === 'konseling' ? 'Cari judul/desk/siswa…' : 'Cari topik/catatan/siswa…' }}"
                class="w-72 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
        </label>

        <input type="date" wire:model.live="dateFrom"
            class="rounded-lg border-slate-300 px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
        <span class="text-slate-500 text-sm">s/d</span>
        <input type="date" wire:model.live="dateTo"
            class="rounded-lg border-slate-300 px-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">

        {{-- Konseling filter kategori --}}
        @if ($mode === 'konseling')
            <label class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                    <i class="bi bi-tags"></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-indigo-500 focus:border-indigo-500">
                    <option value="">Semua Kategori</option>
                    @foreach ($kategoriList as $kat)
                        <option value="{{ $kat->id }}">{{ $kat->nama }}</option>
                    @endforeach
                </select>
            </label>
        @endif

        {{-- Offline filter --}}
        @if ($mode === 'offline')
            <label class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                    <i class="bi bi-check2-circle"></i>
                </span>
                <select wire:model.live="filterStatus"
                    class="w-48 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">Semua Status</option>
                    <option value="dijadwalkan">Dijadwalkan</option>
                    <option value="selesai">Selesai</option>
                </select>
            </label>
            <label class="relative">
                <span class="absolute inset-y-0 left-3 flex items-center text-slate-400 pointer-events-none">
                    <i class="bi bi-building"></i>
                </span>
                <select wire:model.live="filterKelas"
                    class="w-56 rounded-lg border-slate-300 pl-9 pr-3 py-2 text-sm focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">Semua Kelas</option>
                    @foreach ($kelasList as $k)
                        <option value="{{ $k->id }}">{{ $k->nama }}</option>
                    @endforeach
                </select>
            </label>
        @endif
    </div>

    {{-- Table --}}
    <div class="bg-white rounded-2xl shadow ring-1 ring-slate-200 overflow-hidden">
        <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-14">#</th>
                        @if ($mode === 'konseling')
                            <th class="px-4 py-3 font-medium text-slate-600 w-44">Tanggal</th>
                            <th class="px-4 py-3 font-medium text-slate-600">Siswa</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">Judul</th>
                            <th class="px-4 py-3 font-medium text-slate-600 w-36">Aksi</th>
                        @else
                            <th class="px-4 py-3 font-medium text-slate-600 w-44">Tanggal</th>
                            <th class="px-4 py-3 font-medium text-slate-600">Siswa</th>
                            <th class="px-4 py-3 font-medium text-slate-600 w-44">Kelas</th>
                            <th class="px-4 py-3 font-medium text-slate-600">Topik</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-36">Status</th>
                            <th class="px-4 py-3 font-medium text-slate-600 w-36">Aksi</th>
                        @endif
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse ($items as $i => $row)
                        @if ($mode === 'konseling')
                            <tr class="hover:bg-slate-50">
                                <td class="px-4 py-3 text-slate-500">{{ ($items->currentPage()-1)*$items->perPage() + $i + 1 }}</td>
                                <td class="px-4 py-3 text-slate-700">{{ \Illuminate\Support\Carbon::parse($row->created_at)->format('d M Y H:i') }}</td>
                                <td class="px-4 py-3">{{ $row->siswa->pengguna->nama ?? '—' }}</td>
                                <td class="px-4 py-3">{{ $row->kategori->nama ?? '—' }}</td>
                                <td class="px-4 py-3">
                                    <div class="font-medium text-slate-900">{{ $row->judul }}</div>
                                    <div class="text-xs text-slate-500 line-clamp-1">{{ $row->deskripsi }}</div>
                                </td>
                                <td class="px-4 py-3">
                                    <button type="button" @click="$wire.viewDetail({{ $row->id }}); showDetail = true"
                                        class="inline-flex items-center gap-1 rounded-lg bg-indigo-600 text-white px-2.5 py-1.5 hover:bg-indigo-700">
                                        <i class="bi bi-eye"></i> Detail
                                    </button>
                                </td>
                            </tr>
                        @else
                            <tr class="hover:bg-slate-50">
                                <td class="px-4 py-3 text-slate-500">{{ ($items->currentPage()-1)*$items->perPage() + $i + 1 }}</td>
                                <td class="px-4 py-3 text-slate-700">{{ \Illuminate\Support\Carbon::parse($row->tanggal)->format('d M Y H:i') }}</td>
                                <td class="px-4 py-3">
                                    <div class="font-medium text-slate-900">{{ $row->siswa->nama ?? '—' }}</div>
                                    <div class="text-xs text-slate-500">{{ $row->siswa->nisn ?? '—' }}</div>
                                </td>
                                <td class="px-4 py-3">{{ $row->siswa->kelas->nama ?? '—' }}</td>
                                <td class="px-4 py-3">{{ $row->topik ?? '—' }}</td>
                                <td class="px-4 py-3">{{ $row->kategori ?? '—' }}</td>
                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold
                                        @class([
                                            'bg-amber-100 text-amber-700' => $row->status === 'dijadwalkan',
                                            'bg-emerald-100 text-emerald-700' => $row->status === 'selesai',
                                        ])">
                                        {{ ucfirst($row->status) }}
                                    </span>
                                </td>
                                <td class="px-4 py-3">
                                    <button type="button" @click="$wire.viewDetail({{ $row->id }}); showDetail = true"
                                        class="inline-flex items-center gap-1 rounded-lg bg-indigo-600 text-white px-2.5 py-1.5 hover:bg-indigo-700">
                                        <i class="bi bi-eye"></i> Detail
                                    </button>
                                </td>
                            </tr>
                        @endif
                    @empty
                        <tr>
                            <td colspan="{{ $mode === 'konseling' ? 6 : 8 }}" class="px-4 py-10 text-center text-slate-500">
                                Tidak ada data.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

    {{-- Modal Detail --}}
    <div x-cloak x-show="showDetail" x-transition.opacity
        class="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
        <div @click.outside="showDetail = false"
            class="w-full max-w-2xl rounded-2xl bg-white shadow-2xl ring-1 ring-slate-200 overflow-hidden">
            <div class="flex items-center justify-between px-4 py-3 border-b border-slate-200">
                <div class="flex items-center gap-2">
                    <i class="bi bi-info-circle text-indigo-600"></i>
                    <h3 class="font-medium">Detail {{ $detail['tipe'] ?? ($mode === 'konseling' ? 'Konseling' : 'Offline') }}</h3>
                </div>
                <button type="button" @click="showDetail = false" class="text-slate-500 hover:text-slate-700">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <div class="p-4 text-sm">
                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3">
                    <div>
                        <dt class="text-slate-500">Tanggal</dt>
                        <dd class="font-medium text-slate-800">{{ $detail['tanggal'] ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-slate-500">Siswa</dt>
                        <dd class="font-medium text-slate-800">{{ $detail['siswa'] ?? '—' }}</dd>
                    </div>

                    {{-- Jika Konseling, tampilkan hasil konseling --}}
                    @if (($detail['tipe'] ?? '') === 'Konseling')
                        <div class="sm:col-span-2">
                            <dt class="text-slate-500">Kategori</dt>
                            <dd class="font-medium text-slate-800">{{ $detail['kategori'] ?? '—' }}</dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-slate-500">Judul</dt>
                            <dd class="font-medium text-slate-800">{{ $detail['judul'] ?? '—' }}</dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-slate-500">Deskripsi</dt>
                            <dd class="text-slate-800 whitespace-pre-line">{{ $detail['deskripsi'] ?? '—' }}</dd>
                        </div>

                        <div>
                            <dt class="text-slate-500">Status Tindak Lanjut</dt>
                            <dd>
                                @php $st = $detail['status'] ?? null; @endphp
                                @if ($st)
                                    <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold
                                        {{ $st === 'selesai' ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">
                                        {{ ucfirst($st) }}
                                    </span>
                                @else
                                    <span class="text-slate-500">—</span>
                                @endif
                            </dd>
                        </div>
                        <div>
                            <dt class="text-slate-500">Jadwal Pertemuan</dt>
                            <dd class="font-medium text-slate-800">{{ $detail['pertemuan'] ?? '—' }}</dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-slate-500">Tanggapan / Hasil</dt>
                            <dd class="text-slate-800 whitespace-pre-line">{{ $detail['hasil'] ?? '—' }}</dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-slate-500">Catatan</dt>
                            <dd class="text-slate-800 whitespace-pre-line">{{ $detail['catatan'] ?? '—' }}</dd>
                        </div>

                    {{-- Jika Offline, tampilkan atribut offline (dengan fallback kunci) --}}
                    @else
                        <div>
                            <dt class="text-slate-500">Kelas</dt>
                            <dd class="font-medium text-slate-800">{{ $detail['kelas'] ?? '—' }}</dd>
                        </div>
                        <div>
                            <dt class="text-slate-500">Status</dt>
                            <dd>
                                @php $st = $detail['status'] ?? null; @endphp
                                @if ($st)
                                    <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold
                                        {{ $st === 'selesai' ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }}">
                                        {{ ucfirst($st) }}
                                    </span>
                                @else
                                    <span class="text-slate-800">—</span>
                                @endif
                            </dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-slate-500">Topik</dt>
                            {{-- fallback judul -> topik --}}
                            <dd class="font-medium text-slate-800">{{ $detail['topik'] ?? $detail['judul'] ?? '—' }}</dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-slate-500">Kategori</dt>
                            <dd class="font-medium text-slate-800">{{ $detail['kategori'] ?? '—' }}</dd>
                        </div>
                        <div class="sm:col-span-2">
                            <dt class="text-slate-500">Catatan</dt>
                            {{-- fallback deskripsi -> keterangan --}}
                            <dd class="text-slate-800 whitespace-pre-line">{{ $detail['keterangan'] ?? $detail['deskripsi'] ?? '—' }}</dd>
                        </div>

                        {{-- Dokumentasi dengan fallback beberapa kunci --}}
                        @php
                            $dok = $detail['file_url'] ?? ($detail['file'] ?? ($detail['foto'] ?? ($detail['foto_dokumentasi'] ?? null)));
                            if ($dok && !preg_match('/^https?:\/\//i', $dok)) {
                                $dok = Storage::url($dok);
                            }
                        @endphp
                        @if (!empty($dok))
                            <div class="sm:col-span-2">
                                <dt class="text-slate-500">Dokumentasi</dt>
                                <dd>
                                    <a href="{{ $dok }}" target="_blank"
                                       class="text-indigo-600 hover:underline inline-flex items-center gap-1">
                                        <i class="bi bi-file-earmark-image"></i> Lihat File
                                    </a>
                                </dd>
                            </div>
                        @endif
                    @endif
                </dl>
            </div>
        </div>
    </div>
</div>