<?php
// Fungsi untuk mengambil data transaksi berdasarkan txHash
function getTransactionByHash($txHash) {
    $url = 'https://blockchain.sisiteknis.com/getTransaction';
    $data = json_encode(['txHash' => $txHash]);

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
    $response = curl_exec($ch);
    curl_close($ch);

    return json_decode($response, true);
}

// Cek apakah ada parameter txHash yang dikirim melalui form
if (isset($_GET['txHash'])) {
    $txHash = $_GET['txHash'];
    $transactionData = getTransactionByHash($txHash);

    if (isset($transactionData['transaction'])) {
        $transaction = $transactionData['transaction'];
    } else {
        $error = "Transaction not found.";
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transaction Details</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet" />
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        a {
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <header class="bg-black text-white py-4">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center">
                <!-- Add your logo or title here -->
            </div>
            <nav class="flex space-x-4">
                <a class="hover:text-gray-400" href="index.php">Home</a>
                <a class="hover:text-gray-400" href="#">Blockchain</a>
                <a class="hover:text-gray-400" href="#">Validators</a>
                <a class="hover:text-gray-400" href="#">Tokens</a>
                <a class="hover:text-gray-400" href="#">Resources</a>
                <a class="hover:text-gray-400" href="#">More</a>
                <a class="hover:text-gray-400" href="#">Sign in</a>
            </nav>
        </div>
    </header>

    <div class="container mx-auto px-4 py-6">
        <div class="flex justify-between items-center mb-4">
            <h1 class="text-2xl font-semibold">Transaction Details</h1>
            <div class="flex items-center">
                <div class="relative ml-4">
                    <form action="" method="GET">
                        <input class="border border-gray-300 rounded-full px-4 py-2 text-sm w-64" placeholder="Search by Transaction Hash" type="text" name="txHash" />
                        <button type="submit" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-600">
                            <i class="fas fa-search"></i>
                        </button>
                    </form>
                </div>
                <button class="ml-4 text-gray-600"><i class="fas fa-cog"></i></button>
            </div>
        </div>

        <?php if (isset($transaction)): ?>
            <div class="bg-white shadow rounded-lg p-6">
                <h2 class="text-xl font-bold mb-4">Transaction Details</h2>
                <div class="space-y-4">
                    <div>
                        <p class="text-sm text-gray-600">Transaction Hash:</p>
                        <p class="text-lg font-semibold"><?= htmlspecialchars($transaction['txHash']) ?></p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">From:</p>
                        <p class="text-lg font-semibold"><?= htmlspecialchars($transaction['from']) ?></p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">To:</p>
                        <p class="text-lg font-semibold"><?= htmlspecialchars($transaction['to']) ?></p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Amount:</p>
                        <p class="text-lg font-semibold"><?= number_format($transaction['amount'], 2) ?> EBC</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Type:</p>
                        <p class="text-lg font-semibold"><?= htmlspecialchars($transaction['type']) ?></p>
                    </div>
                </div>
            </div>
        <?php elseif (isset($error)): ?>
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                <strong class="font-bold">Error!</strong>
                <span class="block sm:inline"><?= htmlspecialchars($error) ?></span>
            </div>
        <?php else: ?>
            <p class="text-gray-600">Please enter a transaction hash to search for details.</p>
        <?php endif; ?>
    </div>

    <footer class="bg-gray-900 text-gray-300 py-6">
        <div class="container mx-auto">
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h3 class="text-lg font-bold text-white">Powered by Engine Blockchain</h3>
                </div>
                <div class="flex space-x-4">
                    <button class="bg-gray-800 px-4 py-2 rounded text-white">Add EBC Network</button>
                    <button class="bg-gray-800 px-4 py-2 rounded text-white">Preferences</button>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <h4 class="font-bold mb-2 text-white">Company</h4>
                    <ul class="space-y-1">
                        <li><a class="hover:underline text-gray-400" href="#">Advertise</a></li>
                        <li><a class="hover:underline text-gray-400" href="#">Delegate to EBC explore</a></li>
                        <li><a class="hover:underline text-gray-400" href="#">Contact Us</a></li>
                        <li><a class="hover:underline text-gray-400" href="#">Brand Assets</a></li>
                        <li><a class="hover:underline text-gray-400" href="#">Terms of Service</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold mb-2 text-white">Community</h4>
                    <ul class="space-y-1">
                        <li><a class="hover:underline text-gray-400" href="#">API Documentation</a></li>
                        <li><a class="hover:underline text-gray-400" href="#">Knowledge Base</a></li>
                        <li><a class="hover:underline text-gray-400" href="#">Network Status</a></li>
                        <li><a class="hover:underline text-gray-400" href="#">Learn EBC</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold mb-2 text-white">Products</h4>
                    <ul class="space-y-1">
                        <li><a class="hover:underline text-gray-400" href="#">Developer APIs</a></li>
                    </ul>
                </div>
            </div>
            <div class="flex justify-between items-center mt-6">
                <p class="text-gray-400">EBC explore © 2024 (EBC) | Dibuat oleh tim yang sama mengembangkan blockchain EngineBlockchain.io</p>
                <div class="flex space-x-4">
                    <a class="text-gray-400 hover:text-gray-600" href="#"><i class="fab fa-twitter"></i></a>
                    <a class="text-gray-400 hover:text-gray-600" href="#"><i class="fab fa-telegram"></i></a>
                    <a class="text-gray-400 hover:text-gray-600" href="#"><i class="fab fa-instagram"></i></a>
                    <a class="text-gray-400 hover:text-gray-600" href="#"><i class="fab fa-facebook"></i></a>
                    <a class="text-gray-400 hover:text-gray-600" href="#"><i class="fab fa-tiktok"></i></a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>