@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">Track registrations and goal scores for today's session.</p>
        </div>
        <div class="flex items-center gap-2.5">
            <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>
                    <path d="M3 12h18"></path>
                    <path d="M3 18h18"></path>
                </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>
            <button id="newRegistrationBtn"
                    class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white 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.5" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                </svg>
                New Registration
            </button>
        </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">{{ $total }} 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-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-right text-xs font-semibold text-slate-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @foreach ($registrations as $reg)
                    <tr class="hover:bg-slate-50/70 transition-colors group"
                        data-session-id="{{ $reg['session_id'] ?? '' }}"
                        data-name="{{ $reg['name'] }}"
                        data-total-score="{{ $reg['total_score'] }}"
                        data-shots="{{ json_encode($reg['today_goals'] ?? []) }}"
                        data-shots-recorded="{{ is_array($reg['today_goals']) ? count($reg['today_goals']) : 0 }}"
                        data-reg-id="{{ $reg['id'] }}">
                        <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>
                        <td class="px-5 py-3.5">
                            <div class="shots-cell 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 score-cell">{{ $reg['total_score'] }}</span>
                            </div>
                        </td>
                        <td class="px-5 py-3.5">
                            <div class="flex items-center justify-end gap-1">
                                @if(is_null($reg['today_goals']))
                                    <button class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium text-indigo-600 bg-indigo-50 hover:bg-indigo-100 border border-indigo-200 transition-colors">
                                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
                                        Record Score
                                    </button>
                                @else
                                    <span class="text-xs text-slate-400 italic px-1">Played ✓</span>
                                @endif
                                <button class="p-1.5 rounded-lg text-slate-400 hover:text-red-600 hover:bg-red-50 transition-colors opacity-0 group-hover:opacity-100">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/></svg>
                                </button>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div class="px-5 py-3 border-t border-slate-100 flex items-center justify-between">
            <p class="text-xs text-slate-400">Showing <span class="font-medium text-slate-600">{{ $total }}</span> students</p>
        </div>
    </div>
</div>

<!-- FLOATING FOOTBALL BTN -->
<style>
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50%       { transform: translateY(-8px); }
    }
    #footballBtn { animation: float 2.8s ease-in-out infinite; }
    #footballBtn:hover { animation: none; transform: translateY(-10px) rotate(12deg); }
    #footballBtn:active { transform: scale(0.92); }
</style>

<button id="footballBtn" onclick="openScoreboard()" title="View Scoreboard"
        class="fixed bottom-8 right-8 z-40 w-24 h-24 cursor-pointer bg-transparent border-none outline-none p-0">
    <img src="{{ asset('assets/wcup.png') }}" alt="Scoreboard" class="w-full h-full object-contain drop-shadow-md">
</button>

<div class="fixed bottom-[7rem] right-8 z-40 pointer-events-none">
    <span id="footballTooltip" class="bg-slate-900 text-white text-xs font-medium px-2.5 py-1 rounded-lg shadow opacity-0 transition-opacity duration-150 whitespace-nowrap">
        Scoreboard
    </span>
</div>

<iframe id="scoreboardFrame" src="" data-src="{{ route('scoreboard') }}"
        allowfullscreen
        style="display:none; position:fixed; inset:0; width:100vw; height:100vh; border:none; z-index:9999;"></iframe>

