@extends('layouts.admin-layout')
@section('title') Edit Product
@endsection
@section('content')
    <style>
        .toggle {
            min-width: 89.4px !important;
            min-height: 41px!important;
        }
    </style>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">

                        <div class="card mt-4 card-box-shadow">

                            <div class="card-header">
                                <h3 class="card-title">Edit Product</h3>
                                <a href="{{route('admin.product.list')}}"
                                >
                                    <button id="submit_btn"
                                            class="btn btn-primary custom_btn_sm_back custom_btn btn-sm float-right">
                                        <i class="fas fa-arrow-circle-left"></i>
                                        Back
                                    </button>

                                </a>
                            </div>

                            <!-- /.card-header -->
                            <div class="card-body">

                                <form action="{{route('admin.product.update',['id'=> $find_product->id])}}"
                                      method="POST"
                                      enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="Name">Product Name:</label>
                                                <input type="text" class="form-control form__field" name="product_name"
                                                       value="{{$find_product->product_name ? : ""}}"></div>
                                            <small
                                                class="text-danger">@error ('product_name') {{$message}} @enderror</small>
                                        </div>

                                        <div class="col-md-4 mt-4">
                                            <div class="form-group">
                                                <label for="category">Select Category:</label>
                                                <select id="category" class="form-control form__field"
                                                        name="category_name">
                                                    <option value="" selected disabled>Select Category</option>

                                                    @forelse($get_categories as $category)
                                                        <option
                                                            value="{{ $category->id }}" {{ $find_product->cate_id == $category->id ? 'selected' : '' }}>
                                                            {{ $category->category_name }}
                                                        </option>
                                                    @empty
                                                        <option value="" selected disabled>Category Not Found</option>

                                                    @endforelse
                                                </select>

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

                                        <div class="col-md-4 mt-4">
                                            <div class="form-group">
                                                <label for="category">Select Sub Category:</label>
                                                <select id="subcategory" class="form-control form__field"
                                                        name="sub_category_name">
                                                    <option value="" selected disabled>Select Sub Category</option>

                                                    @forelse($get_sub_categories as $sub_category)
                                                        <option
                                                            value="{{ $sub_category->id ?: '' }}" {{ $find_product->sub_cate_id == $sub_category->id ? 'selected' : '' }}>
                                                            {{ $sub_category->sub_cate_name ?: '' }}</option>
                                                    @empty
                                                        <option value="" selected disabled>Sub Category Not Found
                                                        </option>

                                                    @endforelse
                                                </select>

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


                                        <div class="col-md-4 mt-4">
                                            <div class="form-group">
                                                <label for="category">Select Brand:</label>
                                                <select id="category" class="form-control form__field"
                                                        name="brand_name">
                                                    <option value="" selected disabled>Select Brand Name</option>

                                                    @forelse($get_brands as $brand)
                                                        <option
                                                            value="{{ $brand->id ?: '' }}"{{ $find_product->brand_id == $brand->id ? 'selected' : '' }}>
                                                            {{ $brand->brand_name ?: '' }}</option>
                                                    @empty

                                                        <option value="" selected disabled>Brand Not Found</option>

                                                    @endforelse
                                                </select>

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


                                        <div class="col-md-6 mt-4">
                                            <div class="form-group">
                                                <label for="Name">Product Price:</label>
                                                <input type="number" class="form-control form__field"
                                                       name="product_price"
                                                       value="{{$find_product->product_price ? : ""}}"
                                                       oninput="this.value = this.value.replace(/[^0-9]/g, '')"></div>
                                            <small
                                                class="text-danger">@error ('product_price') {{$message}} @enderror</small>
                                        </div>

                                        <div class="col-md-6 mt-4">
                                            <div class="form-group">
                                                <label for="Name">Product Discount Price:</label>
                                                <input type="number" class="form-control form__field"
                                                       name="product_discount"
                                                       value="{{$find_product->product_discount ? : ""}}"
                                                       oninput="this.value = this.value.replace(/[^0-9]/g, '')"></div>

                                        </div>


                                        <div class="col-md-4 mt-4">
                                            <div class="form-group">
                                                <label for="Name">Product stock :</label>
                                                <input type="number" class="form-control form__field" name="product_stock"
                                                       value="{{$find_product->product_stock ? : ""}}"
                                                       oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                            </div>
                                            <small
                                                class="text-danger">@error ('product_stock') {{$message}} @enderror</small>
                                        </div>
                                        <div class="col-md-8 mt-4">
                                            <div style="display: flex;gap: 22px;">
                                                <label for="Name">New Product:</label>
                                                <label for="Name">Featured Product:</label>
                                                <label for="Name">Popular Product:</label>
                                                <label for="Name">Best Sale Product:</label>
                                                <label for="Name">MakeUp Brushes Product:</label>
                                                <label for="Name">Gift and Sets Product:</label>

                                            </div>

                                            <div style="display: flex;gap: 81px; background: #fff; font: inherit;box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 10px 2px;border: 0;outline: 0;border-radius: 20px;min-height: 50px;padding: 8px;">


                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"
                                                       data-off="No" data-onstyle="success"
                                                       data-offstyle="danger" name="new_product"{{ $find_product->new_product === 1 ? 'checked' : '' }}>


                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"
                                                       data-off="No" data-onstyle="success"
                                                       data-offstyle="danger" name="feature_product"{{ $find_product->feature_product === 1 ? 'checked' : '' }}>


                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"
                                                       data-off="No" data-onstyle="success"
                                                       data-offstyle="danger" name="popular_product"{{ $find_product->popular_product === 1 ? 'checked' : '' }}>


                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"
                                                       data-off="No" data-onstyle="success"
                                                       data-offstyle="danger" name="best_sale_product"{{ $find_product->best_sale_product === 1 ? 'checked' : '' }}>

                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"
                                                       data-off="No" data-onstyle="success"
                                                       data-offstyle="danger" name="makeup_brushes_product"{{ $find_product->makeup_brushes_product === 1 ? 'checked' : '' }}>

                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"
                                                       data-off="No" data-onstyle="success"
                                                       data-offstyle="danger" name="gift_sets_product"{{ $find_product->gift_sets_product === 1 ? 'checked' : '' }}>

                                            </div>

                                        </div>

                                        <div class="col-md-12 mt-4">
                                            <div class="form-group">
                                                <label for="mainProductImageInput">Choose Product Image:</label>
                                                <input type="file" class="form-control form__field visually-hidden"
                                                       name="product_main_image"
                                                       id="mainProductImageInput">
                                                <label for="mainProductImageInput"
                                                       class="file-input-label form__field form-control">
                                                    <i class="fas fa-camera"></i> Choose file
                                                </label>
                                                <small class="text-danger">@error ('product_main_image') {{$message}} @enderror</small>

                                            </div>

                                            <img id="mainProductImagePreview"
                                                 src="{{$find_product->productImage('product_main_image') ? : ''}}"

                                                 alt="Profile Preview"
                                                 style="width: 200px; height: 150px; margin-top: 10px;">

                                        </div>


                                        <div class="col-md-12 mt-4">
                                            <label for="">Short Description</label>
                                            <textarea name="description" rows="4"
                                                      placeholder="Description"
                                                      class="form-control"
                                                      id="summernote1">{!! $find_product->description ? : "" !!}</textarea>

                                            <small class="text-danger">@error ('description') {{$message}} @enderror</small>

                                        </div>


                                        <div class="col-md-12 mt-5">
                                            <div class="form-group pt-4">
                                                <div class="card card-box-shadow">
                                                    <h5 class="card-header bg-dark text-white">
                                                        <label for="Name">Show Product Variation:</label>
                                                        <input type="checkbox" id="productVariationCheckbox"
                                                               style="width: 39px;height: 28px;">
                                                    </h5>

                                                    <div class="col-md-4 mt-4 mx-auto selectVariationName d-none">
                                                        <div class="form-group">
                                                            <label>Select Variation Name:</label>
                                                            <select class="form-control form__field variationNameSelect"
                                                            >
                                                                <option value="" selected disabled>Select Variation Name
                                                                </option>
                                                                @forelse($get_variation_names as $variation_name)
                                                                    <option
                                                                        value="{{ $variation_name->id }}">{{ $variation_name->variation_name }}</option>
                                                                @empty
                                                                    <option value="" selected disabled>Variation name not found </option>

                                                                @endforelse
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="card-body addProductVariationField">
                                                        @foreach($find_single_product_variation_name as $product)
                                                            @foreach($product->singleEntryProductVariation as $single_entry)

                                                                <p class="d-flex mx-auto mb-5 mt-5" id="removeVariationName{{$single_entry->id}}"style="background: #242d3e; color:#fff; font-weight: 700; border: 0;outline: 0;border-radius: 20px;padding:4px;align-items: center;justify-content: center;width: 31%;">
                                                                    Variation Name :

                                                                    <span  style="color:#fff;padding:6px;">{{$single_entry->variationName->variation_name}} </span>

                                                                </p>
                                                                <input type="hidden" name="variation_name_id[]"
                                                                       value="{{$single_entry->variationName->id }}">

                                                                @foreach($single_entry->productVariations as $index => $product_variation)
                                                                    <div class="row form-section"
                                                                         id="formSection{{ $index }}">
                                                                        <div class="col-md-12">
                                                                            <button type="button"
                                                                                    class="custom_btn_sm_back custom_btn btn-sm float-right"
                                                                                    onclick="removeFormSection(this, '{{ $single_entry->id }}')"
                                                                                    data-get-remove-section="{{ $product_variation->id }}">
                                                                                <i class="fas fa-trash-alt"></i> Remove
                                                                            </button>

                                                                        </div>
                                                                        <input type="hidden"
                                                                               name="single_entry_product_variation_id[]"
                                                                               value="{{ $product_variation->single_entry_product_variation_id ?? '' }}">
                                                                        <input type="hidden"
                                                                               name="product_variation_primary_id[]"
                                                                               value="{{ $product_variation->id }}">

                                                                        <div class="col-md-3 mt-4">
                                                                            <div class="form-group">
                                                                                <label for="option_name[]">Option
                                                                                    Name:</label>
                                                                                <input type="text" name="option_name[]"
                                                                                       class="form-control form__field"
                                                                                       value="{{ $product_variation->option_name ?? '' }}">
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-md-3 mt-4">
                                                                            <div class="form-group">
                                                                                <label for="variation_grams[]">Variation
                                                                                    Grams:</label>
                                                                                <input type="number"
                                                                                       name="variation_grams[]"
                                                                                       class="form-control form__field"
                                                                                       value="{{ $product_variation->variation_grams ?? '' }}"
                                                                                       oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-md-3 mt-4">
                                                                            <div class="form-group">
                                                                                <label for="variant_inventory_qty[]">Variant
                                                                                    Inventory Qty:</label>
                                                                                <input type="text"
                                                                                       name="variant_inventory_qty[]"
                                                                                       class="form-control form__field"
                                                                                       value="{{ $product_variation->variant_inventory_qty ?? '' }}"
                                                                                       oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-md-3 mt-4">
                                                                            <div class="form-group">
                                                                                <label for="variant_price[]">Variant
                                                                                    Price / Discount / Sale
                                                                                    Price:</label>
                                                                                <input type="text"
                                                                                       name="variant_price[]"
                                                                                       class="form-control form__field"
                                                                                       value="{{ $product_variation->variant_price ?? '' }}"
                                                                                       oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-md-3 mt-4">
                                                                            <div class="form-group">
                                                                                <label for="variant_compare_at_price[]">Variant
                                                                                    Compare At Price / Main
                                                                                    Price:</label>
                                                                                <input type="text"
                                                                                       name="variant_compare_at_price[]"
                                                                                       class="form-control form__field"
                                                                                       value="{{ $product_variation->variant_compare_at_price ?? '' }}"
                                                                                       oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-md-3 mt-4">
                                                                            <div class="form-group">
                                                                                <label for="cost_per_item[]">Cost Per
                                                                                    Item / Product Price:</label>
                                                                                <input type="text"
                                                                                       name="cost_per_item[]"
                                                                                       class="form-control form__field"
                                                                                       value="{{ $product_variation->cost_per_item ?? '' }}"
                                                                                       oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-md-6 mt-4">
                                                                            <div class="form-group">
                                                                                <label
                                                                                    for="changeVariationImageInput{{ $product_variation->id }}">Variation
                                                                                    Image:</label>
                                                                                <input type="file"
                                                                                       name="change_variation_image[]"
                                                                                       class="form-control visually-hidden"
                                                                                       id="changeVariationImageInput{{ $product_variation->id }}">
                                                                                <label
                                                                                    for="changeVariationImageInput{{ $product_variation->id }}"
                                                                                    class="file-input-label form__field form-control">
                                                                                    <i class="fas fa-camera"></i> Choose
                                                                                    file
                                                                                </label>
                                                                            </div>
                                                                            <div
                                                                                id="changeVariationImagePreview{{ $product_variation->id }}"
                                                                                class="no-right-click"
                                                                                style="margin-top:10px;">
                                                                                @if ($product_variation->productVariationImage() && $product_variation->productVariationImage()->first())
                                                                                    <img
                                                                                        src="{{ $product_variation->productVariationImage()->first()->getUrl() }}"
                                                                                        class="card-img-top"
                                                                                        style="height:100px; width: 200px;"/>
                                                                                @else
                                                                                    <img id="previewImage{{ $product_variation->id }}"
                                                                                         src="{{ asset('upload/No-Image.png') }}"
                                                                                         class="card-img-top"
                                                                                         style="height:100px; width: 200px; display:none;"/>
                                                                                @endif
                                                                            </div>
                                                                        </div>


                                                                    </div>
                                                                @endforeach
                                                            @endforeach
                                                        @endforeach
                                                    </div>

                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                    <div class="text-center mt-3 mb-2">
                                        <input type="checkbox" data-toggle="toggle" data-on="Approve"
                                               data-off="Not Approve" data-onstyle="success"
                                               data-offstyle="danger"
                                               name="status"{{$find_product->status === 1 ? 'checked' : ''}}>
                                        <button id="submit_btn" class="btn btn-primary custom_btn">
                                            <i class="fa-solid fa-cloud-arrow-up"></i> Submit
                                        </button>
                                    </div>

                                </form>

                            </div>
                            <!-- /.card-body -->
                        </div>

                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('script')
    <script>
        document.addEventListener("DOMContentLoaded", function () {

            const variationInputs = document.querySelectorAll('input[id^="changeVariationImageInput"]');

            variationInputs.forEach((input) => {
                const index = input.id.replace("changeVariationImageInput", "");
                const previewId = `changeVariationImagePreview${index}`;

                input.addEventListener("change", function () {
                    const preview = document.getElementById(previewId);

                    if (input.files && input.files[0]) {
                        const reader = new FileReader();

                        reader.onload = function (e) {
                            const img = preview.querySelector("img");
                            if (img) {
                                img.src = e.target.result;
                                img.style.display = "block";
                            } else {
                                const newImg = document.createElement("img");
                                newImg.src = e.target.result;
                                newImg.style.height = "100px";
                                newImg.style.width = "200px";
                                newImg.className = "card-img-top";
                                preview.appendChild(newImg);
                            }
                        };

                        reader.readAsDataURL(input.files[0]);
                    }
                });
            });
        });

    </script>
    <script>

        $('#summernote1').summernote({
            placeholder: 'Hello Admin',
            tabsize: 2,
            height: 100
        });

        function showImagePreview(input, previewId) {
            const preview = document.getElementById(previewId);

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

        const mainProductImageInput = document.getElementById('mainProductImageInput');
        mainProductImageInput.addEventListener('change', function () {
            showImagePreview(this, 'mainProductImagePreview');
        });

        const productFirstGalleryImageInput = document.getElementById('productFirstGalleryImageInput');
        productFirstGalleryImageInput.addEventListener('change', function () {
            showImagePreview(this, 'productFirstGalleryImagePreview');
        });

    </script>

    <script>
        function showImagePreview(input, previewId) {
            const preview = document.getElementById(previewId);

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };

                reader.readAsDataURL(input.files[0]);
            }
        }


        document.addEventListener('change', function (event) {
            if (event.target && event.target.name === 'add_new_variation_image[]') {
                const inputId = event.target.id;
                const previewId = `variationImagePreview${inputId.replace('variationImageInput', '')}`;
                showImagePreview(event.target, previewId);
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const checkbox = document.getElementById('productVariationCheckbox');
            const variationField = document.querySelector('.addProductVariationField');
            const selectVariationName = document.querySelector('.selectVariationName');
            const selectField = selectVariationName.querySelector('select'); // Select the actual dropdown

            const inputs = variationField ? variationField.querySelectorAll('.form__field') : [];

            checkbox.addEventListener('change', function () {
                if (checkbox.checked) {
                    selectVariationName.classList.remove('d-none'); // Show the dropdown
                    selectField.setAttribute('required', 'required'); // Add required to dropdown
                    inputs.forEach(input => input.setAttribute('required', 'required')); // Add required to other inputs
                } else {
                    selectVariationName.classList.add('d-none'); // Hide the dropdown
                    selectField.removeAttribute('required'); // Remove required from dropdown
                    inputs.forEach(input => input.removeAttribute('required')); // Remove required from other inputs
                }
            });
        });
    </script>

    <script>
        // Function to generate the first form
        function generateFirstForm(randomId, selectedVariationName, selectedVariationId) {
            return `
        <div class="row product-variation-data mb-4 mt-4" id="formSection${randomId}" data-variation-id="${selectedVariationId}">
            <div class="col-md-12">
                <div class="col-md-4 mt-4 mx-auto">
                   <div class="form-group d-flex"style="background: #242d3e; border: 0;outline: 0;border-radius: 20px;padding:4px;align-items: center;justify-content: center;">
                        <label for="selected_variation_name"style="color:#fff;margin-top:7px;">Selected Variation Name : <span style="color:#fff;padding:6px;">${selectedVariationName}</span></label>
                        <input type="hidden" name="add_new_variation_name_id[]" value="${selectedVariationId}" class="form-control form__field">
                    </div>
                </div>
                <button type="button" class="custom_btn_sm_back custom_btn btn-sm float-right addSelectedProductVariation" data-variation-id="${selectedVariationId}"data-select-variation-name="${selectedVariationName}">
                    <i class="fas fa-plus"></i>
                    Add Variation
                </button>
                <button type="button" class="custom_btn_sm_back custom_btn btn-sm float-right productVariationRemoveBtn" data-variation-id="${selectedVariationId}">
                    <i class="fas fa-trash-alt"></i>
                    AllRemove
                </button>
            </div>

   <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="add_new_option_name[]">Option Name:</label>
                    <input type="text" name="add_new_option_name[]"
                           class="form-control form__field"
                           placeholder="Enter Option Name"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="add_new_variation_grams[]">Variation Grams:</label>
                    <input type="number" name="add_new_variation_grams[]"
                           class="form-control form__field"
                           placeholder="Enter Variation Grams"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="add_new_variant_inventory_qty[]">Variant Inventory Qty:</label>
                    <input type="text" name="add_new_variant_inventory_qty[]"
                           class="form-control form__field"
                           placeholder="Enter Variant Inventory Qty"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="add_new_variant_price[]">Variant Price / Discount / Sale Price:</label>
                    <input type="text" name="add_new_variant_price[]"
                           class="form-control form__field"
                           placeholder="Enter Variant Price"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="add_new_variant_compare_at_price[]">Variant Compare At Price / Main Price:</label>
                    <input type="text" name="add_new_variant_compare_at_price[]"
                           class="form-control form__field"
                           placeholder="Enter Variant Compare At Price"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="add_new_cost_per_item[]">Cost Per Item /Product Price:</label>
                    <input type="text" name="add_new_cost_per_item[]"
                           class="form-control form__field"
                           placeholder="Enter Cost Per Item"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

             <div class="col-md-6 mt-4">
            <div class="form-group">
                <label for="variationImageInput${randomId}">Variation Image:</label>
                <input type="file" name="add_new_variation_image[]" id="variationImageInput${randomId}"
                       class="form-control visually-hidden" required>
                <label for="variationImageInput${randomId}" class="file-input-label form__field form-control">
                    <i class="fas fa-camera"></i> Choose file
                </label>
            </div>
            <img id="variationImagePreview${randomId}" src="{{ asset('upload/No-Image.png') }}"
                 class="card-img-top" style="height:100px; width:200px;" />
        </div>


        </div>`;
        }

        // Function to generate the second form
        function generateSecondForm(randomId, selectedVariationId) {
            return `
        <div class="row product-variation-data mb-4 mt-4" id="formSection${randomId}" data-variation-id="${selectedVariationId}">
            <div class="col-md-12">
                <button type="button" class="custom_btn_sm_back custom_btn btn-sm float-right selectedProductVariationRemoveBtn">
                    <i class="fas fa-trash-alt"></i>
                    Remove
                </button>
            </div>
                  <input type="hidden" name="add_new_variation_name_id[]" value="${selectedVariationId}" class="form-control form__field">

<div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="add_new_option_name[]">Option Name:</label>
                    <input type="text" name="add_new_option_name[]"
                           class="form-control form__field"
                           placeholder="Enter Option Name"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="add_new_variation_grams[]">Variation Grams:</label>
                    <input type="number" name="add_new_variation_grams[]"
                           class="form-control form__field"
                           placeholder="Enter Variation Grams"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="add_new_variant_inventory_qty[]">Variant Inventory Qty:</label>
                    <input type="text" name="add_new_variant_inventory_qty[]"
                           class="form-control form__field"
                           placeholder="Enter Variant Inventory Qty"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="add_new_variant_price[]">Variant Price / Discount / Sale Price:</label>
                    <input type="text" name="add_new_variant_price[]"
                           class="form-control form__field"
                           placeholder="Enter Variant Price"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="add_new_variant_compare_at_price[]">Variant Compare At Price / Main Price:</label>
                    <input type="text" name="add_new_variant_compare_at_price[]"
                           class="form-control form__field"
                           placeholder="Enter Variant Compare At Price"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>

            <div class="col-md-3 mt-4">
                <div class="form-group">
                    <label for="add_new_cost_per_item[]">Cost Per Item /Product Price:</label>
                    <input type="text" name="add_new_cost_per_item[]"
                           class="form-control form__field"
                           placeholder="Enter Cost Per Item"oninput="this.value = this.value.replace(/[^0-9]/g, '')"required>
                </div>
            </div>
             <div class="col-md-6 mt-4">
            <div class="form-group">
                <label for="variationImageInput${randomId}">Variation Image:</label>
                <input type="file" name="add_new_variation_image[]" id="variationImageInput${randomId}"
                       class="form-control visually-hidden" required>
                <label for="variationImageInput${randomId}" class="file-input-label form__field form-control">
                    <i class="fas fa-camera"></i> Choose file
                </label>
            </div>
            <img id="variationImagePreview${randomId}" src="{{ asset('upload/No-Image.png') }}"
                 class="card-img-top" style="height:100px; width:200px;" />
        </div>
        </div>`;
        }



        $(document).on('change', '.selectVariationName select', function () {
            let selectedOptionText = $(this).find('option:selected').text();
            let selectedOptionId = $(this).find('option:selected').val();

            if (selectedOptionText !== "Select variation name" && selectedOptionId !== "") {
                // Check if form already exists for this variation
                if ($(`.product-variation-data[data-variation-id="${selectedOptionId}"]`).length > 0) {
                    alert("This variation is already added.");
                    return; // Exit if the form for this variation already exists
                }

                // Generate and append the first form (generateFirstForm)
                let randomId = Math.floor(Math.random() * 10000);
                let newFirstForm = generateFirstForm(randomId, selectedOptionText, selectedOptionId);

                // Sanitize the variation name (replace spaces and special characters)
                let sanitizedVariationName = selectedOptionText
                    .replace(/\s+/g, '_')     // Replace spaces with underscores
                    .replace(/[&]/g, 'and')    // Replace '&' with 'and'
                    .toLowerCase();           // Convert to lowercase

                let variationContainerClass = sanitizedVariationName + 'Section';

                // Ensure the container exists, if not create one
                let container = $('.addProductVariationField .' + variationContainerClass);
                if (container.length === 0) {
                    // Dynamically create the container if it doesn't exist
                    $('.addProductVariationField').append('<div class="' + variationContainerClass + '"></div>');
                    container = $('.addProductVariationField .' + variationContainerClass); // Get the newly created container
                }

                // Append the newFirstForm to the dynamically created or found container
                container.append(newFirstForm);
            }
        });


        // Handle "Add Variation" button click to append the second form
        $(document).on('click', '.addSelectedProductVariation', function () {
            let selectedVariationId = $(this).data('variation-id');

            // Ensure a variation name is selected before proceeding
            let selectedVariationName = $(this).data('select-variation-name') // Get the selected variation name

            console.log(selectedVariationName)
            if (!selectedVariationName) {
                alert("Please select a variation name first.");
                return; // Exit if no variation is selected
            }

            let randomId = Math.floor(Math.random() * 10000);

            // Generate and append the second form (generateSecondForm)
            let newSecondForm = generateSecondForm(randomId, selectedVariationId);

            // Sanitize the variation name for the class name
            let sanitizedVariationName = selectedVariationName
                .replace(/\s+/g, '_')     // Replace spaces with underscores
                .replace(/[&]/g, 'and')    // Replace '&' with 'and'
                .toLowerCase();           // Convert to lowercase

            // Log the container class for debugging
            let variationContainerClass = sanitizedVariationName + 'Section'; // e.g., peaches_and_cream_concealerSection
            console.log(variationContainerClass); // This will show the class name in the console for debugging.


            // Ensure the container exists, if not create one
            let container = $('.addProductVariationField .' + variationContainerClass);
            if (container.length === 0) {
                // Dynamically create the container if it doesn't exist
                $('.addProductVariationField').append('<div class="' + variationContainerClass + '"></div>');
                container = $('.addProductVariationField .' + variationContainerClass); // Get the newly created container
            }

            // Append the newSecondForm to the dynamically created or found container
            container.append(newSecondForm);

            // To get the last selected variation option, we can check the select dropdown
            let lastSelectedOption = $('.selectVariationName select option:selected').last();
            let lastSelectedOptionId = lastSelectedOption.val();
            console.log('Last selected variation ID:', lastSelectedOptionId); // Log the last variation ID
        });




        // Handle "AllRemove" button click to remove forms for the same variation
        $(document).on('click', '.productVariationRemoveBtn', function () {
            let selectedVariationId = $(this).data('variation-id');

            // Remove all forms related to the selected variation ID
            $(`[data-variation-id="${selectedVariationId}"]`).remove();
        });

        // Handle individual "Remove" button for second forms
        $(document).on('click', '.selectedProductVariationRemoveBtn', function () {
            $(this).closest('.product-variation-data').remove();
        });

        function removeFormSection(button, selectedVariationId) {
            // Get the section ID to be removed
            var sectionId = $(button).data('get-remove-section');

            // Append a hidden input to track removed sections
            var removeSectionInput = $('<input>').attr({
                type: 'hidden',
                name: 'remove_product_variation[]',
                value: sectionId
            });
            $('form').append(removeSectionInput);

            // Remove the closest form-section element
            var formSection = $(button).closest('.form-section');
            formSection.remove();

            // Check if there are any remaining product variations for the selected variation name
            var remainingVariations = $('input[name="single_entry_product_variation_id[]"][value="' + selectedVariationId + '"]').length;

            if (remainingVariations === 0) {
                // If no variations are left, remove the Variation Name <p> tag
                $('#removeVariationName' + selectedVariationId).remove();
                var removeVariationInput = $('<input>').attr({
                    type: 'hidden',
                    name: 'remove_select_variation_name_id[]',
                    value: selectedVariationId
                });
                $('form').append(removeVariationInput);
            }

            // Check if there are any remaining .form-section elements globally
            if ($('.form-section').length === 0) {
                // Hide the Select Variation Name dropdown
                $('.selectVariationName').addClass('d-none');
                // Reset the selected variation name
                $('.variationNameSelect').val('');
            }
        }


    </script>

@endsection