{% extends '_base.html' %}

{% block title  %} خانه {% endblock title %}

{% block content %}


                <h1 class="text-4xl font-bold text-amber-400 mb-2">
                    {{ config.title }}
                </h1>
                <p class="text-gray-400 mb-6 text-center">
                    از مواد اولیه&zwnj;ات عکس بگیر، یا مواد را بنویس، دستور
                    پخت تحویل بگیر!
                </p>
                <form id="form_prompt" method="post" action="{% url 'dash:prompt' %}" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="flex flex-col items-center w-full max-w-lg">
                        <div class="flex bg-gray-800 p-1 rounded-lg mb-6">
                            <button id="with-image"
                                class="px-6 py-2 rounded-md font-semibold transition-colors bg-amber-500 text-gray-900">
                                ارسال با عکس</button><button id="with-text"
                                class="px-6 py-2 rounded-md font-semibold transition-colors text-gray-300 hover:bg-gray-700">
                                ارسال با متن
                            </button>

                            <script>
                                document
                                    .getElementById("with-image")
                                    .addEventListener("click", () => {
                                        document.getElementById(
                                            "with-image-box",
                                        ).style.display = "block";
                                        document.getElementById(
                                            "with-text-box",
                                        ).style.display = "none";
                                        document
                                            .getElementById("with-image")
                                            .classList.remove(
                                                "text-gray-300",
                                            );
                                        document
                                            .getElementById("with-image")
                                            .classList.remove(
                                                "bg-gray-500",
                                            );

                                        document
                                            .getElementById("with-text")
                                            .classList.remove(
                                                "bg-amber-500",
                                            );
                                        document
                                            .getElementById("with-text")
                                            .classList.remove(
                                                "text-gray-900",
                                            );
                                        document
                                            .getElementById("with-text")
                                            .classList.remove(
                                                "hover:bg-gray-700",
                                            );

                                        document
                                            .getElementById("with-image")
                                            .classList.add("bg-amber-500");
                                        document
                                            .getElementById("with-image")
                                            .classList.add("text-gray-900");
                                    });
                                document
                                    .getElementById("with-text")
                                    .addEventListener("click", () => {
                                        document.getElementById(
                                            "with-image-box",
                                        ).style.display = "none";
                                        document.getElementById(
                                            "with-text-box",
                                        ).style.display = "block";
                                        document
                                            .getElementById("with-text")
                                            .classList.remove(
                                                "text-gray-300",
                                            );
                                        document
                                            .getElementById("with-text")
                                            .classList.remove(
                                                "bg-gray-500",
                                            );

                                        document
                                            .getElementById("with-image")
                                            .classList.remove(
                                                "bg-amber-500",
                                            );
                                        document
                                            .getElementById("with-image")
                                            .classList.remove(
                                                "text-gray-900",
                                            );

                                        document
                                            .getElementById("with-text")
                                            .classList.remove(
                                                "hover:bg-gray-700",
                                            );
                                        document
                                            .getElementById("with-text")
                                            .classList.add("bg-amber-500");
                                        document
                                            .getElementById("with-text")
                                            .classList.add("text-gray-900");
                                    });
                            </script>
                        </div>
                        <div class="w-full">
                            <div id="with-image-box" class="flex flex-col items-center justify-center w-full my-8">
                                <input id="image-input" class="hidden" accept="image/*" capture="environment"
                                    type="file" name="source_image" />

                                <div id="drop-area"
                                    class="w-100 h-64 rounded-xl bg-gray-800 cursor-pointer transition-all duration-200 ease-in-out flex flex-col items-center justify-center border-2 border-dashed border-gray-600 hover:border-amber-400 p-4 relative overflow-hidden">
                                    <!-- پیش‌فرض -->
                                    <div id="placeholder" class="text-center text-gray-400 select-none">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400 mb-4"
                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z">
                                            </path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        </svg>
                                        <p class="font-semibold">
                                            برای انتخاب عکس کلیک کنید
                                        </p>
                                        <p class="text-sm">
                                            یا بکشید و اینجا رها کنید
                                        </p>
                                    </div>

                                    <!-- پیش‌نمایش -->
                                    <div id="preview"
                                        class="hidden flex flex-col items-center justify-center text-center">
                                        <img width="250px" id="preview-img"
                                            class="w-20 h-20 object-cover rounded-lg mb-2 border border-gray-600" />
                                        <p id="preview-name" class="text-sm text-gray-300 break-all"></p>
                                    </div>
                                </div>
                            </div>

                            <script>
                                const dropArea =
                                    document.getElementById("drop-area");
                                const fileInput =
                                    document.getElementById("image-input");
                                const placeholder =
                                    document.getElementById("placeholder");
                                const preview =
                                    document.getElementById("preview");
                                const previewImg =
                                    document.getElementById("preview-img");
                                const previewName =
                                    document.getElementById("preview-name");

                                dropArea.addEventListener("click", () =>
                                    fileInput.click(),
                                );

                                [
                                    "dragenter",
                                    "dragover",
                                    "dragleave",
                                    "drop",
                                ].forEach((eventName) => {
                                    dropArea.addEventListener(
                                        eventName,
                                        (e) => {
                                            e.preventDefault();
                                            e.stopPropagation();
                                        },
                                    );
                                });

                                ["dragenter", "dragover"].forEach(
                                    (eventName) => {
                                        dropArea.addEventListener(
                                            eventName,
                                            () => {
                                                dropArea.classList.add(
                                                    "border-amber-400",
                                                    "bg-gray-700",
                                                );
                                            },
                                        );
                                    },
                                );

                                ["dragleave", "drop"].forEach(
                                    (eventName) => {
                                        dropArea.addEventListener(
                                            eventName,
                                            () => {
                                                dropArea.classList.remove(
                                                    "border-amber-400",
                                                    "bg-gray-700",
                                                );
                                            },
                                        );
                                    },
                                );

                                dropArea.addEventListener("drop", (e) =>
                                    handleFiles(e.dataTransfer.files),
                                );
                                fileInput.addEventListener("change", () =>
                                    handleFiles(fileInput.files),
                                );

                                function handleFiles(files) {
                                    if (files.length > 0) {
                                        const file = files[0];
                                        if (
                                            !file.type.startsWith("image/")
                                        ) {
                                            alert(
                                                "لطفا فقط تصویر انتخاب کنید.",
                                            );
                                            return;
                                        }

                                        // ساخت اسم جدید
                                        const extension = file.name
                                            .split(".")
                                            .pop();
                                        const now = new Date();
                                        const timestamp =
                                            now.getFullYear().toString() +
                                            String(
                                                now.getMonth() + 1,
                                            ).padStart(2, "0") +
                                            String(now.getDate()).padStart(
                                                2,
                                                "0",
                                            ) +
                                            "_" +
                                            String(now.getHours()).padStart(
                                                2,
                                                "0",
                                            ) +
                                            String(
                                                now.getMinutes(),
                                            ).padStart(2, "0") +
                                            String(
                                                now.getSeconds(),
                                            ).padStart(2, "0");
                                        const randomPart = Math.floor(
                                            Math.random() * 10000,
                                        );
                                        const newFileName = `image_${timestamp}_${randomPart}.${extension}`;

                                        const renamedFile = new File(
                                            [file],
                                            newFileName,
                                            { type: file.type },
                                        );

                                        // نمایش پیش‌نمایش
                                        const reader = new FileReader();
                                        reader.onload = (e) => {
                                            previewImg.src =
                                                e.target.result;
                                            previewName.textContent =
                                                renamedFile.name;
                                            placeholder.classList.add(
                                                "hidden",
                                            );
                                            preview.classList.remove(
                                                "hidden",
                                            );
                                        };
                                        reader.readAsDataURL(file);
                                    }
                                }
                            </script>

                            <div id="with-text-box" style="display: none"
                                class="flex flex-col items-center justify-center w-full max-w-lg mx-auto">
                                <div class="w-full text-center mb-4">
                                    <label for="ingredient-input" class="block text-gray-300 mb-2 font-semibold">مواد
                                        اولیه خود را یکی یکی وارد
                                        کنید:</label>
                                    <div class="relative w-full">
                                        <input id="ingredient-input" placeholder="مثلا: مرغ، پیاز، رب گوجه..."
                                            class="w-full bg-gray-800 border-2 border-gray-600 rounded-lg py-3 pr-4 pl-24 text-white placeholder-gray-500 focus:outline-none focus:border-amber-400 transition-colors"
                                            aria-label="ماده اولیه" type="text" value="" /><button id="add-btn"
                                            class="absolute left-2 top-1/2 -translate-y-1/2 bg-amber-500 text-gray-900 font-bold py-2 px-4 rounded-md hover:bg-amber-600 transition-colors"
                                            aria-label="افزودن ماده اولیه">
                                            افزودن
                                        </button>
                                    </div>
                                </div>

                                <div id="ingredients-list"
                                    class="w-full bg-gray-900/50 border border-gray-700 rounded-lg p-3 min-h-[80px] flex flex-wrap gap-2 items-start">
                                    <p class="text-gray-500 w-full text-center py-4">
                                        مواد اولیه اینجا نمایش داده
                                        می&zwnj;شوند.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="source_text" id="source-text" />

                        <div class="w-full max-w-xs mx-auto my-6">
                            <label for="servings-input" class="block text-center text-gray-300 mb-2 font-semibold">برای
                                چند نفر؟</label><input id="servings-input" min="1"
                                class="w-full bg-gray-800 border-2 border-gray-600 rounded-lg py-2 px-3 text-white text-center focus:outline-none focus:border-amber-400 transition-colors"
                                aria-label="تعداد نفرات" type="number" value="2" , name="servings" />
                        </div>
                        <button id="generate-button" onclick="generate_prompt()"
                            class="bg-green-600 text-white font-bold py-3 px-8 rounded-lg shadow-lg hover:bg-green-700 transition-all duration-200 disabled:opacity-50 disabled:bg-gray-600 disabled:cursor-not-allowed transform hover:scale-105">
                            دستور پخت را بساز!
                        </button>
                    </div>
                </form>

                <!-- مودال تاریخچه -->


