@extends('admin.layout')
<style>
    .confirm-title {
        font-family: Public Sans;
        font-weight: 700;
        font-size: 20px;
        line-height: 28px;
        text-decoration: underline;
    }
    .confirm-section-title {
        font-family: Public Sans;
        font-weight: 500;
        font-size: 15px;
        line-height: 28px;
    }
    .confirm-box {
        border: 2px solid #2b8bbd;
        border-radius: 6px;
        padding: 15px;
    }
    .confirm-label {
        font-weight: 600;
        color: #333;
    }
    .confirm-value {
        color: #555;
        margin-left: 4px;
    }
    .modal-dialog-scrollable .modal-content {
        max-height: 100%;
        overflow: auto !important;
    }
    .changed-field {
        border-color: #f0ad4e !important;
        background-color: #fffdf0 !important;
    }
    .change-badge {
        font-size: 10px;
        background: #f0ad4e;
        color: #fff;
        border-radius: 4px;
        padding: 1px 6px;
        margin-left: 6px;
        vertical-align: middle;
    }
    .diff-old {
        color: #c0392b;
        text-decoration: line-through;
        margin-right: 6px;
    }
    .diff-new {
        color: #27ae60;
        font-weight: 600;
    }
</style>
@section('content')
<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('admin.users.index') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            Edit User
        </h5>
    </div>
    <div class="col-auto">
        <a href="{{ route('admin.editHistory', ['user' => $User->user_id]) }}" class="btn btn-primary"
            style="background-color: #239ad7; border: none;">
            History
        </a>
    </div>
</div>
<div class="row p-2">
    <span class="mb-3 me-2">User ID :<strong class="ms-2">{{ $User->user_id ?? 'VIPOM1234' }}</strong></span>
    <span class="mb-3 me-2">User Name :<strong class="ms-2">{{ $User->name ?? '' }}</strong></span>