<!-- ============================================================ -->
<!-- REGISTRATION MODAL                                            -->
<!-- ============================================================ -->
<div id="registrationModal" class="fixed inset-0 z-50 hidden items-center justify-center">
    <!-- Backdrop -->
    <div id="modalBackdrop" class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"></div>

    <!-- Panel -->
    <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 overflow-hidden">

        <!-- Top accent bar -->
        <div class="h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-indigo-600"></div>

        <div class="p-6">

            <!-- Header -->
            <div class="flex items-start justify-between mb-6">
                <div>
                    <h3 class="text-slate-900 font-bold text-lg leading-tight">New Registration</h3>
                    <p id="modalSubtitle" class="text-slate-500 text-xs mt-0.5">Enter the student's phone number to begin.</p>
                </div>
                <button id="closeRegistrationModal"
                        class="ml-4 w-7 h-7 rounded-full bg-slate-100 hover:bg-slate-200 flex items-center justify-center text-slate-500 transition-colors shrink-0">
                    <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>
                </button>
            </div>

            <!-- Step indicators -->
            <div class="flex items-center gap-2 mb-6">
                <div id="step1dot" class="flex items-center gap-1.5">
                    <div class="w-6 h-6 rounded-full bg-indigo-600 flex items-center justify-center text-white text-xs font-bold">1</div>
                    <span class="text-xs font-medium text-indigo-600">Phone</span>
                </div>
                <div class="flex-1 h-px bg-slate-200" id="step1line"></div>
                <div id="step2dot" class="flex items-center gap-1.5 opacity-40">
                    <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center text-slate-600 text-xs font-bold">2</div>
                    <span class="text-xs font-medium text-slate-400">Verify</span>
                </div>
                <div class="flex-1 h-px bg-slate-200" id="step2line"></div>
                <div id="step3dot" class="flex items-center gap-1.5 opacity-40">
                    <div class="w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center text-slate-600 text-xs font-bold">3</div>
                    <span class="text-xs font-medium text-slate-400">Details</span>
                </div>
            </div>

            <!-- STEP 1: Phone -->
            <div id="stepPhone">
                <label class="block text-xs font-semibold text-slate-600 mb-1.5 uppercase tracking-wide">Phone Number</label>
                <div class="flex items-center border border-slate-200 rounded-xl overflow-hidden focus-within:ring-2 focus-within:ring-indigo-500 focus-within:border-indigo-500 transition-all bg-slate-50">
                    <div class="px-3 py-2.5 border-r border-slate-200 bg-white">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.06 1.18 2 2 0 012.03 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92z"/>
                        </svg>
                    </div>
                    <input type="tel" id="phone" placeholder="+977 98XXXXXXXX"
                           class="flex-1 px-3 py-2.5 bg-transparent text-sm text-slate-800 placeholder-slate-400 outline-none">
                </div>
                <button id="sendOtpBtn"
                        class="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 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>
                    Send OTP
                </button>
            </div>

            <!-- STEP 2: Verify OTP -->
            <div id="stepOtp" class="hidden">
                <div class="bg-indigo-50 border border-indigo-100 rounded-xl px-4 py-3 mb-4 flex items-center gap-3">
                    <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center shrink-0">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81 19.79 19.79 0 01.06 1.18 2 2 0 012.03 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-xs font-semibold text-indigo-700">OTP sent to <span id="phoneSentTo" class="font-bold"></span></p>
                        <p class="text-xs text-indigo-500 mt-0.5">Expires in 2 minutes</p>
                    </div>
                </div>

                <!-- Dev OTP preview -->
                <div id="otpPreview" class="hidden bg-amber-50 border border-amber-200 rounded-xl px-4 py-2.5 mb-4 flex items-center gap-2">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    <p class="text-xs font-semibold text-amber-700">Dev — OTP: <span id="otpValue" class="font-mono tracking-widest"></span></p>
                </div>

                <label class="block text-xs font-semibold text-slate-600 mb-1.5 uppercase tracking-wide">Enter OTP</label>
                <input type="text" id="otp" maxlength="6" placeholder="— — — — — —"
                       class="w-full border border-slate-200 rounded-xl px-4 py-2.5 text-center text-xl font-mono tracking-[.5em] text-slate-800 bg-slate-50
                              focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:bg-white transition-all placeholder-slate-300">

                <button id="verifyOtpBtn"
                        class="mt-4 w-full bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 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">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    Verify OTP
                </button>

                <button id="backToPhone" class="mt-2.5 w-full text-xs text-slate-400 hover:text-slate-600 py-1.5 transition-colors">
                    ← Change phone number
                </button>
            </div>

            <!-- STEP 3: Extra details (new user only) -->
            <div id="stepDetails" class="hidden">
                <div class="bg-emerald-50 border border-emerald-100 rounded-xl px-4 py-3 mb-4 flex items-center gap-3">
                    <div class="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center shrink-0">
                        <svg width="14" height="14" 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>
                        <p class="text-xs font-semibold text-emerald-700">Phone verified!</p>
                        <p class="text-xs text-emerald-600 mt-0.5">New student — please fill in their details.</p>
                    </div>
                </div>

                <div class="space-y-3">
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1.5 uppercase tracking-wide">Full Name <span class="text-red-400">*</span></label>
                        <input type="text" id="regName" placeholder="Student's full name"
                               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 focus:bg-white transition-all placeholder-slate-400">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-600 mb-1.5 uppercase tracking-wide">Email <span class="text-slate-400 font-normal normal-case">(optional)</span></label>
                        <input type="email" id="regEmail" placeholder="student@email.com"
                               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 focus:bg-white transition-all placeholder-slate-400">
                    </div>
                </div>

                <button id="submitRegistrationBtn"
                        class="mt-5 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">
                        <path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/>
                    </svg>
                    Register Student
                </button>
            </div>

            <!-- Error message -->
            <div id="modalError" class="hidden mt-3 bg-red-50 border border-red-200 rounded-xl px-4 py-3 flex items-center gap-2">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                <p id="modalErrorText" class="text-xs text-red-600 font-medium"></p>
            </div>

        </div>
    </div>
