@extends('admin.layout')
<style>
    * {
        --hibiscus-love: #fc465c;
        --fine-ii: #f9b198;
        --afl: #f9b198;
        --mexican-sky: #cfdddd;
        --brasillia-peach: #133d45;
        --free: #ffd700;
        --captured: #2b2120;

        --form-bg: var(--brasillia-peach);
        --secondary-color: var(--hibiscus-love);
        --tertiary-color: var(--fine-ii);
        --quadrary-color: var(--afl);
        --bg-color: var(--mexican-sky);
        --text-color: var(--free);
        --header-color: var(--captured);
        --error-color: var(--hibiscus-love);
        --success-color: #73d12e;

        box-sizing: border-box;
    }

    .container {
        border-radius: 0.6em;
        padding: 20px;
        background-color: #133d45 !important;
        margin: 20px auto;
    }

    .form {
        padding: 30px 40px;
    }

    .form h2 {
        text-align: center;
        margin: 0 0 20px;
    }

    .form-control {
        margin-bottom: 10px;
        /* padding-bottom: 20px; */
        position: relative;
        color: var(--text-color) !important;

    }

    .form-label {
        color: White !important;
        display: block;
        margin-bottom: 5px;
    }

    .form-control,
    .select2-container--default .select2-selection--single {
        border-radius: 6px;
        background-color: #133d45 !important;
        border: var(--quadrary-color) solid 2px !important;
        display: block;
        width: 100%;
        color: var(--text-color) !important;

    }

    .form-select {
        border-radius: 6px;
        background-color: #133d45 !important;
        border: var(--quadrary-color) solid 2px !important;
        color: var(--text-color) !important;


    }

    input::placeholder,
    textarea::placeholder {
        color: #a8a6a6 !important;
        opacity: 0.7;
    }

    .form-control input:focus {
        outline: 0;
        border-color: var(--tertiary-color);
    }

    .form-control.success input {
        border-color: var(--success-color);
    }

    .form-control.error input {
        border-color: var(--error-color);
    }

    .form-control small {
        color: var(--error-color);
        position: absolute;
        bottom: 0;
        left: 0;
        visibility: hidden;
    }

    .form-control.error small {
        visibility: visible;
    }

    .btn-submit {
        cursor: pointer;
        background: #ffd700 !important;
        font-size: 16px;
        color: black !important;
        padding: 0.618em 1.2em;
        border-radius: 0.4em;

    }

    .btn-submit {
        outline: 0;
        background-color: #ffd700;
    }

    .card {
        background-color: #133d45 !important;
        color: White !important;
    }

    .form-label {
        color: White !important;
    }

    .news-marquee {
        width: 100%;
        overflow: hidden;
        background: #111;
        color: #fff;
        padding: 10px 0;
        position: relative;
        border-radius: 6px;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:hover,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-text-fill-color: #ffc107 !important;
        transition: background-color 5000s ease-in-out 0s;
    }
</style>

<style>
    .confirm-title {
        font-family: Public Sans;
        font-weight: 700;
        font-style: Bold;
        font-size: 20px;
        leading-trim: NONE;
        line-height: 28px;
        letter-spacing: 0px;
        text-decoration: underline;
        text-decoration-style: solid;
        text-decoration-offset: 0%;
        text-decoration-thickness: 0%;

    }

    .confirm-section-title {
        font-family: Public Sans;
        font-weight: 500;
        font-style: Medium;
        font-size: 15px;
        leading-trim: NONE;
        line-height: 28px;
        letter-spacing: 0px;
    }

    .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;
    }

    p.mb-0.fs-5 {
        font-family: Public Sans;
        font-weight: 700;
        font-style: Bold;
        font-size: 18px;
        leading-trim: NONE;
        line-height: 28px;
        letter-spacing: 0px;
        color: #2F2B3DE5;
    }

    strong.d-flex.text-start {
        font-family: Public Sans;
        font-weight: 500;
        font-style: Medium;
        font-size: 18px;
        leading-trim: NONE;
        line-height: 28px;
        letter-spacing: 0px;
        color: #2F2B3DE5;
    }

    .successcard.p-3.rounded.mb-4 {
        box-shadow: 0px 3px 12px 0px #2F2B3D24;
        background: var(--Misc-paper, #FFFFFF);
        box-shadow: 0px 3px 12px 0px #2F2B3D24;
    }

    .modal-dialog-scrollable .modal-content {
        max-height: 100%;
        overflow: auto !important;
    }

    .section-title {
        position: relative;
        margin: 25px 0 15px;
        text-align: center;
    }

    .section-title span {
        background: var(--form-bg);
        padding: 6px 20px;
        font-weight: 600;
        color: var(--text-color);
        letter-spacing: 1px;
        border-radius: 30px;
        border: 1px solid var(--quadrary-color);
        font-size: 14px;
        z-index: 1;
        position: relative;
    }

    .section-title::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--quadrary-color);
        z-index: 0;
    }
