@extends('layouts.admin-layout')
@section('title')
    Add Products
@endsection
@section('content')
    <style>
        .toggle {
            min-width: 89.4px !important;
            min-height: 41px !important;
        }
        .select2-selection__choice{
             color: #000000!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">Add 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.store') }}" method="POST"
                                      enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="Name">Product Name:</label>
                                                <input type="text" class="form-control form__field" name="product_name"
                                                       placeholder="Enter Product Name">
                                            </div>
                                            <small class="text-danger">
                                                @error('product_name')
                                                {{ $message }}
                                                @enderror
                                            </small>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="Name">Product Full Name:</label>
                                                <input type="text" class="form-control form__field"
                                                       name="product_full_name"
                                                       placeholder="Enter Product Name">
                                            </div>
                                            <small class="text-danger">
                                                @error('product_full_name')
                                                {{ $message }}
                                                @enderror
                                            </small>
                                        </div>

                                        <div class="col-md-4 mt-3">
                                            <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 ?: '' }}">
                                                            {{ $category->category_name ?: '' }}</option>
                                                    @empty
                                                        <option value="" selected disabled>Category Not Found</option>
                                                    @endforelse
                                                </select>

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


                                        <div class="col-md-4 mt-3">
                                            <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 ?: '' }}">
                                                            {{ $sub_category->sub_cate_name ?: '' }}</option>
                                                    @empty
                                                        <option value="" selected disabled>Sub Category Not Found
                                                        </option>
                                                    @endforelse
                                                </select>

                                            </div>
                                        </div>


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

                                                @forelse($get_brands as $brand)
                                                    <!-- Brand Selectable -->
                                                        <option value="{{ $brand->id }}">{{ $brand->brand_name }}</option>

                                                        <!-- Brand Options (disabled) -->
                                                        @if($brand->brandOption->count() > 0)
                                                            @foreach($brand->brandOption as $option)
                                                                <option value="" disabled>— {{ $option->brand_option_name }}</option>
                                                            @endforeach
                                                        @else
                                                            <option value="" disabled>— No Options Available</option>
                                                        @endif
                                                    @empty
                                                        <option value="" selected disabled>No Brands Found</option>
                                                    @endforelse
                                                </select>

                                            </div>
                                        </div>


                                        <div class="col-md-4 mt-4">
                                            <div class="form-group">
                                                <label for="Name">Product Main Price:</label>
                                                <input type="text"
                                                       class="form-control form__field"
                                                       name="product_price"
                                                       placeholder="Enter Price"
                                                       oninput="this.value = this.value
                                                       .replace(/[^0-9.]/g, '')
                                                     .replace(/(\..*)\./g, '$1')">
                                            </div>
                                            <small class="text-danger">
                                                @error('product_price')
                                                {{ $message }}
                                                @enderror
                                            </small>
                                        </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"
                                                       placeholder="Enter 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-4 mt-4">
                                            <div class="form-group">
                                                <label for="Name">This Checkbox Show The Single Product :</label>
                                                <input type="checkbox" class="form-control form__field"
                                                       name="product_stock_status">

                                            </div>

                                        </div>

                                        <div class="col-md-12">
                                            <div style="display: flex;gap: 22px;">
                                                <label for="Name">Consultation Button:</label>
                                                {{--                                                <label for="Name">online consultation sections</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="consultation_btn_status" checked>

                                                {{--                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"--}}
                                                {{--                                                       data-off="No" data-onstyle="success"--}}
                                                {{--                                                       data-offstyle="danger" name="online_consultation_sections_status"--}}
                                                {{--                                                       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="{{ asset('upload/No-Image.png') }}"
                                                 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"></textarea>
                                            <small class="text-danger">
                                                @error('description')
                                                {{ $message }}
                                                @enderror
                                            </small>

                                        </div>

                                        <div class="col-md-12 mt-4">
                                            <label for="">product detail page short description</label>
                                            <textarea name="product_detail_page_short_description" rows="4"
                                                      placeholder="Description" class="form-control"
                                                      id="summernote2"></textarea>
                                            <small class="text-danger">
                                                @error('product_detail_page_short_description')
                                                {{ $message }}
                                                @enderror
                                            </small>

                                        </div>


                                        <div class="col-md-12 mt-4">
                                            <label for="">product detail page left description</label>
                                            <textarea name="product_detail_page_left_description" rows="4"
                                                      placeholder="Description" class="form-control"
                                                      id="summernote3"></textarea>
                                            <small class="text-danger">
                                                @error('product_detail_page_left_description')
                                                {{ $message }}
                                                @enderror
                                            </small>

                                        </div>

                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="Name">Meta Title:</label>
                                                <input type="text" class="form-control form__field" name="meta_title"
                                                       id="meta_title" placeholder="Enter Meta Title">
                                                <span class="text-danger" id="meta_title_error"></span>
                                                @error('meta_title')
                                                <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-12 mt-4 mb-4">
                                            <label for="">Meta Description</label>
                                            <textarea name="meta_description" id="meta_description" rows="4"
                                                      placeholder="Description"
                                                      class="form-control form__field"></textarea>
                                            <span class="text-danger" id="meta_description_error"></span>
                                            @error('meta_description')
                                            <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </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;">
                                                        <label for="Name">Show Product Brand:</label>
                                                        <input type="checkbox" id="productBrandCheckbox"
                                                               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">
                                                    </div>
                                                    <div class="d-none brand-show">

                                                        <div class="col-md-4 mt-4 mx-auto">
                                                            <div class="form-group">
                                                                <label>Select Quantity:</label>
                                                                <select class="form-control select2Quantity" name="select_brand_quantity_ids[]" style="width: 100%;"multiple="multiple">
                                                                    @forelse($get_quantities as $quantity)
                                                                        <option value="{{$quantity->id}}">{{$quantity->quantity_name ? : ''}}</option>
                                                                    @empty
                                                                        <option value="" selected disabled>Quantity Not Found</option>
                                                                    @endforelse
                                                                </select>
                                                            </div>

                                                        </div>
                                                        <div class="col-md-4 mt-4 mx-auto">
                                                            <div class="form-group">
                                                                <label>Select Brand Name:</label>



                                                                <select class="form-control select2Brand" name="select_brand_ids[]" style="width: 100%;"multiple="multiple">
                                                                    @forelse($get_brand_options as $brand_option)
                                                                        <option value="{{$brand_option->id}}">{{$brand_option->brand_option_name ? : ''}}</option>
                                                                    @empty
                                                                        <option value="" selected disabled>Brand Name Not Found</option>
                                                                    @endforelse
                                                                </select>

                                                            </div>
                                                        </div>

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


                                    </div>



                                    <div class="text-center mt-3 mb-2">
                                        <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).ready(function () {
            $('.select2').select2({
                placeholder: "Select an option",
                allowClear: true
            });
            $('.select2Quantity').select2({
                placeholder: "Select an option",
                allowClear: true
            });
            $('.select2Brand').select2({
                placeholder: "Select an option",
                allowClear: true
            });


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

        $(function () {
            // Page load par No set karo
            $('input[name="consultation_btn_status"]').bootstrapToggle('off');
            $('input[name="online_consultation_sections_status"]').bootstrapToggle('off');

        });


    </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]);
            }
        }

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

        const imageInput = document.getElementById('productFirstGalleryImageInput');
        imageInput.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]);
            }
        }


        // Event delegation for dynamically generated image inputs
        document.addEventListener('change', function (event) {
            if (event.target && event.target.name === 'variation_image[]') {
                const inputId = event.target.id; // ID of the file input
                const previewId = `variationImagePreview${inputId.replace('variationImageInput', '')}`; // Get corresponding preview ID
                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>
        document.addEventListener('DOMContentLoaded', function () {
            const brandCheckbox = document.getElementById('productBrandCheckbox');
            const variationCheckbox = document.getElementById('productVariationCheckbox');
            const brandSection = document.querySelector('.brand-show');
            const selectVariationName = document.querySelector('.selectVariationName');
            const variationField = document.querySelector('.addProductVariationField');
            const selectField = selectVariationName ? selectVariationName.querySelector('select') : null;
            const inputs = variationField ? variationField.querySelectorAll('.form__field') : [];

            // --- PRODUCT VARIATION CHECKBOX FUNCTIONALITY ---
            variationCheckbox.addEventListener('change', function () {
                if (variationCheckbox.checked) {
                    // Show variation area
                    selectVariationName.classList.remove('d-none');
                    selectField?.setAttribute('required', 'required');
                    inputs.forEach(input => input.setAttribute('required', 'required'));

                    // Hide brand section
                    brandSection?.classList.add('d-none');
                    brandCheckbox.checked = false;

                    // ✅ Hide only the *brand checkbox itself*, not its parent container
                    brandCheckbox.style.display = 'none';
                    variationCheckbox.style.display = 'inline-block';
                } else {
                    selectVariationName.classList.add('d-none');
                    selectField?.removeAttribute('required');
                    inputs.forEach(input => input.removeAttribute('required'));

                    // Show brand checkbox again
                    brandCheckbox.style.display = 'inline-block';
                }
            });

            // --- PRODUCT BRAND CHECKBOX FUNCTIONALITY ---
            brandCheckbox.addEventListener('change', function () {
                if (brandCheckbox.checked) {
                    // Show brand area
                    brandSection?.classList.remove('d-none');

                    // Hide variation section
                    variationCheckbox.checked = false;
                    selectVariationName?.classList.add('d-none');
                    selectField?.removeAttribute('required');
                    inputs.forEach(input => input.removeAttribute('required'));

                    // ✅ Hide only the *variation checkbox itself*
                    variationCheckbox.style.display = 'none';
                    brandCheckbox.style.display = 'inline-block';
                } else {
                    brandSection?.classList.add('d-none');

                    // Show variation checkbox again
                    variationCheckbox.style.display = 'inline-block';
                }
            });
        });
    </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="d-flex">
                <div class="col-md-4 mt-4">
                   <div class="form-group " style="background: #242d3e; border: 0;outline: 0;border-radius: 20px;padding:4px;align-items: center;justify-content: center;">
                        <label for="selected_variation_name_id" style="color:#fff;margin-top:7px;margin-left: 89px;">Selected Variation Name : <span style="color:#fff;padding:6px;">${selectedVariationName}</span></label>
                        <input type="hidden" name="selected_variation_name_id[]" value="${selectedVariationId}" class="form-control form__field">

                    </div>
    </div>


     <div class="col-md-4 mt-4">
                        <div class="form-group">

          <select class="form-control select2" name="quantity_ids[]" style="width: 100%;"multiple="multiple">

                        option value="" selected disabled>Select Quantity</option>
                          @forelse($get_quantities as $quantity)
            <option value="{{$quantity->id}}">{{$quantity->quantity_name ? : ''}}</option>
                              @empty
            <option value="" selected disabled>Quantity Not Found</option>
                @endforelse
            </select>
            </div>

            </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-2 mt-4">
                <div class="form-group">
                    <label for="option_name[]">Variation Unit Full Name:</label>
                    <input type="text" name="option_name[]"
                           class="form-control form__field"
                           placeholder="Enter Variation Unit Names"required>
                </div>
            </div>

             <div class="col-md-2">
             <div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" name="is_strength[]">Strength Treatment Page
  </label>
</div>
                <div class="form-group">
                    <label for="variation_unit_short_name[]">Variation Unit short Name:</label>
                    <input type="text" name="variation_unit_short_name[]"
                           class="form-control form__field"
                           placeholder="Enter Variation Unit short Name"required>
                </div>
            </div>


         <div class="col-md-2 mt-4">
    <div class="form-group">
        <label for="variation_unit_price[]">Variation Unit Price:</label>
        <input type="text" name="variation_unit_price[]"
               class="form-control form__field variation_unit_price"
               placeholder="Enter Variation Unit Price"
               oninput="calculateVariation(this)"
                oninput="this.value = this.value
                 .replace(/[^0-9.]/g, '')
                 .replace(/(\..*)\./g, '$1')"
               required>




    </div>
</div>

<div class="col-md-2 mt-4">
    <div class="form-group">
        <label for="variation_qty[]">Variation Qty:</label>
        <input type="number" name="variation_qty[]"
               class="form-control form__field variation_qty"min="1"
               placeholder="Enter Variation Qty"
               oninput="calculateVariation(this)"
               required>
    </div>
</div>

<div class="col-md-2 mt-4">
    <div class="form-group">
        <label for="variation_per_price[]">Show Variation Per Price:</label>
        <input type="number"
               name="variation_per_price[]"
               class="form-control variation_per_price"
               placeholder="Show Variation Per Price"
               readonly
               style="min-height: 50px; padding: 14px; border-radius: 20px;">
    </div>
</div>



            <div class="col-md-2 mt-4">
            <div class="form-group">
                <label for="variationImageInput${randomId}">Variation Image:</label>
                <input type="file" name="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="selected_variation_name_id[]" value="${selectedVariationId}" class="form-control form__field">


             <div class="col-md-2 mt-4">
                <div class="form-group">
                    <label for="option_name[]">Variation Unit Full Name:</label>
                    <input type="text" name="option_name[]"
                           class="form-control form__field"
                           placeholder="Enter Variation Unit Names"required>
                </div>
            </div>

  <div class="col-md-2">
             <div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" name="is_strength[]">Strength Treatment Page
  </label>
</div>
                <div class="form-group">
                    <label for="variation_unit_short_name[]">Variation Unit short Name:</label>
                    <input type="text" name="variation_unit_short_name[]"
                           class="form-control form__field"
                           placeholder="Enter Variation Unit short Name"required>
                </div>
            </div>

    <div class="col-md-2 mt-4">
    <div class="form-group">
        <label for="variation_unit_price[]">Variation Unit Price:</label>
        <input type="text" name="variation_unit_price[]"
               class="form-control form__field variation_unit_price"
               placeholder="Enter Variation Unit Price"
               oninput="calculateVariation(this)"
                oninput="this.value = this.value
                 .replace(/[^0-9.]/g, '')
                 .replace(/(\..*)\./g, '$1')"
               required>
    </div>
</div>



<div class="col-md-2 mt-4">
    <div class="form-group">
        <label for="variation_qty[]">Variation Qty:</label>
        <input type="number" name="variation_qty[]"
               class="form-control form__field variation_qty"min="1"
               placeholder="Enter Variation Qty"
               oninput="calculateVariation(this)"
               required>
    </div>
</div>

<div class="col-md-2 mt-4">
    <div class="form-group">
        <label for="variation_per_price[]">Show Variation Per Price:</label>
        <input type="number"
               name="variation_per_price[]"
               class="form-control variation_per_price"
               placeholder="Show Variation Per Price"
               readonly
               style="min-height: 50px; padding: 14px; border-radius: 20px;">
    </div>
</div>

              <div class="col-md-2 mt-4">
            <div class="form-group">
                <label for="variationImageInput${randomId}">Variation Image:</label>
                <input type="file" name="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);
                // 🟢 Initialize Select2 for the newly added select only
                $('#formSection' + randomId + ' .select2').select2({
                    placeholder: "Select Quantity",
                    allowClear: true,
                    width: '100%'
                });
            }
        });


        // 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();
        });
    </script>



    <script>
        function calculateVariation(element) {
            // Parent row find karo
            let row = element.closest('.col-md-2').parentElement;

            let unitPrice = row.querySelector('.variation_unit_price').value;
            let qty = row.querySelector('.variation_qty').value;
            let perPriceInput = row.querySelector('.variation_per_price');

            unitPrice = parseFloat(unitPrice) || 0;
            qty = parseFloat(qty) || 0;

            if (qty > 0) {
                perPriceInput.value = (unitPrice / qty).toFixed(2);
            } else {
                perPriceInput.value = "";
            }
        }
    </script>

{{--    <script>--}}
{{--        $(document).ready(function() {--}}
{{--            $('#productBrandCheckbox').on('change', function() {--}}
{{--                if ($(this).is(':checked')) {--}}
{{--                    $('.d-none.brand-show').removeClass('d-none');--}}
{{--                } else {--}}
{{--                    $('.brand-show').addClass('d-none');--}}
{{--                }--}}
{{--            });--}}
{{--        });--}}
{{--    </script>--}}


@endsection