{% endblock %}


{% block script %}

<script>
    const input = document.getElementById("ingredient-input");
    const addBtn = document.getElementById("add-btn");
    const ingredientsList = document.getElementById("ingredients-list");

    let ingredients = [];

    function renderIngredients() {
        ingredientsList.innerHTML = "";
        if (ingredients.length === 0) {
            ingredientsList.innerHTML =
                "<p>مواد اولیه اینجا نمایش داده می‌شوند.</p>";
            return;
        }
        let source_text = document.getElementById("source-text");
        ingredients.forEach((ing, index) => {
            source_text.value += ing + "\n";
            const tag = document.createElement("span");
            tag.className =
                "bg-slate-700 text-white flex items-center gap-2 rounded-full px-3 py-1 text-sm transition-transform transform hover:scale-105";
            tag.textContent = ing;

            const removeBtn = document.createElement("button");
            removeBtn.className = "remove-btn";
            removeBtn.innerHTML = "&times;";
            removeBtn.onclick = () => {
                ingredients.splice(index, 1);
                renderIngredients();
            };

            tag.appendChild(removeBtn);
            ingredientsList.appendChild(tag);
        });
    }

    function addIngredient() {
        const value = input.value.trim();
        if (value) {
            ingredients.push(value);
            input.value = "";
            renderIngredients();
        }
    }

    addBtn.addEventListener("click", addIngredient);

    input.addEventListener("keydown", (e) => {
        if (e.key === "Enter") {
            e.preventDefault();
            addIngredient();
        }
    });
</script>

<script>
    document
        .getElementById("form_prompt")
        .addEventListener("submit", function (event) {
            event.preventDefault(); // Stops the form from submitting
            console.log("Form submission disabled!");
            // Your custom logic here
        });
</script>

<script>
    function generate_prompt() {
        if (
            ingredients.length > 0 ||
            document.getElementById("image-input").files.length > 0
        ) {
            document.getElementById("form_prompt").submit();
        } else {
            alert(
                "Please enter at least one ingredient or upload an image.",
            );
        }
    }
</script>


{% endblock script %}