@extends('layouts.app')
@section('title', 'Registration Submissions')

@push('stylesheets')
@include('partials.filter-card-styles')
@include('partials.index-datatable-styles')
<link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4-custom.css') }}">
<style>
    #registrationSubmissionsTableCard .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    #registrationSubmissionsTableCard .table-responsive table {
        width: max-content;
        min-width: 100%;
        margin-bottom: 0;
    }
    #registrationSubmissionsTableCard .table-responsive table th,
    #registrationSubmissionsTableCard .table-responsive table td {
        white-space: nowrap;
    }
    #registrationSubmissionsTableCard .table-responsive table td:last-child { position: relative; }
    #registrationSubmissionsTableCard .dropdown .dropdown-menu { position: absolute !important; }

    .reg-list-badge {
        display: inline-block;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
    }
    .reg-list-badge--charge {
        background: #e8f5f0;
        color: #00401A;
        border: 1px solid rgba(6, 148, 148, 0.28);
    }
    .reg-list-badge--bps {
        background: #f1f5f9;
        color: #334155;
        border: 1px solid #e2e8f0;
    }
    .reg-list-badge--pending {
        background: #fffbeb;
        color: #92400e;
        border: 1px solid #fcd34d;
    }
    .reg-list-badge--approved {
        background: #e8f5f0;
        color: #00401A;
        border: 1px solid rgba(6, 148, 148, 0.35);
    }
    .reg-list-badge--rejected {
        background: #fef2f2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }
    .reg-list-attach {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .reg-list-attach .btn {
        border-radius: 6px !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        padding: 0.2rem 0.5rem !important;
    }
    .reg-list-attach .btn-view-file {
        background: linear-gradient(135deg, #00401A 0%, #069494 100%) !important;
        border: none !important;
        color: #fff !important;
    }
    .reg-list-attach .btn-view-file:hover {
        background: linear-gradient(135deg, #00401A 0%, #07a8a8 100%) !important;
        color: #fff !important;
    }
    .reg-list-attach .btn-view-photo {
        background: #fff !important;
        border: 1px solid #069494 !important;
        color: #00401A !important;
    }
    .reg-list-attach .btn-view-photo:hover {
        background: #e8f5f0 !important;
        color: #00401A !important;
    }
    .reg-list-muted { color: #94a3b8; font-size: 0.85rem; }
    .reg-list-email { word-break: break-all; }

    .reg-status-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        margin-bottom: 0.75rem;
        width: 100%;
    }
    .reg-status-filter .btn {
        border-radius: 999px !important;
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        padding: 0.3rem 0.85rem !important;
    }
    .reg-status-filter .btn-filter-active {
        background: linear-gradient(135deg, #00401A 0%, #069494 100%) !important;
        border: none !important;
        color: #fff !important;
    }
    .reg-status-filter .btn-filter {
        background: #fff !important;
        border: 1px solid #cbd5e1 !important;
        color: #334155 !important;
    }
    .reg-status-filter .btn-filter:hover {
        border-color: #069494 !important;
        color: #00401A !important;
    }

    #registrationSubmissionDetailsModal .reg-detail-table th {
        width: 38%;
        background: #e8f5f0;
        color: #00401A;
        font-weight: 600;
        vertical-align: middle;
    }
    #registrationSubmissionDetailsModal .reg-detail-table td {
        vertical-align: middle;
        background: #fff;
    }
    #registrationSubmissionDetailsModal .reg-detail-section {
        margin: 0;
        padding: 0.55rem 0.75rem;
        background: linear-gradient(135deg, #00401A 0%, #069494 100%);
        color: #fff;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }
    #registrationSubmissionDetailsModal .reg-file-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }
    #registrationSubmissionDetailsModal .btn-reg-file {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 0.8125rem !important;
        padding: 0.4rem 0.85rem !important;
        text-decoration: none !important;
    }
    #registrationSubmissionDetailsModal .btn-reg-file--order {
        background: linear-gradient(135deg, #00401A 0%, #069494 100%) !important;
        border: none !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(6, 148, 148, 0.25);
    }
    #registrationSubmissionDetailsModal .btn-reg-file--order:hover {
        background: linear-gradient(135deg, #00401A 0%, #07a8a8 100%) !important;
        color: #fff !important;
    }
    #registrationSubmissionDetailsModal .btn-reg-file--photo {
        background: #fff !important;
        border: 1px solid #069494 !important;
        color: #00401A !important;
    }
    #registrationSubmissionDetailsModal .btn-reg-file--photo:hover {
        background: #e8f5f0 !important;
        color: #00401A !important;
    }
    #registrationSubmissionDetailsModal .reg-file-missing {
        color: #94a3b8;
        font-size: 0.875rem;
        font-style: italic;
    }

    .btn-reg-approve {
        background: linear-gradient(135deg, #00401A 0%, #069494 100%) !important;
        border: none !important;
        color: #fff !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
    }
    .btn-reg-approve:hover { color: #fff !important; filter: brightness(1.05); }
    .btn-reg-approve:disabled { opacity: 0.7; }
    .btn-reg-reject {
        background: #fff !important;
        border: 1px solid #dc2626 !important;
        color: #dc2626 !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
    }
    .btn-reg-reject:hover { background: #fef2f2 !important; }
    .btn-reg-reject:disabled { opacity: 0.7; }

    .reg-review-modal .modal-header {
        background: linear-gradient(135deg, #00401A 0%, #069494 100%);
        color: #fff;
        border-bottom: none;
        flex-shrink: 0;
    }
    .reg-review-modal .modal-header .close { color: #fff; opacity: 0.9; text-shadow: none; }
    .reg-review-modal .modal-title { font-weight: 700; }
    .reg-review-modal .form-group label { font-weight: 600; color: #00401A; }
    .reg-review-modal .modal-dialog {
        max-width: 540px;
        width: calc(100% - 1.5rem);
        margin: 1rem auto;
        max-height: calc(100vh - 2rem);
    }
    .reg-review-modal .modal-content {
        max-height: calc(100vh - 2rem);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: none;
        border-radius: 10px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    }
    .reg-review-modal .modal-content > form {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }
    .reg-review-modal .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        max-height: none;
    }
    .reg-review-modal .modal-footer {
        flex-shrink: 0;
        border-top: 1px solid #e2e8f0;
        background: #fff;
    }
    /* Body-level review modals: keep backdrop dimmed above page chrome */
    body:has(#regApproveModal.show) > .modal-backdrop.show,
    body:has(#regRejectModal.show) > .modal-backdrop.show,
    body:has(#regNotifyRecipientsModal.show) > .modal-backdrop.show,
    body.reg-review-modal-open > .modal-backdrop.show {
        z-index: 1050 !important;
        opacity: 1 !important;
        background-color: rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body:has(#regApproveModal.show) #regApproveModal,
    body:has(#regRejectModal.show) #regRejectModal,
    body:has(#regNotifyRecipientsModal.show) #regNotifyRecipientsModal,
    body.reg-review-modal-open #regApproveModal.show,
    body.reg-review-modal-open #regRejectModal.show,
    body.reg-review-modal-open #regNotifyRecipientsModal.show {
        z-index: 1055 !important;
    }
    .reg-review-alert {
        display: none;
        border-radius: 8px;
        padding: 0.65rem 0.85rem;
        margin-bottom: 0.85rem;
        font-size: 0.875rem;
    }
    .reg-review-alert--error { display: block; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
    .reg-review-alert--success { display: block; background: #e8f5f0; color: #00401A; border: 1px solid rgba(6,148,148,.3); }
    .reg-review-alert--info { display: block; background: #f0f9ff; color: #075985; border: 1px solid #bae6fd; }
    .reg-review-spinner {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 2px solid rgba(255,255,255,.35);
        border-top-color: #fff;
        border-radius: 50%;
        animation: reg-spin .6s linear infinite;
        margin-right: 0.35rem;
        vertical-align: -2px;
    }
    .btn-reg-reject .reg-review-spinner {
        border-color: rgba(220,38,38,.3);
        border-top-color: #dc2626;
    }
    @keyframes reg-spin { to { transform: rotate(360deg); } }
    .reg-list-actions {
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 0.35rem;
        align-items: center;
    }
    .reg-list-actions .btn {
        border-radius: 6px !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        padding: 0.25rem 0.55rem !important;
        white-space: nowrap;
    }
    .reg-list-actions .btn-reg-approve,
    .reg-list-actions .btn-reg-reject {
        line-height: 1.2;
    }
    .reg-applicant-chip {
        background: #e8f5f0;
        border-radius: 8px;
        padding: 0.65rem 0.85rem;
        margin-bottom: 1rem;
        font-size: 0.875rem;
        color: #334155;
    }
    .reg-applicant-chip strong { color: #00401A; }
    #regApproveModal .select2-container {
        width: 100% !important;
        display: block;
    }
    #regApproveModal .select2-container--bootstrap4 .select2-selection--single {
        min-height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
    }
    #regApproveModal .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
        line-height: 1.5;
        padding-left: 0;
    }
    #regApproveModal .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
        height: 100%;
    }
    #regApproveModal select.select2-approve.select2-hidden-accessible {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        border: 0 !important;
    }

    .btn-reg-notify-info {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        height: 2rem;
        padding: 0 0.75rem !important;
        border-radius: 999px !important;
        border: 1px solid rgba(6, 148, 148, 0.35) !important;
        background: #e8f5f0 !important;
        color: #069494 !important;
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        line-height: 1;
        margin-left: auto;
    }
    .btn-reg-notify-info:hover {
        background: #d1fae5 !important;
        color: #00401A !important;
    }
    .btn-reg-notify-info i {
        font-size: 1rem;
    }
    #regNotifyRecipientsModal .modal-dialog {
        max-width: 640px;
    }
    #regNotifyRecipientsModal .reg-notify-empty {
        color: #64748b;
        text-align: center;
        padding: 1.75rem 1rem;
    }
    #regNotifyRecipientsModal .reg-notify-list {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }
    #regNotifyRecipientsModal .reg-notify-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #fff;
    }
    #regNotifyRecipientsModal .reg-notify-row__main {
        min-width: 0;
        flex: 1;
    }
    #regNotifyRecipientsModal .reg-notify-row__name {
        font-weight: 700;
        color: #0f172a;
        font-size: 0.95rem;
        line-height: 1.35;
        word-break: break-word;
    }
    #regNotifyRecipientsModal .reg-notify-row__email {
        margin-top: 0.2rem;
        color: #475569;
        font-size: 0.875rem;
        line-height: 1.4;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    #regNotifyRecipientsModal .reg-notify-row__meta {
        margin-top: 0.35rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 0.85rem;
        color: #64748b;
        font-size: 0.78rem;
        line-height: 1.35;
    }
    #regNotifyRecipientsModal .reg-notify-row__meta strong {
        font-weight: 700;
        color: #475569;
    }
    #regNotifyRecipientsModal .reg-notify-row__role {
        flex-shrink: 0;
        text-align: right;
    }
    #regNotifyRecipientsModal .reg-notify-row__role-label {
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #64748b;
        margin-bottom: 0.3rem;
    }
    #regNotifyRecipientsModal .reg-notify-count {
        margin-top: 0.85rem;
        margin-bottom: 0;
        color: #64748b;
        font-size: 0.8125rem;
    }
