<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/receipt.css">
</head>
<body>
    <!-- Accepted Receipt -->
    <div id="acceptedReceipt" class="receipt"  >
        <div class="header">
            <!-- <img class="datex-pay-logo" src="/images/dynamic/<%= appLogo %>.png" alt="" srcset=""> -->
            <img class="datex-pay-logo" src="/images/am_mulberry_logo_wide_color.png" alt="" srcset="">
            <!-- <p><%= t.receiptNumber %> 2949</p> -->
            <!-- <p>https://www.mulberrypos.com</p> -->
            <!-- <img class="mulberry-logo" src="/images/dynamic/overtec.png" alt="" srcset=""> -->
        </div>

        <div class="divider"></div>
         
        <div class="receipt-details">
            <div class="receipt-row">
                <span class="label"><%= t.paymentType %></span>
                <span><%= paymentMethod %></span>
            </div>
            <div class="receipt-row">
                <span class="label"><%= t.testPayment %></span>
                <span><%= amount %> <%= currencyS %></span>
            </div>
            <!-- <div class="receipt-row">
                <span class="label"><%= t.paymentAddress %></span>
                <span style="width: 135px;"><%= t.paymentAddressExample %></span>
            </div> -->
            <div class="receipt-row">
                <span class="label"><%= t.issueDate %></span>
                <span><%= timestamp %></span>
            </div>
        </div>

        <div class="divider"></div>

        <div class="receipt-details">
            <div style="font-size: x-large;" class="receipt-row">
                <span class="label"><%= t.total %></span>
                <span><%= amount %> <%= currencyS %></span>
            </div>
        </div>

        <div class="divider"></div>

        <div class="bearHolder">
            <img class="bear-image" src="images/Mishka_like_0109.gif" alt="">
        </div>
        <div class="divider"></div>

        <div class="footer">
            <p><%= t.thankYou %></p>
            <p><%= t.transactionId %> <%= transactionId %></p>
        </div>
    </div>

    <!-- Rejected Receipt -->
    <div id="rejectedReceipt" class="receipt"  >
        <div class="header">
            <img class="datex-pay-logo" src="/images/am_mulberry_logo_wide_color.png" alt="" srcset="">
            <!-- <p><%= t.receiptNumber %> 2949</p> -->
            <!-- <p>https://www.mulberrypos.com</p> -->
            <!-- <img class="mulberry-logo" src="/images/dynamic/overtec.png" alt="" srcset=""> -->
        </div>

        <div class="divider"></div>

        <div class="receipt-details">
            <div class="receipt-row">
                <span class="label"><%= t.status %></span>
                <span style="color: red;"><%= t.receiptRejected %></span>
            </div>
            <div class="receipt-row">
                <span class="label"><%= t.paymentDate %></span>
                <span><%= timestamp %></span>
            </div>
        </div>

        <div class="divider"></div>

        <div class="footer">
            <p><%= t.transactionId %> <%= transactionId %></p>
        </div>
    </div>

    <!-- Buttons Section -->
    <div id="buttons" class="buttons-section"  >
        <div class="header">
            <img class="datex-pay-logo" src="/images/am_mulberry_logo_wide_color.png" alt="" srcset="">
            <!-- <p><%= t.receiptNumber %> 2949</p> -->
            <!-- <p>https://www.mulberrypos.com</p> -->
            <!-- <img class="mulberry-logo" src="/images/dynamic/overtec.png" alt="" srcset=""> -->
        </div>

        <div class="divider"></div>

        <div class="receipt-details">
            <div style="font-size: large;" class="receipt-row">
                <span class="label"><%= t.amountToPay %></span>
                <span><%= amount %> <%= currencyS %></span>
            </div>

            <div class="receipt-row">
                <span class="label"><%= t.paymentDate %></span>
                <span><%= timestamp %></span>
            </div>
        </div>

        <div class="divider"></div>

        <div class="buttons">
            <button id="cancelButton"><%= t.cancel %></button>
            <button id="payButton"><%= t.pay %></button>
        </div>

        <div class="divider"></div>

        <div class="footer">
            <p><%= t.transactionId %> <%= transactionId %></p>
        </div>
    </div>

    <!-- Loading Circle -->
    <div id="loading" class="loading"></div>

    <script>
        const acceptedReceipt = document.getElementById('acceptedReceipt');
        const rejectedReceipt = document.getElementById('rejectedReceipt');
        const buttons = document.getElementById('buttons');
        const id = '<%= deviceId %>'; // Pass the id from EJS
        console.log(id);
        
        console.log("Data in receipt.ejs :");
         
        

        document.getElementById('payButton').addEventListener('click', async () => {
            const response = await fetch(`/pay-command?id=${id}`, { method: 'POST' });
            const result = await response.json();
            loading.style.display = 'block';

            // Simulate payment process for 1 second
            setTimeout(() => {
                // Hide loading circle
                loading.style.display = 'none';

                // Show accepted receipt and hide rejected receipt
                acceptedReceipt.style.display = 'block';
                rejectedReceipt.style.display = 'none';
                buttons.style.display = 'none';
            }, 1000);
        });

        document.getElementById('cancelButton').addEventListener('click', async () => {
            const response = await fetch(`/cancel-command?id=${id}`, { method: 'POST' });
            const result = await response.json();

            setTimeout(() => {
                // Hide loading circle
                loading.style.display = 'none';

                // Show rejected receipt and hide accepted receipt
                rejectedReceipt.style.display = 'block';
                acceptedReceipt.style.display = 'none';
                buttons.style.display = 'none';
            }, 1000);
        });
    </script>
</body>
</html>