</div>


<!-- ============================================================ -->
<!-- SHOT RECORDING SIDE PANEL                                     -->
<!-- ============================================================ -->
<div id="shotPanel"
     class="fixed top-0 right-0 h-full w-80 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-5 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50">
        <div>
            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Recording Shots For</p>
            <p id="panelName" class="text-slate-900 font-bold text-base mt-0.5">—</p>
        </div>
        <button id="closeShotPanel"
                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>

    <!-- Shot Indicators -->
    <div class="px-5 py-4 border-b border-slate-100">
        <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Today's Shots</p>
        <div class="flex items-center gap-3">
            <div id="shotIndicator1" class="flex-1 h-10 rounded-lg border-2 border-slate-200 bg-slate-50 flex items-center justify-center text-xs font-bold text-slate-400">
                Shot 1
            </div>
            <div id="shotIndicator2" class="flex-1 h-10 rounded-lg border-2 border-slate-200 bg-slate-50 flex items-center justify-center text-xs font-bold text-slate-400">
                Shot 2
            </div>
            <div id="shotIndicator3" class="flex-1 h-10 rounded-lg border-2 border-slate-200 bg-slate-50 flex items-center justify-center text-xs font-bold text-slate-400">
                Shot 3
            </div>
        </div>
    </div>

    <!-- Current Shot -->
    <div class="flex-1 flex flex-col items-center justify-center px-5 gap-5">
        <div id="shotReadyState">
            <p class="text-center text-slate-400 text-xs font-semibold uppercase tracking-wider mb-1">Current Shot</p>
            <p id="currentShotLabel" class="text-center text-slate-900 font-black text-4xl mb-6">Shot 1</p>

            <div class="flex flex-col gap-3 w-full px-2">
                <button id="goalBtn"
                        class="w-full py-8 flex flex-col items-center justify-center gap-3 rounded-2xl
                               bg-emerald-50 hover:bg-emerald-100 active:scale-95
                               border-2 border-emerald-300 hover:border-emerald-500
                               transition-all duration-150">
                    <span class="text-5xl">⚽</span>
                    <span class="text-emerald-700 font-black text-base uppercase tracking-widest">Goal</span>
                    <span class="text-emerald-500 text-xs font-semibold">+1 pt</span>
                </button>

                <button id="missBtn"
                        class="w-full py-8 flex flex-col items-center justify-center gap-3 rounded-2xl
                               bg-red-50 hover:bg-red-100 active:scale-95
                               border-2 border-red-300 hover:border-red-500
                               transition-all duration-150">
                    <span class="text-5xl font-black text-red-500">✕</span>
                    <span class="text-red-700 font-black text-base uppercase tracking-widest">Miss</span>
                    <span class="text-red-400 text-xs font-semibold">0 pts</span>
                </button>
            </div>
        </div>

        <!-- Done state (all 3 recorded) -->
        <div id="shotDoneState" class="hidden text-center">
            <div class="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-3">
                <svg width="28" height="28" 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>
            <p class="text-slate-900 font-bold text-lg">All shots recorded!</p>
            <p class="text-slate-500 text-sm mt-1">Session score: <span id="sessionScoreDisplay" class="font-bold text-indigo-600"></span> pts</p>
        </div>
    </div>

    <!-- Total Score Footer -->
    <div class="px-5 py-4 border-t border-slate-100 bg-slate-50">
        <div class="flex items-center justify-between">
            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Cumulative Total</p>
            <div class="flex items-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="panelTotalScore" class="text-slate-900 font-black text-xl">0</span>
                <span class="text-slate-400 text-xs font-medium">pts</span>
            </div>
        </div>
    </div>
