@extends('Admin.layout')
@section('content')
<style>
    /* --- Labels and Inputs --- */
    .form-label {
        font-weight: 500;
        color: #4b5563;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .form-control,
    .form-select {
        border-radius: 6px;
        border: 1px solid #d1d5db;
        padding: 0.6rem 0.8rem;
        font-size: 14px;
    }

    textarea.form-control {
        height: 90px;
        resize: none;
    }

    /* --- Image Upload --- */
    .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;
        bottom: 30px;
        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;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 15px;
        width: 100%;
        align-items: flex-start;
    }

    .col-val,
    .col-unit,
    .col-mrp,
    .col-price,
    .col-stock,
    .col-display,
    .col-action {
        display: flex;
        flex-direction: column;
    }

    .col-val {
        flex: 1.5;
    }

    .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;
        align-items: center;
        justify-content: flex-end;
        margin-top: 0;
    }

    .col-action .btn-remove {
        margin-top: 24px;
    }

    /* --- 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-update {
        background-color: #0056b3;
        padding: 10px 50px;
        border: none;
    }

    .btn-discard {
        background-color: #e5e7eb;
        color: #374151;
        padding: 10px 50px;
        text-decoration: none;
        border-radius: 6px;
    }

    @media (max-width: 1200px) {
        .unit-input-row {
            flex-direction: column;
            gap: 10px;
        }

        .unit-input-row .col-val,
        .unit-input-row .col-unit,
        .unit-input-row .col-mrp,
        .unit-input-row .col-price,
        .unit-input-row .col-stock,
        .unit-input-row .col-display,
        .unit-input-row .col-action {
            flex: 1 1 100%;
            min-width: 100%;
        }

        .col-action {
            justify-content: flex-start;
            align-items: flex-start;
        }
    }
</style>
<div class="container-xxl container-p-y">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold mb-0">Edit Product</h4>
        <a href="{{ route('products') }}" class="btn btn-outline-secondary btn-sm">Back to List</a>
    </div>
    <div class="card p-4 shadow-sm border-0">
        <form action="{{ route('edit_product_form') }}" id="productForm" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="id" value="{{ $products->id }}">
            <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">
                                @foreach ($categories as $category)
                                <option value="{{ $category->id }}"
                                    {{ old('category_id', $products->category_id) == $category->id ? 'selected' : '' }}>
                                    {{ $category->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" class="form-control"
                                value="{{ old('product_name', $products->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', $products->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', $products->is_display ?? 1) == 1 ? 'selected' : '' }}>Yes</option>
                                <option value="0" {{ old('is_display', $products->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 }}"
                                        {{ is_array(old('type', $products->type_id)) && in_array($type->id, old('type', $products->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">{{ old('description', $products->description ?? '') }}</textarea>
                            @error('description')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        @php
                            $isSubmitted = old('_token') !== null;
                            $isIngredientsChecked = $isSubmitted 
                                ? (bool) old('has_ingredients_nutrition') 
                                : !empty($products->ingredients_nutrition);

                            $rawCombo = $products->combo_items ?? [];
                            if (is_string($rawCombo)) {
                                $rawCombo = json_decode($rawCombo, true) ?: [];
                            }
                            $isComboChecked = $isSubmitted 
                                ? (bool) old('has_combo_products') 
                                : !empty($rawCombo);

                            $comboRows = old('combo_items');
                            if (!is_array($comboRows)) {
                                $comboRows = !empty($rawCombo) ? $rawCombo : [['product_name' => '', 'quantity' => '', 'unit' => '']];
                            }
                            if (empty($comboRows)) {
                                $comboRows = [['product_name' => '', 'quantity' => '', 'unit' => '']];
                            }
                        @endphp

                        <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"
                                    {{ $isIngredientsChecked ? 'checked' : '' }}>
                                <label class="form-check-label fw-bold" for="toggle_ingredients_nutrition">
                                    Ingredients & Nutrition
                                </label>
                            </div>
                            <div id="ingredients_nutrition_wrapper" style="display: {{ $isIngredientsChecked ? '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', $products->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"
                                    {{ $isComboChecked ? 'checked' : '' }}>
                                <label class="form-check-label fw-bold" for="toggle_combo_products">
                                    Add Product
                                </label>
                            </div>
                            <div id="combo_products_wrapper" style="display: {{ $isComboChecked ? '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">
                                    @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">
                    <div class="row g-2">
                        <label class="form-label">Product Images</label>
                        <div class="upload-container" id="image-gallery">
                            @php
                            $oldImages = old('old_images', []);
                            if (empty($oldImages) && !empty($products->product_image)) {
                            $decoded = json_decode($products->product_image, true);
                            if (is_array($decoded)) {
                            $oldImages = $decoded;
                            }
                            }
                            $newImagesBase64 = old('product_image', []);
                            $newFilenames = old('new_images_filenames', []);
                            @endphp
                            {{-- Old Images --}}
                            @foreach ($oldImages as $oldImage)
                            <div class="image-preview-wrapper old-image" data-old="{{ $oldImage }}">
                                <img src="{{ asset('storage/' . $oldImage) }}">
                                <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 }}">
                                <button type="button" class="remove-img-btn">✕</button>
                                <input type="hidden" name="new_images_base64[]" value="{{ $base64 }}">
                                <input type="hidden" name="new_images_filenames[]"
                                    value="{{ $newFilenames[$i] ?? '' }}">
                            </div>
                            @endforeach
                            {{-- Add 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="currentColor" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M8 12H16M12 16V8" stroke="currentColor" stroke-width="1.5"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span style="font-size: 11px;">Add New</span>
                            </div>
                        </div>
                        <input type="file" id="file-input" multiple hidden accept="image/*">
                        <small class="text-muted d-block mt-2 text-center">(Max file size: 5 MB, PNG/Jpg only)</small>
                    </div>
                </div>
            </div>
            <hr class="my-5">
            <div class="unit-flex-container">
                <h6 class="mb-3 fw-bold">Pricing & Inventory</h6>
                @php
                $variants = old('units', $products->variants->toArray() ?? []);
                @endphp
                <div id="unit-repeater-wrapper">
                    @foreach ($variants as $index => $variant)
                    @php
                    $variant = is_array($variant) ? $variant : (array) $variant;
                    @endphp
                    <div class="unit-input-row">
                        <input type="hidden" name="units[{{ $index }}][id]"
                            value="{{ $variant['id'] ?? '' }}">
                        <div class="col-val">
                            <label class="form-label">Unit Value</label>
                            <input type="text" name="units[{{ $index }}][value]"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');" class="form-control"
                                value="{{ old("units.$index.value", $variant['unit_value'] ?? '') }}">
                            @error("units.$index.value")
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-unit">
                            <label class="form-label">Unit</label>
                            <select name="units[{{ $index }}][unit]" class="form-select">
                                <option value="gm"
                                    {{ old("units.$index.unit", $variant['unit'] ?? '') == 'gm' ? 'selected' : '' }}>
                                    gm</option>
                                <option value="kg"
                                    {{ old("units.$index.unit", $variant['unit'] ?? '') == 'kg' ? 'selected' : '' }}>
                                    kg</option>
                                    <option value="box"
                                    {{ old("units.$index.unit", $variant['unit'] ?? '') == 'box' ? 'selected' : '' }}>
                                    box</option>
                                      <option value="piece"
                                    {{ old("units.$index.unit", $variant['unit'] ?? '') == 'piece' ? 'selected' : '' }}>
                                    Piece</option>
                            </select>
                            @error("units.$index.unit")
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-mrp">
                            <label class="form-label">MRP</label>
                            <input type="text" name="units[{{ $index }}][mrp]"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');" class="form-control"
                                value="{{ old("units.$index.mrp", $variant['mrp'] ?? '') }}">
                            @error("units.$index.mrp")
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-price">
                            <label class="form-label">Price</label>
                            <input type="text" name="units[{{ $index }}][price]"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');" class="form-control"
                                value="{{ old("units.$index.price", $variant['selling_price'] ?? '') }}">
                            @error("units.$index.price")
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-stock">
                            <label class="form-label">Stock</label>
                            <input type="text" name="units[{{ $index }}][stock]"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');" class="form-control"
                                value="{{ old("units.$index.stock", $variant['stock'] ?? '') }}">
                            @error("units.$index.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-update btn-primary text-white me-2">Update</button>
        <a href="#" class="btn btn-discard">Discard</a>
    </div>
    </form>
</div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // --- 1. Image Upload & Preview ---
        const gallery = document.getElementById('image-gallery');
        const fileInput = document.getElementById('file-input');
        fileInput.addEventListener('change', function(e) {
            const files = e.target.files;
            Array.from(files).forEach(file => {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const wrapper = document.createElement('div');
                    wrapper.className = 'image-preview-wrapper new-image';
                    wrapper.innerHTML = `
                    <img src="${event.target.result}" alt="Product Image">
                    <input type="hidden" name="new_images_base64[]" value="${event.target.result}">
                    <input type="hidden" name="new_images_filenames[]" value="${file.name}">
                    <button type="button" class="remove-img-btn">✕</button>
                `;
                    gallery.insertBefore(wrapper, gallery.querySelector('.add-image-box'));
                }
                reader.readAsDataURL(file);
            });
            fileInput.value = '';
        });
        gallery.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-img-btn')) {
                e.target.closest('.image-preview-wrapper').remove();
            }
        });
        // --- 2. Variant Row Repeater ---
        const wrapper = document.getElementById('unit-repeater-wrapper');
        const addBtn = document.getElementById('add-row-btn');
        addBtn.addEventListener('click', function() {
            const rows = wrapper.querySelectorAll('.unit-input-row');
            let newIndex = rows.length;
            const row = document.createElement('div');
            row.className = 'unit-input-row';
            row.innerHTML = `
                    <input type="hidden" name="units[${newIndex}][id]" value="">
            <div class="col-val">
                <label class="form-label">Unit Value</label>
                <input type="number" name="units[${newIndex}][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[${newIndex}][unit]" class="form-select">
                    <option value="">Select</option>
                    <option value="gm">gm</option>
                    <option value="kg">kg</option>
                    <option value="box">box</option>
                    <option value="piece">Piece</option>
                </select>
            </div>
            <div class="col-mrp">
                <label class="form-label">MRP</label>
                <input type="text" name="units[${newIndex}][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[${newIndex}][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[${newIndex}][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);
        });
        // Remove Variant Row
        wrapper.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-row')) {
                const rows = wrapper.querySelectorAll('.unit-input-row');
                if (rows.length > 1) {
                    e.target.closest('.unit-input-row').remove();
                } else {
                    alert("At least one variation is required.");
                }
            }
        });
        //    3. PREVENT DOUBLE SUBMIT (BEST PRACTICE)
        const form = document.getElementById('productForm');
        const submitBtn = document.getElementById('submit_btn');
        form.addEventListener('submit', function() {
            wrapper.querySelectorAll('.unit-input-row').forEach((row, index) => {
                row.querySelectorAll('input, select').forEach(input => {
                    if (input.name) {
                        input.name = input.name.replace(/\[\d+\]/, `[${index}]`);
                    }
                });
            });

            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