<html>
    <head>
        <script src="../static/jquery-3.7.1.min.js"></script>
        <style>
            #imageContainer {
                position: relative;
                display: inline-block; /* Makes the container fit the size of the image */
            }
            #selectionOverlay {
                position: absolute;
                border: 2px solid red; /* Visible border for the selection */
                pointer-events: none; /* Prevents the overlay from capturing mouse events */
            }
        </style>
    </head>
    <body>
        <form id="mainForm">
            URL: <input type="text" id="url" />
            Name: <input type="text" id="name" />
            <input type="submit" id="submitURLButton" title="submit" />
        </form>
        <form id="coordsForm">
            Top:<input type="text" id="top"/>
            Left:<input type="text" id="left" />
            Height:<input type="text" id="height" />
            Width:<input type="text" id="width" />
        </form>

        <div id="finalPrice"></div>

        <div id="imageContainer">
            <img src="" id="screenshot" />
            <div id="selectionOverlay"></div> <!-- Overlay for selection visualization -->
        </div>

    <script>
$(function () { // Document ready shorthand

    $("#mainForm").on("submit", function(event){
        event.preventDefault();
        let url = $("#url").val();
        let name = $("#name").val();
        $.ajax({
            url: `http://localhost:8001/takeScreenshot?name=${name}&url=${url}`,
        }).done(function(){
            $("#screenshot").attr("src", `http://localhost:8001/images/${name}.png`);
        });
    });

    $("#screenshot").click(function(event){
        let offset = $(this).offset();
        let overlay = $("#selectionOverlay");

        if($("#left").val()){
            let top = Math.min($("#top").val(), event.pageY - offset.top);
            let left = Math.min($("#left").val(), event.pageX - offset.left);
            let height = Math.abs((event.pageY - offset.top) - $("#top").val());
            let width = Math.abs(event.pageX - offset.left - $("#left").val());

            $("#height").val(height);
            $("#width").val(width);
            $("#top").val(top);
            $("#left").val(left);

            overlay.css({ top: top, left: left, width: width, height: height }); // Update overlay position and size

            let name = $("#name").val();

            let newUrl = `http://localhost:8001/getValueFromImage?name=${name}&top=${top}&left=${left}&height=${height}&width=${width}`;
            $.ajax({
                url: newUrl,
            }).done(function (response) {
                $("#finalPrice").text("Found Price!!! " + response);
            });
        } else {
            $("#left").val(event.pageX - offset.left);
            $("#top").val(event.pageY - offset.top);
            overlay.css({ top: event.pageY - offset.top, left: event.pageX - offset.left, width: 0, height: 0 }); // Reset overlay size
        }
    });
});

    </script>
</html>