@extends('User.layout')
<style>
    .reg-confirm-modal {
        border-radius: 10px;
        border: 1px solid #660066;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    }


    .reg-box {
        border: 2px solid #a24ccf;
        border-radius: 4px;
        padding: 14px 14px 12px 14px;
        position: relative;
    }

    .reg-box-title {
        position: absolute;
        top: -9px;
        left: 12px;
        background: white;
        padding: 0 6px;
        font-size: 11px;
        font-weight: 600;
    }

    .reg-text {
        font-size: 11px;
        line-height: 1.5;
    }

    .reg-label {
        font-weight: 600;
        /* color: #444; */
    }

    .reg-value {
        font-weight: 600;
    }

    .coin-header {
        background: linear-gradient(90deg, #4b1c82, #9b2c88, #0d4d7a);
    }

    .coin-close-btn {
        border: 1px solid #a24ccf !important;
    }

    #wallet_modal_section,
    #bank_modal_section,
    #wallet_title,
    #bank_title {
        display: none;
    }

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

    @import url('https://fonts.googleapis.com/css2?family=Lora&family=Yeseva+One&display=swap');

    * {
        --hibiscus-love: #fc465c;
        --fine-ii: #f9b198;
        --afl: #f9b198;
        --mexican-sky: #cfdddd;
        --brasillia-peach: #0A1F44;
        --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;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: 'Yeseva One', Georgia, cursive;
        color: var(--header-color);
    }

    body {
        font-family: 'Lora', 'Times New Roman', serif;
        background-color: var(--bg-color);
        color: var(--free);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column nowrap;
        min-height: 100vh;
    }

    .container {
        width: 400px;
        border-radius: 0.6em;
        padding: 20px;
        background-color: var(--form-bg) !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 {
        border-radius: 6px;
        background: var(--form-bg) !important;
        border: var(--quadrary-color) solid 2px !important;
        display: block;
        width: 100%;
        color: var(--text-color) !important;

    }

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


    }

    .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;
        box-shadow: 4px 4px 8px #c19c66, -4px -4px 8px #fffaa4;
        border: 1px solid #ec263c66;
        font-size: 16px;
        color: black !important;
        padding: 0.618em 1.2em;
        border-radius: 0.4em;

    }

    .btn-submit {
        outline: 0;
        background-color: #ffd700;
    }