</div>

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

@endsection

@push('js')
<script>
// ── Row selection + Shot panel ───────────────────────────────
let selectedSessionId = null;
let currentShot       = 1;
let shotResults       = [];
let selectedRow       = null;

function openShotPanel(row) {
    // Deselect previous
    if (selectedRow) selectedRow.classList.remove('ring-2', 'ring-inset', 'ring-indigo-400', 'bg-indigo-50/40');

    selectedRow = row;
    row.classList.add('ring-2', 'ring-inset', 'ring-indigo-400', 'bg-indigo-50/40');

    selectedSessionId = row.dataset.sessionId;
    currentShot       = parseInt(row.dataset.shotsRecorded || 0) + 1;
    shotResults       = JSON.parse(row.dataset.shots || '[]');

    document.getElementById('panelName').textContent       = row.dataset.name;
    document.getElementById('panelTotalScore').textContent = row.dataset.totalScore;

    refreshPanel();

    document.getElementById('shotPanel').classList.remove('translate-x-full');
    document.getElementById('shotPanelOverlay').classList.remove('hidden');
}

function closeShotPanel() {
    document.getElementById('shotPanel').classList.add('translate-x-full');
    document.getElementById('shotPanelOverlay').classList.add('hidden');
    if (selectedRow) selectedRow.classList.remove('ring-2', 'ring-inset', 'ring-indigo-400', 'bg-indigo-50/40');
    selectedRow = null;
}

function refreshPanel() {
    // Update indicators
    for (let i = 1; i <= 3; i++) {
        const el = document.getElementById('shotIndicator' + i);
        el.className = 'flex-1 h-10 rounded-lg border-2 flex items-center justify-center text-xs font-bold transition-all';
        if (i < currentShot) {
            const goal = shotResults[i - 1];
            if (goal) {
                el.classList.add('border-emerald-400', 'bg-emerald-50', 'text-emerald-600');
                el.innerHTML = '⚽ Goal';
            } else {
                el.classList.add('border-red-300', 'bg-red-50', 'text-red-500');
                el.innerHTML = '✕ Miss';
            }
        } else if (i === currentShot) {
            el.classList.add('border-indigo-400', 'bg-indigo-50', 'text-indigo-600', 'animate-pulse');
            el.innerHTML = 'Shot ' + i;
        } else {
            el.classList.add('border-slate-200', 'bg-slate-50', 'text-slate-400');
            el.innerHTML = 'Shot ' + i;
        }
    }

    if (currentShot > 3) {
        document.getElementById('shotReadyState').classList.add('hidden');
        document.getElementById('shotDoneState').classList.remove('hidden');
        const goals = shotResults.filter(Boolean).length;
        document.getElementById('sessionScoreDisplay').textContent = goals;
    } else {
        document.getElementById('shotReadyState').classList.remove('hidden');
        document.getElementById('shotDoneState').classList.add('hidden');
        document.getElementById('currentShotLabel').textContent = 'Shot ' + currentShot;
    }
}

