@if(!empty($product))
    <div class="modal-content" id="editProduct">
    <form action="{{ route('products.update', $product->id) }}" method="POST" enctype="multipart/form-data">
@else
    <div class="modal-content" id="addProduct">
    <form action="{{ url('/Backoffice/products') }}" method="POST" enctype="multipart/form-data">
@endif
    @csrf
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">@if(!empty($product)) {{ __('Edit Product') }} @else {{ __('Create Product') }} @endif</h4>
    </div>
    <div class="modal-body">
        <div class="row">
            {{-- Core Product Information --}}
            <div class="col-sm-6">
                <div class="form-group row">
                    <label for="product_code" class="col-sm-3 text-right">{{ __('Product Code') }} *</label>
                    <div class="col-sm-9">
                        <input type="text" name="product_code" id="product_code" class="form-control" required value="{{ old('product_code', $product->product_code ?? '') }}">
                        @error('product_code')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="form-group row">
                    <label for="product_name" class="col-sm-3 text-right">{{ __('Product Name') }} *</label>
                    <div class="col-sm-9">
                        <input type="text" name="product_name" id="product_name" class="form-control" required value="{{ old('product_name', $product->product_name ?? '') }}">
                        @error('product_name')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="form-group row">
                    <label for="product_status" class="col-sm-3 text-right">{{ __('Status') }}</label>
                    <div class="col-sm-9">
                        <select name="product_status" id="product_status" class="form-control">
                            <option value="active" {{ old('product_status', $product->product_status ?? '') == 'active' ? 'selected' : '' }}>{{ __('Active') }}</option>
                            <option value="inactive" {{ old('product_status', $product->product_status ?? '') == 'inactive' ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="product_type" class="col-sm-3 text-right">{{ __('Product Type') }}</label>
                    <div class="col-sm-9">
                        <select name="product_type" id="product_type" class="form-control">
                            <option value="packaged_water" {{ old('product_type', $product->product_type ?? 'packaged_water') == 'packaged_water' ? 'selected' : '' }}>Packaged Water</option>
                            <option value="refill_water" {{ old('product_type', $product->product_type ?? '') == 'refill_water' ? 'selected' : '' }}>Refill Water</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group row">
                    <label for="product_description" class="col-sm-3 text-right">{{ __('Description') }}</label>
                    <div class="col-sm-9">
                        <textarea name="product_description" id="product_description" class="form-control" rows="4">{{ old('product_description', $product->product_description ?? '') }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <hr>

        {{-- Variant Toggle --}}
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group text-center">
                    <label style="cursor: pointer; font-size: 1.1em;">
                        <input type="checkbox" id="has_variants_toggle" name="has_variants" value="1"
                               {{ (!empty($product) && $product->variants && $product->variants->count() > 0) ? 'checked' : '' }}>
                        &nbsp;<strong>{{ __('This product has variants') }}</strong>
                        <small class="text-muted">(Sizes, Packs, etc.)</small>
                    </label>
                </div>
            </div>
        </div>

        {{-- Simple Product Fields (Hidden when variants enabled) --}}
        <div id="simple_product_section" style="{{ (!empty($product) && $product->variants && $product->variants->count() > 0) ? 'display:none;' : '' }}">
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group row">
                        <label for="product_price" class="col-sm-3 text-right">{{ __('Price') }}</label>
                        <div class="col-sm-9">
                            <input type="number" name="product_price" id="product_price" step="0.01" class="form-control" value="{{ old('product_price', $product->product_price ?? '') }}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="product_quantity" class="col-sm-3 text-right">{{ __('Quantity') }}</label>
                        <div class="col-sm-9">
                            <input type="number" name="product_quantity" id="product_quantity" class="form-control" value="{{ old('product_quantity', $product->product_quantity ?? '') }}">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group row">
                        <label for="product_unit" class="col-sm-3 text-right">{{ __('Unit') }}</label>
                        <div class="col-sm-9">
                            <input type="text" name="product_unit" id="product_unit" class="form-control" placeholder="e.g. piece, kg" value="{{ old('product_unit', $product->product_unit ?? '') }}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="product_pcs_ctn" class="col-sm-3 text-right">{{ __('Pcs/Ctn') }}</label>
                        <div class="col-sm-9">
                            <input type="number" name="product_pcs_ctn" id="product_pcs_ctn" class="form-control" value="{{ old('product_pcs_ctn', $product->product_pcs_ctn ?? '') }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Variant Table (Shown when variants enabled) --}}
        <div id="variants_section" style="{{ (!empty($product) && $product->variants && $product->variants->count() > 0) ? '' : 'display:none;' }}">
            <div class="box box-solid box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ __('Product Variants') }}</h3>
                </div>
                <div class="box-body no-padding">
                    <div id="packaged_water_hint" style="display:none; padding: 10px 15px; background-color: #e8f4fd; border-left: 4px solid #3c8dbc; margin-bottom: 0px; font-size: 13px;">
                        <strong><i class="fa fa-lightbulb-o text-primary"></i> Pro-Tip:</strong> You only need to create <strong>ONE</strong> variant per size (e.g. "1L", "500ml"). To sell it as both singles and packs, simply choose <strong>"Per Pack"</strong> under "Sell As" and enter the pack details. The POS will automatically let you sell both from the exact same stock pool!
                    </div>
                    <table class="table table-bordered table-striped" id="variants_table">
                        <thead>
                            <tr class="bg-gray">
                                <th>Variant Name / Size</th>
                                <th>Bottle Price (KES)</th>
                                <th>Quantity</th>
                                <th id="selling_unit_header" style="display:none;">Sell As</th>
                                <th id="pack_fields_header" style="display:none;">Pack Size</th>
                                <th id="pack_price_header" style="display:none;">Pack Price (KES)</th>
                                <th style="width:40px;"></th>
                            </tr>
                        </thead>
                        <tbody id="variants_body">
                            @if(!empty($product) && $product->variants && $product->variants->count() > 0)
                                @foreach($product->variants as $i => $variant)
                                    <tr class="variant-row">
                                        <td>
                                            <input type="text" name="variants[{{ $i }}][variant_name]" class="form-control input-sm" placeholder="e.g. 500ml" value="{{ $variant->variant_name }}" required>
                                        </td>
                                        <td>
                                            <input type="number" name="variants[{{ $i }}][variant_price]" class="form-control input-sm" placeholder="0.00" step="0.01" min="0" value="{{ $variant->variant_price }}" required>
                                        </td>
                                        <td>
                                            <input type="number" name="variants[{{ $i }}][variant_quantity]" class="form-control input-sm" placeholder="0" min="0" value="{{ $variant->variant_quantity }}">
                                        </td>
                                        <td class="variant-selling-unit-col" style="display:none;">
                                            <select name="variants[{{ $i }}][selling_unit]" class="form-control input-sm selling-unit-select">
                                                <option value="unit" {{ $variant->selling_unit == 'unit' ? 'selected' : '' }}>Unit</option>
                                                <option value="bottle" {{ $variant->selling_unit == 'bottle' ? 'selected' : '' }}>Per Bottle</option>
                                                <option value="pack" {{ $variant->selling_unit == 'pack' ? 'selected' : '' }}>Per Pack</option>
                                            </select>
                                        </td>
                                        <td class="variant-pack-size-col" style="display:none;">
                                            <input type="number" name="variants[{{ $i }}][pack_size]" class="form-control input-sm" placeholder="24" min="1" value="{{ $variant->pack_size }}">
                                        </td>
                                        <td class="variant-pack-price-col" style="display:none;">
                                            <input type="number" name="variants[{{ $i }}][pack_price]" class="form-control input-sm" placeholder="0.00" step="0.01" min="0" value="{{ $variant->pack_price }}">
                                        </td>
                                        <td class="text-center">
                                            <button type="button" class="btn btn-danger btn-xs remove-variant-row">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr class="variant-row">
                                    <td>
                                        <input type="text" name="variants[0][variant_name]" class="form-control input-sm" placeholder="e.g. 500ml">
                                    </td>
                                    <td>
                                        <input type="number" name="variants[0][variant_price]" class="form-control input-sm" placeholder="0.00" step="0.01" min="0">
                                    </td>
                                    <td>
                                        <input type="number" name="variants[0][variant_quantity]" class="form-control input-sm" placeholder="0" min="0">
                                    </td>
                                    <td class="variant-selling-unit-col" style="display:none;">
                                        <select name="variants[0][selling_unit]" class="form-control input-sm selling-unit-select">
                                            <option value="unit">Unit</option>
                                            <option value="bottle">Per Bottle</option>
                                            <option value="pack">Per Pack</option>
                                        </select>
                                    </td>
                                    <td class="variant-pack-size-col" style="display:none;">
                                        <input type="number" name="variants[0][pack_size]" class="form-control input-sm" placeholder="24" min="1">
                                    </td>
                                    <td class="variant-pack-price-col" style="display:none;">
                                        <input type="number" name="variants[0][pack_price]" class="form-control input-sm" placeholder="0.00" step="0.01" min="0">
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-danger btn-xs remove-variant-row">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-default btn-sm" id="add_variant_row">
                        <i class="fa fa-plus"></i> {{ __('Add Another Variant') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-success">{{ __('Submit') }}</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('Close') }}</button>
    </div>
    <input type="hidden" name="commission_type" value="amount">
    <input type="hidden" name="commission_value" value="0">
    </form>
</div>

<script>
(function () {
    var toggle = document.getElementById('has_variants_toggle');
    var variantSection = document.getElementById('variants_section');
    var simpleSection = document.getElementById('simple_product_section');
    var productTypeSelect = document.getElementById('product_type');

    // Show/hide dual-unit columns when product_type = packaged_water
    function togglePackagedWaterCols() {
        var isPackaged = productTypeSelect && productTypeSelect.value === 'packaged_water';
        var show = isPackaged ? '' : 'none';
        document.querySelectorAll('.variant-selling-unit-col, .variant-pack-size-col, .variant-pack-price-col').forEach(function(el){
            el.style.display = show;
        });
        var hint = document.getElementById('packaged_water_hint');
        if (hint) hint.style.display = show;
        var sellingHeader = document.getElementById('selling_unit_header');
        var packSizeHeader = document.getElementById('pack_fields_header');
        var packPriceHeader = document.getElementById('pack_price_header');
        if (sellingHeader) sellingHeader.style.display = show;
        if (packSizeHeader) packSizeHeader.style.display = show;
        if (packPriceHeader) packPriceHeader.style.display = show;
    }

    if (productTypeSelect) {
        productTypeSelect.addEventListener('change', togglePackagedWaterCols);
        togglePackagedWaterCols(); // initial run
    }

    if (toggle) {
        toggle.addEventListener('change', function () {
            if (this.checked) {
                variantSection.style.display = '';
                simpleSection.style.display = 'none';
                variantSection.querySelectorAll('input, select, textarea').forEach(function(el){ el.disabled = false; });
                simpleSection.querySelectorAll('input, select, textarea').forEach(function(el){ el.disabled = true; });
            } else {
                variantSection.style.display = 'none';
                simpleSection.style.display = '';
                variantSection.querySelectorAll('input, select, textarea').forEach(function(el){ el.disabled = true; el.required = false; });
                simpleSection.querySelectorAll('input, select, textarea').forEach(function(el){ el.disabled = false; });
            }
        });
        toggle.dispatchEvent(new Event('change'));
    }

    var addBtn = document.getElementById('add_variant_row');
    if (addBtn) {
        addBtn.addEventListener('click', function () {
            var tbody = document.getElementById('variants_body');
            var idx = tbody.querySelectorAll('.variant-row').length;
            var isPackaged = productTypeSelect && productTypeSelect.value === 'packaged_water';
            var packCols = isPackaged ? '' : 'none';
            var row = document.createElement('tr');
            row.className = 'variant-row';
            row.innerHTML =
                '<td><input type="text" name="variants[' + idx + '][variant_name]" class="form-control input-sm" placeholder="e.g. 500ml" required></td>' +
                '<td><input type="number" name="variants[' + idx + '][variant_price]" class="form-control input-sm" placeholder="0.00" step="0.01" min="0" required></td>' +
                '<td><input type="number" name="variants[' + idx + '][variant_quantity]" class="form-control input-sm" placeholder="0" min="0"></td>' +
                '<td class="variant-selling-unit-col" style="display:' + packCols + ';">' +
                    '<select name="variants[' + idx + '][selling_unit]" class="form-control input-sm selling-unit-select">' +
                        '<option value="unit">Unit</option><option value="bottle">Per Bottle</option><option value="pack">Per Pack</option>' +
                    '</select>' +
                '</td>' +
                '<td class="variant-pack-size-col" style="display:' + packCols + ';">' +
                    '<input type="number" name="variants[' + idx + '][pack_size]" class="form-control input-sm" placeholder="24" min="1">' +
                '</td>' +
                '<td class="variant-pack-price-col" style="display:' + packCols + ';">' +
                    '<input type="number" name="variants[' + idx + '][pack_price]" class="form-control input-sm" placeholder="0.00" step="0.01" min="0">' +
                '</td>' +
                '<td class="text-center"><button type="button" class="btn btn-danger btn-xs remove-variant-row"><i class="fa fa-trash"></i></button></td>';
            tbody.appendChild(row);
            attachRemoveHandlers();
        });
    }

    function attachRemoveHandlers() {
        document.querySelectorAll('.remove-variant-row').forEach(function (btn) {
            btn.onclick = function () {
                var rows = document.querySelectorAll('#variants_body .variant-row');
                if (rows.length > 1) {
                    btn.closest('tr').remove();
                    reindexRows();
                } else {
                    rows[0].querySelectorAll('input').forEach(function (inp) { inp.value = ''; });
                }
            };
        });
    }

    function reindexRows() {
        document.querySelectorAll('#variants_body .variant-row').forEach(function (row, i) {
            row.querySelectorAll('input, select').forEach(function (inp) {
                inp.name = inp.name.replace(/variants\[\d+\]/, 'variants[' + i + ']');
            });
        });
    }

    attachRemoveHandlers();
})();
</script>