@extends('admin.layout')

@section('title', 'Registrations')
@section('page_heading', 'Registrations')

@section('content')

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped align-middle">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Type</th>
                        <th>Name / Organization</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Designation</th>
                        <th>State / City</th>
                        <th>Sport</th>
                        <th>Message</th>
                        <th>Registered At</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($registrations as $reg)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                <span class="badge bg-{{ $reg->type === 'organization' ? 'info' : 'primary' }}">
                                    {{ ucfirst($reg->type ?? 'individual') }}
                                </span>
                            </td>
                            <td>{{ $reg->name }}</td>
                            <td><a href="mailto:{{ $reg->email }}">{{ $reg->email }}</a></td>
                            <td>{{ $reg->phone }}</td>
                            <td>{{ $reg->designation ?? '—' }}</td>
                            <td>{{ $reg->city }}@if($reg->state), {{ $reg->state }}@endif</td>
                            <td>{{ $reg->sport ?? '—' }}</td>
                            <td>{{ $reg->message ? \Illuminate\Support\Str::limit($reg->message, 60) : '—' }}</td>
                            <td>{{ $reg->created_at->format('d M Y') }}</td>
                            <td class="text-end">
                                <div class="d-flex justify-content-end gap-2">
                                    <a class="btn btn-sm btn-outline-primary js-view-registration"
                                       href="{{ route('admin.registrations.show', $reg) }}"
                                       >View</a>
                                    <a class="btn btn-sm btn-outline-secondary" href="{{ route('admin.registrations.edit', $reg) }}">Edit</a>
                                    <form method="POST" action="{{ route('admin.registrations.destroy', $reg) }}" onsubmit="return confirm('Delete this registration?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-sm btn-danger">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="11" class="text-center text-muted">No registrations yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
{{-- <div class="modal fade" id="registrationViewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Registration Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="registrationViewModalBody">
                <div class="text-center text-muted py-5">Loading…</div>
            </div>
        </div>
    </div>
</div> --}}
@endsection

@push('scripts')


<script>
(function () {
    // function setModalBody(html) {
    //     var body = document.getElementById('registrationViewModalBody');
    //     if (body) body.innerHTML = html;
    // }

    // document.addEventListener('click', async function (e) {
    //     var link = e.target.closest('.js-view-registration');
    //     if (!link) return;

    //     e.preventDefault();

    //     var url = link.getAttribute('data-url');
    //     if (!url) {
    //         window.location.href = link.getAttribute('href');
    //         return;
    //     }

    //     // setModalBody('<div class="text-center text-muted py-5">Loading…</div>');

    //     // var modalEl = document.getElementById('registrationViewModal');
    //     // var modal = bootstrap.Modal.getOrCreateInstance(modalEl);
    //     // modal.show();

    //     try {
    //         var res = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
    //         if (!res.ok) throw new Error('Request failed');
    //         var html = await res.text();
    //         setModalBody(html);
    //     } catch (err) {
    //         setModalBody('<div class="alert alert-danger mb-0">Unable to load details. Please try again.</div>');
    //     }
    // });
})();
</script>
@endpush