function recordShot(result) {
    if (!selectedSessionId || currentShot > 3) return;

    const shotNumber = currentShot;

    $.post("{{ route('registrations.record-shot') }}", {
        _token:     "{{ csrf_token() }}",
        session_id: selectedSessionId,
        shot_number: shotNumber,
        result:     result ? 1 : 0,
    })
    .done(res => {
        shotResults.push(result);
        currentShot++;

        // Update the indicator + panel
        refreshPanel();

        // Update total score in footer + in the row
        document.getElementById('panelTotalScore').textContent = res.total_score;
        if (selectedRow) {
            selectedRow.dataset.totalScore = res.total_score;
            selectedRow.dataset.shots      = JSON.stringify(shotResults);
            selectedRow.dataset.shotsRecorded = shotResults.length;

            // Live-update score cell
            const scoreCell = selectedRow.querySelector('.score-cell');
            if (scoreCell) scoreCell.textContent = res.total_score;

            // Live-update shot dots
            const shotsCell = selectedRow.querySelector('.shots-cell');
            if (shotsCell) {
                shotsCell.innerHTML = shotResults.map((g, i) =>
                    g ? `<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>`
                       : `<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>`
                ).join('');
            }
        }
    })
    .fail(() => alert('Failed to record shot. Please try again.'));
}

document.getElementById('goalBtn').addEventListener('click', () => recordShot(true));
document.getElementById('missBtn').addEventListener('click', () => recordShot(false));
document.getElementById('closeShotPanel').addEventListener('click', closeShotPanel);
document.getElementById('shotPanelOverlay').addEventListener('click', closeShotPanel);

// Row click listeners
document.querySelectorAll('tr[data-session-id]').forEach(row => {
    row.classList.add('cursor-pointer');
    row.addEventListener('click', () => {
        openShotPanel(row);

        // Sync selected player to scoreboard
        const regId = row.dataset.regId;
        if (regId) {
            $.post("{{ route('scoreboard.select') }}", {
                _token: "{{ csrf_token() }}",
                registration_id: regId,
            });
        }
    });
});

// ── Scoreboard ──────────────────────────────────────────────
const footballBtn = document.getElementById('footballBtn');
const tooltip     = document.getElementById('footballTooltip');
footballBtn.addEventListener('mouseenter', () => tooltip.style.opacity = 1);
footballBtn.addEventListener('mouseleave', () => tooltip.style.opacity = 0);

function openScoreboard() {
    const frame = document.getElementById('scoreboardFrame');
    if (!frame.src || frame.src === window.location.href) frame.src = frame.dataset.src;
    const req = frame.requestFullscreen || frame.webkitRequestFullscreen || frame.mozRequestFullScreen || frame.msRequestFullscreen;
    if (req) req.call(frame);
}

['fullscreenchange','webkitfullscreenchange','mozfullscreenchange','MSFullscreenChange'].forEach(e =>
    document.addEventListener(e, () => {
        const fs = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
        document.getElementById('scoreboardFrame').style.display = fs ? 'block' : 'none';
    })
);

// ── Modal state ──────────────────────────────────────────────
const modal       = document.getElementById('registrationModal');
const stepPhone   = document.getElementById('stepPhone');
const stepOtp     = document.getElementById('stepOtp');
const stepDetails = document.getElementById('stepDetails');

function showModal() {
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    goToStep(1);
}

function hideModal() {
    modal.classList.add('hidden');
    modal.classList.remove('flex');
    clearError();
    document.getElementById('phone').value = '';
    document.getElementById('otp').value   = '';
    document.getElementById('regName').value  = '';
    document.getElementById('regEmail').value = '';
}

function goToStep(step) {
    stepPhone.classList.add('hidden');
    stepOtp.classList.add('hidden');
    stepDetails.classList.add('hidden');
    clearError();

    const subtitles = {
        1: 'Enter the student\'s phone number to begin.',
        2: 'Enter the 6-digit OTP sent to the student\'s phone.',
        3: 'New student — fill in their details to complete registration.'
    };
    document.getElementById('modalSubtitle').textContent = subtitles[step];

    // Step indicators
    const s2 = document.getElementById('step2dot');
    const s3 = document.getElementById('step3dot');
    s2.classList.toggle('opacity-40', step < 2);
    s3.classList.toggle('opacity-40', step < 3);
    s2.querySelector('div').className = step >= 2
        ? 'w-6 h-6 rounded-full bg-indigo-600 flex items-center justify-center text-white text-xs font-bold'
        : 'w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center text-slate-600 text-xs font-bold';
    s3.querySelector('div').className = step >= 3
        ? 'w-6 h-6 rounded-full bg-indigo-600 flex items-center justify-center text-white text-xs font-bold'
        : 'w-6 h-6 rounded-full bg-slate-300 flex items-center justify-center text-slate-600 text-xs font-bold';

    if (step === 1) stepPhone.classList.remove('hidden');
    if (step === 2) stepOtp.classList.remove('hidden');
    if (step === 3) stepDetails.classList.remove('hidden');
}

