@extends('layouts.app')
@php
    $ownProfileEdit = (bool) ($ownProfileEdit ?? false);
    $adminFieldsReadonly = $ownProfileEdit;
@endphp
@section('title', $ownProfileEdit ? 'My profile' : ((isset($user) && is_object($user)) ? 'Edit User' : 'Create User'))

@push('stylesheets')
<!-- Select2 -->
<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') }}">
@if (! $ownProfileEdit)
@include('shared.schemes-listing.assignment.styles')
@endif
<style>
    .profile-image-container {
        text-align: center;
        padding: 20px;
    }
    .profile-image-placeholder {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #e9ecef;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        border: 2px solid #dee2e6;
    }
    .profile-image-placeholder i {
        font-size: 50px;
        color: #6c757d;
    }
    .profile-image-preview {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto 20px;
        display: block;
        border: 2px solid #dee2e6;
    }
    .image-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-top: 10px;
    }
    .image-requirements {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 15px;
        text-align: center;
    }
    .signature-preview {
        max-width: 100%;
        max-height: 120px;
        object-fit: contain;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        background: #fff;
    }
    .signature-placeholder {
        min-height: 100px;
        border: 2px dashed #dee2e6;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        color: #6c757d;
    }
    .user-drawn-sig-wrap {
        border: 1px solid #dee2e6;
        border-radius: 6px;
        background: #f8f9fa;
        padding: 10px;
    }
    .user-drawn-sig-wrap canvas#userCrudDrawnCanvas {
        display: block;
        width: 100%;
        height: 180px;
        touch-action: none;
        cursor: crosshair;
        background: #fff;
        border: 1px dashed #adb5bd;
        border-radius: 4px;
    }
    .user-drawn-sig-preview {
        max-width: 100%;
        max-height: 100px;
        object-fit: contain;
        border: 1px solid #dee2e6;
        background: #fff;
        border-radius: 4px;
    }
    .extra-membership-card.is-invalid-card {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.15);
    }
    #userFormClientErrors ul {
        margin-bottom: 0;
    }
</style>
@endpush

