{% extends 'NewTemplates/new_base.html' %}{% load static %}
{% block head %}
<title>Effortlessly Sell Surplus & Liquidate Overstock Inventory Online</title>
<meta name="keywords" content="sell surplus,surplus inventory suppliers in gcc,sell overstock inventory,liquidate excess inventory,excess stock liquidation">
<meta name="description" content="Easily sell your surplus and overstock inventory. Simplify excess management and boost revenue with Surplus Market. Start selling today!">
{% endblock head %}
{% block body %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link href="{% static 'new_assets/css/owl.carousel.css' %}" rel="stylesheet">
<script src="{% static 'new_assets/js/owl.carousel.min.js' %}"></script>

<style>
    .toast-container {
        z-index: 1;
    }

    #priceToast {
        max-width: 250px;
        background-color: aliceblue;
    }

    .toast-header strong {
        text-transform: uppercase;
    }

    .toast-body,
    .btn-close {
        text-transform: lowercase;
    }

    .select2-container {
        width: 100% !important;
    }

    .select2-container--default .select2-selection--multiple,
    .select2-container--default .select2-selection--single {
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        min-height: 38px;
    }

    .select2-container--default.select2-container--focus .select2-selection--multiple,
    .select2-container--default.select2-container--focus .select2-selection--single {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #007bff;
        border: 1px solid #006fe6;
        color: #fff;
        padding: 2px 6px;
        margin-top: 4px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: #fff;
        margin-right: 5px;
    }

    .select2-container--default .select2-search--inline .select2-search__field {
        margin-top: 3px;
    }
