<?php

include "../../root.class.php";
$html = new html();
$html->add_styles_page();
$functions = new functions();
$db = new db_safeguard();
// echo $data;

$tanks_res = $db->query("sites", "SELECT * FROM sites WHERE company_id = {$_SESSION['company_id']} ORDER BY record_id DESC");
?>
<style>
    /* Wrap your table in a container */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* smooth scrolling on iOS */
    }

    /* Basic styling for the table (same as before) */
    table {
        width: 100%;
        border-collapse: collapse;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 14px;
        color: #333;
        background: #fff;
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
        border-radius: 8px;
        overflow: hidden;
        min-width: 700px;
        /* Ensure min width so horizontal scroll triggers */
    }

    table th {
        background: #1e90ff;
        color: white;
        text-align: left;
        padding: 12px 15px;
        font-weight: 600;
        letter-spacing: 0.03em;
        user-select: none;
    }

    table td {
        padding: 12px 15px;
        border-bottom: 1px solid #eaeaea;
    }

    table tr:nth-child(even) {
        background: #f9f9f9;
    }

    table tbody tr:hover {
        background-color: #d0e7ff;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
</style>
<div class="form_down row">
    <h1>SITES</h1>
    <input type="submit" class="submit_btn" value="ADD" onclick="window.location.href='add_site.php'">
</div>
<div class="table-responsive">
    <table>
        <tr>
            <th>
                NAME
            </th>
        </tr>

        <?php

        while ($tanks = $tanks_res->fetch_assoc()) {
            ?>

            <tr>
                <td>
                    <input type='text' value='<?php echo $tanks['name']; ?>'
                        onchange="change(this,'name','<?php echo $tanks['record_id']; ?>')" class="inputs">
                </td>
               
            </tr>
            <?php
        }
        ?>

    </table>
</div>

<script>
    function change(input, column_name, record_id) {
        if (confirm("Are you sure you want to change this detail?")) {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var orig_color = input.style.backgroundColor;
                    if (this.responseText == "1") {
                        input.style.transition = "background-color 1.5s ease";
                        input.style.backgroundColor = "green";
                        setTimeout(function () {
                            input.style.backgroundColor = orig_color;
                        }, 1500);

                    } else {
                        input.style.transition = "background-color 1.5s ease";
                        input.style.backgroundColor = "red";
                        setTimeout(function () {
                            input.style.backgroundColor = orig_color;
                        }, 1500);
                        alert(this.responseText);
                    }
                }
            };
            xmlhttp.open("POST", "update_site_settings.ajax.php", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send("value=" + input.value + "&column_name=" + column_name + "&record_id=" + record_id);
        }
    }
</script>