{% 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>
{% block body %}
<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%;
    }
    .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; /* Adjust font size as needed */
        line-height: 1; /* Ensures the icon is centered within the button */
        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; /* Position to the left of the button */
        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;
    }
</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="card">
            {% for pro in pro_list %}
            {% csrf_token %}
            {% if images %}
            <ul class="product-img owlcarousel" style="display: flex; list-style: none; overflow-x: auto;">
                {% for image in images %}
                <li style="position: relative; margin-right: 10px;"> <!-- Adjust margin-right as needed -->
                    <a href="{{ image.image.url }}" data-fancybox="images" data-caption="{{ pro.product_name }}">
                        <img src="{{ image.image.url }}" alt="pro-image" height="250" width="250" />
                    </a>
                    <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>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <p>No images available for this EmailEnq.</p>
            {% endif %}
            {% endfor %}
        </div>
        <div class="card">
            <div class="card-body">
                {% for pro in pro_list %}
                <form name="Form" class="ajax" method="POST" action="{% url 'emailenqeditform' 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" placeholder="Manufacturing Year"
                                    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">
                                {% 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="{{pro.product_category}}">
                                                {{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>Brand</label>
                                <select class="select" name="pro_brand" id="pro_brand">
                                    <option selected="true" value="{{pro.brand_name}}">{{pro.brand_name}}</option>

                                    {% for bran in brand_name %}
                                    <option value="{{bran.id}}">{{bran.brand_name}}</option>
                                    {% endfor %}


                                </select>
                                <div class="error" id="brndErr"></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" 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="{{pro.exp_date}}">
                            </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.product_description}}</textarea>
                                <div class="error" id="desErr"></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="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 class="col-md-6">
                            <div class="form-group">
                                <label for="country_select">Select Selling Country</label>
                                <select class="js-example-placeholder-multiple select2 js-states" multiple="multiple" id="sell_con" name="sell_con" required>
                                    {% 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 'emailenqnotappr' %}" 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>
    $('body').on('click', 'button.status', function (e) {
        let $this = $(this);
        deleteImage($this, $this.val());
    });

    function deleteImage($this, imageId) {
        let $productImg = $this.closest('.product-img');
        if ($productImg.find('li').length === 1) {
            Swal.fire({
            icon: 'warning',
            title: 'Warning',
            text: 'One Image is mandatory add more and Delete.',
        });
        return;
        }

        Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                type: 'POST',
                url: "{% url 'delete_image' %}",
                data: {
                    activedea: imageId,
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                dataType: 'json',
                success: function (data) {
                    if (data.status === 'success') {
                        $this.closest('li').remove();
                        if ($productImg.find('li').length === 0) {
                            $productImg.parent().html("<p>No images available for this EmailEnq.</p>");
                        }
                        Swal.fire(
                            'Deleted!',
                            'Your image has been deleted.',
                            'success'
                        );
                    } else {
                        Swal.fire(
                            '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");
        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 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(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", "#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>
{% endblock body %}