<?php
include 'header.php';

?>

    
    <div class="pt-28 md:pt-0 mt-0 md:mt-36 w-full md:w-4/5" id="general-content">
        <div class="w-full md:w-10/12 md:ml-64 2xl:ml-1/5" id="general-content-section">

            
            <div class="w-full py-5">
    <div class="w-full flex justify-center">
        <div class="w-11/12 rounded-md bg-[#0e1726] p-2 md:p-4">
            <div class="flex justify-between items-center">
                <div>
                    
                    <h2 class="bg-transparent text-[#ebedf2] font-medium capitalize">
                        my deposit
                    </h2>
                </div>

                <div>
                    <a href="dashboard.php" class="flex justify-start items-center text-xs text-gray-400 hover:text-white">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
                        </svg>
                        <span>back</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
            

            
            <div id="preloader" class="action-preloader">
    <div id="loading-bar-spinner" class="spinner">
        <div class="spinner-icon"></div>
    </div>
</div>

            
            
            
                        

            
            <div class="py-5">
    <div class="w-full flex justify-center">
        <div class="w-11/12 rounded-sm bg-[#0e1726] p-4">
            
            
            
         <?php
// Assuming you have a MySQLi connection established as $conn
// and $user_id is defined

// Query to get total deposits
$total_query = "SELECT SUM(amount) as total FROM deposits WHERE user_id = $user_id";
$total_result = mysqli_query($conn, $total_query);
$total_row = mysqli_fetch_assoc($total_result);
$total_deposits = $total_row['total'] ?? 0;

// Query to get pending deposits
$pending_query = "SELECT SUM(amount) as total FROM deposits WHERE user_id = $user_id AND status = 'pending'";
$pending_result = mysqli_query($conn, $pending_query);
$pending_row = mysqli_fetch_assoc($pending_result);
$pending_deposits = $pending_row['total'] ?? 0;

// Query to get approved deposits
$approved_query = "SELECT SUM(amount) as total FROM deposits WHERE user_id = $user_id AND status = 'completed'";
$approved_result = mysqli_query($conn, $approved_query);
$approved_row = mysqli_fetch_assoc($approved_result);
$approved_deposits = $approved_row['total'] ?? 0;

// Query to get rejected deposits
$rejected_query = "SELECT SUM(amount) as total FROM deposits WHERE user_id = $user_id AND status = 'rejected'";
$rejected_result = mysqli_query($conn, $rejected_query);
$rejected_row = mysqli_fetch_assoc($rejected_result);
$rejected_deposits = $rejected_row['total'] ?? 0;

?>

