<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BIM and Geo information</title>
    <link rel="icon" type="image/x-icon" href="../static/images/flavicon.png">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            background-color: #f8f9fa;
            align-items: center;
            margin: 0;
            padding: 20px;
            flex-direction: column;
        }
        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 800px;
            width: 100%;
            position: relative;
        }
        .header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .logo {
            max-height: 60px;
        }
        h1 {
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
        }
        .error-message {
            color: red;
            margin-bottom: 20px;
            white-space: pre-wrap;
        }

        .txts {
            color: black;
            font-weight: bolder;
            margin-bottom: 20px;
            white-space: pre-wrap;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: darkblue;
            color: white;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input.input-error {
            border-color: #dc3545;
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
            background: #fff7f7;
        }
        .btn {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #0056b3;
        }
        .box {
            display: inline-block;
            margin: 10px;
            padding: 20px;
            width: 150px;
            height: 120px;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
            overflow: hidden; /* Ensure the image does not exceed the box */
        }
        .box img {
            display: block;
            width: 150px;
            height: auto;
            margin: 0 auto;
        }
        .loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }
        .loader img {
            width: 100px;
            height: 100px;
            animation: fadeInOut 2s infinite;
        }
        .info-text {
            margin-top: 10px;
            font-size: 14px;
            color: #333;
        }
        @keyframes fadeInOut {
            0% { opacity: 0; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }
        @media (max-width: 768px) {
            input[type="text"] {
                width: 50%;
            }
        }
        @media (max-width: 480px) {
            input[type="text"] {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <img src="../static/images/logo1.png" alt="Logo 1" class="logo">
        <a href="https://3d.bk.tudelft.nl/"><img src="../static/images/logo2.png" alt="Logo 2" class="logo"></a>
    </div>
    <div class="container">
        <h1>BIM and Geo Information</h1>

        {% if messages %}
        <table>
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                {% for message, detail in messages %}
                <tr>
                    <td>{{ message }}</td>
                    <td>{{ detail }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% endif %}

        {% if error %}
        <p class="error-message">{{ error }}</p>
        {% endif %}

        {% if not Num %}
            {% if Refl %}
            <p class="txts">Choose how you want to georeference your IFC file.</p>
            <div class="box" id="box1">
                <img src="../static/images/way1.png" alt="Image 1">
                <div class="info-text">Use existing information</div>
            </div>
            <div class="box" id="box2">
                <img src="../static/images/way2.png" alt="Image 2">
                <div class="info-text">Add surveyed points to existing information</div>
            </div>
            <div class="box" id="box3">
                <img src="../static/images/way3.png" alt="Image 3">
                <div class="info-text">Add surveyed points and ignore existing information</div>
            </div>
            {% else %}
            <form method="POST" onsubmit="showLoader()" id="numForm">
                <label for="Num">Enter the number of extra surveyed points:</label>
                <input type="text" id="Num" name="Num">
                <input type="submit" value="Set" class="btn">
            </form>
            {% endif %}
        {% endif%}



        <!-- New boxes with images and texts -->


        {% if Num %}
            <form method="POST" action="{{ url_for('calculate', filename=filename) }}" onsubmit="showLoader()">
                <div id="tableContainer">
                    {% set values = form_values|default({}) %}
                    {% set errors = field_errors|default({}) %}
                    <!-- Use Jinja2 to generate the table based on the table_content data -->
                    <table>
                        <tr>
                            <th colspan="3">Source CRS (IFC) [{{ ifcunit }}]</th>
                            <th colspan="3">Target CRS (MAP) [{{ mapunit }}]</th>
                        </tr>
                        <tr>
                            <th>X</th>
                            <th>Y</th>
                            <th>Z</th>
                            <th>X'</th>
                            <th>Y'</th>
                            <th>Z'</th>
                        </tr>
                        {% for row in range(Num) %}
                        <tr>
                            {% set field_name = 'x' ~ row %}
                            <td><input type="text" inputmode="decimal" autocomplete="off" name="{{ field_name }}" value="{{ values.get(field_name, '') }}" class="{% if field_name in errors %}input-error{% endif %}" {% if field_name in errors %}aria-invalid="true" title="{{ errors[field_name] }}"{% endif %}></td>
                            {% set field_name = 'y' ~ row %}
                            <td><input type="text" inputmode="decimal" autocomplete="off" name="{{ field_name }}" value="{{ values.get(field_name, '') }}" class="{% if field_name in errors %}input-error{% endif %}" {% if field_name in errors %}aria-invalid="true" title="{{ errors[field_name] }}"{% endif %}></td>
                            {% set field_name = 'z' ~ row %}
                            <td><input type="text" inputmode="decimal" autocomplete="off" name="{{ field_name }}" value="{{ values.get(field_name, '') }}" class="{% if field_name in errors %}input-error{% endif %}" {% if field_name in errors %}aria-invalid="true" title="{{ errors[field_name] }}"{% endif %}></td>
                            {% set field_name = 'x_prime' ~ row %}
                            <td><input type="text" inputmode="decimal" autocomplete="off" name="{{ field_name }}" value="{{ values.get(field_name, '') }}" class="{% if field_name in errors %}input-error{% endif %}" {% if field_name in errors %}aria-invalid="true" title="{{ errors[field_name] }}"{% endif %}></td>
                            {% set field_name = 'y_prime' ~ row %}
                            <td><input type="text" inputmode="decimal" autocomplete="off" name="{{ field_name }}" value="{{ values.get(field_name, '') }}" class="{% if field_name in errors %}input-error{% endif %}" {% if field_name in errors %}aria-invalid="true" title="{{ errors[field_name] }}"{% endif %}></td>
                            {% set field_name = 'z_prime' ~ row %}
                            <td><input type="text" inputmode="decimal" autocomplete="off" name="{{ field_name }}" value="{{ values.get(field_name, '') }}" class="{% if field_name in errors %}input-error{% endif %}" {% if field_name in errors %}aria-invalid="true" title="{{ errors[field_name] }}"{% endif %}></td>
                        </tr>
                        {% endfor %}
                    </table>
                </div>
                <input type="submit" value="Submit" class="btn">
            </form>
        {% else %}
            <form method="POST" onsubmit="showLoader()" id="numForm" style="display: none;">
                <input type="hidden" id="boxNumber" name="boxNumber">
                <label for="Num">Enter the number of extra surveyed points:</label>
                <input type="text" id="Num" name="Num">
                <input type="submit" value="Set" class="btn">
            </form>
        {% endif %}

        <div class="loader" id="loader">
            <img src="{{ url_for('static', filename='images/loading.png') }}" alt="Loading...">
        </div>
    </div>

    <script>
        function showLoader() {
            document.getElementById('loader').style.display = 'block';
        }

        function hideBoxes(exceptId) {
            const boxes = ['box1', 'box2', 'box3'];
            boxes.forEach(boxId => {
                const box = document.getElementById(boxId);
                if (!box) return;
                if (boxId === exceptId) {
                    box.style.display = 'block';
                } else {
                    box.style.display = 'none';
                }
            });
            if (exceptId === 'box3') {
                Refl = false; // Assuming Refl is a variable accessible in your Javascript context
            }
        }

        const box1 = document.getElementById('box1');
        const box2 = document.getElementById('box2');
        const box3 = document.getElementById('box3');

        if (box1) box1.addEventListener('click', function() {
            document.getElementById('numForm').style.display = 'none';
            document.getElementById('boxNumber').value = '1';
            document.getElementById('Num').value = '0';
            showLoader();
            document.getElementById('numForm').submit();
        });

        if (box2) box2.addEventListener('click', function() {
            hideBoxes('box2');
            document.getElementById('boxNumber').value = '2';
            document.getElementById('numForm').style.display = 'block';
        });

        if (box3) box3.addEventListener('click', function() {
            hideBoxes('box3');
            document.getElementById('boxNumber').value = '3';
            document.getElementById('numForm').style.display = 'block';
        });
    </script>
</body>
</html>
