<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="pragma" content="no-cache" />
        <title class="origin">{{ title or "Odoo's IoTBox" }}</title>
        <script class="origin" type="text/javascript" src="/web/static/lib/jquery/jquery.js"></script>
        <link class="origin" rel="stylesheet" href="/web/static/lib/bootstrap/dist/css/bootstrap.css">
        <link class="origin" rel="stylesheet" type="text/css" href="/web/static/src/libs/fontawesome/css/font-awesome.css"/>
        <script type="text/javascript" class="origin">
            var display_identifier = '{{ display_identifier }}';
            {{ cust_js|safe }}
        </script>
        <script>
            $(function() {
                setInterval(() => {
                    fetch('/point_of_sale/iot_devices', {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({}),
                    })
                    .then(response => response.json())
                    .then(data => {
                        // group devices by type
                        const grouped_devices = JSON.parse(data.result).iot_device_status.reduce((acc, device) => {
                            acc[device.type] = acc[device.type] || [];
                            acc[device.type].push(device);

                            return acc;
                        }, {})

                        const iot_devices_section = document.querySelectorAll('.iot-devices-section');

                        // Hide or show the 'IoT Devices' part depending on devices
                        iot_devices_section.forEach(e => e.style.display = 'block');
                        if (Object.keys(grouped_devices).length === 0) {
                            iot_devices_section.forEach(e => e.style.display = 'none');
                            return;
                        }

                        // create the html object
                        let iot_devices_html = '';
                        for (const type of Object.keys(grouped_devices)) {
                            iot_devices_html += '<tr><td>' + type + 's</td><td><ul>';
                            // display the first 10 devices
                            for (const device of grouped_devices[type].slice(0, 10)) {
                                iot_devices_html += '<li>' + device.name + '</li>';
                            }
                            // add ... at the end if there are more than 10 devices
                            if (grouped_devices[type].length > 10) {
                                iot_devices_html += '<li>...</li>';
                            }
                            iot_devices_html += '</ul></td></tr>';
                        }
                        $('#iot-devices').html(iot_devices_html);
                    })
                    .catch((error) => {
                        console.error('Error: ', error);
                    });
                }, 60000); // fetch every minute
            });

        </script>
        <style class="origin">
            html, body {
                height: 100%;
            }
        </style>
        <style>
            body {
                background: url('/hw_posbox_homepage/static/img/background-light.svg') no-repeat center center fixed;
                background-size: cover;
                height: 100vh;
            }
            .pos-display-boxes {
                position: absolute;
                right: 20px;
                bottom: 20px;
            }
            .pos-display-box {
                padding: 10px 20px;
                background: rgba(255, 255, 255, 0.17);
                border: 1px solid rgba(255, 255, 255, 0.06);
                box-shadow: 0 0 5px 0 rgba(60, 60, 60, 0.4);
                border-radius: 8px;
                width: 500px;
                margin-top: 20px;
                backdrop-filter: blur(5px);
            }
            .info-text {
                font-size: 15px;
            }
            .iot-devices-section {
                display: none;
            }
            .table {
                --bs-table-bg: none;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="text-center pt-5">
                <img style="width: 150px" src="/web/static/img/logo2.png" alt="odoo_logo">
                <p class="mt-3" style="font-size: 25px">IoTBox: <span style="text-transform: capitalize">{{ hostname }}</span></p>
            </div>
            <div class="pos-display-boxes">
                {% if pairing_code %}
                    <div class="pos-display-box">
                        <h4 class="text-center mb-3">Pairing Code</h4>
                        <hr/>
                        <h4 class="text-center mb-3">{{ pairing_code }}</h4>
                    </div>
                {% endif %}
                <div class="pos-display-box">
                    <h4 class="text-center mb-3">POS Client display</h4>
                    <h5 class="text-center mb-1">IoT Interfaces</h5>
                    <table class="table table-hover table-sm table-pos-info">
                        <thead>
                            <tr>
                                <th>Type</th>
                                <th>IP</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for display_iface in display_ifaces -%}
                                <tr>
                                    <td><i class="fa fa-{{ display_iface.icon }}"/> {{ display_iface.essid }}</td>
                                    <td>{{ display_iface.addr }}</td>
                                </tr>
                            {%- endfor %}
                        </tbody>
                    </table>
                    <h5 class="text-center mb-1 iot-devices-section">IoT Devices</h5>
                    <table class="table table-hover table-sm table-pos-info iot-devices-section">
                        <thead>
                            <tr>
                                <th>Type</th>
                                <th>Devices</th>
                            </tr>
                        </thead>
                        <tbody id="iot-devices">
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>