</div>
<div class="card p-5">
    <form id="editUserForm" action="{{ route('admin.users.update', $User->user_id) }}" method="POST">
        @csrf
        @method('PUT')
        <!-- Personal Details -->
        <h5 class="mb-3">Personal Details</h5>
        <div class="row">
            <!-- <div class="col-md-6 mb-3">
                <label class="form-label">Referral ID</label><span class="text-danger">*</span> <span class="text-danger">*</span>
                <select class="form-control @error('ref_id') is-invalid @enderror" name="ref_id" id="edit_ref_id"
                    data-original="{{ $User->ref_id ?? '' }}" style="width:100%;" required>
                </select>
                @error('ref_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div> -->
            <div class="col-md-6 mb-3">

                <label class="form-label">Referral ID</label>
                <span class="text-danger">*</span>

                <select class="form-control @error('ref_id') is-invalid @enderror"
                    name="ref_id"
                    id="edit_ref_id"
                    data-original="{{ $User->ref_id ?? '' }}"
                    style="width:100%;"
                    disabled>

                </select>

                @error('ref_id')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror

            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">Referral Name</label><span class="text-danger">*</span>
                <input type="text" class="form-control @error('referral_name') is-invalid @enderror"
                    name="referral_name" value="{{ old('referral_name', $User->parent->name ?? '') }}"
                    data-original="{{ $User->parent->name ?? '' }}" disabled>
                @error('referral_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">Name</label><span class="text-danger">*</span><span class="text-danger">*</span>
                <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
                    value="{{ old('name', $User->name ?? '') }}" data-original="{{ $User->name ?? '' }}" readonly>
                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">Phone Number</label><span class="text-danger">*</span>
                <input type="text" class="form-control @error('phone_number') is-invalid @enderror" name="phone_number"
                    value="{{ old('phone_number', $User->phone_number ?? '') }}"
                    data-original="{{ $User->phone_number ?? '' }}" readonly>
                @error('phone_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">Email</label><span class="text-danger">*</span>
                <input type="email" class="form-control @error('email') is-invalid @enderror" name="email"
                    value="{{ old('email', $User->email ?? '') }}" data-original="{{ $User->email ?? '' }}" readonly>
                @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label">Password</label><span class="text-danger">*</span>
                <input type="text" class="form-control @error('password') is-invalid @enderror"
                    name="password"
                    value="{{ old('password', $User->pwd_hint ?? '') }}" data-original="{{ $User->pwd_hint ?? '' }}"
                    placeholder="Enter Password" readonly>

                @error('password')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">Address</label><span class="text-danger">*</span>
                <input type="text" class="form-control @error('address') is-invalid @enderror" name="address"
                    value="{{ old('address', $User->address ?? '') }}" data-original="{{ $User->address ?? '' }}" readonly>
                @error('address')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">Pincode</label><span class="text-danger">*</span>
                <input type="text" class="form-control @error('pincode') is-invalid @enderror" name="pincode"
                    value="{{ old('pincode', $User->pincode ?? '') }}" data-original="{{ $User->pincode ?? '' }}" readonly>
                @error('pincode')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">State</label><span class="text-danger">*</span>
                <select class="form-select @error('state') is-invalid @enderror" name="state"
                    data-original="{{ $User->state ?? '' }}" >
                    <option value="">Select State</option>
                    <option value="Tamil Nadu" {{ old('state', $User->state ?? '') == 'Tamil Nadu' ? 'selected' : '' }}>
                        Tamil Nadu</option>
                    <option value="Kerala" {{ old('state', $User->state ?? '') == 'Kerala' ? 'selected' : '' }}>
                        Kerala</option>
                    <option value="Karnataka" {{ old('state', $User->state ?? '') == 'Karnataka' ? 'selected' : '' }}>
                        Karnataka</option>
                </select>
                @error('state')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">Country</label><span class="text-danger">*</span>
                <select class="form-select @error('country') is-invalid @enderror" name="country"
                    data-original="{{ $User->country ?? '' }}">
                    <option value="">Select Country</option>
                    <option value="India" {{ old('country', $User->country ?? '') == 'India' ? 'selected' : '' }}>India
                    </option>
                </select>
                @error('country')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
        <!-- Bank Details -->
        <h5 class="mt-4 mb-3">Bank Details</h5>
        <div class="row">
            <div class="col-md-6 mb-3">
                <label class="form-label">Account Holder Name</label><span class="text-danger">*</span>
                <input type="text" class="form-control @error('account_holder') is-invalid @enderror"
                    name="account_holder" value="{{ old('account_holder', $User->detail->account_holder ?? '') }}"
                    data-original="{{ $User->detail->account_holder ?? '' }}" readonly>
                @error('account_holder')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">Account Number</label><span class="text-danger">*</span>
                <input type="text" class="form-control @error('account_number') is-invalid @enderror"
                    name="account_number" value="{{ old('account_number', $User->detail->account_number ?? '') }}"
                    data-original="{{ $User->detail->account_number ?? '' }}" readonly>
                @error('account_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-4 mb-3">
                <label class="form-label">Bank Name</label><span class="text-danger">*</span>
                <input type="text" class="form-control @error('bank_name') is-invalid @enderror" name="bank_name"
                    value="{{ old('bank_name', $User->detail->bank_name ?? '') }}"
                    data-original="{{ $User->detail->bank_name ?? '' }}" readonly>
                @error('bank_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-4 mb-3">
                <label class="form-label">Branch Name</label><span class="text-danger">*</span>
                <input type="text" class="form-control @error('branch_name') is-invalid @enderror" name="branch_name"
                    value="{{ old('branch_name', $User->detail->branch_name ?? '') }}"
                    data-original="{{ $User->detail->branch_name ?? '' }}" readonly>
                @error('branch_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-4 mb-3">
                <label class="form-label">IFSC Code</label><span class="text-danger">*</span>
                <input type="text" class="form-control @error('ifsc') is-invalid @enderror" name="ifsc"
                    value="{{ old('ifsc', $User->detail->ifsc ?? '') }}"
                    data-original="{{ $User->detail->ifsc ?? '' }}" readonly>
                @error('ifsc')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
        <!-- KYC Details -->
        <h5 class="mt-4 mb-3">KYC Details</h5>
        <div class="row">
            <div class="col-md-6 mb-3">
                <label class="form-label">PAN Number</label><span class="text-danger">*</span>
                <input type="text" class="form-control @error('pan_number') is-invalid @enderror" name="pan_number"
                    value="{{ old('pan_number', $User->detail->pan_number ?? '') }}"
                    data-original="{{ $User->detail->pan_number ?? '' }}" readonly>
                @error('pan_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">Aadhar Number</label><span class="text-danger">*</span>
                <input type="text" class="form-control @error('aadhar_number') is-invalid @enderror"
                    name="aadhar_number" value="{{ old('aadhar_number', $User->detail->aadhar_number ?? '') }}"
                    data-original="{{ $User->detail->aadhar_number ?? '' }}" readonly>
                @error('aadhar_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
       <h5 class="mt-4 mb-3">Nominee Details</h5>

<div class="row">

    <div class="col-lg-8">
        <div class="row">

            <!-- Nominee Name -->
            <div class="col-md-6 mb-3">
                <label class="form-label">Nominee Name <span class="text-danger">*</span></label>
                <input type="text" class="form-control @error('nominee_name') is-invalid @enderror"
                    name="nominee_name" value="{{ old('nominee_name', $User->detail->nominee_name ?? '') }}"
                    data-original="{{ $User->detail->nominee_name ?? '' }}" readonly>
                @error('nominee_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
           

            <!-- Nominee Phone -->
            <div class="col-md-6 mb-3">
                <label class="form-label">Nominee Number <span class="text-danger">*</span></label>
                <input type="text" class="form-control @error('nominee_phone') is-invalid @enderror"
                    name="nominee_phone" value="{{ old('nominee_phone', $User->detail->nominee_phone ?? '') }}"
                    data-original="{{ $User->detail->nominee_name ?? '' }}" readonly>
                @error('nominee_phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            <!-- Nominee Relation -->
            <div class="col-md-12 mb-3">
                <label class="form-label">Nominee Relation <span class="text-danger">*</span></label>
                <input type="text" class="form-control @error('nominee_relation') is-invalid @enderror"
                    name="nominee_relation" value="{{ old('nominee_relation', $User->detail->nominee_relation ?? '') }}"
                    data-original="{{ $User->detail->nominee_relation ?? '' }}" readonly>
                @error('nominee_relation')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

        </div>
    </div>

    <!-- Nominee Address -->
    <div class="col-lg-4">
    <label class="form-label">
        Nominee Address <span class="text-danger">*</span>
    </label>

    <textarea
        class="form-control @error('nominee_address') is-invalid @enderror"
        name="nominee_address"
        rows="5"
        placeholder="Enter full address"
        data-original="{{ optional($User->detail)->nominee_address }}" readonly
    >{{ old('nominee_address', optional($User->detail)->nominee_address) }}</textarea>

    @error('nominee_address')
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>

</div>
        <!-- Buttons -->
        <!-- <div class="text-center mt-4">
            <button type="reset" class="btn btn-secondary me-2" id="discardBtn">Discard</button>
            <button type="submit" class="btn btn-primary">Save Changes</button>
        </div> -->
    </form>
</div>
{{-- ===== CONFIRMATION MODAL ===== --}}
<div class="modal fade" id="confirmationModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content p-3 p-md-4">
            <h5 class="confirm-title text-center mb-4">Edit Details Confirmation</h5>
            {{-- Changed fields notice --}}
            <div class="alert alert-warning d-none" id="noChangesAlert">
                No changes detected. Please modify at least one field before saving.
            </div>
            <div id="changesOnlySection">
                <h6 class="confirm-section-title mb-2">
                    Changed Fields <span class="text-muted" style="font-size:12px;">(showing old → new)</span>
                </h6>
                <div class="confirm-box mb-3">
                    <div class="row small g-2" id="changedFieldsList">
                        {{-- Populated by JS --}}
                    </div>
                </div>
            </div>
            <h6 class="confirm-section-title mb-3">Personal Details</h6>
            <div class="confirm-box mb-3">
                <div class="row small g-2">
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">Referral Id :</span>
                        <span class="confirm-value text-break" id="c_referral_id"></span>
                    </div>
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">Referral Name :</span>
                        <span class="confirm-value text-break" id="c_referral_name"></span>
                    </div>
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">Name :</span>
                        <span class="confirm-value text-break" id="c_name"></span>
                    </div>
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">Phone :</span>
                        <span class="confirm-value text-break" id="c_phone"></span>
                    </div>
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">Email :</span>
                        <span class="confirm-value text-break" id="c_email"></span>
                    </div>
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">Password :</span>
                        <span class="confirm-value text-break" id="c_password"></span>
                    </div>
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">Pincode :</span>
                        <span class="confirm-value text-break" id="c_pincode"></span>
                    </div>
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">Address :</span>
                        <span class="confirm-value text-break" id="c_address"></span>
                    </div>
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">State :</span>
                        <span class="confirm-value text-break" id="c_state"></span>
                    </div>
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">Country :</span>
                        <span class="confirm-value text-break" id="c_country"></span>
                    </div>
                </div>
            </div>
            <h6 class="confirm-section-title mb-3">Bank Details</h6>
            <div class="confirm-box mb-3">
                <div class="row small g-2">
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">Account Holder :</span>
                        <span class="confirm-value text-break" id="c_account_holder"></span>
                    </div>
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">Account No :</span>
                        <span class="confirm-value text-break" id="c_account_number"></span>
                    </div>
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">IFSC :</span>
                        <span class="confirm-value text-break" id="c_ifsc"></span>
                    </div>
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">Bank :</span>
                        <span class="confirm-value text-break" id="c_bank"></span>
                    </div>
                    <div class="col-12 col-md-4">
                        <span class="confirm-label">Branch :</span>
                        <span class="confirm-value text-break" id="c_branch"></span>
                    </div>
                </div>
            </div>
            <h6 class="confirm-section-title mb-3">KYC Details</h6>
            <div class="confirm-box mb-4">
                <div class="row small g-2">
                    <div class="col-12 col-md-6">
                        <span class="confirm-label">PAN :</span>
                        <span class="confirm-value text-break" id="c_pan"></span>
                    </div>
                    <div class="col-12 col-md-6 text-start text-md-end">
                        <span class="confirm-label">Aadhar :</span>
                        <span class="confirm-value text-break" id="c_aadhar"></span>
                    </div>
                </div>
            </div>
            <h6 class="confirm-section-title mb-3">Nominee Details</h6>
            <div class="confirm-box mb-4">
                <div class="row small g-2">
            <div class="col-12 col-md-4">
    <span class="confirm-label">Nominee Name :</span>
    <span class="confirm-value" id="c_nominee_name"></span>
</div>

<div class="col-12 col-md-4">
    <span class="confirm-label">Nominee Phone :</span>
    <span class="confirm-value" id="c_nominee_phone"></span>
</div>

<div class="col-12 col-md-4">
    <span class="confirm-label">Relation :</span>
    <span class="confirm-value" id="c_nominee_relation"></span>
</div>

<div class="col-12">
    <span class="confirm-label">Address :</span>
    <span class="confirm-value" id="c_nominee_address"></span>
</div>
</div></div>
            <div class="text-center d-flex flex-column flex-md-row justify-content-center">
                <button class="btn btn-outline-secondary mb-2 mb-md-0 me-md-3" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-primary px-4" id="confirmSaveBtn" onclick="submitEdit()">Confirm & Save</button>
            </div>
        </div>
    </div>
</div>
{{-- ===== SUCCESS MODAL ===== --}}
<div class="modal fade" id="successModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:520px;">
        <div class="modal-content border-0 shadow-lg rounded-4 p-3 p-md-4 text-center">
            <div class="bg-info rounded-3 py-3 mb-4">
                <h2 class="fw-bold text-white mb-0 fs-3" style="letter-spacing: 2px;">
                    OMIGA <span class="text-danger">VIP</span>
                </h2>
            </div>
            <div class="mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none"
                    stroke="#27ae60" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10" />
                    <polyline points="9 12 11 14 15 10" />
                </svg>
            </div>
            <h4 class="fw-semibold mb-3">Profile Updated Successfully!</h4>
            <p class="text-muted mb-4">The user's details have been saved. All changes are now active.</p>
            <button type="button" class="btn btn-outline-primary btn-lg w-100 py-3 rounded-3" data-bs-dismiss="modal"
                onclick="window.location.reload()">
                Close
            </button>
        </div>
    </div>
</div>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const form = document.getElementById("editUserForm");
        const submitBtn = form.querySelector("button[type='submit']");
        let isSubmitting = false;
        form.addEventListener("submit", function(event) {
            event.preventDefault();
            if (isSubmitting) return;
            isSubmitting = true;
            submitBtn.disabled = true;
            submitBtn.innerText = "Validating...";
            clearErrors();
            fetch('{{ route('admin.users.validate_update', $User->user_id) }}', {
                        method: "POST",
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json',
                            'X-HTTP-Method-Override': 'PUT'
                        },
                        body: new FormData(form)
                    })
                .then(async response => {
                    if (!response.ok) {
                        let data = {};
                        try {
                            data = await response.json();
                        } catch (e) {
                            data.message = "Something went wrong. Please try again.";
                        }
                        if (response.status === 422) {
                            showErrors(data.errors);
                        } else if (response.status === 403) {
                            showGeneralError(data.message || "Unauthorized access.");
                        } else if (response.status === 500) {
                            showGeneralError(data.message || "Server error occurred.");
                        } else {
                            showGeneralError(data.message || "Server error occurred.");
                        }
                        isSubmitting = false;
                        submitBtn.disabled = false;
                        submitBtn.innerText = "Submit";
                        throw "error";
                    }
                    return response.json();
                })
                .then(() => {
                    fillConfirmationModal();
                    new bootstrap.Modal(
                        document.getElementById("confirmationModal")
                    ).show();
                    isSubmitting = false;
                    submitBtn.disabled = false;
                    submitBtn.innerText = "Save Changes";
                })
                .catch(() => {
                    isSubmitting = false;
                    submitBtn.disabled = false;
                    submitBtn.innerText = "Save Changes";
                });
        });
        document.getElementById('edit_ref_id').addEventListener('change', function() {
            let selectedOption = this.options[this.selectedIndex];
            let userName = selectedOption.getAttribute('data-name') || '';
            let referralInput = document.querySelector('[name="referral_name"]');
            referralInput.value = userName;
            // Trigger change highlight check
            referralInput.dispatchEvent(new Event('input'));
        });
    });
    function showGeneralError(message) {
        let alertDiv = document.createElement("div");
        alertDiv.classList.add("alert", "alert-danger", "mt-3");
        alertDiv.innerText = message;
        const form = document.getElementById("editUserForm");
        form.prepend(alertDiv);
    }
    /* ── Validation helpers ── */
    function showErrors(errors) {
        for (let field in errors) {
            const input = document.querySelector(`[name="${field}"]`);
            if (input) {
                input.classList.add("is-invalid");
                let div = document.createElement("div");
                div.classList.add("invalid-feedback");
                div.innerText = errors[field][0];
                input.parentNode.appendChild(div);
            }
        }
    }
    function clearErrors() {
        document.querySelectorAll(".is-invalid").forEach(el => el.classList.remove("is-invalid"));
        document.querySelectorAll(".invalid-feedback").forEach(el => el.remove());
    }
    /* ── Fill confirmation modal ── */
    function fillConfirmationModal() {
        const form = document.getElementById("editUserForm");
        // Helper: render value, highlight if changed
        function renderVal(elId, name) {
            const input = form.querySelector(`[name="${name}"]`);
            const current = input ? input.value : '';
            const original = input ? (input.dataset.original || '') : '';
            const el = document.getElementById(elId);
            if (current !== original) {
                el.innerHTML =
                    `<span class="diff-old">${original || '—'}</span>` +
                    `<span class="diff-new">${current || '—'}</span>`;
            } else {
                el.innerText = current;
            }
        }
        renderVal('c_referral_id', 'ref_id');
        renderVal('c_referral_name', 'referral_name');
        renderVal('c_name', 'name');
        renderVal('c_phone', 'phone_number');
        renderVal('c_email', 'email');
        renderVal('c_password', 'password');
        renderVal('c_address', 'address');
        renderVal('c_pincode', 'pincode');
        renderVal('c_state', 'state');
        renderVal('c_country', 'country');
        renderVal('c_account_holder', 'account_holder');
        renderVal('c_account_number', 'account_number');
        renderVal('c_bank', 'bank_name');
        renderVal('c_branch', 'branch_name');
        renderVal('c_ifsc', 'ifsc');
        renderVal('c_pan', 'pan_number');
        renderVal('c_aadhar', 'aadhar_number');
        renderVal('c_nominee_name', 'nominee_name');
        renderVal('c_nominee_phone', 'nominee_phone');
        renderVal('c_nominee_relation', 'nominee_relation');
        renderVal('c_nominee_address', 'nominee_address');
        
        // Build "changed fields" summary
        const fieldLabels = {
            ref_id: 'Referral ID',
            referral_name: 'Referral Name',
            name: 'Name',
            phone_number: 'Phone',
            email: 'Email',
            password: 'Password',
            address: 'Address',
            pincode: 'Pincode',
            state: 'State',
            country: 'Country',
            account_holder: 'Account Holder',
            account_number: 'Account Number',
            bank_name: 'Bank Name',
            branch_name: 'Branch Name',
            ifsc: 'IFSC Code',
            pan_number: 'PAN Number',
            aadhar_number: 'Aadhar Number',
            nominee_name: 'Nominee Name',
            nominee_phone: 'Nominee Phone',
            nominee_relation: 'Nominee Relation',
            nominee_address: 'Nominee Address',
        };
        const changedList = document.getElementById("changedFieldsList");
        changedList.innerHTML = '';
        let changeCount = 0;
        form.querySelectorAll("[data-original]").forEach(function(input) {
            const name = input.getAttribute("name");
            const current = input.value;
            const original = input.dataset.original || '';
            if (current !== original && fieldLabels[name]) {
                changeCount++;
                const col = document.createElement("div");
                col.className = "col-12 col-md-6";
                col.innerHTML =
                    `<span class="confirm-label">${fieldLabels[name]} :</span> ` +
                    `<span class="diff-old">${original || '—'}</span>` +
                    `<span class="diff-new">${current || '—'}</span>`;
                changedList.appendChild(col);
            }
        });
        document.getElementById("changesOnlySection").classList.toggle("d-none", changeCount === 0);
        document.getElementById("noChangesAlert").classList.toggle("d-none", changeCount > 0);
        document.getElementById("confirmSaveBtn").disabled = changeCount === 0;
    }
    function submitEdit() {
        const confirmBtn = document.getElementById("confirmSaveBtn");
        if (confirmBtn.disabled) return;
        confirmBtn.disabled = true;
        confirmBtn.innerText = "Saving...";
        const confirmModal = bootstrap.Modal.getInstance(
            document.getElementById('confirmationModal')
        );
        confirmModal.hide();
        const form = document.getElementById("editUserForm");
        const formData = new FormData(form);
        formData.append('_method', 'PUT');
        fetch(form.action, {
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(async response => {
                if (!response.ok) {
                    let data = {};
                    try {
                        data = await response.json();
                    } catch (e) {
                        data.message = "Something went wrong. Please try again.";
                    }
                    if (response.status === 422) {
                        showErrors(data.errors);
                    } else if (response.status === 403) {
                        showGeneralError(data.message || "Unauthorized access.");
                    } else if (response.status === 500) {
                        showGeneralError(data.message || "Server error occurred.");
                    } else {
                        showGeneralError(data.message || "Server error occurred.");
                    }
                    isSubmitting = false;
                    submitBtn.disabled = false;
                    submitBtn.innerText = "Submit";
                    throw "error";
                }
                return response.json();
            })
            .then(data => {
                new bootstrap.Modal(
                    document.getElementById('successModal')
                ).show();
                // Reset change tracking
                form.querySelectorAll("[data-original]").forEach(input => {
                    input.dataset.original = input.value;
                    input.classList.remove("changed-field");
                });
                confirmBtn.disabled = false;
                confirmBtn.innerText = "Confirm & Save";
            })
            .catch(() => {
                confirmBtn.disabled = false;
                confirmBtn.innerText = "Confirm & Save";
            });
    }
</script>
<script>
    $(document).ready(function() {
        let refId = "{{ $User->ref_id }}";
        let refName = "{{ $User->parent->name ?? '' }}";
        let refUserId = "{{ $User->parent->user_id ?? '' }}";
        if (refId) {
            let option = new Option(refName + ' (' + refUserId + ')', refId, true, true);
            $('#edit_ref_id').append(option).trigger('change');
        }
        $('#edit_ref_id').select2({
            placeholder: "Search referral user",
            allowClear: true,
            minimumInputLength: 1,
            width: '100%',
            ajax: {
                url: "{{ route('admin.referral.search') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.results
                    };
                }
            }
        });
        $('#edit_ref_id').on('select2:select', function(e) {
            let data = e.params.data;
            document.querySelector('[name="referral_name"]').value = data.name || '';
            document.querySelector('[name="referral_name"]').dispatchEvent(new Event('input'));
        });
    });
</script>
@endsection