@section('contents')
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <form action="{{ $ownProfileEdit ? route('profile.update') : ((isset($user) && is_object($user)) ? route('users.update', $user->id) : route('users.store')) }}" method="POST" enctype="multipart/form-data" id="userForm" novalidate>
                @csrf
                @if ($ownProfileEdit || (isset($user) && is_object($user)))
                    @method('PUT')
                @endif
                <div id="userFormClientErrors" class="alert alert-warning d-none" role="alert">
                    <strong>Please fix the following before saving:</strong>
                    <ul class="mb-0 mt-2"></ul>
                </div>
                @if ($errors->any())
                    <div class="alert alert-danger" id="userFormServerErrors">
                        <strong>Could not save user.</strong>
                        <ul class="mb-0 mt-2">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    <script>
                        document.addEventListener('DOMContentLoaded', function () {
                            var el = document.getElementById('userFormServerErrors');
                            if (el && typeof el.scrollIntoView === 'function') {
                                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            }
                            if (typeof window.resetUserSubmitButton === 'function') {
                                window.resetUserSubmitButton();
                            }
                        });
                    </script>
                @endif
                <div class="row">
                    <!-- left column -->
                    <div class="col-md-8">
                        <div class="card card-info">
                            <div class="card-header">
                                <h3 class="card-title">{{ $ownProfileEdit ? 'My profile' : ((isset($user) && is_object($user)) ? 'Edit User' : 'Add User') }}</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <x-form.text-input 
                                            label="Name" 
                                            name="name" 
                                            class="form-control" 
                                            :value="$user?->name ?? old('name')" 
                                            :required="true" />
                                    </div>
                                    <div class="col-md-6">
                                        <x-form.text-input 
                                            label="User Name" 
                                            name="user_name" 
                                            class="form-control" 
                                            :value="$user?->user_name ?? old('user_name')" 
                                            :required="$ownProfileEdit" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <x-form.text-input 
                                            label="Email" 
                                            name="email" 
                                            type="email"
                                            class="form-control" 
                                            :value="$user?->email ?? old('email')" 
                                            :required="true" />
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.text-input 
                                            label="Phone" 
                                            name="phone" 
                                            class="form-control" 
                                            :value="$user?->phone ?? old('phone')" 
                                            :required="! $ownProfileEdit" />
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.password-input 
                                            label="Password" 
                                            name="password" 
                                            class="form-control" 
                                            :required="! isset($user) && ! $ownProfileEdit"
                                            placeholder="{{ (isset($user) || $ownProfileEdit) ? 'Leave blank to keep current password' : 'Enter password' }}" />
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.select
                                            label="User Status"
                                            name="status"
                                            :options="['1' => 'Active', '0' => 'Inactive']"
                                            :selected="old('status', $user?->status ?? '1')"
                                            :required="false"
                                            :disabled="$adminFieldsReadonly"
                                        />
                                    </div>
                                </div>
                                @if ($ownProfileEdit)
                                <div class="row">
                                    <div class="col-md-6">
                                        <x-form.password-input 
                                            label="Confirm password" 
                                            name="password_confirmation" 
                                            class="form-control" 
                                            :required="false"
                                            placeholder="Re-enter if changing password" />
                                    </div>
                                    <div class="col-md-6 d-flex align-items-end">
                                        <div class="form-group mb-0 w-100">
                                            <label class="d-block">T-Pin</label>
                                            <a href="{{ route('t-pin.manage') }}" class="btn btn-outline-secondary btn-sm">
                                                <i class="fas fa-key"></i> Create / Renew T-Pin
                                            </a>
                                            <small class="form-text text-muted">4-digit PIN for login and/or signatures when enabled by admin.</small>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                @php
                                    $lockUserRole = (bool) ($lockUserRoleSelect ?? false);
                                    $lockedRoleValue = old('role_id', $user?->role_id ?? $defaultRoleId ?? auth()->user()?->role_id ?? '');
                                    $roleSelectSelected = ($lockUserRole && ! $adminFieldsReadonly)
                                        ? $lockedRoleValue
                                        : old('role_id', $user?->role_id ?? '');
                                @endphp
                                <div class="card card-primary card-outline mt-4">
                                    <div class="card-header border-bottom-0">
                                        <h3 class="card-title font-weight-bold">Workspace 1 (Primary)</h3>
                                    </div>
                                    <div class="card-body bg-light rounded pb-2">
                                        <div class="row">
                                            <div class="col-md-3">
                                                @if ($adminFieldsReadonly)
                                                    <x-form.select label="Role" name="" id="role_id" :options="$roles ?? []" :selected="$roleSelectSelected" :required="false" class="select2" :disabled="true" />
                                                @elseif ($lockUserRole)
                                                    <input type="hidden" name="role_id" value="{{ $lockedRoleValue }}" />
                                                    <x-form.select label="Role" name="" id="role_id" :options="$roles ?? []" :selected="$roleSelectSelected" :required="true" class="select2" :disabled="true" />
                                                @else
                                                    <x-form.select label="Role" name="role_id" id="role_id" :options="$roles ?? []" :selected="$roleSelectSelected" :required="true" class="select2" />
                                                @endif
                                            </div>
                                            <div class="col-md-3">
                                                <x-form.select label="Permission" name="permission_id" :options="$permissions ?? []" :selected="$user?->permission_id ?? old('permission_id')" :required="! $adminFieldsReadonly" class="select2" :disabled="$adminFieldsReadonly" />
                                            </div>
                                            <div class="col-md-3">
                                                <x-form.select label="Designation" name="designation_id" :options="$designations ?? []" :selected="$user?->designation_id ?? old('designation_id')" :required="! $adminFieldsReadonly" class="select2" :disabled="$adminFieldsReadonly" />
                                            </div>
                                            <div class="col-md-3">
                                                <x-form.select label="Authority Level" name="authority_level" :options="array_merge(['' => 'None'], \App\Models\PC\User::AUTHORITY_LEVEL_LABELS)" :selected="old('authority_level', $user?->authority_level ?? '')" :required="false" :disabled="$adminFieldsReadonly" />
                                            </div>
                                        </div>

                                @php
                                    $primaryScope = is_array($primaryFormScope ?? null) ? $primaryFormScope : [];
                                @endphp
                                <div class="row">
                                    <div class="col-md-12" id="user-departments-wrap">
                                        <x-form.multi-select
                                            label="Departments"
                                            name="department_ids"
                                            :options="$departmentOptions ?? []"
                                            :selected="old('department_ids', $primaryScope['department_ids'] ?? ($user?->user_departments?->pluck('department_id')->toArray() ?? []))"
                                            placeholder="Select one or more departments"
                                            :required="false"
                                            :disabled="$adminFieldsReadonly"
                                        />
                                    </div>
                                    <div class="col-md-12" id="user-section-wrap" style="display: none;">
                                        <x-form.select
                                            label="Section"
                                            name="section_id"
                                            :options="$sectionOptions ?? []"
                                            :selected="old('section_id', $user?->section_id ?? '')"
                                            placeholder="Select section"
                                            class="select2"
                                            :required="false"
                                            :disabled="$adminFieldsReadonly"
                                        />
                                    </div>
                                </div>
                                @include('shared.scheme-assignment.filters', [
                                    'prefix' => 'user',
                                    'filtersVisible' => false,
                                    'subDepartmentSelected' => old('sub_department_ids', $primaryScope['sub_department_ids'] ?? ($user?->userSubDepartments?->pluck('sub_department_id')->toArray() ?? [])),
                                    'coreSectorSelected' => old('core_sector_ids', $primaryScope['core_sector_ids'] ?? ($user?->userCoreSectors?->pluck('sector_id')->toArray() ?? [])),
                                    'coreSubSectorSelected' => old('core_sub_sector_ids', $primaryScope['core_sub_sector_ids'] ?? ($user?->userCoreSubSectors?->pluck('sub_sector_id')->toArray() ?? [])),
                                    'blkSelected' => old('blk_ids', $primaryScope['blk_ids'] ?? ($user?->userBlks?->pluck('blk_id')->toArray() ?? [])),
                                    'disabled' => $adminFieldsReadonly,
                                ])
                                <div class="row" id="user-mec-master-wrap" style="display: none;">
                                    <div class="col-md-12">
                                        <x-form.multi-select
                                            label="Regions"
                                            name="mec_region_ids"
                                            :options="$mecRegionOptions ?? []"
                                            :selected="old('mec_region_ids', $primaryScope['mec_region_ids'] ?? ($user?->userMecRegions?->pluck('id')->toArray() ?? []))"
                                            placeholder="Select one or more MEC regions"
                                            :disabled="$adminFieldsReadonly"
                                        />
                                    </div>
                                    <div class="col-md-6">
                                        <x-form.multi-select
                                            label="Sectors"
                                            name="sector_ids"
                                            :options="$sectorOptions ?? []"
                                            :selected="old('sector_ids', $primaryScope['sector_ids'] ?? ($user?->userMecSectors?->pluck('id')->toArray() ?? []))"
                                            placeholder="Select one or more sectors"
                                            :disabled="$adminFieldsReadonly"
                                        />
                                    </div>
                                    <div class="col-md-6">
                                        <x-form.multi-select
                                            label="Sub sectors"
                                            name="mec_sub_sector_ids"
                                            :options="[]"
                                            :selected="old('mec_sub_sector_ids', $primaryScope['mec_sub_sector_ids'] ?? ($user?->userMecSubSectors?->pluck('id')->toArray() ?? []))"
                                            placeholder="Select sectors first, then sub sectors"
                                            :disabled="$adminFieldsReadonly"
                                        />
                                    </div>
                                </div>
                                    </div> <!-- end workspace 1 card body -->
                                </div> <!-- end workspace 1 card -->

                                @unless ($adminFieldsReadonly)
                                <div class="mt-4 mb-3 d-flex justify-content-between align-items-center border-bottom pb-2">
                                    <h5 class="m-0 font-weight-bold text-secondary">Additional Workspaces</h5>
                                    <button type="button" class="btn btn-sm btn-success" id="add-extra-membership-btn">
                                        <i class="fas fa-plus mr-1"></i> Add Workspace
                                    </button>
                                </div>
                                <div id="extra-memberships-wrap"></div>
                                @endunless

                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer text-right">
                                @if ($ownProfileEdit)
                                    <a href="{{ route('dashboard') }}" class="btn btn-default float-left">
                                        <i class="fa-solid fa-arrow-left"></i> Back
                                    </a>
                                @endif
                                <button class="btn btn-default" type="reset" @if($ownProfileEdit) style="display:none" @endif>
                                    <i class="fa-solid fa-arrows-rotate"></i> Reset
                                </button>
                                <button type="submit" id="userSubmitBtn" class="btn btn-info" data-loading-text="{{ $ownProfileEdit ? 'Saving...' : ((isset($user) && is_object($user)) ? 'Updating...' : 'Saving...') }}">
                                    <i class="fa-solid fa-floppy-disk"></i> <span class="btn-text">{{ $ownProfileEdit ? 'Save changes' : ((isset($user) && is_object($user)) ? 'Update' : 'Save') }}</span>
                                </button>
                            </div>
                            <!-- /.card-footer -->
                        </div>
                    </div>
                    <!--/.col (left) -->
                    <!-- right column -->
                    <div class="col-md-4">
                        @php
                            $hasSigUpload = isset($user) && is_object($user) && trim((string) ($user->signature_image ?? '')) !== '';
                            $hasSigDrawn = isset($user) && is_object($user) && trim((string) ($user->signature ?? '')) !== '';
                            $oldSigMode = old('signature_input_mode');
                            if ($oldSigMode === 'attachment' || $oldSigMode === 'draw') {
                                $defaultSignatureInputMode = $oldSigMode;
                            } elseif ($hasSigDrawn && ! $hasSigUpload) {
                                $defaultSignatureInputMode = 'draw';
                            } else {
                                $defaultSignatureInputMode = 'attachment';
                            }
                        @endphp
                        <div class="card card-info">
                            <div class="card-header">
                                <h3 class="card-title">Profile Image</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <div class="profile-image-container">
                                    @if(isset($user) && $user->image)
                                        <img src="{{ user_profile_image_url($user->image) }}" 
                                             alt="Profile Picture" 
                                             class="profile-image-preview" 
                                             id="profileImagePreview">
                                        <input type="hidden" name="delete_image" id="deleteImage" value="">
                                    @else
                                        <div class="profile-image-placeholder" id="profileImagePlaceholder">
                                            <i class="fas fa-user"></i>
                                        </div>
                                        <img src="" alt="Profile Picture" class="profile-image-preview" id="profileImagePreview" style="display: none;">
                                    @endif
                                    
                                    <div class="image-actions">
                                        <button type="button" class="btn btn-primary btn-sm" onclick="document.getElementById('imageInput').click()">
                                            <i class="fas fa-cloud-upload-alt"></i> Upload
                                        </button>
                                        @if(isset($user) && $user->image)
                                            <button type="button" class="btn btn-danger btn-sm" onclick="clearImage()">
                                                <i class="fas fa-trash"></i> Clear
                                            </button>
                                        @endif
                                    </div>
                                    
                                    <input type="file" 
                                           name="image_file" 
                                           id="imageInput" 
                                           accept="image/*" 
                                           style="display: none;"
                                           onchange="handleImageSelect(event)">
                                    <div class="image-requirements">
                                        PNG, JPG, GIF up to 5MB. Recommended: 300x300px.
                                    </div>
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <div class="card card-info mt-3">
                            <div class="card-header">
                                <h3 class="card-title">Signature method</h3>
                            </div>
                            <div class="card-body py-3">
                                <div class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" name="signature_input_mode" id="sigInputModeAttachment" value="attachment" {{ $defaultSignatureInputMode === 'attachment' ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="sigInputModeAttachment">Upload Signature Image</label>
                                </div>
                                <div class="custom-control custom-radio mt-2">
                                    <input type="radio" class="custom-control-input" name="signature_input_mode" id="sigInputModeDraw" value="draw" {{ $defaultSignatureInputMode === 'draw' ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="sigInputModeDraw">Draw Signature</label>
                                </div>
                            </div>
                        </div>
                        <div id="userSigAttachmentBlock" class="{{ $defaultSignatureInputMode === 'draw' ? 'd-none' : '' }}">
                        <div class="card card-info mt-3">
                            <div class="card-header">
                                <h3 class="card-title">Signature Image</h3>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <div class="signature-placeholder mb-2" id="signaturePlaceholder" style="{{ (isset($user) && $user->signature_image) ? 'display: none;' : '' }}">
                                        <span>No signature</span>
                                    </div>
                                    <img src="{{ (isset($user) && $user->signature_image) ? (\Illuminate\Support\Str::startsWith($user->signature_image ?? '', 'data:') ? $user->signature_image : asset('uploads/' . $user->signature_image)) : '' }}"
                                         alt="Signature"
                                         class="signature-preview mb-2"
                                         id="signatureImagePreview"
                                         style="{{ (isset($user) && $user->signature_image) ? '' : 'display: none;' }}">
                                    <input type="hidden" name="delete_signature_image" id="deleteSignatureImage" value="">
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-primary btn-sm" onclick="document.getElementById('signatureInput').click()">
                                            <i class="fas fa-file-image"></i> Choose File
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm" id="clearSignatureBtn" onclick="clearSignature()" style="{{ (isset($user) && $user->signature_image) ? '' : 'display: none;' }}">
                                            <i class="fas fa-trash"></i> Clear
                                        </button>
                                    </div>
                                    <input type="file"
                                           name="signature_file"
                                           id="signatureInput"
                                           accept="image/*"
                                           style="display: none;"
                                           onchange="handleSignatureSelect(event)">
                                    <div class="image-requirements mt-2">
                                        PNG, JPG, GIF. Max 2MB.
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                        <div id="userSigDrawBlock" class="{{ $defaultSignatureInputMode === 'draw' ? '' : 'd-none' }}">
                        <div class="card card-secondary mt-3">
                            <div class="card-header">
                                <h3 class="card-title">Drawn signature (canvas)</h3>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small">Mouse or touch only — no file upload for this block. Saved as PNG in storage and linked on the user record (separate from the file-based signature above).</p>
                                <input type="hidden" name="signature_drawn_data" id="signature_drawn_data" value="">
                                <input type="hidden" name="delete_drawn_signature" id="delete_drawn_signature" value="">
                                @php
                                    $drawnSigUrl = isset($user) && is_object($user) ? user_drawn_signature_url($user->signature ?? null) : '';
                                @endphp
                                <div class="mb-2" id="userDrawnSigPreviewWrap" style="{{ $drawnSigUrl !== '' ? '' : 'display:none;' }}">
                                    <span class="d-block small text-muted mb-1">Current drawn signature</span>
                                    <img src="{{ $drawnSigUrl }}" alt="Drawn signature" class="user-drawn-sig-preview" id="userDrawnSigPreviewImg">
                                </div>
                                <div class="user-drawn-sig-wrap mb-2">
                                    <canvas id="userCrudDrawnCanvas" width="520" height="180" aria-label="Draw signature"></canvas>
                                </div>
                                <div class="d-flex flex-wrap gap-2">
                                    <button type="button" class="btn btn-outline-secondary btn-sm" id="userCrudDrawnClearBtn">Clear pad</button>
                                    <button type="button" class="btn btn-outline-danger btn-sm" id="userCrudDrawnRemoveSavedBtn" style="{{ $drawnSigUrl !== '' ? '' : 'display:none;' }}">Remove saved drawing</button>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    <!--/.col (right) -->
                </div>
                @if (! $ownProfileEdit)
                @include('users.partials.scheme-assignment-table', [
                    'assignmentVisible' => false,
                ])
                @endif
            </form>
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection

@push('scripts')
<script>
    (function() {
        var form = document.getElementById('userForm');
        var btn = document.getElementById('userSubmitBtn');
        if (form && btn) {
            var textSpan = btn.querySelector('.btn-text');
            if (textSpan && !btn.getAttribute('data-original-text')) {
                btn.setAttribute('data-original-text', textSpan.textContent.trim());
            }
            window.resetUserSubmitButton = function () {
                btn.disabled = false;
                var label = btn.getAttribute('data-original-text') || 'Update';
                var span = btn.querySelector('.btn-text');
                if (span) {
                    span.textContent = label;
                }
                btn.querySelectorAll('.spinner-border').forEach(function (el) {
                    el.remove();
                });
            };
            window.setUserSubmitLoading = function () {
                if (btn.disabled) {
                    return;
                }
                btn.disabled = true;
                var span = btn.querySelector('.btn-text');
                var loadingText = btn.getAttribute('data-loading-text') || 'Saving...';
                if (span) {
                    span.textContent = loadingText;
                }
                if (!btn.querySelector('.spinner-border')) {
                    btn.insertAdjacentHTML('beforeend', ' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
                }
            };
            // Back/forward cache can restore a stuck "Updating..." button.
            window.addEventListener('pageshow', function () {
                window.resetUserSubmitButton();
            });
            form.addEventListener('submit', function () {
                var modeRadio = document.querySelector('input[name="signature_input_mode"]:checked');
                var sigMode = (modeRadio && modeRadio.value === 'draw') ? 'draw' : 'attachment';
                if (sigMode === 'draw') {
                    var fileInp = document.getElementById('signatureInput');
                    if (fileInp) fileInp.value = '';
                } else {
                    var drawnHidden = document.getElementById('signature_drawn_data');
                    if (drawnHidden) drawnHidden.value = '';
                }
                if (typeof window.userCrudSyncDrawnSignatureBeforeSubmit === 'function') {
                    window.userCrudSyncDrawnSignatureBeforeSubmit();
                }
                // Loading state is set by memberships submit handler AFTER validation passes.
            });
        } else {
            window.resetUserSubmitButton = function () {};
            window.setUserSubmitLoading = function () {};
        }
    })();
</script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
<script>
(function() {
    var canvas = document.getElementById('userCrudDrawnCanvas');
    if (!canvas || typeof SignaturePad === 'undefined') {
        window.userCrudSyncDrawnSignatureBeforeSubmit = function() {};
        window.userCrudResizeDrawnSignatureCanvas = function() {};
        window.userCrudClearDrawnPadForModeSwitch = function() {};
        return;
    }
    var hiddenData = document.getElementById('signature_drawn_data');
    var hiddenDelete = document.getElementById('delete_drawn_signature');
    var previewWrap = document.getElementById('userDrawnSigPreviewWrap');
    var previewImg = document.getElementById('userDrawnSigPreviewImg');
    var removeSavedBtn = document.getElementById('userCrudDrawnRemoveSavedBtn');

    function cssWidth() {
        var wrap = canvas.closest('.user-drawn-sig-wrap');
        var w = wrap ? wrap.clientWidth - 20 : canvas.offsetWidth;
        return Math.max(Math.floor(w), 260);
    }
    function resizeCanvas() {
        var ratio = Math.max(window.devicePixelRatio || 1, 1);
        var w = cssWidth();
        var h = 180;
        canvas.width = Math.floor(w * ratio);
        canvas.height = Math.floor(h * ratio);
        var ctx = canvas.getContext('2d');
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.scale(ratio, ratio);
        canvas.style.width = w + 'px';
        canvas.style.height = h + 'px';
    }
    resizeCanvas();
    var pad = new SignaturePad(canvas, {
        minWidth: 0.75,
        maxWidth: 2.4,
        penColor: 'rgb(15, 23, 42)',
        backgroundColor: 'rgba(255,255,255,0)'
    });
    window.userCrudResizeDrawnSignatureCanvas = function() {
        var data = pad.toData();
        resizeCanvas();
        pad.clear();
        if (data && data.length) pad.fromData(data);
    };
    window.addEventListener('resize', function() {
        window.userCrudResizeDrawnSignatureCanvas();
    });
    window.requestAnimationFrame(function() {
        window.userCrudResizeDrawnSignatureCanvas();
    });

    document.getElementById('userCrudDrawnClearBtn').addEventListener('click', function() {
        pad.clear();
        if (hiddenData) hiddenData.value = '';
    });
    if (removeSavedBtn) {
        removeSavedBtn.addEventListener('click', function() {
            pad.clear();
            if (hiddenData) hiddenData.value = '';
            if (hiddenDelete) hiddenDelete.value = @json(isset($user) && is_object($user) ? ($user->signature ?? '') : '');
            if (previewWrap) previewWrap.style.display = 'none';
            if (previewImg) previewImg.src = '';
            removeSavedBtn.style.display = 'none';
        });
    }

    window.userCrudClearDrawnPadForModeSwitch = function() {
        pad.clear();
        if (hiddenData) hiddenData.value = '';
    };

    window.userCrudSyncDrawnSignatureBeforeSubmit = function() {
        if (!hiddenData) return;
        var modeRadio = document.querySelector('input[name="signature_input_mode"]:checked');
        var mode = (modeRadio && modeRadio.value === 'draw') ? 'draw' : 'attachment';
        hiddenData.value = '';
        if (mode !== 'draw') {
            return;
        }
        if (!pad.isEmpty()) {
            hiddenData.value = pad.toDataURL('image/png');
        }
    };
})();
</script>
<script>
(function() {
    function currentSigInputMode() {
        var el = document.querySelector('input[name="signature_input_mode"]:checked');
        return el && el.value === 'draw' ? 'draw' : 'attachment';
    }
    function applyUserSignatureInputMode(mode) {
        var att = document.getElementById('userSigAttachmentBlock');
        var drw = document.getElementById('userSigDrawBlock');
        if (!att || !drw) return;
        if (mode === 'draw') {
            att.classList.add('d-none');
            drw.classList.remove('d-none');
            if (typeof window.userCrudResizeDrawnSignatureCanvas === 'function') {
                window.requestAnimationFrame(function() {
                    window.userCrudResizeDrawnSignatureCanvas();
                });
            }
        } else {
            drw.classList.add('d-none');
            att.classList.remove('d-none');
        }
    }
    function onSigModeChange(mode) {
        if (mode === 'draw') {
            var fi = document.getElementById('signatureInput');
            if (fi) fi.value = '';
        } else if (typeof window.userCrudClearDrawnPadForModeSwitch === 'function') {
            window.userCrudClearDrawnPadForModeSwitch();
        } else {
            var h = document.getElementById('signature_drawn_data');
            if (h) h.value = '';
        }
        applyUserSignatureInputMode(mode);
    }
    document.querySelectorAll('input[name="signature_input_mode"]').forEach(function(r) {
        r.addEventListener('change', function() {
            onSigModeChange(currentSigInputMode());
        });
    });
})();
</script>
<!-- Select2 (user form: admin geo/role UI + read-only profile mirror) -->
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<script>
    var mecSubSectorsBySector = @json($mecSubSectorsBySector ?? []);
    var initialMecSubSectorIds = @json(old('mec_sub_sector_ids', ($primaryFormScope['mec_sub_sector_ids'] ?? null) ?: ($user?->userMecSubSectors?->pluck('id')->toArray() ?? [])));
    var mecSubInitialPending = true;

    function multiSelectValAsArray($el) {
        var raw = $el.val();
        if (raw == null || raw === '') {
            return [];
        }
        return Array.isArray(raw) ? raw : [raw];
    }

    function buildMecSubSectorsFromSectors() {
        var selectedSectorIds = multiSelectValAsArray($('#sector_ids'));
        var subMap = {};
        selectedSectorIds.forEach(function (sid) {
            var key = String(sid);
            var subs = mecSubSectorsBySector[key];
            if (subs == null && mecSubSectorsBySector[sid] != null) {
                subs = mecSubSectorsBySector[sid];
            }
            if (Array.isArray(subs)) {
                subs.forEach(function (sub) {
                    if (sub && sub.id != null) {
                        subMap[String(sub.id)] = sub.name;
                    }
                });
                return;
            }
            if (subs && typeof subs === 'object') {
                Object.keys(subs).forEach(function (subId) {
                    subMap[String(subId)] = subs[subId];
                });
            }
        });

        var $subSelect = $('#mec_sub_sector_ids');
        var prevSubVal = multiSelectValAsArray($subSelect);
        if ($subSelect.hasClass('select2-hidden-accessible')) {
            $subSelect.select2('destroy');
        }
        $subSelect.empty();
        Object.keys(subMap).sort(function (a, b) {
            return String(subMap[a]).localeCompare(String(subMap[b]));
        }).forEach(function (subId) {
            $subSelect.append(new Option(subMap[subId], subId, false, false));
        });

        var keepVal = prevSubVal.filter(function (id) {
            return subMap.hasOwnProperty(String(id));
        });
        if (keepVal.length === 0 && mecSubInitialPending && initialMecSubSectorIds && initialMecSubSectorIds.length) {
            keepVal = initialMecSubSectorIds.filter(function (id) {
                return subMap.hasOwnProperty(String(id));
            });
        }
        mecSubInitialPending = false;
        if (keepVal.length) {
            $subSelect.val(keepVal);
        }
        $subSelect.select2({
            theme: 'bootstrap4',
            width: '100%',
            placeholder: $subSelect.data('placeholder') || 'Select one or more sub sectors',
            allowClear: true,
            closeOnSelect: false
        });
        $subSelect.trigger('change');
    }

    $(document).ready(function() {
        var isOwnProfileEdit = @json($ownProfileEdit);
        var select2Options = {
            theme: 'bootstrap4',
            width: '100%',
            placeholder: function() {
                return $(this).data('placeholder') || '-- Select an option --';
            },
            allowClear: true
        };

        $('.select2').not('#mec_sub_sector_ids, #sub_department_ids, #core_sub_sector_ids').select2(select2Options);
        buildMecSubSectorsFromSectors();

        $('#sector_ids').on('change select2:select select2:unselect', function() {
            buildMecSubSectorsFromSectors();
        });

        var pndRoleId = @json($pndRoleId ?? '');
        var mecRoleId = @json($mecRoleId ?? '');
        var fdRoleId = @json($fdRoleId ?? '');

        function toggleDeptSectionByRole() {
            var roleId = ($('#role_id').val() || '').toString();
            var isPnd = (pndRoleId !== '' && roleId === pndRoleId);
            var isMec = (mecRoleId !== '' && roleId === mecRoleId);
            var isFd = (fdRoleId !== '' && roleId === fdRoleId);
            var $departmentSelect = $('#department_ids');
            var $sectionSelect = $('#section_id');
            var $mecRegion = $('#mec_region_ids');
            var $mecSector = $('#sector_ids');
            var $mecSub = $('#mec_sub_sector_ids');
            var $schemeFilters = $('#user-scheme-filters-wrap');
            var $schemeAssignment = $('#user-scheme-assignment-wrap');
            if (isPnd) {
                $('#user-departments-wrap').hide();
                $('#user-section-wrap').show();
                $('#user-mec-master-wrap').hide();
                $schemeFilters.hide();
                $schemeAssignment.hide();
                if ($departmentSelect.length) {
                    $departmentSelect.prop('required', false);
                }
                if ($sectionSelect.length) {
                    $sectionSelect.prop('required', true);
                }
                if ($mecRegion.length) { $mecRegion.prop('required', false); }
                if ($mecSector.length) { $mecSector.prop('required', false); }
                if ($mecSub.length) { $mecSub.prop('required', false); }
            } else if (isMec) {
                $('#user-departments-wrap').hide();
                $('#user-section-wrap').hide();
                $('#user-mec-master-wrap').show();
                $schemeFilters.hide();
                $schemeAssignment.hide();
                if (typeof buildMecSubSectorsFromSectors === 'function') {
                    mecSubInitialPending = true;
                    setTimeout(function () {
                        buildMecSubSectorsFromSectors();
                    }, 0);
                }
                if ($departmentSelect.length) {
                    $departmentSelect.prop('required', false);
                }
                if ($sectionSelect.length) {
                    $sectionSelect.prop('required', false);
                }
                if ($mecRegion.length) { $mecRegion.prop('required', true); }
                if ($mecSector.length) { $mecSector.prop('required', true); }
                if ($mecSub.length) { $mecSub.prop('required', true); }
            } else if (isFd) {
                $('#user-departments-wrap').hide();
                $('#user-section-wrap').hide();
                $('#user-mec-master-wrap').hide();
                $schemeFilters.hide();
                $schemeAssignment.hide();
                if ($departmentSelect.length) {
                    $departmentSelect.prop('required', false);
                }
                if ($sectionSelect.length) {
                    $sectionSelect.prop('required', false);
                }
                if ($mecRegion.length) { $mecRegion.prop('required', false); }
                if ($mecSector.length) { $mecSector.prop('required', false); }
                if ($mecSub.length) { $mecSub.prop('required', false); }
            } else {
                $('#user-departments-wrap').show();
                $('#user-section-wrap').hide();
                $('#user-mec-master-wrap').hide();
                $schemeFilters.show();
                $schemeAssignment.show();
                if ($departmentSelect.length) {
                    $departmentSelect.prop('required', true);
                }
                if ($sectionSelect.length) {
                    $sectionSelect.prop('required', false);
                }
                if ($mecRegion.length) { $mecRegion.prop('required', false); }
                if ($mecSector.length) { $mecSector.prop('required', false); }
                if ($mecSub.length) { $mecSub.prop('required', false); }
                if (typeof window.userSchemeAssignmentLoadSchemesAfterFilterHydration === 'function') {
                    window.userSchemeAssignmentLoadSchemesAfterFilterHydration();
                } else if (typeof window.userSchemeAssignmentLoadSchemes === 'function') {
                    window.userSchemeAssignmentLoadSchemes(1);
                }
            }
        }

        $('#role_id').on('change', toggleDeptSectionByRole);
        toggleDeptSectionByRole();

        // Keep primary designation options aligned with primary role (same as extra-role cards).
        var allDesignationsByRoleId = @json($designationsByRoleId ?? []);
        function refreshPrimaryDesignations(keepSelected) {
            var roleId = ($('#role_id').val() || '').toString();
            var $desig = $('[name="designation_id"]').not('[name^="memberships"]').first();
            if (!$desig.length) {
                return;
            }
            var current = keepSelected ? ($desig.val() || '') : '';
            var map = allDesignationsByRoleId[roleId] || allDesignationsByRoleId[String(roleId)] || {};
            var html = '<option value=""></option>';
            Object.keys(map).forEach(function (id) {
                html += '<option value="' + id + '"' + (String(current) === String(id) ? ' selected' : '') + '>' + $('<div>').text(map[id]).html() + '</option>';
            });
            if ($desig.hasClass('select2-hidden-accessible')) {
                $desig.select2('destroy');
            }
            $desig.html(html);
            $desig.select2({
                theme: 'bootstrap4',
                width: '100%',
                placeholder: '-- Select Designation --',
                allowClear: true
            });
            if (current && map[current]) {
                $desig.val(String(current)).trigger('change');
            } else if (current && map[String(current)]) {
                $desig.val(String(current)).trigger('change');
            } else {
                $desig.val(null).trigger('change');
            }
        }
        $('#role_id').on('change', function () {
            if (isOwnProfileEdit) {
                return;
            }
            refreshPrimaryDesignations(false);
        });
        // On load, filter to current role but keep current designation if valid.
        if (! isOwnProfileEdit) {
            refreshPrimaryDesignations(true);
        }

        var roleOptions = @json($roles ?? []);
        var permissionOptions = @json($permissions ?? []);
        var designationsByRoleId = @json($designationsByRoleId ?? []);
        var sectionOptions = @json($sectionOptions ?? []);
        var mecRegionOptions = @json($mecRegionOptions ?? []);
        var sectorOptions = @json($sectorOptions ?? []);
        var departmentOptionsExtra = @json($departmentOptions ?? []);
        var authorityLevelOptions = @json(\App\Models\PC\User::AUTHORITY_LEVEL_LABELS);
        var existingMemberships = @json($existingMemberships ?? []);
        var extraMembershipIndex = 0;

        var extraSingleSelect2Options = {
            theme: 'bootstrap4',
            width: '100%',
            placeholder: function () {
                return $(this).data('placeholder') || '-- Select an option --';
            },
            allowClear: true
        };

        var extraMultiSelect2Options = {
            theme: 'bootstrap4',
            width: '100%',
            placeholder: function () {
                return $(this).data('placeholder') || 'Select one or more';
            },
            allowClear: true,
            closeOnSelect: false
        };

        function destroySelect2($el) {
            if ($el.length && $el.hasClass('select2-hidden-accessible')) {
                $el.select2('destroy');
            }
        }

        function initExtraSingleSelect($el) {
            destroySelect2($el);
            $el.addClass('select2 form-control').select2(extraSingleSelect2Options);
        }

        function initExtraMultiSelect($el) {
            destroySelect2($el);
            $el.addClass('select2 form-control').select2(extraMultiSelect2Options);
        }

        function initExtraCardSelect2(card) {
            card.find('select.extra-select-single').each(function () {
                initExtraSingleSelect($(this));
            });
            card.find('select.extra-select-multi').each(function () {
                initExtraMultiSelect($(this));
            });
        }

        function optionHtml(map, selected) {
            var html = '<option value=""></option>';
            Object.keys(map || {}).forEach(function (id) {
                html += '<option value="' + id + '"' + (String(selected) === String(id) ? ' selected' : '') + '>' + $('<div>').text(map[id]).html() + '</option>';
            });
            return html;
        }

        function multiOptionHtml(map, selectedIds) {
            selectedIds = (selectedIds || []).map(String);
            var html = '';
            Object.keys(map || {}).forEach(function (id) {
                html += '<option value="' + id + '"' + (selectedIds.indexOf(String(id)) !== -1 ? ' selected' : '') + '>' + $('<div>').text(map[id]).html() + '</option>';
            });
            return html;
        }

        function buildExtraMecSubSectorOptions(sectorIds, selectedIds) {
            selectedIds = (selectedIds || []).map(String);
            var subMap = {};
            (sectorIds || []).forEach(function (sid) {
                var key = String(sid);
                var subs = (typeof mecSubSectorsBySector !== 'undefined')
                    ? (mecSubSectorsBySector[key] || mecSubSectorsBySector[sid] || null)
                    : null;
                if (!subs) {
                    return;
                }
                if (Array.isArray(subs)) {
                    subs.forEach(function (sub) {
                        if (sub && sub.id != null) {
                            subMap[String(sub.id)] = sub.name;
                        }
                    });
                    return;
                }
                if (typeof subs === 'object') {
                    Object.keys(subs).forEach(function (subId) {
                        subMap[String(subId)] = subs[subId];
                    });
                }
            });
            var html = '';
            Object.keys(subMap).forEach(function (subId) {
                html += '<option value="' + subId + '"' + (selectedIds.indexOf(String(subId)) !== -1 ? ' selected' : '') + '>' + $('<div>').text(subMap[subId]).html() + '</option>';
            });
            return html;
        }

        function refreshExtraMecSubSectors(card, selectedIds) {
            var $sector = card.find('select.extra-mec-sectors');
            var $sub = card.find('select.extra-mec-sub-sectors');
            var sectorIds = multiSelectValAsArray($sector);
            destroySelect2($sub);
            $sub.html(buildExtraMecSubSectorOptions(sectorIds, selectedIds || []));
            if (card.find('.extra-scope-mec').is(':visible')) {
                initExtraMultiSelect($sub);
            }
        }

        function buildExtraMembershipCard(data) {
            data = data || {};
            var idx = extraMembershipIndex++;
            var roleId = data.role_id || '';
            var scope = data.scope_payload || {};
            var desigMap = designationsByRoleId[String(roleId)] || {};
            var nameIdx = idx + 1;
            var displayIdx = nameIdx + 1;
            var card = $(
                '<div class="card card-primary card-outline mt-3 extra-membership-card" data-index="' + idx + '">' +
                    '<div class="card-header border-bottom-0">' +
                        '<h3 class="card-title font-weight-bold m-0">Workspace ' + displayIdx + '</h3>' +
                        '<div class="card-tools">' +
                            '<button type="button" class="btn btn-xs btn-danger remove-extra-membership"><i class="fas fa-trash"></i> Remove</button>' +
                        '</div>' +
                    '</div>' +
                    '<div class="card-body bg-light rounded pb-2">' +
                    (data.id ? '<input type="hidden" name="memberships[' + nameIdx + '][id]" value="' + data.id + '">' : '') +
                    '<input type="hidden" name="memberships[' + nameIdx + '][is_primary]" value="0">' +
                    '<input type="hidden" name="memberships[' + nameIdx + '][status]" value="1">' +
                    '<div class="row">' +
                        '<div class="col-md-3 mb-2"><div class="form-group mb-0"><label>Role <span class="text-danger">*</span></label><select class="form-control select2 extra-select-single extra-role-select" name="memberships[' + nameIdx + '][role_id]" data-placeholder="-- Select Role --">' + optionHtml(roleOptions, roleId) + '</select></div></div>' +
                        '<div class="col-md-3 mb-2"><div class="form-group mb-0"><label>Permission <span class="text-danger">*</span></label><select class="form-control select2 extra-select-single" name="memberships[' + nameIdx + '][permission_id]" data-placeholder="-- Select Permission --">' + optionHtml(permissionOptions, data.permission_id || '') + '</select></div></div>' +
                        '<div class="col-md-3 mb-2"><div class="form-group mb-0"><label>Designation <span class="text-danger">*</span></label><select class="form-control select2 extra-select-single extra-designation-select" name="memberships[' + nameIdx + '][designation_id]" data-placeholder="-- Select Designation --">' + optionHtml(desigMap, data.designation_id || '') + '</select></div></div>' +
                        '<div class="col-md-3 mb-2"><div class="form-group mb-0"><label>Authority Level</label><select class="form-control select2 extra-select-single" name="memberships[' + nameIdx + '][authority_level]">' + optionHtml(authorityLevelOptions, data.authority_level || '') + '</select></div></div>' +
                    '</div>' +
                    '<div class="row extra-scope-pnd" style="display:none;">' +
                        '<div class="col-md-12 mb-2"><div class="form-group mb-0"><label>Section <span class="text-danger">*</span></label><select class="form-control select2 extra-select-single extra-section-select" name="memberships[' + nameIdx + '][section_id]" data-placeholder="-- Select Section --">' + optionHtml(sectionOptions, data.section_id || '') + '</select></div></div>' +
                    '</div>' +
                    '<div class="row extra-scope-mec" style="display:none;">' +
                        '<div class="col-md-4 mb-2"><div class="form-group mb-0"><label>MEC Regions <span class="text-danger">*</span></label><select class="form-control select2 extra-select-multi extra-mec-regions" name="memberships[' + nameIdx + '][mec_region_ids][]" multiple data-placeholder="Select one or more MEC regions">' + multiOptionHtml(mecRegionOptions, scope.mec_region_ids || []) + '</select></div></div>' +
                        '<div class="col-md-4 mb-2"><div class="form-group mb-0"><label>MEC Sectors <span class="text-danger">*</span></label><select class="form-control select2 extra-select-multi extra-mec-sectors" name="memberships[' + nameIdx + '][sector_ids][]" multiple data-placeholder="Select one or more MEC sectors">' + multiOptionHtml(sectorOptions, scope.sector_ids || []) + '</select></div></div>' +
                        '<div class="col-md-4 mb-2"><div class="form-group mb-0"><label>MEC Sub Sectors</label><select class="form-control select2 extra-select-multi extra-mec-sub-sectors" name="memberships[' + nameIdx + '][mec_sub_sector_ids][]" multiple data-placeholder="Select one or more sub sectors">' + buildExtraMecSubSectorOptions(scope.sector_ids || [], scope.mec_sub_sector_ids || []) + '</select></div></div>' +
                    '</div>' +
                    '<div class="row extra-scope-dept" style="display:none;"><div class="col-md-12 mb-2"><div class="form-group mb-0"><label>Departments <span class="text-danger">*</span></label><select class="form-control select2 extra-select-multi" name="memberships[' + nameIdx + '][department_ids][]" multiple data-placeholder="Select one or more departments">' + multiOptionHtml(departmentOptionsExtra, scope.department_ids || []) + '</select></div></div></div>' +
                '</div></div>'
            );
            $('#extra-memberships-wrap').append(card);
            card.attr('data-hydrating', '1');
            toggleExtraScope(card, roleId);
            initExtraCardSelect2(card);
            setTimeout(function () {
                card.removeAttr('data-hydrating');
            }, 100);
        }

        function toggleExtraScope(card, roleId) {
            var isPnd = String(roleId) === String(pndRoleId);
            var isMec = String(roleId) === String(mecRoleId);
            var isFd = String(roleId) === String(fdRoleId);
            card.find('.extra-scope-pnd').toggle(isPnd);
            card.find('.extra-scope-mec').toggle(isMec);
            card.find('.extra-scope-dept').toggle(!isPnd && !isMec && !isFd && roleId !== '');

            // Re-init visible selects so Select2 widths/containers stay correct after show/hide.
            setTimeout(function () {
                card.find('.extra-scope-pnd:visible select, .extra-scope-mec:visible select, .extra-scope-dept:visible select').each(function () {
                    var $el = $(this);
                    if ($el.prop('multiple')) {
                        initExtraMultiSelect($el);
                    } else {
                        initExtraSingleSelect($el);
                    }
                });
            }, 0);
        }

        $('#add-extra-membership-btn').on('click', function () {
            buildExtraMembershipCard({});
        });

        $('#extra-memberships-wrap').on('click', '.remove-extra-membership', function () {
            var card = $(this).closest('.extra-membership-card');
            card.find('select').each(function () {
                destroySelect2($(this));
            });
            card.remove();
        });

        $('#extra-memberships-wrap').on('change select2:select select2:unselect', '.extra-role-select', function () {
            var card = $(this).closest('.extra-membership-card');
            var roleId = $(this).val();
            var desigMap = designationsByRoleId[String(roleId)] || {};
            var $desig = card.find('.extra-designation-select');
            destroySelect2($desig);
            $desig.html(optionHtml(desigMap, ''));
            initExtraSingleSelect($desig);
            toggleExtraScope(card, roleId);
        });

        $('#extra-memberships-wrap').on('change select2:select select2:unselect', '.extra-mec-sectors', function () {
            var card = $(this).closest('.extra-membership-card');
            if (card.attr('data-hydrating') === '1') {
                return;
            }
            var $sub = card.find('select.extra-mec-sub-sectors');
            var keep = multiSelectValAsArray($sub);
            refreshExtraMecSubSectors(card, keep);
        });

        $('#extra-memberships-wrap').on('change select2:select select2:unselect', 'select', function () {
            $(this).closest('.extra-membership-card').removeClass('is-invalid-card');
            if (! $('#userFormClientErrors').hasClass('d-none')) {
                // Keep banner until next submit attempt; only drop card highlight as user fixes fields.
            }
        });

        // Prefill extra memberships (skip primary / first)
        if (Array.isArray(existingMemberships) && existingMemberships.length > 1) {
            existingMemberships.slice(1).forEach(function (m) {
                buildExtraMembershipCard(m);
            });
        }

        function appendMultiHidden(form, name, values) {
            (values || []).forEach(function (id) {
                if (id === null || id === undefined || id === '') {
                    return;
                }
                form.append('<input type="hidden" class="js-memberships-primary" name="' + name + '" value="' + id + '">');
            });
        }

        function showClientMembershipErrors(messages, $firstBadCard) {
            var $form = $('#userForm');
            var $box = $('#userFormClientErrors');
            var $list = $box.find('ul');
            $list.empty();
            (messages || []).forEach(function (msg) {
                $list.append($('<li></li>').text(msg));
            });
            $box.removeClass('d-none');
            $form.find('.extra-membership-card').removeClass('is-invalid-card');
            if ($firstBadCard && $firstBadCard.length) {
                $firstBadCard.addClass('is-invalid-card');
            }
            if (typeof window.resetUserSubmitButton === 'function') {
                window.resetUserSubmitButton();
            }
            var target = ($firstBadCard && $firstBadCard.length) ? $firstBadCard.get(0) : $box.get(0);
            if (target && typeof target.scrollIntoView === 'function') {
                target.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        }

        function clearClientMembershipErrors() {
            $('#userFormClientErrors').addClass('d-none').find('ul').empty();
            $('#userForm').find('.extra-membership-card').removeClass('is-invalid-card');
        }

        function buildPrimaryMembershipHiddenFields(form) {
            form.find('input.js-memberships-primary').remove();
            var primaryRoleId = ($('#role_id').val() || '').toString();
            var primaryId = null;
            if (Array.isArray(existingMemberships) && existingMemberships.length) {
                var primaryMatch = existingMemberships.find(function (m) {
                    return m && (m.is_primary === true || m.is_primary === 1 || m.is_primary === '1');
                }) || existingMemberships[0];
                if (primaryMatch && primaryMatch.id) {
                    primaryId = primaryMatch.id;
                }
            }
            var append = function (name, value) {
                form.append('<input type="hidden" class="js-memberships-primary" name="' + name + '" value="' + (value == null ? '' : value) + '">');
            };
            if (primaryId) {
                append('memberships[0][id]', primaryId);
            }
            append('memberships[0][role_id]', primaryRoleId);
            append('memberships[0][permission_id]', form.find('[name="permission_id"]').not('[name^="memberships"]').first().val() || '');
            append('memberships[0][designation_id]', form.find('[name="designation_id"]').not('[name^="memberships"]').first().val() || '');
            append('memberships[0][section_id]', form.find('#section_id').val() || '');
            append('memberships[0][authority_level]', form.find('[name="authority_level"]').not('[name^="memberships"]').first().val() || '');
            append('memberships[0][is_primary]', '1');
            append('memberships[0][status]', '1');
            appendMultiHidden(form, 'memberships[0][mec_region_ids][]', multiSelectValAsArray(form.find('#mec_region_ids')));
            appendMultiHidden(form, 'memberships[0][sector_ids][]', multiSelectValAsArray(form.find('#sector_ids')));
            appendMultiHidden(form, 'memberships[0][mec_sub_sector_ids][]', multiSelectValAsArray(form.find('#mec_sub_sector_ids')));
            appendMultiHidden(form, 'memberships[0][department_ids][]', multiSelectValAsArray(form.find('#department_ids')));
            appendMultiHidden(form, 'memberships[0][sub_department_ids][]', multiSelectValAsArray(form.find('#sub_department_ids')));
            appendMultiHidden(form, 'memberships[0][core_sector_ids][]', multiSelectValAsArray(form.find('#core_sector_ids')));
            appendMultiHidden(form, 'memberships[0][core_sub_sector_ids][]', multiSelectValAsArray(form.find('#core_sub_sector_ids')));
            appendMultiHidden(form, 'memberships[0][blk_ids][]', multiSelectValAsArray(form.find('#blk_ids')));
            appendMultiHidden(form, 'memberships[0][assigned_scheme_ids][]', multiSelectValAsArray(form.find('#assigned_scheme_ids')));
            appendMultiHidden(form, 'memberships[0][excluded_project_ids][]', multiSelectValAsArray(form.find('#excluded_project_ids')));
            form.find('input[name="memberships_mode"]').remove();
            form.append('<input type="hidden" name="memberships_mode" value="1" class="js-memberships-primary">');
        }

        // Must bind #userForm only — $('form').first() is often header/sidebar logout, so memberships never posted.
        $('#userForm').on('submit', function (e) {
            var form = $(this);
            clearClientMembershipErrors();

            // My profile only updates personal fields (UpdateOwnProfileRequest). Skip admin membership checks.
            if (isOwnProfileEdit) {
                if (typeof window.setUserSubmitLoading === 'function') {
                    window.setUserSubmitLoading();
                }
                return true;
            }

            function multiVal($el) {
                return multiSelectValAsArray($el);
            }

            // Ensure Select2 values are written back and hidden-scope fields still submit.
            form.find('select').each(function () {
                var $el = $(this);
                $el.prop('disabled', false);
                if ($el.hasClass('select2-hidden-accessible')) {
                    $el.trigger('change.select2');
                }
            });

            // Clear HTML5 required on hidden primary scope widgets so they cannot block submit
            // when the visible role does not use them (or when validating extra MEC cards instead).
            ['#department_ids', '#section_id', '#mec_region_ids', '#sector_ids', '#mec_sub_sector_ids'].forEach(function (sel) {
                var $field = form.find(sel);
                if ($field.length && !$field.closest('.row, .form-group, #user-departments-wrap, #user-section-wrap, #user-mec-master-wrap').is(':visible')) {
                    $field.prop('required', false);
                }
            });

            var primaryRole = ($('#role_id').val() || '').toString();
            var primaryPerm = (form.find('[name="permission_id"]').not('[name^="memberships"]').first().val() || '').toString();
            var primaryDesig = (form.find('[name="designation_id"]').not('[name^="memberships"]').first().val() || '').toString();
            if (!primaryRole || !primaryPerm || !primaryDesig) {
                e.preventDefault();
                showClientMembershipErrors(['Primary role, permission, and designation are required.']);
                return false;
            }

            var clientErrors = [];
            var $firstBad = null;

            var primarySection = (form.find('#section_id').val() || '').toString();
            if (String(primaryRole) === String(pndRoleId)) {
                if (!primarySection) {
                    clientErrors.push('Workspace 1: section is required.');
                }
            }

            var getPrimaryScopeVals = function() {
                if (String(primaryRole) === String(pndRoleId)) {
                    return [primarySection];
                } else if (String(primaryRole) === String(mecRoleId)) {
                    return [
                        multiVal(form.find('#mec_region_ids')).join(','),
                        multiVal(form.find('#sector_ids')).join(','),
                        multiVal(form.find('#mec_sub_sector_ids')).join(',')
                    ];
                } else if (String(primaryRole) === String(fdRoleId)) {
                    return [];
                } else {
                    return [multiVal(form.find('#department_ids')).join(',')];
                }
            };
            var primaryAuth = form.find('[name="authority_level"]').not('[name^="memberships"]').first().val() || '';
            var primaryFingerprint = [primaryRole, primaryPerm, primaryDesig, primaryAuth, getPrimaryScopeVals().join('|')].join('::');

            var fingerprintsSeen = {};
            fingerprintsSeen[primaryFingerprint] = 'Workspace 1';

            form.find('.extra-membership-card').each(function (i) {
                var card = $(this);
                var n = i + 1;
                var roleId = (card.find('.extra-role-select').val() || '').toString();
                var permId = (card.find('select[name*="[permission_id]"]').val() || '').toString();
                var desigId = (card.find('.extra-designation-select').val() || '').toString();
                var roleLabel = $.trim(card.find('.extra-role-select option:selected').text() || ('Role #' + n));
                var before = clientErrors.length;
                if (!roleId) {
                    clientErrors.push('Workspace ' + (n + 1) + ': select a role.');
                } else {
                    var getExtraScopeVals = function() {
                        if (String(roleId) === String(pndRoleId)) {
                            return [(card.find('select[name*="[section_id]"]').val() || card.find('.extra-section-select').val() || '').toString()];
                        } else if (String(roleId) === String(mecRoleId)) {
                            return [
                                multiVal(card.find('.extra-mec-regions')).join(','),
                                multiVal(card.find('.extra-mec-sectors')).join(','),
                                multiVal(card.find('.extra-mec-sub-sectors')).join(',')
                            ];
                        } else if (String(roleId) === String(fdRoleId)) {
                            return [];
                        } else {
                            return [multiVal(card.find('select[name*="[department_ids]"]')).join(',')];
                        }
                    };
                    var authLevel = card.find('select[name*="[authority_level]"]').val() || '';
                    var extraFingerprint = [roleId, permId, desigId, authLevel, getExtraScopeVals().join('|')].join('::');

                    if (fingerprintsSeen[extraFingerprint]) {
                        clientErrors.push('Workspace ' + (n + 1) + ' (' + roleLabel + '): this exact workspace configuration is already added.');
                    } else {
                        fingerprintsSeen[extraFingerprint] = 'Workspace ' + (n + 1);
                        if (!permId) {
                            clientErrors.push('Workspace ' + (n + 1) + ' (' + roleLabel + '): select a permission.');
                        }
                        var desigOptions = card.find('.extra-designation-select option').filter(function () {
                            return $(this).val();
                        }).length;
                        if (desigOptions > 0 && !desigId) {
                            clientErrors.push('Workspace ' + (n + 1) + ' (' + roleLabel + '): select a designation that belongs to this role.');
                        }
                        if (String(roleId) === String(pndRoleId)) {
                            var sectionId = (card.find('select[name*="[section_id]"]').val() || card.find('.extra-section-select').val() || '').toString();
                            if (!sectionId) {
                                clientErrors.push('Workspace ' + (n + 1) + ' (' + roleLabel + '): section is required.');
                            }
                        } else if (String(roleId) === String(mecRoleId)) {
                            var regions = multiVal(card.find('.extra-mec-regions'));
                            var sectors = multiVal(card.find('.extra-mec-sectors'));
                            if (!regions.length) {
                                clientErrors.push('Workspace ' + (n + 1) + ' (' + roleLabel + '): select at least one MEC region.');
                            }
                            if (!sectors.length) {
                                clientErrors.push('Workspace ' + (n + 1) + ' (' + roleLabel + '): select at least one MEC sector.');
                            }
                        } else if (String(roleId) !== String(fdRoleId)) {
                            var depts = multiVal(card.find('select[name*="[department_ids]"]'));
                            if (!depts.length) {
                                clientErrors.push('Workspace ' + (n + 1) + ' (' + roleLabel + '): select at least one department.');
                            }
                        }
                    }
                }
                if (clientErrors.length > before && ! $firstBad) {
                    $firstBad = card;
                }
            });
            if (clientErrors.length) {
                e.preventDefault();
                showClientMembershipErrors(clientErrors, $firstBad);
                return false;
            }

            buildPrimaryMembershipHiddenFields(form);

            // Re-index extra cards to memberships[1], memberships[2], ...
            form.find('.extra-membership-card').each(function (i) {
                var card = $(this);
                var newIdx = i + 1;
                card.find('[name^="memberships["]').each(function () {
                    var $el = $(this);
                    var name = $el.attr('name') || '';
                    $el.attr('name', name.replace(/^memberships\[\d+]/, 'memberships[' + newIdx + ']'));
                });
            });

            if (typeof window.setUserSubmitLoading === 'function') {
                window.setUserSubmitLoading();
            }

            return true;
        });
    });
</script>
@if (! $ownProfileEdit)
@include('partials.index-datatable-scripts')
@include('shared.schemes-listing.assignment.crud-stack', [
    'context' => 'user',
    'renderTable' => false,
    'renderScripts' => true,
    'assignedSchemeIds' => $assignedSchemeIds ?? [],
    'excludedSchemeIds' => $excludedSchemeIds ?? [],
    'initialSubDepartmentIds' => old('sub_department_ids', ($primaryFormScope['sub_department_ids'] ?? null) ?: ($user?->userSubDepartments?->pluck('sub_department_id')->toArray() ?? [])),
    'initialCoreSubSectorIds' => old('core_sub_sector_ids', ($primaryFormScope['core_sub_sector_ids'] ?? null) ?: ($user?->userCoreSubSectors?->pluck('sub_sector_id')->toArray() ?? [])),
])
@endif
<script>
    function togglePassword(fieldName = 'password') {
        const passwordInput = document.getElementById(fieldName);
        const toggleIcon = document.getElementById('passwordToggleIcon-' + fieldName);
        
        if (!passwordInput || !toggleIcon) return;
        
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            toggleIcon.classList.remove('fa-eye');
            toggleIcon.classList.add('fa-eye-slash');
        } else {
            passwordInput.type = 'password';
            toggleIcon.classList.remove('fa-eye-slash');
            toggleIcon.classList.add('fa-eye');
        }
    }

    function handleImageSelect(event) {
        const file = event.target.files[0];
        if (!file) return;

        // Validate file size (5MB)
        if (file.size > 5 * 1024 * 1024) {
            alert('File size must be less than 5MB');
            event.target.value = '';
            return;
        }

        // Validate file type
        if (!file.type.match('image.*')) {
            alert('Please select an image file');
            event.target.value = '';
            return;
        }

        const preview = document.getElementById('profileImagePreview');
        const placeholder = document.getElementById('profileImagePlaceholder');
        preview.src = URL.createObjectURL(file);
        preview.style.display = 'block';
        if (placeholder) {
            placeholder.style.display = 'none';
        }
    }

    function clearImage() {
        document.getElementById('imageInput').value = '';
        document.getElementById('deleteImage').value = '{{ isset($user) && $user->image ? $user->image : '' }}';
        
        const preview = document.getElementById('profileImagePreview');
        const placeholder = document.getElementById('profileImagePlaceholder');
        
        preview.style.display = 'none';
        preview.src = '';
        if (placeholder) {
            placeholder.style.display = 'flex';
        }
    }

    function handleSignatureSelect(event) {
        const file = event.target.files[0];
        if (!file) return;

        if (file.size > 2 * 1024 * 1024) {
            alert('Signature file must be less than 2MB');
            event.target.value = '';
            return;
        }

        if (!file.type.match('image.*')) {
            alert('Please select an image file');
            event.target.value = '';
            return;
        }

        const preview = document.getElementById('signatureImagePreview');
        const placeholder = document.getElementById('signaturePlaceholder');
        preview.src = URL.createObjectURL(file);
        preview.style.display = 'block';
        if (placeholder) {
            placeholder.style.display = 'none';
        }
        var clearBtn = document.getElementById('clearSignatureBtn');
        if (clearBtn) clearBtn.style.display = 'inline-block';
    }

    function clearSignature() {
        document.getElementById('signatureInput').value = '';
        document.getElementById('deleteSignatureImage').value = @json(isset($user) && $user->signature_image ? $user->signature_image : '');
        const preview = document.getElementById('signatureImagePreview');
        const placeholder = document.getElementById('signaturePlaceholder');
        preview.style.display = 'none';
        preview.src = '';
        if (placeholder) {
            placeholder.style.display = 'flex';
        }
        var clearBtn = document.getElementById('clearSignatureBtn');
        if (clearBtn) clearBtn.style.display = 'none';
    }

</script>
@endpush