<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Customer Pole Display</title>
    </head>
    <body>
        <div id='bodyContainer' style="width: 100%;height: 100%;">
            <div id="itemDetailsDiv">         
            </div>    
            <div id="totalContainer"> 
                <div>
                    <span id='itemsCount'></span>
                </div>

               <div id="totDiscContainer" class="disc-row" >
                    <span class="disc-label">
                        <i>less</i> Discount <span id="totDiscPercent"></span>
                    </span>
                    <span class="disc-value" id="totDiscount"></span>
                </div>

                <div id="totalDiv">
                    <div>
                        <h2 style="margin: 0px;">Total Amount</h2>
                    </div>
                    <div>
                        <h1 style="margin: 0px;" id='totalAmount'></h1>
                    </div>
                </div>
            </div>
            <div id="dynamicQrDiv">
            </div>
        </div>
    </body>
</html>

<script>
    window.onresize = doALoadOfStuff;

    function doALoadOfStuff() {
        // console.log("onresize event called")
        if(window.outerHeight <= 300) {
            document.getElementById('itemDetailsDiv').style.display = "none";
        } else {
            document.getElementById('itemDetailsDiv').style.display = "";
        }
    }
    window.addEventListener('storage', function (event) {
        if (event.key === 'custdisp') {
            var trans = JSON.parse(event.newValue);
            if(trans) {
                document.getElementById('totalAmount').innerText = trans['total'];
                let discl = document.getElementById('totDiscContainer');
                if (trans.showDiscount) { 
                    discl.style.display = 'flex'; 
                    document.getElementById('totDiscount').innerText = trans.totDisc;
                    document.getElementById('totDiscPercent').innerText =
                    trans.totDiscPercent ? `(${trans.totDiscPercent}%)` : '';
                } else {
                    discl.style.display = 'none'; 
                }

                document.getElementById('itemsCount').innerText = trans['details'].length + ' Item' + (trans['details'].length > 1 ? 's' : '');
                prepareDetailsTable(trans["details"]);
                if(trans["showQrImage"] && trans["dynamicQrLink"] && (trans["rightPanel"] == 'advReceipt' || trans["rightPanel"] == 'receiptDetail')) {
                    preparedynamicqrimg( trans["dynamicQrLink"]);
                } else {
                    const dynamicQrDivNode = document.getElementById("dynamicQrDiv");
                    while (dynamicQrDivNode.hasChildNodes()) {
                        dynamicQrDivNode.removeChild(dynamicQrDivNode.firstChild);
                    }
                }
            }
        }
    });
    function preparedynamicqrimg(dynamicQrLink) {
        let img = document.createElement('img');
        img.src = dynamicQrLink;
        const dynamicQrDivNode = document.getElementById("dynamicQrDiv");
        while (dynamicQrDivNode.hasChildNodes()) {
            dynamicQrDivNode.removeChild(dynamicQrDivNode.firstChild);
        }
        document.getElementById("dynamicQrDiv").appendChild(img);
    }

    function prepareDetailsTable(details) {
        var tab="<table id='itemTable'><colgroup> <col style='width:55%' /><col style='width:20%' /><col style='width:25%' /></colgroup>";
        if(details && details.length) {
            tab+="<thead>"
            tab+="<tr>";
                tab+='<th style="text-align:left">Item</th>';
                tab+='<th style="text-align:right">Qty</th>';
                tab+='<th style="text-align:right" >Amount</th>';
            tab+="</tr>";
            tab+="</thead>"
            tab+="<tbody>"
                for(var i=0;i<details.length;i++) {
                tab+="<tr>";            
                    tab+='<td style="text-align:left">'+details[i]['itemName']+'</td>';
                    tab+='<td style="text-align:right">'+details[i]['qty']+ ' ' + details[i]['unit'] +'</td>';
                    tab+='<td style="text-align:right">'+ details[i]['itemTotal']+'</td>';
                tab+="</tr>";
                }
            tab+="</tbody>";
            tab+="</table>";
        }
        document.getElementById("itemDetailsDiv").innerHTML=tab;
    }
    window.addEventListener('unload', function () { 
        localStorage.removeItem('customerdisplaypoleopened');
        localStorage.removeItem('custdisp');})
    window.addEventListener('load', function () { 
        localStorage.setItem('customerdisplaypoleopened','1');
        localStorage.setItem('custdisp','');
        doALoadOfStuff();
    })
</script>

<style>
    #totalDiv {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
    }

    .disc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: right;
    margin: 4px 0;
    }

    .disc-label {
        font-size: 16px;
        text-transform: none;
    }

    .disc-label i {
        font-style: italic;
        opacity: 0.8;
    }

    .disc-value {
        font-size: 18px;
        font-weight: normal;
    }

    #totalContainer {
        margin:5px;
        position: sticky;
        bottom: 0px;
        background: white;
    }
    #itemTable th {
        background-color: yellowgreen;
    }
    
    #itemTable, #itemTable td,#itemTable th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    #itemTable {
        width: 100%;
        border-collapse: collapse;
        margin:5px;
    }
    #dynamicQrDiv {
        display: flex;
        justify-content: center;
    }
    #dynamicQrDiv img {
        width: 200px;
        height: 200px
    }

    #itemTable tr:nth-child(even) {background: #FFF}
    #itemTable tr:nth-child(odd) {background: #eee}
</style>