@extends('layouts.master')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-8">

    <!-- HEADER -->
    <div class="flex items-center justify-between mb-7">
        <div>
            <h1 class="text-slate-900 text-xl font-bold tracking-tight">Student Registrations</h1>
            <p class="text-slate-500 text-sm mt-0.5">View registrations and manage student comments.</p>
        </div>
        <div class="flex items-center gap-2.5">
            <form method="GET" action="{{ route('home') }}" class="flex items-center">
                <div class="flex items-center gap-2 bg-white border border-slate-200 rounded-lg px-3 py-2 shadow-sm focus-within:ring-2 focus-within:ring-indigo-400 transition-all">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
                    </svg>
                    <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Search name, phone, email…"
                           class="text-sm text-slate-700 placeholder-slate-400 outline-none bg-transparent w-52">
                    @if(!empty($search))
                        <a href="{{ route('home') }}" class="text-slate-400 hover:text-slate-600 transition-colors">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                        </a>
                    @endif
                </div>
            </form>
            <a href="{{ route('registrations.index') }}"
               class="flex items-center gap-2 bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 text-sm font-medium px-4 py-2 rounded-lg transition-colors shadow-sm">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/>
                </svg>
                All Registrations
            </a>
            <a href="{{ route('leaderboard') }}"
               class="flex items-center gap-2 bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 text-sm font-medium px-4 py-2 rounded-lg transition-colors shadow-sm">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
                </svg>
                Leaderboard
            </a>
        </div>
    </div>

    <!-- STATS -->
    <div class="grid grid-cols-3 gap-4 mb-7">
        <div class="bg-white rounded-xl border border-slate-200 px-5 py-4 flex items-center gap-4 shadow-sm">
            <div class="w-9 h-9 rounded-lg bg-slate-100 flex items-center justify-center shrink-0">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/>
                    <path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/>
                </svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-slate-900 leading-none">{{ $total }}</p>
                <p class="text-xs text-slate-500 mt-1 font-medium">Total Registrations</p>
            </div>
        </div>
        <div class="bg-white rounded-xl border border-slate-200 px-5 py-4 flex items-center gap-4 shadow-sm">
            <div class="w-9 h-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 000 20M12 2a14.5 14.5 0 010 20M2 12h20"/>
                </svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-slate-900 leading-none">{{ $played }}</p>
                <p class="text-xs text-emerald-600 mt-1 font-medium">Played Today</p>
            </div>
        </div>
        <div class="bg-white rounded-xl border border-slate-200 px-5 py-4 flex items-center gap-4 shadow-sm">
            <div class="w-9 h-9 rounded-lg bg-indigo-50 flex items-center justify-center shrink-0">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                </svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-slate-900 leading-none">{{ $topScore }}</p>
                <p class="text-xs text-indigo-600 mt-1 font-medium">Top Score</p>
            </div>
        </div>
    </div>

    <!-- TABLE -->
    <div class="bg-white rounded-xl border border-slate-200 overflow-hidden shadow-sm">
        <div class="px-5 py-3.5 border-b border-slate-100 flex items-center justify-between">
            <div class="flex items-center gap-2 text-slate-700 font-semibold text-sm">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
                    <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
                </svg>
                Today's Sessions
            </div>
            <span class="text-xs font-medium text-slate-400 bg-slate-100 px-2 py-0.5 rounded-full">{{ $registrations->count() }} students</span>
        </div>
        <table class="w-full text-sm">
            <thead>
                <tr class="bg-slate-50 border-b border-slate-100">
                    <th class="px-5 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider w-16">ID</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Name</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Phone</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Email</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Country</th>
                    <th class="px-5 py-3 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
                    <th class="px-5 py-3 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider">Today's Shots</th>
                    <th class="px-5 py-3 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider">Total Score</th>
                    <th class="px-5 py-3 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider">Comments</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @foreach ($registrations as $reg)
                    <tr class="hover:bg-slate-50 cursor-pointer"
                        data-reg-id="{{ $reg['id'] }}"
                        data-name="{{ $reg['name'] }}"
                        data-phone="{{ $reg['phone'] }}"
                        data-email="{{ $reg['email'] ?? '' }}"
                        data-score="{{ $reg['total_score'] }}"
                        data-status="{{ $reg['status'] ?? 'warm' }}"
                        data-country-title="{{ $reg['country_title'] ?? '' }}"
                        data-country-flag="{{ $reg['country_flag'] ?? '' }}"
                        data-shots="{{ json_encode($reg['today_goals'] ?? []) }}">
                        <td class="px-5 py-3.5">
                            <span class="text-xs font-mono text-slate-400">#{{ str_pad($reg['id'], 4, '0', STR_PAD_LEFT) }}</span>
                        </td>
                        <td class="px-5 py-3.5">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center shrink-0">
                                    <span class="text-xs font-bold text-indigo-600">{{ strtoupper(substr($reg['name'], 0, 1)) }}</span>
                                </div>
                                <span class="font-medium text-slate-800">{{ $reg['name'] }}</span>
                            </div>
                        </td>
                        <td class="px-5 py-3.5 text-slate-500">{{ $reg['phone'] }}</td>
                        <td class="px-5 py-3.5 text-slate-500">{{ $reg['email'] }}</td>

                        <!-- COUNTRY -->
                        <td class="px-5 py-3" onclick="event.stopPropagation()">
                            <div class="flex items-center gap-2">
                                @if(!empty($reg['country_flag']))
                                    <img src="{{ $reg['country_flag'] }}" class="w-5 h-3.5 rounded-sm">
                                @endif
                                <span class="text-slate-600 text-sm">{{ $reg['country_title'] ?: '—' }}</span>
                            </div>
                        </td>

                        <!-- STATUS -->
                        <td class="px-5 py-3 text-center" onclick="event.stopPropagation()">
                            @php $status = $reg['status'] ?? 'warm'; @endphp
                            <select class="status-select text-xs px-2 py-1 rounded border cursor-pointer"
                                    data-reg-id="{{ $reg['id'] }}">
                                <option value="hot"  {{ $status === 'hot'  ? 'selected' : '' }}>🔥 Hot</option>
                                <option value="warm" {{ $status === 'warm' ? 'selected' : '' }}>☀️ Warm</option>
                                <option value="cold" {{ $status === 'cold' ? 'selected' : '' }}>❄️ Cold</option>
                            </select>
                        </td>

                        <td class="px-5 py-3.5">
                            <div class="flex items-center justify-center gap-1.5">
                                @if(is_null($reg['today_goals']))
                                    <span class="text-xs text-slate-400 italic">Not played</span>
                                @else
                                    @foreach($reg['today_goals'] as $i => $goal)
                                        @if($goal)
                                            <div class="w-7 h-7 rounded-full bg-emerald-100 border-2 border-emerald-400 flex items-center justify-center" title="Shot {{ $i+1 }}: Goal">
                                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                            </div>
                                        @else
                                            <div class="w-7 h-7 rounded-full bg-slate-100 border-2 border-slate-300 flex items-center justify-center" title="Shot {{ $i+1 }}: Miss">
                                                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                                            </div>
                                        @endif
                                    @endforeach
                                @endif
                            </div>
                        </td>

                        <td class="px-5 py-3.5 text-center">
                            <div class="inline-flex items-center gap-1 font-bold text-slate-900">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="#6366f1" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                <span class="text-base">{{ $reg['total_score'] }}</span>
                            </div>
                        </td>

                        <td class="px-5 py-3.5 text-center">
                            <span class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 bg-slate-100 px-2 py-1 rounded-full">
                                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
                                </svg>
                                {{ $reg['comment_count'] ?? 0 }}
                            </span>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div class="px-5 py-3 border-t border-slate-100">
            <p class="text-xs text-slate-400">Showing <span class="font-medium text-slate-600">{{ $registrations->count() }}</span> students</p>
        </div>
    </div>