</style>
@section('content')


    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5>Registration Form</h5>
        </div>
        <div class="col-auto">
            <button class="btn btn-primary" id="copyReferralBtn"><i class="ti tabler-link"></i>&nbsp;Refer</button>
        </div>
        <input type="hidden" id="referralLink" value="{{ $referralLink }}">
    </div>

    <div class="container">
        <div class="card-body">


            <div class="mb-3">

                <form action="{{route('user_register')}}" method="POST" id="userRegisterForm" novalidate>
                    @csrf
                    <input type="hidden" name="confirmed" id="confirmed" value="0">
                    <div class="row g-3">

                        <div class="col-md-3">
                            <label class="form-label small mb-1">
                                Referral ID <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" placeholder="Enter Referral ID" name="ref_id"
                                id="ref_id" value="{{ old('ref_id', $user->user_id) }}">
                            @error('ref_id')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label small mb-1">
                                Referral Name <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" placeholder="Enter Referral Name" name="ref_name"
                                id="ref_name" value="{{ old('ref_name', $user->name) }}" readonly>
                            @error('ref_name')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label small mb-1">
                                Name <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" placeholder="Enter Name" name="name" id="name"
                                value="{{old('name')}}">
                            @error('name')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label class="form-label small mb-1">
                                Phone Number <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" placeholder="Enter Phone Number" name="phone_number"
                                id="phone_number" value="{{old('phone_number')}}"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');" maxlength="10">
                            @error('phone_number')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>


                        <div class="col-lg-8">
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label small mb-1">
                                        Email <span class="text-danger">*</span>
                                    </label>
                                    <input type="email" class="form-control" placeholder="Enter Email" name="email"
                                        id="email" value="{{old('email')}}">
                                    @error('email')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small mb-1">
                                        Pincode <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" class="form-control" placeholder="Enter Pincode" name="pincode"
                                        id="pincode" value="{{ old('pincode') }}"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '');" maxlength="6">
                                    @error('pincode')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label small mb-1">
                                        State <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select" name="state" id="state">
                                        <option value="">Select</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')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label small mb-1">
                                        Country <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select" name="country" id="country">
                                        <option value="">Select</option>
                                        <option value="India" {{ old('country') == 'India' ? 'selected' : '' }}>India</option>
                                        <option value="USA" {{ old('country') == 'USA' ? 'selected' : '' }}>USA</option>
                                        <option value="UAE" {{ old('country') == 'UAE' ? 'selected' : '' }}>UAE</option>
                                    </select>
                                    @error('country')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small mb-1">
                                Address <span class="text-danger">*</span>
                            </label>
                            <textarea type="text" class="form-control" placeholder="Enter Address" name="address"
                                id="address" rows="4">{{ old('address') }}</textarea>
                            @error('address')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>


                              <div class="col-md-4">
                                     <label class="form-label">Nominee Name<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" placeholder="Enter Nominee Name">

                                </div>
                                <div class="col-md-4">
                                     <label class="form-label">Nominee Relation<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" placeholder="Enter Nominee Relation">

                                </div>
                                <div class="col-md-4">
                                     <label class="form-label">Nominee Mobile Number<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" placeholder="Enter Nominee Mobile Number">

                                </div>
                                <div class="col-md-12">
                                     <label class="form-label">Nominee Address<span class="text-danger">*</span></label>
                                    <textarea type="text" class="form-control" rows="2" placeholder="Enter Nominee Address"></textarea>

                                </div>
                                <div class="col-md-6">
                                     <label class="form-label">Aadhar Number<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" placeholder="Enter Aadhar Number">

                                </div>
                                <div class="col-md-6">
                                     <label class="form-label">Pan Number<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" placeholder="Enter Pan Number">

                                </div>
                    </div>
                    <div class="col-md-12 mt-4">
                        <label class="form-label  mb-1" style="font-size:16px;">
                            <b>Payout Method</b> <span class="text-danger">*</span>
                        </label>
                        <select class="form-select" name="payment_method" id="payment_method">
                            <option value="">Select</option>
                            <!-- <option value="Wallet" {{ old('payment_method')=='Wallet'?'selected':'' }}>Wallet</option> -->
                            <option value="Bank" {{ old('payment_method') == 'Bank' ? 'selected' : '' }}>Bank</option>
                        </select>

                        @error('country')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="mt-4 d-none" id="wallet_section">
                        <div class="fw-semibold small mb-2">Wallet Details</div>

                        <div class="row g-3">

                            <div class="col-md-3">
                                <label class="form-label small mb-1">
                                    Network <span class="text-danger">*</span>
                                </label>
                                <select class="form-select" name="network" id="network">
                                    <option value="">Select</option>
                                    <option value="TRC20" {{ old('network') == 'TRC20' ? 'selected' : '' }}>TRC20</option>
                                    <option value="ERC20" {{ old('network') == 'ERC20' ? 'selected' : '' }}>ERC20</option>
                                    <option value="BEP20" {{ old('network') == 'BEP20' ? 'selected' : '' }}>BEP20</option>
                                </select>

                                @error('network')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>



                            <div class="col-md-3">
                                <label class="form-label small mb-1">
                                    Wallet Address <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" placeholder="Enter Wallet Address"
                                    name="wallet_address" id="wallet_address" value="{{ old('wallet_address') }}">
                                @error('wallet_address')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                        </div>
                    </div>

                    <div class="mt-4 d-none" id="bank_section">
                        <div class="fw-semibold small mb-2">Bank Details</div>

                        <div class="row g-3">

                            <div class="col-md-4">
                                <label class="form-label small mb-1">
                                    Account Holder Name <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" placeholder="Account Holder Name"
                                    name="account_holder" id="account_holder" value="{{ old('account_holder') }}">
                                @error('account_holder')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label small mb-1">
                                    Account Number <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" placeholder="Enter Account Number"
                                    name="account_number" id="account_number" value="{{ old('account_number') }}"
                                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                                @error('account_number')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label small mb-1">
                                    Bank Name<span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" placeholder="Enter Bank Name" name="bank_name"
                                    id="bank_name" value="{{ old('bank_name') }}">
                                @error('bank_name')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small mb-1">
                                    Branch Name <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" placeholder="Enter Branch Name" name="branch_name"
                                    id="branch_name" value="{{ old('branch_name') }}">
                                @error('branch_name')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small mb-1">
                                    IFSC Code <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" placeholder="Enter IFSC Code" name="ifsc" id="ifsc"
                                    value="{{ old('ifsc') }}">
                                @error('ifsc')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <span class="fw-bold text-danger">* indicates required field.</span>

                    </div>
                    <div class="d-flex justify-content-center gap-3 mt-4">
                        <button type="reset" class="btn btn-label-secondary px-5 btn-sm">Discard</button>
                        <button type="button" id="previewBtn" class="btn btn-submit px-5 btn-sm">Create</button>
                    </div>

                </form>
            </div>

        </div>
    </div>

    <div class="modal fade" id="regConfirmModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content reg-confirm-modal p-4">

                <h6 class="text-center fw-semibold mb-4 reg-title">
                    Registration Details Confirmation
                </h6>

                <h6>Personal Details</h6>
                <div class="reg-box mb-3">

                    <div class="row g-2 reg-text">
                        <div class="col-md-4">
                            <span class="reg-label">Referral Id</span> :
                            <span class="reg-value" id="m_ref_id"></span>
                        </div>

                        <div class="col-md-4">
                            <span class="reg-label">Referral Name</span> :
                            <span class="reg-value" id="m_ref_name"></span>
                        </div>

                        <div class="col-md-4">
                            <span class="reg-label">Name</span> :
                            <span class="reg-value" id="m_name"></span>
                        </div>

                        <div class="col-md-4">
                            <span class="reg-label">Phone Number</span> :
                            <span class="reg-value" id="m_phone"></span>
                        </div>

                        <div class="col-md-4">
                            <span class="reg-label">Email</span> :
                            <span class="reg-value" id="m_email"></span>
                        </div>

                        <div class="col-md-4">
                            <span class="reg-label">Pin code</span> :
                            <span class="reg-value" id="m_pincode"></span>
                        </div>

                        <div class="col-md-4">
                            <span class="reg-label">Address</span> :
                            <span class="reg-value" id="m_address">
                            </span>
                        </div>

                        <div class="col-md-4">
                            <span class="reg-label">State</span> :
                            <span class="reg-value" id="m_state"></span>
                        </div>

                        <div class="col-md-4">
                            <span class="reg-label">Country</span> :
                            <span class="reg-value" id="m_country"></span>
                        </div>
                    </div>
                </div>

                <h6 id="wallet_title">Wallet Details</h6>
                <div class="reg-box mb-4" id="wallet_modal_section">

                    <div class="row g-2 reg-text">
                        <div class="col-md-4">
                            <span class="reg-label">Network</span> :
                            <span class="reg-value" id="m_network"></span>
                        </div>

                        <div class="col-md-8">
                            <span class="reg-label">Wallet Address</span> :
                            <span class="reg-value" id="m_wallet">
                            </span>
                        </div>
                    </div>
                </div>

                <h6 id="bank_title">Bank Details</h6>
                <div class="reg-box mb-4" id="bank_modal_section">

                    <div class="row g-2 reg-text">
                        <div class="col-md-4">
                            <span class="reg-label">Account Holder Name</span> :
                            <span class="reg-value" id="m_account_holder"></span>
                        </div>

                        <div class="col-md-4">
                            <span class="reg-label">Account Number</span> :
                            <span class="reg-value" id="m_account_number">
                            </span>
                        </div>
                        <div class="col-md-4">
                            <span class="reg-label">Bank Name</span> :
                            <span class="reg-value" id="m_bank_name"></span>
                        </div>

                        <div class="col-md-4">
                            <span class="reg-label">Branch Name</span> :
                            <span class="reg-value" id="m_branch_name">
                            </span>
                        </div>

                        <div class="col-md-4">
                            <span class="reg-label">IFSC Code</span> :
                            <span class="reg-value" id="m_ifsc"></span>
                        </div>


                    </div>
                </div>

                <div class="d-flex justify-content-center gap-3">
                    <button type="button" class="btn btn-outline-primary px-5" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="button" id="finalSubmit" class="btn btn-primary px-5">
                        Confirm
                    </button>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="welcomeModal" tabindex="-1">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content shadow border-0 rounded-3 p-4 bg-light">

                <div class="coin-header text-center rounded-3 py-2 mb-3">
                    <h2 class="fw-light m-0 text-white">COIN</h2>
                </div>

                <h4 class="text-center fw-bold mb-3 text-dark">
                    Welcome to Coin
                </h4>

                <div class="card border rounded-3 p-3 mb-3">
                    <p class="mb-2 fw-semibold text-muted small">
                        Login Credentials for Coin
                    </p>

                    <p class="mb-0 small text-muted">
                        <b>Your login credentials</b> will be sent to your registered email ID shortly.
                        <br>
                        Please check your inbox (and spam folder, if necessary).
                    </p>
                </div>

                <button type="button" class="btn btn-outline-danger w-100 py-2 coin-close-btn" data-bs-dismiss="modal">
                    Close
                </button>

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

    <div class="position-fixed top-0 end-0 p-3" style="z-index: 9999;">
        <div id="referralToast" class="toast align-items-center text-white bg-primary border-0" role="alert"
            aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
            <div class="d-flex">
                <div class="toast-body">
                    Referral link copied!
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {

            function togglePayoutFields() {
                let method = $('#payment_method').val();

                if (method === 'Wallet') {
                    $('#wallet_section').removeClass('d-none');
                    $('#bank_section').addClass('d-none');
                } else if (method === 'Bank') {
                    $('#bank_section').removeClass('d-none');
                    $('#wallet_section').addClass('d-none');
                } else {
                    $('#wallet_section, #bank_section').addClass('d-none');
                }
            }

            $('#payment_method').on('change', function () {
                togglePayoutFields();
            });

            togglePayoutFields();

        });
    </script>
    <script>
        $(document).ready(function () {

            $('#ref_id').on('keyup change', function () {

                let refId = $(this).val();

                if (refId.length < 2) {
                    $('#ref_name').val('');
                    return;
                }

                $.ajax({
                    url: "{{ route('ref_user') }}",
                    type: "GET",
                    data: {
                        ref_id: refId
                    },

                    success: function (response) {
                        if (response.status) {
                            $('#ref_name')
                                .val(response.name)
                                .removeClass('text-danger')
                        } else {
                            $('#ref_name')
                                .val('User not found')
                                .addClass('text-danger');
                        }
                    }
                });
            });


        });

        $(document).ready(function () {

            $('#previewBtn').on('click', function (e) {
                e.preventDefault();

                let btn = $(this);

                if (btn.prop('disabled')) {
                    return;
                }

                btn.prop('disabled', true).text('Processing...');

                $('small.text-danger').remove();

                let form = $('#userRegisterForm');
                let formData = form.serialize();

                $.ajax({
                    url: "{{ route('user_register') }}",
                    type: "POST",
                    data: formData,
                    success: function (response) {
                        if (response.status) {


                            let method = $('#payment_method').val();

                            if (method === 'Wallet') {
                                $('#wallet_modal_section, #wallet_title').show();
                                $('#bank_modal_section, #bank_title').hide();
                            } else if (method === 'Bank') {
                                $('#bank_modal_section, #bank_title').show();
                                $('#wallet_modal_section, #wallet_title').hide();
                            } else {
                                $('#wallet_modal_section, #bank_modal_section').hide();
                            }
                            $('#m_ref_id').text($('#ref_id').val());
                            $('#m_ref_name').text($('#ref_name').val());
                            $('#m_name').text($('#name').val());
                            $('#m_phone').text($('#phone_number').val());
                            $('#m_email').text($('#email').val());
                            $('#m_pincode').text($('#pincode').val());
                            $('#m_address').text($('#address').val());
                            $('#m_state').text($('#state option:selected').text());
                            $('#m_country').text($('#country option:selected').text());
                            $('#m_network').text($('#network option:selected').text());
                            $('#m_wallet').text($('#wallet_address').val());
                            $('#m_account_holder').text($('#account_holder').val());
                            $('#m_account_number').text($('#account_number').val());
                            $('#m_bank_name').text($('#bank_name').val());
                            $('#m_branch_name').text($('#branch_name').val());
                            $('#m_ifsc').text($('#ifsc').val());

                            $('#regConfirmModal').modal('show');
                        }
                        btn.prop('disabled', false).text('Create');

                    },
                    error: function (xhr) {
                        btn.prop('disabled', false).text('Create');
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            $.each(errors, function (key, value) {
                                let input = $('#' + key);
                                input.after('<small class="text-danger">' + value[0] + '</small>');
                            });
                        } else {
                            alert("Something went wrong. Try again!");
                        }
                    }
                });
            });

            $('#finalSubmit').on('click', function () {
                $('#confirmed').val('1');
                $('#userRegisterForm').submit();
            });

            $(document).ready(function () {
                $('#userRegisterForm input, #userRegisterForm select').on('input change', function () {
                    $(this).next('small.text-danger').remove();
                });
            });

        });
    </script>

    @if(session('success'))
        <script>
            $(document).ready(function () {
                $('#welcomeModal').modal('show');
            });
        </script>
    @endif


    <script>
        $(document).ready(function () {
            const copyBtn = $('#copyReferralBtn');
            const referralLink = $('#referralLink').val();
            const referralToastEl = $('#referralToast');
            const referralToast = new bootstrap.Toast(referralToastEl[0]);

            copyBtn.on('click', function (e) {
                e.preventDefault();
                if (!referralLink) return;

                // Modern clipboard API
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(referralLink)
                        .then(() => {
                            referralToast.show();
                        })
                        .catch(err => console.error('Clipboard failed:', err));
                } else {
                    // Fallback for HTTP / non-secure
                    const tempInput = $('<input>');
                    $('body').append(tempInput);
                    tempInput.val(referralLink).select();
                    document.execCommand('copy');
                    tempInput.remove();
                    referralToast.show();
                }
            });
        });
    </script>
    <!-- <script>
        $(document).ready(function() {

            const copyBtn = $('#copyReferralBtn');
            const referralLink = $('#referralLink').val();
            const referralToastEl = $('#referralToast');
            const referralToast = new bootstrap.Toast(referralToastEl[0]);

            copyBtn.on('click', function(e) {
                e.preventDefault();
                if (!referralLink) return;

                navigator.clipboard.writeText(referralLink)
                    .then(() => {
                        referralToast.show();
                    })
                    .catch(err => console.error('Failed to copy:', err));
            });
        });
    </script> -->
@endsection