436 lines
24 KiB
PHP
436 lines
24 KiB
PHP
@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">All Registrations</h1>
|
||
<p class="text-slate-500 text-sm mt-0.5">Complete list of registered users</p>
|
||
</div>
|
||
<div class="flex items-center gap-2.5">
|
||
<a href="{{ route('home') }}"
|
||
class="flex items-center gap-2 bg-white hover:bg-slate-50 border border-slate-200 text-slate-600 text-sm font-medium px-4 py-2 rounded-lg transition-colors shadow-sm">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
|
||
</svg>
|
||
Dashboard
|
||
</a>
|
||
<form method="GET" action="{{ route('registrations.index') }}" 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('registrations.index') }}" 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>
|
||
</div>
|
||
</div>
|
||
<!-- TABLE -->
|
||
<div class="bg-white border rounded-xl overflow-hidden">
|
||
<table class="w-full text-sm">
|
||
<thead class="bg-slate-50 border-b">
|
||
<tr>
|
||
<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">Total Score</th>
|
||
<th class="px-5 py-3 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider">Sessions</th>
|
||
<th class="px-5 py-3 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider">Comments</th>
|
||
<th class="px-5 py-3 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider">Registered</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-slate-100">
|
||
@foreach ($registrations as $reg)
|
||
@php
|
||
$sessionData = $reg->sessions->sortByDesc('play_date')->map(fn($s) => [
|
||
'date' => $s->play_date,
|
||
'score' => $s->score,
|
||
'shots' => $s->shots->sortBy('shot_number')->map(fn($sh) => (bool)$sh->result)->values()->toArray(),
|
||
])->values()->toArray();
|
||
|
||
$commentData = $reg->comments->sortByDesc('created_at')->map(fn($c) => [
|
||
'comment' => $c->comment,
|
||
'created_at' => $c->created_at->diffForHumans(),
|
||
])->values()->toArray();
|
||
@endphp
|
||
<tr class="hover:bg-slate-50/70 transition-colors group 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-created="{{ $reg->created_at->format('Y-m-d') }}"
|
||
data-sessions="{{ json_encode($sessionData) }}"
|
||
data-country-title="{{ $reg->country?->title ?? '' }}"
|
||
data-country-flag="{{ $reg->country?->country_flag ?? '' }}"
|
||
data-status="{{ $reg->status ?? 'warm' }}"
|
||
data-comments="{{ json_encode($commentData) }}">
|
||
<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 (editable with flag preview) --}}
|
||
<td class="px-5 py-3.5" onclick="event.stopPropagation()">
|
||
<div class="flex items-center gap-2">
|
||
<img id="flag-{{ $reg->id }}"
|
||
src="{{ $reg->country?->country_flag ?? '' }}"
|
||
class="w-5 h-3.5 object-cover rounded-sm {{ $reg->country_id ? '' : 'hidden' }}"
|
||
alt="">
|
||
<select class="country-select text-xs border border-slate-200 rounded-lg px-2 py-1.5 bg-white
|
||
text-slate-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 cursor-pointer max-w-[140px]"
|
||
data-reg-id="{{ $reg->id }}"
|
||
data-flag-target="flag-{{ $reg->id }}">
|
||
<option value="">— Select —</option>
|
||
@foreach($countries as $country)
|
||
<option value="{{ $country->id }}"
|
||
data-flag="{{ $country->country_flag }}"
|
||
{{ $reg->country_id == $country->id ? 'selected' : '' }}>
|
||
{{ $country->title }}
|
||
</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
</td>
|
||
|
||
{{-- Status TD (read-only badge) --}}
|
||
<td class="px-5 py-3.5 text-center" onclick="event.stopPropagation()">
|
||
@php $status = $reg->status ?? 'warm'; @endphp
|
||
<span class="text-xs font-semibold rounded-full px-2.5 py-1
|
||
{{ match($status) {
|
||
'hot' => 'bg-red-50 text-red-600',
|
||
'warm' => 'bg-amber-50 text-amber-600',
|
||
'cold' => 'bg-blue-50 text-blue-600',
|
||
default => 'bg-amber-50 text-amber-600',
|
||
} }}">
|
||
{{ match($status) { 'hot' => '🔥 Hot', 'warm' => '☀️ Warm', 'cold' => '❄️ Cold', default => '☀️ Warm' } }}
|
||
</span>
|
||
</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"><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>
|
||
{{ $reg->sessions->count() }}
|
||
</span>
|
||
</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->comments->count() }}
|
||
</span>
|
||
</td>
|
||
<td class="px-5 py-3.5 text-center text-slate-500 text-xs">{{ $reg->created_at->format('Y-m-d') }}</td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="px-5 py-3 border-t flex justify-between items-center">
|
||
<div class="text-xs text-slate-500">
|
||
Showing {{ $registrations->firstItem() }}–{{ $registrations->lastItem() }}
|
||
of {{ $registrations->total() }}
|
||
</div>
|
||
<div>{{ $registrations->appends(request()->query())->links() }}</div>
|
||
</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">
|
||
|
||
<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 rounded-sm hidden">
|
||
<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>
|
||
|
||
<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">Sessions</p>
|
||
<p id="panelSessions" class="text-xl font-black text-slate-900">0</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>
|
||
<p class="text-xs text-slate-400 mt-3">Registered: <span id="panelCreated" class="text-slate-500 font-medium">—</span></p>
|
||
</div>
|
||
|
||
<div class="flex-1 overflow-y-auto min-h-0">
|
||
|
||
<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>
|
||
|
||
<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">
|
||
<p class="text-xs text-slate-400 italic">No comments yet.</p>
|
||
</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>
|
||
|
||
<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 created = row.dataset.created;
|
||
const sessions = JSON.parse(row.dataset.sessions || '[]');
|
||
const comments = JSON.parse(row.dataset.comments || '[]');
|
||
|
||
const countryTitle=row.dataset.countryTitle;
|
||
const countryFlag=row.dataset.countryFlag;
|
||
|
||
document.getElementById('panelInitial').textContent = name.charAt(0).toUpperCase();
|
||
document.getElementById('panelName').textContent = name;
|
||
document.getElementById('panelPhone').textContent = phone;
|
||
document.getElementById('panelScore').textContent = score;
|
||
document.getElementById('panelSessions').textContent = sessions.length;
|
||
document.getElementById('panelEmail').textContent = email || '—';
|
||
document.getElementById('panelCreated').textContent = created;
|
||
|
||
// History
|
||
const historyEl = document.getElementById('panelHistory');
|
||
if (!Array.isArray(sessions) || sessions.length === 0) {
|
||
historyEl.innerHTML = '<p class="text-xs text-slate-400 italic">No sessions yet.</p>';
|
||
} else {
|
||
historyEl.innerHTML = sessions.map(s => {
|
||
const noShots = !s.shots || s.shots.length === 0;
|
||
const shots = noShots
|
||
? `<span class="text-xs text-slate-400 italic">No shots recorded</span>`
|
||
: [0, 1, 2].map(i => {
|
||
if (s.shots[i] === undefined) return `<span class="w-5 h-5 rounded-full border-2 border-dashed border-slate-300 inline-block"></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">${escHtml(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('');
|
||
}
|
||
|
||
// Comments — already plain arrays from toArray()
|
||
renderPanelComments(Array.isArray(comments) ? comments : Object.values(comments));
|
||
|
||
document.getElementById('panelCommentText').value = '';
|
||
|
||
//country
|
||
const flag=document.getElementById('panelCountryFlag');
|
||
if(countryFlag){
|
||
flag.src=countryFlag;
|
||
flag.classList.remove('hidden');
|
||
}else flag.classList.add('hidden');
|
||
|
||
document.getElementById('panelCountryTitle').textContent=countryTitle||'—';
|
||
|
||
// status
|
||
const statusEl=document.getElementById('panelStatus');
|
||
let cls='',txt='';
|
||
if(status==='hot'){cls='bg-red-50 text-red-600';txt='🔥 Hot'}
|
||
else if(status==='cold'){cls='bg-blue-50 text-blue-600';txt='❄️ Cold'}
|
||
else{cls='bg-amber-50 text-amber-600';txt='☀️ Warm'}
|
||
statusEl.className='text-xs px-2 py-1 rounded-full '+cls;
|
||
statusEl.textContent=txt;
|
||
|
||
|
||
document.getElementById('detailPanel').classList.remove('translate-x-full');
|
||
document.getElementById('detailPanelOverlay').classList.remove('hidden');
|
||
}
|
||
|
||
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,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||
}
|
||
|
||
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) {
|
||
const list = Array.isArray(r.comments) ? r.comments : Object.values(r.comments || {});
|
||
renderPanelComments(list.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>
|
||
document.querySelectorAll('.country-select').forEach(sel => {
|
||
sel.addEventListener('change', function () {
|
||
const regId = this.dataset.regId;
|
||
const countryId = this.value;
|
||
const flagTarget = this.dataset.flagTarget;
|
||
|
||
if (!countryId) return;
|
||
|
||
// Update flag preview if present
|
||
if (flagTarget) {
|
||
const selectedOption = this.options[this.selectedIndex];
|
||
const flagUrl = selectedOption.dataset.flag;
|
||
const flagEl = document.getElementById(flagTarget);
|
||
if (flagEl && flagUrl) {
|
||
flagEl.src = flagUrl;
|
||
flagEl.classList.remove('hidden');
|
||
}
|
||
}
|
||
|
||
$.ajax({
|
||
url: '{{ route("registrations.update-country", ":id") }}'.replace(':id', regId),
|
||
method: 'POST',
|
||
data: { _token: '{{ csrf_token() }}', country_id: countryId },
|
||
error: function () { alert('Failed to update country.'); }
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
@endpush
|