@php($isEdit = isset($order) && isset($order->id))
<div class="project-box">
    <h3>
        Product Details
        @if($canEdit)
        <button type="button" class="btn btn-sm green-btn-inner-short float-end" id="btnAddProduct">
            <i class="mdi mdi-plus"></i> Add Product
        </button>
        @endif
    </h3>
    <div class="row mt-4">
        <div class="col-12">
            <div id="productRowsContainer">
                {{-- Product rows will be dynamically added here by JS --}}
            </div>
            @error('products')<small class="text-danger d-block mb-2">{{ $message }}</small>@enderror
            @error('products.*.product_name')<small class="text-danger d-block mb-2">{{ $message }}</small>@enderror
        </div>
    </div>
</div>

{{-- Product Row Template (hidden) --}}
<template id="productRowTemplate">
    <div class="product-row border rounded p-3 mb-3" data-index="__INDEX__">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-12 mb-3">
                <div class="project-form w-100 mb-0">
                    <label>Product Name <sup class="text-danger">*</sup></label>
                    <input type="text" class="form-control" data-name="products[__INDEX__][product_name]" placeholder="Enter product name" required>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-6 mb-3">
                <div class="project-form w-100 mb-0">
                    <label>SKU</label>
                    <input type="text" class="form-control" data-name="products[__INDEX__][sku]" placeholder="SKU">
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-6 mb-3">
                <div class="project-form w-100 mb-0">
                    <label>Model</label>
                    <input type="text" class="form-control" data-name="products[__INDEX__][model]" placeholder="Model">
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-6 mb-3">
                <div class="project-form w-100 mb-0">
                    <label>Software Version</label>
                    <input type="text" class="form-control" data-name="products[__INDEX__][software_version]" placeholder="Version">
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-6 mb-3">
                <div class="project-form w-100 mb-0">
                    <label>Accessories</label>
                    <input type="text" class="form-control" data-name="products[__INDEX__][accessories]" placeholder="Comma-separated accessories">
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-12 mb-3 d-flex align-items-end">
                <button type="button" class="btn btn-danger btn-sm remove-product-row w-100">
                    <i class="mdi mdi-trash-can"></i> Remove
                </button>
            </div>
        </div>
    </div>
</template>