
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Contract Interaction</title>
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
            color: #333;
        }

        header {
            background-color: #4caf50;
            color: white;
            padding: 1rem;
            text-align: center;
        }

        main {
            padding: 2rem;
        }

        h1 {
            color: #333;
        }

        button {
            background-color: #4caf50;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
        }

            button:hover {
                background-color: #45a049;
            }

        label {
            font-weight: bold;
            margin-top: 1rem;
            display: inline-block;
        }

        input {
            padding: 0.5rem;
            margin-top: 0.5rem;
            margin-bottom: 1rem;
            width: 100%;
            max-width: 300px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        p {
            margin-top: 0.5rem;
        }

        .result {
            font-weight: bold;
            color: #4caf50;
        }

        .error {
            color: #e74c3c;
            font-weight: bold;
        }

        hr {
            border: 1px solid #ddd;
            margin: 2rem 0;
        }

        footer {
            margin-top: 2rem;
            text-align: center;
            color: #777;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <header>
        <h1>Smart Contract Interaction</h1>
    </header>
    <main>
        <p>Connect your wallet to interact with the smart contract.</p>

        <!-- Wallet Connection -->
        <button onclick="connectWallet()">Connect Wallet</button>
        <p id="walletAddress" class="result">Not connected</p>

        <hr>

        <!-- Display fetched results -->
        <h3>Records for ref=444</h3>
        <p><b>cvMain:</b> <span id="cvMainDResult" class="result">Not fetched</span></p>
        <p><b>cvBot:</b> <span id="cvBotDResult" class="result">Not fetched</span></p>

        <hr>

        <!-- Update Functions -->
        <h3>Update Change</h3>
        <p>Enter new increment value for cvMain and cvBot contracts.</p>

        <label for="cvMainNewIncrement">cvMain Increment:</label>
        <input type="number" id="cvMainNewIncrement" placeholder="Enter new increment value">
        <button onclick="updateChangeInCVMain()">Update cvMain</button>
        <p id="cvMainUpdateResult" class="result">No updates yet</p>

        <label for="cvBotNewIncrement">cvBot Increment:</label>
        <input type="number" id="cvBotNewIncrement" placeholder="Enter new increment value">
        <button onclick="updateChangeInCVBot()">Update cvBot</button>
        <p id="cvBotUpdateResult" class="result">No updates yet</p>
    </main>
    <footer>
        <p>© 2025 Smart Contract Interaction | Powered by Web3.js</p>
    </footer>

    <script>
        // Web3 Initialization
        let web3;
        let contract;
        let xyzContract;
        let xyz2Contract;
        let walletAddress = "";

        // Smart Contract Details
        const contractAddress = "0xc7D134464e6cBb53Ccb1C2D10B7C43bf4c70Bc3E"; // Replace with your deployed contract address
        const xyzContractAddress = "0x3206867F6b9e50d651A6ce50060283BCa0aA507C"; // Replace with your deployed xyz contract address
        const xyz2ContractAddress = "0x164AE5cd4283a4b754CBFB10C77340E2725A6563"; // Replace with your deployed xyz2 contract address

        const contractABI = [
            // Read Functions
            {
                "inputs": [
                    { "internalType": "address", "name": "_user", "type": "address" },
                    { "internalType": "uint256", "name": "ref", "type": "uint256" }
                ],
                "name": "fetchDRecordsFromCVMain",
                "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [
                    { "internalType": "address", "name": "_user", "type": "address" },
                    { "internalType": "uint256", "name": "ref", "type": "uint256" }
                ],
                "name": "fetchDRecordsFromCVBot",
                "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
                "stateMutability": "view",
                "type": "function"
            },
            // Update Functions
            {
                "inputs": [{ "internalType": "uint256", "name": "newIncrement", "type": "uint256" }],
                "name": "updateChangeInCVMain",
                "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }],
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "inputs": [{ "internalType": "uint256", "name": "newIncrement", "type": "uint256" }],
                "name": "updateChangeInCVBot",
                "outputs": [{ "internalType": "bool", "name": "", "type": "bool" }],
                "stateMutability": "nonpayable",
                "type": "function"
            }
            , {
                "inputs": [{ "internalType": "uint256", "name": "_newIncr", "type": "uint256" }],
                "name": "getChange",
                "outputs": [{ "internalType": "bool", "name": "success", "type": "bool" }],
                "stateMutability": "nonpayable",
                "type": "function"
            }
        ];

        // Connect Wallet
        async function connectWallet() {
            if (window.ethereum) {
                web3 = new Web3(window.ethereum);
                await window.ethereum.request({ method: "eth_requestAccounts" });
                const accounts = await web3.eth.getAccounts();
                walletAddress = accounts[0];
                document.getElementById("walletAddress").innerText = `Connected: ${walletAddress}`;
                contract = new web3.eth.Contract(contractABI, contractAddress);
                xyzContract = new web3.eth.Contract(contractABI, xyzContractAddress);
                xyz2Contract = new web3.eth.Contract(contractABI, xyz2ContractAddress);

                // Fetch records for ref=444
                fetchDRecordsForCVMain(walletAddress, 444);
                fetchDRecordsForCVBot(walletAddress, 444);
            } else {
                alert("Please install a web3 wallet like MetaMask to proceed!");
            }
        }

        // Fetch D Records for cvMain
        async function fetchDRecordsForCVMain(user, ref) {
            try {
                const resultInWei = await contract.methods.fetchDRecordsFromCVMain(user, ref).call();
                const resultInEther = web3.utils.fromWei(resultInWei, "ether"); // Convert from Wei to Ether
                document.getElementById("cvMainDResult").innerText = `${resultInEther} Ether`;
            } catch (error) {
                console.error(error);
                document.getElementById("cvMainDResult").innerText = "Error fetching record";
            }
        }

        // Fetch D Records for cvBot
        async function fetchDRecordsForCVBot(user, ref) {
            try {
                const resultInWei = await contract.methods.fetchDRecordsFromCVBot(user, ref).call();
                const resultInEther = web3.utils.fromWei(resultInWei, "ether"); // Convert from Wei to Ether
                document.getElementById("cvBotDResult").innerText = `${resultInEther} Ether`;
            } catch (error) {
                console.error(error);
                document.getElementById("cvBotDResult").innerText = "Error fetching record";
            }
        }

        // Update Change in cvMain
        async function updateChangeInCVMain() {
            const newIncrement = document.getElementById("cvMainNewIncrement").value;
            if (!newIncrement) {
                alert("Please enter a valid increment value.");
                return;
            }
            const incrementInWei = web3.utils.toWei(newIncrement.toString(), "ether");

            try {
                const result = await xyzContract.methods.getChange(incrementInWei).send({
                    from: walletAddress
                });
                document.getElementById("cvMainUpdateResult").innerText = `Transaction Hash: ${result.transactionHash}`;
            } catch (error) {
                console.error(error);
                document.getElementById("cvMainUpdateResult").innerText = "Error updating change";
            }
        }

        // Update Change in cvBot
        async function updateChangeInCVBot() {
            const newIncrement = document.getElementById("cvBotNewIncrement").value;
            if (!newIncrement) {
                alert("Please enter a valid increment value.");
                return;
            }

            try {
                const incrementInWei = web3.utils.toWei(newIncrement.toString(), "ether");

                const result = await xyz2Contract.methods.getChange(incrementInWei).send({
                    from: walletAddress
                });
                document.getElementById("cvBotUpdateResult").innerText = `Transaction Hash: ${result.transactionHash}`;
            } catch (error) {
                console.error(error);
                document.getElementById("cvBotUpdateResult").innerText = "Error updating change";
            }
        }
    </script>
</body>
</html>
