{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Osina</title>

    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>

<body class="font-poppinsLight">
    <form id="hiddenContent" method="POST" action="{% url 'addprojectnotemodal' project.project_id %}">
        {% csrf_token %}
        <h1 class="text-secondosiblue text-2xl font-semibold text-center">Add Note</h1>

        <div class="w-full flex flex-col gap-3 justify-center items-center">
            <input required name="note_text" type="text" placeholder="Type your note here..."
                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">

            <select required name="project" id=""
                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 hidden">
                <option value="{{project.id}}">{{project.id}}</option>
            </select>
        </div>

        <div class="w-full flex justify-between items-center flex-wrap mt-4">
            <div class="color-option w-[40px] h-[40px] rounded-full bg-blue-200 cursor-pointer"
                style="background-color: #BFDBFF;" id="blue">

            </div>

            <div class="color-option w-[40px] h-[40px] rounded-full bg-pink-200 cursor-pointer"
                style="background-color: #FBCFE8;" id="pink">

            </div>

            <div class="color-option w-[40px] h-[40px] rounded-full bg-yellow-200 cursor-pointer"
                style="background-color: #FEEF91;" id="yellow">

            </div>

            <div class="color-option w-[40px] h-[40px] rounded-full bg-green-200 cursor-pointer"
                style="background-color: #B6FAD0;" id="green">

            </div>

            <div class="color-option w-[40px] h-[40px] rounded-full bg-purple-200 cursor-pointer"
                style="background-color: #EBD6F9;" id="purple">

            </div>

            <div class="color-option w-[40px] h-[40px] rounded-full bg-red-200 cursor-pointer"
                style="background-color: #FFCACA;" id="red">

            </div>
        </div>

        <div>
            <input required name="note_color" type="text"
                class="w-full border border-gray-300 rounded-md py-1 px-3 outline-none h-[50px] mt-4 hidden"
                id="hexCodeDisplay">
        </div>

        <script>
            // TO GET THE COLOR OF THE DIV
            const colorOptions = document.querySelectorAll('.color-option');
            const hexCodeDisplay = document.getElementById('hexCodeDisplay');

            colorOptions.forEach((colorOption) => {
                colorOption.addEventListener('click', () => {
                    // Remove borders from all color-options
                    colorOptions.forEach((option) => {
                        option.style.border = 'none';
                    });

                    // Get the id and background color of the clicked color div
                    const colorId = colorOption.id;
                    const bgColor = colorOption.style.backgroundColor;

                    // Convert the RGB color to a hex code (if it's in RGB format)
                    const hexColor = rgbToHex(bgColor);

                    // Display the hex code in the input field
                    hexCodeDisplay.value = hexColor;

                    // Apply a black border to the selected color-option
                    colorOption.style.border = '3px solid gray';

                    console.log(`Selected color ID: ${colorId}`);
                });
            });

            // Function to convert RGB color to hex code
            function rgbToHex(rgb) {
                const rgbaArray = rgb.match(/\d+/g);
                const hexArray = rgbaArray.map((value) => {
                    const hex = parseInt(value, 10).toString(16);
                    return hex.length === 1 ? '0' + hex : hex;
                });
                return '#' + hexArray.join('');
            }
        </script>

        <div class="w-full flex justify-center items-center mt-6">
            <button type="submit"
                class="w-fit bg-osiblue border border-osiblue rounded-md text-white text-xl px-5 py-1 hover:bg-white hover:text-osiblue duration-300">Save</button>
        </div>
    </form>
</body>

</html>