@extends('Admin.layout')

@section('content')

<style>
    textarea.form-control {

        height: 90px;

        resize: none;

    }

    .upload-container {

        border: 2px dashed #cbd5e1;

        border-radius: 12px;

        background: #fdfdfd;

        min-height: 250px;

        padding: 15px;

        display: flex;

        flex-wrap: wrap;

        gap: 10px;

        align-content: flex-start;

    }

    .image-preview-wrapper {

        position: relative;

        width: 100px;

        height: 100px;

        border-radius: 8px;

        border: 1px solid #e2e8f0;

    }

    .image-preview-wrapper img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        border-radius: 7px;

    }

    .remove-img-btn {

        position: absolute;

        top: -5px;

        right: -5px;

        background: #ff4d4d;

        color: white;

        border: none;

        border-radius: 50%;

        width: 20px;

        height: 20px;

        font-size: 12px;

        cursor: pointer;

        z-index: 10;

    }

    .add-image-box {

        width: 100px;

        height: 100px;

        border: 2px dashed #0056b3;

        border-radius: 8px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        color: #0056b3;

        transition: 0.3s;

        background: #f0f7ff;

    }

    .add-image-box:hover {

        background: #e0eeff;

    }

    .unit-flex-container {

        display: flex;

        flex-direction: column;

        width: 100%;

    }

    .unit-input-row {

        display: flex;

        gap: 15px;

        margin-bottom: 15px;

        width: 100%;

    }

    .col-val {

        flex: 1.2;

    }

    .col-unit {

        flex: 1.2;

    }

    .col-mrp {

        flex: 1.2;

    }

    .col-price {

        flex: 1.2;

    }

    .col-stock {

        flex: 1;

    }

    .col-display {

        flex: 1.2;

    }

    .col-action {

        flex: 1;

        display: flex;

        flex-direction: column;

    }

    .col-action .btn-remove {

        margin-top: auto;

    }

    .unit-input-row:has(.text-danger) .col-action {

        justify-content: center;

    }

    .unit-input-row:has(.text-danger) .col-action .btn-remove {

        margin-top: -10px;

    }

    /* --- Buttons --- */

    .btn-remove {

        background-color: #ff4d4d;

        color: white;

        border: none;

        border-radius: 6px;

        height: 42px;

        width: 100%;

    }

    .btn-add-more {

        background-color: #0056b3;

        color: white;

        padding: 8px 20px;

        border-radius: 6px;

        border: none;

        font-weight: 500;

    }

    .btn-create {

        background-color: #0056b3;

        padding: 10px 50px;

        border: none;

    }

    .btn-discard {

        background-color: #e5e7eb;

        color: #374151;

        padding: 10px 50px;

        text-decoration: none;

        border-radius: 6px;

    }

    /* Full Responsiveness */

    @media (max-width: 992px) {

        .unit-input-row {

            flex-direction: column;

            gap: 8px;

            border-bottom: 1px solid #eee;

            padding-bottom: 15px;

        }

        .col-action {

            width: 100%;

        }

    }
</style>

