<?php
// config.php ফাইলটিকে যুক্ত করা হলো
require_once 'config.php';

// URL থেকে স্ট্যাটাস নেওয়া হচ্ছে (ডিফল্ট হিসেবে 'pending' থাকবে)
$status_filter = isset($_GET['status']) ? $_GET['status'] : 'pending';

// নিরাপদ রাখার জন্য স্ট্যাটাস ভ্যালিডেশন
$allowed_statuses = ['pending', 'low_balance', 'complete'];
if (!in_array($status_filter, $allowed_statuses)) {
    $status_filter = 'pending';
}

// সিলেক্টেড স্ট্যাটাস অনুযায়ী ডাইনামিক SQL কুয়েরি তৈরি করা হলো
$sql = "SELECT id, sender, trxid, amount, created_at, ref, status FROM bkach_transactions WHERE LOWER(status) = '" . $conn->real_escape_string($status_filter) . "' ORDER BY id DESC";
$result = $conn->query($sql);

$transactions = [];
if ($result && $result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $transactions[] = $row;
    }
}
$conn->close();

// হেডার টাইটেল ও কালার ডাইনামিক করার জন্য
$header_titles = [
    'pending' => ['title' => 'Pending Requests', 'sub' => 'Awaiting Approval', 'color' => 'from-amber-500 to-orange-600', 'badge' => 'bg-amber-100 text-amber-700', 'dot' => 'bg-amber-500'],
    'low_balance' => ['title' => 'Low Balance Requests', 'sub' => 'Insufficent Funds', 'color' => 'from-red-500 to-rose-600', 'badge' => 'bg-red-100 text-red-700', 'dot' => 'bg-red-500'],
    'complete' => ['title' => 'Completed Transactions', 'sub' => 'Successfully Processed', 'color' => 'from-green-500 to-emerald-600', 'badge' => 'bg-green-100 text-green-700', 'dot' => 'bg-green-500']
];

