@extends('admin.layouts.master')
@section('title', 'Add Product')
@section('content')

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <form class="form-horizontal" action="{{ route('admin.product.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="col-lg-12 mt-3">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card card-outline card-primary">
                                <div class="card-body">
                                    <div class="row mb-3">
                                        <div class="col-lg-6">
                                            <label for="name" class="form-label"><b>Product Name <span
                                                        class="text-danger">*</span> </b></label>
                                            <input type="text" class="form-control form-control-sm" id="name" name="name"
                                                value="{{ old('name') }}" placeholder="Enter Product Name Here" required>
                                            @if ($errors->has('name'))
                                            <p class="text-danger"> {{ $errors->first('name') }} </p>
                                            @endif
                                        </div>
                                        <div class="col-lg-6">
                                            <label for="slug" class="form-label"><b>Slug <span
                                                        class="text-danger">*</span> </b></label>
                                            <input type="text" class="form-control form-control-sm" id="slug" name="slug"
                                                value="{{ old('slug') }}" placeholder="Enter Product Name Here" required>
                                            @if ($errors->has('slug'))
                                            <p class="text-danger"> {{ $errors->first('slug') }} </p>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="weight" class="form-label"><b>Weight(gm) </b></label>
                                                <input type="number" class="form-control" id="weight" name="weight"
                                                    value="{{ old('weight') }}" placeholder="Enter Product Weight">
                                                @if ($errors->has('weight'))
                                                <p class="text-danger"> {{ $errors->first('weight') }} </p>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>Size (ML)</label>
                                                <input type="text" name="size" class="form-control" value="{{ old('size', $product->size ?? '') }}" placeholder="Enter Size (ML)">
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>Sale Unit</label>
                                                    <input type="text" name="sale_unit" class="form-control" value="{{ old('sale_unit', $product->sale_unit ?? '') }}" placeholder="Enter Sale Unit">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label>RRP (Restricted Retail Price) </label>
                                                    <input type="number" name="rrp" step="0.01" class="form-control" value="{{ old('rrp', $product->rrp ?? '') }}" placeholder="Enter Restricted Retail Price">
                                                </div>
                                            </div>
                                        </div>

                                        <!-- <div class="col-lg-6 mb-3">
                                                <label for="unit" class="form-label"><b>Select Unit <span
                                                            class="text-danger">*</span> </b></label>
                                                <select class="form-select" name="unit_id" aria-label="Select Unit" id="unit" required
                                                    data-choices data-choices-search-false>
                                                    <option selected value="">Select Unit </option>
                                                    @foreach ($units as $unit)
                                                        <option
                                                            value="{{ $unit->id }}"{{ old('unit_id') == $unit->id ? 'selected' : '' }}>
                                                            {{ ucwords($unit->name) }}</option>
                                                    @endforeach
                                                </select>
                                                @if ($errors->has('unit'))
                                                    <p class="text-danger"> {{ $errors->first('unit') }} </p>
                                                @endif
                                            </div> -->

                                        <div class="col-lg-4 col-sm-6">
                                            <div class="mb-3">
                                                <label for="quantity" class="form-label"><b>Product Quantity <span
                                                            class="text-danger">*</span> </b></label>
                                                <input type="number" class="form-control" id="quantity" name="quantity"
                                                    value="{{ old('quantity') }}" placeholder="Enter Product Quantity" required>
                                                @if ($errors->has('quantity'))
                                                <p class="text-danger"> {{ $errors->first('quantity') }} </p>
                                                @endif
                                            </div>
                                        </div>


                                        <div class="col-lg-4 col-sm-6">
                                            <div class="mb-3">
                                                <label for="threshold" class="form-label"><b>Threshold <span
                                                            class="text-danger">*</span> </b></label>
                                                <input type="number" class="form-control" id="threshold" name="threshold"
                                                    value="{{ old('threshold') }}" placeholder="Enter Threshold" required>
                                                @if ($errors->has('threshold'))
                                                <p class="text-danger"> {{ $errors->first('threshold') }} </p>
                                                @endif
                                            </div>
                                        </div>


                                        <div class="col-lg-4">
                                            <div class="mb-3">
                                                <label for="sku" class="form-label"><b>Product SKU<span
                                                            class="text-danger">*</span> </b></label>
                                                <input type="text" class="form-control" id="sku" name="sku"
                                                    value="{{ old('sku') }}" placeholder="Enter Product SKU" required>
                                                @if ($errors->has('sku'))
                                                <p class="text-danger"> {{ $errors->first('sku') }} </p>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-lg-3">
                                            <label for="cost_price" class="form-label"><b>Cost Price </b></label>
                                            <input step="any" type="number" class="form-control" name="cost_price" id="cost_price"
                                                value="{{ old('cost_price') }}" placeholder="Enter Cost Price">
                                            @if ($errors->has('cost_price'))
                                            <p class="text-danger"> {{ $errors->first('cost_price') }} </p>
                                            @endif
                                        </div>
                                        <div class="col-lg-3">
                                            <label for="sale_price" class="form-label"><b>Sale Price <span class="text-danger">*</span> </b></label>
                                            <input step="any" type="number" class="form-control" id="sale_price" name="unit_price"
                                                value="{{ old('unit_price') }}" placeholder="Enter Sale Price" required>
                                            @if ($errors->has('unit_price'))
                                            <p class="text-danger"> {{ $errors->first('unit_price') }} </p>
                                            @endif
                                        </div>

                                        <div class="col-lg-3">
                                            <label for="off_price" class="form-label"><b>Discounted Price </b></label>
                                            <input step="any" type="number" class="form-control" id="off_price" name="off_price"
                                                value="{{ old('off_price') }}" placeholder="Enter Discounted Price">
                                            @if ($errors->has('off_price'))
                                            <p class="text-danger"> {{ $errors->first('off_price') }} </p>
                                            @endif
                                        </div>
                                        <div class="col-lg-3">
                                            <label for="import_cast" class="form-label"><b>Import Cost </b></label>
                                            <input step="any" type="number" class="form-control" id="import_cast" name="import_cost"
                                                value="{{ old('import_cost') }}" placeholder="Enter Discounted Price">
                                            @if ($errors->has('import_cost'))
                                            <p class="text-danger"> {{ $errors->first('import_cost') }} </p>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="row mb-3">

                                        <div class="col-lg-6">
                                            <label for="minimum_purchase_quantity" class="form-label"><b>Enter Minimum Purchase
                                                    Quantity</b></label>
                                            <input type="number" class="form-control" id="minimum_purchase_quantity"
                                                name="minimum_purchase_quantity" value="{{ old('minimum_purchase_quantity') }}"
                                                placeholder="Enter Minimum Purchase Quantity" required>
                                            @if ($errors->has('minimum_purchase_quantity'))
                                            <p class="text-danger"> {{ $errors->first('minimum_purchase_quantity') }} </p>
                                            @endif
                                        </div>


                                        {{-- maximum_purchase_quantity  --}}
                                        <div class="col-lg-6">
                                            <label for="maximum_purchase_quantity" class="form-label"><b>Enter Maximum Purchase
                                                    Quantity</b></label>
                                            <input type="number" class="form-control" id="maximum_purchase_quantity"
                                                name="maximum_purchase_quantity" value="{{ old('maximum_purchase_quantity') }}"
                                                placeholder="Enter Maximum Purchase Quantity">
                                            @if ($errors->has('maximum_purchase_quantity'))
                                            <p class="text-danger"> {{ $errors->first('maximum_purchase_quantity') }} </p>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-4 mb-3">
                                            <label for="qrcode" class="form-label">QR Code</label>
                                            <input type="text" class="form-control" id="qrcode" name="qrcode"
                                                value="{{ old('qrcode') ?? '' }}" placeholder="Enter QR Code">
                                            @error('qrcode')
                                            <p class="text-danger"> {{ $message }} </p>
                                            @enderror
                                        </div>

                                        <div class="col-lg-4">
                                            <div class="mb-3">
                                                <label for="warehouse_no" class="form-label"><b>Warehouse No</b></label>
                                                <input type="number" class="form-control" id="warehouse_no" name="warehouse_no"
                                                    value="{{ old('warehouse_no') }}" placeholder="Enter Warehouse No">
                                                @if ($errors->has('warehouse_no'))
                                                <p class="text-danger"> {{ $errors->first('warehouse_no') }} </p>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="col-lg-4">
                                            <div class="mb-3">
                                                <label for="specification" class="form-label">Sepcification</label>
                                                <input type="text" class="form-control" id="specification"
                                                    name="specification" value="{{ old('specification') }}"
                                                    placeholder="Enter Product Specification">
                                                @error('specification')
                                                <p class="text-danger"> {{ $message }} </p>
                                                @enderror
                                            </div>
                                        </div>

                                    </div>

                                    <div class="row ms-3 mb-3">
                                        <div class="col-lg-12">
                                            <div class="form-check form-switch form-switch-lg" dir="ltr">
                                                <input type="checkbox" class="form-check-input" value="1"
                                                    id="is_refundable" name="is_refundable">
                                                <label class="form-check-label" for="is_refundable"><b>Is Refundable ?</b></label>
                                            </div>
                                            @if ($errors->has('is_refundable'))
                                            <p class="text-danger"> {{ $errors->first('is_refundable') }} </p>
                                            @endif
                                        </div>
                                    </div>


                                        <div class="row ms-3 mb-3">
                                        <div class="col-lg-12">
                                            <div class="form-check form-switch form-switch-lg" dir="ltr">
                                                <input type="checkbox" class="form-check-input" value="1"
                                                    id="is_discountable" name="is_discountable" checked>
                                                <label class="form-check-label" for="is_refundable"><b>Is discountAble ?</b></label>
                                            </div>
                                            @if ($errors->has('is_discountable'))
                                            <p class="text-danger"> {{ $errors->first('is_discountable') }} </p>
                                            @endif
                                        </div>
                                    </div>



                                    <div class="mb-3">
                                        <label for="long_description" class="form-label"><b>Product Short Description<span
                                                    class="text-danger">*</span> </b></label>
                                        <textarea class="form-control" name="short_description" id="long_description" placeholder="Must enter minimum of a 100 characters" rows="3">{{ old('short_description') }}</textarea>
                                        @error('short_description')
                                        <p class="text-danger"> {{ $message }} </p>
                                        @enderror
                                    </div>
                                    <div class="">
                                        <label for="product_long_description" class="form-label"><b>Product Long Description<span
                                                    class="text-danger">*</span> </b></label>
                                        <textarea name="long_description" id="product_long_description" class="summernote">
                                                {!! old('long_description') !!}
                                            </textarea>
                                        @error('long_description')
                                        <p class="text-danger"> {{ $message }} </p>
                                        @enderror
                                    </div>

                                    <div class="mx-3 mb-3">
                                        <div class="form-check form-switch form-switch-lg" dir="ltr">
                                            <input type="checkbox" class="form-check-input" value="1"
                                                @if (old('show_purchase_note')==1) checked @endif id="show_purchase_note"
                                                name="show_purchase_note" id="show_purchase_note">
                                            <label class="form-check-label" for="show_purchase_note"><b>show purchase note ?</b></label>
                                        </div>
                                        @if ($errors->has('show_purchase_note'))
                                        <p class="text-danger"> {{ $errors->first('show_purchase_note') }} </p>
                                        @endif
                                    </div>
                                    <div>
                                        <label for="purchase_note" class="form-label"><b>Purchase Note</b></label>
                                        <textarea name="purchase_note" class="form-control" id="purchase_note">
                                                {!! old('purchase_note') !!}
                                            </textarea>
                                        @error('purchase_note')
                                        <p class="text-danger">{{ $message }}</p>
                                        @enderror
                                    </div>

                                </div>
                            </div>

                            <div class="card card-outline card-primary">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Product Attributes</h5>
                                    <div class="card-tools">
                                        <button type="button" class="btn btn-primary btn-sm" id="addProductAttribute">Add
                                            Product Attribute</button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="mb-4">
                                        <div id="productAttributeContainer">
                                            @php
                                            $oldTitle = old('title', []);
                                            $oldValue = old('value', []);
                                            $count = max(count($oldTitle), count($oldValue));
                                            @endphp

                                            @for ($i = 0; $i < $count; $i++)
                                                <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="title-input[{{ $i }}]">Title</label>
                                                        <input type="text" name="title[]"
                                                            value="{{ $oldTitle[$i] ?? ($product->productAttributes[$i]['title'] ?? '') }}"
                                                            class="form-control" placeholder="Enter title" id="title-input[{{ $i }}]">
                                                    </div>
                                                </div>
                                                <!-- end col -->

                                                <div class="col-lg-4">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="value-input[{{ $i }}]">Value</label>
                                                        <input type="text" name="value[]"
                                                            value="{{ $oldValue[$i] ?? ($product->productAttributes[$i]['value'] ?? '') }}"
                                                            class="form-control" placeholder="Enter value" id="value-input[{{ $i }}]">
                                                    </div>
                                                </div>

                                                <div class="col-lg-2 d-flex">
                                                    <a href="#"
                                                        class="text-danger d-inline-block d-flex mt-1 align-items-center remove-item-btn"
                                                        id="removeProductAttribute">
                                                        <i class="ri-delete-bin-5-fill fs-2"></i>
                                                    </a>
                                                </div>
                                                @endfor
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="card card-outline card-primary">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Product Gallery</h5>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="thumbnail_image" class="form-label mt-2">{{ __('Product Thumbnail Image') }} <span
                                                class="text-danger">*</span></label><br>
                                        <center>
                                            <img class="mw-400 mb-3 show-img img-demo text-center"
                                                src="" alt="" width="200px">
                                        </center>
                                        <div class="custom-file">
                                            <label class="custom-file-label"
                                                for="thumbnail_image">{{ __('Choose New Image') }}</label>
                                            <input type="file" class="custom-file-input up-img"
                                                name="thumbnail_image" id="thumbnail_image">
                                        </div>
                                        @if ($errors->has('thumbnail_image'))
                                        <p class="text-danger"> {{ $errors->first('thumbnail_image') }} </p>
                                        @endif
                                    </div>

                                    <div>
                                        <h5 class="fs-14 mb-1">Product Gallery</h5>
                                        <label class="text-muted" for="product_images">Add Product Gallery Images.</label>
                                        <input name="product_images[]" type="file" class="form-control" multiple="multiple" id="product_images">

                                        @error('product_images')
                                        <p class="text-danger"> {{ $message }} </p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>



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

                            <div class="card card-outline card-primary">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Category & Brand</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label for="product_category" class="form-label"><b>Product Category <span
                                                    class="text-danger">*</span> </b></label>
                                        <select class="form-select" id="product_category" name="category_id" data-choices
                                            data-choices-search-false>
                                            <option value="0">Select Category</option>
                                            @foreach ($categories as $category)
                                            <option
                                                value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                                {{ ucwords($category->name) }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('category_id')
                                        <p class="text-danger"> {{ $message }} </p>
                                        @enderror
                                    </div>

                                    <div class="mb-3">
                                        <label for="sub_category_id" class="form-label">Subcategory<span
                                                class="text-danger">*</span></label>
                                        <select class="form-select" id="sub_category_id" name="sub_category_id">
                                            <option>Select Subcategory</option>
                                            <!-- Subcategories will be dynamically loaded here -->
                                        </select>
                                        @if ($errors->has('sub_category_id'))
                                        <p class="text-danger"> {{ $errors->first('sub_category_id') }} </p>
                                        @endif
                                    </div>

                                    <div class="mb-3">
                                        <label for="brand_id" class="form-label"><b>Select Brand <span
                                                    class="text-danger">*</span> </b></label>
                                        <select class="form-select" name="brand_id" id="brand_id" aria-label="Select Brand" required
                                            data-choices data-choices-search-false>
                                            <option selected value="">Select Brand </option>
                                            @foreach ($brands as $brand)
                                            <option value="{{ $brand->id }}"
                                                {{ old('brand_id') == $brand->id ? 'selected' : '' }}>
                                                {{ ucwords($brand->name) }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('brand_id'))
                                        <p class="text-danger"> {{ $errors->first('brand_id') }} </p>
                                        @endif
                                    </div>
                                    <div class="mb-3">
                                        <label for="label_id" class="form-label">Product Label</label>
                                        <select class="form-select" id="label_id" name="label_id" data-choices
                                            data-choices-search-false>
                                            <option value="" selected>Select Label</option>
                                            @foreach ($labels as $label)
                                            <option
                                                value="{{ $label->id }}" {{ old('label_id') == $label->id ? 'selected' : '' }}>
                                                {{ ucwords($label->name) }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('label_id')
                                        <p class="text-danger"> {{ $message }} </p>
                                        @enderror
                                    </div>

                                </div>
                            </div>

                            <div class="card card-outline card-primary">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Publish</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label for="status" class="form-label">Status <span class="text-danger">*</span></label>

                                        <select class="form-select" id="status" name="status" data-choices data-choices-search-false>
                                            <option value="1" selected>Published</option>
                                            <option value="0">Draft</option>
                                        </select>
                                        @error('status')
                                        <p class="text-danger"> {{ $message }} </p>
                                        @enderror

                                    </div>

                                    <div>
                                        <label for="is_fea" class="form-label">Visibility</label>
                                        <select class="form-select" id="is_fea" name="is_featured" id="choices-publish-visibility-input" data-choices
                                            data-choices-search-false>
                                            <option value="1" selected>Featured</option>
                                            <option value="0">Not Featured</option>
                                        </select>
                                        @error('visibility')
                                        <p class="text-danger"> {{ $message }} </p>
                                        @enderror
                                    </div>
                                </div>
                                <!-- end card body -->
                            </div>

                            <div class="card card-outline card-primary">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">Meta Data</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-4">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="mb-3">
                                                    <label class="form-label" for="meta-title-input">Meta title</label>
                                                    <input type="text" name="meta_title" class="form-control"
                                                        value="{{ old('meta_title') }}" placeholder="Enter meta title"
                                                        id="meta-title-input">
                                                    @error('meta_title')
                                                    <p class="text-danger"> {{ $message }} </p>
                                                    @enderror
                                                </div>
                                            </div>
                                            <!-- end col -->

                                            <div class="col-lg-12">
                                                <div class="mb-3">
                                                    <label class="form-label" for="meta-keywords-input">Meta Keywords</label>
                                                    <input type="text" name="meta_keywords" value="{{ old('meta_keywords') }}"
                                                        class="form-control" placeholder="Enter meta keywords" id="meta-keywords-input">
                                                    @error('meta_keywords')
                                                    <p class="text-danger"> {{ $message }} </p>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-lg-12">
                                                <div class="mb-3">
                                                    <label class="form-label" for="meta-image-input">Meta Image</label>
                                                    <input type="file" name="meta_image" class="form-control"
                                                        placeholder="Enter meta image" id="meta-image-input">
                                                    @error('meta_image')
                                                    <p class="text-danger"> {{ $message }} </p>
                                                    @enderror
                                                </div>
                                            </div>
                                            <!-- end col -->
                                        </div>
                                        <!-- end row -->
                                        <div>
                                            <label class="form-label" for="meta-description-input">Meta Description</label>
                                            <textarea class="form-control" name="meta_description" id="meta-description-input"
                                                placeholder="Enter meta description" rows="3">{!! old('meta_description') !!}</textarea>
                                            @error('meta_description')
                                            <p class="text-danger"> {{ $message }} </p>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <button type="submit" class="btn btn-sm mb-1 btn-primary float-right">{{ __('Save New Product') }}</button>
        </div>
    </div>
    </form>
    </div>
    </div>
    <!-- /.row -->

</section>

<script>
    document.getElementById("name").addEventListener("keyup", function() {
        let slug = this.value.toLowerCase().trim().replace(/ /g, '-').replace(/[^\w-]+/g, '');
        document.getElementById("slug").value = slug;
    });
</script>

<script>
    $(document).ready(function() {
        $('#product_category').on('change', function() {
            var categoryId = $(this).val();

            if (categoryId) {
                $.ajax({
                    url: '/get-subcategories/' + categoryId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        console.log("API Response:", response);

                        $('#sub_category_id').empty().append('<option value="">Select Subcategory</option>');

                        if (response.success) {
                            $.each(response.subcategories, function(key, value) {
                                $('#sub_category_id').append('<option value="' + value.id + '">' + value.sub_category_name + '</option>');
                            });
                        } else {
                            $('#sub_category_id').empty().append('<option value="">Select Subcategory</option>');
                            console.log("No subcategories found.");
                        }
                    },
                    error: function(xhr, status, error) {
                        $('#sub_category_id').empty().append('<option value="">Select Subcategory</option>');
                        console.error("AJAX Error:", error);
                    }
                });
            } else {
                $('#sub_category_id').empty().append('<option value="">Select Subcategory</option>');
            }
        });
    });
</script>


<script src="{{ asset('assets/admin/assets/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>

<!-- dropzone js -->
<script src="{{ asset('assets/admin/assets/libs/dropzone/dropzone-min.js') }}"></script>
<script>
    $(document).ready(function() {

        function fireError(message = '', type = 'error') {
            Swal.fire({
                icon: type,
                title: 'Oops...',
                text: message,
            });
        }

        const productAttributeContainer = $('#productAttributeContainer');
        const addProductAttribute = $('#addProductAttribute');

        addProductAttribute.on('click', function(e) {
            e.preventDefault();

            let index = productAttributeContainer.children('.row').length + 1;

            const productAttributeHtml = `  
            <div class="row">
                <div class="col-lg-5">
                    <div class="mb-3">
                        <label class="form-label" for="title-input-${index}">Title</label>
                        <input type="text" name="title[]" class="form-control" placeholder="Enter title"
                            id="title-input-${index}">
                    </div>
                </div>
                <!-- end col -->

                <div class="col-lg-5">
                    <div class="mb-3">
                        <label class="form-label" for="value-input-${index}">Value</label>
                        <input type="text" name="value[]" class="form-control" placeholder="Enter value"
                            id="value-input-${index}">
                    </div>
                </div>

                <div class="col-lg-2 d-flex">
                    <a href="#" class="text-danger d-inline-block d-flex mt-1 align-items-center remove-item-btn">
                        <i class="fas fa-trash"></i>
                    </a>
                </div>
            </div>`;

            productAttributeContainer.append(productAttributeHtml);
        });

        // Remove product attribute row
        productAttributeContainer.on('click', '.remove-item-btn', function(e) {
            e.preventDefault();
            $(this).closest('.row').remove();
        });

    });
</script>


@endsection