<div class="container-xxl container-p-y">

    <!-- <h4 class="mb-4 fw-bold">Add Product</h4> -->

    <div class="d-flex align-items-center mb-3">

        <a href="{{ route('products') }}">

            <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">

                <g filter="url(#filter0_d_62_37664)">

                    <rect x="10" y="1" width="44" height="44" rx="10" fill="white"

                        shape-rendering="crispEdges" />

                    <path d="M34 18L29 23L34 28" stroke="#292460" stroke-width="2" stroke-linecap="round"

                        stroke-linejoin="round" />

                </g>

                <defs>

                    <filter id="filter0_d_62_37664" x="0" y="0" width="64" height="64"

                        filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">

                        <feFlood flood-opacity="0" result="BackgroundImageFix" />

                        <feColorMatrix in="SourceAlpha" type="matrix"

                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />

                        <feMorphology radius="2" operator="erode" in="SourceAlpha"

                            result="effect1_dropShadow_62_37664" />

                        <feOffset dy="9" />

                        <feGaussianBlur stdDeviation="6" />

                        <feComposite in2="hardAlpha" operator="out" />

                        <feColorMatrix type="matrix"

                            values="0 0 0 0 0.399674 0 0 0 0 0.197743 0 0 0 0 0.558333 0 0 0 0.12 0" />

                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_62_37664" />

                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_62_37664" result="shape" />

                    </filter>

                </defs>

            </svg>

        </a>

        <h4 class="mb-4 fw-bold"> Add Products</h4>

    </div>

    <div class="card p-4 shadow-sm border-0">

        <form action="{{ route('add_product_form') }}" id="productForm" method="POST" enctype="multipart/form-data">

            @csrf

            <div class="row g-4">

                <div class="col-lg-8">

                    <div class="row">

                        <div class="col-md-6 mb-3">

                            <label class="form-label">Select Category</label>

                            <select name="category_id" class="form-select">

                                <option value="">Select</option>

                                @foreach ($datatable as $data)

                                <option value="{{ $data->id }}"

                                    {{ old('category_id') == $data->id ? 'selected' : '' }}>

                                    {{ $data->category_name }}

                                </option>

                                @endforeach

                            </select>

                            @error('category_id')

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        <div class="col-md-6 mb-3">

                            <label class="form-label">Product Name</label>

                            <input type="text" name="product_name" value="{{ old('product_name') }}"

                                class="form-control" placeholder="Enter Product Name">

                            @error('product_name')

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        <div class="col-md-6 mb-3">

                            <label class="form-label">Tax (percentage %)</label>

                            <input type="text" name="tax" value="{{ old('tax') }}" class="form-control"

                                placeholder="Enter tax percentage"

                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');">

                            @error('tax')

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        <div class="col-md-6 mb-3">

                            <label class="form-label">Display</label>

                            <select name="is_display" class="form-select">

                                <option value="1" {{ old('is_display', '1') == '1' ? 'selected' : '' }}>Yes</option>

                                <option value="0" {{ old('is_display', '1') == '0' ? 'selected' : '' }}>No</option>

                            </select>

                            @error('is_display')

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        <div class="col-12 mb-3">

                            <label class="form-label">Type</label>

                            <div class="d-flex flex-wrap gap-3">

                                @foreach ($types as $type)

                                <div class="form-check">

                                    <input class="form-check-input"

                                        type="checkbox"

                                        name="type[]"

                                        value="{{ $type->id }}"

                                        id="type{{ $type->id }}"

                                        {{ (collect(old('type'))->contains($type->id)) ? 'checked' : '' }}>

                                    <label class="form-check-label" for="type{{ $type->id }}">

                                        {{ $type->type }}

                                    </label>

                                </div>

                                @endforeach

                            </div>

                            @error('type')

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                    <div class="col-12 mb-3">

                        <label class="form-label">Description</label>

                        <textarea name="description" class="form-control" placeholder="Enter message">{{ old('description') }}</textarea>

                        @error('description')

                        <small class="text-danger">{{ $message }}</small>

                        @enderror

                    </div>

                    <div class="col-12 mb-3">

                        <div class="form-check mb-2">

                            <input class="form-check-input" type="checkbox" id="toggle_ingredients_nutrition" name="has_ingredients_nutrition" value="1"

                                {{ old('has_ingredients_nutrition') ? 'checked' : '' }}>

                            <label class="form-check-label fw-bold" for="toggle_ingredients_nutrition">

                                Ingredients & Nutrition

                            </label>

                        </div>

                        <div id="ingredients_nutrition_wrapper" style="display: {{ old('has_ingredients_nutrition') ? 'block' : 'none' }};">

                            <label class="form-label">Ingredients & Nutrition <span class="text-danger">*</span></label>

                            <textarea name="ingredients_nutrition" class="form-control @error('ingredients_nutrition') is-invalid @enderror" placeholder="Enter ingredients & nutrition details...">{{ old('ingredients_nutrition') }}</textarea>

                            @error('ingredients_nutrition')

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                    </div>

                    <div class="col-12 mb-3">

                        <div class="form-check mb-2">

                            <input class="form-check-input" type="checkbox" id="toggle_combo_products" name="has_combo_products" value="1"

                                {{ old('has_combo_products') ? 'checked' : '' }}>

                            <label class="form-check-label fw-bold" for="toggle_combo_products">

                                Add Product

                            </label>

                        </div>

                        <div id="combo_products_wrapper" style="display: {{ old('has_combo_products') ? 'block' : 'none' }};" class="p-3 border rounded bg-light">

                            <label class="form-label fw-bold mb-2">Included Products</label>

                            <div id="combo-repeater-container">

                                @php

                                    $comboRows = old('combo_items');

                                    if (!is_array($comboRows) || empty($comboRows)) {

                                        $comboRows = [['product_name' => '', 'quantity' => '', 'unit' => '']];

                                    }

                                @endphp

                                @foreach ($comboRows as $index => $row)

                                <div class="combo-item-row d-flex gap-2 mb-2 align-items-start">

                                    <div style="flex: 2;">

                                        <label class="form-label small mb-1">Product Name <span class="text-danger">*</span></label>

                                        <input type="text" name="combo_items[{{ $index }}][product_name]" 

                                            class="form-control @error("combo_items.$index.product_name") is-invalid @enderror" 

                                            placeholder="e.g. Laddu" value="{{ $row['product_name'] ?? '' }}">

                                        @error("combo_items.$index.product_name")

                                        <small class="text-danger d-block">{{ $message }}</small>

                                        @enderror

                                    </div>

                                    <div style="flex: 1;">

                                        <label class="form-label small mb-1">Quantity <span class="text-danger">*</span></label>

                                        <input type="text" name="combo_items[{{ $index }}][quantity]" 

                                            class="form-control @error("combo_items.$index.quantity") is-invalid @enderror" 

                                            placeholder="e.g. 10" value="{{ $row['quantity'] ?? '' }}"

                                            oninput="this.value = this.value.replace(/[^0-9.]/g, '');">

                                        @error("combo_items.$index.quantity")

                                        <small class="text-danger d-block">{{ $message }}</small>

                                        @enderror

                                    </div>

                                    <div style="flex: 1;">

                                        <label class="form-label small mb-1">Unit <span class="text-danger">*</span></label>

                                        <input type="text" name="combo_items[{{ $index }}][unit]" 

                                            class="form-control @error("combo_items.$index.unit") is-invalid @enderror" 

                                            placeholder="e.g. pcs or gm" value="{{ $row['unit'] ?? '' }}">

                                        @error("combo_items.$index.unit")

                                        <small class="text-danger d-block">{{ $message }}</small>

                                        @enderror

                                    </div>

                                    <div style="margin-top: 28px;">

                                        <button type="button" class="btn btn-outline-danger remove-combo-row" style="{{ count($comboRows) <= 1 ? 'display: none;' : '' }}">✕</button>

                                    </div>

                                </div>

                                @endforeach

                            </div>

                            @error('combo_items')

                            <small class="text-danger d-block mt-1">{{ $message }}</small>

                            @enderror

                            <div class="mt-2 text-end">

                                <button type="button" class="btn btn-sm btn-primary" id="add-combo-row-btn">＋ Add More</button>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <div class="col-lg-4">

                <label class="form-label">Product Images</label>

                @php

                $oldImages = old('old_images', isset($product) ? json_decode($product->product_image) : []);

                $newImagesBase64 = old('product_image', session('temp_images', []));

                $newFilenames = old('new_images_filenames', session('temp_filenames', []));

                @endphp

                <div class="upload-container" id="image-gallery">

                    {{-- OLD IMAGES --}}

                    @foreach ($oldImages as $oldImage)

                    <div class="image-preview-wrapper old-image" data-old="{{ $oldImage }}">

                        <img src="{{ asset('storage/' . $oldImage) }}"

                            style="width:70px;height:70px;object-fit:cover;margin:2px;">

                        <button type="button" class="remove-img-btn">✕</button>

                        <input type="hidden" name="old_images[]" value="{{ $oldImage }}">

                    </div>

                    @endforeach

                    {{-- NEW IMAGES --}}

                    @foreach ($newImagesBase64 as $i => $base64)

                    <div class="image-preview-wrapper new-image" data-index="{{ $i }}">

                        <img src="{{ $base64 }}"

                            style="width:70px;height:70px;object-fit:cover;margin:2px;">

                        <button type="button" class="remove-img-btn">✕</button>

                        <input type="hidden" name="product_image[]" value="{{ $base64 }}">

                        <input type="hidden" name="new_images_filenames[]"

                            value="{{ $newFilenames[$i] ?? '' }}">

                    </div>

                    @endforeach

                    {{-- ADD IMAGE BOX --}}

                    <div class="add-image-box" onclick="document.getElementById('file-input').click()">

                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"

                            xmlns="http://www.w3.org/2000/svg">

                            <path

                                d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"

                                stroke="#2F2B3D" stroke-opacity="0.9" stroke-width="1.5" stroke-linecap="round"

                                stroke-linejoin="round" />

                            <path d="M8 12H16" stroke="#2F2B3D" stroke-opacity="0.9" stroke-width="1.5"

                                stroke-linecap="round" stroke-linejoin="round" />

                            <path d="M12 16V8" stroke="#2F2B3D" stroke-opacity="0.9" stroke-width="1.5"

                                stroke-linecap="round" stroke-linejoin="round" />

                        </svg>

                        <span style="font-size:11px;">Add New</span>

                    </div>

                </div>

                @error('product_image')

                <small class="text-danger d-block mt-1">{{ $message }}</small>

                @enderror

                <input type="file" id="file-input" name="images[]" multiple hidden accept="image/*">

                <small class="text-muted d-block mt-2 text-center">(Max file size: 5 MB, PNG Jpg only)</small>

            </div>

            <hr class="my-5">

            <div class="unit-flex-container">

                <div id="unit-repeater-wrapper">

                    @php

                    $units = old('units', [[]]);

                    @endphp

                    @foreach ($units as $i => $unit)

                    <div class="unit-input-row">

                        <div class="col-val">

                            <label class="form-label">Unit Value</label>

                            <input type="text" name="units[{{ $i }}][value]"

                                class="form-control" value="{{ old("units.$i.value") }}"

                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');" placeholder="0.00">

                            @error("units.$i.value")

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        <div class="col-unit">

                            <label class="form-label">Unit</label>

                            <select name="units[{{ $i }}][unit]" class="form-select">

                                <option value="">Select</option>

                                <option value="gm" {{ old("units.$i.unit") == 'gm' ? 'selected' : '' }}>gm

                                </option>

                                <option value="kg" {{ old("units.$i.unit") == 'kg' ? 'selected' : '' }}>kg

                                </option>
                                <option value="piece" {{ old("units.$i.unit") == 'piece' ? 'selected' : '' }}>Piece

                                </option>

                                <option value="box" {{ old("units.$i.unit") == 'Box' ? 'selected' : '' }}>Box

                                </option>
                            </select>

                            @error("units.$i.unit")

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        <div class="col-mrp">

                            <label class="form-label">MRP</label>

                            <input type="text" name="units[{{ $i }}][mrp]"

                                class="form-control" value="{{ old("units.$i.mrp") }}"

                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');"

                                placeholder="₹0.00">

                            @error("units.$i.mrp")

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        <div class="col-price">

                            <label class="form-label">Price</label>

                            <input type="text" name="units[{{ $i }}][price]"

                                class="form-control" placeholder="₹0.00"

                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');"

                                value="{{ old("units.$i.price") }}">

                            @error("units.$i.price")

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>

                        <div class="col-stock">

                            <label class="form-label">Stock</label>

                            <input type="text" name="units[{{ $i }}][stock]"

                                class="form-control" placeholder="0"

                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');"

                                value="{{ old("units.$i.stock") }}">

                            @error("units.$i.stock")

                            <small class="text-danger">{{ $message }}</small>

                            @enderror

                        </div>



                    <div class="col-action">

                        <button type="button" class="btn-remove remove-row">✕ Remove</button>

                    </div>

                </div>

                @endforeach

            </div>

    </div>

    <div class="text-end mt-2">

        <button type="button" class="btn-add-more" id="add-row-btn">＋ Add More</button>

    </div>

    <div class="text-center border-top pt-4 mt-5">

        <button type="submit" id="submit_btn"

            class="btn btn-create btn-primary text-white me-2">Create</button>

        {{-- <button type="reset" class="btn btn-label-secondary px-5"

                            onclick="window.location.href='{{ route('products') }}'">

        Discard

        </button> --}}

        <button type="button" class="btn btn-label-secondary px-5"

            onclick="location.reload();">

            Discard

        </button>

    </div>

    </form>