<div class="w-full py-5">
    <div class="w-full lg:flex lg:justify-evenly lg:space-x-2 space-y-3 lg:space-y-0 text-[#bfc9d4]">
        <!-- Total Deposits Card -->
        <div class="flex lg:block justify-between items-center bg-[#152136] px-3 lg:px-5 py-2 lg:py-3 hover:text-white cursor-pointer rounded-md">
            <div class="hidden lg:block relative w-full">
                <div class="absolute flex justify-center items-center -top-7 -right-7 h-9 w-9 rounded-full bg-blue-600 text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                    </svg>
                </div>
            </div>
            <div>
                <div>
                    <h2 class="text-sm lg:text-base font-semibold">USD<?= number_format($total_deposits, 2) ?></h2>
                </div>
                <div class="mt-2">
                    <h4 class="text-xs lg:text-sm font-medium">Total deposits</h4>
                </div>
            </div>
            <div class="lg:hidden opacity-50">
                <div class="flex justify-center items-center h-9 w-9 rounded-full bg-blue-600 text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- Pending Deposits Card -->
        <div class="flex lg:block justify-between items-center bg-[#152136] px-3 lg:px-5 py-2 lg:py-3 hover:text-white cursor-pointer rounded-md">
            <div class="hidden lg:block relative w-full">
                <div class="absolute flex justify-center items-center -top-7 -right-7 h-9 w-9 rounded-full bg-orange-600 text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
                        <path d="M15.566 11.021A7.016 7.016 0 0 0 19 5V4h1V2H4v2h1v1a7.016 7.016 0 0 0 3.434 6.021c.354.208.566.545.566.9v.158c0 .354-.212.69-.566.9A7.016 7.016 0 0 0 5 19v1H4v2h16v-2h-1v-1a7.014 7.014 0 0 0-3.433-6.02c-.355-.21-.567-.547-.567-.901v-.158c0-.355.212-.692.566-.9zm-1.015 3.681A5.008 5.008 0 0 1 17 19v1H7v-1a5.01 5.01 0 0 1 2.45-4.299c.971-.573 1.55-1.554 1.55-2.622v-.158c0-1.069-.58-2.051-1.551-2.623A5.008 5.008 0 0 1 7 5V4h10v1c0 1.76-.938 3.406-2.449 4.298C13.58 9.87 13 10.852 13 11.921v.158c0 1.068.579 2.049 1.551 2.623z"></path>
                    </svg>
                </div>
            </div>
            <div>
                <div>
                    <h2 class="text-sm lg:text-base font-semibold">USD<?= number_format($pending_deposits, 2) ?></h2>
                </div>
                <div class="mt-2">
                    <h4 class="text-xs lg:text-sm font-medium">Pending deposits</h4>
                </div>
            </div>
            <div class="lg:hidden opacity-50">
                <div class="flex justify-center items-center h-9 w-9 rounded-full bg-orange-600 text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
                        <path d="M15.566 11.021A7.016 7.016 0 0 0 19 5V4h1V2H4v2h1v1a7.016 7.016 0 0 0 3.434 6.021c.354.208.566.545.566.9v.158c0 .354-.212.69-.566.9A7.016 7.016 0 0 0 5 19v1H4v2h16v-2h-1v-1a7.014 7.014 0 0 0-3.433-6.02c-.355-.21-.567-.547-.567-.901v-.158c0-.355.212-.692.566-.9zm-1.015 3.681A5.008 5.008 0 0 1 17 19v1H7v-1a5.01 5.01 0 0 1 2.45-4.299c.971-.573 1.55-1.554 1.55-2.622v-.158c0-1.069-.58-2.051-1.551-2.623A5.008 5.008 0 0 1 7 5V4h10v1c0 1.76-.938 3.406-2.449 4.298C13.58 9.87 13 10.852 13 11.921v.158c0 1.068.579 2.049 1.551 2.623z"></path>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Approved Deposits Card -->
        <div class="flex lg:block justify-between items-center bg-[#152136] px-3 lg:px-5 py-2 lg:py-3 hover:text-white cursor-pointer rounded-md">
            <div class="hidden lg:block relative w-full">
                <div class="absolute flex justify-center items-center -top-7 -right-7 h-9 w-9 rounded-full bg-green-600 text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>
            <div>
                <div>
                    <h2 class="text-sm lg:text-base font-semibold">USD<?= number_format($approved_deposits, 2) ?></h2>
                </div>
                <div class="mt-2">
                    <h4 class="text-xs lg:text-sm font-medium">Approved deposits</h4>
                </div>
            </div>
            <div class="lg:hidden opacity-50">
                <div class="flex justify-center items-center h-9 w-9 rounded-full bg-green-600 text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- Rejected Deposits Card -->
        <div class="flex lg:block justify-between items-center bg-[#152136] px-3 lg:px-5 py-2 lg:py-3 hover:text-white cursor-pointer rounded-md">
            <div class="hidden lg:block relative w-full">
                <div class="absolute flex justify-center items-center -top-7 -right-7 h-9 w-9 rounded-full bg-red-600 text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                    </svg>
                </div>
            </div>
            <div>
                <div>
                    <h2 class="text-sm lg:text-base font-semibold">USD<?= number_format($rejected_deposits, 2) ?></h2>
                </div>
                <div class="mt-2">
                    <h4 class="text-xs lg:text-sm font-medium">Rejected deposits</h4>
                </div>
            </div>
            <div class="lg:hidden opacity-50">
                <div class="flex justify-center items-center h-9 w-9 rounded-full bg-red-600 text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>
            
            
            
                            <div class="w-full flex justify-center items-center mt-5">
                    <div class="w-full flex justify-center items-center lg:w-2/3">
                        <canvas id="myChart" width="100" height="100"></canvas>
                    </div>
                </div>
                    </div>
    </div>
</div>



            

            
            <div class="py-5">
    <div class="w-full flex justify-center">
        <div class="w-11/12 rounded-sm bg-[#0e1726] p-1 md:p-4">
                   <?php
// Assuming you already have a database connection established
// $user_id should be defined somewhere before this code

$query = "SELECT `id`, `user_id`, `amount`, `currency`, `usd_amount`, `wallet_address`, `payment_method`, `proof_image`, `status`, `charge`, `created_at`, `updated_at` FROM `deposits` WHERE user_id = $user_id";
$result = mysqli_query($conn, $query); // Replace $conn with your DB connection variable

if(mysqli_num_rows($result) > 0) {
    // Start the table with your original styling
    echo '<table id="datatable-skeleton-table" class="text-[#bfc9d4] text-xs md:text-sm">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Date</th>
                    <th>Amount</th>
                    <th>Method</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody width="100%">';
    
    $counter = 1;
    
    // Using do-while loop to fetch and display the data
    do {
        $row = mysqli_fetch_assoc($result);
        if($row) {
            // Format the date (assuming created_at is a timestamp)
            $date = date("d.m.Y H:i:s", strtotime($row['created_at']));
            
            // Format the amount with currency
            $amount = strtoupper($row['currency']) . number_format($row['amount'], 2);
            
            // Format status (lowercase for consistency with your example)
            $status = strtolower($row['status']);
            
            echo '<tr>
                    <td>'.$counter.'</td>
                    <td>'.$date.'</td>
                    <td>'.$amount.'</td>
                    <td>'.htmlspecialchars($row['payment_method']).'</td>
                    <td>'.$status.'</td>
                  </tr>';
            
            $counter++;
        }
    } while($row);
    
    echo '</tbody></table>';
} else {
    echo '<p>No deposits found.</p>';
}

// Free the result set
mysqli_free_result($result);
?>
                    </div>
    </div>
</div>
            

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


<?php include 'footer.php'; ?>