{{>header}}
<style>
    .is-invalid {
        border: 2px solid red;
    }
</style>
<title>Product</title>
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary card-outline mt-3">
                    <div class="card-header" style="background-color: white; color:Black;">
                        <h4><b style="background-color: white; color:#4B0F77;">Add Product</b></h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div id="privacy-policy-three" class="privacy-policy">
                            <form method="post" action="/admin/v1/addproduct" enctype="multipart/form-data">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="col-form-label">Name <span class="text-danger">*</span>
                                            </label>
                                            <input type="text" class="form-control" required name="productName"
                                                pattern="^\S(.*\S)?$"
                                                title="Product name should not have leading or trailing spaces"
                                                minlength="1" maxlength="100" placeholder="Product Name">
                                        </div>
                                        <p id="nameP" style="color: red !important;"></p>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="col-form-label">Description <span class="text-danger">*</span>
                                            </label>
                                            <textarea class="form-control description" required name="description"
                                                minlength="10" rows="1" placeholder="Short Description"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="col-form-label">Category <span
                                                    class="text-danger">*</span></label>
                                            <select id="categorySelect" name="categoryId" class="col-md-12 p-2"
                                                style="border-radius: 5px;" required>
                                                <option value="" disabled selected hidden>Select Category</option>
                                                {{#each allCategories}}
                                                <option value="{{this._id}}" data-type="{{this.type}}">{{this.name}}
                                                </option>
                                                {{/each}}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="col-form-label">Pictures <span class="text-danger">*</span>
                                            </label>
                                            <input type="file" class="form-control" accept="image/*" multiple
                                                name="pictures" id="imageInput" required>
                                        </div>
                                    </div>
                                    {{!-- <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="col-form-label">Select Vendor <span
                                                    class="text-danger">*</span></label>
                                            <select name="vendorId" class="selectpicker form-control"
                                                data-live-search="true" required>
                                                <option value="" disabled selected hidden> Select Vendor</option>
                                                <!-- Important for placeholder -->
                                                {{#each allVendors}}
                                                <option value="{{this._id}}">{{this.communityName}}</option>
                                                {{/each}}
                                            </select>
                                        </div>
                                    </div> --}}
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="col-form-label">Price <span class="text-danger">*</span>
                                            </label>
                                            <input type="number" min="0.01" max="9999999" class="form-control"
                                                name="price" step="0.01" id="price" required placeholder="Enter price"
                                                oninput="calculateDiscountedPrice()">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="col-form-label">Discount(%) </label>
                                            <input type="number" class="form-control" name="discount" id="discount"
                                                placeholder="0" step="1" min="0" max="100"
                                                oninput="calculateDiscountedPrice()">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="tax" class="col-form-label">Discounted Price </label>
                                            <input type="number" id="discountedPrice" class="form-control"
                                                name="discountedPrice" placeholder="Discounted Price" min="1" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="col-form-label">Availability<span class="text-danger">*</span>
                                            </label>
                                            <select name="availability" class="form-control">
                                                <option value="Instock">Instock</option>
                                                <option value="Out-of-stock">Out Of Stock</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="col-form-label">Unit Type <span
                                                    class="text-danger">*</span></label>
                                            <select id="unitTypeSelect" name="unitType" class="form-control" required
                                                onchange="updateQuantityPlaceholder()">
                                                <option value="" disabled selected hidden>Select Unit Type</option>
                                                <option value="piece">Piece</option>
                                                <option value="kilogram">Kilogram</option>
                                                <option value="gram">Gram</option>
                                                <option value="liter">Litre</option>
                                                <option value="milliliter">Millilitre</option>
                                                <option value="pack">Pack</option>
                                                <option value="box">Box</option>
                                                <option value="jar">Jar</option>
                                                <option value="can">Can</option>
                                                <option value="bottle">Bottle</option>
                                                <option value="meter">Meter</option>
                                                <option value="pair">Pair</option>
                                                <option value="set">Set</option>
                                                <option value="bundle">Bundle</option>
                                                <option value="dozen">Dozen</option>
                                                <option value="sheet">Sheet</option>
                                                <option value="ream">Ream</option>
                                                <option value="inches">Inches</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="col-form-label">Quantity
                                            </label>
                                            <input type="number" class="form-control" name="quantity" min="1" max="999"
                                                id="quantityInput" placeholder="Enter Quantity in No's">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="col-form-label">Stock<span class="text-danger">*</span>
                                            </label>
                                            <input type="number" class="form-control" name="stock" min="1" max="999"
                                                placeholder="Enter Available Stock" required>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="col-form-label">Stock Alert <span class="text-danger">*</span>
                                            </label>
                                            <input type="number" min="1" max="999" class="form-control"
                                                name="stockAlert" required placeholder="Enter Stock Alert">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="tax" class="col-form-label">CGST(%) <span
                                                    class="text-danger">*</span></label>
                                            <input type="number" min="0" max="100" step="0.01" class="form-control"
                                                name="cgst" required placeholder="Enter CGST here">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="tax" class="col-form-label">SGST(%) <span
                                                    class="text-danger">*</span></label>
                                            <input type="number" min="0" max="100" step="0.01" class="form-control"
                                                name="sgst" required placeholder="Enter SGST here">
                                        </div>
                                    </div>
                                    <div class="col-md-3" style="display: flex; align-items: center;"
                                        id="homeStoreSection">
                                        <label style="margin-right: 10px;">Special Offer</label><br>
                                        <input type="checkbox" class="status" name="specialOffer" data-on-text="yes"
                                            data-off-text="no" data-on-color="green" data-off-color="red">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="harvestDate" class="form-label">Harvest Date </label>
                                            <input type="date" class="form-control" id="harvestDate" name="harvestDate">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="form-label">Organic Label </label>
                                            <select id="categorySelect" name="organicLabel" class="col-md-12 p-2"
                                                style="border-radius: 5px;">
                                                <option value="" disabled selected hidden>Select Organic Label
                                                </option>
                                                <option value="Yes">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="expiryDate" class="form-label">Expiry Date</label>
                                            <input type="date" class="form-control" id="expiryDate2" name="expiryDate">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="col-form-label">
                                                Select Vendors <span class="text-danger">*</span>
                                            </label>

                                            <!-- Search -->
                                            <input type="text" id="vendorSearch" class="form-control mb-2"
                                                placeholder="Search vendor...">

                                            <!-- Select / Unselect All -->
                                            <div class="mb-2 d-flex gap-2">
                                                <button type="button" class="btn btn-sm btn-outline-primary"
                                                    id="selectAllVendors">
                                                    Select All
                                                </button>

                                                <button type="button" class="btn btn-sm btn-outline-secondary"
                                                    style="color: white; border-color: #ffffff; margin-left: 5px;"
                                                    id="unselectAllVendors">
                                                    Unselect All
                                                </button>
                                            </div>

                                            <!-- Scrollable Vendor List -->
                                            <div id="vendors" class="border rounded p-2"
                                                style="max-height: 200px; overflow-y: auto; background:#fff;">
                                                {{#each allVendors}}
                                                <div class="form-check vendor-item">
                                                    <input class="form-check-input vendor-checkbox" type="checkbox"
                                                        name="vendorIds" id="vendor_{{this._id}}" value="{{this._id}}">
                                                    <label class="form-check-label text-dark" for="vendor_{{this._id}}">
                                                        {{this.communityName}}
                                                    </label>
                                                </div>
                                                {{/each}}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="type-fields ecommerce">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="brand" class="form-label">Brand <span
                                                            class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" id="brand" name="brand"
                                                        minlength="3" maxlength="25" placeholder="Enter Brand"
                                                        pattern="^\S(.*\S)?$"
                                                        title="Product name should not have leading or trailing spaces"
                                                        data-required>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Return Policy
                                                    </label>
                                                    <textarea class="form-control description" name="returnPolicy"
                                                        minlength="10" rows="1"
                                                        placeholder="Enter Return Policy"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Warranty</label>
                                                    <input type="number" min="1" max="999" class="form-control"
                                                        name="warranty" placeholder="Enter warranty here">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Manufacturer Name <span
                                                            class="text-danger">*</span></label>
                                                    <textarea class="form-control description" name="manufacturerName"
                                                        minlength="3" rows="1"
                                                        placeholder="Enter Manufacturer Name"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="type-fields food">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Ingredients</label>
                                                    <textarea class="form-control description" name="ingredients"
                                                        minlength="10" rows="1"
                                                        placeholder="Enter Ingredients"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="expiryDate" class="form-label">Expiry Date </label>
                                                    <input type="date" class="form-control" id="expiryDate"
                                                        name="expiryDate">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Food Type <span
                                                            class="text-danger">*</span></label>
                                                    <select id="categorySelect" name="foodType" class="col-md-12 p-2"
                                                        style="border-radius: 5px;" data-required>
                                                        <option value="" disabled selected hidden>Select Food Type
                                                        </option>
                                                        <option value="Non-Veg">Non-Veg</option>
                                                        <option value="Veg">Veg</option>
                                                    </select>
                                                    {{!-- <input type="text" class="form-control" required
                                                        name="foodType" placeholder="Vegetarian/Non-Vegetarian"> --}}
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label description">Packaging Type
                                                    </label>
                                                    <textarea class="form-control" name="packagingType" minlength="10"
                                                        rows="1" maxlength="25"
                                                        placeholder="Enter Packaging Type"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <h3><b>Extra Add-Ons</b></h3>
                                        </div>
                                        <div class="row">
                                            <div id="extraAddonsWrapper">
                                                <div class="addon-group d-flex align-items-center mb-2">
                                                    <input type="text" name="extraAddons[0][addOn]"
                                                        class="form-control mr-2" placeholder="Product Name">
                                                    <input type="number" name="extraAddons[0][price]"
                                                        class="form-control mr-2" placeholder="Price (₹)">
                                                    <button type="button" class="btn btn-danger remove-addon"><i
                                                            class="fa fa-trash"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <!-- Button to add more -->
                                            <button type="button" class="btn btn-success bg-warning"
                                                id="addAddon">Add</i></button>
                                        </div>
                                    </div>
                                    <div class="type-fields grocery">

                                    </div>
                                </div>
                                <div class="form-group d-flex justify-content-center">
                                    <button class="btn btn-lg btn-info" type="submit">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    // Search vendors
    document.getElementById("vendorSearch").addEventListener("keyup", function () {
        const searchValue = this.value.toLowerCase();
        document.querySelectorAll(".vendor-item").forEach(item => {
            const text = item.innerText.toLowerCase();
            item.style.display = text.includes(searchValue) ? "" : "none";
        });
    });

    // Select All
    document.getElementById("selectAllVendors").addEventListener("click", function () {
        document.querySelectorAll(".vendor-checkbox").forEach(cb => cb.checked = true);
    });

    // Unselect All
    document.getElementById("unselectAllVendors").addEventListener("click", function () {
        document.querySelectorAll(".vendor-checkbox").forEach(cb => cb.checked = false);
    });
</script>

<script>
    let addonIndex = 1;

    document.getElementById('addAddon').addEventListener('click', () => {
        const nameInputs = document.querySelectorAll("input[name^='extraAddons'][name$='[addOn]']");
        const priceInputs = document.querySelectorAll("input[name^='extraAddons'][name$='[price]']");

        let hasEmpty = false;

        nameInputs.forEach(input => {
            if (input.value.trim() === "") {
                hasEmpty = true;
            }
        });

        priceInputs.forEach(input => {
            if (input.value.trim() === "") {
                hasEmpty = true;
            }
        });

        if (hasEmpty) {
            alert("Please fill in all existing add-on name and price fields before adding a new one.");
            return;
        }
        const wrapper = document.getElementById('extraAddonsWrapper');
        const div = document.createElement('div');
        div.classList.add('addon-group', 'd-flex', 'align-items-center', 'mb-2');
        div.innerHTML = `
      <input type="text" name="extraAddons[${addonIndex}][addOn]" class="form-control mr-2" placeholder="Product Name" >
      <input type="number" name="extraAddons[${addonIndex}][price]" class="form-control mr-2" placeholder="Price (₹)" >
      <button type="button" class="btn btn-danger remove-addon"><i class="fa fa-trash"></i></button>
    `;
        wrapper.appendChild(div);
        addonIndex++;
    });

    document.addEventListener('click', function (e) {
        if (e.target.closest('.remove-addon')) {
            e.target.closest('.addon-group').remove();
        }
    });
</script>
{{!-- to change the placeholder of quantity based on the unit type changed --}}
<script>
    function updateQuantityPlaceholder() {
        const unitType = document.getElementById("unitTypeSelect").value;
        const quantityInput = document.getElementById("quantityInput");
        quantityInput.placeholder = "Enter Quantity in " + (unitType.charAt(0).toUpperCase() + unitType.slice(1));
    }
</script>
{{!-- discounted price calculation --}}
<script>
    function calculateDiscountedPrice() {
        const price = parseFloat(document.getElementById("price").value) || 0;
        const discount = parseFloat(document.getElementById("discount").value) || 0;

        if (price > 0 && discount >= 0 && discount <= 100) {
            let discountedPrice = price;
            if (discount > 0) {
                discountedPrice = price - (price * discount / 100);
            }
            document.getElementById("discountedPrice").value = discountedPrice.toFixed(2);
        } else {
            document.getElementById("discountedPrice").value = "";
        }
    }
</script>

{{!-- script for description error --}}
{{!--
<script>
    document.querySelector('form').addEventListener('submit', function (e) {
        const descFields = document.getElementsByClassName('description');
        let firstInvalid = null;

        // Clear previous highlights
        Array.from(descFields).forEach(field => field.classList.remove('is-invalid'));

        for (let i = 0; i < descFields.length; i++) {
            const desc = descFields[i].value;
            if (/^\s|\s$/.test(desc)) {
                e.preventDefault(); // stop form submission
                descFields[i].classList.add('is-invalid'); // highlight
                if (!firstInvalid) {
                    firstInvalid = descFields[i];
                }
            }
        }

        // Scroll to the first invalid field (if any)
        if (firstInvalid) {
            alert("Description should not start or end with a space.");
            firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    });
</script> --}}
<script>
    document.querySelector('form').addEventListener('submit', function (e) {
        const descField = document.querySelector('textarea[name="description"]');
        const ingredientsField = document.querySelector('textarea[name="ingredients"]');
        const packagingTypeFeild = document.querySelector('textarea[name="packagingType"]');
        const returnPolicyFeild = document.querySelector('textarea[name="returnPolicy"]');
        const manufacturerNameFeild = document.querySelector('textarea[name="manufacturerName"]');

        if (descField) descField.value = descField.value.trim();
        if (ingredientsField) ingredientsField.value = ingredientsField.value.trim();
        if (packagingTypeFeild) packagingTypeFeild.value = packagingTypeFeild.value.trim();
        if (returnPolicyFeild) returnPolicyFeild.value = returnPolicyFeild.value.trim();
        if (manufacturerNameFeild) manufacturerNameFeild.value = manufacturerNameFeild.value.trim();
    });
</script>
{{!-- script to get subcategories --}}
<script>
    document.getElementById("categorySelect").addEventListener("change", function () {
        const categoryId = this.value;
        const brandSelect = document.getElementById("brandSelect");
        brandSelect.innerHTML = '<option value="">Select Sub Category</option>';
        if (categoryId) {
            fetch(`/admin/getsubcategories/${categoryId}`)
                .then(response => response.json())
                .then(data => {
                    data.allSubCategories.forEach(subCategory => {
                        const option = document.createElement("option");
                        option.value = subCategory._id;
                        option.textContent = subCategory.name;
                        brandSelect.appendChild(option);
                    });
                })
                .catch(error => alert("Error fetching sub categories"))
        }
    });
</script>
{{!-- image validations --}}
<script>
document.getElementById("imageInput").addEventListener("change", function (event) {
    const files = event.target.files;
    const maxSize = 1 * 1024 * 1024; // 1 MB
    const requiredRatio = 4 / 3;
    const tolerance = 0.02; // allow small floating point difference

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

        if (file.size > maxSize) {
            alert(`"${file.name}" exceeds 1 MB size limit`);
            event.target.value = "";
            return;
        }

        const img = new Image();
        img.src = URL.createObjectURL(file);

        img.onload = function () {
            const width = img.width;
            const height = img.height;
            const ratio = width / height;

            if (Math.abs(ratio - requiredRatio) > tolerance) {
                alert(`"${file.name}" must have 4:3 aspect ratio`);
                document.getElementById("imageInput").value = "";
            }

            URL.revokeObjectURL(img.src);
        };
    }
});
</script>

<script>
    const form = document.getElementById('imageForm');
    const input = document.getElementById('imageInput');
    form.addEventListener('submit', function (e) {
        const files = input.files;
        if (files.length < 1 || files.length > 6) {
            e.preventDefault();
            alert("Please select between 1 to 6 images.");
        }
    });
</script>
<script>
    const typeSelect = document.getElementById('type');
    const typeFields = document.querySelectorAll('.type-fields');

    // Hide all type-specific fields and clear values on page load
    window.addEventListener('DOMContentLoaded', () => {
        typeFields.forEach(div => {
            div.style.display = 'none';
            Array.from(div.querySelectorAll('input, select, textarea')).forEach(el => {
                el.required = false;
                el.value = ''; // Clear value
            });
        });
    });

    // Handle dropdown change
    typeSelect.addEventListener('change', function () {
        const selected = this.value;

        typeFields.forEach(div => {
            const isSelected = div.classList.contains(selected);

            // Show only selected, hide others
            div.style.display = isSelected ? 'block' : 'none';

            Array.from(div.querySelectorAll('input, select, textarea')).forEach(el => {
                // Clear values for non-selected types
                if (!isSelected) {
                    el.value = '';
                    el.required = false;
                } else {
                    // Set required only if marked
                    if (el.hasAttribute('data-required')) {
                        el.required = true;
                    }
                }
            });
        });
    });
    //for expiry date
    document.addEventListener('DOMContentLoaded', () => {
        const expiryInput = document.getElementById('expiryDate');
        if (expiryInput) {
            const today = new Date().toISOString().split('T')[0];
            expiryInput.setAttribute('min', today);
        }
    });

    document.addEventListener('DOMContentLoaded', () => {
        const expiryInput = document.getElementById('expiryDate2');
        if (expiryInput) {
            const today = new Date().toISOString().split('T')[0];
            expiryInput.setAttribute('min', today);
        }
    });
    //for harvest date
    document.addEventListener('DOMContentLoaded', () => {
        const harvestInput = document.getElementById('harvestDate');
        if (harvestInput) {
            const today = new Date().toISOString().split('T')[0];
            harvestInput.setAttribute('max', today);
        }
    });
</script>
<script>
    //select category based on type
    document.addEventListener("DOMContentLoaded", function () {
        const typeSelect = document.getElementById("type");
        const categorySelect = document.getElementById("categorySelect");

        // Clone original options
        const allCategoryOptions = Array.from(categorySelect.options).slice(1); // skip first "Select Category"

        typeSelect.addEventListener("change", function () {
            const selectedType = this.value;

            // Clear existing options (except the default one)
            categorySelect.innerHTML = '<option value="" disabled selected hidden>Select Category</option>';

            // Filter and re-add options based on selected type
            const filtered = allCategoryOptions.filter(option => option.dataset.type === selectedType);

            filtered.forEach(option => {
                categorySelect.appendChild(option);
            });
        });
    });
</script>

{{!-- search select --}}
<script>
    $(document).ready(function () {
        $('.select2').addClass('my-custom-select').select2({
            placeholder: "Select a vendor",
            allowClear: true
        });
    });
</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

{{>footer}}