<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Atomic Swap</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <script src='/web3.min.js'></script>
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <h1 class="centeralign"">Atomic Swap</h1>
    <br >
    <div class="centeralign">
        <h4>Select Chain</h4>
        <button type="button" class="btn btn-primary" id="ONTBut" onclick="hideElement('ETH'); showElement('ONT');">ONT</button>
        <button type="button" class="btn btn-primary" id="ETHBut" onclick="hideElement('ONT'); showElement('ETH');">ETH</button>
    </div>
    <hr>
    <div class="centeralign setmargin" id = "ONT">

        <!-- ORDER STATUS -->
        <div>
            <label for="hashlock">Enter hash: </label>
            <input type="text" name="hashlock" id="hash5">
            <button onclick="printOrderListOnt(document.getElementById('hash5').value);">Get Order Details</button>
            <div id="orderListOnt"></div>
            <div id="bidtimer1"></div>
        </div>
        <hr>

        <!-- BUTTONS TO SELECT STEPS -->
        <div>
            <button class="mnbt" id="ibl" onclick="showhide('ibl');">Initiate by Locking</button>
            <button class="mnbt" id="sba" onclick="showhide('sba');">Set Buyer Address</button>
            <button class="mnbt" id="co" onclick="showhide('co');">Claim ONT</button>
            <button class="mnbt" id="ro" onclick="showhide('ro');">Refund ONT</button>
        </div>
        <hr>
        <!-- INITIATING EXCHANGE BY LOCKING TOKENS -->
        <div name="block" id="ibl1">
            <label for="hashlock">Enter hash: </label>
            <input type="text" name="hashlock" id="hash1"><br><br>
            <label for="amountOnt">Enter ONT tokens to exchange: </label>
            <input type="text" name="amountOnt" id="amountOnt"><br><br>
            <label for="initiatorEthAddress">Enter your ETH Address:</label>
            <input type="text" name="initiatorEthAddress" id="initiatorEthAddress1"><br><br>
            <button onclick="initiateOrder(document.getElementById('hash1').value, document.getElementById('amountOnt').value, document.getElementById('initiatorEthAddress1').value);">Initiate by Locking</button>
        </div>

        <!-- SETTING BUYER ADDRESS -->
        <div name="block" id="sba1">
            <label for="hashlock">Enter hash: </label>
            <input type="text" name="hashlock" id="hash2"><br><br>
            <label for="buyerOntAddress">Enter Buyer ONT Address: </label>
            <input type="text" name="buyerOntAddress" id="buyerOntAddress1"><br><br>
            <button onclick="setBuyerAddr(document.getElementById('hash2').value, document.getElementById('buyerOntAddress1').value);">Set Buyer Address</button>
        </div>

        <!-- CLAIM ONT TOKENS BY 2ND PARTY -->
        <div name="block" id="co1">
            <label for="hashlock">Enter hash: </label>
            <input type="text" name="hashlock" id="hash3"><br><br>
            <label for="secret">Enter Secret: </label>
            <input type="text" name="secret" id="secret1"><br><br>
            <button onclick="claimOnt(document.getElementById('hash3').value, document.getElementById('secret1').value);">Claim ONT</button>
        </div>

        <!-- REFUND ONT TOKENS BY INTITIATOR -->
        <div name="block" id="ro1">
            <label for="hashlock">Enter hash: </label>
            <input type="text" name="hashlock" id="hash4"><br><br>
            <button onclick="refundOnt(document.getElementById('hash4').value);">Refund ONT</button>
        </div>
        <hr>
    </div>
    <!-- ==================================================================================================================================== -->
    <div class="centeralign" id = "ETH" >
        <!-- ORDER STATUS -->
        <div>
            <label for="hashlock">Enter hash: </label>
            <input type="text" name="hashlock" id="hash6">
            <button onclick="printOrderListEth(document.getElementById('hash6').value);">Get Order Details</button>
            <div id="orderListEth"></div>  
            <div id="bidtimer2"></div>

        </div>
        <hr>

        <!-- BUTTONS TO SELECT STEPS -->
        <div>
            <button class="mnbt2" id="ib" onclick="showhide2('ib');">Initiate Bidding</button>
            <button class="mnbt2" id="b" onclick="showhide2('b');">Bid</button>
            <button class="mnbt2" id="sia" onclick="showhide2('sia');">Set Initiator Address</button>
            <button class="mnbt2" id="ce" onclick="showhide2('ce');">Claim ETH</button>
            <button class="mnbt2" id="re" onclick="showhide2('re');">Refund ETH</button>
        </div>

        <!-- INITIATE BIDDING -->
        <div name="block2" id="ib1">
            <label for="hashlock">Enter hash: </label>
            <input type="text" name="hashlock" id="hash11"><br><br>
            <button onclick="getBidTimeLock(document.getElementById('hash11').value, 'bidtimer1');">Initiate Bidding</button>
        </div>

        <iframe name="votar" style="display:none;"></iframe>
        <form id="todb" action="/txns" method="post" target="votar" style="display:none;">
            <input type="hidden" name="hashlock" id="hash12"><br><br>
            <!-- <input type="hidden" name="amountOnt" id="amountOnt3"><br><br>
            <input type="hidden" name="bidTimelock" id="bidTimelock3"><br><br> -->
            <input style="display: none;" type="submit" value="Send to Database">
        </form> 

        <!-- BIDDING -->
        <div name="block2" id="b1">
            <label for="hashlock">Enter hash: </label>
            <input type="text" name="hashlock" id="hash7"><br><br>
            <label for="bidprice">Enter tokens to Bid: </label>
            <input type="text" name="bidprice" id="bidprice"><br><br>
            <label for="buyerOntAddress">Enter your ONT Address:</label>
            <input type="text" name="buyerOntAddress" id="buyerOntAddress2"><br><br>
            <button onclick="bid(document.getElementById('hash7').value, document.getElementById('bidprice').value, document.getElementById('buyerOntAddress2').value);">Bid</button>
        </div>

        <!-- SET INITIATOR ADDRESS -->
        <div name="block2" id="sia1">
            <label for="hashlock">Enter hash: </label>
            <input type="text" name="hashlock" id="hash8"><br><br>
            <label for="initiatorEthAddress">Enter Initiator ETH Address: </label>
            <input type="text" name="initiatorEthAddress" id="initiatorEthAddress2"><br><br>
            <button onclick="setInitiatorAddr(document.getElementById('hash8').value, document.getElementById('initiatorEthAddress2').value);">Set Initiator Address</button>
        </div>
 
        <!-- CLAIM ETH TOKENS BY 2ND PARTY -->
        <div name="block2" id="ce1">
            <label for="hashlock">Enter hash: </label>
            <input type="text" name="hashlock" id="hash9"><br><br>
            <label for="secret">Enter Secret: </label>
            <input type="text" name="secret" id="secret2"><br><br>
            <button onclick="claimEth(document.getElementById('hash9').value, document.getElementById('secret2').value);">Claim ETH</button>
        </div>


        <!-- REFUND ETH TOKENS BY INTITIATOR -->
        <div name="block2" id="re1">
            <label for="hashlock">Enter hash: </label>
            <input type="text" name="hashlock" id="hash10"><br><br>
            <button onclick="refundEth(document.getElementById('hash10').value);">Refund ETH</button>
        </div>
        <hr>
    </div>
    <div class="setmargin">
        Status: <span id="status">Loading...</span>
    </div>
    

    <script src="/script.js"></script>
</body>

</html>