</div>

<!-- ============================================================ -->
<!-- STUDENT DETAIL SIDE PANEL                                     -->
<!-- ============================================================ -->
<div id="detailPanel"
     class="fixed top-0 right-0 h-full w-[32rem] bg-white border-l border-slate-200 shadow-2xl z-40
            transform translate-x-full transition-transform duration-300 ease-in-out
            flex flex-col">

    <!-- Panel Header -->
    <div class="px-6 py-4 border-b border-slate-100 bg-slate-50 flex items-center justify-between shrink-0">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center shrink-0">
                <span id="panelInitial" class="text-sm font-bold text-indigo-600">—</span>
            </div>
            <div>
                <p id="panelName" class="text-slate-900 font-bold text-base leading-tight">—</p>
                <p id="panelPhone" class="text-slate-400 text-xs mt-0.5">—</p>
                <div class="flex items-center gap-2 mt-1">
                    <img id="panelCountryFlag" class="w-5 h-3.5 hidden rounded-sm">
                    <span id="panelCountryTitle" class="text-xs text-slate-500">—</span>
                    <span id="panelStatus" class="text-xs px-2 py-0.5 rounded-full"></span>
                </div>
            </div>
        </div>
        <button id="closeDetailPanel"
                class="w-7 h-7 rounded-full bg-slate-200 hover:bg-slate-300 flex items-center justify-center text-slate-500 transition-colors">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
        </button>
    </div>

    <!-- Student Info Strip -->
    <div class="px-6 py-4 border-b border-slate-100 shrink-0">
        <div class="grid grid-cols-3 gap-3">
            <div class="bg-slate-50 rounded-xl px-3 py-3 text-center border border-slate-100">
                <p class="text-xs text-slate-400 font-medium mb-1">Total Score</p>
                <div class="flex items-center justify-center gap-1">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="#6366f1" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                    <span id="panelScore" class="text-xl font-black text-slate-900">0</span>
                </div>
            </div>
            <div class="bg-slate-50 rounded-xl px-3 py-3 text-center border border-slate-100">
                <p class="text-xs text-slate-400 font-medium mb-1">Today's Score</p>
                <p id="panelTodayScore" class="text-xl font-black text-slate-900">—</p>
            </div>
            <div class="bg-slate-50 rounded-xl px-3 py-3 text-center border border-slate-100">
                <p class="text-xs text-slate-400 font-medium mb-1">Email</p>
                <p id="panelEmail" class="text-xs font-medium text-slate-600 truncate">—</p>
            </div>
        </div>
        {{-- Hidden elements required by shared JS --}}
        <span id="panelSessions" class="hidden"></span>
        <span id="panelCreated" class="hidden"></span>
    </div>

    <!-- Scrollable content -->
    <div class="flex-1 overflow-y-auto min-h-0">

        <!-- Today's Shots -->
        <div class="px-6 py-4 border-b border-slate-100">
            <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Today's Shots</p>
            <div id="panelTodayShots" class="flex items-center gap-2">
                <span class="text-xs text-slate-400 italic">Not played today.</span>
            </div>
        </div>

        <!-- Score History -->
        <div class="px-6 py-4 border-b border-slate-100">
            <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Score History</p>
            <div id="panelHistory" class="space-y-2">
                <p class="text-xs text-slate-400 italic">No sessions yet.</p>
            </div>
        </div>

        <!-- Comments -->
        <div class="px-6 py-4">
            <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Comments</p>
            <div id="panelComments" class="space-y-2"></div>

            <div class="mt-4">
                <textarea id="panelCommentText" rows="3" placeholder="Write a comment…"
                          class="w-full border border-slate-200 rounded-xl px-3 py-2.5 text-sm text-slate-800 bg-slate-50
                                 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500
                                 transition-all placeholder-slate-400 resize-none"></textarea>
                <button id="panelCommentBtn"
                        class="mt-2 w-full bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold py-2.5 rounded-xl transition-colors flex items-center justify-center gap-2">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
                    </svg>
                    Post Comment
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Overlay -->
<div id="detailPanelOverlay" class="fixed inset-0 bg-black/20 z-30 hidden"></div>