function showError(msg) {
    document.getElementById('modalError').classList.remove('hidden');
    document.getElementById('modalErrorText').textContent = msg;
}

function clearError() {
    document.getElementById('modalError').classList.add('hidden');
}

// ── Open / Close ─────────────────────────────────────────────
document.getElementById('newRegistrationBtn').addEventListener('click', showModal);
document.getElementById('closeRegistrationModal').addEventListener('click', hideModal);
document.getElementById('modalBackdrop').addEventListener('click', hideModal);
document.getElementById('backToPhone').addEventListener('click', () => goToStep(1));

// ── Send OTP ─────────────────────────────────────────────────
document.getElementById('sendOtpBtn').addEventListener('click', function () {
    const phone = document.getElementById('phone').value.trim();
    if (!phone) { showError('Please enter a phone number.'); return; }

    this.disabled = true;
    this.textContent = 'Sending…';

    $.post("{{ route('registrations.send-otp') }}", {
        _token: "{{ csrf_token() }}",
        phone: phone
    })
    .done(res => {
        document.getElementById('phoneSentTo').textContent = phone;
        if (res.otp) {
            document.getElementById('otpPreview').classList.remove('hidden');
            document.getElementById('otpValue').textContent = res.otp;
        }
        goToStep(2);
    })
    .fail(() => showError('Failed to send OTP. Please try again.'))
    .always(() => {
        this.disabled = false;
        this.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> Send OTP`;
    });
});

// ── Verify OTP ───────────────────────────────────────────────
document.getElementById('verifyOtpBtn').addEventListener('click', function () {
    const phone = document.getElementById('phone').value.trim();
    const otp   = document.getElementById('otp').value.trim();
    if (!otp) { showError('Please enter the OTP.'); return; }

    this.disabled = true;
    this.textContent = 'Verifying…';

    $.post("{{ route('registrations.verify-otp') }}", {
        _token: "{{ csrf_token() }}",
        phone: phone,
        otp: otp
    })
    .done(res => {
        if (res.status === 'session_created') {
            hideModal();
            location.reload();
        } else if (res.status === 'needs_registration') {
            goToStep(3);
        }
    })
    .fail(xhr => {
        const res = xhr.responseJSON;
        if (res?.status === 'blocked') {
            showError(res.message || 'This student has already played today.');
        } else if (res?.status === 'invalid_otp') {
            showError('Invalid OTP. Please try again.');
        } else {
            showError('Something went wrong. Please try again.');
        }
    })
    .always(() => {
        this.disabled = false;
        this.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"><polyline points="20 6 9 17 4 12"/></svg> Verify OTP`;
    });
});

// ── Submit new registration (step 3) ─────────────────────────
document.getElementById('submitRegistrationBtn').addEventListener('click', function () {
    const name  = document.getElementById('regName').value.trim();
    const email = document.getElementById('regEmail').value.trim();
    const phone = document.getElementById('phone').value.trim();
    if (!name) { showError('Please enter the student\'s name.'); return; }

    this.disabled = true;
    this.textContent = 'Registering…';

    $.post("{{ route('registrations.store') }}", {
        _token: "{{ csrf_token() }}",
        phone: phone,
        name: name,
        email: email
    })
    .done(res => {
        if (res.status === 'session_created') {
            hideModal();
            location.reload();
        }
    })
    .fail(() => showError('Registration failed. Please try again.'))
    .always(() => {
        this.disabled = false;
        this.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"><path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg> Register Student`;
    });
});
</script>
@endpush