@extends('layouts/contentLayoutMaster')
@php
    $dimensions = \App\Models\Dimension::query()
    ->where('is_custom', false)
    ->orWhereHas('products', function ($q) use ($model) {
    $q->where('dimensionable_id', $model->id)->where('dimensionable_type', get_class($model));
    })
    ->get(['id', 'name']);
    $variantsForJs = $model->variants->mapWithKeys(function ($variant) {
            $media = $variant->media->first();

            return [
                $variant->key => [
                    'id' => $variant->id,
                    'image' => $media?->id,
                    'image_url' => $media?->original_url,
                ]
            ];
        });
    $specs =  $model->specifications
      ->filter(fn($spec) => $spec->fixed_key !== 'cutting')
      ->map(function ($spec) {
        return [
          'name' => $spec->getTranslation('name', 'en'),
          'options' => $spec->options
            ->map(fn($opt) => $opt->getTranslation('value', 'en'))
            ->filter()
            ->values()
            ->toArray(),
        ];
      })
      ->filter(fn($row) => !empty($row['name']) && count($row['options']))
      ->values();

    $mediaToArray = function ($media) {
        if (! $media) {
            return null;
        }

        return [
            'id' => $media->id ?? null,
            'file_name' => $media->file_name ?? 'Image',
            'size' => $media->size ?? 12345,
            'url' => method_exists($media, 'getUrl') ? $media->getUrl() : ($media->original_url ?? null),
        ];
    };

    $getOptionFrameMedia = function ($option) {
        $frame = null;

        if ($option->relationLoaded('frameImage') || method_exists($option, 'frameImage')) {
            $frame = $option->frameImage;
        }

        if (! $frame && ($option->relationLoaded('frame_image') || method_exists($option, 'frame_image'))) {
            $frame = $option->frame_image;
        }

        if (! $frame && method_exists($option, 'getFirstMedia')) {
            $frame = $option->getFirstMedia('option_frame_image')
                ?? $option->getFirstMedia('frame_image')
                ?? $option->getFirstMedia('option_frame');
        }

        return is_object($frame) ? $frame : null;
    };
@endphp
@section('title', 'Edit Categories')
@section('main-page', 'Categories')
@section('sub-page', 'Edit Category')
@section('main-page-url', route("products.index"))
@section('sub-page-url', route("products.edit",$model->id))
@section('vendor-style')
    <!-- Vendor CSS Files -->
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection

