@extends('layouts.admin-layout')
@section('title') Edit Products
@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-6">
                                            <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-6">
                                            <div class="form-group">
                                                <label for="Name">Product Full Name:</label>
                                                <input type="text" class="form-control form__field"
                                                       name="product_full_name"
                                                       value="{{$find_product->product_full_name ? : ""}}"></div>
                                            <small
                                                class="text-danger">@error ('product_full_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="subcategory" class="form-control form__field"
                                                        name="brand_name">
                                                    <option value="" selected disabled>Select Brand</option>
                                                    @forelse($get_brands as $brand)
                                                        <option
                                                            value="{{ $brand->id }}"
                                                            {{ $find_product->brand_id == $brand->id ? 'selected' : '' }}>
                                                            {{ $brand->brand_name }}
                                                        </option>

                                                        @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 Price:</label>
                                                <input type="text" class="form-control form__field"
                                                       name="product_price"
                                                       value="{{$find_product->product_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"
                                                       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-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"{{ $find_product->product_stock_status === 1 ? 'checked' : '' }}>

                                            </div>

                                        </div>


                                        <div class="col-md-12 mt-4">
                                            <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"{{ $find_product->consultation_btn_status === 1 ? 'checked' : '' }}>


                                                {{--                                                <input type="checkbox" data-toggle="toggle" data-on="Yes"--}}
                                                {{--                                                       data-off="No" data-onstyle="success"--}}
                                                {{--                                                       data-offstyle="danger" name="online_consultation_sections_status"{{ $find_product->online_consultation_sections_status === 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-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">{!! $find_product->product_detail_page_short_description ? : "" !!}</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">{!! $find_product->product_detail_page_left_description ? : "" !!}</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" value="{{$find_product->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">{!! $find_product->meta_description ? : '' !!}</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;" {{ $brand_assignment_exists ? 'checked' : '' }}>
                                                    </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>

                                                    @if($find_single_product_variation_name->count() > 0)
                                                        <div class="card-body addProductVariationField">
                                                            @foreach($find_single_product_variation_name as $product)
                                                                @foreach($product->singleEntryProductVariation as $single_entry)

                                                                    <div class="d-flex mx-auto">
                                                                        <p class="d-flex 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>

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

                                                                                <select class="form-control myselect2"
                                                                                        name="quantity_ids[]"
                                                                                        style="width: 100%;"
                                                                                        multiple="multiple">
                                                                                    <option value="" disabled>Select
                                                                                        Quantity
                                                                                    </option>
                                                                                    @forelse($get_quantities as $quantity)
                                                                                        <option
                                                                                            value="{{ $quantity->id }}"
                                                                                            @if($find_product->quantities->pluck('id')->contains($quantity->id)) selected @endif>
                                                                                            {{ $quantity->quantity_name ?? '' }}
                                                                                        </option>
                                                                                    @empty
                                                                                        <option value="" disabled>
                                                                                            Quantity Not Found
                                                                                        </option>
                                                                                    @endforelse
                                                                                </select>


                                                                            </div>

                                                                        </div>
                                                                    </div>

                                                                    <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-2 mt-4">
                                                                                <div class="form-group">
                                                                                    <label for="option_name[]">variation
                                                                                        Unit
                                                                                        Name:</label>
                                                                                    <input type="text"
                                                                                           name="variation_unit_name[]"
                                                                                           class="form-control form__field"
                                                                                           value="{{ $product_variation->variation_unit_name ?? '' }}">
                                                                                </div>
                                                                            </div>


                                                                            <div class="col-md-2">
                                                                                <input type="checkbox"
                                                                                       class="form-check-input-{{$index}}"
                                                                                       name="is_strength[{{ $product_variation->id }}]"
                                                                                       value="1"
                                                                                    {{ $product_variation->is_strength == 1 ? 'checked' : '' }}>
                                                                                Strength Treatment Page
                                                                                <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"
                                                                                           value="{{ $product_variation->variation_unit_short_name ?? '' }}">
                                                                                </div>
                                                                            </div>


                                                                            <div class="col-md-2 mt-4">
                                                                                <div class="form-group">
                                                                                    <label for="variation_unit_price[]">Variation
                                                                                        Unit Price:</label>
                                                                                    <input type="number"
                                                                                           name="variation_unit_price[]"
                                                                                           class="form-control form__field variation_unit_price"
                                                                                           value="{{ $product_variation->variation_unit_price ?? '' }}"
                                                                                           oninput="existingCalculateVariation(this)">
                                                                                </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"
                                                                                           value="{{ $product_variation->variation_qty ?? '' }}"
                                                                                           placeholder="Enter Variation Qty"
                                                                                           oninput="existingCalculateVariation(this)">
                                                                                </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"
                                                                                           value="{{ $product_variation->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="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>
                                                    @endif


                                                    @if($brand_assignment_exists)
                                                        <div class="brand-show">

                                                            {{-- Remove Button --}}
                                                            <div class="col-md-12">
                                                                <button type="button"
                                                                        class="custom_btn_sm_back custom_btn btn-sm float-right removeExistingBrandBtn"
                                                                        data-product-id="{{ $find_product->id }}"
                                                                        data-brand-id="{{ implode(',', $assigned_brand_ids) }}">
                                                                    <i class="fas fa-trash-alt"></i> Remove
                                                                </button>
                                                            </div>

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

                                                            {{-- Select Brand Option --}}
                                                            <div class="col-md-4 mt-4 mx-auto">
                                                                <div class="form-group">
                                                                    <label>Select Brand Name:</label>
                                                                    <select name="existing_selected_brand[]" id="select_brand"
                                                                            class="form-control select2Brand" multiple>
                                                                        @forelse($get_brand_options as $brand_option)
                                                                            <option value="{{ $brand_option->id }}"
                                                                                {{ in_array($brand_option->id, $assigned_brand_ids) ? 'selected' : '' }}>
                                                                                {{ $brand_option->brand_option_name ?? '' }}
                                                                            </option>
                                                                        @empty
                                                                            <option value="" disabled>Brand Not Found</option>
                                                                        @endforelse
                                                                    </select>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    @endif




                                                    <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="add_new_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="add_new_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">
                                        <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>

        $('.myselect2').select2({
            placeholder: "Select Quantity",
            allowClear: true,
            width: '100%'
        });
        $('.select2Quantity').select2({
            placeholder: "Select an option",
            allowClear: true
        });


        $('.select2Brand').select2({
            placeholder: "Select an option",
            allowClear: true
        });

        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
        });
        $('#summernote2').summernote({
            placeholder: 'Hello Admin',
            tabsize: 2,
            height: 100
        });

        $('#summernote3').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>
        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 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>

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

          <select class="form-control select2" name="add_new_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="add_new_variation_unit_name[]">Variation unit Name:</label>
                    <input type="text" name="add_new_variation_unit_name[]"
                           class="form-control form__field"
                           placeholder="Enter Variation unit Name"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="add_new_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="add_new_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="add_new_variation_unit_price[]">Variation Unit Price:</label>
        <input type="number" name="add_new_variation_unit_price[]"
               class="form-control form__field variation_unit_price"
               placeholder="Enter Variation Unit Price"
               oninput="calculateVariation(this)"
               required>
    </div>
</div>

<div class="col-md-2 mt-4">
    <div class="form-group">
        <label for="add_new_variation_qty[]">Variation Qty:</label>
        <input type="number" name="add_new_variation_qty[]"
               class="form-control form__field variation_qty"min="1"
               placeholder="Enter Variation Qty"
               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="add_new_variation_per_price[]">Show Variation Per Price:</label>
        <input type="number"
               name="add_new_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="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-2 mt-4">
                <div class="form-group">
                    <label for="add_new_variation_unit_name[]">Variation unit Name:</label>
                    <input type="text" name="add_new_variation_unit_name[]"
                           class="form-control form__field"
                           placeholder="Enter Variation unit Name"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="add_new_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="add_new_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="add_new_variation_unit_price[]">Variation Unit Price:</label>
        <input type="number" name="add_new_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="add_new_variation_qty[]">Variation Qty:</label>
        <input type="number" name="add_new_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="add_new_variation_per_price[]">Show Variation Per Price:</label>
        <input type="number"
               name="add_new_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="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);
                $('#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();
        });

        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();


            let brandSection = $('.existing_quantity');
            brandSection.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>
    <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>
        function existingCalculateVariation(element) {
            // Yaha har ek variation row ka wrapper hai "form-section"
            let row = element.closest('.form-section');

            // Get inputs from this row
            let unitPriceInput = row.querySelector('.variation_unit_price');
            let qtyInput = row.querySelector('.variation_qty');
            let perPriceInput = row.querySelector('.variation_per_price');

            let unitPrice = parseFloat(unitPriceInput?.value) || 0;
            let qty = parseFloat(qtyInput?.value) || 0;

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

    </script>


    <script>
        $(document).on('click', '.removeExistingBrandBtn', function () {
            let productId = $(this).data('product-id');
            let brandId = $(this).data('brand-id');
            let brandSection = $(this).closest('.brand-show');
            let quantityIds = [];
            $('.select2Quantity').each(function () {
                let vals = $(this).val();
                if (vals) {
                    quantityIds = quantityIds.concat(vals);
                }
            });

            let form = $('form');

            form.append(`
        <input type="hidden" name="remove_product_id" value="${productId}">
        <input type="hidden" name="remove_brand_id" value="${brandId}">
    `);

            quantityIds.forEach(qtyId => {
                form.append(`<input type="hidden" name="remove_quantity_ids[]" value="${qtyId}">`);
            });
            brandSection.remove();

        });
    </script>


@endsection