</div>

</div>

</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {

        //    1. IMAGE UPLOAD + PREVIEW (SAFE)

        const fileInput = document.getElementById('file-input');

        const gallery = document.getElementById('image-gallery');

        let selectedFiles = [];

        fileInput.addEventListener('change', function() {

            Array.from(this.files).forEach(file => {

                const reader = new FileReader();

                reader.onload = function(e) {

                    const base64 = e.target.result;

                    selectedFiles.push({

                        file,

                        base64

                    });

                    const wrapper = document.createElement('div');

                    wrapper.className = 'image-preview-wrapper new-image';

                    wrapper.dataset.index = selectedFiles.length - 1;

                    wrapper.innerHTML = `

                    <img src="${base64}" >

                    <button type="button" class="remove-img-btn">✕</button>

                    <input type="hidden" name="product_image[]" value="${base64}">

                    <input type="hidden" name="new_images_filenames[]" value="${file.name}">

                `;

                    const addBox = gallery.querySelector('.add-image-box');

                    gallery.insertBefore(wrapper, addBox);

                };

                reader.readAsDataURL(file);

            });

        });

        gallery.addEventListener('click', function(e) {

            if (e.target.classList.contains('remove-img-btn')) {

                const wrapper = e.target.closest('.image-preview-wrapper');

                if (wrapper.classList.contains('old-image')) {

                    wrapper.remove();

                    const input = document.createElement('input');

                    input.type = 'hidden';

                    input.name = 'delete_old_images[]';

                    input.value = wrapper.dataset.old;

                    document.getElementById('productForm').appendChild(input);

                } else if (wrapper.classList.contains('new-image')) {

                    const index = wrapper.dataset.index;

                    selectedFiles.splice(index, 1);

                    wrapper.remove();

                }

            }

        });

        //    2. VARIANT REPEATER

        const wrapper = document.getElementById('unit-repeater-wrapper');

        const addBtn = document.getElementById('add-row-btn');

        addBtn.addEventListener('click', function() {

            let index = wrapper.querySelectorAll('.unit-input-row').length;

            const row = document.createElement('div');

            row.className = 'unit-input-row';

            row.innerHTML = `

            <div class="col-val">

                <label class="form-label">Unit Value</label>

                <input type="text"

                    name="units[${index}][value]"

                    class="form-control"

                    placeholder="0.00"

                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">

            </div>

            <div class="col-unit">

                <label class="form-label">Unit</label>

                <select name="units[${index}][unit]" class="form-select">

                    <option value="">Select</option>

                    <option value="gm">gm</option>

                    <option value="kg">kg</option>

                </select>

            </div>

            <div class="col-mrp">

                <label class="form-label">MRP</label>

                <input type="text"

                    name="units[${index}][mrp]"

                    class="form-control"

                    placeholder="₹0.00"

                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">

            </div>

            <div class="col-price">

                <label class="form-label">Price</label>

                <input type="text"

                    name="units[${index}][price]"

                    class="form-control"

                    placeholder="₹0.00"

                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">

            </div>

            <div class="col-stock">

                <label class="form-label">Stock</label>

                <input type="number"

                    name="units[${index}][stock]"

                    class="form-control"

                    placeholder="0"

                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">

            </div>



            <div class="col-action">

                <button type="button" class="btn-remove remove-row">✕ Remove</button>

            </div>

        `;

            wrapper.appendChild(row);

        });

        wrapper.addEventListener('click', function(e) {

            if (e.target.classList.contains('remove-row') && wrapper.children.length > 1) {

                e.target.closest('.unit-input-row').remove();

            }

        });

        //    3. PREVENT DOUBLE SUBMIT (BEST PRACTICE)

        const form = document.getElementById('productForm');

        const submitBtn = document.getElementById('submit_btn');

        form.addEventListener('submit', function() {

            submitBtn.disabled = true;

            submitBtn.innerText = 'Processing...';

            submitBtn.classList.add('opacity-75');

        });

        //    4. INGREDIENTS & NUTRITION TOGGLE
        const toggleIngredients = document.getElementById('toggle_ingredients_nutrition');
        const ingredientsWrapper = document.getElementById('ingredients_nutrition_wrapper');

        function syncIngredientsState() {
            if (!toggleIngredients || !ingredientsWrapper) return;
            const isChecked = toggleIngredients.checked;
            ingredientsWrapper.style.display = isChecked ? 'block' : 'none';
            const textarea = ingredientsWrapper.querySelector('textarea');
            if (textarea) {
                textarea.disabled = !isChecked;
            }
        }

        if (toggleIngredients && ingredientsWrapper) {
            toggleIngredients.addEventListener('change', syncIngredientsState);
            syncIngredientsState();
        }

        //    5. ADD PRODUCT (COMBO ITEMS) TOGGLE & REPEATER
        const toggleCombo = document.getElementById('toggle_combo_products');
        const comboWrapper = document.getElementById('combo_products_wrapper');
        const comboContainer = document.getElementById('combo-repeater-container');
        const addComboBtn = document.getElementById('add-combo-row-btn');

        function syncComboState() {
            if (!toggleCombo || !comboWrapper) return;
            const isChecked = toggleCombo.checked;
            comboWrapper.style.display = isChecked ? 'block' : 'none';
            const inputs = comboWrapper.querySelectorAll('input, select, textarea');
            inputs.forEach(input => {
                input.disabled = !isChecked;
            });
        }

        function updateComboRemoveButtons() {
            if (!comboContainer) return;
            const rows = comboContainer.querySelectorAll('.combo-item-row');
            rows.forEach(row => {
                const btn = row.querySelector('.remove-combo-row');
                if (btn) {
                    btn.style.display = rows.length > 1 ? 'inline-block' : 'none';
                }
            });
        }

        if (toggleCombo && comboWrapper) {
            toggleCombo.addEventListener('change', syncComboState);
            syncComboState();
        }

        if (addComboBtn && comboContainer) {
            addComboBtn.addEventListener('click', function() {
                const index = comboContainer.querySelectorAll('.combo-item-row').length;
                const newRow = document.createElement('div');
                newRow.className = 'combo-item-row d-flex gap-2 mb-2 align-items-start';
                newRow.innerHTML = `
                    <div style="flex: 2;">
                        <label class="form-label small mb-1">Product Name <span class="text-danger">*</span></label>
                        <input type="text" name="combo_items[\${index}][product_name]" class="form-control" placeholder="e.g. Laddu">
                    </div>
                    <div style="flex: 1;">
                        <label class="form-label small mb-1">Quantity <span class="text-danger">*</span></label>
                        <input type="text" name="combo_items[\${index}][quantity]" class="form-control" placeholder="e.g. 10" oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                    </div>
                    <div style="flex: 1;">
                        <label class="form-label small mb-1">Unit <span class="text-danger">*</span></label>
                        <input type="text" name="combo_items[\${index}][unit]" class="form-control" placeholder="e.g. pcs or gm">
                    </div>
                    <div style="margin-top: 28px;">
                        <button type="button" class="btn btn-outline-danger remove-combo-row">✕</button>
                    </div>
                `;
                if (toggleCombo) {
                    newRow.querySelectorAll('input').forEach(inp => {
                        inp.disabled = !toggleCombo.checked;
                    });
                }
                comboContainer.appendChild(newRow);
                updateComboRemoveButtons();
            });

            comboContainer.addEventListener('click', function(e) {
                if (e.target.classList.contains('remove-combo-row')) {
                    const rows = comboContainer.querySelectorAll('.combo-item-row');
                    if (rows.length > 1) {
                        e.target.closest('.combo-item-row').remove();
                        comboContainer.querySelectorAll('.combo-item-row').forEach((row, i) => {
                            const nameInput = row.querySelector('input[name*="[product_name]"]');
                            const qtyInput = row.querySelector('input[name*="[quantity]"]');
                            const unitInput = row.querySelector('input[name*="[unit]"]');
                            if (nameInput) nameInput.name = `combo_items[\${i}][product_name]`;
                            if (qtyInput) qtyInput.name = `combo_items[\${i}][quantity]`;
                            if (unitInput) unitInput.name = `combo_items[\${i}][unit]`;
                        });
                        updateComboRemoveButtons();
                    }
                }
            });
        }

    });
</script>

@endsection