</style>
<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 %}
    <script>
        alert()
    </script>
    <!-- <div id="messageDiv" style="display: block">
        <span class="successmsg">{{ success_message }}!</span>
    </div> -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            Swal.fire({
                position: "top-mid",
                icon: "success",
                title: "Submission Complete!",
                showConfirmButton: false,
                timer: 2900
            });
            setTimeout(function () {
                window.location.href = "{{ redirect_url }}";
            }, 3000);
        });
    </script>
    {% endif %}
    <script>
        function restrictToNumbers(event) {
            const input = event.target;
            const value = input.value;
            input.value = value.replace(/\D/g, ''); // Remove non-digit characters
        }
    </script>

    <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>
                    <select name="manufacturingCountry" id="manufacturingCountry" class="form-control">
                        <option value=""> --- Please Select --- </option>
                        <option value="Aaland Islands">Aaland Islands</option>
                        <option value="Afghanistan">Afghanistan</option>
                        <option value="Albania">Albania</option>
                        <option value="Algeria">Algeria</option>
                        <option value="American Samoa">American Samoa</option>
                        <option value="Andorra">Andorra</option>
                        <option value="Angola">Angola</option>
                        <option value="Anguilla">Anguilla</option>
                        <option value="Antarctica">Antarctica</option>
                        <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                        <option value="Argentina">Argentina</option>
                        <option value="Armenia">Armenia</option>
                        <option value="Aruba">Aruba</option>
                        <option value="Ascension Island (British)">Ascension Island (British)</option>
                        <option value="Australia">Australia</option>
                        <option value="Austria">Austria</option>
                        <option value="Azerbaijan">Azerbaijan</option>
                        <option value="Bahamas">Bahamas</option>
                        <option value="Bahrain">Bahrain</option>
                        <option value="Bangladesh">Bangladesh</option>
                        <option value="Barbados">Barbados</option>
                        <option value="Belarus">Belarus</option>
                        <option value="Belgium">Belgium</option>
                        <option value="Belize">Belize</option>
                        <option value="Benin">Benin</option>
                        <option value="Bermuda">Bermuda</option>
                        <option value="Bhutan">Bhutan</option>
                        <option value="Bolivia">Bolivia</option>
                        <option value="Bonaire, Sint Eustatius and Saba">Bonaire, Sint Eustatius and Saba</option>
                        <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                        <option value="Botswana">Botswana</option>
                        <option value="Bouvet Island">Bouvet Island</option>
                        <option value="Brazil">Brazil</option>
                        <option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
                        <option value="Brunei Darussalam">Brunei Darussalam</option>
                        <option value="Bulgaria">Bulgaria</option>
                        <option value="Burkina Faso">Burkina Faso</option>
                        <option value="Burundi">Burundi</option>
                        <option value="Cambodia">Cambodia</option>
                        <option value="Cameroon">Cameroon</option>
                        <option value="Canada">Canada</option>
                        <option value="Canary Islands">Canary Islands</option>
                        <option value="Cape Verde">Cape Verde</option>
                        <option value="Cayman Islands">Cayman Islands</option>
                        <option value="Central African Republic">Central African Republic</option>
                        <option value="Chad">Chad</option>
                        <option value="Chile">Chile</option>
                        <option value="China">China</option>
                        <option value="Christmas Island">Christmas Island</option>
                        <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
                        <option value="Colombia">Colombia</option>
                        <option value="Comoros">Comoros</option>
                        <option value="Congo">Congo</option>
                        <option value="Cook Islands">Cook Islands</option>
                        <option value="Costa Rica">Costa Rica</option>
                        <option value="Cote D'Ivoire">Cote D'Ivoire</option>
                        <option value="Croatia">Croatia</option>
                        <option value="Cuba">Cuba</option>
                        <option value="Curacao">Curacao</option>
                        <option value="Cyprus">Cyprus</option>
                        <option value="Czech Republic">Czech Republic</option>
                        <option value="Democratic Republic of Congo">Democratic Republic of Congo</option>
                        <option value="Denmark">Denmark</option>
                        <option value="Djibouti">Djibouti</option>
                        <option value="Dominica">Dominica</option>
                        <option value="Dominican Republic">Dominican Republic</option>
                        <option value="East Timor">East Timor</option>
                        <option value="Ecuador">Ecuador</option>
                        <option value="Egypt">Egypt</option>
                        <option value="El Salvador">El Salvador</option>
                        <option value="Equatorial Guinea">Equatorial Guinea</option>
                        <option value="Eritrea">Eritrea</option>
                        <option value="Estonia">Estonia</option>
                        <option value="Ethiopia">Ethiopia</option>
                        <option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
                        <option value="Faroe Islands">Faroe Islands</option>
                        <option value="Fiji">Fiji</option>
                        <option value="Finland">Finland</option>
                        <option value="France, Metropolitan">France, Metropolitan</option>
                        <option value="French Guiana">French Guiana</option>
                        <option value="French Polynesia">French Polynesia</option>
                        <option value="French Southern Territories">French Southern Territories</option>
                        <option value="FYROM">FYROM</option>
                        <option value="Gabon">Gabon</option>
                        <option value="Gambia">Gambia</option>
                        <option value="Georgia">Georgia</option>
                        <option value="Germany">Germany</option>
                        <option value="Ghana">Ghana</option>
                        <option value="Gibraltar">Gibraltar</option>
                        <option value="Greece">Greece</option>
                        <option value="Greenland">Greenland</option>
                        <option value="Grenada">Grenada</option>
                        <option value="Guadeloupe">Guadeloupe</option>
                        <option value="Guam">Guam</option>
                        <option value="Guatemala">Guatemala</option>
                        <option value="Guernsey">Guernsey</option>
                        <option value="Guinea">Guinea</option>
                        <option value="Guinea-Bissau">Guinea-Bissau</option>
                        <option value="Guyana">Guyana</option>
                        <option value="Haiti">Haiti</option>
                        <option value="Heard and Mc Donald Islands">Heard and Mc Donald Islands</option>
                        <option value="Honduras">Honduras</option>
                        <option value="Hong Kong">Hong Kong</option>
                        <option value="Hungary">Hungary</option>
                        <option value="Iceland">Iceland</option>
                        <option value="India">India</option>
                        <option value="Indonesia">Indonesia</option>
                        <option value="Iran (Islamic Republic of)">Iran (Islamic Republic of)</option>
                        <option value="Iraq">Iraq</option>
                        <option value="Ireland">Ireland</option>
                        <option value="Isle of Man">Isle of Man</option>
                        <option value="Israel">Israel</option>
                        <option value="Italy">Italy</option>
                        <option value="Jamaica">Jamaica</option>
                        <option value="Japan">Japan</option>
                        <option value="Jersey">Jersey</option>
                        <option value="Jordan">Jordan</option>
                        <option value="Kazakhstan">Kazakhstan</option>
                        <option value="Kenya">Kenya</option>
                        <option value="Kiribati">Kiribati</option>
                        <option value="Kosovo, Republic of">Kosovo, Republic of</option>
                        <option value="Kuwait">Kuwait</option>
                        <option value="Kyrgyzstan">Kyrgyzstan</option>
                        <option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
                        <option value="Latvia">Latvia</option>
                        <option value="Lebanon">Lebanon</option>
                        <option value="Lesotho">Lesotho</option>
                        <option value="Liberia">Liberia</option>
                        <option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
                        <option value="Liechtenstein">Liechtenstein</option>
                        <option value="Lithuania">Lithuania</option>
                        <option value="Luxembourg">Luxembourg</option>
                        <option value="Macau">Macau</option>
                        <option value="Madagascar">Madagascar</option>
                        <option value="Malawi">Malawi</option>
                        <option value="Malaysia">Malaysia</option>
                        <option value="Maldives">Maldives</option>
                        <option value="Mali">Mali</option>
                        <option value="Malta">Malta</option>
                        <option value="Marshall Islands">Marshall Islands</option>
                        <option value="Martinique">Martinique</option>
                        <option value="Mauritania">Mauritania</option>
                        <option value="Mauritius">Mauritius</option>
                        <option value="Mayotte">Mayotte</option>
                        <option value="Mexico">Mexico</option>
                        <option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
                        <option value="Moldova, Republic of">Moldova, Republic of</option>
                        <option value="Monaco">Monaco</option>
                        <option value="Mongolia">Mongolia</option>
                        <option value="Montenegro">Montenegro</option>
                        <option value="Montserrat">Montserrat</option>
                        <option value="Morocco">Morocco</option>
                        <option value="Mozambique">Mozambique</option>
                        <option value="Myanmar">Myanmar</option>
                        <option value="Namibia">Namibia</option>
                        <option value="Nauru">Nauru</option>
                        <option value="Nepal">Nepal</option>
                        <option value="Netherlands">Netherlands</option>
                        <option value="Netherlands Antilles">Netherlands Antilles</option>
                        <option value="New Caledonia">New Caledonia</option>
                        <option value="New Zealand">New Zealand</option>
                        <option value="Nicaragua">Nicaragua</option>
                        <option value="Niger">Niger</option>
                        <option value="Nigeria">Nigeria</option>
                        <option value="Niue">Niue</option>
                        <option value="Norfolk Island">Norfolk Island</option>
                        <option value="North Korea">North Korea</option>
                        <option value="Northern Mariana Islands">Northern Mariana Islands</option>
                        <option value="Norway">Norway</option>
                        <option value="Oman">Oman</option>
                        <option value="Pakistan">Pakistan</option>
                        <option value="Palau">Palau</option>
                        <option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
                        <option value="Panama">Panama</option>
                        <option value="Papua New Guinea">Papua New Guinea</option>
                        <option value="Paraguay">Paraguay</option>
                        <option value="Peru">Peru</option>
                        <option value="Philippines">Philippines</option>
                        <option value="Pitcairn">Pitcairn</option>
                        <option value="Poland">Poland</option>
                        <option value="Portugal">Portugal</option>
                        <option value="Puerto Rico">Puerto Rico</option>
                        <option value="Reunion">Reunion</option>
                        <option value="Romania">Romania</option>
                        <option value="Russian Federation">Russian Federation</option>
                        <option value="Rwanda">Rwanda</option>
                        <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                        <option value="Saint Lucia">Saint Lucia</option>
                        <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
                        <option value="Samoa">Samoa</option>
                        <option value="San Marino">San Marino</option>
                        <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                        <option value="Saudi Arabia">Saudi Arabia</option>
                        <option value="Senegal">Senegal</option>
                        <option value="Serbia">Serbia</option>
                        <option value="Seychelles">Seychelles</option>
                        <option value="Sierra Leone">Sierra Leone</option>
                        <option value="Singapore">Singapore</option>
                        <option value="Slovak Republic">Slovak Republic</option>
                        <option value="Slovenia">Slovenia</option>
                        <option value="Solomon Islands">Solomon Islands</option>
                        <option value="Somalia">Somalia</option>
                        <option value="South Africa">South Africa</option>
                        <option value="South Georgia & South Sandwich Islands">South Georgia & South Sandwich
                            Islands
                        </option>
                        <option value="South Korea">South Korea</option>
                        <option value="South Sudan">South Sudan</option>
                        <option value="Spain">Spain</option>
                        <option value="Sri Lanka">Sri Lanka</option>
                        <option value="St. Barthelemy">St. Barthelemy</option>
                        <option value="St. Helena">St. Helena</option>
                        <option value="St. Martin (French part)">St. Martin (French part)</option>
                        <option value="St. Pierre and Miquelon">St. Pierre and Miquelon</option>
                        <option value="Sudan">Sudan</option>
                        <option value="Suriname">Suriname</option>
                        <option value="Svalbard and Jan Mayen Islands">Svalbard and Jan Mayen Islands</option>
                        <option value="Swaziland">Swaziland</option>
                        <option value="Sweden">Sweden</option>
                        <option value="Switzerland">Switzerland</option>
                        <option value="Syrian Arab Republic">Syrian Arab Republic</option>
                        <option value="Taiwan">Taiwan</option>
                        <option value="Tajikistan">Tajikistan</option>
                        <option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
                        <option value="Thailand">Thailand</option>
                        <option value="Togo">Togo</option>
                        <option value="Tokelau">Tokelau</option>
                        <option value="Tonga">Tonga</option>
                        <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                        <option value="Tristan da Cunha">Tristan da Cunha</option>
                        <option value="Tunisia">Tunisia</option>
                        <option value="Turkey">Turkey</option>
                        <option value="Turkmenistan">Turkmenistan</option>
                        <option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
                        <option value="Tuvalu">Tuvalu</option>
                        <option value="Uganda">Uganda</option>
                        <option value="Ukraine">Ukraine</option>
                        <option value="United Arab Emirates">United Arab Emirates</option>
                        <option value="United Kingdom">United Kingdom</option>
                        <option value="United States">United States</option>
                        <option value="United States Minor Outlying Islands">United States Minor Outlying Islands
                        </option>
                        <option value="Uruguay">Uruguay</option>
                        <option value="Uzbekistan">Uzbekistan</option>
                        <option value="Vanuatu">Vanuatu</option>
                        <option value="Vatican City State (Holy See)">Vatican City State (Holy See)</option>
                        <option value="Venezuela">Venezuela</option>
                        <option value="Viet Nam">Viet Nam</option>
                        <option value="Virgin Islands (British)">Virgin Islands (British)</option>
                        <option value="Virgin Islands (U.S.)">Virgin Islands (U.S.)</option>
                        <option value="Wallis and Futuna Islands">Wallis and Futuna Islands</option>
                        <option value="Western Sahara">Western Sahara</option>
                        <option value="Yemen">Yemen</option>
                        <option value="Zambia">Zambia</option>
                        <option value="Zimbabwe">Zimbabwe</option>

                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="manufacturingYear">Manufacturing Year:</label>
                    <input type="text" class="form-control" id="manufacturingYear" name="manufacturingYear"
                        maxlength="4" pattern="\d{4}" title="Please enter a valid 4-digit year"
                        oninput="restrictToNumbers(event)" /><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="">
                        <span id="redot">*</span>
                        Current Price (QAR):
                        <span id="questionMark" class="position-relative">
                            <img src="{% static 'images/que.png' %}" alt="?">
                            <div class="toast-container position-absolute top-0 end-0">
                                <div id="priceToast" class="toast" role="alert" aria-live="assertive"
                                    aria-atomic="true">
                                    <div class="toast-header">
                                        <strong class="me-auto">price note</strong>
                                        <button type="button" class="btn-close" data-bs-dismiss="toast"
                                            aria-label="close"></button>
                                    </div>
                                    <div class="toast-body">
                                        we would be adding 5% as operational expenses.
                                    </div>
                                </div>
                            </div>
                        </span>
                    </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="quantity"><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>
                    <div class="input-group">
                        <input type="file" class="form-control" id="images" name="images[]" accept="image/*" multiple />
                    </div>
                </div>
            </div>
            <div id="imagePreviewContainer"></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="productCategory"><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 class="col-lg-6 col-sm-12">
                <div class="form-group">
                    <label for="sell_con"><span id="redot">*</span>Select Selling Countries</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 form-control" id="sell_con"
                                name="sell_con" multiple autocomplete="off">
                                {% 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>
        <!-- Additional Row for dynamic form fields -->

        <div class="row dynamic-fields" style="display: none">
            <label class="form-check-label" id="new_heading">New Product</label><br /><br />
            <br />
            <!-- changes -->
            <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>
                        <select name="additionalmanufacturingCountry[]" id="addmanufacturingCountry"
                            class="form-control">
                            <option value=""> --- Please Select --- </option>
                            <option value="Aaland Islands">Aaland Islands</option>
                            <option value="Aaland Islands">Aaland Islands</option>
                            <option value="Afghanistan">Afghanistan</option>
                            <option value="Albania">Albania</option>
                            <option value="Algeria">Algeria</option>
                            <option value="American Samoa">American Samoa</option>
                            <option value="Andorra">Andorra</option>
                            <option value="Angola">Angola</option>
                            <option value="Anguilla">Anguilla</option>
                            <option value="Antarctica">Antarctica</option>
                            <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                            <option value="Argentina">Argentina</option>
                            <option value="Armenia">Armenia</option>
                            <option value="Aruba">Aruba</option>
                            <option value="Ascension Island (British)">Ascension Island (British)</option>
                            <option value="Australia">Australia</option>
                            <option value="Austria">Austria</option>
                            <option value="Azerbaijan">Azerbaijan</option>
                            <option value="Bahamas">Bahamas</option>
                            <option value="Bahrain">Bahrain</option>
                            <option value="Bangladesh">Bangladesh</option>
                            <option value="Barbados">Barbados</option>
                            <option value="Belarus">Belarus</option>
                            <option value="Belgium">Belgium</option>
                            <option value="Belize">Belize</option>
                            <option value="Benin">Benin</option>
                            <option value="Bermuda">Bermuda</option>
                            <option value="Bhutan">Bhutan</option>
                            <option value="Bolivia">Bolivia</option>
                            <option value="Bonaire, Sint Eustatius and Saba">Bonaire, Sint Eustatius and Saba</option>
                            <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                            <option value="Botswana">Botswana</option>
                            <option value="Bouvet Island">Bouvet Island</option>
                            <option value="Brazil">Brazil</option>
                            <option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
                            <option value="Brunei Darussalam">Brunei Darussalam</option>
                            <option value="Bulgaria">Bulgaria</option>
                            <option value="Burkina Faso">Burkina Faso</option>
                            <option value="Burundi">Burundi</option>
                            <option value="Cambodia">Cambodia</option>
                            <option value="Cameroon">Cameroon</option>
                            <option value="Canada">Canada</option>
                            <option value="Canary Islands">Canary Islands</option>
                            <option value="Cape Verde">Cape Verde</option>
                            <option value="Cayman Islands">Cayman Islands</option>
                            <option value="Central African Republic">Central African Republic</option>
                            <option value="Chad">Chad</option>
                            <option value="Chile">Chile</option>
                            <option value="China">China</option>
                            <option value="Christmas Island">Christmas Island</option>
                            <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
                            <option value="Colombia">Colombia</option>
                            <option value="Comoros">Comoros</option>
                            <option value="Congo">Congo</option>
                            <option value="Cook Islands">Cook Islands</option>
                            <option value="Costa Rica">Costa Rica</option>
                            <option value="Cote D'Ivoire">Cote D'Ivoire</option>
                            <option value="Croatia">Croatia</option>
                            <option value="Cuba">Cuba</option>
                            <option value="Curacao">Curacao</option>
                            <option value="Cyprus">Cyprus</option>
                            <option value="Czech Republic">Czech Republic</option>
                            <option value="Democratic Republic of Congo">Democratic Republic of Congo</option>
                            <option value="Denmark">Denmark</option>
                            <option value="Djibouti">Djibouti</option>
                            <option value="Dominica">Dominica</option>
                            <option value="Dominican Republic">Dominican Republic</option>
                            <option value="East Timor">East Timor</option>
                            <option value="Ecuador">Ecuador</option>
                            <option value="Egypt">Egypt</option>
                            <option value="El Salvador">El Salvador</option>
                            <option value="Equatorial Guinea">Equatorial Guinea</option>
                            <option value="Eritrea">Eritrea</option>
                            <option value="Estonia">Estonia</option>
                            <option value="Ethiopia">Ethiopia</option>
                            <option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
                            <option value="Faroe Islands">Faroe Islands</option>
                            <option value="Fiji">Fiji</option>
                            <option value="Finland">Finland</option>
                            <option value="France, Metropolitan">France, Metropolitan</option>
                            <option value="French Guiana">French Guiana</option>
                            <option value="French Polynesia">French Polynesia</option>
                            <option value="French Southern Territories">French Southern Territories</option>
                            <option value="FYROM">FYROM</option>
                            <option value="Gabon">Gabon</option>
                            <option value="Gambia">Gambia</option>
                            <option value="Georgia">Georgia</option>
                            <option value="Germany">Germany</option>
                            <option value="Ghana">Ghana</option>
                            <option value="Gibraltar">Gibraltar</option>
                            <option value="Greece">Greece</option>
                            <option value="Greenland">Greenland</option>
                            <option value="Grenada">Grenada</option>
                            <option value="Guadeloupe">Guadeloupe</option>
                            <option value="Guam">Guam</option>
                            <option value="Guatemala">Guatemala</option>
                            <option value="Guernsey">Guernsey</option>
                            <option value="Guinea">Guinea</option>
                            <option value="Guinea-Bissau">Guinea-Bissau</option>
                            <option value="Guyana">Guyana</option>
                            <option value="Haiti">Haiti</option>
                            <option value="Heard and Mc Donald Islands">Heard and Mc Donald Islands</option>
                            <option value="Honduras">Honduras</option>
                            <option value="Hong Kong">Hong Kong</option>
                            <option value="Hungary">Hungary</option>
                            <option value="Iceland">Iceland</option>
                            <option value="India">India</option>
                            <option value="Indonesia">Indonesia</option>
                            <option value="Iran (Islamic Republic of)">Iran (Islamic Republic of)</option>
                            <option value="Iraq">Iraq</option>
                            <option value="Ireland">Ireland</option>
                            <option value="Isle of Man">Isle of Man</option>
                            <option value="Israel">Israel</option>
                            <option value="Italy">Italy</option>
                            <option value="Jamaica">Jamaica</option>
                            <option value="Japan">Japan</option>
                            <option value="Jersey">Jersey</option>
                            <option value="Jordan">Jordan</option>
                            <option value="Kazakhstan">Kazakhstan</option>
                            <option value="Kenya">Kenya</option>
                            <option value="Kiribati">Kiribati</option>
                            <option value="Kosovo, Republic of">Kosovo, Republic of</option>
                            <option value="Kuwait">Kuwait</option>
                            <option value="Kyrgyzstan">Kyrgyzstan</option>
                            <option value="Lao People's Democratic Republic">Lao People's Democratic Republic</option>
                            <option value="Latvia">Latvia</option>
                            <option value="Lebanon">Lebanon</option>
                            <option value="Lesotho">Lesotho</option>
                            <option value="Liberia">Liberia</option>
                            <option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
                            <option value="Liechtenstein">Liechtenstein</option>
                            <option value="Lithuania">Lithuania</option>
                            <option value="Luxembourg">Luxembourg</option>
                            <option value="Macau">Macau</option>
                            <option value="Madagascar">Madagascar</option>
                            <option value="Malawi">Malawi</option>
                            <option value="Malaysia">Malaysia</option>
                            <option value="Maldives">Maldives</option>
                            <option value="Mali">Mali</option>
                            <option value="Malta">Malta</option>
                            <option value="Marshall Islands">Marshall Islands</option>
                            <option value="Martinique">Martinique</option>
                            <option value="Mauritania">Mauritania</option>
                            <option value="Mauritius">Mauritius</option>
                            <option value="Mayotte">Mayotte</option>
                            <option value="Mexico">Mexico</option>
                            <option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
                            <option value="Moldova, Republic of">Moldova, Republic of</option>
                            <option value="Monaco">Monaco</option>
                            <option value="Mongolia">Mongolia</option>
                            <option value="Montenegro">Montenegro</option>
                            <option value="Montserrat">Montserrat</option>
                            <option value="Morocco">Morocco</option>
                            <option value="Mozambique">Mozambique</option>
                            <option value="Myanmar">Myanmar</option>
                            <option value="Namibia">Namibia</option>
                            <option value="Nauru">Nauru</option>
                            <option value="Nepal">Nepal</option>
                            <option value="Netherlands">Netherlands</option>
                            <option value="Netherlands Antilles">Netherlands Antilles</option>
                            <option value="New Caledonia">New Caledonia</option>
                            <option value="New Zealand">New Zealand</option>
                            <option value="Nicaragua">Nicaragua</option>
                            <option value="Niger">Niger</option>
                            <option value="Nigeria">Nigeria</option>
                            <option value="Niue">Niue</option>
                            <option value="Norfolk Island">Norfolk Island</option>
                            <option value="North Korea">North Korea</option>
                            <option value="Northern Mariana Islands">Northern Mariana Islands</option>
                            <option value="Norway">Norway</option>
                            <option value="Oman">Oman</option>
                            <option value="Pakistan">Pakistan</option>
                            <option value="Palau">Palau</option>
                            <option value="Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
                            <option value="Panama">Panama</option>
                            <option value="Papua New Guinea">Papua New Guinea</option>
                            <option value="Paraguay">Paraguay</option>
                            <option value="Peru">Peru</option>
                            <option value="Philippines">Philippines</option>
                            <option value="Pitcairn">Pitcairn</option>
                            <option value="Poland">Poland</option>
                            <option value="Portugal">Portugal</option>
                            <option value="Puerto Rico">Puerto Rico</option>
                            <option value="Reunion">Reunion</option>
                            <option value="Romania">Romania</option>
                            <option value="Russian Federation">Russian Federation</option>
                            <option value="Rwanda">Rwanda</option>
                            <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                            <option value="Saint Lucia">Saint Lucia</option>
                            <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
                            <option value="Samoa">Samoa</option>
                            <option value="San Marino">San Marino</option>
                            <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                            <option value="Saudi Arabia">Saudi Arabia</option>
                            <option value="Senegal">Senegal</option>
                            <option value="Serbia">Serbia</option>
                            <option value="Seychelles">Seychelles</option>
                            <option value="Sierra Leone">Sierra Leone</option>
                            <option value="Singapore">Singapore</option>
                            <option value="Slovak Republic">Slovak Republic</option>
                            <option value="Slovenia">Slovenia</option>
                            <option value="Solomon Islands">Solomon Islands</option>
                            <option value="Somalia">Somalia</option>
                            <option value="South Africa">South Africa</option>
                            <option value="South Georgia & South Sandwich Islands">South Georgia & South Sandwich
                                Islands
                            </option>
                            <option value="South Korea">South Korea</option>
                            <option value="South Sudan">South Sudan</option>
                            <option value="Spain">Spain</option>
                            <option value="Sri Lanka">Sri Lanka</option>
                            <option value="St. Barthelemy">St. Barthelemy</option>
                            <option value="St. Helena">St. Helena</option>
                            <option value="St. Martin (French part)">St. Martin (French part)</option>
                            <option value="St. Pierre and Miquelon">St. Pierre and Miquelon</option>
                            <option value="Sudan">Sudan</option>
                            <option value="Suriname">Suriname</option>
                            <option value="Svalbard and Jan Mayen Islands">Svalbard and Jan Mayen Islands</option>
                            <option value="Swaziland">Swaziland</option>
                            <option value="Sweden">Sweden</option>
                            <option value="Switzerland">Switzerland</option>
                            <option value="Syrian Arab Republic">Syrian Arab Republic</option>
                            <option value="Taiwan">Taiwan</option>
                            <option value="Tajikistan">Tajikistan</option>
                            <option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
                            <option value="Thailand">Thailand</option>
                            <option value="Togo">Togo</option>
                            <option value="Tokelau">Tokelau</option>
                            <option value="Tonga">Tonga</option>
                            <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                            <option value="Tristan da Cunha">Tristan da Cunha</option>
                            <option value="Tunisia">Tunisia</option>
                            <option value="Turkey">Turkey</option>
                            <option value="Turkmenistan">Turkmenistan</option>
                            <option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
                            <option value="Tuvalu">Tuvalu</option>
                            <option value="Uganda">Uganda</option>
                            <option value="Ukraine">Ukraine</option>
                            <option value="United Arab Emirates">United Arab Emirates</option>
                            <option value="United Kingdom">United Kingdom</option>
                            <option value="United States">United States</option>
                            <option value="United States Minor Outlying Islands">United States Minor Outlying Islands
                            </option>
                            <option value="Uruguay">Uruguay</option>
                            <option value="Uzbekistan">Uzbekistan</option>
                            <option value="Vanuatu">Vanuatu</option>
                            <option value="Vatican City State (Holy See)">Vatican City State (Holy See)</option>
                            <option value="Venezuela">Venezuela</option>
                            <option value="Viet Nam">Viet Nam</option>
                            <option value="Virgin Islands (British)">Virgin Islands (British)</option>
                            <option value="Virgin Islands (U.S.)">Virgin Islands (U.S.)</option>
                            <option value="Wallis and Futuna Islands">Wallis and Futuna Islands</option>
                            <option value="Western Sahara">Western Sahara</option>
                            <option value="Yemen">Yemen</option>
                            <option value="Zambia">Zambia</option>
                            <option value="Zimbabwe">Zimbabwe</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="manufacturingYear">Manufacturing Year:</label>
                        <input type="text" class="form-control" id="addmanufacturingYear"
                            name="additionalmanufacturingYear[]" maxlength="4"
                            oninput="restrictToNumbers(event)" /><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="">
                            <span id="redot">*</span>
                            Current Price (QAR):
                            <span id="questionMark" class="position-relative">
                                <img src="{% static 'images/que.png' %}" alt="?">
                                <div class="toast-container position-absolute top-0 end-0">
                                    <div id="priceToast" class="toast" role="alert" aria-live="assertive"
                                        aria-atomic="true">
                                        <div class="toast-header">
                                            <strong class="me-auto">price note</strong>
                                            <button type="button" class="btn-close" data-bs-dismiss="toast"
                                                aria-label="close"></button>
                                        </div>
                                        <div class="toast-body">
                                            we would be adding 5% as operational expenses.
                                        </div>
                                    </div>
                                </div>
                            </span>
                        </label>
                        <input type="number" class="form-control" id="addprice" name="additionalprice[]"
                            step="any" /><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="addimages"><span id="redot">*</span>Upload Images (multiple):</label>
                        <div class="input-group">
                            <input type="file" class="form-control" id="addImages" name="additionalimages[]"
                                accept="image/*" multiple />
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div id="imagePreviewContainers"></div>
                    <div id="previewContainer"></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 class="col-lg-6 col-sm-12">
                    <div class="form-group">
                        <label for="ad_sell_con"><span id="redot">*</span>Select Selling Countries</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 form-control"
                                    name="ad_sell_con[]" multiple autocomplete="off">
                                    {% for co in con_list %}
                                    <option value="{{co.id}}">{{co.con_name}}</option>
                                    {% endfor %}
                                </select>
                                <div class="error" id="adsellconErr"></div><br>
                            </div>
                        </div>
                    </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>
        const questionMark = document.getElementById('questionMark');
        const priceToast = document.getElementById('priceToast');
        const toastContainer = priceToast.closest('.toast-container');

        questionMark.addEventListener('click', function () {
            const toast = new bootstrap.Toast(priceToast, {
                container: toastContainer,
                autohide: true,
                delay: 5000
            });
            toast.show();
        });
    </script>
    <script>
        function validateExpiryDate(inputField) {
            const selectedDate = new Date(inputField.value);
            const today = new Date();
            today.setHours(0, 0, 0, 0);

            if (inputField.value.trim() !== "") {
                if (selectedDate < today) {
                    swal("Error", "The expiry date must not be a past date. If applicable, please select a valid date.", "error");
                    inputField.value = "";
                }
            }
        }
        document.addEventListener("DOMContentLoaded", function () {
            const addMoreButton = document.getElementById("addMore");
            const form = document.getElementById("FormID");
            const priceInput = document.getElementById("price");
            const marpriceInput = document.getElementById("marprice");
            const previewButton = document.getElementById('previewButton');
            const submitButton = document.getElementById("submitBtn");
            const expDateInput = document.getElementById('exp');
            const initialFileInput = document.getElementById('images');
            const initialPreviewContainer = document.getElementById('imagePreviewContainer');
            const dynamicContainers = document.querySelectorAll(".dynamic-container");
            const dynamicFieldsContainer = document.querySelector(".dynamic-fields");
            let containerCount = 0;

            dynamicContainers.forEach(addExpiryDateValidation);

            initialFileInput.addEventListener('change', function () {
                handleImagePreview(this, initialPreviewContainer);
            });
            expDateInput.addEventListener("change", function () {
                validatefirstExpiryDate(this);
            });
            $(document).ready(function () {
                $("#productCategory").change(function () {
                    if ($(this).val() == "Other") {
                        $("#otherInputBox").show();
                    } else {
                        $("#otherInputBox").hide();
                    }
                });
                $('#sell_con').select2({
                    placeholder: "Select selling countries",
                    allowClear: true
                });

                // 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);
                    }
                });
            });

            updateAddMoreButtonVisibility();

            function handleImagePreview(input, previewContainer) {
                const files = input.files;
                previewContainer.innerHTML = '';

                const container = document.createElement('div');
                container.classList.add('d-flex');
                container.style.flexWrap = 'wrap';

                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        const imageContainer = document.createElement('div');
                        imageContainer.classList.add('image-container');
                        imageContainer.style.position = 'relative';
                        imageContainer.style.margin = '10px';

                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.alt = "pro-image";
                        img.style.maxWidth = '150px';
                        img.style.maxHeight = '150px';

                        const link = document.createElement('a');
                        link.href = e.target.result;
                        link.setAttribute('data-fancybox', 'gallery');
                        link.appendChild(img);

                        const closeIcon = document.createElement('span');
                        closeIcon.innerHTML = '&times;';
                        closeIcon.classList.add('close-icon');
                        closeIcon.style.position = 'absolute';
                        closeIcon.style.top = '5px';
                        closeIcon.style.right = '5px';
                        closeIcon.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
                        closeIcon.style.color = 'white';
                        closeIcon.style.borderRadius = '50%';
                        closeIcon.style.padding = '2px 5px';
                        closeIcon.style.cursor = 'pointer';
                        closeIcon.addEventListener('click', function () {
                            const container = this.parentNode;
                            const index = Array.from(container.parentNode.children).indexOf(container);
                            container.remove();
                            updateFileList(input, index);
                        });

                        imageContainer.appendChild(link);
                        imageContainer.appendChild(closeIcon);
                        container.appendChild(imageContainer);
                    };

                    reader.readAsDataURL(file);
                }
                previewContainer.appendChild(container);
            }
            function updateAddMoreButtonVisibility() {
                const containers = document.querySelectorAll(".dynamic-container");
                containerCount = containers.length;
                addMoreButton.style.display = containerCount >= 10 ? "none" : "inline-block";
            }
            
            function addMoreFields() {
            if (containerCount >= 10) return;

            const newFields = dynamicFieldsContainer.cloneNode(true);
            newFields.classList.remove("dynamic-fields");
            newFields.classList.add("dynamic-container");
            
            // Use index-based identifier
            const containerIndex = document.querySelectorAll('.dynamic-container').length;
            newFields.setAttribute('data-container-index', containerIndex);
            
            dynamicFieldsContainer.parentNode.insertBefore(newFields, addMoreButton);
            newFields.style.display = "block";
            
            // Create a hidden input for product identification
            const productIdInput = document.createElement('input');
            productIdInput.type = 'hidden';
            productIdInput.name = `product_id_${containerIndex}`;
            productIdInput.value = containerIndex;  // or your actual product ID
            newFields.appendChild(productIdInput);
            
            // Modify file input name to include container index
            const newFileInput = newFields.querySelector('#addImages');
            newFileInput.name = `additionalimages_${containerIndex}[]`;
            newFileInput.id = `addImages_${containerIndex}`;
            
            const newPreviewContainer = newFields.querySelector('#previewContainer');
            newPreviewContainer.id = `previewContainer_${containerIndex}`;
            
            // Add event listeners
            addDeleteButtonListener(newFields);
            addExpiryDateValidation(newFields);
            addQuestionMarkEventListener(newFields);
            
            newFileInput.addEventListener('change', function() {
                handleImagePreview(this, newPreviewContainer, containerIndex);
            });
            
            // Clear values and handle Select2
            $(newFields).find('input:not([type="hidden"]), select, textarea').not('[type="button"], [type="submit"]').val('');
            
            $('select.select2-hidden-accessible').select2('destroy');
            
            $('.dynamic-container select, #sell_con').each(function() {
                $(this).select2({
                    placeholder: $(this).attr('placeholder') || "Select an option",
                    allowClear: true
                });
            });
            
            $(newFields).find('select').trigger('change');
            
            updateAddMoreButtonVisibility();
            updateLabelTexts();
        }

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

            function addQuestionMarkEventListener(container) {
                const questionMark = container.querySelector('#questionMark');
                const priceToast = container.querySelector('#priceToast');
                const toastContainer = priceToast.closest('.toast-container');

                questionMark.addEventListener('click', function () {
                    const toast = new bootstrap.Toast(priceToast, {
                        container: toastContainer,
                        autohide: true,
                        delay: 5000 // Set the delay for auto-dismissal (in milliseconds)
                    });
                    toast.show();
                });
            }

            function addDeleteButtonListener(container) {
                const deleteButton = container.querySelector(".delete-row");
                if (deleteButton) {
                    deleteButton.addEventListener("click", function () {
                        container.remove();
                        updateLabelTexts();
                        updateAddMoreButtonVisibility(); // Add this line
                    });
                }
            }

            function updateLabelTexts() {
                const dynamicContainers = document.querySelectorAll(".dynamic-container");
                dynamicContainers.forEach((container, index) => {
                    const productLabel = container.querySelector('#new_heading');
                    productLabel.textContent = `New Product ${index + 1}`;
                });
            }

            function validateEmail(email) {
                const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return regex.test(email);
            }

            function validateContactNumber(contactNumber) {
                const regex = /^\+?[0-9]{7,15}$/;
                return regex.test(contactNumber);
            }

            function focusOnField(fieldName, containerIndex = -1) {
                let field;
                if (containerIndex === -1) {
                    field = document.querySelector(`[name="${fieldName}"]`);
                } else {
                    const containers = document.querySelectorAll(".dynamic-container");
                    field = containers[containerIndex].querySelector(`[name="${fieldName}"]`);
                }
                if (field) {
                    field.focus();
                    field.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }

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

                // Check main form fields
                for (const field of allFields) {
                    if (field.name === "" || field.type === "hidden" || field.parentNode.style.display === "none" || field.disabled) {
                        continue;
                    }

                    // Skip additional fields in the main form validation
                    if (field.name.startsWith("additional") || field.name === "ad_sell_con[]" || field.name === "sell_con") {
                        continue;
                    }

                    // Exclude validation for specific fields
                    if (["modelNo", "manufacturingYear", "brandName", "dimensions", "productDescription", "exp"].includes(field.name)) {
                        continue;
                    }

                    if (field.name === "email" && !validateEmail(field.value.trim())) {
                        swal("Error", "Please enter a valid email address", "error").then(() => focusOnField("email"));
                        return false;
                    }

                    if (field.name === "contactNo" && !validateContactNumber(field.value.trim())) {
                        swal("Error", "Please enter a valid contact number", "error").then(() => focusOnField("contactNo"));
                        return false;
                    }

                    if (field.name === "contactPerson" && !validateContactName(field.value.trim())) {
                        swal("Error", "Please enter a valid contact name (letters and spaces only)", "error").then(() => focusOnField("contactPerson"));
                        return false;
                    }

                    if (field.name === "price" && parseFloat(field.value.trim()) >= parseFloat(document.getElementById("marprice").value.trim())) {
                        swal("Error", "Previous price should be greater than Current price", "error").then(() => focusOnField("price"));
                        return false;
                    }

                    if (field.value.trim() === "") {
                        swal("Error", `${field.name} cannot be empty`, "error").then(() => focusOnField(field.name));
                        return false;
                    }
                }

                const containers = form.querySelectorAll(".dynamic-container");
                if (containers.length > 0) {
                    let productCounter = 1;
                    for (const [index, container] of containers.entries()) {
                        if (container.style.display === "none") continue;

                        const containerFields = container.querySelectorAll("input, select, textarea");

                        for (const field of containerFields) {
                            if (field.name === "" || field.type === "hidden" || field.disabled) continue;

                            // Exclude validation for specific fields
                            if (["additionalmodelNo[]", "additionalmanufacturingYear[]", "additionalbrandName[]", "additionaldimensions[]", "additionalproductDescription[]"].includes(field.name)) {
                                continue;
                            }
                            // Add validation for additionalexp[]
                            if (field.name === "additionalexp[]") {
                                if (field.value.trim() !== "") {
                                    const expDate = new Date(field.value);
                                    const currentDate = new Date();

                                    expDate.setHours(0, 0, 0, 0);
                                    currentDate.setHours(0, 0, 0, 0);

                                    if (expDate < currentDate) {
                                        swal("Error", `Expiry date for Additional Product ${productCounter} must be today or a future date`, "error").then(() => {
                                            field.value = "";
                                            field.focus();
                                        });
                                        return false;
                                    }
                                }
                                continue;
                            }

                            if (field.name === "ad_sell_con[]") {
                                continue; // Skip here, we'll check it at the end
                            }

                            if (field.tagName.toLowerCase() === 'select' && $(field).hasClass('select2-hidden-accessible')) {
                                const selectValue = $(field).val();
                                if (!selectValue || selectValue.length === 0) {
                                    swal("Error", `Please select an option for ${field.name.replace("[]", "")} in Additional Product ${productCounter}`, "error").then(() => {
                                        $(field).select2('open');
                                    });
                                    return false;
                                }
                            } else if (field.value.trim() === "") {
                                swal("Error", `${field.name.replace("[]", "")} in additional fields cannot be empty in Product ${productCounter}`, "error").then(() => focusOnField(field.name, index));
                                return false;
                            }
                        }
                        productCounter++;
                    }
                }

                // Check selling countries at the end
                const sellConField = $('#sell_con');
                const selectedCountries = sellConField.val();

                if (!selectedCountries || selectedCountries.length === 0) {
                    swal("Error", "Please select at least one selling country", "error").then(() => {
                        sellConField.select2('open');
                    });
                    return false;
                }

                // Check additional selling countries
                if (containers.length > 0) {
                    let productCounter = 1;
                    for (const container of containers) {
                        if (container.style.display === "none") continue;

                        const adSellConField = $(container.querySelector('[name="ad_sell_con[]"]'));
                        const adSelectedCountries = adSellConField.val();

                        if (!adSelectedCountries || adSelectedCountries.length === 0) {
                            swal("Error", `Please select at least one selling country for Additional Product ${productCounter}`, "error").then(() => {
                                adSellConField.select2('open');
                            });
                            return false;
                        }
                        productCounter++;
                    }
                }

                return true;
            }

            // Add this function to validate contact name
            function validateContactName(name) {
                const regex = /^[a-zA-Z\s]+$/;
                return regex.test(name);
            }

            function constructPreview() {
                // Collect form data
                const company = document.getElementById("company").value;
                const contactPerson = document.getElementById("contactPerson").value;
                const contactNo = document.getElementById("contactNo").value;
                const email = document.getElementById("email").value;
                const productCategoryInput = document.getElementById("productCategory");
                const productCategory = productCategoryInput.value !== "Other" ? productCategoryInput.options[productCategoryInput.selectedIndex].text : document.getElementById("otherCategory").value;
                const productName = document.getElementById("productName").value;
                const modelNo = document.getElementById("modelNo").value;
                const brandName = document.getElementById("brandName").value;
                const expDate = document.getElementById("exp").value;
                const manufacturingCountry = document.getElementById("manufacturingCountry").value;
                const manufacturingYear = document.getElementById("manufacturingYear").value;
                const dimensions = document.getElementById("dimensions").value;
                const quantity = document.getElementById("quantity").value;
                const currentPrice = document.getElementById("price").value;
                const previousPrice = document.getElementById("marprice").value;
                const productDescription = document.getElementById("productDescription").value;
                const reasonToSell = document.getElementById("rts").value;
                const sellConField = $('#sell_con');
                const selectedCountries = sellConField.val();
                const selectedCountryNames = sellConField.find(':selected').map(function () {
                    return this.text;
                }).get().join(', ');
                // Construct HTML string for preview table with CSS styles
                let previewHTML = `
        <style>
            .table-container {
                overflow-x: auto;
            }
            table {
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
                border: 1px solid #dddddd;
                text-align: left;
                padding: 8px;
            }
            th {
                background-color: #f2f2f2;
            }
        </style>
        <div class="table-container">
            <table>
                <tr><th>Field</th><th>Value</th></tr>
                <tr><td><strong>Company Name:</strong></td><td>${company}</td></tr>
                <tr><td><strong>Contact Person:</strong></td><td>${contactPerson}</td></tr>
                <tr><td><strong>Contact Number:</strong></td><td>${contactNo}</td></tr>
                <tr><td><strong>Email:</strong></td><td>${email}</td></tr>
                <tr><td><strong>Product Category:</strong></td><td>${productCategory}</td></tr>
                <tr><td><strong>Product Name:</strong></td><td>${productName}</td></tr>
                <tr><td><strong>Model No:</strong></td><td>${modelNo}</td></tr>
                <tr><td><strong>Brand Name:</strong></td><td>${brandName}</td></tr>
                <tr><td><strong>Exp. Date:</strong></td><td>${expDate}</td></tr>
                <tr><td><strong>Manufacturing Country:</strong></td><td>${manufacturingCountry}</td></tr>
                <tr><td><strong>Manufacturing Year:</strong></td><td>${manufacturingYear}</td></tr>
                <tr><td><strong>Dimensions:</strong></td><td>${dimensions}</td></tr>
                <tr><td><strong>Quantity:</strong></td><td>${quantity}</td></tr>
                <tr><td><strong>Current Price (QAR):</strong></td><td>${currentPrice}</td></tr>
                <tr><td><strong>Previous Price (QAR):</strong></td><td>${previousPrice}</td></tr>
                <tr><td><strong>Product Description:</strong></td><td>${productDescription}</td></tr>
                <tr><td><strong>Reason To Sell:</strong></td><td>${reasonToSell}</td></tr>
                <tr><td><strong>Selling Countries:</strong></td><td>${selectedCountryNames}</td></tr>
            </table>
        </div>
    `;

                // Get all dynamic containers
                const dynamicContainers = document.querySelectorAll(".dynamic-container");

                // Loop through each dynamic container and append its data to the preview HTML
                dynamicContainers.forEach((container, index) => {
                    const adProductCategory = container.querySelector('select.adCategory').value !== 'Other' ? container.querySelector('select.adCategory').options[container.querySelector('select.adCategory').selectedIndex].text : container.querySelector('input.adotherCategory').value;
                    const adProductName = container.querySelector('input[name="additionalproductName[]"]').value;
                    const adModelNo = container.querySelector('input[name="additionalmodelNo[]"]').value;
                    const adBrandName = container.querySelector('input[name="additionalbrandName[]"]').value;
                    const adExpDate = container.querySelector('input[name="additionalexp[]"]').value;
                    const adManufacturingCountry = container.querySelector('select[name="additionalmanufacturingCountry[]"]').value;
                    const adManufacturingYear = container.querySelector('input[name="additionalmanufacturingYear[]"]').value;
                    const adDimensions = container.querySelector('input[name="additionaldimensions[]"]').value;
                    const adQuantity = container.querySelector('input[name="additionalquantity[]"]').value;
                    const adCurrentPrice = container.querySelector('input[name="additionalprice[]"]').value;
                    const adPreviousPrice = container.querySelector('input[name="additionalmarprice[]"]').value;
                    const adProductDescription = container.querySelector('textarea[name="additionalproductDescription[]"]').value;
                    const adReasonToSell = container.querySelector('select[name="additionalrts[]"]').value;
                    const adSellConField = $(container.querySelector('[name="ad_sell_con[]"]'));
                    const adSelectedCountryNames = adSellConField.select2('data').map(item => item.text).join(', ');


                    previewHTML += `
            <br><br>
            <table>
                <tr><th colspan="2">Additional Product ${index + 1}</th></tr>
                <tr><td><strong>Product Category:</strong></td><td>${adProductCategory}</td></tr>
                <tr><td><strong>Product Name:</strong></td><td>${adProductName}</td></tr>
                <tr><td><strong>Model No:</strong></td><td>${adModelNo}</td></tr>
                <tr><td><strong>Brand Name:</strong></td><td>${adBrandName}</td></tr>
                <tr><td><strong>Exp. Date:</strong></td><td>${adExpDate}</td></tr>
                <tr><td><strong>Manufacturing Country:</strong></td><td>${adManufacturingCountry}</td></tr>
                <tr><td><strong>Manufacturing Year:</strong></td><td>${adManufacturingYear}</td></tr>
                <tr><td><strong>Dimensions:</strong></td><td>${adDimensions}</td></tr>
                <tr><td><strong>Quantity:</strong></td><td>${adQuantity}</td></tr>
                <tr><td><strong>Current Price (QAR):</strong></td><td>${adCurrentPrice}</td></tr>
                <tr><td><strong>Previous Price (QAR):</strong></td><td>${adPreviousPrice}</td></tr>
                <tr><td><strong>Product Description:</strong></td><td>${adProductDescription}</td></tr>
                <tr><td><strong>Reason To Sell:</strong></td><td>${adReasonToSell}</td></tr>
                <tr><td><strong>Selling Countries:</strong></td><td>${adSelectedCountryNames}</td></tr>
        </table>
        `;
                });

                return previewHTML;
            }
            form.addEventListener('submit', function (event) {
                event.preventDefault();
                if (validateForm()) {
                    const previewHTML = constructPreview();
                    const confirmationMessage = document.createElement('div');
                    confirmationMessage.innerHTML = previewHTML;

                    swal({
                        title: "Form is valid!",
                        text: "Do you want to submit the form?",
                        content: confirmationMessage,
                        icon: "success",
                        buttons: ["Cancel", "Yes, submit it!"],
                        dangerMode: false,
                    }).then((willSubmit) => {
                        if (willSubmit) {
                            const formData = new FormData(this);

                            // Collect and append the grouped ad_sell_con values
                            const adSellConValues = [];
                            const containers = this.querySelectorAll(".dynamic-container");
                            containers.forEach(container => {
                                const adSellConField = $(container.querySelector('[name="ad_sell_con[]"]'));
                                adSellConValues.push(adSellConField.val());
                            });
                            formData.append('grouped_ad_sell_con', JSON.stringify(adSellConValues));

                            // Submit the form with the additional data
                            fetch(this.action, {
                                method: 'POST',
                                body: formData
                            })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.status === 'success') {
                                        swal({
                                            title: data.message,
                                            icon: "success",
                                            button: false,
                                            timer: 2900
                                        });
                                        setTimeout(function () {
                                            window.location.href = data.redirect;
                                        }, 3000);
                                    } else {
                                        // Handle any errors here
                                        swal({
                                            title: "Oops...",
                                            text: "Something went wrong!",
                                            icon: "error",
                                        });
                                    }
                                })
                                .catch(error => {
                                    console.error('Error:', error);
                                    swal({
                                        title: "Oops...",
                                        text: "An error occurred while submitting the form.",
                                        icon: "error",
                                    });
                                });
                        }
                    });
                }
            });
        });

        const imagesInput = document.getElementById('images');
        imagesInput.addEventListener('change', function () {
            var files = imagesInput.files;
            imagePreviewContainer.innerHTML = '';

            var container = document.createElement('div');
            container.classList.add('d-flex'); // Use flexbox to align images horizontally
            container.style.flexWrap = 'wrap';

            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var reader = new FileReader();

                reader.onload = function (e) {
                    var imageContainer = document.createElement('div');
                    imageContainer.classList.add('image-container');
                    imageContainer.style.position = 'relative';
                    imageContainer.style.margin = '10px';

                    var img = document.createElement('img');
                    img.src = e.target.result;
                    img.alt = "pro-image";
                    img.style.maxWidth = '150px'; // Adjust as needed
                    img.style.maxHeight = '150px'; // Adjust as needed

                    var link = document.createElement('a');
                    link.href = e.target.result;
                    link.setAttribute('data-fancybox', 'gallery');
                    link.appendChild(img);

                    var closeIcon = document.createElement('span');
                    closeIcon.innerHTML = '&times;';
                    closeIcon.classList.add('close-icon');
                    closeIcon.style.position = 'absolute';
                    closeIcon.style.top = '5px';
                    closeIcon.style.right = '5px';
                    closeIcon.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
                    closeIcon.style.color = 'white';
                    closeIcon.style.borderRadius = '50%';
                    closeIcon.style.padding = '2px 5px';
                    closeIcon.style.cursor = 'pointer';
                    closeIcon.addEventListener('click', function () {
                        var container = this.parentNode;
                        var index = Array.from(container.parentNode.children).indexOf(container);
                        container.remove(); // Remove the image's parent div
                        updateFileList(index); // Update file list
                    });

                    imageContainer.appendChild(link);
                    imageContainer.appendChild(closeIcon);
                    container.appendChild(imageContainer);
                };

                reader.readAsDataURL(file);
            }
            imagePreviewContainer.appendChild(container);
        });

        function updateFileList(inputField, index) {
            const fileList = new DataTransfer();

            const files = inputField.files;
            for (let i = 0; i < files.length; i++) {
                if (i !== index) {
                    fileList.items.add(files[i]);
                }
            }

            inputField.files = fileList.files;
        }

        function addExpiryDateValidation(container) {
        const addExpInput = container.querySelector('input[name="additionalexp[]"]');
        if (addExpInput) {
            addExpInput.addEventListener("change", function () {
                validateExpiryDate(this);
            });
        }
    }
        function validatefirstExpiryDate() {
        const ExpInput = document.getElementById('exp');
        if (ExpInput) {
            ExpInput.addEventListener("change", function () {
                validateExpiryDate(this);
            });
        }
    }
    </script>

</div>
<br />

{% endblock body %}