{% include 'AdminTemplates/adminDash.html' %} {% load static %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

</head>
{% block body %}
<style>
    .checkbox-wrapper-34 {
        --blue: #0D7EFF;
        --g08: #E1E5EB;
        --g04: #848ea1;
    }

    .checkbox-wrapper-34 .tgl {
        display: none;
    }

    .checkbox-wrapper-34 .tgl,
    .checkbox-wrapper-34 .tgl:after,
    .checkbox-wrapper-34 .tgl:before,
    .checkbox-wrapper-34 .tgl *,
    .checkbox-wrapper-34 .tgl *:after,
    .checkbox-wrapper-34 .tgl *:before,
    .checkbox-wrapper-34 .tgl+.tgl-btn {
        box-sizing: border-box;
    }

    .checkbox-wrapper-34 .tgl::selection,
    .checkbox-wrapper-34 .tgl:after::selection,
    .checkbox-wrapper-34 .tgl:before::selection,
    .checkbox-wrapper-34 .tgl *::selection,
    .checkbox-wrapper-34 .tgl *:after::selection,
    .checkbox-wrapper-34 .tgl *:before::selection,
    .checkbox-wrapper-34 .tgl+.tgl-btn::selection {
        background: none;
    }

    .checkbox-wrapper-34 .tgl+.tgl-btn {
        outline: 0;
        display: block;
        width: 57px;
        height: 27px;
        position: relative;
        cursor: pointer;
        user-select: none;
        font-size: 12px;
        font-weight: 400;
        color: #fff;
    }

    .checkbox-wrapper-34 .tgl+.tgl-btn:after,
    .checkbox-wrapper-34 .tgl+.tgl-btn:before {
        position: relative;
        display: block;
        content: "";
        width: 44%;
        height: 100%;
    }

    .checkbox-wrapper-34 .tgl+.tgl-btn:after {
        left: 0;
    }

    .checkbox-wrapper-34 .tgl+.tgl-btn:before {
        display: inline;
        position: absolute;
        top: 7px;
    }

    .checkbox-wrapper-34 .tgl:checked+.tgl-btn:after {
        left: 56.5%;
    }

    .checkbox-wrapper-34 .tgl-ios+.tgl-btn {
        background: var(--g08);
        border-radius: 20rem;
        padding: 2px;
        transition: all 0.4s ease;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    }

    .checkbox-wrapper-34 .tgl-ios+.tgl-btn:after {
        border-radius: 2em;
        background: #fff;
        transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    }

    .checkbox-wrapper-34 .tgl-ios+.tgl-btn:before {
        content: "No";
        left: 28px;
        color: var(--g04);
        transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .checkbox-wrapper-34 .tgl-ios+.tgl-btn:active {
        box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
    }

    .checkbox-wrapper-34 .tgl-ios+.tgl-btn:active:after {
        padding-right: 0.4em;
    }

    .checkbox-wrapper-34 .tgl-ios:checked+.tgl-btn {
        background: var(--blue);
    }

    .checkbox-wrapper-34 .tgl-ios:checked+.tgl-btn:active {
        box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
    }

    .checkbox-wrapper-34 .tgl-ios:checked+.tgl-btn:active:after {
        margin-left: -0.4em;
    }

    .checkbox-wrapper-34 .tgl-ios:checked+.tgl-btn:before {
        content: "Yes";
        left: 4px;
        color: #fff;
    }
</style>

{% if count == 'add' %}

<style>
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
        /* Firefox */
        appearance: textfield;
        /* Standard */
    }

    .error {
        color: red;
        font-size: 90%;
    }
</style>
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Product Add</h4>
                <h6>Create new product</h6>
            </div>
            <div class="page-btn">
                <a href="{% url 'productListMain' %}" class="btn btn-added"><img
                        src="{% static 'assets/img/icons/eye.svg' %}" alt="img" class="me-1">View ProductList</a>
            </div>
        </div>

        {% if added %}
        {% if added == 'refreshed' %}
        {% elif added == "" %}
        {% else %}
        <h3 style="color: blue; font-size: 16px;">'{{added}}' <span style="color: black;"> is </span><span
                style="color: green;">Added</span></h3>
        {% endif %}
        {% endif %}
        <div class="card">
            <form name="Form" class="ajax" method="POST" action="{% url 'addProductForm' %}"
                enctype="multipart/form-data" id="imageForm">
                {% csrf_token %}
                <div class="card-body">
                    <div class="row">
                        <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 />
                                <div class="error" id="picErr"></div><br />
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Company Name</label>
                                <input type="text" name="c_name" id="c_name">
                                <div class="error" id="cnameErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Email</label>
                                <input type="text" name="email" id="email">
                                <div class="error" id="emailErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Contact Person Name</label>
                                <input type="text" name="cp_name" id="cp_name">
                                <div class="error" id="cpnameErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Contact Number</label>
                                <input type="number" class="form-control" aria-label="Contact"
                                    aria-describedby="basic-addon1" name="cn" id="cn">
                                <div class="error" id="cnErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Product Name</label>
                                <input type="text" name="pro_name" id="pro_name">
                                <div class="error" id="nameErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Model No.</label>
                                <input type="text" name="mn_name" id="mn_name">
                                <div class="error" id="mnErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Manufacturing Country</label>
                                <input type="text" name="mc_name" id="mc_name">
                                <div class="error" id="mcErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Manufacturing Year</label>
                                <input type="number" class="form-control" aria-label="Year"
                                    aria-describedby="basic-addon1" name="my" id="my">
                                <div class="error" id="myErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Dimensions</label>
                                <input type="text" name="d_name" id="d_name">
                                <div class="error" id="dErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Quantity</label>
                                <input type="text" class="form-control" aria-label="Quantity"
                                    aria-describedby="basic-addon1" name="pro_qty" id="pro_qty">
                                <div class="error" id="qtyErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Brand</label>
                                <input type="text" class="form-control" aria-label="Quantity"
                                    aria-describedby="basic-addon1" name="probrand" id="probrand">
                                <div class="error" id="probrErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Exp. Date</label>
                                <input type="date" class="form-control" aria-label="ExpDate"
                                    aria-describedby="basic-addon1" name="exp" id="exp">
                                <div class="error" id="expErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Category</label>
                                <select class="select" name="pro_cat" id="pro_cat">
                                    <option selected="true" disabled="disabled">Choose Category</option>
                                    {% for i in cat_list %}
                                    <option value="{{i.id}}">{{i.category_name}}</option>
                                    {% endfor %}
                                </select>
                                <div class="error" id="catErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Reason To Sell</label>
                                <select class="select" 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 class="error" id="rtsErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>Description</label>
                                <textarea class="form-control" name="pro_des" id="pro_des"></textarea>
                                <div class="error" id="desErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>META Tags (*press space after each tags)</label>
                                <input type="text" name="meta_tags" style="font-weight: bold;" />
                                <div class="error" id="mettErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>META Description</label>
                                <textarea class="form-control" name="meta_description" id="meta_description"></textarea>
                                <div class="error" id="metErr"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label for="pro_price">Current Price</label>
                                    <div class="input-group">
                                        <span class="input-group-text">QAR</span>
                                        <input style="color: green;font-size: large;" type="text" class="form-control"
                                            aria-label="Price" aria-describedby="basic-addon1" name="pro_price"
                                            id="pro_price" oninput="validateInput(this)">
                                    </div>
                                    <div class="error" id="prcErr"></div><br>
                                </div>
                                <div class="form-group">
                                    <label for="mar_price">Previous Price</label>
                                    <div class="input-group">
                                        <span class="input-group-text">QAR</span>
                                        <input style="color: green;font-size: large;" type="text" class="form-control"
                                            aria-label="Price" aria-describedby="basic-addon1" name="mar_price"
                                            id="mar_price" oninput="validateInputMar(this)">
                                    </div>
                                    <div class="error" id="marprcErr"></div><br>
                                </div>
                            </div>
                            <div class="col-lg-8 col-sm-6 col-12">
                                <div class="form-group">
                                    <label for="country_select">Select Country</label>
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title">Add selling countries</h5>
                                        </div>
                                        <div class="card-body">
                                            <select class="js-example-placeholder-multiple select2 js-states"
                                                multiple="multiple" id="sell_con" name="sell_con">
                                                {% for co in con_list %}
                                                <option value="{{co.id}}">{{co.con_name}}</option>
                                                {% endfor %}
                                            </select>
                                            <div class="error" id="sellconErr"></div><br>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">

                            <button type="submit" class="btn btn-submit me-2">Add Product</button>
                            <a href="{% url 'productListMain' %}" class="btn btn-cancel">Cancel</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>
<script>
    $('input[name="meta_tags"]').on('keyup', function (e) {
        if (e.which === 32) {
            var str = $(this).val().split('');
            if (str[str.length - 2] === ',') {
                $(this).val($(this).val().replace(' ', ''));
            }
            $(this).val($(this).val().replace(' ', ','));
        }
    });
</script>
<script>
    function validateAndFormatInput(input) {
        // Remove non-numeric and non-comma characters
        input.value = input.value.replace(/[^0-9,.]/g, '');

        // Remove any existing commas from the input value
        var cleanedValue = input.value.replace(/,/g, '');

        // Check for more than one dot and handle accordingly
        if (cleanedValue.split('.').length > 2) {
            // If more than one dot is present, remove the extra dots
            cleanedValue = cleanedValue.replace(/\.+$/, '');
        }

        // Set inputmode and pattern based on input value
        if (cleanedValue.indexOf('.') === -1) {
            input.inputMode = 'numeric';
            input.pattern = '[0-9,.]*';
        } else {
            input.inputMode = 'decimal';
            input.pattern = '[0-9,.]*\\.?[0-9]{0,2}';
        }

        // Add commas every three digits from the right
        var formattedValue = cleanedValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

        // Set the formatted value back to the input field
        input.value = formattedValue;
    }

    // Add event listener for input event - Price
    var priceInput = document.getElementById("pro_price");
    priceInput.addEventListener("input", function (event) {
        validateAndFormatInput(event.target);
    });

    // Add event listener for input event - Market Price
    var marketPriceInput = document.getElementById("mar_price");
    marketPriceInput.addEventListener("input", function (event) {
        validateAndFormatInput(event.target);
    });
</script>

<script>
    $("body").on("submit", "form.ajax", function (e) {
        e.preventDefault();
        $form = $(this);
        $url = $form.attr("action");
        if (!$.trim(document.Form.images.value)) {
            printError("picErr", "(Please Choose Image)");
        } else {
            var imageInput = document.getElementById('images');
            var productName = $.trim(document.Form.pro_name.value);
            let pro = parseFloat(document.Form.pro_price.value.replace(/,/g, ''));
            let mar = parseFloat(document.Form.mar_price.value.replace(/,/g, ''));


            var img = new Image();
            img.src = URL.createObjectURL(imageInput.files[0]);
            img.onload = function () {
                var width = this.width;
                var height = this.height;
                // if (height < 440 || height > 455 || width < 285 || width > 295) {
                //     printError("picErr", "(Image dimensions should be within the range of 285x440 to 295x455 pixels.)");
                // } else 
                // Get today's date
                let today = new Date();
                today.setHours(0, 0, 0, 0);

                // Get expiration date value
                let expValue = document.getElementById('exp').value;

                // Check if expiration date has a value
                if (expValue.trim() !== "") {
                    // Parse expiration date
                    let expDate = new Date(expValue);

                    // Check if expiration date is today or in the future
                    if (expDate < today) {
                        printError("expErr", "Please Enter Today's Date or Future Date");
                        return;
                    }
                }

                if (!$.trim(document.Form.c_name.value)) {
                    printError("cnameErr", "Please Enter Company Name");
                } else if (!$.trim(document.Form.email.value)) {
                    printError("emailErr", "Please enter Email");
                } else if (!$.trim(document.Form.cp_name.value)) {
                    printError("cpnameErr", "Please Enter Contact Person Name");
                } else if (!$.trim(document.Form.cn.value)) {
                    printError("cnErr", "Please Enter Contact Number");
                } else if (!$.trim(document.Form.pro_name.value)) {
                    printError("nameErr", "Please enter product name");
                } else if (document.Form.mc_name.value == "Choose Country") {
                    printError("mcErr", "Please choose one Country");
                } else if (document.Form.pro_cat.value == "Choose Category") {
                    printError("catErr", "Please choose one category");
                } else if (!$.trim(document.Form.pro_qty.value)) {
                    printError("qtyErr", "Please Enter Quantity");
                } else if (!$.trim(document.Form.probrand.value)) {
                    printError("probrErr", "Please Enter Brand Name");
                } else if (!$.trim(document.Form.pro_des.value)) {
                    printError("desErr", "Please Enter Description");
                } else if (!$.trim(document.Form.pro_price.value)) {
                    printError("prcErr", "Please Enter Current Price");
                } else if (!$.trim(document.Form.sell_con.value)) {
                    printError("sellconErr", "Please select any country");
                } else if (!$.trim(document.Form.mar_price.value)) {
                    printError("marprcErr", "Please Enter Previous Price");
                } else if (pro > mar) {
                    printError("marprcErr", "Previous Price should be greater than to Current Price");
                } else {
                    e.currentTarget.submit();
                }
            };
        }
    });

    $("body").on("change keyup", "input,select,textarea", function (e) {
        if ($.trim($(this).val())) {
            $(this).nextAll("div.error").html("");
        }
    });

    function printError(Id, Msg) {
        document.getElementById(Id).innerHTML = Msg;
    }

    $(document).on("change", "#images", function () {
        var imageInput = document.getElementById('images');
        if ($.trim(imageInput.value)) {
            printError("picErr", "");
        }
    });
</script>

<script>
    $(document).ready(function () {
        $('.js-example-placeholder-multiple').select2({
            placeholder: "Select selling country"
        });
    });
</script>


{% elif count == 'edit' %}
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<style>
    .error {
        color: red;
        font-size: 90%;
    }

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    .button-container {
        position: absolute;
        top: 5px;
        right: 5px;
        display: flex;
        align-items: center;
    }

    .delete-icon {
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border-radius: 50%;
        padding: 5px;
        cursor: pointer;
        border: none;
        font-size: 16px;
        line-height: 1;
        transition: background-color 0.3s ease;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .delete-text {
        display: none;
        position: absolute;
        right: 35px;
        color: white;
        background-color: transparent;
        padding: 5px;
        border-radius: 5px;
        white-space: nowrap;
    }

    .button-container:hover .delete-icon {
        background-color: red;
    }

    .button-container:hover .delete-text {
        display: inline;
    }

    .image-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .image-container .card {
        flex: 0 1 calc(20% - 10px);
        margin-bottom: 20px;
        position: relative;
    }

    .image-container img {
        width: 100%;
        height: 250px;
        display: block;
    }

    .image-name {
        text-align: center;
        margin-top: 5px;
        font-size: 14px;
    }

    .delete-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: red;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        z-index: 1;
    }

    .search-input-container {
        position: sticky;
        top: 0;
        background-color: #fafbfe;
        padding: 10px 0;
        z-index: 1000;
        width: 100%;
    }

    .image-name {
        text-align: center;
        margin-top: 5px;
        font-size: 14px;
    }

    .feature-icon {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border-radius: 50%;
        top: 5px;
        left: 5px;
        z-index: 1;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease;
    }

    .feature-text {
        display: none;
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 5px;
        border-radius: 5px;
        white-space: nowrap;
        pointer-events: none;
        font-size: 10px;
    }

    .feature-icon:hover {
        background-color: white;
        color: black;
    }

    .feature-icon:hover .feature-text {
        display: block;
        /* Changed to 'block' */
    }

    @media (max-width: 992px) {
        .image-container .card {
            flex: 0 1 calc(25% - 10px);
            /* Adjust for smaller screens */
        }
    }

    @media (max-width: 768px) {
        .image-container .card {
            flex: 0 1 calc(33.33% - 10px);
            /* Adjust for even smaller screens */
        }
    }

    @media (max-width: 576px) {
        .image-container .card {
            flex: 0 1 calc(50% - 10px);
            /* Adjust for mobile screens */
        }
    }
</style>
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Product Edit</h4>
                <h6>Edit product</h6>
            </div>
        </div>
        {% if added %}
        <div id="statusMessage" style="display: none;">
            <h3 style="color: blue; font-size: 16px;">'{{ added }}' <span style="color: black;"> is </span><span
                    style="color: green;">Modified</span></h3>
        </div>
        {% endif %}
        {% if fill_all %}
        <h3 style="color: red; font-size: 16px;"><span style="color: blue;">These </span> [{{fill_all}}] <span
                style="color: blue;">field(s) were empty!</span></h3>
        {% endif %}
        <div class="col-lg-12 col-sm-12">
            <div class="card">
                {% for pro in pro_list %}
                {% csrf_token %}
                {% if images %}
                <div class="card-body">
                    <div class="image-container" id="image-container">
                        {% for image in pro.productimage_set.all %}
                        <div class="card card-item mb-3">
                            <div class="image" data-id="{{ image.url }}">
                                <a data-fancybox="gallery" href="{{ image.product_image.url }}">
                                    <img src="{{ image.product_image.url }}" alt="Uploaded Image">
                                </a>
                                {% if image.fea_img %}
                                <div class="feature-icon">
                                    <img src="{% static 'images/star.svg' %}" alt="Featured Image"
                                        style="width: 20px; height: 20px;">
                                    <span class="feature-text show-on-hover">Feature Image</span>
                                </div>
                                {% endif %}
                                <div class="image-name">{{ image.filename }}</div>
                                <div class="button-container">
                                    <button class="status delete-icon" value="{{ image.id }}">
                                        <span class="icon">&times;</span>
                                    </button>
                                    <span class="delete-text">Delete</span>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p>No images available for this EmailEnq.</p>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                {% for pro in pro_list %}
                <form name="Form" class="ajax" method="POST" action="{% url 'editProductForm' pro.id %}"
                    enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Company Name</label>
                                <input type="text" name="c_name" id="c_name" value="{{pro.company}}">
                                <div class="error" id="cnameErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Email</label>
                                <input type="text" name="email" id="email" value="{{pro.email}}">
                                <div class="error" id="emailErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Contact Person Name</label>
                                <input type="text" name="cp_name" id="cp_name" value="{{pro.contact_person}}">
                                <div class="error" id="cpnameErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Contact Number</label>
                                <input type="text" class="form-control" placeholder="contact no." aria-label="Contact"
                                    aria-describedby="basic-addon1" name="cn" id="cn" value="{{pro.contact_no}}">
                                <div class="error" id="cnErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Product Name</label>
                                <input type="text" name="pro_name" id="pro_name" value="{{pro.product_name}}">
                                <div class="error" id="nameErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Model No.</label>
                                <input type="text" name="mn_name" id="mn_name" value="{{pro.model_no}}">
                                <div class="error" id="mnErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Manufacturing Country</label>
                                <input type="text" name="mc_name" id="mc_name" value="{{pro.manufacturing_country}}">
                                <div class="error" id="mcErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Manufacturing Year</label>
                                <input type="number" class="form-control" aria-label="Year"
                                    aria-describedby="basic-addon1" name="my" id="my"
                                    value="{{pro.manufacturing_year}}">
                                <div class="error" id="myErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Dimensions</label>
                                <input type="text" name="d_name" id="d_name" value="{{pro.dimensions}}">
                                <div class="error" id="dErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Brand</label>
                                <input type="text" name="pro_brand" id="pro_brand" value="{{pro.brand}}">
                                <div class="error" id="brndErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                {% if pro.other_category %}
                                <label>Category
                                    <small>*other category</small>
                                    <select class="select" name="pro_cat" id="pro_cat">
                                        <option selected="true" value="{{pro.product_category}}">
                                            {{pro.other_category}}
                                        </option>
                                        {% for i in cat_list %}
                                        <option value="{{i.id}}">{{i.category_name}}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="error" id="catErr"></div>
                                    {% else %}
                                    <label>Category
                                        <select class="select" name="pro_cat" id="pro_cat">
                                            <option selected="true" value="{{cat_list_id}}">
                                                {{cat_list_name}}
                                            </option>
                                            {% for i in cat_list %}
                                            <option value="{{i.id}}">{{i.category_name}}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="error" id="catErr"></div>
                                        {% endif %}
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Reason to Sell</label>
                                <select class="select" name="rts" id="rts">
                                    <option selected="true" value="{{pro.reason_to_sell}}">{{pro.reason_to_sell}}
                                    </option>
                                    <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>
                                <div class="error" id="rtsErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Quantity</label>
                                <input type="text" class="form-control" placeholder="Product Quantity"
                                    aria-label="Quantity" aria-describedby="basic-addon1" name="pro_qty" id="pro_qty"
                                    value="{{pro.quantity}}">
                                <div class="error" id="qtyErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Exp. Date</label>
                                <input type="date" class="form-control" placeholder="Exp. Date" aria-label="ExpDate"
                                    aria-describedby="basic-addon1" name="exp" id="exp" value="{{exp_date}}">
                                <div id="expErr" class="error"></div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>Description</label>
                                <textarea class="form-control" name="pro_des"
                                    id="pro_des">{{pro.description}}</textarea>
                                <div class="error" id="desErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>META Tags (*press space after each tags)</label>
                                <input type="text" name="meta_tags" value="{{pro.meta_tags}}"
                                    style="font-weight: bold;" />
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>META Description</label>
                                <textarea class="form-control" name="meta_description"
                                    id="meta_description">{{pro.meta_description}}</textarea>
                                <div class="error" id="metErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>Original Price</label>

                                {% if pro.org_price == "" %}
                                <span class="input-group-text">No Original Price</span>
                                {% else %}
                                <span class="input-group-text">{{pro.org_price}}</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-lg-9"></div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="pro_price">Current Price
                                    <span id="questionMark"><img src="{% static 'images/que.png' %}" alt="?"></span>

                                    <span class="helloMessage"
                                        style="display: none;text-transform: lowercase; font-size: 12px;">5%
                                        increment will be
                                        added if you edit current price</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">QAR</span>
                                    <input style="color: green;font-size: large;" type="text" class="form-control"
                                        aria-label="Price" aria-describedby="basic-addon1" name="pro_price"
                                        id="pro_price" oninput="validateInput(this)" value="{{pro.price}}">
                                </div>
                                <div class="error" id="prcErr"></div><br>

                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label for="pro_price">Previous Price</label>
                                <div class="input-group">
                                    <span class="input-group-text">QAR</span>
                                    <input style="color: green;font-size: large;" type="text" class="form-control"
                                        aria-label="Price" aria-describedby="basic-addon1" name="mar_price"
                                        id="mar_price" oninput="validateInputMar(this)" value="{{pro.market_price}}">
                                </div>
                                <div class="error" id="marprcErr"></div><br>

                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="image"><span id="redot">*</span>Upload Images (multiple):</label>
                                <input type="file" class="form-control" id="image" name="image[]" accept="image/*"
                                    multiple /><br />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="country_select">Select Country</label>
                                <select class="js-example-placeholder-multiple select2 js-states" multiple="multiple"
                                    id="sell_con" name="sell_con">
                                    {% for country in con_list %}
                                    <option value="{{ country.id }}" {% if country.id in selected_country_ids %}selected{% endif %}>
                                        {{ country.con_name }}
                                    </option>
                                    {% endfor %}
                                </select>
                                <div class="error" id="sellconErr"></div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <button type="submit" class="btn btn-submit me-2">update Product</button>
                            <a href="{% url 'productListMain' %}" class="btn btn-cancel">Cancel</a>
                        </div>
                    </div>
            </div>
            </form>
            {% endfor %}
        </div>
    </div>
</div>
</div>
<script>
    $(document).ready(function () {
        var statusMessage = $('#statusMessage');
        if (statusMessage.length > 0) {
            statusMessage.fadeIn(300);
            setTimeout(function () {
                statusMessage.fadeOut(300);
            }, 3000);
        }
    });
</script>
<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>
    $('input[name="meta_tags"]').on('keyup', function (e) {
        if (e.which === 32) {
            var str = $(this).val().split('');
            if (str[str.length - 2] === ',') {
                $(this).val($(this).val().replace(' ', ''));
            }
            $(this).val($(this).val().replace(' ', ','));
        }
    });
    $('body').on('click', 'button.status', function (e) {
        let $this = $(this);
        deleteImage($this, $this.val());
    });

    function deleteImage($this, imageId) {
        let $cardItem = $this.closest('.card-item');
        if ($cardItem.siblings('.card-item').length === 0) {
            swal({
                title: "Error",
                text: "One Image is mandatory, please add more before deleting.",
                icon: "error",
            });
            return false;
        }

        swal({
            title: "Confirmation",
            text: "Are you sure you want to delete this image?",
            icon: "warning",
            buttons: ["Cancel", "Delete"],
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    type: 'POST',
                    url: "{% url 'xlsx_delete_image' %}",
                    data: {
                        activedea: imageId,
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data.status === 'success') {
                            $cardItem.remove();

                            if (data.fea_img) {
                                // Reload the page if fea_img is true
                                location.reload();
                            } else {
                                // Handle case where fea_img is false or not provided
                                // For example, update UI if necessary
                                if ($('.card-item').length === 0) {
                                    $('.card-container').html("<p>No images available for this Product.</p>");
                                }
                            }
                        } else {
                            swal("Error", 'Failed to delete image', "error");
                        }
                    },
                    error: function () {
                        swal("Error", 'Failed to delete image', "error");
                    }
                });
            }
        });
    }