@endsection

@push('js')
<script>
let selectedRegId  = null;
let selectedRegRow = null;

function openDetailPanel(row) {
    if (selectedRegRow) selectedRegRow.classList.remove('ring-2', 'ring-inset', 'ring-indigo-400', 'bg-indigo-50/40');
    selectedRegRow = row;
    row.classList.add('ring-2', 'ring-inset', 'ring-indigo-400', 'bg-indigo-50/40');

    selectedRegId    = row.dataset.regId;
    const name       = row.dataset.name;
    const phone      = row.dataset.phone;
    const email      = row.dataset.email;
    const score      = row.dataset.score;
    const todayShots = JSON.parse(row.dataset.shots || '[]');
    const countryTitle = row.dataset.countryTitle || '';
    const countryFlag  = row.dataset.countryFlag  || '';
    const status       = row.dataset.status       || 'warm';

    // Header
    document.getElementById('panelInitial').textContent = name.charAt(0).toUpperCase();
    document.getElementById('panelName').textContent    = name;
    document.getElementById('panelPhone').textContent   = phone;

    // Info strip
    document.getElementById('panelScore').textContent = score;
    document.getElementById('panelEmail').textContent  = email || '—';

    // Country
    const flag = document.getElementById('panelCountryFlag');
    if (countryFlag && countryFlag !== 'null' && countryFlag !== '') {
        flag.src = countryFlag;
        flag.classList.remove('hidden');
    } else {
        flag.classList.add('hidden');
    }
    document.getElementById('panelCountryTitle').textContent = countryTitle || '—';

    // Status badge
    const statusEl = document.getElementById('panelStatus');
    if (status === 'hot') {
        statusEl.className  = 'text-xs px-2 py-1 rounded bg-red-50 text-red-600';
        statusEl.textContent = '🔥 Hot';
    } else if (status === 'cold') {
        statusEl.className  = 'text-xs px-2 py-1 rounded bg-blue-50 text-blue-600';
        statusEl.textContent = '❄️ Cold';
    } else {
        statusEl.className  = 'text-xs px-2 py-1 rounded bg-amber-50 text-amber-600';
        statusEl.textContent = '☀️ Warm';
    }

    // Today's shots
    const shotsEl = document.getElementById('panelTodayShots');
    if (!todayShots || todayShots.length === 0) {
        shotsEl.innerHTML = '<span class="text-xs text-slate-400 italic">Not played today.</span>';
        document.getElementById('panelTodayScore').textContent = '—';
    } else {
        const todayGoals = todayShots.filter(Boolean).length;
        document.getElementById('panelTodayScore').textContent = todayGoals;
        shotsEl.innerHTML = todayShots.map((g, i) => g
            ? `<div class="w-8 h-8 rounded-full bg-emerald-100 border-2 border-emerald-400 flex items-center justify-center" title="Shot ${i+1}: Goal">
                   <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
               </div>`
            : `<div class="w-8 h-8 rounded-full bg-slate-100 border-2 border-slate-300 flex items-center justify-center" title="Shot ${i+1}: Miss">
                   <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
               </div>`
        ).join('');
    }

    // Reset
    document.getElementById('panelHistory').innerHTML  = '<p class="text-xs text-slate-400 italic">Loading…</p>';
    document.getElementById('panelComments').innerHTML = '<p class="text-xs text-slate-400 italic">Loading…</p>';
    document.getElementById('panelCommentText').value  = '';

    // Load comments
    $.ajax({
        url:  '{{ route("comments.index") }}',
        data: { registration_id: selectedRegId },
        success: function (r) {
            renderPanelComments((r.comments || []).map(c => ({
                comment:    c.comment,
                created_at: c.created_at_human ?? c.created_at,
            })));
        }
    });

    // Load session history
    $.get('{{ route("registrations.history", ":id") }}'.replace(':id', selectedRegId), function (r) {
        renderHistory(r.sessions || []);
    }).fail(function () {
        document.getElementById('panelHistory').innerHTML = '<p class="text-xs text-slate-400 italic">No sessions found.</p>';
    });

    document.getElementById('detailPanel').classList.remove('translate-x-full');
    document.getElementById('detailPanelOverlay').classList.remove('hidden');
}

