@extends('layouts/contentLayoutMaster')
@php
    $dimensions = \App\Models\Dimension::query()
    ->where('is_custom', false)
    ->orWhereHas('categories', 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) => ! in_array($spec->fixed_key, ['frame_model', 'tableau_size', 'frame_color'], true))
      ->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();
@endphp
@section('title', 'Edit Products')
@section('main-page', 'Products')
@section('sub-page', 'Edit Product')
@section('main-page-url', route("categories.index"))
@section('sub-page-url', route("categories.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('product-without-categories.update',$model->id) }}" method="POST"
                              enctype="multipart/form-data">
                            @csrf
                            @method("PUT")
                            <input type="hidden" name="is_has_category" value="0">

                            {{-- 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;">Product
                                        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;">Product
                                        Specs</a>
                                </li>
                            </ul>


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

                                        {{-- Product Colors --}}
                                        {{--                                        <div class="col-md-12">--}}
                                        {{--                                            <div class="mb-2">--}}
                                        {{--                                                <label class="form-label label-text">Product 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('category_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">Product
                                                    Images</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>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-2">
                                                    <label class="form-label label-text" for="sort">Product Ordering<span
                                                            style="color: red; font-size: 20px;">*</span></label>
                                                    <input type="number" id="sort" class="form-control"
                                                           name="sort"
                                                           placeholder="Product ordering"
                                                           value="{{ $model->sort }}"/>
                                                </div>
                                            </div>
                                            <!-- Tags -->
                                            <div class="col-md-6">
                                                <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>
                                        </div>

                                        <!-- Dimensions -->
                                        <div class="col-md-12">
                                            <div class="mb-1">
                                                <label class="form-label label-text">Product 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="row">
                                        <!-- Has Mockup -->
                                        <div class="col-md-6">
                                            <div class="mb-2 d-flex align-items-center gap-2">
                                                <label class="form-label label-text ">Is this product has
                                                    Mockup?</label>
                                                <div class="form-check form-switch">
                                                    <input type="hidden" name="has_mockup" value="0"/>
                                                    <input class="form-check-input" type="checkbox" id="has_mockup"
                                                           name="has_mockup"
                                                           value="1" @checked($model->has_mockup == 1) />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-2 d-flex align-items-center gap-2">
                                                <label class="form-label label-text ">Is this product has
                                                    Orientation?</label>
                                                <div class="form-check form-switch">
                                                    <input type="hidden" name="has_orientation" value="0"/>
                                                    <input class="form-check-input" type="checkbox" id="has_orientation"
                                                           name="has_orientation"
                                                           value="1" @checked($model->has_orientation == 1) />
                                                </div>
                                            </div>
                                        </div>
                                        {{-- Tableau Toggle --}}
                                        <div class="col-md-6">
                                            <div class="mb-2 d-flex align-items-center gap-2">
                                                <label class="form-label label-text">Is this product a Tableau?</label>
                                                <div class="form-check form-switch">
                                                    <input type="hidden" name="is_tableau" value="0"/>
                                                    <input class="form-check-input" type="checkbox" id="is_tableau"
                                                           name="is_tableau" value="1"
                                                        @checked($model->is_tableau == 1) />
                                                </div>
                                            </div>
                                        </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">
                                            <div>
                                                @php
                                                    $tableauFixedKeys = ['frame_model', 'tableau_size', 'frame_color'];
                                                    $editableSpecifications = $model->specifications->filter(function ($specification) use ($tableauFixedKeys) {
                                                        return $specification->fixed_key !== 'cutting'
                                                            && ($specification->type != 'fixed' || in_array($specification->fixed_key, $tableauFixedKeys, true));
                                                    });
                                                    $hasSpecs = $editableSpecifications->isNotEmpty();
                                                    $cuttingSpec = $model->specifications()
                                                                ->where('fixed_key', 'cutting')
                                                                ->first();

                                                    $cuttingSpecId = $cuttingSpec?->id;
                                                @endphp
                                                <div class="col-12">
                                                    <div class="mb-2">
                                                        <label class="form-label label-text">Product Specs</label>
                                                        <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>


                                                    <!-- Free Shipping -->
                                                    {{-- <div class="col-md-12 col-12 mb-2">--}}
                                                    {{-- <div class="form-check form-switch">--}}
                                                    {{-- <input type="hidden" name="is_free_shipping" value="0">--}}
                                                    {{-- <input type="checkbox" class="form-check-input" id="free-shipping"
                                                        name="is_free_shipping" value="1">--}}
                                                    {{-- <label class="form-check-label" for="free-shipping">Product available
                                                        for
                                                        free shipping</label>--}}
                                                    {{-- </div>--}}
                                                    {{-- </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(in_array($specification->fixed_key, $tableauFixedKeys, true)) 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="{{ in_array($specification->fixed_key, $tableauFixedKeys, true) ? $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(in_array($specification->fixed_key, $tableauFixedKeys, true))
                                                                                   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(in_array($specification->fixed_key, $tableauFixedKeys, true))
                                                                                   placeholder="Specification Name (AR)"/>
                                                                        </div>
                                                                    </div>
                                                                    <!-- Inner Repeater for Specification Options -->
                                                                    <div class="inner-repeater"
                                                                         data-init-empty="{{ $specification->options->isEmpty() ? 'true' : 'false' }}">
                                                                        <div data-repeater-list="specification_options">
                                                                            @foreach($specification->options as $option)
                                                                                <div data-repeater-item>
                                                                                    <input type="hidden" name="id"
                                                                                           value="{{ $option->id }}">

                                                                                    <div
                                                                                        class="row d-flex flex-column flex-md-row gap-1 gap-md-0 mt-2">
                                                                                        <!-- 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) }}'>
                                                                                            </div>

                                                                                            <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>

                                                                                        <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>
                                                                                    {{-- Frame Image per Option --}}
                                                                                    <div class="col-md-12 mt-1 option-frame-wrapper"
                                                                                         style="{{ ($model->is_tableau && $specification->fixed_key === 'frame_color') ? '' : 'display:none;' }}">
                                                                                        <label class="form-label label-text">Option Frame Image</label>
                                                                                        <div class="dropzone option-frame-dropzone border rounded p-3"
                                                                                             style="cursor:pointer; min-height:120px;"
                                                                                             data-existing-frame='{{ json_encode($option->frameImage ? [
             "id"  => $option->frameImage->id,
             "url" => $option->frameImage->getUrl(),
             "file_name" => $option->frameImage->file_name,
             "size" => $option->frameImage->size,
         ] : null) }}'>
                                                                                            <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="{{ $option->frameImage?->id ?? '' }}">
                                                                                    </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="{{ in_array($specification->fixed_key, $tableauFixedKeys, true) ? '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>

                                                                                    <!-- Frame Model Padding Value (Tableau only) -->
                                                                                    <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>
                                                                                <span
                                                                                    class="image-hint small text-end">
                                                Max size: 1MB | Dimensions: 200x200 px
                                            </span>
                                                                                {{-- Frame Image per Option (empty state) --}}
                                                                                <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"
                                                                                         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>
                                                                                <!-- ✅ 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>

                                                                        </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 Custom 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 Product</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="">
        // ----- Tableau fixed specs helpers -----
        const TABLEAU_FIXED_SPECS = [
            {
                key: 'frame_model',
                nameEn: 'Frame Model',
                nameAr: 'موديل البرواز'
            },
            {
                key: 'tableau_size',
                nameEn: 'Tableau Size',
                nameAr: 'مقاس التابلوه'
            },
            {
                key: 'frame_color',
                nameEn: 'Frame Color',
                nameAr: 'لون البرواز'
            }
        ];

        let isSyncingTableauSpecs = false;

        function getSpecListEl() {
            return $('.outer-repeater').find('[data-repeater-list="specifications"]').first();
        }

        function findSpecItemByKey(key) {
            return getSpecListEl().find('[data-repeater-item][data-spec-key="' + key + '"]');
        }

        function getOuterCreateButton() {
            return $('.outer-repeater').children('.row').find('button[data-repeater-create]').first();
        }

        function isTableauProduct() {
            return $('#is_tableau').is(':checked');
        }

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

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

        function addSpecRepeaterItem({ key, nameEn, nameAr, locked = false }) {
            return new Promise(function (resolve) {
                if (findSpecItemByKey(key).length) {
                    resolve();
                    return;
                }

                const beforeItems = getSpecListEl().children('[data-repeater-item]').toArray();
                getSpecListEl().removeClass('d-none');
                getOuterCreateButton().trigger('click');

                setTimeout(function () {
                    const $items = getSpecListEl().children('[data-repeater-item]');

                    let $newItem = $items.filter(function () {
                        return !beforeItems.includes(this);
                    }).last();

                    if (!$newItem.length) {
                        $newItem = $items.last();
                    }

                    $newItem.attr('data-spec-key', key);
                    $newItem.find('.spec-fixed-key').val(key);

                    $newItem.find('.spec-name-en')
                        .val(nameEn)
                        .prop('readonly', locked)
                        .trigger('change');

                    $newItem.find('.spec-name-ar')
                        .val(nameAr)
                        .prop('readonly', locked)
                        .trigger('change');

                    if (locked) {
                        $newItem.find('.spec-delete-btn').hide();
                    }

                    const hasOptionRow = $newItem
                        .find('[data-repeater-list="specification_options"] > [data-repeater-item]')
                        .length > 0;

                    if (!hasOptionRow) {
                        $newItem.find('.inner-repeater button[data-repeater-create]').first().trigger('click');
                    }

                    setTimeout(function () {
                        syncOptionFrameVisibility();
                        syncOptionPaddingVisibility();

                        if (typeof initOptionDropzone === 'function') {
                            $newItem.find('.option-dropzone').each(function () {
                                initOptionDropzone(this);
                            });
                        }

                        if (typeof initOptionFrameDropzones === 'function') {
                            initOptionFrameDropzones();
                        }

                        if (window.feather) feather.replace();
                        if (typeof generateVariants === 'function') generateVariants();

                        resolve();
                    }, 150);
                }, 250);
            });
        }

        function removeSpecRepeaterItem(key) {
            const $item = findSpecItemByKey(key);
            if (!$item.length) return;

            $item.find('.spec-delete-btn').first().trigger('click');

            setTimeout(function () {
                syncOptionFrameVisibility();
                syncOptionPaddingVisibility();
                if (typeof generateVariants === 'function') generateVariants();
            }, 250);
        }

        async function syncTableauFixedSpecs() {
            if (isSyncingTableauSpecs) return;
            isSyncingTableauSpecs = true;

            const isTableau = $('#is_tableau').is(':checked');

            if (isTableau) {
                for (const spec of TABLEAU_FIXED_SPECS) {
                    await addSpecRepeaterItem({
                        key: spec.key,
                        nameEn: spec.nameEn,
                        nameAr: spec.nameAr,
                        locked: true
                    });
                }
                clearAndHideVariants();
            } else {
                TABLEAU_FIXED_SPECS.forEach(function (spec) {
                    removeSpecRepeaterItem(spec.key);
                });
                showVariants();
                generateVariants();
            }

            syncOptionFrameVisibility();
            syncOptionPaddingVisibility();
            isSyncingTableauSpecs = false;
        }

        function syncOptionFrameVisibility() {
            const isTableau = $('#is_tableau').is(':checked');

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

            if (!isTableau) {
                $('.option-frame-image-hidden').val('');
                return;
            }

            const $frameColorSpec = findSpecItemByKey('frame_color');
            if (!$frameColorSpec.length) {
                $('.option-frame-image-hidden').val('');
                return;
            }

            // Only frame_color can submit option_frame_image. Clear hidden values in all other specs.
            getSpecListEl()
                .children('[data-repeater-item]')
                .not($frameColorSpec)
                .find('.option-frame-image-hidden')
                .val('');

            $frameColorSpec.find('.option-frame-wrapper').show();

            if (typeof initOptionFrameDropzones === 'function') {
                initOptionFrameDropzones();
            }
        }

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

        // ----- 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');

                        setTimeout(() => {
                            window.generateVariants ? window.generateVariants() : generateVariants();
                        }, 0);
                    })
                    .catch(err => {
                        alert(err.message || 'Something went wrong');
                    });

            });
        });
    </script>
    <script>
        window.existingVariantsFromDB = @json($variantsForJs);
    </script>


    <script>
        function generateVariants() {
            if (isTableauProduct()) {
                clearAndHideVariants();
                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();
        });

        // When creating → safe to regenerate immediately
        $(document).on('click', '[data-repeater-create]', function () {
            setTimeout(function () {
                syncOptionFrameVisibility();
                syncOptionPaddingVisibility();
                if (typeof initOptionFrameDropzones === 'function') initOptionFrameDropzones();
                generateVariants();
            }, 0);
        });


        $(document).ready(function () {
            if (Object.keys(window.existingVariantsFromDB || {}).length) {
                generateVariants(); // builds UI using DB variants
            }
        });


    </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 resetDropzoneElement(element, message) {
            if (!element) return;

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

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

        function resetClonedOptionValueRow($row) {
            // New value must not keep ids from the cloned first value.
            $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.
            $row.find('.option-frame-image-hidden').val('');
            $row.find('.option-frame-dropzone').each(function () {
                resetDropzoneElement(this, 'Drop frame image here or click to upload');
            });
        }

        $(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',
                    show: function () {
                        const $row = $(this);

                        // ✅ IMPORTANT: jQuery repeater clones the first option row.
                        // Clear cloned ids/images/dropzone previews BEFORE initializing Dropzone.
                        resetClonedOptionValueRow($row);

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

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

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

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

                    // ✅ Reset readonly/locked state for new custom specs
                    $(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();

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

                    $(this).find('.uploadedImage').val('');
                    setTimeout(generateVariants, 0);
                },
                hide: function (deleteElement) {
                    const $item = $(this);

                    $item.slideUp(200, function () {
                        deleteElement();      // ✅ IMPORTANT: actually remove spec item
                        generateVariants();   // ✅ regenerate AFTER removal

                        // (optional) hide list if empty
                        var $specList = $item.closest('.outer-repeater').find('[data-repeater-list="specifications"]');
                        var $items = $specList.find('[data-repeater-item]');
                        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) {
            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 if editing
                    if (existingMedia) {
                        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);

                        // set hidden input
                        element.closest("[data-repeater-item]")
                            .querySelector(".uploadedImage").value = existingMedia.id;
                    }

                    // ✅ On success
                    dropzone.on("success", function (file, response) {
                        if (response?.data?.id) {
                            file._hiddenInputId = response.data.id;
                            element.closest("[data-repeater-item]")
                                .querySelector(".uploadedImage").value = response.data.id;
                        }
                    });

                    // ✅ On remove
                    dropzone.on("removedfile", function (file) {
                        let hiddenInput = element.closest("[data-repeater-item]")
                            .querySelector(".uploadedImage");
                        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('category_extra_images')->isNotEmpty())
                    @foreach($model->getMedia('category_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('categories')))
                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('category_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();
                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');

                if ($('#is_tableau').is(':checked')) {
                    clearAndHideVariants();
                }

                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: "Product updated successfully!",
                                duration: 2000,
                                gravity: "top",
                                position: "right",
                                backgroundColor: "#28C76F",
                                close: true,
                            }).showToast();
                            window.location.href = '/categories';
                        }
                    },
                    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
                //     }
                // });
            }
        });
        $(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;

        $('#is_tableau').on('change', function () {
            syncTableauFixedSpecs();
        });

        $(document).ready(function () {
            getSpecListEl().children('[data-repeater-item]').each(function () {
                const key = $(this).find('.spec-fixed-key').val();

                if (key) {
                    $(this).attr('data-spec-key', key);
                }

                if (['frame_model', 'tableau_size', 'frame_color'].includes(key)) {
                    $(this).find('.spec-name-en, .spec-name-ar').prop('readonly', true);
                    $(this).find('.spec-delete-btn').hide();
                }
            });

            syncTableauFixedSpecs();
            syncOptionFrameVisibility();
            syncOptionPaddingVisibility();
        });

        function initOptionFrameDropzones(context = document) {
            context.querySelectorAll('.option-frame-dropzone').forEach(function (element) {
                if (element.dropzone) return;

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

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

                let existingFrame = null;
                try {
                    // ✅ Only restore existing frame for real DB rows.
                    // New cloned rows have hidden input cleared, so they must stay empty.
                    existingFrame = hiddenInput.value && element.dataset.existingFrame
                        ? JSON.parse(element.dataset.existingFrame)
                        : null;
                } catch (e) {}

                const dz = 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')
                    },
                    init: function () {
                        let dropzone = this;

                        if (existingFrame?.id) {
                            let mockFile = {
                                name: existingFrame.file_name,
                                size: existingFrame.size ?? 12345,
                                _hiddenInputId: existingFrame.id
                            };

                            dropzone.emit('addedfile', mockFile);
                            dropzone.emit('thumbnail', mockFile, existingFrame.url);
                            dropzone.emit('complete', mockFile);
                            dropzone.files.push(mockFile);
                            hiddenInput.value = existingFrame.id;
                        }

                        dropzone.on('success', function (file, response) {
                            if (response?.data?.id) {
                                file._hiddenInputId = response.data.id;
                                hiddenInput.value = response.data.id;
                            }
                        });

                        dropzone.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
                                    }
                                });
                            }
                        });
                    }
                });
            });
        }

        $(document).on('click', '[data-repeater-create]', function () {
            setTimeout(function () {
                syncOptionFrameVisibility();
                syncOptionPaddingVisibility();

                if (typeof initOptionFrameDropzones === 'function') {
                    initOptionFrameDropzones();
                }
            }, 250);
        });
    </script>
@endsection