</style>
@section('content')

<div class="row align-items-center justify-content-between mb-3 mt-3 g-3">
    <div class="col-12 col-md-auto text-md-start">
        <h5 class="mb-0"> <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ url()->previous() }}">
                    <!-- back svg -->
                    <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">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>New Registration</h5>
    </div>

</div>

<div class="card p-3 p-md-5">

    <form action="{{ route('admin.users.store') }}" method="POST" id="registrationForm">
        @csrf

        <div class="section-title mt-1">
            <span><i class="ti tabler-share icon-base me-1"></i>Referral Details</span>
        </div>

        <div class="row g-3">

            {{-- Referral --}}
            {{-- Referral --}}
            <div class="col-md-4">
                <label class="form-label">Referral ID <span class="text-danger">*</span></label>

                <select class="form-select select2 @error('ref_id') is-invalid @enderror" name="ref_id" id="ref_id"
                    style="width:100%;" required>
                </select>

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


            {{-- Referral ID --}}
            <div class="col-md-8">
                <label class="form-label">Referral Name</label>
                <input type="text" id="referral_name" class="form-control @error('referral_name') is-invalid @enderror"
                    name="referral_name" value="{{ old('referral_name') }}" placeholder="Referral Name" readonly>

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

            <div class="section-title mt-1">
                <span><i class="ti tabler-user-circle icon-base me-1"></i>Personal Details</span>
            </div>
            <div class="col-md-6 mt-0 mb-3">
                <label class="form-label">Name <span class="text-danger">*</span></label>

                <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
                    value="{{ old('name') }}">
                @error('name')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- Phone --}}
            <div class="col-md-6 mt-0">
                <label class="form-label">Phone Number <span class="text-danger">*</span></label>

                <input type="text" class="form-control @error('phone_number') is-invalid @enderror" name="phone_number"
                    value="{{ old('phone_number') }}" maxlength="10">
                @error('phone_number')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- Email --}}
            <div class="col-md-6">
                <label class="form-label">Email <span class="text-danger">*</span></label>

                <input type="email" class="form-control @error('email') is-invalid @enderror" name="email"
                    value="{{ old('email') }}">
                @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- Address --}}
            <div class="col-md-6">
                <label class="form-label">Address <span class="text-danger">*</span></label>

                <input type="text" class="form-control @error('address') is-invalid @enderror" name="address"
                    value="{{ old('address') }}">
                @error('address')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- Pincode --}}
            <div class="col-md-4">
                <label class="form-label">Pincode <span class="text-danger">*</span></label>

                <input type="text" class="form-control @error('pincode') is-invalid @enderror" name="pincode"
                    value="{{ old('pincode') }}" maxlength="6">
                @error('pincode')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- State --}}
            <div class="col-md-4">
                <label class="form-label">State <span class="text-danger">*</span></label>

                <select class="form-select @error('state') is-invalid @enderror" name="state">
                    <option value="">Select State</option>
                    <option value="Tamil Nadu" {{ old('state') == 'Tamil Nadu' ? 'selected' : '' }}>Tamil Nadu</option>
                    <option value="Kerala" {{ old('state') == 'Kerala' ? 'selected' : '' }}>Kerala</option>
                    <option value="Karnataka" {{ old('state') == 'Karnataka' ? 'selected' : '' }}>Karnataka</option>
                </select>
                @error('state')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- Country --}}
            <div class="col-md-4">
                <label class="form-label">Country <span class="text-danger">*</span></label>

                <!-- <select class="form-select @error('country') is-invalid @enderror" name="country">
                        <option value="India" selected>India</option>
                    </select> -->
                <input type="text" class="form-control @error('country') is-invalid @enderror"
                    name="country" value="India" readonly>
                @error('country')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

        </div>

        {{-- ================= BANK DETAILS ================= --}}

        <div class="section-title mt-1">
            <span><i class="ti tabler-building-bank icon-base me-1"></i>Bank Details</span>
        </div>
        <div class="row g-3">

            <div class="col-md-6">
                <label class="form-label">Account Holder Name <span class="text-danger">*</span></label>

                <input type="text" class="form-control @error('account_holder') is-invalid @enderror"
                    name="account_holder" placeholder="Account Holder Name" value="{{ old('account_holder') }}">
                @error('account_holder')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6">
                <label class="form-label">Account Number <span class="text-danger">*</span></label>

                <input type="text" class="form-control @error('account_number') is-invalid @enderror"
                    name="account_number" placeholder="Account Number" value="{{ old('account_number') }}">
                @error('account_number')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label class="form-label">Bank Name <span class="text-danger">*</span></label>

                <input type="text" class="form-control @error('bank_name') is-invalid @enderror" name="bank_name"
                    placeholder="Bank Name" value="{{ old('bank_name') }}">
                @error('bank_name')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label class="form-label">Branch Name <span class="text-danger">*</span></label>

                <input type="text" class="form-control @error('branch_name') is-invalid @enderror" name="branch_name"
                    placeholder="Branch Name" value="{{ old('branch_name') }}">
                @error('branch_name')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label class="form-label">IFSC Code <span class="text-danger">*</span></label>

                <input type="text" class="form-control @error('ifsc') is-invalid @enderror" name="ifsc"
                    placeholder="IFSC Code" value="{{ old('ifsc') }}">
                @error('ifsc')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

        </div>


        <div class="section-title mt-1">
            <span><i class="ti tabler-user-scan icon-base me-1"></i>KYC Details</span>
        </div>


        <div class="row g-3">

            <div class="col-md-6">
                <label class="form-label">PAN Number <span class="text-danger">*</span></label>

                <input type="text" class="form-control @error('pan_number') is-invalid @enderror" name="pan_number"
                    placeholder="PAN Number" value="{{ old('pan_number') }}">
                @error('pan_number')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6">
                <label class="form-label">Aadhar Number <span class="text-danger">*</span></label>

                <input type="text" class="form-control @error('aadhar_number') is-invalid @enderror"
                    name="aadhar_number" placeholder="Aadhar Number" value="{{ old('aadhar_number') }}">
                @error('aadhar_number')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

        </div>

        <hr class="section-divider">

                        <!-- Nominee Details -->
                        <div class="section-title mt-1">
                            <span><i class="bi bi-person-circle me-1"></i> Nominee Details</span>
                        </div>
                        <div class="row">

                            <div class="col-lg-8">
                                <div class="row">
                                    <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" name="nominee_name"
                                            value="{{ $user->detail->nominee_name ?? '' }}" >
                                    </div>

                                    <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" name="nominee_phone"
                                            value="{{ $user->detail->nominee_phone ?? '' }}" >
                                    </div>
                                    <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" name="nominee_relation"
                                            value="{{ $user->detail->nominee_relation ?? '' }}" >
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <label class="form-label">Nominee Address <span class="text-danger">*</span></label>
                                <textarea class="form-control" name="nominee_address" rows="5"
                                    >{{ $user->detail->nominee_address ?? '' }}</textarea>
                            </div>
                        </div>

        {{-- ================= BUTTONS ================= --}}
        <div class="text-center mt-4">
            <button type="reset" class="btn btn-secondary me-2">Discard</button>
            <button type="submit" class="btn btn-primary">Submit</button>


        </div>

    </form>