function renderHistory(sessions) {
    const el = document.getElementById('panelHistory');
    if (!sessions || sessions.length === 0) {
        el.innerHTML = '<p class="text-xs text-slate-400 italic">No sessions yet.</p>';
        return;
    }
    el.innerHTML = sessions.map(s => {
        const shots = [0, 1, 2].map(i => {
            if (s.shots[i] === undefined) return `<span class="text-slate-300 text-sm">⚽</span>`;
            return s.shots[i]
                ? `<span class="text-sm" style="filter:drop-shadow(0 0 3px rgba(0,200,50,.6))">⚽</span>`
                : `<span class="text-red-400 text-sm font-bold">✕</span>`;
        }).join('');
        return `<div class="flex items-center justify-between bg-slate-50 border border-slate-100 rounded-xl px-3 py-2.5">
            <span class="text-xs font-medium text-slate-500">${s.date}</span>
            <div class="flex items-center gap-1">${shots}</div>
            <div class="flex items-center gap-1">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="#6366f1" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                <span class="text-sm font-bold text-slate-800">${s.score}</span>
                <span class="text-xs text-slate-400">pts</span>
            </div>
        </div>`;
    }).join('');
}

function renderPanelComments(comments) {
    const el = document.getElementById('panelComments');
    if (!comments || comments.length === 0) {
        el.innerHTML = '<p class="text-xs text-slate-400 italic">No comments yet.</p>';
        return;
    }
    el.innerHTML = comments.map(c => `
        <div class="bg-slate-50 border border-slate-200 rounded-xl px-4 py-3">
            <div class="flex items-center justify-between mb-1.5">
                <span class="text-xs font-semibold text-indigo-600">Counselor</span>
                <span class="text-xs text-slate-400">${escHtml(c.created_at)}</span>
            </div>
            <p class="text-sm text-slate-700 leading-relaxed">${escHtml(c.comment)}</p>
        </div>`).join('');
}