</script>


<script>
    function validateAndFormatInput(input) {
        // Remove non-numeric and non-comma characters
        input.value = input.value.replace(/[^0-9,.]/g, '');

        // Remove any existing commas from the input value
        var cleanedValue = input.value.replace(/,/g, '');

        // Check for more than one dot and handle accordingly
        if (cleanedValue.split('.').length > 2) {
            // If more than one dot is present, remove the extra dots
            cleanedValue = cleanedValue.replace(/\.+$/, '');
        }

        // Set inputmode and pattern based on input value
        if (cleanedValue.indexOf('.') === -1) {
            input.inputMode = 'numeric';
            input.pattern = '[0-9,.]*';
        } else {
            input.inputMode = 'decimal';
            input.pattern = '[0-9,.]*\\.?[0-9]{0,2}';
        }

        // Add commas every three digits from the right
        var formattedValue = cleanedValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

        // Set the formatted value back to the input field
        input.value = formattedValue;
    }

    // Add event listener for input event - Price
    var priceInput = document.getElementById("pro_price");
    priceInput.addEventListener("input", function (event) {
        validateAndFormatInput(event.target);
    });

    // Add event listener for input event - Market Price
    var marketPriceInput = document.getElementById("mar_price");
    marketPriceInput.addEventListener("input", function (event) {
        validateAndFormatInput(event.target);
    });
