

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

    <section class="transactions-section">
         
            <div class="transaction-filters">
            <button class="filter-option " onclick="window.location.href='<?php echo e(url('transactions')); ?>';">All Transaction</button>
            <button class="filter-option active" >Deposit Transaction</button>
             
        </div>
               

        <div class="transactions-list">
            <?php $__currentLoopData = $deposits; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $deposit): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="transaction-item">
                <div class="transaction-icon credit">
                    <img src="<?php echo e(($deposit->coin->icon)); ?>" alt="img" class="image-block imaged w48" width="40px" height="40px">
                </div>
                <div class="transaction-details">
                    <div class="transaction-info">
                        <h4><?php echo e($deposit->coin->name); ?></h4>
                        <p><?php if($deposit->status == 'pending'): ?>
                            <p class="text-small" style="background: #ab7a04;color: white;width: fit-content;padding: 3px;border-radius: 6px;font-size: 10px;font-weight: 900;">Pending</p>
                            <?php else: ?>
                            <p class="text-small" style="background: #198754;color: white;width: fit-content;padding: 3px;border-radius: 6px;font-size: 10px;font-weight: 900;">Sucessfull</p>
                            <?php endif; ?></p>
                    </div>
                    <?php
                                    $usdValue = $deposit->amount * ($deposit->coin->latest_price ?? 1);
                                ?>
                    <div class="transaction-amount credit">
                        <p>+<?php echo e(number_format($deposit->amount, 8)); ?> <span class="currency currency-btc"><?php echo e(strtoupper($deposit->coin->symbol)); ?></span></p>
                        <p><?php echo e(number_format($usdValue, 2)); ?> <span class="currency currency-usd"><?php echo e($settings->currency); ?></span></p>
                    </div>
                </div>
                <div class="transaction-date">
                    <p><?php echo e($deposit->created_at->format('Y-m-d')); ?></p>
                    <p><?php echo e($deposit->created_at->format('H:i:s')); ?></p>
                </div>
            </div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
             
        </div>
    </section>

     
<script>
document.addEventListener('DOMContentLoaded', () => {
    const filterOptions = document.querySelectorAll('.filter-option');
    const transactionItems = document.querySelectorAll('.transaction-item');

    filterOptions.forEach(option => {
        option.addEventListener('click', () => {
            // Remove active class from all filter options
            filterOptions.forEach(opt => opt.classList.remove('active'));
            option.classList.add('active');

            // Filter transactions
            const filterType = option.textContent.toLowerCase();
            transactionItems.forEach(item => {
                if (filterType === 'all') {
                    item.style.display = 'flex';
                } else {
                    const transactionType = item.querySelector('.transaction-amount').classList.contains(filterType) 
                        || (filterType === 'receive' && item.querySelector('.transaction-amount').classList.contains('credit'))
                        || (filterType === 'send' && item.querySelector('.transaction-amount').classList.contains('debit'));
                    
                    item.style.display = transactionType ? 'flex' : 'none';
                }
            });
        });
    });
});
</script>

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

.transaction-filters {
    display: flex;
    justify-content: space-between;
    background-color: var(--card-background);
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.filter-option {
    flex-grow: 1;
    padding: 15px;
    background-color: var(--card-background);
    border: none;
    color: rgba(255,255,255,0.6);
    transition: background-color 0.3s, color 0.3s;
}

.filter-option.active {
    background-color: var(--accent-green);
    color: var(--text-primary);
}

.transactions-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.transaction-item {
    display: flex;
    align-items: center;
    background-color: var(--card-background);
    border-radius: 10px;
    padding: 15px;
    position: relative;
}

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

.transaction-icon.credit {
    background-color: rgba(2, 192, 118, 0.2);
    color: var(--accent-green);
}

.transaction-icon.debit {
    background-color: rgba(248, 73, 96, 0.2);
    color: var(--accent-red);
}

.transaction-details {
    flex-grow: 1;
}

.transaction-info h4 {
    margin-bottom: 5px;
}

.transaction-info p {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
}

.transaction-amount {
    text-align: right;
}

.transaction-amount.credit {
    color: var(--accent-green);
}

.transaction-amount.debit {
    color: var(--accent-red);
}

.transaction-amount.swap {
    color: var(--text-primary);
}

.transaction-amount p:first-child {
    font-weight: bold;
    margin-bottom: 5px;
}

.transaction-amount p:last-child {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

.transaction-date {
    position: absolute;
    top: 15px;
    right: 15px;
    text-align: right;
}

.transaction-date p {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

.transaction-date p:first-child {
    margin-bottom: 3px;
}
</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/deposits.blade.php ENDPATH**/ ?>