</div>



<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">
                Registration Details Confirmation
            </h5>

            <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">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>

            <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" onclick="showSuccess()">Confirm</button>
            </div>

        </div>
    </div>
</div>



<div class="modal fade" id="successModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:660px;">
        <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 fs-md-2" style="letter-spacing: 2px;">
                    OMIGA <span class="text-danger">VIP</span>
                </h2>
            </div>

            <h1 class="fw-semibold mb-4 fs-3 fs-md-1">
                Welcome to Omiga VIP
            </h1>

            <div class="rounded-3 p-3 p-md-4 mb-4 text-start shadow-sm">
                <h5 class="fw-semibold mb-3">
                    Login Credentials for Omiga VIP
                </h5>

                <p class="mb-0 fs-5 fs-md-5">
                    Your login credentials will be sent to your registered email ID shortly.
                    <br class="d-none d-md-block"> Please check your inbox (and spam folder, if necessary).
                </p>
            </div>

            <button type="button" class="btn btn-outline-primary btn-lg w-100 py-3 rounded-3" data-bs-dismiss="modal">
                Close
            </button>

        </div>
    </div>
</div>
<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("registrationForm");
        const submitBtn = form.querySelector("button[type='submit']");

        let isSubmitting = false; // prevent multiple submits

        form.addEventListener("submit", function(event) {

            event.preventDefault();

            if (isSubmitting) return; // stop double click

            isSubmitting = true;
            submitBtn.disabled = true;
            submitBtn.innerText = "Validating...";

            clearErrors();

            fetch("{{ route('admin.validate') }}", {
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json'
                    },
                    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 === 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();

                    // Re-enable for confirmation step
                    isSubmitting = false;
                    submitBtn.disabled = false;
                    submitBtn.innerText = "Submit";
                });

        });

    });

    function showGeneralError(message) {

        let alertDiv = document.createElement("div");
        alertDiv.classList.add("alert", "alert-danger", "mt-3");
        alertDiv.innerText = message;

        const form = document.getElementById("registrationForm");
        form.prepend(alertDiv);
    }

    function showErrors(errors) {

        for (let field in errors) {

            const input = document.querySelector(`[name="${field}"]`);

            if (input) {
                input.classList.add("is-invalid");

                let errorDiv = document.createElement("div");
                errorDiv.classList.add("invalid-feedback");
                errorDiv.innerText = errors[field][0];

                input.parentNode.appendChild(errorDiv);
            }
        }
    }

    function clearErrors() {
        document.querySelectorAll(".is-invalid").forEach(el => el.classList.remove("is-invalid"));
        document.querySelectorAll(".invalid-feedback").forEach(el => el.remove());
    }



    function fillConfirmationModal() {

        document.getElementById('c_referral_id').innerText =
            document.querySelector('[name="ref_id"]').value;

        document.getElementById('c_referral_name').innerText =
            document.querySelector('[name="referral_name"]').value;

        document.getElementById('c_name').innerText =
            document.querySelector('[name="name"]').value;

        document.getElementById('c_phone').innerText =
            document.querySelector('[name="phone_number"]').value;

        document.getElementById('c_email').innerText =
            document.querySelector('[name="email"]').value;

        document.getElementById('c_address').innerText =
            document.querySelector('[name="address"]').value;

        document.getElementById('c_pincode').innerText =
            document.querySelector('[name="pincode"]').value;

        document.getElementById('c_state').innerText =
            document.querySelector('[name="state"]').value;

        document.getElementById('c_country').innerText =
            document.querySelector('[name="country"]').value;

        document.getElementById('c_account_holder').innerText =
            document.querySelector('[name="account_holder"]').value;

        document.getElementById('c_account_number').innerText =
            document.querySelector('[name="account_number"]').value;

        document.getElementById('c_bank').innerText =
            document.querySelector('[name="bank_name"]').value;

        document.getElementById('c_branch').innerText =
            document.querySelector('[name="branch_name"]').value;

        document.getElementById('c_ifsc').innerText =
            document.querySelector('[name="ifsc"]').value;

        document.getElementById('c_pan').innerText =
            document.querySelector('[name="pan_number"]').value;

        document.getElementById('c_aadhar').innerText =
            document.querySelector('[name="aadhar_number"]').value;
    }


    /* =========================
       Final Submit After Confirm
    ========================= */

    function showSuccess() {

        const confirmBtn = document.querySelector("#confirmationModal .btn-primary");

        if (confirmBtn.disabled) return;

        confirmBtn.disabled = true;
        confirmBtn.innerText = "Processing...";

        const confirmationModal = bootstrap.Modal.getInstance(
            document.getElementById('confirmationModal')
        );

        confirmationModal.hide();

        const form = document.getElementById("registrationForm");
        const formData = new FormData(form);

        fetch(form.action, {
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {

                const successModal = new bootstrap.Modal(
                    document.getElementById('successModal')
                );

                successModal.show();
                form.reset();

                confirmBtn.disabled = false;
                confirmBtn.innerText = "Confirm";
            });
    }
</script>
<script>
    $(document).ready(function() {

        $('#ref_id').select2({
            placeholder: "Search referral",
            minimumInputLength: 1,
            allowClear: true,
            ajax: {
                url: "{{ route('admin.referral.search') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function(data) {
                    return {
                        results: data.results
                    };
                }
            }
        });

        $('#ref_id').on('select2:select', function(e) {
            let data = e.params.data;
            $('#referral_name').val(data.name ?? '');
        });

    });
</script>


@endsection