<!DOCTYPE html>
<html>
    <head>

        {% set page_title = 'Plate Visualization' %}
        <title>{{ page_title }}</title>

        {% set bloom_mod = 'lims' %}

        <link rel="stylesheet" type="text/css" href="{{ style.skin_css }}"  >
        <link rel="stylesheet" type="text/css" href="/static/legacy/style.css">
        <style>
    .plate {
        position: relative;
        display: inline-block;
        padding: 29px;
        border-radius: 15px;
        background-color: #f0f0f0;
    }
    .well {
        position: absolute;
        border-radius: 50%;
        width: 57px;
        height: 57px;
        text-align: center;
        line-height: 40px;
        background-color: red;
        cursor: pointer;
        color: #0e0643;
    }
    .tooltip {
        display: none;
        position: absolute;
        border: 1px solid #ddd;
        background-color: inherit;
        padding: 10px;
        z-index: 100;
    }
    #wellDetails {
        display: none; /* Hidden by default */
        position: absolute; /* Allows positioning relative to the nearest positioned ancestor */
        border: 1px solid #ddd; /* Light grey border */
        background-color: white; /* White background */
        padding: 10px; /* Padding inside the div */
        z-index: 200; /* Ensures it appears above other elements */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds a subtle shadow for depth */
        max-width: 300px; /* Maximum width */
        word-wrap: break-word; /* Ensures the text wraps and does not overflow */
        font-family: Arial, sans-serif; /* Font styling */
        font-size: 14px; /* Font size */
        color: #333; /* Text color */
    }
    
    /* Close button style (if you add one) */
    #wellDetails .close-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        border: none;
        background: none;
        cursor: pointer;
        font-size: 20px;
        color: #333;
    }
    .container-rows {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 40px;
        color: #0e0643;
        font-size: var(--font-size-large);

    }   
    .container-cols {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 40px;
        color: #0e0643;
        font-size: var(--font-size-large);
    }
        </style>
        <script>
        // Add a script to calculate and set the plate dimensions
        document.addEventListener('DOMContentLoaded', (event) => {
            let maxX = 0;
            let maxY = 0;
            document.querySelectorAll('.well').forEach(well => {
                const left = parseInt(well.style.left);
                const top = parseInt(well.style.top);
                maxX = Math.max(maxX, left);
                maxY = Math.max(maxY, top);
            });

            const plate = document.getElementById('plate');
            plate.style.width = `${maxX + 45}px`; // Adjust the value to fit the wells
            plate.style.height = `${maxY + 45}px`;
        });

        function showTooltip(event, name, created, euid) {
            // Tooltip functions
        }
        function hideTooltip() {
            // Hide Tooltip
        }
        function showDetails(name, created, euid) {
            // Show Details
        }

        var lastClickedWell = null;


        </script>
    </head>
    <body>
        
        {% include 'legacy/bloom_header.html' %}

        <div id="myTooltipx" class="xtooltip"></div>
        <br>
        <ul>
            <h1>
                <a href=euid_details?euid={{ plate.euid }}>{{ plate.euid }}</a> - {{ plate.name }} : : : {{ plate.type }} : : : {{ plate.subtype }}
            </h1>
            <ul>
                <hr>
                <ul>
                    <div class="plate" id="plate">
                        <!-- Row Labels -->
                        <!-- Row Labels -->
                        {% for i in range(plate.json_addl['properties']['num_rows']) %}
                            <div class="container-rows"
                                 style="position: absolute;
                                        left: 0;
                                        top: {{ (i + 1) * 60 }}px">{{ 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[i] }}</div>
                        {% endfor %}
                        <!-- Column Labels -->
                        {% for i in range(plate.json_addl['properties']['num_cols']) %}
                            <div class="container-cols"
                                 style="position: absolute;
                                        top: 0;
                                        left: {{ (i + 1) * 70 }}px">{{ i + 1 }}</div>
                        {% endfor %}
                        {% for lineage in plate.parent_of_lineages %}
                            {% set well = lineage.child_instance %}
                            {% if well.type == 'well' %}
                                {% set cont_address = well.json_addl.get('cont_address', {}) %}
                                {% set col_idx = cont_address.get('col_idx', 'Unknown') %}
                                {% set row_idx = cont_address.get('row_idx', 'Unknown') %}
                                {% set quant_value = well.json_addl.properties.get('quant_value', 0) %}
                                <div class="well"
                                     style="left: {{ (col_idx|int + 1) * 70 }}px;
                                            top: {{ (row_idx|int + 1) * 60 }}px;
                                            background-color: {{ get_well_color(quant_value) }}"
                                     onmouseover="showTooltip(event, '{{ well.name }}', '{{ well.created_dt }}', '{{ well.euid }}', '{{ quant_value }}')"
                                     onmouseout="hideTooltip()"
                                     onclick="showDetails('{{ well.name }}', '{{ well.created_dt }}', '{{ well.euid }}', this)">
                                    {{ quant_value }}
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                    <div id="wellDetails"
                         style="display:none;
                                position:absolute;
                                border:1px solid black;
                                background-color:lightgray;
                                padding:10px">
                        <!-- Details will be displayed here -->
                    </div>
                </ul>
            </ul>
            <script>
    function showTooltip(event, name, created, euid, quant_value) {
        var tooltip = document.getElementById('myTooltip'); // Make sure you have an element with ID 'myTooltip'
        tooltip.innerHTML = `Name: ${name}<br>Created: ${created}<br>EUID: ${euid}<br>QUANT VALUE: ${quant_value}`;
        tooltip.style.display = 'block';
        tooltip.style.left = event.pageX + 'px';
        tooltip.style.top = event.pageY + 'px';
    }
    
    function hideTooltip() {
        var tooltip = document.getElementById('myTooltip');
        tooltip.style.display = 'none';
    }
    
    function showDetails(name, created, euid, clickedWell) {
        if (lastClickedWell) {
            lastClickedWell.style.border = 'none'; // Reset the last clicked well's border
        }
        clickedWell.style.border = '2px solid orange'; // Highlight the new clicked well
        lastClickedWell = clickedWell; // Update the last clicked well

        var detailsDiv = document.getElementById('wellDetails'); 
        detailsDiv.innerHTML = `<strong>Name:</strong> ${name}<br>
                                <strong>Created:</strong> ${created}<br>
                                <strong>EUID:</strong> <a href="/euid_details?euid=${euid}" target="x">${euid}</a>`;
        detailsDiv.style.display = 'block';
        detailsDiv.style.left = (clickedWell.offsetLeft + 50) + 'px'; // Adjust position
        detailsDiv.style.top = (clickedWell.offsetTop + 50) + 'px';
    }


            </script>
        </body>
    </html>