@section('content')
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-12">
                <div class="card">

                    <div class="card-body">
                        <form id="product-form" class="form" action="{{ route('products.update',$model->id) }}"
                              method="POST" enctype="multipart/form-data">
                            @csrf
                            @method("PUT")
                            {{-- checkbox added --}}
                            <div class="px-2 row gap-2">

                                <div class="d-flex gap-1 rounded p-1 mb-2 col" style="border: 1px solid #CED5D4">
                                    <div>
                                        <!-- Hidden fallback -->
                                        <input type="hidden" name="show_add_cart_btn" value="0">

                                        <!-- Actual checkbox -->
                                        <input class="form-check-input mt-0" type="checkbox"
                                               name="show_add_cart_btn" value="1"
                                            @checked(old('show_add_cart_btn', $model->show_add_cart_btn ?? false))>
                                    </div>
                                    <div class="d-flex flex-column gap-1">
                                        <h5 style="color: #121212">Show “Add to Cart” Button</h5>
                                        <p style="color: #424746">
                                            When the checkbox is selected, the product can be added directly to the cart
                                            without customization.
                                            If it’s not selected, the product must be customized before being added to
                                            cart.
                                        </p>
                                    </div>
                                </div>
                                <div class="d-flex gap-1 rounded p-1 mb-2 col" style="border: 1px solid #CED5D4">
                                    <div>
                                        <!-- Hidden fallback -->
                                        <input type="hidden" name="show_customize_design_btn" value="0">

                                        <!-- Actual checkbox -->
                                        <input class="form-check-input mt-0" type="checkbox"
                                               name="show_customize_design_btn" value="1"
                                            @checked(old('show_customize_design_btn', $model->show_customize_design_btn ?? false))>
                                    </div>
                                    <div class="d-flex flex-column gap-1">
                                        <h5 style="color: #121212">Show “Customize Design” Button</h5>
                                        <p style="color: #424746">
                                            When the checkbox is selected, the product can be customized before being
                                            added to cart.
                                        </p>
                                    </div>
                                </div>
                            </div>


                            <ul class="nav nav-tabs mb-4 w-100 d-flex justify-content-center" id="formTabs">
                                <li class="nav-item" style="width: 30%;">
                                    <a class="nav-link active" data-step="0" href="#" style="font-size: 14px;">Category
                                        Details</a>
                                </li>
                                <li class="nav-item" style="width: 30%;">
                                    <a class="nav-link" data-step="1" href="#" style="font-size: 14px;">Quantity &
                                        Price</a>
                                </li>
                                <li class="nav-item" style="width: 30%;">
                                    <a class="nav-link" data-step="2" href="#" style="font-size: 14px;">Category
                                        Specs</a>
                                </li>
                            </ul>


                            <div class="tab-content">
                                <!-- first tab content -->
                                <div class="tab-pane active" id="step1">
                                    <div class="row">
                                        <!-- Category Name EN/AR -->
                                        <div class="col-md-6">
                                            <div class="mb-1">
                                                <label class="form-label label-text" for="product-name-en">Category Name
                                                    (EN)</label>
                                                <input type="text" id="product-name-en"
                                                       value="{{ $model->getTranslation('name','en') }}"
                                                       class="form-control" name="name[en]"
                                                       placeholder="Category Name (EN)"/>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-1">
                                                <label class="form-label label-text" for="product-name-ar">Category Name
                                                    (AR)</label>
                                                <input type="text" id="product-name-ar"
                                                       value="{{ $model->getTranslation('name','ar') }}"
                                                       class="form-control" name="name[ar]"
                                                       placeholder="Category Name (AR)"/>
                                            </div>
                                        </div>

                                        <!-- Description EN/AR -->
                                        <div class="col-md-6">
                                            <div class="mb-1">
                                                <label class="form-label label-text" for="description-en">Category
                                                    Description (EN)</label>
                                                <textarea name="description[en]" id="description-en"
                                                          class="form-control"
                                                          placeholder="Category Description (EN)">{{ $model->getTranslation('description','en') }}</textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-1">
                                                <label class="form-label label-text" for="description-ar">Category
                                                    Description (AR)</label>
                                                <textarea name="description[ar]" id="description-ar"
                                                          class="form-control"
                                                          placeholder="Category Description (AR)">{{ $model->getTranslation('description','ar') }}</textarea>
                                            </div>
                                        </div>

                                        <!-- Main Image Upload -->
                                        <div class="col-md-12">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="product-image-main">Category
                                                    Image (main)</label>

                                                <!-- Dropzone Container -->
                                                <div id="product-main-dropzone" class="dropzone border rounded p-3"
                                                     style="cursor:pointer; min-height:150px;">
                                                    <div class="dz-message" data-dz-message>
                                                        <span>Drop image here or click to upload</span>
                                                    </div>
                                                </div>

                                                <!-- Hidden input: prefilled if editing -->
                                                <input type="hidden" name="image_id" id="uploadedImage"
                                                       value="{{ $model->getFirstMedia('product_main_image')?->id ?? '' }}">

                                                <span class="image-hint small text-end">
                            Max size: 1MB | Dimensions: 512x512 px
                        </span>
                                            </div>
                                        </div>
                                        <!-- Model Image Upload -->
                                        <div class="col-md-12">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="product-image-main">
                                                    Category Model Image (main)*
                                                </label>

                                                <!-- Dropzone Container -->
                                                <div id="product-model-dropzone" class="dropzone border rounded p-3"
                                                     style="cursor:pointer; min-height:150px;">
                                                    <div class="dz-message" data-dz-message>
                                                        <span>Drop image here or click to upload</span>
                                                    </div>
                                                </div>

                                                <!-- ✅ Hidden input outside Dropzone -->
                                                <input type="hidden" name="image_model_id" id="uploadedImageModel">

                                                <span class="image-hint small text-end">
                                                Max size: 1MB | Dimensions: 512x512 px
                                            </span>

                                                <!-- Uploaded Image Preview -->
                                                <div id="uploaded-image-model"
                                                     class="uploaded-image d-none position-relative mt-1 d-flex align-items-center gap-2">
                                                    <img src="" alt="Uploaded" class="img-fluid rounded"
                                                         style="width: 50px; height: 50px; object-fit: cover;">
                                                    <div id="file-details" class="file-details">
                                                        <div class="file-name fw-bold"></div>
                                                        <div class="file-size text-muted small"></div>
                                                    </div>
                                                    <button type="button" id="remove-image"
                                                            class="btn btn-sm position-absolute text-danger"
                                                            style="top: 5px; right: 5px; background-color: #FFEEED">
                                                        <i data-feather="trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Category Colors --}}
                                        {{--                                        <div class="col-md-12">--}}
                                        {{--                                            <div class="mb-2">--}}
                                        {{--                                                <label class="form-label label-text">Category Colors</label>--}}

                                        {{--                                                @php--}}
                                        {{--                                                    $colors = collect($model->colors) ?? collect();--}}
                                        {{--                                                    $hasColors = $colors->isNotEmpty();--}}
                                        {{--                                                @endphp--}}

                                        {{--                                                <div class="color-repeater">--}}
                                        {{--                                                    <div data-repeater-list="colors">--}}
                                        {{--                                                        @forelse($colors as $color)--}}

                                        {{--                                                            <div data-repeater-item>--}}
                                        {{--                                                                <div class="row align-items-start mt-1">--}}

                                        {{--                                                                    --}}{{-- Color value --}}
                                        {{--                                                                    <div class="col-md-12">--}}
                                        {{--                                                                        <label class="form-label label-text">Color Value--}}
                                        {{--                                                                            *</label>--}}
                                        {{--                                                                        <div class="d-flex gap-1 align-items-center">--}}
                                        {{--                                                                            --}}{{-- Color picker --}}
                                        {{--                                                                            <input--}}
                                        {{--                                                                                type="color"--}}
                                        {{--                                                                                class="form-control rounded-circle color-picker border border-0"--}}
                                        {{--                                                                                style="max-width: 30px; padding: 0;"--}}
                                        {{--                                                                                value="{{ $color ?? '#000000' }}"--}}
                                        {{--                                                                            />--}}

                                        {{--                                                                            --}}{{-- Text hex input (submitted) --}}
                                        {{--                                                                            <input--}}
                                        {{--                                                                                type="text"--}}
                                        {{--                                                                                name="value"--}}
                                        {{--                                                                                class="form-control color-hex-input"--}}
                                        {{--                                                                                placeholder="#000000"--}}
                                        {{--                                                                                value="{{ $color ?? '#000000' }}"--}}
                                        {{--                                                                                pattern="^#([A-Fa-f0-9]{6})$"--}}
                                        {{--                                                                            />--}}
                                        {{--                                                                        </div>--}}
                                        {{--                                                                        <small class="text-muted">--}}
                                        {{--                                                                            Pick a color or type hex (e.g. #FFAA00).--}}
                                        {{--                                                                        </small>--}}
                                        {{--                                                                    </div>--}}

                                        {{--                                                                    --}}{{-- Color image --}}
                                        {{--                                                                    <div class="col-md-12 mt-1">--}}
                                        {{--                                                                        <label class="form-label label-text">Color Image *--}}
                                        {{--                                                                            </label>--}}
                                        {{--                                                                        @php--}}
                                        {{--                                                                            $mediaWithColor = $model--}}
                                        {{--                                                                                 ->getMedia('product_extra_images')--}}
                                        {{--                                                                                 ->first(fn ($media) => $media->getCustomProperty('color_hex') ==$color);--}}
                                        {{--                                                                        @endphp--}}

                                        {{--                                                                        <div--}}
                                        {{--                                                                            class="dropzone color-dropzone border rounded p-2"--}}
                                        {{--                                                                            style="cursor:pointer; min-height:100px;"--}}
                                        {{--                                                                            data-existing-media='@json($mediaWithColor)'>--}}
                                        {{--                                                                            <div class="dz-message" data-dz-message>--}}
                                        {{--                                                                                <span>Drop image or click</span>--}}
                                        {{--                                                                            </div>--}}
                                        {{--                                                                        </div>--}}

                                        {{--                                                                        <input type="hidden"--}}
                                        {{--                                                                               name="image_id"--}}
                                        {{--                                                                               class="color-image-hidden"--}}
                                        {{--                                                                               value="{{$mediaWithColor->id ?? ''}}">--}}
                                        {{--                                                                    </div>--}}

                                        {{--                                                                    --}}{{-- Delete row --}}
                                        {{--                                                                    <div class="col-md-2 text-center mt-1 ms-auto">--}}
                                        {{--                                                                        <button type="button"--}}
                                        {{--                                                                                class="btn btn-outline-danger"--}}
                                        {{--                                                                                data-repeater-delete>--}}
                                        {{--                                                                            <i data-feather="x" class="me-25"></i>--}}
                                        {{--                                                                            Delete--}}
                                        {{--                                                                        </button>--}}
                                        {{--                                                                    </div>--}}
                                        {{--                                                                </div>--}}
                                        {{--                                                            </div>--}}
                                        {{--                                                        @empty--}}
                                        {{--                                                            <div data-repeater-item>--}}
                                        {{--                                                                <div class="row align-items-start mt-1">--}}

                                        {{--                                                                    <div class="col-md-12">--}}
                                        {{--                                                                        <label class="form-label label-text">Color Value--}}
                                        {{--                                                                            *</label>--}}
                                        {{--                                                                        <div class="d-flex gap-1 align-items-center">--}}
                                        {{--                                                                            <input--}}
                                        {{--                                                                                type="color"--}}
                                        {{--                                                                                class="form-control rounded-circle color-picker border border-0"--}}
                                        {{--                                                                                style="max-width: 30px; padding: 0;"--}}
                                        {{--                                                                                value="#000000"--}}
                                        {{--                                                                            />--}}
                                        {{--                                                                            <input--}}
                                        {{--                                                                                type="text"--}}
                                        {{--                                                                                name="value"--}}
                                        {{--                                                                                class="form-control color-hex-input"--}}
                                        {{--                                                                                placeholder="#000000"--}}
                                        {{--                                                                                value="#000000"--}}
                                        {{--                                                                                pattern="^#([A-Fa-f0-9]{6})$"--}}
                                        {{--                                                                            />--}}
                                        {{--                                                                        </div>--}}
                                        {{--                                                                        <small class="text-muted">Pick a color or type--}}
                                        {{--                                                                            hex (e.g. #FFAA00).</small>--}}
                                        {{--                                                                    </div>--}}

                                        {{--                                                                    <div class="col-md-12 mt-1">--}}
                                        {{--                                                                        <label class="form-label label-text">Color Image *--}}
                                        {{--                                                                           </label>--}}
                                        {{--                                                                        <div--}}
                                        {{--                                                                            class="dropzone color-dropzone border rounded p-2"--}}
                                        {{--                                                                            style="cursor:pointer; min-height:100px;"--}}
                                        {{--                                                                            data-existing-media='null'>--}}
                                        {{--                                                                            <div class="dz-message" data-dz-message>--}}
                                        {{--                                                                                <span>Drop image or click</span>--}}
                                        {{--                                                                            </div>--}}
                                        {{--                                                                        </div>--}}
                                        {{--                                                                        <input type="hidden" name="image_id"--}}
                                        {{--                                                                               class="color-image-hidden">--}}
                                        {{--                                                                    </div>--}}

                                        {{--                                                                    <div class="col-md-2 text-center mt-1 ms-auto">--}}
                                        {{--                                                                        <button type="button"--}}
                                        {{--                                                                                class="btn btn-outline-danger"--}}
                                        {{--                                                                                data-repeater-delete>--}}
                                        {{--                                                                            <i data-feather="x" class="me-25"></i>--}}
                                        {{--                                                                            Delete--}}
                                        {{--                                                                        </button>--}}
                                        {{--                                                                    </div>--}}
                                        {{--                                                                </div>--}}
                                        {{--                                                            </div>--}}
                                        {{--                                                        @endforelse--}}
                                        {{--                                                    </div>--}}

                                        {{--                                                    <div class="row mt-1">--}}
                                        {{--                                                        <div class="col-12">--}}
                                        {{--                                                            <button type="button"--}}
                                        {{--                                                                    class="w-100 rounded-3 p-1 text-dark"--}}
                                        {{--                                                                    style="border: 2px dashed #CED5D4; background-color: #EBEFEF"--}}
                                        {{--                                                                    data-repeater-create>--}}
                                        {{--                                                                <i data-feather="plus" class="me-25"></i>--}}
                                        {{--                                                                <span>Add New Color</span>--}}
                                        {{--                                                            </button>--}}
                                        {{--                                                        </div>--}}
                                        {{--                                                    </div>--}}
                                        {{--                                                </div>--}}
                                        {{--                                            </div>--}}
                                        {{--                                        </div>--}}

                                        <!-- Multiple Images Upload -->
                                        <div class="col-md-12">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="product-images">Category
                                                    Images (optional)</label>

                                                <!-- Dropzone container -->
                                                <div id="multi-dropzone" class="dropzone border rounded p-3"
                                                     style="cursor:pointer; min-height:150px;">
                                                    <div class="dz-message" data-dz-message>
                                                        <i data-feather="upload" class="mb-2"></i>
                                                        <p>Drag images here or click to upload</p>
                                                    </div>
                                                </div>
                                                <input type="hidden" name="images_ids[]" id="images_ids">
                                                <div id="multi-uploaded-images"
                                                     class="mt-3 d-flex flex-wrap gap-2"></div>

                                                <span class="image-hint small text-end">
                            Max size: 1MB | Dimensions: 512x512 px
                        </span>
                                            </div>
                                        </div>

                                        <!-- Category & Subcategory -->
                                        <div class="col-md-6">
                                            <div class="mb-1">
                                                <label class="form-label label-text" for="category">Product</label>
                                                <select name="category_id" id="category"
                                                        class="form-control category-select">
                                                    <option value="" disabled selected>Select product</option>
                                                    @foreach($associatedData['categories'] as $category)
                                                        <option
                                                            value="{{ $category->id }}"
                                                            data-is-tableau="{{ (int) $category->is_tableau }}"
                                                            @selected($category->id == $model->category?->id)>{{ $category->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <!-- Subcategory -->
                                        <div class="col-md-6">
                                            <div class="mb-1">
                                                <label class="form-label label-text"
                                                       for="sub_category">SubProduct</label>
                                                <select name="sub_category_id" id="sub_category"
                                                        class="form-control sub-category-select"
                                                        data-sub-category-url="{{ route('sub-categories') }}">
                                                    <option value="" disabled selected>Select subproduct</option>
                                                    @php
                                                        $subCategories = App\Models\Category::whereParentId($model->category_id)->get();
                                                    @endphp
                                                    @if(old('category_id', $model->category_id))
                                                        @foreach($subCategories as $subCategory)
                                                            <option
                                                                value="{{ $subCategory->id }}" @selected($subCategory->id == $model->sub_category_id)>{{ $subCategory->name }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>

                                        <!-- Tags -->
                                        <div class="col-md-12">
                                            <div class="mb-1">
                                                <label class="form-label label-text" for="tags">Tags</label>
                                                <select name="tags[]" id="tags" class="select2 form-select" multiple>
                                                    @foreach($associatedData['tags'] as $tag)
                                                        <option value="{{ $tag->id }}"
                                                                @if(in_array($tag->id, $model->tags->pluck('id')->toArray())) selected @endif >{{ $tag->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>


                                        <!-- Dimensions -->
                                        <div class="col-md-12">
                                            <div class="mb-1">
                                                <label class="form-label label-text">Category Size</label>
                                                <!-- Standard Dimensions -->
                                                <div
                                                    class="d-flex flex-wrap justify-content-center justify-content-md-start gap-2"
                                                    id="standard-dimensions-container">
                                                    @foreach($dimensions as $dimension)
                                                        <div
                                                            class="form-check option-box rounded border py-1 d-flex justify-content-center align-items-center"
                                                            style="width: 100px">
                                                            <input class="form-check-input me-1" type="checkbox"
                                                                   name="dimensions[]"
                                                                   id="dimension-checkbox-{{ $dimension['id'] }}"
                                                                   value="{{ $dimension['id'] }}" @checked($model->dimensions->contains($dimension->id)) />
                                                            <label class="form-check-label mb-0"
                                                                   for="dimension-checkbox-{{ $dimension['id'] }}">
                                                                {{ $dimension['name'] }}
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                </div>

                                                <!-- Custom Dimensions -->
                                                <div class="d-flex gap-3 mt-2 mb-2" id="custom-dimensions-container">
                                                    <!-- Custom dimensions from sessionStorage will be injected here -->
                                                </div>
                                            </div>
                                            <button type="button" class="upload-card w-100 mt-1" data-bs-toggle="modal"
                                                    data-bs-target="#addSizeModal">Add Custom Size
                                            </button>
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-end ">
                                        <button type="button" class="btn btn-primary next-tab mt-2">Next</button>
                                    </div>
                                </div>
                                <!-- first tab content end -->

                                <!--second tab content -->
                                <div class="tab-pane d-none" id="step2">
                                    <!-- Price Option Toggle -->
                                    <div class="col-md-12">
                                        <div class="mb-1">
                                            <label class="form-label label-text d-block">Quantity & Price
                                                Options</label>
                                            <label class="form-label label-text mt-2">Quantity Type</label>
                                            <div class="row gap-1 d-flex flex-column flex-md-row" style="margin: 2px;">
                                                <div class="col border rounded-3 p-1">
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input" type="radio"
                                                               name="has_custom_prices" id="customPrice"
                                                               value="1" @checked($model->has_custom_prices == 1)>
                                                        <div>
                                                            <label class="form-check-label label-text d-block"
                                                                   for="customPrice">Add Quantity Manually</label>
                                                            <label class="form-check-label text-dark" for="customPrice">Custom
                                                                Prices</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col border rounded-3 p-1">
                                                    <div class="form-check form-check-inline">
                                                        <input class="form-check-input " type="radio"
                                                               name="has_custom_prices" id="defaultPrice"
                                                               value="0" @checked($model->has_custom_prices == 0)>
                                                        <div>
                                                            <label class="form-check-label label-text d-block"
                                                                   for="customPrice">Default Quantity</label>
                                                            <label class="form-check-label text-dark"
                                                                   for="defaultPrice">Default Price</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Custom Prices -->
                                    <div class="col-md-12" id="custom-price-section"
                                         style="{{  $model->has_custom_prices == 1 ? '': 'display: none;' }}">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="invoice-repeater">
                                                    <div data-repeater-list="prices">
                                                        @forelse($model->prices as $price)
                                                            <div data-repeater-item>
                                                                <div class="row d-flex align-items-end">
                                                                    <div class="col-md-4">
                                                                        <div class="mb-1">
                                                                            <label class="form-label label-text">Quantity</label>
                                                                            <input type="number" name="quantity"
                                                                                   value="{{ $price->quantity }}"
                                                                                   class="form-control"
                                                                                   placeholder="Add Quantity"/>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <div class="mb-1">
                                                                            <label class="form-label label-text">Price
                                                                                (EGP)</label>
                                                                            <input type="text" name="price"
                                                                                   value="{{ $price->price }}"
                                                                                   class="form-control"
                                                                                   placeholder="Add Price"/>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <div class="mb-1">
                                                                            <button type="button"
                                                                                    class="btn btn-outline-danger text-nowrap px-1"
                                                                                    style="display: none"
                                                                                    data-repeater-delete>
                                                                                <i data-feather="x" class="me-25"></i>
                                                                                <span>Delete</span>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @empty
                                                            <div data-repeater-item>
                                                                <div class="row d-flex align-items-end">
                                                                    <div class="col-md-4">
                                                                        <div class="mb-1">
                                                                            <label class="form-label label-text">Quantity</label>
                                                                            <input type="number" name="quantity"
                                                                                   class="form-control"
                                                                                   placeholder="Add Quantity"/>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <div class="mb-1">
                                                                            <label class="form-label label-text">Price
                                                                                (EGP)</label>
                                                                            <input type="text" name="price"
                                                                                   class="form-control"
                                                                                   placeholder="Add Price"/>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <div class="mb-1">
                                                                            <button type="button"
                                                                                    class="btn btn-outline-danger text-nowrap px-1"
                                                                                    style="display: none"
                                                                                    data-repeater-delete>
                                                                                <i data-feather="x" class="me-25"></i>
                                                                                <span>Delete</span>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforelse
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <button type="button"
                                                                    class="w-100  rounded-3 p-1 bg-white text-dark"
                                                                    style="border:2px dashed #CED5D4;"
                                                                    data-repeater-create>
                                                                <i data-feather="plus" class="me-25"></i> <span>Add New Quantity</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Default Price -->
                                    <div class="col-md-12" id="default-price-section"
                                         style="{{ $model->has_custom_prices == 0 ? '' : 'display:none;' }}">
                                        <div class="mb-1">
                                            <label class="form-label label-text" for="base_price">Original Price (EGP)
                                                (Per Item)</label>
                                            <input type="text" id="base_price" name="base_price"
                                                   value="{{ $model->base_price }}" class="form-control"
                                                   placeholder="Original Price"/>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-end gap-2">
                                        <button type="button" class="btn btn-secondary prev-tab">Previous</button>
                                        <button type="button" class="btn btn-primary next-tab">Next</button>
                                    </div>
                                </div>
                                <!--second tab content end -->

                                <!--third tab content -->
                                <div class="tab-pane d-none" id="step3">
                                    <!-- Specifications -->
                                    <div class="col-12">
                                        <div class="mb-1">
                                            <label class="form-label label-text">Category Specs</label>
                                            @php
                                                $editableSpecifications = $model->specifications->filter(fn($specification) => $specification->fixed_key !== 'cutting');
                                                $hasSpecs = $editableSpecifications->isNotEmpty();
                                                $cuttingSpec = $model->specifications()
                                                            ->where('fixed_key', 'cutting')
                                                            ->first();

                                                $cuttingSpecId = $cuttingSpec?->id;
                                            @endphp
                                            <div class="d-flex align-items-center gap-2 my-1">
                                                <button type="button" id="btnAddCuttingSpecs"
                                                        class="btn btn-outline-primary  px-3 py-2 {{ $cuttingSpecId ? 'd-none' : '' }}">
                                                    Add Cutting Specs
                                                </button>
                                                <button type="button" id="btnRemoveCuttingSpecs"
                                                        class="btn btn-outline-danger px-3 py-2 {{ $cuttingSpecId ? '' : 'd-none' }}"
                                                        data-cutting-id="{{ $cuttingSpecId }}"
                                                        @if($cuttingSpecId)
                                                            data-url="{{ route('fixed-specs.destroy', $cuttingSpecId) }}"
                                                    @endif>
                                                    Remove Cutting Specs
                                                </button>
                                            </div>
                                            <div id="cuttingSpecsBox"
                                                 class="mt-2  d-none">
                                                <label class="form-label label-text">Choose Cutting
                                                    Specs</label>
                                                <select id="cuttingSpecsSelect"
                                                        class="form-control"
                                                        name="fixed_specs[]"
                                                        multiple="multiple"
                                                        style="width:100%">

                                                    @foreach(\App\Enums\Product\CuttingEnum::cases() as $cutting)
                                                        <option value="{{ $cutting->value }}"
                                                                data-name-en="{{ $cutting->label('en') }}"
                                                                data-name-ar="{{ $cutting->label('ar') }}"
                                                                data-image="{{ $cutting->imageUrl() }}"
                                                        >
                                                            {{ $cutting->label(app()->getLocale()) }}
                                                        </option>
                                                    @endforeach

                                                </select>

                                                <div class="form-text">
                                                    Select one or more specs. They will be added
                                                    automatically below.
                                                </div>
                                            </div>
                                            <div>

                                                <!-- Outer Repeater for Specifications -->
                                                <div class="outer-repeater">
                                                    <div class="{{ $hasSpecs ? '' :'d-none' }}"
                                                         data-repeater-list="specifications">
                                                        @forelse($editableSpecifications as $specification)

                                                            <div data-repeater-item @if($specification->fixed_key) data-spec-key="{{ $specification->fixed_key }}" @endif>
                                                                <input type="hidden" name="id"
                                                                       value="{{ $specification->id }}">
                                                                <input type="hidden" name="fixed_key" class="spec-fixed-key"
                                                                       value="{{ $specification->fixed_key ?? '' }}">

                                                                <!-- Specification Fields -->
                                                                <div class="row mt-1">
                                                                    <div class="col-md-6">
                                                                        <div class="mb-1">
                                                                            <label class="form-label label-text">Name
                                                                                (EN)</label>
                                                                            <input type="text" name="name_en"
                                                                                   value="{{ $specification->getTranslation('name','en') }}"
                                                                                   class="form-control spec-name-en"
                                                                                   @readonly(!empty($specification->fixed_key))
                                                                                   placeholder="Specification Name (EN)"/>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-md-6">
                                                                        <div class="mb-1">
                                                                            <label class="form-label label-text">Name
                                                                                (AR)</label>
                                                                            <input type="text" name="name_ar"
                                                                                   value="{{ $specification->getTranslation('name','ar') }}"
                                                                                   class="form-control spec-name-ar"
                                                                                   @readonly(!empty($specification->fixed_key))
                                                                                   placeholder="Specification Name (AR)"/>
                                                                        </div>
                                                                    </div>

                                                                    <!-- Inner Repeater for Specification Options -->
                                                                    <div class="inner-repeater">
                                                                        <div data-repeater-list="specification_options">
                                                                            @foreach($specification->options as $option)
                                                                                <div data-repeater-item>
                                                                                    <div
                                                                                        class="row d-flex flex-column flex-md-row gap-1 gap-md-0 mt-2">
                                                                                        <input type="hidden" name="id"
                                                                                               value="{{ $option->id }}">

                                                                                        <!-- Option Name (EN) -->
                                                                                        <div class="col">
                                                                                            <label
                                                                                                class="form-label label-text">Value
                                                                                                (EN)</label>
                                                                                            <input type="text"
                                                                                                   name="value_en"
                                                                                                   value="{{ $option->getTranslation('value','en') }}"
                                                                                                   class="form-control option-value-en"
                                                                                                   placeholder="Option (EN)"/>
                                                                                        </div>

                                                                                        <!-- Option Name (AR) -->
                                                                                        <div class="col">
                                                                                            <label
                                                                                                class="form-label label-text">Value
                                                                                                (AR)</label>
                                                                                            <input type="text"
                                                                                                   name="value_ar"
                                                                                                   value="{{ $option->getTranslation('value','ar') }}"
                                                                                                   class="form-control"
                                                                                                   placeholder="Option (AR)"/>
                                                                                        </div>

                                                                                        <!-- Option Price -->
                                                                                        <div class="col">
                                                                                            <label
                                                                                                class="form-label label-text">Price
                                                                                                (EGP) (Optional)</label>
                                                                                            <input type="text"
                                                                                                   value="{{ $option->price }}"
                                                                                                   name="price"
                                                                                                   class="form-control"
                                                                                                   placeholder="Price"/>
                                                                                        </div>
                                                                                        <!-- Frame Model Padding Value (Tableau only) -->
                                                                                        <div class="col option-frame-model-padding-wrapper"
                                                                                             style="{{ ($model->is_tableau && $specification->fixed_key === 'frame_model') ? '' : 'display:none;' }}">
                                                                                            <label class="form-label label-text">Padding Value (Optional)</label>
                                                                                            <input type="text" name="padding"
                                                                                                   value="{{ $option->padding }}"
                                                                                                   class="form-control option-padding-value"
                                                                                                   placeholder="Padding Value"/>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div
                                                                                        class="row d-flex align-items-end mt-2">
                                                                                        <!-- Option Image -->
                                                                                        <div class="col-md-12">
                                                                                            <label
                                                                                                class="form-label label-text">Option
                                                                                                Image</label>
                                                                                            <div
                                                                                                class="dropzone option-dropzone"
                                                                                                data-existing-media='{{ json_encode($option->image ? [
                                                                        "id" => $option->image->id,
                                                                        "file_name" => $option->image->file_name,
                                                                        "size" => $option->image->size,
                                                                        "url" => $option->image->getUrl(),
                                                                    ] : null) }}'>


                                                                                                <input type="hidden"
                                                                                                       name="option_image"
                                                                                                       class="uploadedImage"
                                                                                                       value="{{ $option->image?->id }}">
                                                                                            </div>
                                                                                            <span
                                                                                                class="image-hint small text-end">
                                                Max size: 1MB | Dimensions: 200x200 px
                                            </span>
                                                                                            @php
                                                                                                $frameMedia = $getOptionFrameMedia($option);
                                                                                            @endphp
                                                                                            <div class="col-md-12 mt-1 option-frame-wrapper" style="display:none;">
                                                                                                <label class="form-label label-text">Option Frame Image</label>
                                                                                                <div class="dropzone option-frame-dropzone border rounded p-3"
                                                                                                     data-existing-frame-media='@json($mediaToArray($frameMedia))'
                                                                                                     style="cursor:pointer; min-height:120px;">
                                                                                                    <div class="dz-message" data-dz-message>
                                                                                                        <span>Drop frame image here or click to upload</span>
                                                                                                    </div>
                                                                                                </div>
                                                                                                <span class="image-hint small text-end">
                                                                                                    Max size: 1MB | Dimensions: 200x200 px
                                                                                                </span>
                                                                                                <input type="hidden"
                                                                                                       name="option_frame_image"
                                                                                                       class="option-frame-image-hidden"
                                                                                                       value="{{ $frameMedia?->id ?? '' }}">
                                                                                            </div>
                                                                                            <div
                                                                                                class="col-12 text-end mt-1 mb-2">
                                                                                                <button type="button"
                                                                                                        class="btn btn-outline-danger"
                                                                                                        data-repeater-delete>
                                                                                                    <i data-feather="x"
                                                                                                       class="me-25"></i>
                                                                                                    Delete Value
                                                                                                </button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            @endforeach
                                                                        </div>

                                                                        <!-- Add Option Button -->
                                                                        <div class="row">
                                                                            <div class="col-12">
                                                                                <button type="button"
                                                                                        class="btn primary-text-color bg-white mt-2"
                                                                                        data-repeater-create>
                                                                                    <i data-feather="plus"></i>
                                                                                    <span> Add New Value</span>
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <!-- End of Inner Repeater -->

                                                                    <!-- Delete Specification Button -->
                                                                    <div class="col-12 text-end mt-1 mb-2">
                                                                        <button type="button"
                                                                                class="btn btn-outline-danger spec-delete-btn"
                                                                                style="{{ $specification->fixed_key ? 'display:none;' : '' }}"
                                                                                data-repeater-delete>
                                                                            <i data-feather="x" class="me-25"></i>
                                                                            Delete Spec
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @empty
                                                            <div data-repeater-item>
                                                                <div class="row mt-1">
                                                                    <input type="hidden" name="fixed_key" class="spec-fixed-key">
                                                                    <div class="col-md-6">
                                                                        <div class="mb-1">
                                                                            <label class="form-label label-text">Name
                                                                                (EN)</label>
                                                                            <input type="text" name="name_en"
                                                                                   class="form-control spec-name-en"
                                                                                   placeholder="Specification Name (EN)"/>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-md-6">
                                                                        <div class="mb-1">
                                                                            <label class="form-label label-text">Name
                                                                                (AR)</label>
                                                                            <input type="text" name="name_ar"
                                                                                   class="form-control spec-name-ar"
                                                                                   placeholder="Specification Name (AR)"/>
                                                                        </div>
                                                                    </div>

                                                                    <!-- Inner Repeater empty structure -->
                                                                    <div class="inner-repeater">
                                                                        <div data-repeater-list="specification_options">
                                                                            <div data-repeater-item>
                                                                                <div
                                                                                    class="row d-flex align-items-end mt-2">
                                                                                    <div class="col">
                                                                                        <label
                                                                                            class="form-label label-text">Value
                                                                                            (EN)</label>
                                                                                        <input type="text"
                                                                                               name="value_en"
                                                                                               class="form-control option-value-en"
                                                                                               placeholder="Option (EN)"/>
                                                                                    </div>

                                                                                    <div class="col">
                                                                                        <label
                                                                                            class="form-label label-text">Value
                                                                                            (AR)</label>
                                                                                        <input type="text"
                                                                                               name="value_ar"
                                                                                               class="form-control"
                                                                                               placeholder="Option (AR)"/>
                                                                                    </div>

                                                                                    <div class="col">
                                                                                        <label
                                                                                            class="form-label label-text">Price
                                                                                            (EGP) (Optional)</label>
                                                                                        <input type="text" name="price"
                                                                                               class="form-control"
                                                                                               placeholder="Price"/>
                                                                                    </div>
                                                                                    <div class="col option-frame-model-padding-wrapper" style="display: none;">
                                                                                        <label class="form-label label-text">Padding Value (Optional)</label>
                                                                                        <input type="text" name="padding"
                                                                                               class="form-control option-padding-value"
                                                                                               placeholder="Padding Value"/>
                                                                                    </div>
                                                                                </div>

                                                                                <div
                                                                                    class="row d-flex align-items-end mt-2">
                                                                                    <div class="col-md-12">
                                                                                        <label
                                                                                            class="form-label label-text">Option
                                                                                            Image</label>
                                                                                        <div
                                                                                            class="dropzone option-dropzone"></div>
                                                                                        <input type="hidden"
                                                                                               name="option_image"
                                                                                               class="uploadedImage">
                                                                                    </div>
                                                                                    <div class="col-md-12 mt-1 option-frame-wrapper" style="display:none;">
                                                                                        <label class="form-label label-text">Option Frame Image</label>
                                                                                        <div class="dropzone option-frame-dropzone border rounded p-3"
                                                                                             data-existing-frame-media='null'
                                                                                             style="cursor:pointer; min-height:120px;">
                                                                                            <div class="dz-message" data-dz-message>
                                                                                                <span>Drop frame image here or click to upload</span>
                                                                                            </div>
                                                                                        </div>
                                                                                        <span class="image-hint small text-end">
                                                                                            Max size: 1MB | Dimensions: 200x200 px
                                                                                        </span>
                                                                                        <input type="hidden"
                                                                                               name="option_frame_image"
                                                                                               class="option-frame-image-hidden">
                                                                                    </div>
                                                                                </div>


                                                                            </div>
                                                                            <!-- ✅ Delete Value Button -->
                                                                            <div class="col-12 text-end mt-1 mb-2">
                                                                                <button type="button"
                                                                                        class="btn btn-outline-danger"
                                                                                        data-repeater-delete>
                                                                                    <i data-feather="x"
                                                                                       class="me-25"></i>
                                                                                    Delete Value
                                                                                </button>
                                                                            </div>
                                                                        </div>

                                                                        <!-- Add Option Button -->
                                                                        <div class="row">
                                                                            <div class="col-12">
                                                                                <button type="button"
                                                                                        class="btn primary-text-color bg-white mt-2"
                                                                                        data-repeater-create>
                                                                                    <i data-feather="plus"></i>
                                                                                    <span>Add New Value</span>
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-12 text-end mt-1 mb-2">
                                                                        <button type="button"
                                                                                class="btn btn-outline-danger spec-delete-btn"
                                                                                data-repeater-delete>
                                                                            <i data-feather="x" class="me-25"></i>
                                                                            Delete Spec
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        @endforelse
                                                    </div>

                                                    <!-- Add New Specification Button -->
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <button type="button" class="w-100 rounded-3 p-1 text-dark"
                                                                    style="border: 2px dashed #CED5D4; background-color: #EBEFEF"
                                                                    data-repeater-create>
                                                                <i data-feather="plus" class="me-25"></i> <span>Add New Spec</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <label id="variants-title" class="form-label label-text mt-2">Variants</label>

                                        <div id="variants-container" class="mt-2"></div>
                                    </div>

                                    <!-- Submit -->
                                    <div class="col-12 d-flex justify-content-end gap-1">
                                        <button type="button" class="btn btn-secondary prev-tab">Back</button>
                                        <button type="submit" class="btn btn-primary me-1 saveChangesButton"
                                                id="SaveChangesButton">
                                            <span class="btn-text">Edit Category</span>
                                            <span id="saveLoader"
                                                  class="spinner-border spinner-border-sm d-none saveLoader"
                                                  role="status" aria-hidden="true"></span>
                                        </button>
                                    </div>
                                </div>
                                <!--third tab content end -->
                            </div>
                        </form>


                    </div>
                </div>
            </div>
        </div>
        @include("modals.products.add-size")

    </section>
@endsection

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/forms/repeater/jquery.repeater.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
@endsection

@section('page-script')
    <script !src="">
        // ----- Select2 UI -----
        $(document).ready(function () {

            // Toggle select box
            $('#btnAddCuttingSpecs').on('click', function () {
                $('#cuttingSpecsBox').toggleClass('d-none');

                // init select2 once when shown first time
                if (!$('#cuttingSpecsSelect').data('select2')) {
                    $('#cuttingSpecsSelect').select2({
                        placeholder: 'Select cutting specs...',
                        closeOnSelect: false,
                        width: '100'
                    });
                }
            });
            $(document).on('change', '#cuttingSpecsSelect', function () {
                generateVariants();
            });
            $('#btnRemoveCuttingSpecs').on('click', function () {
                const btn = document.getElementById('btnRemoveCuttingSpecs');
                const url = btn.dataset.url;

                if (!url) {
                    console.log('No fixed spec id to delete');
                    return;
                }
                fetch(url, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json'
                    }
                })
                    .then(r => r.json())
                    .then(res => {
                        if (!res.status) throw new Error(res.message || 'Delete failed');

                        // ✅ reset UI
                        $('#cuttingSpecsSelect').val(null).trigger('change');
                        $('#cuttingSpecsBox').addClass('d-none');

                        $('#btnRemoveCuttingSpecs').addClass('d-none');
                        $('#btnAddCuttingSpecs').removeClass('d-none');

                        // optional: also remove the "Cutting" spec from your repeater UI if you render it there
                        generateVariants();
                    })
                    .catch(err => {
                        alert(err.message || 'Something went wrong');
                    });
            });
        });
    </script>

    <script>
        window.existingVariantsFromDB = @json($variantsForJs);
        window.modelIsTableau = @json((bool) ($model->category?->is_tableau ?? false));
    </script>


    <script>

        function generateVariants() {
            if (window.modelIsTableau) {
                hideVariants();
                return;
            }
            showVariants();

            let specs = @json($specs);

            // helper: upsert spec by name (replace if same name exists)
            function upsertSpec(name, options) {
                const i = specs.findIndex(s => (s.name || '').toLowerCase() === (name || '').toLowerCase());
                if (i >= 0) specs[i] = { name, options };
                else specs.push({ name, options });
            }

            // 2) OVERRIDE FROM REPEATER (ONLY VISIBLE)
            $('[data-repeater-list="specifications"] > [data-repeater-item]').each(function () {
                if (!$(this).is(':visible')) return;

                const specName = ($(this).find('.spec-name-en').val() || '').trim();
                if (!specName) return;

                const options = [];
                $(this).find('.option-value-en').each(function () {
                    // important: check the row visibility, not only input
                    const row = $(this).closest('[data-repeater-item]');
                    if (row.length && !row.is(':visible')) return;

                    const val = ($(this).val() || '').trim();
                    if (val) options.push(val);
                });

                if (options.length) upsertSpec(specName, options);
            });

            // 3) FIXED CUTTING
            const cuttingOpts = [];
            $('#cuttingSpecsSelect option:selected').each(function () {
                const en = ($(this).data('name-en') || $(this).text() || '').trim();
                if (en) cuttingOpts.push(en);
            });
            if (cuttingOpts.length) upsertSpec('Cutting', cuttingOpts);

            // 4) EMPTY?
            specs = specs.filter(s => s.name && Array.isArray(s.options) && s.options.length);
            if (!specs.length) {
                $('#variants-container').html('');
                return;
            }

            // 5) CARTESIAN
            function cartesian(arr) {
                return arr.reduce(
                    (a, b) => a.flatMap(d => b.options.map(e => [...d, { spec: b.name, value: e }])),
                    [[]]
                );
            }

            renderVariants(cartesian(specs));
        }

        function collectExistingVariantImages() {
            let map = {...window.existingVariantsFromDB};

            $('.variant-box').each(function () {
                let code = $(this).find('.variant-code-input').val();
                let imageId = $(this).find('.variant-image-input').val();
                let variantId = $(this).find('input[name*="[id]"]').val();

                if (code) {
                    map[code] = {
                        ...(map[code] || {}),   // keep previous data
                        image: imageId || null,
                        id: variantId || map[code]?.id || null,
                    };
                }
            });

            return map;
        }


        function renderVariants(combinations) {

            let existingImages = collectExistingVariantImages(); // 🧠 SAVE STATE

            let html = '<div class="row">';

            combinations.forEach((combo, index) => {

                let variantCode = combo.map(c =>
                    c.value.replace(/\s+/g, '').toLowerCase()
                ).join('_');

                let displayTitle = combo.map(c => c.value).join(' / ');

                let existing = existingImages[variantCode] || {};
                let savedImageId = existing.image || '';
                let savedVariantId = existing.id || '';


                html += `
        <div class="col-auto  mb-2">
            <div class="variant-box border rounded p-2 h-100">

                <div class="fw-bold small text-muted">${displayTitle}</div>

                <div class="dropzone variant-dropzone" data-code="${variantCode}">
                    <div class="dz-message">Upload Variant Image</div>
                </div>

                <input type="hidden" class="variant-code-input" name="variants[${index}][code]" value="${variantCode}" />
                <input type="hidden" class="variant-image-input" name="variants[${index}][image]" value="${savedImageId}" />
                <input type="hidden" name="variants[${index}][id]" value="${savedVariantId}" />

            </div>
  <span class="image-hint small text-end">
                                                Max size: 1MB | Dimensions: 512x512 px
                                            </span>
        </div>`;
            });

            html += '</div>';

            $('#variants-container').html(html);

            initVariantDropzones(existingImages); // 🔥 PASS SAVED DATA
        }

        function initVariantDropzones(existingImages = {}) {


            $('.variant-dropzone').each(function () {

                let box = $(this).closest('.variant-box');
                let hiddenInput = box.find('.variant-image-input');
                let code = box.find('.variant-code-input').val();

                let dz = new Dropzone(this, {
                    url: "{{ route('media.store') }}",
                    maxFiles: 1,
                    acceptedFiles: "image/*",
                    addRemoveLinks: true,
                    headers: {
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
                    },
                    success: function (file, response) {
                        hiddenInput.val(response.data.id);
                        file._imageId = response.data.id;
                    },
                    removedfile: function (file) {

                        // remove preview from UI
                        if (file.previewElement) {
                            file.previewElement.remove();
                        }

                        let mediaId = file._imageId;

                        // clear hidden input
                        hiddenInput.val('');

                        if (!mediaId) return;


                        fetch(`/api/v1/media/${mediaId}`, {
                            method: 'DELETE',
                            headers: {
                                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content"),
                                "Accept": "application/json"
                            }
                        })
                            .then(res => res.json())
                            .then(() => console.log("Media deleted:", mediaId))
                            .catch(err => console.error("Delete failed", err));
                    }
                });

                // 🔁 Restore existing image preview
                if (existingImages[code]?.image) {
                    let imageId = existingImages[code].image;
                    let imageUrl = existingImages[code].image_url;

                    let mockFile = { name: "Image", size: 12345 };

                    dz.emit("addedfile", mockFile);
                    dz.emit("thumbnail", mockFile, imageUrl);
                    dz.emit("complete", mockFile);
                    mockFile._imageId = imageId;
                }


            });
        }

        $(document).on('keyup change', '.option-value-en, .spec-name-en', function () {
            generateVariants();
        });

        $(document).on('click', '[data-repeater-create], [data-repeater-delete]', function () {
            setTimeout(generateVariants, 300); // wait for DOM update
        });

        $(document).ready(function () {
            generateVariants(); // always build variants, including when selected product is tableau
        });


    </script>
    {{--    <script>--}}
    {{--        // keep color picker & text field in sync--}}
    {{--        document.addEventListener("input", (e) => {--}}
    {{--            if (e.target.classList.contains("color-picker")) {--}}
    {{--                const picker = e.target;--}}
    {{--                const text = picker.closest(".d-flex").querySelector(".color-hex-input");--}}
    {{--                text.value = picker.value.toUpperCase();--}}
    {{--            }--}}

    {{--            if (e.target.classList.contains("color-hex-input")) {--}}
    {{--                const text = e.target;--}}
    {{--                const picker = text.closest(".d-flex").querySelector(".color-picker");--}}
    {{--                let val = text.value.trim().toUpperCase();--}}

    {{--                if (!val.startsWith("#")) val = "#" + val;--}}
    {{--                text.value = val;--}}

    {{--                if (/^#([0-9A-F]{6})$/.test(val)) {--}}
    {{--                    picker.value = val;--}}
    {{--                }--}}
    {{--            }--}}
    {{--        });--}}
    {{--    </script>--}}
    {{--    <script>--}}
    {{--        Dropzone.autoDiscover = false;--}}

    {{--        function initColorItem(item) {--}}
    {{--            const dropzoneElement = item.querySelector('.color-dropzone');--}}
    {{--            const hiddenInput = item.querySelector('.color-image-hidden');--}}

    {{--            if (!dropzoneElement || !hiddenInput) return;--}}
    {{--            if (dropzoneElement.dropzone) return; // prevent double init--}}

    {{--            const existingMedia = dropzoneElement.dataset.existingMedia--}}
    {{--                ? JSON.parse(dropzoneElement.dataset.existingMedia)--}}
    {{--                : null;--}}

    {{--            const dz = new Dropzone(dropzoneElement, {--}}
    {{--                url: "{{ route('media.store') }}",--}}
    {{--                paramName: "file",--}}
    {{--                maxFiles: 1,--}}
    {{--                maxFilesize: 1, // MB--}}
    {{--                acceptedFiles: "image/*",--}}
    {{--                headers: {"X-CSRF-TOKEN": "{{ csrf_token() }}"},--}}
    {{--                addRemoveLinks: true,--}}
    {{--                dictDefaultMessage: "Drop image or click",--}}
    {{--                init: function () {--}}
    {{--                    const dropzone = this;--}}

    {{--                    if (existingMedia) {--}}
    {{--                        const mockFile = {--}}
    {{--                            name: existingMedia.file_name,--}}
    {{--                            size: existingMedia.size,--}}
    {{--                            _hiddenInputId: existingMedia.id--}}
    {{--                        };--}}

    {{--                        dropzone.emit("addedfile", mockFile);--}}
    {{--                        dropzone.emit("thumbnail", mockFile, existingMedia.original_url);--}}
    {{--                        dropzone.emit("complete", mockFile);--}}
    {{--                        dropzone.files.push(mockFile);--}}

    {{--                        hiddenInput.value = existingMedia.id;--}}
    {{--                    }--}}

    {{--                    // ✅ success upload--}}
    {{--                    dropzone.on("success", function (file, response) {--}}
    {{--                        if (response.success && response.data) {--}}
    {{--                            file._hiddenInputId = response.data.id;--}}
    {{--                            hiddenInput.value = response.data.id;--}}
    {{--                        }--}}
    {{--                    });--}}

    {{--                    // ✅ removed file--}}
    {{--                    dropzone.on("removedfile", function (file) {--}}
    {{--                        if (hiddenInput.value == file._hiddenInputId) {--}}
    {{--                            hiddenInput.value = "";--}}
    {{--                        }--}}

    {{--                        if (file._hiddenInputId) {--}}
    {{--                            fetch("{{ url('api/v1/media') }}/" + file._hiddenInputId, {--}}
    {{--                                method: "DELETE",--}}
    {{--                                headers: {--}}
    {{--                                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content--}}
    {{--                                }--}}
    {{--                            });--}}
    {{--                        }--}}
    {{--                    });--}}
    {{--                }--}}
    {{--            });--}}


    {{--            const colorPicker = item.querySelector('.color-picker');--}}
    {{--            const hexInput = item.querySelector('.color-hex-input');--}}

    {{--            if (colorPicker && hexInput) {--}}
    {{--                colorPicker.addEventListener('input', function () {--}}
    {{--                    const hex = this.value.toUpperCase();--}}
    {{--                    hexInput.value = hex;--}}
    {{--                });--}}

    {{--                hexInput.addEventListener('input', function () {--}}
    {{--                    let v = this.value.toUpperCase();--}}
    {{--                    if (!v.startsWith('#')) v = '#' + v;--}}
    {{--                    this.value = v;--}}

    {{--                    if (/^#([0-9A-F]{6})$/.test(v)) {--}}
    {{--                        colorPicker.value = v;--}}
    {{--                    }--}}
    {{--                });--}}
    {{--            }--}}
    {{--        }--}}

    {{--        document.addEventListener("DOMContentLoaded", function () {--}}
    {{--            const $colorRepeater = $('.color-repeater');--}}

    {{--            // 1) init Dropzone على العناصر الموجودة (ألوان قديمة)--}}
    {{--            $colorRepeater.find('[data-repeater-item]').each(function () {--}}
    {{--                initColorItem(this);--}}
    {{--            });--}}

    {{--            // 2) init jquery.repeater--}}
    {{--            if (window.$ && $.fn.repeater) {--}}
    {{--                $colorRepeater.repeater({--}}
    {{--                    initEmpty: {{ $colors->isEmpty() ? 'true' : 'false' }},--}}
    {{--                    show: function () {--}}
    {{--                        $(this).slideDown();--}}

    {{--                        const item           = this;--}}
    {{--                        const dropzoneElement = item.querySelector('.color-dropzone');--}}
    {{--                        const hiddenInput     = item.querySelector('.color-image-hidden');--}}
    {{--                        const colorPicker     = item.querySelector('.color-picker');--}}
    {{--                        const hexInput        = item.querySelector('.color-hex-input');--}}

    {{--                        if (dropzoneElement) {--}}
    {{--                            // 🧹 1) امسح أي DOM منسوخ من الصف القديم (previews, classes...)--}}
    {{--                            dropzoneElement.innerHTML =--}}
    {{--                                '<div class="dz-message" data-dz-message><span>Drop image or click</span></div>';--}}

    {{--                            dropzoneElement.classList.remove('dz-started', 'dz-max-files-reached');--}}
    {{--                            // امسح أي media منسوخ--}}
    {{--                            dropzoneElement.dataset.existingMedia = '';--}}
    {{--                        }--}}

    {{--                        // 2) امسح قيمة الـ image_id--}}
    {{--                        if (hiddenInput) {--}}
    {{--                            hiddenInput.value = '';--}}
    {{--                        }--}}

    {{--                        // 3) Reset للّون الافتراضي--}}
    {{--                        if (colorPicker) colorPicker.value = '#000000';--}}
    {{--                        if (hexInput)    hexInput.value    = '#000000';--}}

    {{--                        // 4) الآن نعمل init للـ Dropzone + events بتاعة اللون--}}
    {{--                        initColorItem(item);--}}

    {{--                        if (window.feather) feather.replace();--}}
    {{--                    },--}}
    {{--                    hide: function (deleteElement) {--}}
    {{--                        $(this).slideUp(deleteElement);--}}
    {{--                    }--}}
    {{--                });--}}


    {{--                @if($colors->isEmpty())--}}
    {{--                const hasItems = $colorRepeater.find('[data-repeater-item]').length > 0;--}}
    {{--                if (!hasItems) {--}}
    {{--                    $colorRepeater.find('[data-repeater-create]').first().trigger('click');--}}
    {{--                }--}}
    {{--                @endif--}}
    {{--            }--}}

    {{--        });--}}
    {{--    </script>--}}


    <script>
        function syncOptionPaddingVisibility() {
            const isTableau = $('#is_tableau').is(':checked');

            $('.option-frame-model-padding-wrapper').hide();

            if (!isTableau) {
                $('.option-padding-value').val('');
                return;
            }

            const $frameModelSpec = findSpecItemByKey('frame_model');
            if (!$frameModelSpec.length) {
                $('.option-padding-value').val('');
                return;
            }

            // Only frame_model can submit padding. Clear hidden values in all other specs.
            getSpecListEl()
                .children('[data-repeater-item]')
                .not($frameModelSpec)
                .find('.option-padding-value')
                .val('');

            $frameModelSpec.find('.option-frame-model-padding-wrapper').show();
        }
        function resetDropzoneElement(element, message) {
            if (!element) return;

            if (element.dropzone) {
                try {
                    element.dropzone.destroy();
                } catch (e) {}
            }

            // Some old rows keep the hidden input inside the dropzone element.
            // Preserve hidden inputs before clearing Dropzone preview DOM.
            const hiddenInputs = Array.from(element.querySelectorAll('input[type="hidden"]'));
            hiddenInputs.forEach(function (input) {
                input.value = '';
            });

            element.dropzone = null;
            element.removeAttribute('data-existing-media');
            element.removeAttribute('data-existing-frame');
            element.dataset.existingFrameMedia = 'null';
            element.classList.remove('dz-started', 'dz-max-files-reached', 'dz-clickable');
            element.innerHTML = `<div class="dz-message" data-dz-message><span>${message}</span></div>`;

            hiddenInputs.forEach(function (input) {
                element.appendChild(input);
            });
        }

        function resetClonedOptionValueRow($row) {
            // jQuery repeater clones the first option row.
            // New value must not keep ids/images/dropzone previews from the cloned row.
            $row.find('input[name="id"]').val('');

            // Normal option image reset.
            $row.find('.uploadedImage').val('');
            $row.find('.option-dropzone').each(function () {
                resetDropzoneElement(this, 'Drop option image here or click to upload');
            });

            // Frame image reset.
            if (typeof window.ensureOptionFrameWrappers === 'function') {
                window.ensureOptionFrameWrappers($row[0]);
            }

            $row.find('.option-frame-image-hidden').val('');
            $row.find('.option-frame-dropzone').each(function () {
                resetDropzoneElement(this, 'Drop frame image here or click to upload');
            });
        }
    </script>

    <script>
        $(document).ready(function () {
            var $outerRepeater = $('.outer-repeater');

            var hasExistingSpecs = $outerRepeater.find('[data-repeater-item]').length > 0;
            if (!hasExistingSpecs) {
                $outerRepeater.find('[data-repeater-list="specifications"]').addClass('d-none');
            }

            $outerRepeater.repeater({
                initEmpty: {{ $hasSpecs ? 'false' : 'true' }},
                repeaters: [{
                    selector: '.inner-repeater',
                    // ❌ initEmpty: true,   // <- remove this
                    // ✅ keep existing options on page load
                    initEmpty: false,
                    show: function () {
                        const $row = $(this);

                        // ✅ IMPORTANT: repeater clones the first value row.
                        // Clear cloned ids/images/dropzone previews before initializing Dropzone.
                        if (typeof resetClonedOptionValueRow === 'function') {
                            resetClonedOptionValueRow($row);
                        }

                        $row.slideDown();
                        feather.replace();

                        const dzElement = $row.find(".option-dropzone")[0];
                        if (dzElement && typeof initOptionDropzone === 'function') {
                            initOptionDropzone(dzElement);
                        }

                        setTimeout(function () {
                            if (typeof window.refreshTableauFrameUploaders === 'function') {
                                window.refreshTableauFrameUploaders($row[0]);
                            } else if (window.selectedProductIsTableau && typeof initOptionFrameDropzones === 'function') {
                                initOptionFrameDropzones($row[0]);
                            }

                            generateVariants();
                        }, 0);
                    },
                    hide: function (deleteElement) {
                        const $row = $(this);
                        $row.slideUp(200, function () {
                            deleteElement();
                            generateVariants();
                        });
                    }
                }],
                show: function () {
                    const $specList = $(this).closest('.outer-repeater').find('[data-repeater-list="specifications"]');
                    $specList.removeClass('d-none');

                    $(this).slideDown();
                    $(this).removeAttr('data-spec-key');
                    $(this).find('.spec-fixed-key').val('');
                    $(this).find('.spec-name-en, .spec-name-ar').prop('readonly', false);
                    $(this).find('.spec-delete-btn').show();
                    feather.replace();

                    // This runs ONLY for a NEW spec; safe to reset its inner list
                    const $inner = $(this).find('.inner-repeater').first();
                    const $innerList = $inner.find('[data-repeater-list]');
                    $innerList.empty();                           // remove cloned options from last spec
                    $inner.find('[data-repeater-create]').first().trigger('click'); // add exactly one blank

                    const dzElement = $(this).find(".option-dropzone")[0];
                    if (dzElement && typeof initOptionDropzone === 'function') {
                        initOptionDropzone(dzElement);
                    }

                    if (typeof resetClonedOptionFrameUploader === 'function') {
                        resetClonedOptionFrameUploader(this);
                    }

                    if (window.selectedProductIsTableau && typeof initOptionFrameDropzones === 'function') {
                        initOptionFrameDropzones();
                    }

                    $(this).find('.uploadedImage').val('');
                    setTimeout(generateVariants, 0);
                },
                hide: function (deleteElement) {
                    const $item = $(this);
                    $item.slideUp(200, function () {
                        deleteElement();
                        generateVariants();
                        const $specList = $item.closest('.outer-repeater').find('[data-repeater-list="specifications"]');
                        const $items = $specList.find('[data-repeater-item]').not(':hidden');
                        // if ($items.length === 0) $specList.addClass('d-none');
                    });
                },
                isFirstItemUndeletable: false
            });


            // ✅ remove the second inner-repeater initializer to avoid double items

            // Initialize dropzones for existing option images
            if (typeof initOptionDropzone === 'function') {
                document.querySelectorAll(".option-dropzone").forEach(el => {
                    let media = el.dataset.existingMedia ? JSON.parse(el.dataset.existingMedia) : null;
                    initOptionDropzone(el, media);
                });
            }

            feather.replace();
        });

    </script>

    <script !src="">
        Dropzone.autoDiscover = false;

        function initOptionDropzone(element, existingMedia = null) {
            const optionItem = element.closest("[data-repeater-item]");
            let uploadedInput = optionItem ? optionItem.querySelector(".uploadedImage") : null;

            // Safety: if an old cloned Dropzone lost the hidden input, recreate it.
            if (!uploadedInput && optionItem) {
                uploadedInput = document.createElement('input');
                uploadedInput.type = 'hidden';
                uploadedInput.name = 'option_image';
                uploadedInput.className = 'uploadedImage';
                element.insertAdjacentElement('afterend', uploadedInput);
            }

            let dz = new Dropzone(element, {
                url: "{{ route('media.store') }}",
                paramName: "file",
                maxFiles: 1,
                acceptedFiles: "image/*",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                addRemoveLinks: true,
                dictDefaultMessage: "Drop option image here or click to upload",
                init: function () {
                    let dropzone = this;

                    // ✅ Show existing image only for real edit rows.
                    // New cloned rows have an empty hidden input after reset.
                    if (existingMedia && uploadedInput && uploadedInput.value) {
                        let mockFile = {
                            name: existingMedia.file_name,
                            size: existingMedia.size,
                            _hiddenInputId: existingMedia.id
                        };

                        dropzone.emit("addedfile", mockFile);
                        dropzone.emit("thumbnail", mockFile, existingMedia.url);
                        dropzone.emit("complete", mockFile);
                        dropzone.files.push(mockFile);

                        uploadedInput.value = existingMedia.id;
                    }

                    // ✅ On success
                    dropzone.on("success", function (file, response) {
                        if (response?.data?.id && uploadedInput) {
                            file._hiddenInputId = response.data.id;
                            uploadedInput.value = response.data.id;
                        }
                    });

                    // ✅ On remove
                    dropzone.on("removedfile", function (file) {
                        let hiddenInput = uploadedInput;
                        if (hiddenInput) hiddenInput.value = "";

                        if (file._hiddenInputId) {
                            fetch("{{ url('api/v1/media') }}/" + file._hiddenInputId, {
                                method: "DELETE",
                                headers: {
                                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                                }
                            });
                        }
                    });
                }
            });
        }

    </script>
    <script>
        Dropzone.autoDiscover = false;

        const multiDropzone = new Dropzone("#multi-dropzone", {
            url: "{{ route('media.store') }}",   // backend route for image upload
            paramName: "file",
            maxFiles: 10,
            maxFilesize: 1, // MB
            acceptedFiles: "image/*",
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            addRemoveLinks: true,
            dictDefaultMessage: "Drag images here or click to upload",
            init: function () {
                let dz = this;

                // ✅ Show existing images if editing
                    @if($model->getMedia('product_extra_images')->isNotEmpty())
                    @foreach(   $model->getMedia('product_extra_images')
        ->filter(fn ($media) => ! $media->hasCustomProperty('color_hex')) as $media)
                {
                    const multiMockFile = {
                        name: "{{ $media->file_name }}",
                        size: {{ $media->size ?? 12345 }},
                        _hiddenInputId: "{{ $media->id }}"
                    };

                    dz.emit("addedfile", multiMockFile);
                    dz.emit("thumbnail", multiMockFile, "{{ $media->getUrl() }}");
                    dz.emit("success", multiMockFile);
                    dz.emit("complete", multiMockFile);
                    dz.files.push(multiMockFile);

                    const input = document.createElement("input");
                    input.type = "hidden";
                    input.name = "images_ids[]";
                    input.value = "{{ $media->id }}";
                    input.id = "hidden-image-{{ $media->id }}";
                    document.querySelector("#multi-uploaded-images").appendChild(input);
                }
                @endforeach
                @endif


                // ✅ On upload success
                dz.on("success", function (file, response) {
                    if (response.success && response.data) {
                        file._hiddenInputId = response.data.id;

                        let hiddenInput = document.createElement("input");
                        hiddenInput.type = "hidden";
                        hiddenInput.name = "images_ids[]";
                        hiddenInput.value = response.data.id;
                        hiddenInput.id = "hidden-image-" + response.data.id;
                        document.querySelector("#multi-uploaded-images").appendChild(hiddenInput);
                    }
                });

                // ✅ On remove
                dz.on("removedfile", function (file) {
                    if (file._hiddenInputId) {
                        let hiddenInput = document.getElementById("hidden-image-" + file._hiddenInputId);
                        if (hiddenInput) hiddenInput.remove();

                        fetch("{{ url('api/v1/media') }}/" + file._hiddenInputId, {
                            method: "DELETE",
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                            }
                        });
                    }
                });
            }
        });
    </script>
    <script>
        Dropzone.autoDiscover = false;

        // --- MAIN IMAGE DROPZONE ---
        const mainDropzone = new Dropzone("#product-main-dropzone", {
            url: "{{ route('media.store') }}",
            paramName: "file",
            maxFiles: 1,
            maxFilesize: 1, // MB
            acceptedFiles: "image/*",
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            addRemoveLinks: true,
            dictDefaultMessage: "Drop image here or click to upload",
            init: function () {
                let dz = this;

                // ✅ Show existing image if editing
                @if(!empty($media = $model->getFirstMedia('product_main_image')))
                let mainMockFile = {
                    name: "{{ $media->file_name }}",
                    size: {{ $media->size ?? 12345 }},
                    _hiddenInputId: "{{ $media->id }}"
                };

                dz.emit("addedfile", mainMockFile);
                dz.emit("thumbnail", mainMockFile, "{{ $media->getUrl() }}");
                dz.emit("complete", mainMockFile);
                dz.files.push(mainMockFile);
                @endif

                dz.on("success", function (file, response) {
                    if (response?.data?.id) {
                        file._hiddenInputId = response.data.id;
                        document.getElementById("uploadedImage").value = response.data.id;
                    }
                });

                dz.on("removedfile", function (file) {
                    if (file._hiddenInputId) {
                        fetch("{{ url('api/v1/media') }}/" + file._hiddenInputId, {
                            method: "DELETE",
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                            }
                        });
                        let hiddenInput = document.getElementById("uploadedImage");
                        if (hiddenInput.value == file._hiddenInputId) {
                            hiddenInput.value = "";
                        }
                    }
                });
            }
        });


        // --- MODEL IMAGE DROPZONE ---
        const modelDropzone = new Dropzone("#product-model-dropzone", {
            url: "{{ route('media.store') }}",
            paramName: "file",
            maxFiles: 1,
            maxFilesize: 1, // MB
            acceptedFiles: "image/*",
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            addRemoveLinks: true,
            dictDefaultMessage: "Drop image here or click to upload",
            init: function () {
                let dz = this;

                // ✅ Show existing image if editing
                @if(!empty($media = $model->getFirstMedia('product_model_image')))
                let modelMockFile = {
                    name: "{{ $media->file_name }}",
                    size: {{ $media->size ?? 12345 }},
                    _hiddenInputId: "{{ $media->id }}"
                };
                document.getElementById("uploadedImageModel").value = "{{ $media->id }}";

                dz.emit("addedfile", modelMockFile);
                dz.emit("thumbnail", modelMockFile, "{{ $media->getUrl() }}");
                dz.emit("complete", modelMockFile);
                dz.files.push(modelMockFile);
                @endif

                dz.on("success", function (file, response) {
                    if (response?.data?.id) {
                        file._hiddenInputId = response.data.id;
                        document.getElementById("uploadedImageModel").value = response.data.id;
                    }
                });

                dz.on("removedfile", function (file) {
                    if (file._hiddenInputId) {
                        fetch("{{ url('api/v1/media') }}/" + file._hiddenInputId, {
                            method: "DELETE",
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                            }
                        });
                        let hiddenInput = document.getElementById("uploadedImageModel");
                        if (hiddenInput.value == file._hiddenInputId) {
                            hiddenInput.value = "";
                        }
                    }
                });
            }
        });
    </script>






    <script>
        $(document).ready(function () {
            // Optional if you want to clear when user reloads
            window.addEventListener("beforeunload", function () {
                sessionStorage.removeItem("custom_dimensions");
            });

        });
    </script>
    <script>
        $(document).ready(function () {
            let input = $('#product-image-main');
            let uploadArea = $('#upload-area');
            let progress = $('#upload-progress');
            let progressBar = $('.progress-bar');
            let uploadedImage = $('#uploaded-image');
            let removeButton = $('#remove-image');

            // Click on the upload area triggers the hidden input
            uploadArea.on('click', function () {
                input.click();
            });

            // Handle file selection
            input.on('change', function (e) {
                handleFiles(e.target.files);
            });

            // Handle Drag & Drop
            uploadArea.on('dragover', function (e) {
                e.preventDefault();
                uploadArea.addClass('dragover');
            });

            uploadArea.on('dragleave', function (e) {
                e.preventDefault();
                uploadArea.removeClass('dragover');
            });

            uploadArea.on('drop', function (e) {
                e.preventDefault();
                uploadArea.removeClass('dragover');
                handleFiles(e.originalEvent.dataTransfer.files);
            });

            function handleFiles(files) {
                if (files.length > 0) {
                    let file = files[0];

                    // 🔽 This is the fix: assign the dropped file to the input element
                    let dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    input[0].files = dataTransfer.files;

                    console.log('Input files:', input[0].files); // Make sure this logs a FileList with 1 file

                    // Show loader
                    progress.removeClass('d-none');
                    progressBar.css('width', '0%');

                    // Fake loading effect
                    let fakeProgress = 0;
                    let interval = setInterval(function () {
                        fakeProgress += 10;
                        progressBar.css('width', fakeProgress + '%');

                        if (fakeProgress >= 100) {
                            clearInterval(interval);

                            // Preview image
                            let reader = new FileReader();
                            reader.onload = function (e) {
                                uploadedImage.find('img').attr('src', e.target.result);
                                uploadedImage.removeClass('d-none');
                                progress.addClass('d-none');

                                // Show file name and size
                                $('#file-details .file-name').text(file.name);
                                $('#file-details .file-size').text((file.size / 1024).toFixed(2) + ' KB');
                            }
                            reader.readAsDataURL(file);
                        }
                    }, 100);
                }
            }


            // Remove image
            removeButton.on('click', function () {
                uploadedImage.addClass('d-none');
                input.val(''); // Clear the input
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            let input = $('#product-images');
            let uploadArea = $('#multi-upload-area');
            let uploadedImages = $('#multi-uploaded-images');

            // Click to open file input
            uploadArea.on('click', function () {
                input.click();
            });

            // Handle input change
            input.on('change', function (e) {
                handleFiles(e.target.files);
            });

            // Drag and Drop
            uploadArea.on('dragover', function (e) {
                e.preventDefault();
                uploadArea.addClass('dragover');
            });

            uploadArea.on('dragleave', function (e) {
                e.preventDefault();
                uploadArea.removeClass('dragover');
            });

            uploadArea.on('drop', function (e) {
                e.preventDefault();
                uploadArea.removeClass('dragover');
                handleFiles(e.originalEvent.dataTransfer.files);
            });

            function handleFiles(files) {
                for (let i = 0; i < files.length; i++) {
                    uploadFile(files[i]);
                }
            }

            function uploadFile(file) {
                if (!file.type.startsWith('image/')) return;

                const fileSizeKB = (file.size / 1024).toFixed(2) + ' KB';

                // Create wrapper with image hidden initially
                let wrapper = $(`
            <div class="image-wrapper position-relative mb-3 d-flex align-items-center gap-2">
                <img src="" alt="Uploading..." style="width: 50px; height: 50px; object-fit: cover; display: none;">
                <div class="file-info">
                    <div class="file-name fw-bold">${file.name}</div>
                    <div class="file-size text-muted small">${fileSizeKB}</div>
                    <div class="progress mt-2 w-50" style="height: 6px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>
                    </div>
                </div>
                <button type="button" class="remove-btn btn btn-sm text-danger ms-auto" style="background-color:#FFEEED;">
                    <i data-feather="trash"></i>
                </button>
            </div>
        `);

                uploadedImages.append(wrapper);

                let progressBar = wrapper.find('.progress-bar');
                let imgTag = wrapper.find('img');

                // Fake upload progress
                let progress = 0;
                let interval = setInterval(function () {
                    progress += 10;
                    progressBar.css('width', progress + '%');

                    if (progress >= 100) {
                        clearInterval(interval);

                        // Display the image after "upload" finishes
                        let reader = new FileReader();
                        reader.onload = function (e) {
                            imgTag.attr('src', e.target.result).fadeIn();
                            wrapper.find('.progress').remove();
                        }
                        reader.readAsDataURL(file);
                    }
                }, 100);

                // Remove button
                wrapper.find('.remove-btn').on('click', function () {
                    wrapper.remove();
                });

                // Re-render feather icons
                feather.replace();
            }
        });
    </script>
    <script>
        $(document).ready(function () {
            let optionInput = $('#option-image-input');
            let optionUploadArea = $('#option-upload-area');
            let optionProgress = $('#option-upload-progress');
            let optionProgressBar = $('#option-upload-progress .progress-bar');
            let optionUploadedImage = $('#option-uploaded-image');
            let optionRemoveButton = $('#option-remove-image');

            // Click to open file input
            optionUploadArea.on('click', function () {
                optionInput.click();
            });

            // Handle input change
            optionInput.on('change', function (e) {
                handleOptionFiles(e.target.files);
            });

            // Drag and Drop
            optionUploadArea.on('dragover', function (e) {
                e.preventDefault();
                optionUploadArea.addClass('dragover');
            });

            optionUploadArea.on('dragleave', function (e) {
                e.preventDefault();
                optionUploadArea.removeClass('dragover');
            });

            optionUploadArea.on('drop', function (e) {
                e.preventDefault();
                optionUploadArea.removeClass('dragover');
                handleOptionFiles(e.originalEvent.dataTransfer.files);
            });

            function handleOptionFiles(files) {
                if (files.length > 0) {
                    let file = files[0];

                    optionProgress.removeClass('d-none');
                    optionProgressBar.css('width', '0%');

                    let fakeProgress = 0;
                    let interval = setInterval(function () {
                        fakeProgress += 10;
                        optionProgressBar.css('width', fakeProgress + '%');

                        if (fakeProgress >= 100) {
                            clearInterval(interval);

                            let reader = new FileReader();
                            reader.onload = function (e) {
                                optionUploadedImage.find('img').attr('src', e.target.result);
                                optionUploadedImage.removeClass('d-none');
                                optionProgress.addClass('d-none');

                                // Show file name and size
                                $('#option-uploaded-image .file-name').text(file.name);
                                $('#option-uploaded-image .file-size').text((file.size / 1024).toFixed(2) + ' KB');
                            }
                            reader.readAsDataURL(file);
                        }
                    }, 100);
                }
            }

            // Remove image
            optionRemoveButton.on('click', function () {
                optionUploadedImage.addClass('d-none');
                optionInput.val('');

                // Also clear file name and size
                $('#option-uploaded-image .file-name').text('');
                $('#option-uploaded-image .file-size').text('');
            });
        });
    </script>
    <script>
        $(document).ready(function () {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Toggle pricing
            $('input[name="has_custom_prices"]').on('change', function () {
                const isCustom = $(this).val() === '1';

                // Show/hide the respective sections
                $('#custom-price-section')
                    .toggle(isCustom)
                    .find('input, select, textarea, button') // disable all form fields in repeater
                    .prop('disabled', !isCustom);

                $('#default-price-section')
                    .toggle(!isCustom)
                    .find('input, select, textarea, button')
                    .prop('disabled', isCustom)
                    .val('');

                // Reset inputs when toggling
                if (!isCustom) {
                    $('#custom-price-section').find('input').val('');
                } else {
                    $('#default-price-section').find('input').val('');
                }

                // OPTIONAL: Completely clear repeater rows if needed
                if (!isCustom) {
                    $('#custom-price-section .repeater-item').remove(); // adjust selector as needed
                }
            });


            function updateDeleteButtons(containerSelector) {
                $(containerSelector).find('[data-repeater-list]').each(function () {
                    var items = $(this).find('[data-repeater-item]');
                    items.each(function () {
                        $(this).find('[data-repeater-delete]').show();
                        feather.replace();
                    });
                });
            }


            function initializeImageUploaders(context) {
                $(context).find('.option-upload-area').each(function () {
                    const uploadArea = $(this);
                    const input = uploadArea.closest('.col-md-12').find('.option-image-input');
                    const previewContainer = uploadArea.closest('.col-md-12').find('.option-uploaded-image');
                    const imagePreview = previewContainer.find('.option-image-preview');
                    const fileNameLabel = previewContainer.find('.option-file-name');
                    const fileSizeLabel = previewContainer.find('.option-file-size');
                    const removeButton = previewContainer.find('.option-remove-image');

                    uploadArea.off('click').on('click', function () {
                        input.trigger('click');
                    });

                    input.off('change').on('change', function () {
                        const file = this.files[0];
                        if (file) {
                            const reader = new FileReader();
                            reader.onload = function (e) {
                                imagePreview.attr('src', e.target.result);
                                fileNameLabel.text(file.name);
                                fileSizeLabel.text((file.size / 1024).toFixed(1) + ' KB');
                                previewContainer.removeClass('d-none');
                            };
                            reader.readAsDataURL(file);
                        }
                    });

                    removeButton.off('click').on('click', function () {
                        input.val('');
                        previewContainer.addClass('d-none');
                    });
                });
            }


            $('.select2').select2();

            // Category -> Subcategory
            $('.category-select').on('change', function () {
                const categoryId = $(this).val();
                const $subCategorySelect = $('.sub-category-select');
                $.ajax({
                    url: `${$subCategorySelect.data('sub-category-url')}?filter[parent_id]=${categoryId}`,
                    method: "GET",
                    success: function (res) {
                        $subCategorySelect.empty().append('<option value="">Select subproduct</option>');
                        $.each(res.data, (i, s) => $subCategorySelect.append(`<option value="${s.id}">${s.name}</option>`));
                    },
                    error: function () {
                        $subCategorySelect.empty().append('<option value="">Error loading Subcategories</option>');
                    }
                });
            });

            // Form submit
            $('#product-form').on('submit', function (e) {
                e.preventDefault();

                if (window.selectedProductIsTableau) {
                    let missingFrame = false;

                    $(".option-frame-wrapper:visible").each(function () {
                        const frameId = $(this).find(".option-frame-image-hidden").val();

                        if (!frameId) {
                            missingFrame = true;
                            return false;
                        }
                    });

                    if (missingFrame) {
                        showTableauToastError("Please upload frame image for every Frame Color option.");
                        return;
                    }
                }

                const isCustom = $('input[name="has_custom_prices"]:checked').val() === '1';

                if (!isCustom) {
                    // Disable all cu   stom price inputs so they're not submitted
                    $('[name^="prices["]').prop('disabled', true);
                }
                const saveButton = $('.saveChangesButton');
                const saveLoader = $('.saveLoader');
                const saveButtonText = $('.saveChangesButton .btn-text');
                saveButton.prop('disabled', true);
                saveLoader.removeClass('d-none');
                saveButtonText.addClass('d-none');
                const formData = new FormData(this);
                const customDimensions = sessionStorage.getItem('custom_dimensions');
                if (customDimensions) {
                    const parsedDimensions = JSON.parse(customDimensions);
                    parsedDimensions.forEach((dim, index) => {
                        formData.append(`custom_dimensions[${index}][width]`, dim.width);
                        formData.append(`custom_dimensions[${index}][height]`, dim.height);
                        formData.append(`custom_dimensions[${index}][unit]`, dim.unit);
                        formData.append(`custom_dimensions[${index}][name]`, dim.name);
                        formData.append(`custom_dimensions[${index}][is_custom]`, dim.is_custom);
                    });
                }
                $.ajax({
                    url: this.action,
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if (res.success) {
                            Toastify({
                                text: "Category updated successfully!",
                                duration: 2000,
                                gravity: "top",
                                position: "right",
                                backgroundColor: "#28C76F",
                                close: true,
                            }).showToast();
                            window.location.href = '/products';
                        }
                    },
                    error: function (xhr) {
                        $.each(xhr.responseJSON.errors, (k, msgArr) => {
                            Toastify({
                                text: msgArr[0],
                                duration: 4000,
                                gravity: "top",
                                position: "right",
                                backgroundColor: "#EA5455",
                                close: true
                            }).showToast();
                        });
                        saveButton.prop('disabled', false);
                        saveLoader.addClass('d-none');
                        saveButtonText.removeClass('d-none');
                    }
                });
            });
            $(document).on('click', '.remove-old-image', function () {
                let btn = $(this);
                let imageId = btn.data('image-id');

                // Optionally, add a hidden input to track removed images
                $('<input>').attr({
                    type: 'hidden',
                    name: 'deleted_old_images[]',
                    value: imageId
                }).appendTo('form');

                // remove preview
                btn.closest('.uploaded-image').remove();
            });

            //Remove Extra Image
            {{--$('.remove-old-image').on('click', function(e) {--}}
            {{--    e.preventDefault();--}}
            {{--    var button = $(this);--}}
            {{--    var imageId = button.data('image-id');--}}
            {{--    var imageElement = button.closest('.uploaded-image');--}}
            {{--    $.ajax({--}}
            {{--        url: '{{ url("api/media") }}/' + imageId,--}}
            {{--        method: "DELETE",--}}
            {{--        success: function(response) {--}}
            {{--            imageElement.remove();--}}
            {{--            Toastify({--}}
            {{--                text: "Image Removed Successfully",--}}
            {{--                duration: 4000,--}}
            {{--                gravity: "top",--}}
            {{--                position: "right",--}}
            {{--                backgroundColor: "#28a745",--}}
            {{--                close: true--}}
            {{--            }).showToast();--}}
            {{--        },--}}
            {{--        error: function(xhr) {--}}
            {{--            console.log(xhr.responseJson.errors)--}}
            {{--        }--}}
            {{--    })--}}

            {{--});--}}
        });
    </script>
    <script>
        $('.invoice-repeater').find('[data-repeater-delete]').show(); // Show delete button for others

        // Repeater
        $('.invoice-repeater').repeater({

            show: function () {
                $(this).slideDown();
                feather && feather.replace();

                // Recalculate delete button visibility when an item is shown
                // var items = $(this).closest('.invoice-repeater').find('[data-repeater-item]');
                // items.each(function (index) {
                //     // Hide delete button for the first item (index 0) and show for others
                //     if (index === 0) {
                //         $(this).find('[data-repeater-delete]').hide(); // Hide the delete button for the first item
                //     } else {
                $(this).find('[data-repeater-delete]').show(); // Show delete button for others
                //     }
                // });
            },
            hide: function (deleteElement) {
                $(this).slideUp(deleteElement);

                // Recalculate delete button visibility after an item is removed
                var items = $(this).closest('.invoice-repeater').find('[data-repeater-item]');
                items.each(function (index) {
                    // Hide delete button for the first item (index 0) and show for others
                    if (index === 0) {
                        $(this).find('[data-repeater-delete]').hide(); // Hide the delete button for the first item
                    } else {
                        $(this).find('[data-repeater-delete]').show(); // Show delete button for others
                    }
                });
            }
        });
        // Immediately neutralize deleted items so they won't submit
        $(document).on('click', '[data-repeater-delete]', function (e) {
            const $item = $(this).closest('[data-repeater-item]');
            // mark as deleting (optional)
            $item.attr('data-deleting', '1');

            // disable & remove name so FormData won’t pick them up
            $item.find('input, select, textarea').each(function () {
                $(this).prop('disabled', true);
                // if it's an input created for uploads, clear it too
                if (this.type === 'hidden') this.value = '';
                // remove name to be double-safe
                if (this.name) this.removeAttribute('name');
            });
        });

    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const steps = ["step1", "step2", "step3"];
            let currentStep = 0;

            const showStep = (index) => {
                currentStep = index;

                // Update tab panes
                steps.forEach((step, i) => {
                    const tab = document.getElementById(step);
                    tab.classList.toggle("active", i === index);
                    tab.classList.toggle("d-none", i !== index);
                });

                // Update tab headers
                document.querySelectorAll("#formTabs .nav-link").forEach((link, i) => {
                    link.classList.toggle("active", i === index);
                });
            };

            // Header tab clicks
            document.querySelectorAll("#formTabs .nav-link").forEach(link => {
                link.addEventListener("click", function (e) {
                    e.preventDefault();
                    const stepIndex = parseInt(this.dataset.step);
                    showStep(stepIndex);
                });
            });

            // Next buttons
            document.querySelectorAll(".next-tab").forEach(btn => {
                btn.addEventListener("click", () => {
                    if (currentStep < steps.length - 1) {
                        showStep(currentStep + 1);
                    }
                });
            });

            // Prev buttons
            document.querySelectorAll(".prev-tab").forEach(btn => {
                btn.addEventListener("click", () => {
                    if (currentStep > 0) {
                        showStep(currentStep - 1);
                    }
                });
            });

            // Initial load
            showStep(currentStep);
        });
    </script>



    <script>
        Dropzone.autoDiscover = false;

        window.selectedProductIsTableau = false;

        function showVariants() {
            $('#variants-title').show();
            $('#variants-container').show();
        }

        function hideVariants() {
            $('#variants-title').hide();
            $('#variants-container').empty().hide();
        }

        function showTableauToastError(message) {
            Toastify({
                text: message,
                duration: 4000,
                gravity: "top",
                position: "right",
                backgroundColor: "#EA5455",
                close: true
            }).showToast();
        }

        function parseTableauMediaDataset(value) {
            if (!value || value === 'null') return null;

            try {
                return JSON.parse(value);
            } catch (e) {
                return null;
            }
        }

        function addExistingDropzoneFile(dropzone, media) {
            if (!media || !media.id || !media.url) return;

            const mockFile = {
                name: media.file_name || 'Image',
                size: media.size || 12345,
                _hiddenInputId: media.id
            };

            dropzone.emit("addedfile", mockFile);
            dropzone.emit("thumbnail", mockFile, media.url);
            dropzone.emit("complete", mockFile);
            dropzone.files.push(mockFile);
        }

        function initOptionFrameDropzone(element, existingMedia = null) {
            if (!element || element.dropzone) return;

            const wrapper = element.closest(".option-frame-wrapper");
            if (!wrapper) return;

            const hiddenInput = wrapper.querySelector(".option-frame-image-hidden");
            if (!hiddenInput) return;

            new Dropzone(element, {
                url: "{{ route('media.store') }}",
                paramName: "file",
                maxFiles: 1,
                maxFilesize: 1,
                acceptedFiles: "image/*",
                addRemoveLinks: true,
                headers: {
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
                },
                dictDefaultMessage: "Drop frame image here or click to upload",
                init: function () {
                    // Do not restore copied existing frame media for newly cloned option rows.
                    // Existing edit rows have a hidden value; new rows are reset to an empty hidden value.
                    if (existingMedia?.id && hiddenInput.value) {
                        addExistingDropzoneFile(this, existingMedia);
                        hiddenInput.value = existingMedia.id;
                    }

                    this.on("success", function (file, response) {
                        if (response.success && response.data) {
                            file._hiddenInputId = response.data.id;
                            hiddenInput.value = response.data.id;
                        }
                    });

                    this.on("removedfile", function (file) {
                        hiddenInput.value = "";

                        if (file._hiddenInputId) {
                            fetch("{{ url('api/v1/media') }}/" + file._hiddenInputId, {
                                method: "DELETE",
                                headers: {
                                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                                }
                            });
                        }
                    });
                }
            });
        }

        function initOptionFrameDropzones(context = document) {
            const root = context || document;
            root.querySelectorAll(".option-frame-dropzone").forEach(function (element) {
                const wrapper = element.closest(".option-frame-wrapper");
                const hiddenInput = wrapper?.querySelector(".option-frame-image-hidden");
                const existingMedia = hiddenInput?.value
                    ? parseTableauMediaDataset(element.dataset.existingFrameMedia)
                    : null;

                initOptionFrameDropzone(element, existingMedia);
            });
        }

        function resetClonedOptionFrameUploader(context) {
            const $context = $(context);

            $context.find(".option-frame-wrapper").hide();
            $context.find(".option-frame-image-hidden").prop("disabled", true).val("");

            $context.find(".option-frame-dropzone").each(function () {
                if (this.dropzone) {
                    this.dropzone.destroy();
                }

                this.dataset.existingFrameMedia = 'null';
                this.classList.remove('dz-started', 'dz-max-files-reached', 'dz-clickable');
                this.innerHTML = '<div class="dz-message" data-dz-message><span>Drop frame image here or click to upload</span></div>';
            });

            if (typeof window.refreshTableauFrameUploaders === 'function') {
                window.refreshTableauFrameUploaders(context || document);
            }
        }

        function clearOptionFrameImages() {
            document.querySelectorAll(".option-frame-image-hidden").forEach(function (input) {
                input.value = "";
            });

            document.querySelectorAll(".option-frame-dropzone").forEach(function (element) {
                if (element.dropzone) {
                    element.dropzone.removeAllFiles(true);
                }
            });
        }

        function setTableauMode(isTableau) {
            window.selectedProductIsTableau = isTableau;
            if (window.modelIsTableau) {
                hideVariants();
            } else {
                showVariants();
            }

            // Show frame uploaders only for the Frame Color spec, never for all specs.
            if (typeof window.refreshTableauFrameUploaders === 'function') {
                window.refreshTableauFrameUploaders(document);
            } else {
                $(".option-frame-wrapper").hide();
                $(".option-frame-image-hidden").prop("disabled", true);
            }

            setTimeout(function () {
                if (typeof generateVariants === 'function') generateVariants();
            }, 0);
        }

        function handleSelectedProductTableauState() {
            const selectedOption = $(".category-select option:selected");
            const isTableau = Number(selectedOption.data("is-tableau")) === 1;

            setTableauMode(isTableau);
        }

        $(document).ready(function () {
            handleSelectedProductTableauState();

            $(".category-select").on("change", function () {
                handleSelectedProductTableauState();
            });

            $(document).on("click", "[data-repeater-create]", function () {
                setTimeout(function () {
                    document.querySelectorAll(".option-frame-dropzone").forEach(function (element) {
                        if (!element.dropzone) {
                            const wrapper = element.closest(".option-frame-wrapper");
                            const hiddenInput = wrapper?.querySelector(".option-frame-image-hidden");

                            if (hiddenInput && element.dataset.existingFrameMedia && element.dataset.existingFrameMedia !== 'null') {
                                hiddenInput.value = "";
                                element.dataset.existingFrameMedia = 'null';
                                element.classList.remove('dz-started', 'dz-max-files-reached');
                                element.innerHTML = '<div class="dz-message" data-dz-message><span>Drop frame image here or click to upload</span></div>';
                            }
                        }
                    });

                    if (typeof window.refreshTableauFrameUploaders === 'function') {
                        window.refreshTableauFrameUploaders(document);
                    }
                }, 300);
            });
        });
    </script>


    {{-- Tableau frame dropzone repeater fix: only show frame upload under Frame Color spec --}}
    <script>
        (function () {
            function frameUploaderHtml() {
                return `
                    <div class="col-md-12 mt-1 option-frame-wrapper" style="display:none;">
                        <label class="form-label label-text">Option Frame Image</label>
                        <div class="dropzone option-frame-dropzone border rounded p-3"
                             data-existing-frame-media="null"
                             style="cursor:pointer; min-height:120px;">
                            <div class="dz-message" data-dz-message>
                                <span>Drop frame image here or click to upload</span>
                            </div>
                        </div>
                        <span class="image-hint small text-end">
                            Max size: 1MB | Dimensions: 200x200 px
                        </span>
                        <input type="hidden" name="option_frame_image" class="option-frame-image-hidden" disabled>
                    </div>
                `;
            }

            function normalizeFrameSpecName(value) {
                return String(value || '')
                    .toLowerCase()
                    .replace(/[\u064B-\u065F\u0670]/g, '') // Arabic diacritics
                    .replace(/[أإآ]/g, 'ا')
                    .replace(/ة/g, 'ه')
                    .replace(/ـ/g, '')
                    .replace(/[_-]+/g, ' ')
                    .replace(/\s+/g, ' ')
                    .trim();
            }

            function isFrameColorSpecItem($specItem) {
                if (!$specItem || !$specItem.length) return false;

                const nameEn = normalizeFrameSpecName($specItem.find('.spec-name-en').first().val());
                const nameAr = normalizeFrameSpecName($specItem.find('.spec-name-ar').first().val());

                const englishMatches = [
                    'frame color',
                    'frame colour',
                    'framecolor',
                    'framecolour'
                ];

                const arabicMatches = [
                    'لون الاطار',
                    'لون البرواز',
                    'لون الفريم'
                ];

                return englishMatches.includes(nameEn)
                    || englishMatches.some(function (name) { return nameEn.includes(name); })
                    || arabicMatches.includes(nameAr)
                    || arabicMatches.some(function (name) { return nameAr.includes(name); });
            }

            function getSpecItemFromFrameWrapper(wrapper) {
                const $innerRepeater = $(wrapper).closest('.inner-repeater');

                if (!$innerRepeater.length) return $();

                // The .inner-repeater lives directly inside the outer specification item.
                return $innerRepeater.closest('[data-repeater-item]');
            }

            function shouldShowFrameUploader(wrapper) {
                if (!window.selectedProductIsTableau) return false;

                const $specItem = getSpecItemFromFrameWrapper(wrapper);

                return isFrameColorSpecItem($specItem);
            }

            function optionItemsInside(context) {
                const $context = $(context || document);
                let $items = $();

                if ($context.is('[data-repeater-list="specification_options"] > [data-repeater-item]')) {
                    $items = $items.add($context);
                }

                return $items.add(
                    $context.find('[data-repeater-list="specification_options"] > [data-repeater-item]')
                );
            }

            function wrappersInside(context) {
                const $context = $(context || document);
                let $wrappers = $();

                if ($context.is('.option-frame-wrapper')) {
                    $wrappers = $wrappers.add($context);
                }

                return $wrappers.add($context.find('.option-frame-wrapper'));
            }

            window.ensureOptionFrameWrappers = function (context) {
                optionItemsInside(context).each(function () {
                    const $optionItem = $(this);

                    if ($optionItem.find('.option-frame-wrapper').length) return;

                    const $optionImageCol = $optionItem.find('.uploadedImage').last().closest('.col-md-12');

                    if ($optionImageCol.length) {
                        $optionImageCol.append(frameUploaderHtml());
                    }
                });
            };

            window.resetClonedOptionFrameUploader = function (context) {
                window.ensureOptionFrameWrappers(context);

                const $context = $(context || document);

                $context.find('.option-frame-image-hidden').val('');

                $context.find('.option-frame-dropzone').each(function () {
                    if (this.dropzone) {
                        this.dropzone.destroy();
                    }

                    this.dataset.existingFrameMedia = 'null';
                    this.classList.remove('dz-started', 'dz-max-files-reached', 'dz-clickable');
                    this.innerHTML = '<div class="dz-message" data-dz-message><span>Drop frame image here or click to upload</span></div>';
                });

                window.refreshTableauFrameUploaders(context || document);
            };

            window.initOptionFrameDropzones = function (context) {
                window.ensureOptionFrameWrappers(context || document);

                wrappersInside(context || document).each(function () {
                    if (!shouldShowFrameUploader(this)) return;

                    const dropzoneElement = this.querySelector('.option-frame-dropzone');
                    const hiddenInput = this.querySelector('.option-frame-image-hidden');

                    if (!dropzoneElement || !hiddenInput || dropzoneElement.dropzone) return;

                    const existingMedia = (hiddenInput.value && typeof parseTableauMediaDataset === 'function')
                        ? parseTableauMediaDataset(dropzoneElement.dataset.existingFrameMedia)
                        : null;

                    if (typeof initOptionFrameDropzone === 'function') {
                        initOptionFrameDropzone(dropzoneElement, existingMedia);
                    }
                });
            };

            window.refreshTableauFrameUploaders = function (context) {
                window.ensureOptionFrameWrappers(context || document);

                wrappersInside(context || document).each(function () {
                    const shouldShow = shouldShowFrameUploader(this);
                    const hiddenInput = this.querySelector('.option-frame-image-hidden');

                    $(this).toggle(shouldShow);

                    if (hiddenInput) {
                        hiddenInput.disabled = !shouldShow;
                    }
                });

                if (window.selectedProductIsTableau) {
                    window.initOptionFrameDropzones(context || document);
                }
            };

            $(document).on('keyup change', '.spec-name-en, .spec-name-ar', function () {
                window.refreshTableauFrameUploaders(document);
            });

            $(document).on('click', '[data-repeater-create], [data-repeater-delete]', function () {
                const button = this;

                setTimeout(function () {
                    const $scope = $(button).closest('.inner-repeater, .outer-repeater, #step3');
                    window.refreshTableauFrameUploaders($scope.length ? $scope : document);
                }, 450);
            });

            $(document).ready(function () {
                window.refreshTableauFrameUploaders(document);
            });
        })();
    </script>



    <script>
        /*
         * Tableau padding for Edit pages:
         * Show "Padding Value" only for the Frame Model spec options.
         * Do not depend on #is_tableau only, because Edit Categories uses the selected Product option.
         */
        (function () {
            function getSpecListForPadding() {
                return $('.outer-repeater').find('[data-repeater-list="specifications"]').first();
            }

            function normalizePaddingSpecName(value) {
                return String(value || '')
                    .toLowerCase()
                    .replace(/[\u064B-\u065F\u0670]/g, '')
                    .replace(/[أإآ]/g, 'ا')
                    .replace(/ة/g, 'ه')
                    .replace(/ـ/g, '')
                    .replace(/[_-]+/g, ' ')
                    .replace(/\s+/g, ' ')
                    .trim();
            }

            function isCurrentPageTableauForPadding() {
                const selectedOption = $('.category-select option:selected');

                const selectedOptionIsTableau =
                    Number(selectedOption.attr('data-is-tableau')) === 1 ||
                    Number(selectedOption.data('is-tableau')) === 1;

                const hasTableauSwitch =
                    $('#is_tableau').length > 0 &&
                    $('#is_tableau').is(':checked');

                return Boolean(
                    hasTableauSwitch ||
                    selectedOptionIsTableau ||
                    window.selectedProductIsTableau === true ||
                    window.modelIsTableau === true
                );
            }

            function getSpecItemFromPaddingWrapper(wrapper) {
                const $innerRepeater = $(wrapper).closest('.inner-repeater');

                if ($innerRepeater.length) {
                    return $innerRepeater.closest('[data-repeater-item]');
                }

                return $(wrapper).closest('[data-repeater-list="specifications"] > [data-repeater-item]');
            }

            function isFrameModelSpecItem($specItem) {
                if (!$specItem || !$specItem.length) {
                    return false;
                }

                const key =
                    String($specItem.attr('data-spec-key') || '').trim() ||
                    String($specItem.find('.spec-fixed-key').first().val() || '').trim();

                if (key === 'frame_model') {
                    return true;
                }

                const nameEn = normalizePaddingSpecName($specItem.find('.spec-name-en').first().val());
                const nameAr = normalizePaddingSpecName($specItem.find('.spec-name-ar').first().val());

                const englishMatches = [
                    'frame model',
                    'framemodel',
                    'frame type',
                    'model frame'
                ];

                const arabicMatches = [
                    'موديل البرواز',
                    'موديل الاطار',
                    'نموذج البرواز',
                    'نموذج الاطار',
                    'نوع البرواز',
                    'نوع الاطار'
                ];

                return englishMatches.includes(nameEn)
                    || englishMatches.some(function (name) { return nameEn.includes(name); })
                    || arabicMatches.includes(nameAr)
                    || arabicMatches.some(function (name) { return nameAr.includes(name); });
            }

            window.syncOptionPaddingVisibility = function (context) {
                const isTableau = isCurrentPageTableauForPadding();
                const $scope = context ? $(context) : $(document);

                let $wrappers = $();

                if ($scope.is('.option-frame-model-padding-wrapper')) {
                    $wrappers = $wrappers.add($scope);
                }

                $wrappers = $wrappers.add($scope.find('.option-frame-model-padding-wrapper'));

                // If the passed context does not contain wrappers, refresh all wrappers.
                if (!$wrappers.length) {
                    $wrappers = $('.option-frame-model-padding-wrapper');
                }

                $wrappers.each(function () {
                    const $wrapper = $(this);
                    const $input = $wrapper.find('.option-padding-value');
                    const $specItem = getSpecItemFromPaddingWrapper(this);

                    const shouldShow = isTableau && isFrameModelSpecItem($specItem);

                    $wrapper.toggle(shouldShow);
                    $input.prop('disabled', !shouldShow);
                });
            };

            $(document).ready(function () {
                window.syncOptionPaddingVisibility(document);
            });

            $(document).on('change', '#is_tableau, .category-select', function () {
                window.syncOptionPaddingVisibility(document);
            });

            $(document).on('keyup change', '.spec-name-en, .spec-name-ar, .spec-fixed-key', function () {
                window.syncOptionPaddingVisibility(document);
            });

            $(document).on('click', '[data-repeater-create], [data-repeater-delete]', function () {
                const button = this;

                setTimeout(function () {
                    const $scope = $(button).closest('.inner-repeater, .outer-repeater, #step3');
                    window.syncOptionPaddingVisibility($scope.length ? $scope : document);
                }, 450);
            });
        })();
    </script>

@endsection