@section('title','Edit Product Category')
@include('layout.header')
@include('layout.sidebar')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
    .error{
        color: red;
    }
    .input-group-append {
    position: relative;
}
.input-group-append .input-group-text-start {
    position: absolute;    right: 10px;
    top: 11px;
}
</style>

<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Edit Product Category</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
                <a href="{{ url('/dashboard') }}" class="text-muted text-hover-primary">Dashboard</a>
            </li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">Edit Product Category</li>
        </ul>
    </div>

</div>
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5 mb-xl-8">
            <div class="card-body py-3">
                <form action="{{ route('edit-product',[$product->id])}}" method="POST" id="product_form" enctype="multipart/form-data">
                @method('PUT')
                @csrf
                    <div class="mt-5">
                        <div class="row mt-6">
                            <div class="col-md-6 mt-3">
                                <label  for="productTitle" class="form-label">Product Title <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <input type="text"  class="form-control " id="product_title" name="product_title" value="{{ $product->product_title }}" placeholder="Product title" autocomplete="off">
                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label  for="product_category_id" class="form-label">Product Category <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <select class="form-select" name="product_category_id" id="product_category_id" data-control="select2" data-placeholder="Select Product Category" onchange="getproductSubCategory()">
                                        <option value=""> Select Product Category </option>
                                        @foreach(@$productCategory as $productCategory)
                                            <option value="{{$productCategory->id}}" {{ $product->category_id == $productCategory->id ? 'selected' : '' }}> {{ $productCategory->category_name_en }} </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label  for="product_sub_category_id" class="form-label">Product Sub Category <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <select class="form-select" name="product_sub_category_id[]" id="product_sub_category_id" data-control="select2" data-placeholder="Select Product Sub Category" multiple>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label  for="status" class="form-label">Status <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <select class="form-select" name="status" data-control="select2" data-placeholder="Select Status">
                                        <option value=""> Select Status </option>
                                        <option value="Active" {{ old('status', $product->status) == "Active" ? 'selected' : ''}}> Active </option>
                                        <option value="In-Active" {{ old('status', $product->status) == "In-Active" ? 'selected' : ''}}> InActive </option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-12 mt-3">
                                <label  for="productDescription" class="form-label">Product Description <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <textarea class="form-control" id="product_description" name="product_description" rows="5" placeholder="Product Description">{{ old('product_description', $product->product_description) }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="generalInfoMainDiv-cls">
                                <h4>General Information</h4>
                                @if(!empty($productGeneralinfo))
                                    @foreach($productGeneralinfo as $pkey => $pVal)
                                        <div class="generalInfoDivCount-cls" id="generalInfoDivId_{{$pkey}}" key="{{$pkey}}">
                                            <input type="hidden" name="productGeneralInfoId[{{$pkey}}]" value="{{ $pVal['id'] ?? '' }}">
                                            <div class="row align-items-center">
                                                <div class="col-md-5 mt-3">
                                                    <label for="generalInfoFeature_{{$pkey}}" class="form-label">Feature <span class="error"> * </span></label>
                                                    <div class="form-group mb-5">
                                                        <input type="text" class="form-control" id="general_info_feature_{{$pkey}}" name="general_info_feature[{{$pkey}}]" placeholder="Feature" value="{{ $pVal['general_info_feature'] ?? '' }}" autocomplete="off">
                                                    </div>
                                                </div>
                                                <div class="col-md-5 mt-3">
                                                    <label for="generalInfoValue_{{$pkey}}" class="form-label">Value <span class="error"> * </span></label>
                                                    <div class="form-group mb-5">
                                                        <input type="text" class="form-control" id="general_info_value_{{$pkey}}" name="general_info_value[{{$pkey}}]" placeholder="Value" value="{{ $pVal['general_info_value'] ?? '' }}" autocomplete="off">
                                                    </div>
                                                </div>
                                                <div class="col-md-1 mt-3">
                                                    <div class="form-group mb-5">
                                                        <label class="checkbox">
                                                            <input type="checkbox" name="generalInfoHighlight[{{ $pkey }}]" {{ isset($pVal['generalInfo_highlight']) && $pVal['generalInfo_highlight'] == '1' ? 'checked' : '' }}>
                                                            <span></span>
                                                            Highlight
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="generalInfoDivCount-cls" id="generalInfoDivId_0" key="0">
                                        <div class="row align-items-center">
                                            <div class="col-md-5 mt-3">
                                                <label for="generalInfoFeature_0" class="form-label">Feature <span class="error"> * </span></label>
                                                <div class="form-group mb-5">
                                                    <input type="text" class="form-control" id="general_info_feature_0" name="general_info_feature[0]" placeholder="Feature" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-5 mt-3">
                                                <label for="generalInfoValue_0" class="form-label">Value <span class="error"> * </span></label>
                                                <div class="form-group mb-5">
                                                    <input type="text" class="form-control" id="general_info_value_0" name="general_info_value[0]" placeholder="Value" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-1 mt-3">
                                                <div class="form-group mb-5">
                                                    <label class="checkbox">
                                                        <input type="checkbox" name="generalInfoHighlight[0]"/>
                                                        <span></span>
                                                        Highlight
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-3 mt-3 mb-3">
                                <button type="button" class="btn btn-primary mt-3" id="addBanner" onclick="AddMoreGeneralInfoDiv()">Add More General Information</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="prodCompositionMainDiv-cls">
                                <h4>Product Composition</h4>
                                @if(!empty($productComposition))
                                    @foreach($productComposition as $pckey => $pcVal)
                                        <div class="prodCompositionDivCount-cls" id="prodCompositionDivId_{{$pckey}}" key="{{$pckey}}">
                                            <input type="hidden" name="productCompositionId[{{$pckey}}]" value="{{ $pcVal['id'] ?? '' }}">
                                            <div class="row align-items-center">
                                                <div class="col-md-6 mt-3">
                                                    <label for="prodCompositionFeature" class="form-label">Feature <span class="error"> * </span></label>
                                                    <div class="form-group mb-5">
                                                        <input type="text" class="form-control" id="prod_comp_feature_{{$pckey}}" name="prod_comp_feature[{{$pckey}}]" value="{{ $pcVal['composition_feature'] ?? '' }}" placeholder="Feature" autocomplete="off">
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mt-3">
                                                    <label for="prodCompositionValue" class="form-label">Value <span class="error"> * </span></label>
                                                    <div class="form-group mb-5">
                                                        <input type="text" class="form-control" id="prod_comp_value_{{$pckey}}" name="prod_comp_value[{{$pckey}}]" value="{{ $pcVal['composition_value'] ?? '' }}" placeholder="Value" autocomplete="off">
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mt-3">
                                                    <label for="prodCompositionValue" class="form-label">Description <span class="error"> * </span></label>
                                                    <div class="form-group mb-5">
                                                        <textarea class="form-control" id="prod_comp_description_{{$pckey}}" name="prod_comp_description[{{$pckey}}]" rows="5" placeholder="Description">{{ $pcVal['composition_description'] ?? '' }}</textarea>
                                                    </div>
                                                </div>
                                                <div class="col-md-1 mt-3">
                                                    <div class="form-group mb-5">
                                                        <label class="checkbox">
                                                            <input type="checkbox" name="prodCompositionHighlight[{{$pckey}}]" {{ isset($pcVal['composition_highlight']) && $pcVal['composition_highlight'] == '1' ? 'checked' : '' }} />
                                                            <span></span>
                                                            Highlight
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="prodCompositionDivCount-cls" id="prodCompositionDivId_0" key="0">
                                        <div class="row align-items-center">
                                            <div class="col-md-6 mt-3">
                                                <label for="prodCompositionFeature" class="form-label">Feature <span class="error"> * </span></label>
                                                <div class="form-group mb-5">
                                                    <input type="text" class="form-control" id="prod_comp_feature_0" name="prod_comp_feature[0]" placeholder="Feature" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-6 mt-3">
                                                <label for="prodCompositionValue" class="form-label">Value <span class="error"> * </span></label>
                                                <div class="form-group mb-5">
                                                    <input type="text" class="form-control" id="prod_comp_value_0" name="prod_comp_value[0]" placeholder="Value" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-12 mt-3">
                                                <label for="prodCompositionValue" class="form-label">Description <span class="error"> * </span></label>
                                                <div class="form-group mb-5">
                                                    <textarea class="form-control" id="prod_comp_description_0" name="prod_comp_description[0]" rows="5" placeholder="Description"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-1 mt-3">
                                                <div class="form-group mb-5">
                                                    <label class="checkbox">
                                                        <input type="checkbox" name="prodCompositionHighlight[0]"/>
                                                        <span></span>
                                                        Highlight
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-3 mt-3 mb-3">
                                <button type="button" class="btn btn-primary mt-3" id="addBanner" onclick="AddMoreProdCompositionDiv()">Add More Product Composition</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="nutritionalInfoMainDiv-cls">
                                <h4>Nutritional Information</h4>
                                @if(!empty($productNutritional))
                                    @foreach($productNutritional as $pnkey => $pnVal)
                                        <div class="nutritionalInfoDivCount-cls" id="nutritionalInfoDivId_{{$pnkey}}" key="{{$pnkey}}">
                                            <input type="hidden" name="productNutritionalId[{{$pnkey}}]" value="{{ $pnVal['id'] ?? '' }}">
                                            <div class="row align-items-center">
                                                <div class="col-md-5 mt-3">
                                                    <label for="nutritionalInfoFeature" class="form-label">Feature <span class="error"> * </span></label>
                                                    <div class="form-group mb-5">
                                                        <input type="text" class="form-control" id="nutritional_info_feature_{{$pnkey}}" name="nutritional_info_feature[{{$pnkey}}]" placeholder="Feature" value="{{ $pnVal['nutritional_feature'] ?? '' }}" autocomplete="off">
                                                    </div>
                                                </div>
                                                <div class="col-md-5 mt-3">
                                                    <label for="nutritionalInfoValue" class="form-label">Value <span class="error"> * </span></label>
                                                    <div class="form-group mb-5">
                                                        <input type="text" class="form-control" id="nutritional_info_value_{{$pnkey}}" name="nutritional_info_value[{{$pnkey}}]" placeholder="Value" value="{{ $pnVal['nutritional_value'] ?? '' }}" autocomplete="off">
                                                    </div>
                                                </div>
                                                <div class="col-md-2 mt-3">
                                                    <div class="form-group mb-5">
                                                        <label class="checkbox">
                                                            <input type="checkbox" name="nutritionalInfoHighlight[{{$pnkey}}]" {{ isset($pnVal['nutritional_highlight']) && $pnVal['nutritional_highlight'] == '1' ? 'checked' : '' }} />
                                                            <span></span>
                                                            Highlight
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="nutritionalInfoDivCount-cls" id="nutritionalInfoDivId_0" key="0">
                                        <div class="row align-items-center">
                                            <div class="col-md-5 mt-3">
                                                <label for="nutritionalInfoFeature" class="form-label">Feature <span class="error"> * </span></label>
                                                <div class="form-group mb-5">
                                                    <input type="text" class="form-control" id="nutritional_info_feature_0" name="nutritional_info_feature[0]" placeholder="Feature" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-5 mt-3">
                                                <label for="nutritionalInfoValue" class="form-label">Value <span class="error"> * </span></label>
                                                <div class="form-group mb-5">
                                                    <input type="text" class="form-control" id="nutritional_info_value_0" name="nutritional_info_value[0]" placeholder="Value" autocomplete="off">
                                                </div>
                                            </div>
                                            <div class="col-md-2 mt-3">
                                                <div class="form-group mb-5">
                                                    <label class="checkbox">
                                                        <input type="checkbox" name="nutritionalInfoHighlight[0]"/>
                                                        <span></span>
                                                        Highlight
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-3 mt-3 mb-3">
                                <button type="button" class="btn btn-primary mt-3" id="addBanner" onclick="AddMoreNutritionalInfoDiv()">Add More Product Composition</button>
                            </div>
                        </div>
                        <div class="row mt-6">
                            <div class="col-md-12 mt-3">
                                <label for="nutritionalInfoValue" class="form-label">Nutritional Information Description <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <textarea class="form-control" id="nutritional_description" name="nutritional_description" rows="5" placeholder="Description">{{ $product['nutritional_description'] ?? '' }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-6">
                            <div class="col-md-12 mt-3">
                                <label  for="productApplication" class="form-label">Product Application <span class="error"> * </span></label>
                                <div class="form-group mb-5">
                                    <textarea class="tiny" id="product_application" name="product_application" rows="5" placeholder="Product Application">{{ $product['product_application'] ?? '' }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-6">
                            @if(!empty($ProductImage))
                                @foreach($ProductImage as $image)
                                    <div class="col-2 mb-3">
                                        <div class="card">
                                            <div class="position-relative">
                                                <img src="{{ $image->image_url }}" class="card-img-top" alt="GCMMF Turned 50 Image" style="height: 150px; object-fit: cover;">
                                                <button type="button" class="btn btn-icon btn-danger btn-sm position-absolute top-0 end-0 m-2 delete-existing-image"  data-image-id="{{ $image->id }}">
                                                    <i class="ki-duotone ki-cross fs-2">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span>
                                                    </i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <div class="row mt-6">
                            <label  for="uploadProductImage" class="form-label">Upload Multiple Poduct Image</label>
                            <div class="col-12 mb-4">
                                <div class="image-container">
                                    <div class="row" id="image-preview-container">
                                        <!-- Image previews will be added here dynamically -->
                                    </div>                            
                                </div>
                            </div>                            
                            <div class="col-12 mb-2">
                                <button type="button" id="add-more-images" class="btn btn-primary">
                                    <i class="ki-duotone ki-plus fs-2"></i>Add Image
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group mb-5 col-md-2">
                                <button type="submit" class="form-control btn btn-primary">Submit</button>
                            </div>
                            <div class="form-group mb-5 col-md-2">
                                <a  href="{{ url('/Product')}}"  class="form-control btn btn-secondary">Back</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


@include('layout.footer')
<script>
    $(document).ready(function() {
        getproductSubCategory();
    })
    $("#product_form").validate({
        debug: true,
        rules: {
            product_title:{required: true},
            product_category_id:{required: true},
            product_sub_category_id:{required: true},
            product_description:{required: true},
            status:{required: true},
        },
        messages: {

            category_name_en: {
                required: 'Product is required.',
                remote:"Product alredy exist!!"
            },

            product_category_id: {
                required: 'Product category is required.',
            },

            product_sub_category_id: {
                required: 'Product sub category is required.',
            },

            product_description: {
                required: 'Product description is required.',
            },

            status: {
                required: 'Status is Required.',
            },
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        },
        submitHandler: function(form) {
            $(".submit").attr("disabled", true);
            form.submit();
        }
    });

    function getproductSubCategory() {
        var productCategory = $('#product_category_id').val();
        if (productCategory) {
            $.ajax({
                type: "GET",
                url: "{{ url('Product/get-sub-category') }}",
                data: { productCategory: productCategory },
                success: function (data) {
                    $('#product_sub_category_id').empty();
                    $('#product_sub_category_id').append('<option value="">Select Subcategory</option>');
                    let selectedSubCategoryId = 0;
                    $.each(data, function (key, value) {
                        let isSelected = selectedSubCategoryId === parseInt(value.id) ? 'selected' : '';
                        $('#product_sub_category_id').append('<option value="'+value.id+'"'+isSelected+'>' + value.sub_category_title + '</option>');
                    });
                },
                error: function (xhr, status, error) {
                    console.error("Error fetching subcategories:", error);
                    $('#product_sub_category_id').empty();
                    $('#product_sub_category_id').append('<option value="">No Subcategories Found</option>');
                }
            });
        } else {
            $('#product_sub_category_id').empty();
            $('#product_sub_category_id').append('<option value="">Select Subcategory</option>');
        }
    }

    function AddMoreGeneralInfoDiv(){
        var generalInfoDivCount = $('.generalInfoDivCount-cls').last().attr('key');
        generalInfoDivCount++;

        const generalInfoCount = generalInfoDivCount;
         
        var generalInfoDivHtml = `
        <div class="generalInfoDivCount-cls" id="generalInfoDivId_${generalInfoCount}" key="${generalInfoCount}">
            <div class="row align-items-center">
                <div class="col-md-5 mt-3">
                    <label for="generalInfoFeature" class="form-label">Feature <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <input type="text" class="form-control" id="general_info_feature_${generalInfoCount}" name="general_info_feature[${generalInfoCount}]" placeholder="Feature" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-5 mt-3">
                    <label for="generalInfoValue" class="form-label">Value <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <input type="text" class="form-control" id="general_info_value_${generalInfoCount}" name="general_info_value[${generalInfoCount}]" placeholder="Value" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-1 mt-3">
                    <div class="form-group mb-5">
                        <label class="checkbox">
                            <input type="checkbox" name="generalInfoHighlight[${generalInfoCount}]"/>
                            <span></span>
                            Highlight
                        </label>
                    </div>
                </div>
                <div class="col-md-1 mt-3">
                    <div class="form-group">
                        <button type='button' class='btn btn-primary' onclick="removeGeneralInfoDiv(${generalInfoCount})">Remove</button>
                    </div>
                </div>
            </div> 
        </div>`;
        $(".generalInfoMainDiv-cls").append(generalInfoDivHtml);
    }

    function removeGeneralInfoDiv(idKey){
        $('#generalInfoDivId_'+idKey).remove();
    }

    function AddMoreProdCompositionDiv(){
        var prodComDivCount = $('.prodCompositionDivCount-cls').last().attr('key');
        prodComDivCount++;

        const prodComCount = prodComDivCount;
         
        var prodComDivHtml = `
        <div class="prodCompositionDivCount-cls" id="prodCompositionDivId_${prodComCount}" key="${prodComCount}">
            <div class="row align-items-center">
                <div class="col-md-6 mt-3">
                    <label for="prodCompositionFeature" class="form-label">Feature <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <input type="text" class="form-control" id="prod_comp_feature_${prodComCount}" name="prod_comp_feature[${prodComCount}]" placeholder="Feature" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-6 mt-3">
                    <label for="prodCompositionValue" class="form-label">Value <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <input type="text" class="form-control" id="prod_comp_value_${prodComCount}" name="prod_comp_value[${prodComCount}]" placeholder="Value" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-12 mt-3">
                    <label for="prodCompositionValue" class="form-label">Description <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <textarea class="form-control" id="prod_comp_description_${prodComCount}" name="prod_comp_description[${prodComCount}]" rows="5" placeholder="Description"></textarea>
                    </div>
                </div>
                <div class="col-md-11 mt-3">
                    <div class="form-group mb-5">
                        <label class="checkbox">
                            <input type="checkbox" name="prodCompositionHighlight[${prodComCount}]"/>
                            <span></span>
                            Highlight
                        </label>
                    </div>
                </div>
                <div class="col-md-1 mt-3">
                    <div class="form-group">
                        <button type='button' class='btn btn-primary' onclick="removeProdComDiv(${prodComCount})">Remove</button>
                    </div>
                </div>
            </div>
        </div>`;
        $(".prodCompositionMainDiv-cls").append(prodComDivHtml);
    }

    function removeProdComDiv(idKey){
        $('#prodCompositionDivId_'+idKey).remove();
    }

    function AddMoreNutritionalInfoDiv(){
        var nutritionalInfoDivCount = $('.nutritionalInfoDivCount-cls').last().attr('key');
        nutritionalInfoDivCount++;

        const nutritionalInfoCount = nutritionalInfoDivCount;
         
        var nutritionalInfoDivHtml = `
        <div class="nutritionalInfoDivCount-cls" id="nutritionalInfoDivId_${nutritionalInfoCount}" key="${nutritionalInfoCount}">
            <div class="row align-items-center">
                <div class="col-md-5 mt-3">
                    <label for="nutritionalInfoFeature" class="form-label">Feature <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <input type="text" class="form-control" id="nutritional_info_feature_${nutritionalInfoCount}" name="nutritional_info_feature[${nutritionalInfoCount}]" placeholder="Feature" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-5 mt-3">
                    <label for="nutritionalInfoValue" class="form-label">Value <span class="error"> * </span></label>
                    <div class="form-group mb-5">
                        <input type="text" class="form-control" id="nutritional_info_value_${nutritionalInfoCount}" name="nutritional_info_value[${nutritionalInfoCount}]" placeholder="Value" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-1 mt-3">
                    <div class="form-group mb-5">
                        <label class="checkbox">
                            <input type="checkbox" name="nutritionalInfoHighlight[${nutritionalInfoCount}]"/>
                            <span></span>
                            Highlight
                        </label>
                    </div>
                </div>
                <div class="col-md-1 mt-3">
                    <div class="form-group">
                        <button type='button' class='btn btn-primary' onclick="removenutritionalInfoDiv(${nutritionalInfoCount})">Remove</button>
                    </div>
                </div>
            </div>
        </div>`;
        $(".nutritionalInfoMainDiv-cls").append(nutritionalInfoDivHtml);
    }

    function removenutritionalInfoDiv(idKey){
        $('#nutritionalInfoDivId_'+idKey).remove();
    }

    // multiple image upload
    let imageCounter = 0;

    // Handle delete existing image
    $(document).on("click", ".delete-existing-image", function() {
        const imageId = $(this).data("image-id");
        const imageCard = $(this).closest(".col-2");

        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel!",
            reverseButtons: true            }).then((result) => {
            if (result.isConfirmed) {
                // Show loading message
                Swal.fire({
                    title: 'Deleting...',
                    text: 'Please wait while the image is being deleted',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    allowEnterKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: "{{ url('Product/delete-product-image/') }}/"+ imageId,
                    type: 'GET',                        
                    success: function(response) {
                        imageCard.remove();
                        // Check if this was the last existing image
                        const remainingImages = $('.delete-existing-image').length;
                        const previewImages = $("#image-preview-container").children().length;
                        if (remainingImages === 0 && previewImages === 0) {
                            $('#add-more-images').html(`<i class="ki-duotone ki-plus fs-2"></i> Add Image`);
                        }
                        Swal.fire({
                            title: "Deleted!",
                            text: "Image has been deleted.",
                            icon: "success"
                        });
                    },
                    error: function(xhr) {
                        Swal.fire({
                            title: "Error!",
                            text: "Failed to delete image.",
                            icon: "error"
                        });
                    }
                });
            }
        });
    });

    // Function to create image preview
    function createImagePreview(file, inputId) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const previewHtml = `
                <div class="col-2 mb-3">
                    <div class="card">
                        <div class="position-relative">
                            <img src="${e.target.result}" class="card-img-top" alt="Preview" style="height: 150px; object-fit: cover;">
                            <button type="button" class="btn btn-icon btn-danger btn-sm position-absolute top-0 end-0 m-2 remove-image" 
                                    data-input-id="${inputId}">
                                <i class="ki-duotone ki-cross fs-2">
                                    <span class="path1"></span>
                                    <span class="path2"></span>
                                </i>
                            </button>
                        </div>
                        <div class="card-body p-2">
                            <input type="file" name="product_image[]" id="${inputId}" class="d-none">
                            <button type="button" class="btn btn-sm btn-light w-100 change-image" data-input-id="${inputId}">
                                Change Image
                            </button>
                        </div>
                    </div>
                </div>`;
            
            $("#image-preview-container").append(previewHtml);
            updateAddButtonText();
        }
        reader.readAsDataURL(file);
    }

    // Add more images button click handler
    $("#add-more-images").click(function() {
        const tempInput = $(`<input type="file" multiple style="display: none;">`);
        $("body").append(tempInput);
        tempInput.click();

        tempInput.on("change", function(e) {
            if (this.files && this.files.length > 0) {
                Array.from(this.files).forEach(file => {
                    const inputId = `image-${++imageCounter}`;
                    createImagePreview(file, inputId);
                    setTimeout(() => {
                        const dataTransfer = new DataTransfer();
                        dataTransfer.items.add(file);
                        $(`#${inputId}`).prop('files', dataTransfer.files);
                    }, 100);
                });
            }
            $(this).remove();
        });
    });

    // Function to update add button text
    function updateAddButtonText() {
        const imageCount = $("#image-preview-container").children().length;
        const $addButton = $("#add-more-images");
        const buttonText = imageCount > 0 ? "Add More Images" : "Add Image";
        $addButton.html(`<i class="ki-duotone ki-plus fs-2"></i> ${buttonText}`);
    }

    // Handle remove image
    $(document).on("click", ".remove-image", function() {
        $(this).closest(".col-2").remove();
        updateAddButtonText();
    });

    // Handle change image
    $(document).on("click", ".change-image", function() {
        const inputId = $(this).data("input-id");
        $(`#${inputId}`).click();
    }); 
           
    // Handle file change for existing preview cards
    $(document).on("change", "input[type='file'][name='product_image[]']", function(e) {
        if (this.files && this.files[0]) {
            const inputId = $(this).attr("id");
            const card = $(this).closest(".card");
            const reader = new FileReader();
            
            reader.onload = function(e) {
                card.find("img").attr("src", e.target.result);
            }
            
            reader.readAsDataURL(this.files[0]);
        }
    });
</script>