<?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 id="preloader" class="action-preloader">-->
        <!--    <div id="loading-bar-spinner" class="spinner">-->
        <!--        <div class="spinner-icon"></div>-->
        <!--    </div>-->
        <!--</div>-->

        <div class="w-full py-5">
            <div class="w-full flex justify-center">
                <div class="w-11/12 md:w-12/12 rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
                    <div class="">
                        <div class="">
                            <div class="md:flex md:justify-between md:space-x-5">
                                <div class="w-full  rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4 md:w-1/2">
                                    <div
                                        class="w-full  space-x-2 rounded-lg bg-[#131d2c] text-[#d3d6df] p-2 md:p-4 text-xs md:text-sm">
                                        <h2 class="bg-transparent text-[#ebedf2] font-medium capitalize">
                                            Hi
                                            <?php echo $full_name ?>
                                        </h2>


                                        <div class="mt-4">
                                            <a href="trading.php"
                                                class="flex justify-start items-center space-x-1 text-xs md:text-sm text-[#d1d5db] text-center px-5 py-2 my-2 bg-[#1b2e4b] hover:bg-gray-700 rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110">

                                                START TRADING
                                            </a>
                                        </div>


                                    </div>
                                </div>
                                <div class="w-full  rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4 ms:w-2/3">
                                    <div
                                        class="w-full rounded-lg bg-[#131d2c] text-[#d3d6df] p-2 md:p-3 text-xs md:text-sm">
                                        <div
                                            class="w-full flex flex-wrap  justify-evenly md:justify-center items-center space-x-0 lg:space-x-5 mt-10 mb-5">

                                            <a class="w-5/12 md:w-auto flex items-center text-xs md:text-sm space-x-1 px-3 py-1 rounded-lg bg-green-500 hover:bg-gray-600 mb-2"
                                                href="deposits.php">
                                                <svg class="w-6 h-6" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
                                                </svg>
                                                <h6>Deposit</h6>
                                            </a>
                                            <a class="w-5/12 md:w-auto flex items-center text-xs md:text-sm space-x-1 px-3 py-1 rounded-lg bg-blue-500 hover:bg-gray-600 mb-2"
                                                href="investments.php">
                                                <svg class="w-6 h-6" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
                                                    </path>
                                                </svg>
                                                <h6>Invest</h6>
                                            </a>
                                            <a class="w-5/12 md:w-auto flex items-center text-xs md:text-sm space-x-1 px-3 py-1 rounded-lg bg-purple-500 hover:bg-gray-600 mb-2"
                                                href="loans.php">
                                                <svg class="w-6 h-6" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z">
                                                    </path>
                                                </svg>
                                                <h6>Borrow</h6>
                                            </a>


                                            <a class="w-5/12 md:w-auto flex items-center text-xs md:text-sm space-x-1 px-3 py-1 rounded-lg bg-red-500 hover:bg-gray-600 mb-2"
                                                href="withdrawals.php">
                                                <svg class="w-6 h-6" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2"
                                                        d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"></path>
                                                </svg>
                                                <h6>Withdraw</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="w-full  rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
                                <div
                                    class="w-full rounded-lg bg-[#131d2c] text-[#d3d6df] p-2 md:p-4 text-xs md:text-sm">
                                    <div class="w-full grid grid-cols-1 ">

                                        <div
                                            class="w-full flex justify-start items-center space-x-2  mt-2  rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
                                            <div>
                                                <img src="image/wallet.png"
                                                    alt="wallet balance" width="40px" class="rounded-full">
                                            </div>
                                            <div class="w-full">
                                                <div class="w-full flex justify-between mb-2">
                                                    <div>
                                                        <h3 class="font-medium">Account Balance</h3>
                                                    </div>
                                                    <div>
                                                        <a href="deposits.php"
                                                            class="flex justify-start items-center space-x-1 text-xs text-[#d1d5db] text-center p-2 bg-[#1b2e4b] hover:bg-gray-700 rounded-md transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110">
                                                            TOP UP
                                                        </a>
                                                    </div>
                                                </div>

                                                <div class="w-full flex justify-end bg-gray-500 p-2 rounded">
                                                    <h2 class="font-lg">USD<?php echo number_format($balance, 2); ?></h2>
                                                </div>
                                            </div>

                                        </div>

                                        <div
                                            class="w-full flex justify-start items-center space-x-2  mt-2  rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
                                            <div>
                                                <img src="image/wallet.png"
                                                    alt="wallet balance" width="40px" class="rounded-full">
                                            </div>
                                            <div class="w-full">
                                                <div class="w-full flex justify-between mb-2">
                                                    <div>
                                                        <h3 class="font-medium">Total Profit</h3>
                                                    </div>
                                                    
                                                </div>

                                                <div class="w-full flex justify-end bg-gray-500 p-2 rounded">
                                                    <h2 class="font-lg">USD<?php echo number_format($profit, 2); ?></h2>
                                                </div>
                                            </div>

                                        </div>

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



        <div class="w-full">
            <div class="w-full  justify-center">
                <div class="w-11/12 md:w-12/12 rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
                   
                        
                        <div class="wallet-section">
    <div class="w-full rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
        <div class="w-full flex justify-between items-center rounded-lg bg-[#131d2c] text-[#d3d6df] p-2 md:p-4 text-xs md:text-sm">
            <div class="wallet-heading current" data-toggle="market-orders">
                <h2 class="bg-transparent text-[#ebedf2] font-medium capitalize">MARKET ORDERS</h2>
            </div>
            <div class="wallet-heading" data-toggle="limit-orders">
                <h2 class="bg-transparent text-[#ebedf2] font-medium capitalize">LIMIT ORDERS</h2>
            </div>
            <div class="wallet-heading" data-toggle="stop-limit-orders">
                <h2 class="bg-transparent text-[#ebedf2] font-medium capitalize">STOP LIMIT ORDERS</h2>
            </div>
        </div>
    </div>

    <div class="w-full rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
        <div class="w-full rounded-lg bg-[#131d2c] text-[#d3d6df] p-2 md:p-4 text-xs md:text-sm">

            <?php
    // First, get all trading pairs for reference
    $pairs_query = "SELECT id, pair_name FROM trading_pairs";
    $pairs_result = $conn->query($pairs_query);
    $pair_names = [];
    while ($pair = $pairs_result->fetch_assoc()) {
      $pair_names[$pair['id']] = $pair['pair_name'];

    }

    $orders_query = "SELECT * FROM orders WHERE user_id = ? ORDER BY created_at DESC";
    $stmt = $conn->prepare($orders_query);
    $stmt->bind_param("i", $user_id);
    $stmt->execute();
    $all_orders = $stmt->get_result();
    
    // Categorize orders
    $market_orders = [];
    $limit_orders = [];
    $stop_limit_orders = [];
    
    while ($order = $all_orders->fetch_assoc()) {
        // Get pair name from the pair_names array
        $order['pair_display'] = $pair_names[$order['pair_id']] ?? 'UNKNOWN';
        
        if ($order['order_type'] == 'market') {
            $market_orders[] = $order;
        } elseif ($order['order_type'] == 'limit') {
            $limit_orders[] = $order;
        } elseif ($order['order_type'] == 'stop_limit') {
            $stop_limit_orders[] = $order;
        }
    }
    ?>

            <div id="market-orders" class="orders">
        <div class="w-full flex justify-between items-center mt-2 rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
            <div>TRADE</div>
            <div>PRICING</div>
            <div>STATUS</div>
        </div>

        <?php if (!empty($market_orders)): ?>
            <?php foreach ($market_orders as $order): ?>
                <div class="w-full flex justify-between items-center mt-2 rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
                    <div class="<?php echo $order['type'] == 'buy' ? 'text-green-500' : 'text-red-500'; ?>">
                        <?php echo strtoupper($order['type']); ?> <?php echo strtoupper($order['pair_display']); ?>
                    </div>
                    <div>
                        <?php echo number_format($order['price'], 2); ?> USDT
                    </div>
                    <div class="<?php echo $order['status'] == 'filled' ? 'text-green-500' : ($order['status'] == 'canceled' ? 'text-gray-500' : 'text-yellow-500'); ?>">
                        <?php echo ucfirst($order['status']); ?>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <div class="w-full flex justify-between items-center mt-2 rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
                <div>
                    <p class="">
                        <b class="font-medium text-orange-500">Empty! </b>
                        No Market Orders Found
                    </p>
                    <img src="image/empty.png" alt="no-orders" class="mx-auto">
                </div>
            </div>
        <?php endif; ?>
    </div>

    <!-- Limit Orders Section -->
    <div id="limit-orders" class="orders hidden">
        <div class="w-full flex justify-between items-center mt-2 rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
            <div>TRADE</div>
            <div>PRICING</div>
            <div>STATUS</div>
        </div>

        <?php if (!empty($limit_orders)): ?>
            <?php foreach ($limit_orders as $order): ?>
                <div class="w-full flex justify-between items-center mt-2 rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
                    <div class="<?php echo $order['type'] == 'buy' ? 'text-green-500' : 'text-red-500'; ?>">
                        <?php echo strtoupper($order['type']); ?> <?php echo strtoupper($order['pair_display']); ?>
                    </div>
                    <div>
                        <?php echo number_format($order['price'], 2); ?> USDT
                    </div>
                    <div class="<?php echo $order['status'] == 'filled' ? 'text-green-500' : ($order['status'] == 'canceled' ? 'text-gray-500' : 'text-yellow-500'); ?>">
                        <?php echo ucfirst($order['status']); ?>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <div class="w-full flex justify-between items-center mt-2 rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
                <div>
                    <p class="">
                        <b class="font-medium text-orange-500">Empty! </b>
                        No Limit Orders Found
                    </p>
                    <img src="image/empty.png" alt="no-orders" class="mx-auto">
                </div>
            </div>
        <?php endif; ?>
    </div>

    <!-- Stop Limit Orders Section -->
    <div id="stop-limit-orders" class="orders hidden">
        <div class="w-full flex justify-between items-center mt-2 rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
            <div>TRADE</div>
            <div>PRICING</div>
            <div>STATUS</div>
        </div>

        <?php if (!empty($stop_limit_orders)): ?>
            <?php foreach ($stop_limit_orders as $order): ?>
                <div class="w-full flex justify-between items-center mt-2 rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
                    <div class="<?php echo $order['type'] == 'buy' ? 'text-green-500' : 'text-red-500'; ?>">
                        <?php echo strtoupper($order['type']); ?> <?php echo strtoupper($order['pair_display']); ?>
                    </div>
                    <div>
                        <?php echo number_format($order['price'], 2); ?> USDT<br>
                        <small>Trigger: <?php echo number_format($order['stop_price'], 2); ?></small>
                    </div>
                    <div class="<?php echo $order['status'] == 'filled' ? 'text-green-500' : ($order['status'] == 'canceled' ? 'text-gray-500' : 'text-yellow-500'); ?>">
                        <?php echo ucfirst($order['status']); ?>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <div class="w-full flex justify-between items-center mt-2 rounded-md bg-[#0e1726] text-[#d3d6df] p-2 md:p-4">
                <div>
                    <p class="">
                        <b class="font-medium text-orange-500">Empty! </b>
                        No Stop Limit Orders Found
                    </p>
                    <img src="image/empty.png" alt="no-orders" class="mx-auto">
                </div>
            </div>
        <?php endif; ?>
    </div>


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

        <style>
            .parent-row {
                display: flex;
                justify-content: space-between;
            }

            .trade-section {
                position: relative;
                width: 35%;

            }

            .wallet-section {
                position: relative;
                width: 65%;

            }

            @media only screen and (max-width: 600px) {
                .parent-row {
                    display: block;

                }

                .trade-section,
                .wallet-section {
                    width: 100%;
                    display: block;
                    margin-top: 10px;
                }
            }

            .wallet-section .wallet-heading {
                cursor: pointer;
            }

            .wallet-section .current {
                border-bottom: solid 5px #d3d6df;
            }

            .hidden {
                display: none;
            }
        </style>


    </div>
</div>

</div>


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