$current_style = $header_titles[$status_filter];
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo ucfirst(str_replace('_', ' ', $status_filter)); ?> Transactions</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background-color: #f3f4f6;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .mobile-container {
            max-width: 425px;
            min-height: 100vh;
            background-color: #ffffff;
            margin: 0 auto;
            position: relative;
            display: flex;
            flex-direction: column;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body class="bg-gray-100">

    <div class="mobile-container pb-20"> 
        <header class="bg-gradient-to-r <?php echo $current_style['color']; ?> text-white px-4 py-5 sticky top-0 z-10 shadow-md rounded-b-2xl">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-xl font-bold tracking-wide"><?php echo $current_style['title']; ?></h1>
                    <p class="text-xs text-white/80 mt-0.5">Zara IT Co. • Live Monitor</p>
                </div>
                <div class="bg-white/20 p-2 rounded-full cursor-pointer hover:bg-white/30 transition-all" onclick="location.reload();">
                    <i class="fa-solid fa-rotate text-lg"></i>
                </div>
            </div>
        </header>

        <main class="flex-1 p-4 overflow-y-auto">
            
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-gray-500 text-sm font-semibold uppercase tracking-wider"><?php echo $current_style['sub']; ?></h2>
                <span class="<?php echo $current_style['badge']; ?> text-xs px-2.5 py-1 rounded-full font-bold">
                    <?php echo count($transactions); ?> Items
                </span>
            </div>
            
            <div class="space-y-4">
                <?php if (empty($transactions)): ?>
                    <div class="text-center py-20 text-gray-400">
                        <div class="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4 text-gray-300">
                            <i class="fa-solid fa-folder-open text-3xl"></i>
                        </div>
                        <p class="text-sm font-medium">No <?php echo str_replace('_', ' ', $status_filter); ?> transactions found</p>
                        <p class="text-xs text-gray-400 mt-1">Everything is up to date!</p>
                    </div>
                <?php else: ?>
                    <?php foreach ($transactions as $data): 
                        $isBkash = (strpos(strtolower($data['sender']), 'bkash') !== false);
                    ?>
                        <div class="bg-white border border-gray-100 rounded-2xl p-4 shadow-sm hover:shadow-md transition-all border-l-4 <?php 
                            echo $status_filter == 'pending' ? 'border-l-amber-500' : ($status_filter == 'low_balance' ? 'border-l-red-500' : 'border-l-green-500'); 
                        ?>">
                            <div class="flex justify-between items-start mb-3">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 <?php echo $isBkash ? 'bg-pink-100 text-pink-600' : 'bg-orange-100 text-orange-600'; ?> rounded-xl flex items-center justify-center font-bold text-sm">
                                        <?php echo $isBkash ? 'bK' : 'NG'; ?>
                                    </div>
                                    <div>
                                        <h3 class="font-bold text-gray-800 text-base capitalize"><?php echo htmlspecialchars($data['sender']); ?></h3>
                                        <p class="text-xs text-gray-400">ID: #<?php echo $data['id']; ?></p>
                                    </div>
                                </div>
                                <span class="<?php echo $current_style['badge']; ?> text-xs px-3 py-1 rounded-full font-medium flex items-center gap-1.5 capitalize">
                                    <span class="w-1.5 h-1.5 rounded-full <?php echo $current_style['dot']; ?> <?php echo $status_filter == 'pending' ? 'animate-pulse' : ''; ?>"></span>
                                    <?php echo htmlspecialchars(str_replace('_', ' ', $data['status'])); ?>
                                </span>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-2 pt-2 border-t border-gray-50 text-sm">
                                <div>
                                    <p class="text-xs text-gray-400">TrxID</p>
                                    <p class="font-mono text-gray-700 text-xs mt-0.5"><?php echo !empty($data['trxid']) ? htmlspecialchars($data['trxid']) : 'N/A'; ?></p>
                                </div>
                                <div class="text-right">
                                    <p class="text-xs text-gray-400">Amount</p>
                                    <p class="font-bold text-gray-800 text-sm mt-0.5">৳ <?php echo number_format($data['amount'], 2); ?></p>
                                </div>
                                <div class="mt-2">
                                    <p class="text-xs text-gray-400">Ref</p>
                                    <p class="text-gray-600 text-xs mt-0.5"><?php echo !empty($data['ref']) ? htmlspecialchars($data['ref']) : 'N/A'; ?></p>
                                </div>
                                <div class="text-right mt-2">
                                    <p class="text-xs text-gray-400">Date</p>
                                    <p class="text-gray-500 text-[11px] mt-0.5"><?php echo $data['created_at']; ?></p>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>

        </main>

        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2 flex justify-around items-center z-10 shadow-[0_-4px_10px_rgba(0,0,0,0.03)]">
            
            <a href="?status=pending" class="flex flex-col items-center justify-center <?php echo $status_filter == 'pending' ? 'text-amber-500 font-semibold' : 'text-gray-400'; ?> transition-all">
                <div class="w-10 h-10 <?php echo $status_filter == 'pending' ? 'bg-amber-50' : 'hover:bg-gray-50'; ?> rounded-xl flex items-center justify-center mb-0.5">
                    <i class="fa-solid fa-clock-rotate-left text-lg"></i>
                </div>
                <span class="text-[11px] tracking-wide">Pending</span>
            </a>

            <a href="?status=low_balance" class="flex flex-col items-center justify-center <?php echo $status_filter == 'low_balance' ? 'text-red-500 font-semibold' : 'text-gray-400'; ?> transition-all">
                <div class="w-10 h-10 <?php echo $status_filter == 'low_balance' ? 'bg-red-50' : 'hover:bg-gray-50'; ?> rounded-xl flex items-center justify-center mb-0.5 transition-all">
                    <i class="fa-solid fa-wallet text-lg"></i>
                </div>
                <span class="text-[11px] tracking-wide">Low Balance</span>
            </a>

            <a href="?status=complete" class="flex flex-col items-center justify-center <?php echo $status_filter == 'complete' ? 'text-green-600 font-semibold' : 'text-gray-400'; ?> transition-all">
                <div class="w-10 h-10 <?php echo $status_filter == 'complete' ? 'bg-green-50' : 'hover:bg-gray-50'; ?> rounded-xl flex items-center justify-center mb-0.5 transition-all">
                    <i class="fa-solid fa-circle-check text-lg"></i>
                </div>
                <span class="text-[11px] tracking-wide">Complete</span>
            </a>

        </div>
    </div>

</body>
</html>
