{% extends 'NewTemplates/new_base.html' %}
{% load static %}
<style>

</style>
{% block body %}
<div class="inner-banner">
    <div class="container">
        <h1>Sell Form</h1>
    </div>
</div><br><br> <br><br>
<div class="container mt-5">
    {% if success_message %}
    <div id="messageDiv" style="display: block">
        <span class="successmsg">{{ success_message }}!</span>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            setTimeout(function () {
                window.location.href = "{{ redirect_url }}";
            }, 3000);
        });
    </script>
    {% endif %}

    <form id="FormID" action="{% url 'new_sell_form' %}" method="POST" enctype="multipart/form-data">
        {% csrf_token %}

        <!-- First Row -->
        <div class="row">
            <div class="col-md-6"><br><br>
                <div class="form-group">
                    <label for="company"><span id="redot">*</span>Company Name:</label>
                    <input type="text" class="form-control def" id="company" name="company" /><br />
                </div>
            </div>
            <div class="col-md-6"><br><br>
                <div class="form-group">
                    <label for="contactPerson"><span id="redot">*</span>Contact Person Name:</label><br />
                    <input type="text" class="form-control def" id="contactPerson" name="contactPerson" /><br />
                </div>
            </div>
        </div>

        <!-- Second Row -->
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="contactNo"><span id="redot">*</span>Contact Number:</label>
                    <input type="tel" class="form-control def" id="contactNo" name="contactNo" maxlength="13" /><br />
                </div>                
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="email"><span id="redot">*</span>Email:</label>
                    <input type="email" class="form-control def" id="email" name="email" /><br />
                </div>
            </div>
        </div>

        <!-- Third Row -->
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="productCategory"><span id="redot">*</span>Product Category:</label>
                    <select class="form-control" id="productCategory" name="productCategory">
                        {% for i in category %}
                        <option value="{{i.id}}">{{i.category_name}}</option>
                        {% endfor %}
                        <option value="Other">Other</option>
                    </select><br />
                </div>

                <!-- Input box for 'Other' -->
                <div id="otherInputBox" style="display: none;" class="form-group">
                    <label for="otherCategory">Specify Other Category:</label>
                    <input type="text" class="form-control" id="otherCategory" name="otherCategory">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="productName"><span id="redot">*</span>Product Name:</label>
                    <input type="text" class="form-control" id="productName" name="productName" /><br />
                </div>
            </div>
        </div>

        <!-- Fourth Row -->
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="modelNo">Model No:</label>
                    <input type="text" class="form-control" id="modelNo" name="modelNo" /><br />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="brandName">Brand Name:</label>
                    <input type="text" class="form-control" id="brandName" name="brandName" /><br />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="expDate">Exp. Date:</label>
                    <input type="date" class="form-control" id="exp" name="exp" /><br />
                </div>
            </div>
        </div>

        <!-- Fifth Row -->
        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label for="manufacturingCountry"><span id="redot">*</span>Manufacturing Country:</label>
                    <input type="text" class="form-control" id="manufacturingCountry"
                        name="manufacturingCountry" /><br />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="manufacturingYear">Manufacturing Year:</label>
                    <input type="number" class="form-control" id="manufacturingYear" name="manufacturingYear" /><br />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="dimensions">Dimensions:</label>
                    <input type="text" class="form-control" id="dimensions" name="dimensions" /><br />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="quantity"><span id="redot">*</span>Quantity:</label>
                    <input type="text" class="form-control" id="quantity" name="quantity" /><br />
                </div>
            </div>
        </div>

        <!-- Sixth Row -->
        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label for="price"><span id="redot">*</span>Current Price (QAR):</label>
                    <input type="number" class="form-control" id="price" name="price" step="any" /><br />
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="marprice"><span id="redot">*</span>Previous Price (QAR):</label>
                    <input type="number" class="form-control" id="marprice" name="marprice" step="any" /><br />
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="images"><span id="redot">*</span>Upload Images (multiple):</label>
                    <input type="file" class="form-control" id="images" name="images[]" accept="image/*"
                        multiple /><br />
                </div>
            </div>
        </div>

        <!-- Seventh Row -->
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="productDescription">Product Description:</label>
                    <textarea class="form-control" id="productDescription" name="productDescription"
                        rows="4"></textarea><br />
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="rts"><span id="redot">*</span>Reason To Sell:</label>
                    <select class="form-control" id="rts" name="rts">
                        <option value="Surplus Inventory">Surplus Inventory</option>
                        <option value="Asset Liquidation">Asset Liquidation</option>
                        <option value="Expiring Soon">Expiring Soon</option>
                        <option value="Other">Other</option>
                    </select><br />
                </div>
            </div>
        </div>

        <!-- Additional Row for dynamic form fields -->
        <div class="row dynamic-fields" style="display: none">
            <label class="form-check-label" id="pro_heading">New Product</label><br /><br />
            <!-- changes -->
            <br />
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label><span id="redot">*</span>Product Category:</label>
                        <select class="form-control adCategory" id="adCategory" name="additionalproductCategory[]">
                            {% for i in category %}
                            <option value="{{i.id}}">{{i.category_name}}</option>
                            {% endfor %}
                            <option value="Other">Other</option>
                        </select><br />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label><span id="redot">*</span>Other Category:</label>
                        <input type="text" class="form-control adotherCategory" id="adotherCategory-1"
                            name="additionalotherCategory[]">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="addproductName"><span id="redot">*</span>Product Name:</label>
                        <input type="text" class="form-control" id="addproductName"
                            name="additionalproductName[]" /><br />
                    </div>
                </div>
            </div>

            <!-- Fourth Row -->
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="modelNo">Model No:</label>
                        <input type="text" class="form-control" id="addmodelNo" name="additionalmodelNo[]" /><br />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="brandName">Brand Name:</label>
                        <input type="text" class="form-control" id="addbrandName" name="additionalbrandName[]" /><br />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="expDate">Exp. Date:</label>
                        <input type="date" class="form-control" id="addexp" name="additionalexp[]" /><br />
                    </div>
                </div>
            </div>

            <!-- Fifth Row -->
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="manufacturingCountry"><span id="redot">*</span>Manufacturing Country:</label>
                        <input type="text" class="form-control" id="addmanufacturingCountry"
                            name="additionalmanufacturingCountry[]" /><br />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="manufacturingYear">Manufacturing Year:</label>
                        <input type="number" class="form-control" id="addmanufacturingYear"
                            name="additionalmanufacturingYear[]" /><br />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="dimensions">Dimensions:</label>
                        <input type="text" class="form-control" id="adddimensions"
                            name="additionaldimensions[]" /><br />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="quantity"><span id="redot">*</span>Quantity:</label>
                        <input type="text" class="form-control" id="addquantity" name="additionalquantity[]" /><br />
                    </div>
                </div>
            </div>

            <!-- Sixth Row -->
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="quantity"><span id="redot">*</span>Current Price (QAR):</label>
                        <input type="number" class="form-control" id="addprice" name="additionalprice[]" /><br />
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="quantity"><span id="redot">*</span>previous Price (QAR):</label>
                        <input type="number" class="form-control" id="addmarprice" name="additionalmarprice[]" /><br />
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="images"><span id="redot">*</span>Upload Images (multiple):</label>
                        <input type="file" class="form-control" id="addimages" name="additionalimages[]"
                            accept="image/*" multiple /><br />
                    </div>
                </div>
            </div>

            <!-- Seventh Row -->
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="productDescription">Product Description:</label>
                        <textarea class="form-control" id="addproductDescription" name="additionalproductDescription[]"
                            rows="4"></textarea><br />
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="productCategory"><span id="redot">*</span>Reason To Sell:</label>
                        <select class="form-control" id="addrts" name="additionalrts[]">
                            <option value="Asset Liquidation">Asset Liquidation</option>
                            <option value="Surplus Inventory">Surplus Inventory</option>
                            <option value="Expiring Soon">Expiring Soon</option>
                            <option value="Other">Other</option>
                        </select><br />
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-danger delete-row">Delete</button>
            </div>
            <br />
        </div>
        <button type="button" class="btn btn-success" id="addMore">Add More</button><br /><br />
        <div class="row">
            <div class="col-md-12">
                <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
            </div>
        </div>
    </form>
    <script>
        // JavaScript code to show "HELLO" only when the "?" is clicked
        const questionMark = document.getElementById('questionMark');
        const helloMessage = document.querySelector('.helloMessage');

        questionMark.addEventListener('click', function () {
            helloMessage.style.display = 'inline';
            setTimeout(function () {
                helloMessage.style.display = 'none';
            }, 5000); // Adjust the time (in milliseconds) the message should be displayed
        });

        document.addEventListener('DOMContentLoaded', function () {
            helloMessage.style.display = 'none'; // Hide on page load
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const addMoreButton = document.getElementById("addMore");
            const form = document.getElementById("FormID");
            const priceInput = document.getElementById("price");
            const marpriceInput = document.getElementById("marprice");
            $(document).ready(function () {
                $("#productCategory").change(function () {
                    if ($(this).val() == "Other") {
                        $("#otherInputBox").show();
                    } else {
                        $("#otherInputBox").hide();
                    }
                });

                // Initially, disable the Other Category input box
                $('.adotherCategory').prop('disabled', true);

                // When the user selects "Other" from the dropdown, enable the Other Category input box
                $('body').on('change', 'select.adCategory', function () {
                    var selectedValue = $(this).val();
                    if (selectedValue === 'Other') {
                        $(this).closest('div.row').find('input.adotherCategory').prop('disabled', false);
                    } else {
                        $(this).closest('div.row').find('input.adotherCategory').prop('disabled', true);
                    }
                });
            });
            function addMoreFields() {
                const dynamicFieldsContainer = document.querySelector(".dynamic-fields");
                const newFields = dynamicFieldsContainer.cloneNode(true);
                newFields.classList.remove("dynamic-fields");
                dynamicFieldsContainer.parentNode.insertBefore(
                    newFields,
                    addMoreButton
                );
                newFields.style.display = "block";
                addDeleteButtonListener(newFields);
            }

            function addDeleteButtonListener(container) {
                const deleteButton = container.querySelector(".delete-row");
                if (deleteButton) {
                    deleteButton.addEventListener("click", function () {
                        container.remove();
                    });
                }
            }

            function validateForm() {
                const allFields = form.querySelectorAll("input, select, textarea");

                for (const field of allFields) {
                    if (field.type === "hidden" || field.parentNode.style.display === "none" || field.disabled) {
                        continue;
                    }

                    if (!addMoreButton.clicked && field.name.startsWith("additional")) {
                        continue;
                    }

                    // Exclude validation for specific fields
                    if (field.name === "modelNo" || field.name === "manufacturingYear" || field.name === "brandName" || field.name === "dimensions" || field.name === "productDescription" || field.name === "exp" || field.name === "additionalmodelNo[]" || field.name === "additionalmanufacturingYear[]" || field.name === "additionalbrandname[]" || field.name === "additionaldimensions[]" || field.name === "additionalproductDescription[]" || field.name === "additionalexp[]") {
                        continue;
                    }

                    if (field.name.startsWith("additional")) {
                        const fieldNameParts = field.name.split("[]");
                        const fieldNameBase = fieldNameParts[0];
                        const index = fieldNameParts[1];

                        const listFields = form.querySelectorAll(`[name^="${fieldNameBase}"]`);
                        const values = Array.from(listFields).map((listField) => listField.value.trim());

                        if (values.join("") === "") {
                            alert(`${fieldNameBase} cannot have empty values`);
                            return false;
                        }
                    } else {
                        if (field.value.trim() === "") {
                            alert(`${field.name} cannot be empty`);
                            return false;
                        }
                    }
                }
                var currentPrice = parseFloat(priceInput.value);
                var previousPrice = parseFloat(marpriceInput.value);

                if (currentPrice < previousPrice) {
                    return true
                } else {
                    alert(`current price should be lower than previous price`);
                    return false
                }

                return true;
            }


            addMoreButton.addEventListener("click", function () {
                addMoreButton.clicked = true;
                addMoreFields();
            });

            const submitButton = document.getElementById("submitBtn");
            submitButton.addEventListener("click", function (event) {
                if (!validateForm()) {
                    event.preventDefault();
                }
            });
        });

    </script>
</div>
<br />

{% endblock body %}