<?php
include "classes/app.class.php";
?>
<div class="app-content-wrapper">
    <div class="page-header">
        <h2 class="main-title">REPORTS</h2>
    </div>
    <div class="table-container">
        <div id="addUserModal" class="modal-overlay" style="display:flex;">
            <div class="modal-card">
                <div class="modal-header">
                    <h3>REPORTS</h3>
                </div>
                <div class="modal-body">
                    <div class="input-group" style="max-width: 361px;">
                        <label>From</label>
                        <input type="datetime-local" id="from">
                    </div>
                    <div class="input-group" style="max-width: 361px;">
                        <label>To</label>
                        <input type="datetime-local" id="to">
                    </div>
                    <div id="add-tank-select-wrap">
                        <div class="input-group">
                            <div style="display:flex; justify-content:space-between; align-items:center;">
                                <label>Visible Tanks</label>
                                <button type="button" class="btn-link" onclick="toggleAllTanks('add')">Select
                                    All</button>
                            </div>
                            <input type="text" class="search-box" placeholder="Search tanks..."
                                onkeyup="filterChecklist(this, 'add-tank-list')">
                            <div class="tank-checkbox-list" style="max-height: 400px;" id="add-tank-list">
                                <div class="tank-group-header">General / Internal Tanks</div>
                                <?php
                                if ($_SESSION['client_id'] == 0) {
                                    $gen_tanks = $db->query("tanks", "SELECT record_id, name FROM tanks WHERE 1 ORDER BY name ASC");
                                } else {
                                    $gen_tanks = $db->query("tanks", "SELECT record_id, name FROM tanks WHERE client_id = {$_SESSION['client_id']} ORDER BY name ASC");
                                }
                                while ($t = $gen_tanks->fetch_assoc()) {
                                    echo "<label class='check-item'><input type='checkbox' class='tank-cb' data-type='INTERNAL' value='{$t['record_id']}'> {$t['name']}</label>";
                                }
                                ?>
                            </div>
                        </div>
                    </div>
                    <div class="input-group">
                        <label>Level of Every:</label>
                        <select id="intervals">
                            <option value="15">15 Min</option>
                            <option value="30">30 Min</option>
                            <option value="45">45 Min</option>
                            <option value="60">1 Hour</option>
                            <option value="120">2 Hours</option>
                            <option value="180">3 Hours</option>
                            <option value="360">6 Hours</option>
                            <option value="720">12 Hours</option>
                            <option value="1440">24 Hours</option>


                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="saveNewUserBtn" class="btn-primary" onclick="submitReport()">Generate</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>



    function toggleAllTanks(mode) {
        const checkboxes = document.querySelectorAll(`#${mode}-tank-list .tank-cb`);
        const allChecked = Array.from(checkboxes).every(c => c.checked);
        checkboxes.forEach(c => c.checked = !allChecked);
    }

    function submitReport() {
        from = document.getElementById('from').value;
        if (from == '') {
            alert('Please select a start date');
            return;
        }
        to = document.getElementById('to').value;
        if (to == '') {
            alert('Please select an end date');
            return;
        }
        const tanks = Array.from(document.querySelectorAll('#add-tank-list .tank-cb')).map(c => c.value);
        const tanks_checked = Array.from(document.querySelectorAll('#add-tank-list .tank-cb')).map(c => c.checked);
        if (!tanks_checked.includes(true)) {
            alert('Please select at least one tank');
            return;
        }
        const intervals = document.getElementById('intervals').value;
        selected_tanks = [];
        // console.log(tanks, tanks_checked);

        for (let i = 0; i < tanks.length; i++) {
            if (tanks_checked[i]) {
                selected_tanks.push(tanks[i]);
            }
        }
        from = from.replace('T', ' ');
        to = to.replace('T', ' ');
        console.log(from, to, selected_tanks, intervals);
        window.location.href = `report.php?from=${from}&to=${to}&tanks=${selected_tanks}&intervals=${intervals}`;
    }


    // Search Functionality
    function filterChecklist(input, listId) {
        const filter = input.value.toLowerCase();
        const items = document.querySelectorAll(`#${listId} .check-item`);
        items.forEach(item => {
            const text = item.textContent.toLowerCase();
            item.style.display = text.includes(filter) ? "flex" : "none";
        });
    }

</script>