// Sortable.js for Sections Order
document.addEventListener('DOMContentLoaded', function() {
    const sortable = Sortable.create(document.getElementById('sectionsOrder'), {
        handle: '.handle',
        animation: 150,
        onEnd: function(evt) {
            // Update hidden inputs order
            const items = evt.to.children;
            for (let i = 0; i < items.length; i++) {
                const input = items[i].querySelector('input[type="hidden"]');
                if (input) {
                    input.value = items[i].dataset.section;
                }
            }
        }
    });
});
// Rest of the JS functions remain the same
function addProduct() {
    productCounter++;
    const container = document.getElementById('productContainer');
    const newRow = document.createElement('div');
    newRow.className = 'product-row';
    newRow.innerHTML = `
        <div class="flex justify-between items-center mb-2">
            <h4>Product ${productCounter}</h4>
            <button type="button" class="remove-btn" onclick="removeProduct(this)">Remove</button>
        </div>
        <input type="text" name="product_badge[]" value="" placeholder="Badge (e.g. স্ট্যান্ডার্ড)" required class="mb-1">
        <input type="text" name="product_title[]" value="" placeholder="Title (e.g. Milk Booster Basic)" required class="mb-1">
        <textarea name="product_desc[]" rows="2" placeholder="Description (e.g. প্যাকেট – গাভীর জন্য ৩০ দিন)" required></textarea>
        <input type="text" name="product_old_price[]" value="" placeholder="Old Price (e.g. ৳৭,৯৯০)" required class="mt-2 mb-1">
        <input type="text" name="product_price[]" value="" placeholder="Price (e.g. ৳৫,৯৯০)" required class="mb-1">
        <label class="block">Image (≤ 2 MB)</label>
        <input type="file" name="product_image[]" accept="image/*" class="mb-1">
    `;
    container.appendChild(newRow);
}
function removeProduct(button) {
    if (document.querySelectorAll('.product-row').length > 1) {
        button.closest('.product-row').remove();
    } else {
        alert('At least one product is required!');
    }
}
function addOffer() {
    offerCounter++;
    const container = document.getElementById('offerContainer');
    const newRow = document.createElement('div');
    newRow.className = 'offer-row';
    newRow.innerHTML = `
        <div class="flex justify-between items-center mb-2">
            <h4>Offer Item ${offerCounter}</h4>
            <button type="button" class="remove-btn" onclick="removeOffer(this)">Remove</button>
        </div>
        <input type="text" name="offer_icon[]" value="" placeholder="Icon (e.g. fas fa-box)" required class="mb-1">
        <input type="text" name="offer_title[]" value="" placeholder="Title (e.g. Main Offer)" required class="mb-1">
        <textarea name="offer_desc[]" rows="2" placeholder="Description (e.g. Milk Booster Basic Package)" required></textarea>
        <input type="text" name="offer_value[]" value="" placeholder="Value (e.g. ৳৫,৯৯০)" required class="mt-2">
    `;
    container.appendChild(newRow);
}
function removeOffer(button) {
    if (document.querySelectorAll('.offer-row').length > 1) {
        button.closest('.offer-row').remove();
    } else {
        alert('At least one offer item is required!');
    }
}
function addProblem() {
    problemCounter++;
    const container = document.getElementById('problemContainer');
    const newRow = document.createElement('div');
    newRow.className = 'problem-row';
    newRow.innerHTML = `
        <div class="flex justify-between items-center mb-2">
            <h4>Problem ${problemCounter}</h4>
            <button type="button" class="remove-btn" onclick="removeProblem(this)">Remove</button>
        </div>
        <input type="text" name="problem_title[]" value="" placeholder="Title (e.g. দুধ কম হচ্ছে)" required class="mb-1">
        <textarea name="problem_desc[]" rows="2" placeholder="Description (e.g. গাভীর দুধ উৎপাদন কমে যাওয়া একটি সাধারণ সমস্যা।)" required></textarea>
    `;
    container.appendChild(newRow);
}
function removeProblem(button) {
    if (document.querySelectorAll('.problem-row').length > 1) {
        button.closest('.problem-row').remove();
    } else {
        alert('At least one problem is required!');
    }
}
function addSolutionItem() {
    solutionCounter++;
    const container = document.getElementById('solutionListContainer');
    const newRow = document.createElement('div');
    newRow.className = 'solution-item-row';
    newRow.innerHTML = `
        <div class="flex justify-between items-center mb-2">
            <h4>Solution Item ${solutionCounter}</h4>
            <button type="button" class="remove-btn" onclick="removeSolutionItem(this)">Remove</button>
        </div>
        <input type="text" name="solution_list_item[]" value="" placeholder="List Item (e.g. ১০০% প্রাকৃতিক উপাদান)" required>
    `;
    container.appendChild(newRow);
}
function removeSolutionItem(button) {
    if (document.querySelectorAll('.solution-item-row').length > 1) {
        button.closest('.solution-item-row').remove();
    } else {
        alert('At least one solution item is required!');
    }
}
function addBenefit() {
    benefitCounter++;
    const container = document.getElementById('benefitsContainer');
    const newRow = document.createElement('div');
    newRow.className = 'benefit-row';
    newRow.innerHTML = `
        <div class="flex justify-between items-center mb-2">
            <h4>Benefit ${benefitCounter}</h4>
            <button type="button" class="remove-btn" onclick="removeBenefit(this)">Remove</button>
        </div>
        <input type="text" name="benefit_icon[]" value="" placeholder="Icon (e.g. fas fa-percentage)" required class="mb-1">
        <input type="text" name="benefit_title[]" value="" placeholder="Title (e.g. Benefit Title)" required class="mb-1">
        <textarea name="benefit_desc[]" rows="2" placeholder="Description (e.g. Benefit Description)" required></textarea>
    `;
    container.appendChild(newRow);
}
function removeBenefit(button) {
    if (document.querySelectorAll('.benefit-row').length > 1) {
        button.closest('.benefit-row').remove();
    } else {
        alert('At least one benefit is required!');
    }
}
function addVideoTestimonial() {
    videoTestimonialCounter++;
    const container = document.getElementById('videoTestimonialsContainer');
    const newRow = document.createElement('div');
    newRow.className = 'video-testimonial-row';
    newRow.innerHTML = `
        <div class="flex justify-between items-center mb-2">
            <h4>Video Testimonial ${videoTestimonialCounter}</h4>
            <button type="button" class="remove-btn" onclick="removeVideoTestimonial(this)">Remove</button>
        </div>
        <input type="text" name="video_url[]" value="" placeholder="Video URL (e.g. https://www.youtube.com/embed/dQw4w9WgXcQ)" required class="mb-1">
        <input type="text" name="video_caption[]" value="" placeholder="Caption" required>
    `;
    container.appendChild(newRow);
}
function removeVideoTestimonial(button) {
    if (document.querySelectorAll('.video-testimonial-row').length > 1) {
        button.closest('.video-testimonial-row').remove();
    } else {
        alert('At least one video testimonial is required!');
    }
}
function addImageTestimonial() {
    imageTestimonialCounter++;
    const container = document.getElementById('imageTestimonialsContainer');
    const newRow = document.createElement('div');
    newRow.className = 'image-testimonial-row';
    newRow.innerHTML = `
        <div class="flex justify-between items-center mb-2">
            <h4>Image Testimonial ${imageTestimonialCounter}</h4>
            <button type="button" class="remove-btn" onclick="removeImageTestimonial(this)">Remove</button>
        </div>
        <label>Image (≤ 2 MB)</label>
        <input type="file" name="image_file[]" accept="image/*" class="mb-1">
        <input type="text" name="image_caption[]" value="" placeholder="Caption" required class="mt-1">
    `;
    container.appendChild(newRow);
}
function removeImageTestimonial(button) {
    if (document.querySelectorAll('.image-testimonial-row').length > 1) {
        button.closest('.image-testimonial-row').remove();
    } else {
        alert('At least one image testimonial is required!');
    }
}
// How to Use Step Functions
function addStep() {
    stepCounter++;
    const container = document.getElementById('howToUseContainer');
    const newRow = document.createElement('div');
    newRow.className = 'step-row';
    newRow.innerHTML = `
        <div class="flex justify-between items-center mb-2">
            <h4>Step ${stepCounter}</h4>
            <button type="button" class="remove-btn" onclick="removeStep(this)">Remove</button>
        </div>
        <input type="text" name="step_icon[]" value="" placeholder="Icon/Number (e.g. 1)" required class="mb-1">
        <input type="text" name="step_title[]" value="" placeholder="Title" required class="mb-1">
        <textarea name="step_desc[]" rows="2" placeholder="Description" required></textarea>
    `;
    container.appendChild(newRow);
}
function removeStep(button) {
    if (document.querySelectorAll('.step-row').length > 1) {
        button.closest('.step-row').remove();
    } else {
        alert('At least one step is required!');
    }
}
// Usage Guide Item Functions
function addUsageItem() {
    usageCounter++;
    const container = document.getElementById('usageGuideContainer');
    const newRow = document.createElement('div');
    newRow.className = 'usage-row';
    newRow.innerHTML = `
        <div class="flex justify-between items-center mb-2">
            <h4>Usage Item ${usageCounter}</h4>
            <button type="button" class="remove-btn" onclick="removeUsageItem(this)">Remove</button>
        </div>
        <input type="text" name="usage_title[]" value="" placeholder="Title" required class="mb-1">
        <textarea name="usage_desc[]" rows="2" placeholder="Description" required></textarea>
    `;
    container.appendChild(newRow);
}
function removeUsageItem(button) {
    if (document.querySelectorAll('.usage-row').length > 1) {
        button.closest('.usage-row').remove();
    } else {
        alert('At least one usage item is required!');
    }
}
// FAQ Functions
function addFaq() {
    faqCounter++;
    const container = document.getElementById('faqContainer');
    const newRow = document.createElement('div');
    newRow.className = 'faq-row';
    newRow.innerHTML = `
        <div class="flex justify-between items-center mb-2">
            <h4>FAQ Item ${faqCounter}</h4>
            <button type="button" class="remove-btn" onclick="removeFaq(this)">Remove</button>
        </div>
        <input type="text" name="faq_question[]" value="" placeholder="Question" required class="mb-1">
        <textarea name="faq_answer[]" rows="2" placeholder="Answer" required></textarea>
    `;
    container.appendChild(newRow);
}
function removeFaq(button) {
    if (document.querySelectorAll('.faq-row').length > 1) {
        button.closest('.faq-row').remove();
    } else {
        alert('At least one FAQ item is required!');
    }
}
// NEW: Floating Button Functions
function addFloatButton() {
    floatButtonCounter++;
    const container = document.getElementById('floatingButtonsContainer');
    const newRow = document.createElement('div');
    newRow.className = 'float-btn-row';
    newRow.innerHTML = `
        <div class="flex justify-between items-center mb-2">
            <h4>Floating Button ${floatButtonCounter}</h4>
            <button type="button" class="remove-btn" onclick="removeFloatButton(this)">Remove</button>
        </div>
        <input type="text" name="float_number[]" value="" placeholder="Number/Icon (e.g. WhatsApp or 1)" required class="mb-1">
        <input type="text" name="float_link[]" value="" placeholder="Link (e.g. https://wa.me/...)" required class="mb-1">
        <label class="block">Image (≤ 2 MB)</label>
        <input type="file" name="float_image[]" accept="image/*" class="mb-1">
    `;
    container.appendChild(newRow);
}
function removeFloatButton(button) {
    if (document.querySelectorAll('.float-btn-row').length > 1) {
        button.closest('.float-btn-row').remove();
    } else {
        alert('At least one floating button is required!');
    }
}