</style>
@endpush

@section('contents')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12" id="registrationSubmissionsTableCard">
                    @php
                        $statusFilter = $statusFilter ?? request('status', '');
                        $filterBase = route('registration-submissions.index');
                    @endphp
                    <x-table-filter-card
                        action="{{ route('registration-submissions.index') }}"
                        id="regSubmissionsFilterForm"
                        :resetUrl="route('registration-submissions.index')"
                    >
                        <div class="pms-filter-field mb-2">
                            <label for="filter-search">Search</label>
                            <input type="text" name="search" id="filter-search" class="form-control form-control-sm"
                                   placeholder="Search…" value="{{ $search ?? '' }}">
                        </div>
                    </x-table-filter-card>

                    <div class="reg-status-filter mb-3">
                        <span class="text-muted small mr-1">Status:</span>
                        <a href="{{ $filterBase }}" class="btn btn-sm {{ $statusFilter === '' ? 'btn-filter-active' : 'btn-filter' }}">All</a>
                        <a href="{{ $filterBase }}?status=pending" class="btn btn-sm {{ $statusFilter === 'pending' ? 'btn-filter-active' : 'btn-filter' }}">Pending</a>
                        <a href="{{ $filterBase }}?status=approved" class="btn btn-sm {{ $statusFilter === 'approved' ? 'btn-filter-active' : 'btn-filter' }}">Approved</a>
                        <a href="{{ $filterBase }}?status=rejected" class="btn btn-sm {{ $statusFilter === 'rejected' ? 'btn-filter-active' : 'btn-filter' }}">Rejected</a>
                        <button type="button"
                                class="btn btn-reg-notify-info"
                                id="btn-top-notify-recipients"
                                title="Users who receive new registration alerts"
                                data-recipients-url="{{ route('registration-submissions.notify-recipients') }}">
                            <i class="fas fa-info-circle" aria-hidden="true"></i>
                            Notification recipients
                        </button>
                    </div>

                    <x-active-filter-chips :chips="$activeChips" />

                    <x-layouts.index-card
                        :createRoute="null"
                        tableHeading="Registration Submissions"
                        :showTableHeading="true"
                        emptyMessage="No registration submissions yet"
                        emptyHint="Public PMS registration submissions will appear here once applicants complete the form."
                        :headers="['Name', 'CNIC', 'Email', 'Department', 'District', 'Status', 'BPS', 'Charge Type', 'Attachments', 'Submitted At', 'Actions']"
                        :sortColumns="['full_name', 'cnic', 'email', 'department_name', 'district_name', 'status', 'current_bps', 'charge_type', '', 'registration_submissions.id', '']"
                        :perPageSlot="view('components.per-page-selector', ['current' => $perPage ?? 25, 'baseUrl' => request()->url()])"
                        :pagination="$submissions->links('vendor.pagination.bootstrap-4')">
                        @foreach ($submissions as $submission)
                            @php
                                $statusClass = match ($submission->status) {
                                    'approved' => 'reg-list-badge--approved',
                                    'rejected' => 'reg-list-badge--rejected',
                                    default => 'reg-list-badge--pending',
                                };
                                $canApprove = $submission->isPending() && can('registration_submission', 'approve');
                                $canReject = $submission->isPending() && can('registration_submission', 'reject');
                            @endphp
                            <tr data-submission-id="{{ $submission->id }}"
                                data-full-name="{{ $submission->full_name }}"
                                data-email="{{ $submission->email }}"
                                data-department="{{ $submission->department_name ?: '—' }}"
                                data-district="{{ $submission->district_name ?: '—' }}"
                                data-role-id="{{ $submission->role_id ?? '' }}"
                                data-role-name="{{ $submission->role_name ? role_display_name((string) $submission->role_name) : '—' }}"
                                data-is-pnd="{{ (string) ($submission->role_id ?? '') === (string) ($pndRoleId ?? '') && ($pndRoleId ?? '') !== '' ? '1' : '0' }}"
                                data-approve-url="{{ route('registration-submissions.approve', $submission->id) }}"
                                data-reject-url="{{ route('registration-submissions.reject', $submission->id) }}">
                                <td>
                                    <x-details-modal-with-actions
                                        as="trigger"
                                        modalId="registrationSubmissionDetailsModal"
                                        :detailsUrl="route('registration-submissions.show', $submission->id)"
                                        :entityId="$submission->id"
                                        :entityName="$submission->full_name ?? 'Registration'"
                                        :editUrl="null"
                                        :deleteUrl="can('registration_submission', 'delete') ? route('registration-submissions.destroy', $submission->id) : null"
                                    >
                                        {{ $submission->full_name }}
                                    </x-details-modal-with-actions>
                                </td>
                                <td><code class="text-dark">{{ $submission->cnic }}</code></td>
                                <td class="reg-list-email">{{ $submission->email }}</td>
                                <td>{{ $submission->department_name ?: '—' }}</td>
                                <td>{{ $submission->district_name ?: '—' }}</td>
                                <td>
                                    <span class="reg-list-badge {{ $statusClass }} reg-row-status">
                                        {{ $submission->statusLabel() }}
                                    </span>
                                </td>
                                <td><span class="reg-list-badge reg-list-badge--bps">BPS-{{ $submission->current_bps }}</span></td>
                                <td><span class="reg-list-badge reg-list-badge--charge">{{ $submission->charge_type }}</span></td>
                                <td>
                                    <div class="reg-list-attach">
                                        @if ($submission->posting_order_path)
                                            <a href="{{ route('registration-submissions.download', [$submission->id, 'posting_order']) }}"
                                               class="btn btn-sm btn-view-file" target="_blank" rel="noopener"
                                               title="View Posting Order">
                                                <i class="fas fa-file-alt"></i> Order
                                            </a>
                                        @endif
                                        @if ($submission->passport_photo_path)
                                            <a href="{{ route('registration-submissions.download', [$submission->id, 'passport_photo']) }}"
                                               class="btn btn-sm btn-view-photo" target="_blank" rel="noopener"
                                               title="View Passport Photo">
                                                <i class="fas fa-image"></i> Photo
                                            </a>
                                        @endif
                                        @if (! $submission->posting_order_path && ! $submission->passport_photo_path)
                                            <span class="reg-list-muted">—</span>
                                        @endif
                                    </div>
                                </td>
                                <td>{{ $submission->created_at->format('d M Y h:i A') }}</td>
                                <td class="reg-row-actions-cell">
                                    @if ($canApprove || $canReject)
                                        <div class="reg-list-actions">
                                            @if ($canApprove)
                                                <button type="button"
                                                        class="btn btn-sm btn-reg-approve btn-list-approve"
                                                        title="Accept registration">
                                                    <i class="fas fa-check"></i> Accept
                                                </button>
                                            @endif
                                            @if ($canReject)
                                                <button type="button"
                                                        class="btn btn-sm btn-reg-reject btn-list-reject"
                                                        title="Reject registration">
                                                    <i class="fas fa-times"></i> Reject
                                                </button>
                                            @endif
                                        </div>
                                    @else
                                        <span class="reg-list-muted">—</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </x-layouts.index-card>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade pms-details-modal" id="registrationSubmissionDetailsModal" tabindex="-1" role="dialog" aria-labelledby="registrationSubmissionDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header pms-details-modal__header">
                    <div class="pms-details-modal__header-text">
                        <span class="pms-details-modal__eyebrow">Registration Submission</span>
                        <h5 class="modal-title" id="registrationSubmissionDetailsModalLabel">Details</h5>
                    </div>
                    <button type="button" class="close pms-details-modal__close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pms-details-modal__body" id="registrationSubmissionDetailsModal-body">
                    <div class="text-center text-muted py-4">Loading…</div>
                </div>
                <div class="modal-footer pms-details-modal__footer">
                    <div class="pms-details-modal__actions modal-footer-actions-left" id="reg-submission-modal-actions"></div>
                    <button type="button" class="btn pms-details-modal__close-btn" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Approve Modal --}}
    <div class="modal fade reg-review-modal" id="regApproveModal" tabindex="-1" role="dialog" aria-labelledby="regApproveModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="regApproveModalLabel">Approve Registration</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <form id="reg-approve-form" novalidate>
                    @csrf
                    <div class="modal-body">
                        <div id="reg-approve-alert" class="reg-review-alert" role="alert"></div>
                        <div class="reg-applicant-chip" id="reg-approve-applicant"></div>
                        <p class="text-muted small mb-3">
                            Approving will create an active user account using the applicant’s selected role, attach the registration department (for non–P&amp;D / non-MEC roles), and email login credentials.
                            For P&amp;D roles, authority level is assigned automatically from the selected designation.
                        </p>
                        <div class="form-group">
                            <label for="approve_permission_id">User Permission <span class="text-danger">*</span></label>
                            <select id="approve_permission_id" name="permission_id" class="form-control select2-approve" required>
                                <option value="">Select permission</option>
                                @foreach ($approvePermissions ?? [] as $id => $name)
                                    <option value="{{ $id }}">{{ $name }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback d-block" id="err_approve_permission_id"></div>
                        </div>
                        <div class="form-group">
                            <label for="approve_designation_id">Designation <span class="text-danger">*</span></label>
                            <select id="approve_designation_id" name="designation_id" class="form-control select2-approve" required>
                                <option value="">Select designation</option>
                            </select>
                            <div class="invalid-feedback d-block" id="err_approve_designation_id"></div>
                        </div>
                        <div class="form-group" id="approve-section-wrap" style="display:none;">
                            <label for="approve_section_id">Section <span class="text-danger">*</span></label>
                            <select id="approve_section_id" name="section_id" class="form-control select2-approve">
                                <option value="">Select section</option>
                                @foreach ($approveSections ?? [] as $id => $name)
                                    <option value="{{ $id }}">{{ $name }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback d-block" id="err_approve_section_id"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-reg-approve" id="reg-approve-submit">
                            <span class="btn-label"><i class="fas fa-check"></i> Approve &amp; Create User</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Reject Modal --}}
    <div class="modal fade reg-review-modal" id="regRejectModal" tabindex="-1" role="dialog" aria-labelledby="regRejectModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%);">
                    <h5 class="modal-title" id="regRejectModalLabel">Reject Registration</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <form id="reg-reject-form" novalidate>
                    @csrf
                    <div class="modal-body">
                        <div id="reg-reject-alert" class="reg-review-alert" role="alert"></div>
                        <div class="reg-applicant-chip" id="reg-reject-applicant"></div>
                        <div class="form-group">
                            <label for="rejection_reason">Reason for rejection <span class="text-danger">*</span></label>
                            <textarea id="rejection_reason" name="rejection_reason" class="form-control" rows="4"
                                      placeholder="Explain why this registration is being rejected (min. 10 characters)." required></textarea>
                            <div class="invalid-feedback d-block" id="err_rejection_reason"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-reg-reject" id="reg-reject-submit">
                            <span class="btn-label"><i class="fas fa-times"></i> Reject Registration</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Notify recipients info modal --}}
    <div class="modal fade reg-review-modal" id="regNotifyRecipientsModal" tabindex="-1" role="dialog" aria-labelledby="regNotifyRecipientsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="regNotifyRecipientsModalLabel">Notification Recipients</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div id="reg-notify-recipients-body">
                        <div class="text-center text-muted py-4" role="status">Loading…</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<script>
    $(function () {
        var currentApproveUrl = null;
        var currentRejectUrl = null;
        var currentSubmissionId = null;
        var designationsByRoleId = @json($approveDesignationsByRoleId ?? []);

        PmsIndexDataTable.init('#example1', { ordering: false });

        PmsIndexDataTable.attachServerSort('#example1', {
            baseUrl: '{{ request()->url() }}',
            currentQuery: @json(request()->except(['page'])),
            currentSortCol: '{{ request('sort_column', 'registration_submissions.id') }}',
            currentSortDir: '{{ request('sort_direction', 'desc') }}'
        });

        // Keep review modals on <body> so backdrop dims correctly and scroll is not clipped by layout wrappers.
        $('#regApproveModal, #regRejectModal, #regNotifyRecipientsModal').appendTo('body');

        $('#regApproveModal, #regRejectModal, #regNotifyRecipientsModal')
            .on('show.bs.modal', function () {
                $('body').addClass('reg-review-modal-open');
            })
            .on('hidden.bs.modal', function () {
                if (!$('#regApproveModal').hasClass('show') && !$('#regRejectModal').hasClass('show') && !$('#regNotifyRecipientsModal').hasClass('show')) {
                    $('body').removeClass('reg-review-modal-open');
                }
            });

        $('#regApproveModal').on('shown.bs.modal', function () {
            initApproveSelect2();
        });

        $('#regApproveModal').on('hidden.bs.modal', function () {
            destroyApproveSelect2($('#approve_permission_id'));
            destroyApproveSelect2($('#approve_designation_id'));
            destroyApproveSelect2($('#approve_section_id'));
        });

        function showReviewModal($modal) {
            var $details = $('#registrationSubmissionDetailsModal');
            if ($details.hasClass('show')) {
                $details.one('hidden.bs.modal', function () {
                    $modal.modal('show');
                }).modal('hide');
            } else {
                $modal.modal('show');
            }
        }

        $(document).on('click', '.action-dropdown-delete, .btn-details-modal-delete', function(e) {
            e.preventDefault();
            var form = $(this).closest('form');
            if (!form.length) return;
            Swal.fire({
                title: 'Are you sure?',
                text: 'Are you sure you want to delete this registration submission? You will not be able to revert this!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!'
            }).then(function(result) {
                if (result.isConfirmed) form.submit();
            });
        });

        function escapeHtml(str) {
            if (str === null || str === undefined || str === '') return '—';
            return String(str)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function fieldRow(label, valueHtml) {
            return '<tr><th>' + escapeHtml(label) + '</th><td>' + valueHtml + '</td></tr>';
        }

        function textCell(value) {
            return escapeHtml(value);
        }

        function statusBadge(status, label) {
            var cls = 'reg-list-badge--pending';
            if (status === 'approved') cls = 'reg-list-badge--approved';
            if (status === 'rejected') cls = 'reg-list-badge--rejected';
            return '<span class="reg-list-badge ' + cls + '">' + escapeHtml(label || status) + '</span>';
        }

        function fileFieldRow(label, url, kind) {
            var cell;
            if (url) {
                if (kind === 'photo') {
                    cell = '<div class="reg-file-actions">' +
                        '<a href="' + escapeHtml(url) + '" class="btn btn-reg-file btn-reg-file--photo" target="_blank" rel="noopener">' +
                        '<i class="fas fa-eye"></i> View Photo</a></div>';
                } else {
                    cell = '<div class="reg-file-actions">' +
                        '<a href="' + escapeHtml(url) + '" class="btn btn-reg-file btn-reg-file--order" target="_blank" rel="noopener">' +
                        '<i class="fas fa-download"></i> View / Download</a></div>';
                }
            } else {
                cell = '<span class="reg-file-missing">Not attached</span>';
            }
            return fieldRow(label, cell);
        }

        function sectionRow(title) {
            return '<tr><td colspan="2" class="p-0"><div class="reg-detail-section">' + escapeHtml(title) + '</div></td></tr>';
        }

        function setAlert($el, type, message) {
            $el.removeClass('reg-review-alert--error reg-review-alert--success reg-review-alert--info');
            if (!message) {
                $el.hide().text('');
                return;
            }
            $el.addClass('reg-review-alert--' + type).text(message).show();
            var $body = $el.closest('.modal-body');
            if ($body.length) {
                $body.scrollTop(0);
            }
            try {
                $el[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            } catch (err) {}
        }

        function showApproveError(message, errors) {
            setAlert($('#reg-approve-alert'), 'error', message || 'Failed to approve registration.');
            showFieldErrors(errors, {
                permission_id: 'err_approve_permission_id',
                designation_id: 'err_approve_designation_id',
                section_id: 'err_approve_section_id'
            });
            Swal.fire({
                icon: 'error',
                title: 'Approval failed',
                text: message || 'Failed to approve registration.',
                confirmButtonColor: '#069494'
            });
        }

        function clearFieldErrors(prefix) {
            $('[id^="err_' + prefix + '"]').text('');
        }

        function showFieldErrors(errors, map) {
            Object.keys(errors || {}).forEach(function (key) {
                var elId = map[key];
                if (elId) $('#' + elId).text((errors[key] || [])[0] || '');
            });
        }

        function destroyApproveSelect2($select) {
            if (!$select || !$select.length || !$.fn.select2) return;
            if ($select.hasClass('select2-hidden-accessible')) {
                $select.select2('destroy');
            }
        }

        function toggleSection(isPnd) {
            var show = !!isPnd;
            $('#approve-section-wrap').toggle(show);
            if (!show) {
                destroyApproveSelect2($('#approve_section_id'));
                $('#approve_section_id').val('');
            }
        }

        function populateDesignationOptions(roleId) {
            var $select = $('#approve_designation_id');
            destroyApproveSelect2($select);
            var map = designationsByRoleId[String(roleId || '')] || {};
            var html = '<option value="">Select designation</option>';
            Object.keys(map).forEach(function (id) {
                html += '<option value="' + String(id).replace(/"/g, '&quot;') + '">' + escapeHtml(map[id]) + '</option>';
            });
            $select.html(html).val('');
        }

        function initApproveSelect2() {
            if (typeof $.fn.select2 !== 'function') {
                return;
            }
            var $modal = $('#regApproveModal');
            $modal.find('select.select2-approve').each(function () {
                var $el = $(this);
                if ($el.attr('id') === 'approve_section_id' && !$('#approve-section-wrap').is(':visible')) {
                    destroyApproveSelect2($el);
                    return;
                }
                destroyApproveSelect2($el);
                try {
                    $el.select2({
                        theme: 'bootstrap4',
                        width: '100%',
                        allowClear: !$el.prop('required'),
                        dropdownParent: $modal,
                        placeholder: ($el.find('option[value=""]').first().text() || 'Select…').trim() || 'Select…'
                    });
                } catch (err) {
                    if (window.console && console.warn) {
                        console.warn('Approve Select2 init failed', err);
                    }
                }
            });
        }

        function openApproveModal(d) {
            currentApproveUrl = d.approve_url;
            currentSubmissionId = d.id;
            clearFieldErrors('approve_');
            setAlert($('#reg-approve-alert'), '', '');
            var roleLabel = d.role_name && d.role_name !== '—' ? d.role_name : '';
            $('#reg-approve-applicant').html(
                '<strong>' + escapeHtml(d.full_name) + '</strong><br>' +
                escapeHtml(d.email) +
                (roleLabel ? ' · <strong>Role:</strong> ' + escapeHtml(roleLabel) : '') +
                ' · ' + escapeHtml(d.department_name) +
                (d.district_name && d.district_name !== '—' ? ' · ' + escapeHtml(d.district_name) : '')
            );
            destroyApproveSelect2($('#approve_permission_id'));
            destroyApproveSelect2($('#approve_designation_id'));
            destroyApproveSelect2($('#approve_section_id'));
            $('#reg-approve-form')[0].reset();
            populateDesignationOptions(d.role_id);
            $('#approve_permission_id, #approve_section_id').val('');
            toggleSection(!!d.is_pnd_role || d.is_pnd === 1 || d.is_pnd === '1' || d.is_pnd === true);
            showReviewModal($('#regApproveModal'));
        }

        function openRejectModal(d) {
            currentRejectUrl = d.reject_url;
            currentSubmissionId = d.id;
            clearFieldErrors('rejection_');
            setAlert($('#reg-reject-alert'), '', '');
            $('#rejection_reason').val('');
            $('#reg-reject-applicant').html(
                '<strong>' + escapeHtml(d.full_name) + '</strong><br>' + escapeHtml(d.email)
            );
            showReviewModal($('#regRejectModal'));
        }

        function submissionPayloadFromRow($row) {
            return {
                id: $row.data('submission-id'),
                full_name: $row.data('full-name'),
                email: $row.data('email'),
                department_name: $row.data('department'),
                district_name: $row.data('district'),
                role_id: $row.data('role-id'),
                role_name: $row.data('role-name'),
                is_pnd: $row.data('is-pnd'),
                approve_url: $row.data('approve-url'),
                reject_url: $row.data('reject-url')
            };
        }

        $(document).on('click', '.btn-list-approve', function (e) {
            e.preventDefault();
            e.stopPropagation();
            openApproveModal(submissionPayloadFromRow($(this).closest('tr')));
        });

        $(document).on('click', '.btn-list-reject', function (e) {
            e.preventDefault();
            e.stopPropagation();
            openRejectModal(submissionPayloadFromRow($(this).closest('tr')));
        });

        $(document).on('click', '#btn-top-notify-recipients', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var url = $(this).data('recipients-url');
            var $body = $('#reg-notify-recipients-body');
            $body.html('<div class="text-center text-muted py-4" role="status"><div class="spinner-border spinner-border-sm text-primary mb-2"></div><div>Loading recipients…</div></div>');
            showReviewModal($('#regNotifyRecipientsModal'));

            $.getJSON(url)
                .done(function (res) {
                    if (!res || res.status !== 200 || !res.data) {
                        $body.html('<div class="reg-notify-empty" role="alert">Failed to load recipients.</div>');
                        return;
                    }
                    var recipients = res.data.recipients || [];
                    if (!recipients.length) {
                        $body.html('<div class="reg-notify-empty" role="status"><i class="fas fa-user-slash mb-2 d-block" style="font-size:1.5rem;color:#94a3b8;"></i>No role admins configured yet. Set <strong>Authority Level = Superadmin</strong> on users to receive alerts.</div>');
                        return;
                    }
                    var html = '<div class="reg-notify-list">';
                    recipients.forEach(function (r) {
                        var username = (r.user_name || '').toString().trim();
                        html += '<div class="reg-notify-row">' +
                            '<div class="reg-notify-row__main">' +
                            '<div class="reg-notify-row__name">' + escapeHtml(r.name || '—') + '</div>' +
                            '<div class="reg-notify-row__email">' + escapeHtml(r.email || '—') + '</div>';
                        if (username) {
                            html += '<div class="reg-notify-row__meta"><span><strong>Username:</strong> ' + escapeHtml(username) + '</span></div>';
                        }
                        html += '</div>' +
                            '<div class="reg-notify-row__role">' +
                            '<span class="reg-notify-row__role-label">Role</span>' +
                            '<span class="reg-list-badge reg-list-badge--charge">' + escapeHtml(r.role_name || '—') + '</span>' +
                            '</div>' +
                            '</div>';
                    });
                    html += '</div>';
                    html += '<p class="reg-notify-count">' + recipients.length + ' recipient' + (recipients.length === 1 ? '' : 's') + '</p>';
                    $body.html(html);
                })
                .fail(function (xhr) {
                    var msg = 'Failed to load recipients.';
                    if (xhr && xhr.status === 403) msg = 'You do not have permission to view recipients.';
                    $body.html('<div class="reg-notify-empty text-danger" role="alert">' + msg + '</div>');
                });
        });

        function updateRowStatus(id, status, label) {
            var $row = $('tr[data-submission-id="' + id + '"]');
            if (!$row.length) return;
            var cls = 'reg-list-badge--pending';
            if (status === 'approved') cls = 'reg-list-badge--approved';
            if (status === 'rejected') cls = 'reg-list-badge--rejected';
            $row.find('.reg-row-status')
                .attr('class', 'reg-list-badge ' + cls + ' reg-row-status')
                .text(label || status);
            if (status === 'approved' || status === 'rejected') {
                $row.find('.reg-row-actions-cell').html('<span class="reg-list-muted">—</span>');
            }
        }

        function setButtonLoading($btn, loading, html) {
            if (loading) {
                $btn.prop('disabled', true).data('html', $btn.html())
                    .html('<span class="reg-review-spinner"></span>' + html);
            } else {
                $btn.prop('disabled', false).html($btn.data('html') || html);
            }
        }

        $('#reg-approve-form').on('submit', function (e) {
            e.preventDefault();
            clearFieldErrors('approve_');
            setAlert($('#reg-approve-alert'), 'info', 'Creating user account and sending approval email…');

            var $btn = $('#reg-approve-submit');
            setButtonLoading($btn, true, 'Approving…');

            var payload = {
                permission_id: $('#approve_permission_id').val(),
                designation_id: $('#approve_designation_id').val(),
                section_id: $('#approve_section_id').val() || null,
                _token: $('meta[name="csrf-token"]').attr('content')
            };

            $.ajax({
                url: currentApproveUrl,
                method: 'POST',
                data: payload,
                dataType: 'json'
            }).done(function (res) {
                if (!res || !res.success) {
                    setButtonLoading($btn, false);
                    showApproveError((res && res.message) || 'Approval failed.', res && res.errors);
                    return;
                }
                setAlert($('#reg-approve-alert'), 'success', res.message || 'Approved successfully.');
                updateRowStatus(currentSubmissionId, res.data.status, res.data.status_label);
                setTimeout(function () {
                    $('#regApproveModal').modal('hide');
                    setButtonLoading($btn, false);
                    Swal.fire({
                        icon: 'success',
                        title: 'Approved',
                        text: res.message,
                        confirmButtonColor: '#069494'
                    });
                }, 600);
            }).fail(function (xhr) {
                var res = xhr.responseJSON || {};
                setButtonLoading($btn, false);
                showApproveError(res.message || 'Failed to approve registration.', res.errors);
            });
        });

        $('#reg-reject-form').on('submit', function (e) {
            e.preventDefault();
            clearFieldErrors('rejection_');
            var reason = ($('#rejection_reason').val() || '').trim();
            if (reason.length < 10) {
                $('#err_rejection_reason').text('Rejection reason must be at least 10 characters.');
                setAlert($('#reg-reject-alert'), 'error', 'Please provide a valid rejection reason.');
                return;
            }

            setAlert($('#reg-reject-alert'), 'info', 'Rejecting registration…');
            var $btn = $('#reg-reject-submit');
            setButtonLoading($btn, true, 'Rejecting…');

            $.ajax({
                url: currentRejectUrl,
                method: 'POST',
                data: {
                    rejection_reason: reason,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json'
            }).done(function (res) {
                if (!res || !res.success) {
                    setAlert($('#reg-reject-alert'), 'error', (res && res.message) || 'Rejection failed.');
                    setButtonLoading($btn, false);
                    return;
                }
                setAlert($('#reg-reject-alert'), 'success', res.message || 'Rejected successfully.');
                updateRowStatus(currentSubmissionId, res.data.status, res.data.status_label);
                setTimeout(function () {
                    $('#regRejectModal').modal('hide');
                    setButtonLoading($btn, false);
                    Swal.fire({
                        icon: 'info',
                        title: 'Rejected',
                        text: res.message,
                        confirmButtonColor: '#069494'
                    });
                }, 600);
            }).fail(function (xhr) {
                var res = xhr.responseJSON || {};
                setAlert($('#reg-reject-alert'), 'error', res.message || 'Failed to reject registration.');
                showFieldErrors(res.errors, { rejection_reason: 'err_rejection_reason' });
                setButtonLoading($btn, false);
            });
        });

        $(document).on('click', '.details-modal-trigger', function(e) {
            e.preventDefault();
            var $t = $(this);
            if ($t.data('modal-id') !== 'registrationSubmissionDetailsModal') return;

            var detailsUrl = $t.data('details-url');
            var name = $t.data('entity-name') || 'Registration';
            var deleteUrl = $t.data('delete-url');
            var $body = $('#registrationSubmissionDetailsModal-body');
            var $actions = $('#reg-submission-modal-actions');
            $('#registrationSubmissionDetailsModalLabel').text(name);
            $body.html('<div class="text-center text-muted py-5" role="status"><div class="spinner-border spinner-border-sm text-primary mb-2" role="status"></div><div>Loading details…</div></div>');
            $actions.empty();
            $('#registrationSubmissionDetailsModal').modal('show');

            $.getJSON(detailsUrl)
                .done(function(res) {
                    if (!res || res.status !== 200 || !res.data) {
                        $body.html('<div class="text-center text-danger py-4" role="alert"><i class="fas fa-exclamation-circle mb-2"></i><div>Failed to load details.</div></div>');
                        return;
                    }
                    var d = res.data;
                    var html = '<table class="table table-sm table-bordered mb-0 reg-detail-table"><tbody>';

                    html += sectionRow('Review Status');
                    html += fieldRow('Status', statusBadge(d.status, d.status_label));
                    if (d.reviewed_at) html += fieldRow('Reviewed At', textCell(d.reviewed_at));
                    if (d.reviewed_by_name) html += fieldRow('Reviewed By', textCell(d.reviewed_by_name));
                    if (d.status === 'rejected' && d.rejection_reason) {
                        html += fieldRow('Rejection Reason', textCell(d.rejection_reason));
                    }
                    if (d.status === 'approved' && d.user_email) {
                        html += fieldRow('Linked User', textCell(d.user_name + ' (' + d.user_email + ')'));
                    }

                    html += sectionRow('Personal Information');
                    html += fieldRow('Full Name', textCell(d.full_name));
                    html += fieldRow('Father/Husband Name', textCell(d.father_husband_name));
                    html += fieldRow('CNIC', textCell(d.cnic));
                    html += fieldRow('Gender', textCell(d.gender));
                    html += fieldRow('Date of Birth', textCell(d.date_of_birth));

                    html += sectionRow('Professional Details');
                    html += fieldRow('Role', textCell(d.role_name));
                    html += fieldRow('Administrative Department', textCell(d.department_name));
                    html += fieldRow('Attached Dept. / Wing / Office', textCell(d.attached_dept_wing_office));
                    html += fieldRow('Substantive Designation', textCell(d.substantive_designation));
                    html += fieldRow('Current BPS', textCell(d.current_bps));
                    html += fieldRow('Charge Type', textCell(d.charge_type));
                    html += fieldRow('Current Posting as', textCell(d.current_posting_as));
                    html += fieldRow('Date of Joining', textCell(d.date_of_joining_current_posting));
                    html += fieldRow('Supervisory Officer', textCell(d.supervisory_officer_name));
                    html += fieldRow('Supervisory Designation', textCell(d.supervisory_officer_designation));
                    html += fieldRow('Supervisory Location', textCell(d.supervisory_officer_posting_location));
                    html += fieldRow('Supervisory Contact', textCell(d.supervisory_officer_contact));

                    html += sectionRow('Contact Information');
                    html += fieldRow('Official Address', textCell(d.official_address));
                    html += fieldRow('District', textCell(d.district_name));
                    html += fieldRow('Official Contact', textCell(d.official_contact));
                    html += fieldRow('WhatsApp No.', textCell(d.whatsapp_no));
                    html += fieldRow('Official Email', textCell(d.email));
                    html += fieldRow('Alternative Contact', textCell(d.alternative_contact));

                    html += sectionRow('Attachments');
                    html += fileFieldRow('Posting Order Attachment', d.posting_order_url, 'order');
                    html += fileFieldRow('Passport Photo / Picture', d.passport_photo_url, 'photo');

                    html += sectionRow('Meta');
                    html += fieldRow('Email Verified At', textCell(d.email_verified_at));
                    html += fieldRow('Submitted At', textCell(d.created_at));
                    html += '</tbody></table>';
                    $body.html(html);

                    var actionsHtml = '';
                    if (d.can_approve) {
                        actionsHtml += '<button type="button" class="btn btn-sm btn-reg-approve mr-1" id="btn-open-approve"><i class="fas fa-check"></i> Approve</button>';
                    }
                    if (d.can_reject) {
                        actionsHtml += '<button type="button" class="btn btn-sm btn-reg-reject mr-1" id="btn-open-reject"><i class="fas fa-times"></i> Reject</button>';
                    }
                    @if (can('registration_submission', 'delete'))
                    if (deleteUrl) {
                        actionsHtml += '<form action="' + escapeHtml(deleteUrl) + '" method="POST" class="d-inline">' +
                            @json(csrf_field() . method_field('DELETE')) +
                            '<button type="submit" class="btn btn-danger btn-sm btn-details-modal-delete"><i class="fas fa-trash"></i> Delete</button></form>';
                    }
                    @endif
                    $actions.html(actionsHtml);

                    $('#btn-open-approve').on('click', function () { openApproveModal(d); });
                    $('#btn-open-reject').on('click', function () { openRejectModal(d); });
                })
                .fail(function(xhr) {
                    var msg = 'Failed to load details.';
                    if (xhr && xhr.status === 404) msg = 'Registration not found.';
                    if (xhr && xhr.status === 403) msg = 'You do not have permission to view this registration.';
                    $body.html('<div class="text-center text-danger py-4" role="alert"><i class="fas fa-exclamation-triangle mb-2"></i><div>' + msg + '</div></div>');
                });
        });
    });
</script>
@endpush