function closeDetailPanel() {
    document.getElementById('detailPanel').classList.add('translate-x-full');
    document.getElementById('detailPanelOverlay').classList.add('hidden');
    if (selectedRegRow) selectedRegRow.classList.remove('ring-2', 'ring-inset', 'ring-indigo-400', 'bg-indigo-50/40');
    selectedRegRow = null;
    selectedRegId  = null;
}

function escHtml(str) {
    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

document.getElementById('panelCommentBtn').addEventListener('click', function () {
    const text = document.getElementById('panelCommentText').value.trim();
    if (!text || !selectedRegId) return;
    this.disabled    = true;
    this.textContent = 'Posting…';
    const btn = this;
    $.ajax({
        url:    '{{ route("comments.store") }}',
        method: 'POST',
        data:   { _token: '{{ csrf_token() }}', registration_id: selectedRegId, comment: text },
        success: function () {
            document.getElementById('panelCommentText').value = '';
            $.ajax({
                url:  '{{ route("comments.index") }}',
                data: { registration_id: selectedRegId },
                success: function (r) {
                    renderPanelComments((r.comments || []).map(c => ({
                        comment: c.comment, created_at: c.created_at_human ?? c.created_at,
                    })));
                }
            });
        },
        error:    function () { alert('Failed to post comment.'); },
        complete: function () {
            btn.disabled = false;
            btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg> Post Comment`;
        }
    });
});

document.querySelectorAll('tr[data-reg-id]').forEach(row => {
    row.addEventListener('click', () => openDetailPanel(row));
});

document.getElementById('closeDetailPanel').addEventListener('click', closeDetailPanel);
document.getElementById('detailPanelOverlay').addEventListener('click', closeDetailPanel);

document.querySelector('input[name="search"]').addEventListener('input', function () {
    clearTimeout(this._t);
    this._t = setTimeout(() => this.closest('form').submit(), 400);
});
</script>

<script>
const statusColors = {
    hot:  'bg-red-50 text-red-600 border-red-200',
    warm: 'bg-amber-50 text-amber-600 border-amber-200',
    cold: 'bg-blue-50 text-blue-600 border-blue-200',
};

document.querySelectorAll('.status-select').forEach(sel => {
    sel.addEventListener('change', function () {
        const regId  = this.dataset.regId;
        const status = this.value;
        const el     = this;

        Object.values(statusColors).forEach(c =>
            c.split(' ').forEach(cls => el.classList.remove(cls))
        );
        statusColors[status].split(' ').forEach(cls => el.classList.add(cls));

        $.ajax({
            url:    '{{ route("registrations.update-status", ":id") }}'.replace(':id', regId),
            method: 'POST',
            data:   { _token: '{{ csrf_token() }}', status: status },
            error:  function () { alert('Failed to update status.'); }
        });
    });
});
</script>
@endpush