zones.php

<?php
include 'config.php';
include 'functions.php';
include 'header.php';
require_once 'auth.php';

$userId = $_GET['user_id'] ?? '';
$udid   = $_GET['udid'] ?? '';
?>

    <style>
        .card-wrapper {
            position: relative;
        }

        .card-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(255, 255, 255, 0.85);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 1rem;
        }

        .fade-in {
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .fade-in.show {
            opacity: 1;
            transform: translateY(0);
        }

        .skeleton-card {
            background-color: #e0e0e0;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
            animation: pulse 1.5s infinite ease-in-out;
            min-height: 160px;
        }

        .skeleton-line {
            height: 16px;
            background-color: #d0d0d0;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .skeleton-line.short {
            width: 50%;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.4; }
            100% { opacity: 1; }
        }
    </style>

    <div class="container mt-4">
        <h1 class="mb-4"><i class="fas fa-vector-square"></i> Strefy grzewcze</h1>

        <div id="zones-loader" class="row">
            <?php for ($i = 0; $i < 4; $i++): ?>
                <div class="col-md-6">
                    <div class="skeleton-card">
                        <div class="skeleton-line" style="width: 70%;"></div>
                        <div class="skeleton-line"></div>
                        <div class="skeleton-line short"></div>
                    </div>
                </div>
            <?php endfor; ?>
        </div>

        <div id="zones-container" class="row d-none"></div>

        <a href="modules.php" class="btn btn-secondary mt-4">&laquo; Powrót</a>
    </div>

    <script>
        const POLLING_INTERVAL_MS = <?= (int) $config['polling_interval_ms'] ?>;
        const POLLING_TIMEOUT_MS = <?= (int) $config['polling_timeout_ms'] ?>;
        const CSRF_TOKEN = '<?= $_SESSION['csrf_token'] ?>';

        function adjustTemp(button, delta) {
            const input = button.parentElement.querySelector('input[name="set_temp"]');
            let value = parseFloat(input.value.replace(',', '.')) || 0;
            value = Math.round((value + delta) * 10) / 10;
            input.value = value.toFixed(1);
        }

        function bindZoneForms() {
            document.querySelectorAll('.zone-form').forEach(form => {
                form.addEventListener('submit', async e => {
                    e.preventDefault();

                    const input = form.querySelector('input[name="set_temp"]');
                    const temp = input.value;
                    const userId = form.dataset.user;
                    const udid = form.dataset.udid;
                    const zoneId = form.dataset.zone;
                    const parentId = form.dataset.parent;
                    const card = form.closest('.card-wrapper');
                    const overlay = card.querySelector('.card-overlay');

                    overlay.classList.remove('d-none');
                    form.querySelectorAll('input, button').forEach(el => el.disabled = true);

                    const setResponse = await fetch('set_temp.php', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        body: new URLSearchParams({
                            user_id: userId,
                            udid: udid,
                            zone_id: zoneId,
                            parent_id: parentId,
                            set_temp: temp,
                            csrf_token: CSRF_TOKEN
                        })
                    });

                    const setResult = await setResponse.json();

                    if (!setResult.success) {
                        alert('Nie udało się ustawić temperatury.');
                        overlay.classList.add('d-none');
                        form.querySelectorAll('input, button').forEach(el => el.disabled = false);
                        return;
                    }

                    let elapsed = 0;

                    const checkInterval = setInterval(async () => {
                        elapsed += POLLING_INTERVAL_MS;

                        const check = await fetch('get_zone.php', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                            body: new URLSearchParams({
                                user_id: userId,
                                udid: udid,
                                zone_id: zoneId,
                                csrf_token: CSRF_TOKEN
                            })
                        });

                        const result = await check.json();

                        if (result.success && result.setTemperature === parseFloat(temp).toFixed(1)) {
                            clearInterval(checkInterval);

                            form.querySelector('input[name="set_temp"]').value = result.setTemperature;
                            card.querySelector('.current-temp').innerHTML = `${result.currentTemperature} &deg;C`;
                            card.querySelector('.zone-state').innerHTML = result.state;

                            overlay.classList.add('d-none');
                            form.querySelectorAll('input, button').forEach(el => el.disabled = false);
                            return;
                        }

                        if (elapsed >= POLLING_TIMEOUT_MS) {
                            clearInterval(checkInterval);
                            overlay.classList.add('d-none');
                            form.querySelectorAll('input, button').forEach(el => el.disabled = false);
                            alert('⚠️ Nie udało się potwierdzić zmiany temperatury w ciągu 16 sekund.');
                        }
                    }, POLLING_INTERVAL_MS);
                });
            });
        }

        document.addEventListener('DOMContentLoaded', () => {
            const userId = "<?= htmlspecialchars($userId) ?>";
            const udid = "<?= htmlspecialchars($udid) ?>";

            fetch(`zones_data.php?user_id=${encodeURIComponent(userId)}&udid=${encodeURIComponent(udid)}`)
                .then(res => res.text())
                .then(html => {
                    const loader = document.getElementById('zones-loader');
                    const container = document.getElementById('zones-container');

                    container.innerHTML = html;

                    container.querySelectorAll('.card').forEach((card, i) => {
                        card.classList.add('fade-in');
                        setTimeout(() => card.classList.add('show'), i * 100);
                    });

                    bindZoneForms();

                    loader.classList.add('d-none');
                    container.classList.remove('d-none');
                })
                .catch(() => {
                    document.getElementById('zones-loader').innerHTML =
                        '<div class="alert alert-danger">Błąd podczas ładowania stref.</div>';
                });
        });
    </script>

<?php include 'footer.php'; ?>