

<?php $__env->startSection('content'); ?>
<div class="app-container">
    <header>
        <div class="logo">Deposit</div>
    </header>

    <form action="<?php echo e(route('user.deposit.submit')); ?>" method="POST">
        <?php echo csrf_field(); ?>
        <section class="deposit-section">
            <div class="deposit-form">
                <div class="input-group coin-select">
                    <label>Select Coin</label>
                    <div class="coin-selector">
                        
                        <select name="coin_id" id="coin_id" class="form-select form-select-lg currency" style="width: 100%;" onchange="updateConversionRate()">
                            <?php $__currentLoopData = $coins; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $coin): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option 
                                value="<?php echo e($coin->id); ?>" 
                                data-symbol="<?php echo e($coin->sname); ?>" 
                                data-rate="<?php echo e($coin->latest_price); ?>" 
                                data-custom-price="<?php echo e($coin->custom_price ?? 'null'); ?>" 
                                data-icon="<?php echo e($coin->icon); ?>">
                                <?php echo e($coin->name); ?>

                            </option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                </div>

                <div class="input-group deposit-amount">
                    <label>Deposit Amount</label>
                    <input 
                        type="number" 
                        name="amount" 
                        id="depositAmount" 
                        placeholder="10" 
                        required maxlength="1000000" 
                        oninput="convertToCrypto()" 
                        min="0" 
                        step="0.00000001">
                    <div class="amount-quick-select">
                        <button type="button" onclick="setQuickAmount(50)">$50</button>
                        <button type="button" onclick="setQuickAmount(100)">$100</button>
                        <button type="button" onclick="setQuickAmount(500)">$500</button>
                        <button type="button" onclick="setQuickAmount('max')">Max</button>
                    </div>
                </div>

                <div class="deposit-details">
                    <div class="detail-item">
                        <span>Input amount in USD</span>
                        <span><span id="cryptoAmountResult" style="color: green;">Crypto amount here</span></span>
                    </div>
                </div>

                <button class="btn-continue" type="submit">Continue to Deposit</button>
            </div>
        </section>
    </form>

    <script>
       let currentRate = 1; // Default conversion rate
let currentSymbol = ''; // Default coin symbol

// Update the conversion rate, symbol, and coin icon based on the selected coin
function updateConversionRate() {
    const coinSelect = document.getElementById('coin_id');
    const selectedOption = coinSelect.options[coinSelect.selectedIndex];

    // Get the relevant data attributes
    const customPrice = selectedOption.getAttribute('data-custom-price');
    const icon = selectedOption.getAttribute('data-icon'); // Coin icon URL
    const coinIconElement = document.getElementById('from_coin_icon'); // The <img> element

    // Update the conversion rate and symbol
    currentRate = customPrice !== 'null' ? parseFloat(customPrice) : parseFloat(selectedOption.getAttribute('data-rate'));
    currentSymbol = selectedOption.getAttribute('data-symbol');

    // Debugging: Check what `icon` contains
    console.log("Selected Icon URL:", icon);

    // Update the image src if the icon is valid
    if (icon && coinIconElement) {
        coinIconElement.src = icon;
    } else {
        console.error("Icon URL is missing or invalid:", icon);
    }

    // Update the crypto amount
    convertToCrypto();
}


// Convert the input USD amount to the crypto value
function convertToCrypto() {
    const usdAmount = parseFloat(document.getElementById('depositAmount').value);
    const cryptoAmount = (usdAmount / currentRate) || 0; // Avoid NaN or Infinity
    document.getElementById('cryptoAmountResult').textContent = `${cryptoAmount.toFixed(8)} ${currentSymbol}`;
}

// Quick select amount buttons
document.querySelectorAll('.amount-quick-select button').forEach((button) => {
    button.addEventListener('click', (event) => {
        const amount = parseFloat(event.target.textContent.replace('$', '').trim());
        document.getElementById('depositAmount').value = amount;
        convertToCrypto();
    });
});

// Initialize with default selected coin
document.addEventListener('DOMContentLoaded', updateConversionRate);

    </script>

    <style>
        /* Add your CSS styles here */
    </style>
</div>



<style>
.deposit-section {
    padding: 20px;
}

.deposit-form {
    background-color: var(--card-background);
    border-radius: 15px;
    padding: 20px;
}

.coin-select {
    margin-bottom: 20px;
}

.coin-selector {
    display: flex;
    align-items: center;
    background-color: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 10px;
}

.coin-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.coin-icon i {
    color: white;
    font-size: 24px;
}

.coin-selector select {
    background: none;
    border: none;
    color: var(--text-primary);
    flex-grow: 1;
    font-size: 16px;
}

.deposit-amount input {
    width: 100%;
    background-color: rgba(255,255,255,0.05);
    border: none;
    border-radius: 10px;
    padding: 15px;
    color: var(--text-primary);
    font-size: 20px;
    margin-bottom: 15px;
}

.amount-quick-select {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.amount-quick-select button {
    background-color: rgba(255,255,255,0.1);
    border: none;
    color: var(--text-primary);
    padding: 10px;
    border-radius: 5px;
    flex-grow: 1;
    margin: 0 5px;
}

.deposit-details {
    background-color: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: rgba(255,255,255,0.7);
}

.btn-continue {
    width: 100%;
    padding: 15px;
    background-color: var(--accent-green);
    color: var(--text-primary);
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-continue:hover {
    background-color: #01a866;
    transform: translateY(-2px);
}
</style>
<?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/deposit.blade.php ENDPATH**/ ?>