</script>


<script>
    $("body").on("submit", "form.ajax", function (e) {
        e.preventDefault();
        let pro = parseFloat(document.Form.pro_price.value.replace(/,/g, ''));
        let mar = parseFloat(document.Form.mar_price.value.replace(/,/g, ''));
        $form = $(this);
        $url = $form.attr("action");

        // Get today's date
        let today = new Date();
        today.setHours(0, 0, 0, 0);

        // Get expiration date value
        let expValue = document.getElementById('exp').value;

        // Check if expiration date has a value
        if (expValue.trim() !== "") {
            // Parse expiration date
            let expDate = new Date(expValue);

            // Check if expiration date is today or in the future
            if (expDate < today) {
                printError("expErr", "Please Enter Today's Date or Future Date");
                return;
            }
        }

        // Other validations
        if (!$.trim(document.Form.pro_name.value)) {
            printError("nameErr", "Please enter product name");
        } else if (document.Form.pro_cat.value == "Choose Category") {
            printError("catErr", "Please choose one category");
        } else if (document.Form.pro_brand.value == "Choose Brand") {
            printError("brndErr", "Please choose Brand");
        } else if (!$.trim(document.Form.pro_qty.value)) {
            printError("qtyErr", "Please Enter Quantity");
        } else if (!$.trim(document.Form.pro_des.value)) {
            printError("desErr", "Please Enter Description");
        } else if ($.trim(document.Form.my.value) && !/^\d{1,4}$/.test(document.Form.my.value)) {
            printError("myErr", "Please Enter a 4-digit Integer");
        } else if (!$.trim(document.Form.pro_price.value)) {
            printError("prcErr", "Please Enter Price");
        } else if (!$.trim(document.Form.email.value)) {
            printError("emailErr", "Please Enter Email");
        } else if (!$.trim(document.Form.pro_name.value)) {
            printError("nameErr", "Please enter product name");
        } else if (document.Form.pro_cat.value == "Choose Category") {
            printError("catErr", "Please choose one category");
        } else if (document.Form.pro_brand.value == "Choose Brand") {
            printError("brndErr", "Please choose Brand");
        } else if (!$.trim(document.Form.pro_qty.value)) {
            printError("qtyErr", "Please Enter Quantity");
        } else if (!$.trim(document.Form.pro_des.value)) {
            printError("desErr", "Please Enter Description");
        } else if (!$.trim(document.Form.pro_price.value)) {
            printError("prcErr", "Please Enter Current Price");
        } else if (!$.trim($("#sell_con").val())) {
            printError("sellconErr", "Please Select country");
        } else if (!$.trim(document.Form.mar_price.value)) {
            printError("marprcErr", "Please Enter Previous Price");
        } else if (pro > mar) {
            printError("marprcErr", "Previous Price should be greater than Current Price");
        } else {
            e.currentTarget.submit();
        }
    });

    $("body").on("change keyup", "input,select,textarea", function (e) {
        if ($.trim($(this).val())) {
            $(this).nextAll("div.error").html("");
        }
    });

    function printError(Id, Msg) {
        document.getElementById(Id).innerHTML = Msg;
    }

    $(document).on("change", "#pro_pic", function () {
        var imageInput = document.getElementById('pro_pic');
        if ($.trim(imageInput.value)) {
            printError("picErr", ""); // Remove the error message
        }
    });

</script>
<script>
    AOS.init();

    var owl = $(".product-img");
    owl.owlCarousel({
        margin: 10,
        loop: true,
        autoplay: true,
        autoplayTimeout: 4000,
        autoplayHoverPause: true,
        center: false,
        nav: false,
        dots: true,
        rows: 2,
        responsive: {
            0: {
                items: 1,
                margin: 10,
                dots: true,
            },
            600: {
                items: 1,
                dots: true,
            },
            1000: {
                items: 1,
            },
        },
    });
</script>
<script>
    $(document).ready(function () {
        $('.js-example-placeholder-multiple').select2({
            placeholder: "Select selling countries"
        });
    });
</script>
{% else %}
<h5>OOPS!! Something went Wrong!</h5>
{% endif %}

{% endblock body %}