@extends('layouts/contentLayoutMaster')

@section('title', 'Add Categories')
@section('main-page', 'Categories')
@section('sub-page', 'Add New Category')
@section('main-page-url', route("products.index"))
@section('sub-page-url', route("products.create"))


@section('vendor-style')
    <!-- Vendor CSS Files -->
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection

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

                    <div class="card-body ">
                        <form id="product-form" class="form" action="{{ route('products.store') }}" method="POST"
                              enctype="multipart/form-data" novalidate>
                            @csrf
                            {{-- checkbox added --}}
                            <div class="px-2 row gap-2">
                                <div class="d-flex gap-2 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', 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-2 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', 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-2 w-100 d-flex justify-content-center" id="formTabs">
                                <li class="nav-item" style="width: 30%;">
                                    <a class="nav-link active" data-step="0" href="#" style="font-size: 14px;">Category
                                        Details</a>
                                </li>
                                <li class="nav-item" style="width: 30%;">
                                    <a class="nav-link" data-step="1" href="#" style="font-size: 14px;">Quantity &
                                        Price</a>
                                </li>
                                <li class="nav-item" style="width: 30%;">
                                    <a class="nav-link" data-step="2" href="#" style="font-size: 14px;">Category
                                        Specs</a>
                                </li>
                            </ul>


                            <div class="tab-content">
                                <!-- first tab content -->
                                <div class="tab-pane active" id="step1">
                                    <div class="row">
                                        <!-- Category Name EN/AR -->
                                        <div class="col-md-6">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="product-name-en">Category Name
                                                    (EN) <span style="color: red; font-size: 20px;">*</span></label>
                                                <input type="text" id="product-name-en" class="form-control"
                                                       name="name[en]"
                                                       placeholder="Category Name (EN)"/>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="product-name-ar">Category Name
                                                    (AR) <span style="color: red; font-size: 20px;">*</span></label>
                                                <input type="text" id="product-name-ar" class="form-control"
                                                       name="name[ar]"
                                                       placeholder="Category Name (AR)"/>
                                            </div>
                                        </div>

                                        <!-- Description EN/AR -->
                                        <div class="col-md-6">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="description-en">Category
                                                    Description (EN) <span
                                                        style="color: red; font-size: 20px;">*</span></label>
                                                <textarea name="description[en]" id="description-en"
                                                          class="form-control"
                                                          placeholder="Category Description (EN)"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="description-ar">Category
                                                    Description (AR) <span
                                                        style="color: red; font-size: 20px;">*</span></label>
                                                <textarea name="description[ar]" id="description-ar"
                                                          class="form-control"
                                                          placeholder="Category Description (AR)"></textarea>
                                            </div>
                                        </div>


                                        <!-- Main Image Upload -->
                                        <div class="col-md-12">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="product-image-main">
                                                    Category Image (main) <span
                                                        style="color: red; font-size: 20px;">*</span>
                                                </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>


                                                <span class="image-hint small text-end">
                                                Max size: 1MB | Dimensions: 512x512 px
                                            </span>
                                                <!-- ✅ Hidden input outside Dropzone -->
                                                <input type="hidden" name="image_id" id="uploadedImageMain">

                                            </div>
                                        </div>


                                        <div class="col-md-12">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="product-image-main">
                                                    Category Model Image (main) <span
                                                        style="color: red; font-size: 20px;">*</span>
                                                </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>
                                                </div>
                                            </div>
                                            <!-- Category Colors -->
                                            {{-- <div class="col-md-12">--}}
                                            {{-- <div class="mb-2">--}}
                                            {{-- <label class="form-label label-text">Category Colors</label>--}}

                                            {{-- <div class="color-repeater">--}}
                                            {{-- <div data-repeater-list="colors">--}}
                                            {{-- <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">
                                                --}}
                                            {{--
                                            <!-- Color picker -->--}}
                                            {{--
                                            <input--}} {{-- type="color" --}} {{--
                                                                            class="form-control rounded-circle color-picker border border-0  "
                                                                            --}} {{--
                                                                            style="max-width: 30px; padding: 0;" --}}
                                            {{-- value="#000" --}} {{-- />--}}

                                            {{--
                                            <!-- Text hex input (this will actually submit the value) -->--}}
                                            {{--
                                            <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;">--}}
                                            {{-- <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>--}}
                                            {{-- </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>--}}


                                        </div>

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

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

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


                                        <!-- Category & Subcategory -->
                                        <div class="col-md-6">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="category">Product <span
                                                        style="color: red; font-size: 20px;">*</span></label>
                                                <select name="category_id" id="category"
                                                        class="form-control category-select">
                                                    <option value="" selected disabled>Select product</option>
                                                    @foreach($associatedData['categories'] as $category)
                                                        <option
                                                            value="{{ $category->id }}"
                                                            data-is-tableau="{{ (int) $category->is_tableau }}">{{ $category->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="mb-2">
                                                <label class="form-label label-text"
                                                       for="sub-category">Subproduct</label>
                                                <select name="sub_category_id" id="sub-category"
                                                        class="form-control sub-category-select"
                                                        data-sub-category-url="{{ route('sub-categories') }}">
                                                    <option value="" selected disabled>Select subproduct</option>
                                                </select>
                                            </div>
                                        </div>
                                        <!-- Tags -->
                                        <div class="col-md-12">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="tags">Tags <span
                                                        style="color: red; font-size: 20px;">*</span></label>
                                                <select name="tags[]" id="tags" class="select2 form-select" multiple>
                                                    @foreach($associatedData['tags'] as $tag)
                                                        <option value="{{ $tag->id }}">{{ $tag->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <!-- Dimensions -->

                                        <div class="col-md-12 mb-2">
                                            <div>
                                                <label class="form-label label-text">Category Size <span
                                                        style="color: red; font-size: 20px;">*</span></label>

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

                                                <!-- Custom Dimensions -->
                                                <div class="d-flex gap-3 mt-2" id="custom-dimensions-container">
                                                    <!-- Custom dimensions from sessionStorage will be injected here -->
                                                </div>

                                                <!-- Add Custom Size Button -->
                                                <button type="button" class="upload-card w-100 mt-2"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#addSizeModal">
                                                    Add Custom Size
                                                </button>
                                            </div>
                                        </div>



                                        <div class="d-flex justify-content-end">
                                            <button type="button" class="btn btn-primary next-tab">Next</button>
                                        </div>
                                    </div>
                                </div>
                                <!--end of the first tab content -->
                                <!--second tab content -->
                                <div class="tab-pane d-none" id="step2">

                                    <!-- Price Option Toggle -->
                                    <div class="col-md-12">
                                        <div class="mb-2">
                                            <label class="form-label label-text d-block">Quantity & Price
                                                Options</label>
                                            <label class="form-label label-text mt-2">Quantity Type <span
                                                    style="color: red; font-size: 20px;">*</span></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">
                                                        <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">
                                                        <div>
                                                            <label class="form-check-label label-text d-block"
                                                                   for="defaultPrice">Default Quantity</label>
                                                            <label class="form-check-label text-dark"
                                                                   for="defaultPrice">Default
                                                                Price</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Default Price -->
                                    <div class="col-md-12" id="default-price-section" style="display: none;">
                                        <div class="mb-2">
                                            <label class="form-label label-text" for="base_price">Original Price</label>
                                            <input type="text" id="base_price" name="base_price" class="form-control"
                                                   placeholder="Original Price"/>
                                        </div>
                                    </div>
                                    <!-- Custom Prices -->
                                    <div class="col-md-12" id="custom-price-section" style="display: none;">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="invoice-repeater">
                                                    <div data-repeater-list="prices">
                                                        <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="prices[][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="prices[][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"
                                                                                data-repeater-delete>
                                                                            <i data-feather="x" class="me-25"></i>
                                                                            <span>Delete</span>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>

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

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

                                    <!--end of the second tab content -->

                                </div>


                                <!--third tab content -->
                                <div class="tab-pane d-none" id="step3">
                                    <!-- Specifications -->
                                    <div class="col-12">
                                        <div class="mb-2">
                                            <label class="form-label label-text">Category 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">
                                                    Add Cutting Specs
                                                </button>
                                            </div>

                                            <div id="cuttingSpecsBox" class="mt-2 d-none">
                                                <label class="form-label label-text">Choose Cutting Specs</label>
                                                @php use App\Enums\Product\CuttingEnum; @endphp
                                                <select id="cuttingSpecsSelect" class="form-control" name="fixed_specs[]" multiple="multiple" style="width:100%">
                                                    @foreach(CuttingEnum::cases() as $cutting)
                                                        <option value="{{$cutting->value }}"  data-name-en="{{$cutting->label('en') }}"
                                                                data-name-ar="{{$cutting->label('en') }}">
                                                            {{$cutting->label('en') }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                                <div class="form-text">
                                                    Select one or more specs. They will be added automatically below.
                                                </div>
                                            </div>
                                            <div class="">
                                                <div>
                                                    <!-- Outer Repeater for Specifications -->
                                                    <div class="outer-repeater">
                                                        <div data-repeater-list="specifications">
                                                            <div data-repeater-item>
                                                                <input type="hidden" name="fixed_key" class="spec-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) <span
                                                                                    style="color: red; font-size: 20px;">*</span></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-2">
                                                                            <label class="form-label label-text">Name
                                                                                (AR) <span
                                                                                    style="color: red; font-size: 20px;">*</span></label>
                                                                            <input type="text" name="name_ar"
                                                                                   class="form-control spec-name-ar"
                                                                                   placeholder="Specification Name (AR)"/>
                                                                        </div>
                                                                    </div>

                                                                    <!-- Inner Repeater for Specification Options -->
                                                                    <div class="inner-repeater">
                                                                        <div data-repeater-list="specification_options">
                                                                            <div data-repeater-item>
                                                                                <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) <span
                                                                                                style="color: red; font-size: 20px;">*</span></label>
                                                                                        <input type="text"
                                                                                               name="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) <span
                                                                                                style="color: red; font-size: 20px;">*</span></label>
                                                                                        <input type="text"
                                                                                               name="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" 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>

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

                                                                                        <!-- Hidden input to store uploaded file id / path -->
                                                                                        <input type="hidden"
                                                                                               name="option_image"
                                                                                               class="option-image-hidden">
                                                                                    </div>
                                                                                    <span
                                                                                        class="image-hint small text-end">
                                                Max size: 1MB | Dimensions: 200x200 px
                                            </span>
                                                                                    {{-- Frame Image per Option --}}
                                                                                    <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 Option Button -->
                                                                                    <div class="row mt-2">
                                                                                        <div class="col-12 text-end">
                                                                                            <button type="button"
                                                                                                    class="btn btn-outline-danger"
                                                                                                    data-repeater-delete>
                                                                                                <i data-feather="x"
                                                                                                   class="me-25"></i>
                                                                                                Delete Value
                                                                                            </button>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </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"
                                                                                data-repeater-delete>
                                                                            <i data-feather="x" class="me-25"></i>
                                                                            Delete
                                                                            Spec
                                                                        </button>
                                                                    </div>

                                                                </div>
                                                            </div>
                                                        </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>
                                        </div>
                                        <label id="variants-title" class="form-label label-text mt-2">Variants</label>

                                        <div id="variants-container" class="mt-2"></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">Category available
                                            for
                                            free shipping</label>--}}
                                        {{-- </div>--}}
                                        {{-- </div>--}}
                                        {{--
                                    </div>--}}

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

                                        </div>
                                    </div>

                                </div>
                                <!--third tab content end -->


                            </div>

                        </form>
        @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: 'لون البرواز'
            }
        ];

        window.selectedProductIsTableau = window.selectedProductIsTableau || false;
        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 window.selectedProductIsTableau === true;
        }

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

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

                        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;

            if (isTableauProduct()) {
                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();
                if (typeof generateVariants === 'function') generateVariants();
            }

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

        function syncOptionFrameVisibility() {
            const isTableau = isTableauProduct();

            $('.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 = isTableauProduct();

            $('.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 () {
            $('#btnAddCuttingSpecs').on('click', function () {
                $('#cuttingSpecsBox').toggleClass('d-none');

                if (!$('#cuttingSpecsSelect').data('select2')) {
                    $('#cuttingSpecsSelect').select2({
                        placeholder: 'Select cutting specs...',
                        closeOnSelect: false,
                        width: '100%'
                    });
                    setTimeout(generateVariants, 0);
                }
            });

            $('#cuttingSpecsSelect').on('change', function () {
                generateVariants();
            });

            if (($('#cuttingSpecsSelect').val() || []).length) {
                $('#cuttingSpecsBox').removeClass('d-none');
                setTimeout(generateVariants, 0);
            }
        });
    </script>

    <script>
        function generateVariants() {
            if (isTableauProduct()) {
                clearAndHideVariants();
                return;
            }

            let specs = [];

            // -----------------------------
            // A) FROM REPEATER (custom specs)
            // -----------------------------
            $('[data-repeater-list="specifications"] > [data-repeater-item]').each(function () {
                // ignore hidden (deleted but animating)
                if (!$(this).is(':visible')) return;

                let specName = $(this).find('.spec-name-en').val().trim();
                let options = [];

                $(this).find('.option-value-en').each(function () {
                    if (!$(this).is(':visible')) return;
                    let val = $(this).val().trim();
                    if (val) options.push(val);
                });

                if (specName && options.length) {
                    specs.push({ name: specName, options });
                }
            });

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

            // Add "Cutting" as a spec if any selected
            if (cuttingOpts.length) {
                specs.push({
                    name: 'Cutting',        // used in variants; can be localized if you want
                    options: cuttingOpts
                });
            }

            // if nothing, clear variants
            if (specs.length === 0) {
                $('#variants-container').html('');
                return;
            }

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

            const combinations = cartesian(specs);
            renderVariants(combinations);
        }

        function collectExistingVariantImages() {
            let map = {};

            $('.variant-box').each(function () {
                let code = $(this).find('.variant-code-input').val();
                let imageId = $(this).find('.variant-image-input').val();
                console.log(imageId, code)
                if (code && imageId) {
                    map[code] = imageId;
                }
            });

            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 savedImageId = existingImages[variantCode] || '';

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

                <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}" />

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

                // 🔁 Restore existing image preview
                if (existingImages[code]) {
                    let mockFile = {name: "Image", size: 12345};
                    dz.emit("addedfile", mockFile);
                    dz.emit("thumbnail", mockFile, `/api/v1/media/${existingImages[code]}`);
                    dz.emit("complete", mockFile);
                    mockFile._imageId = existingImages[code];
                }

            });
        }

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

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

            // Wait until repeater actually removes it
            let observer = new MutationObserver(function (mutations, obs) {
                if (!document.body.contains(item[0])) {
                    generateVariants();
                    obs.disconnect();
                }
            });

            observer.observe(document.body, { childList: true, subtree: true });
        });
    </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");
                const val = text.value.trim();

                // Only update if valid hex
                if (/^#([A-Fa-f0-9]{6})$/.test(val)) {
                    picker.value = val;
                }
            }
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const $colorRepeater = $('.color-repeater');

            // لو في items جاهزة (في حالة edit مثلاً)
            $colorRepeater.find('[data-repeater-item]').each(function () {
                initColorItem(this);
            });

            if (window.$ && $.fn.repeater) {
                $colorRepeater.repeater({
                    initEmpty: true, // يستخدم الـ item الموجود كـ template
                    show: function () {
                        $(this).slideDown();
                        // this = data-repeater-item الجديد
                        initColorItem(this);
                        if (window.feather) feather.replace();
                    },
                    hide: function (deleteElement) {
                        $(this).slideUp(deleteElement);
                    }
                });

                // نضيف أول صف تلقائيًا في صفحة الإنشاء
                const hasItems = $colorRepeater.find('[data-repeater-item]').length > 0;
                if (!hasItems) {
                    $colorRepeater.find('[data-repeater-create]').first().trigger('click');
                }
            }
        });
    </script>

    <script>
        Dropzone.autoDiscover = false;

        const categoryDropzone = 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 () {
                this.on("success", function (file, response) {
                    if (response.success && response.data) {
                        file._hiddenInputId = response.data.id;

                        // ✅ This will now set the hidden field correctly
                        document.getElementById("uploadedImageModel").value = response.data.id;
                        file._hiddenInputId = response.data.id;
                    }

                });

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

                    // hide preview
                    document.getElementById("uploaded-image").classList.add("d-none");
                });
            }
        });

        // Handle remove button manually
        document.getElementById("remove-image").addEventListener("click", function () {
            categoryDropzone.removeAllFiles(true);
            document.getElementById("uploadedImage").value = "";
            document.getElementById("uploaded-image").classList.add("d-none");
        });
    </script>

    <script>
        Dropzone.autoDiscover = false; // prevent auto init

        function initOptionDropzones() {
            document.querySelectorAll(".option-dropzone").forEach((element) => {
                if (element.dropzone) return; // prevent duplicate init

                let hiddenInput = element.closest(".col-md-12").querySelector(".option-image-hidden");

                new Dropzone(element, {
                    url: "{{ route('media.store') }}", // your backend upload route
                    paramName: "file",
                    maxFiles: 1,
                    maxFilesize: 1, // MB
                    acceptedFiles: "image/*",
                    addRemoveLinks: true,
                    headers: {
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
                    },
                    init: function () {
                        this.on("success", function (file, response) {
                            // Assuming backend returns { id: ..., path: ... }
                            hiddenInput.value = response.data.id;
                            file._hiddenInputId = response.data.id;
                        });

                        this.on("removedfile", function (file) {
                            hiddenInput.value = "";
                            if (file._hiddenInputId) {
                                fetch("{{ url('api/v1/media') }}/" + file._hiddenInputId, {
                                    method: "DELETE",
                                    headers: {
                                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
                                        "Accept": "application/json"
                                    }
                                })
                                    .then(res => res.json())
                                    .then(data => {
                                        console.log("Deleted from server:", data);
                                    })
                                    .catch(err => {
                                        console.error("Delete failed:", err);
                                    });
                            }
                        });
                    }
                });
            });
        }

        // Run once on page load
        initOptionDropzones();

        // Run again whenever repeater adds a new option row
        $(document).on("click", "[data-repeater-create]", function () {
            setTimeout(() => {
                initOptionDropzones();
            }, 200); // slight delay to ensure DOM updated
        });
    </script>

    <script>
        Dropzone.autoDiscover = false;

        const multiDropzone = new Dropzone("#multi-dropzone", {
            url: "{{ route('media.store') }}",   // backend route for image upload
            paramName: "file",
            maxFiles: 10,              // allow up to 10 images
            maxFilesize: 1,            // MB
            acceptedFiles: "image/*",
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            addRemoveLinks: true,
            dictDefaultMessage: "Drag images here or click to upload",
            init: function () {
                this.on("success", function (file, response) {
                    if (response.success && response.data) {
                        // save file id on the file object
                        file._hiddenInputId = response.data.id;

                        // append hidden input for each uploaded file
                        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);


                    }
                });

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

                        // remove preview
                        let previewImg = document.getElementById("preview-image-" + file._hiddenInputId);
                        if (previewImg) previewImg.remove();

                        // delete from server
                        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;--}}

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

    {{--            if (!dropzoneElement || !hiddenInput) return;--}}


    {{--            if (dropzoneElement.dropzone) return;--}}

    {{--            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,--}}
    {{--                init: function () {--}}
    {{--                    this.on("success", function (file, response) {--}}
    {{--                        if (response.success && response.data) {--}}
    {{--                            file._hiddenInputId = response.data.id;--}}
    {{--                            hiddenInput.value = response.data.id;--}}
    {{--                        }--}}
    {{--                    });--}}

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

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

    <script>
        Dropzone.autoDiscover = false;

        const mainDropzone = new Dropzone("#product-main-dropzone", {
            url: "{{ route('media.store') }}",
            paramName: "file",
            maxFiles: 1,
            maxFilesize: 1,
            acceptedFiles: "image/*",
            headers: {"X-CSRF-TOKEN": "{{ csrf_token() }}"},
            addRemoveLinks: true,
            init: function () {
                this.on("success", function (file, response) {
                    if (response.success && response.data) {
                        file._hiddenInputId = response.data.id;
                        document.getElementById("uploadedImageMain").value = response.data.id;

                    }
                });

                this.on("removedfile", function (file) {
                    document.getElementById("uploadedImageMain").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.getElementById("uploaded-image-main").classList.add("d-none");
                });
            }
        });

        // Manual remove
        document.getElementById("remove-image-main").addEventListener("click", function () {
            mainDropzone.removeAllFiles(true);
            document.getElementById("uploadedImageMain").value = "";
            document.getElementById("uploaded-image-main").classList.add("d-none");
        });

    </script>

    <script>
        console.log(jQuery.fn.jquery);

        $(document).ready(function () {
            const form = $("#product-form");
            let currentStep = 0;

            const steps = [
                $("#step1"),
                $("#step2"),
                $("#step3")
            ];

            const navTabs = $("#formTabs .nav-link");

            // jQuery Validation
            form.validate({
                ignore: [],
                errorClass: "is-invalid",
                validClass: "is-valid",
                errorElement: "div",
                errorPlacement: function (error, element) {
                    error.addClass("invalid-feedback");
                    if (element.closest('.input-group').length) {
                        error.insertAfter(element.closest('.input-group'));
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    "name[en]": "required",
                    "name[ar]": "required",
                    "image": "required",
                    "category_id": "required",
                    "dimensions[]": {
                        required: true,
                        minlength: 1
                    }
                },
                messages: {
                    "name[en]": "Please enter the category name in English.",
                    "name[ar]": "Please enter the category name in Arabic.",
                    "image": "Please upload a category image.",
                    "category_id": "Please select a product.",
                    "dimensions[]": "Please select at least one size."
                }
            });

            // Step UI control
            function goToStep(index) {
                $(".tab-pane").removeClass("active d-block").addClass("d-none");
                steps[index].removeClass("d-none").addClass("active d-block");

                navTabs.removeClass("active");
                navTabs.eq(index).addClass("active");

                currentStep = index;
            }

            $(".next-tab").on("click", function () {
                // Validate only visible fields
                const currentFields = steps[currentStep].find("input, select, textarea").filter(":visible");
                if (currentFields.length === 0 || currentFields.toArray().every(field => $(field).valid())) {
                    if (currentStep < steps.length - 1) {
                        goToStep(currentStep + 1);
                    }
                }
            });

            $(".prev-tab").on("click", function () {
                if (currentStep > 0) {
                    goToStep(currentStep - 1);
                }
            });

            // Optional: disable manual tab clicks forward
            navTabs.on("click", function (e) {
                e.preventDefault();
                const step = parseInt($(this).data("step"));

                if (step <= currentStep) {
                    goToStep(step);
                }
            });

            // Start on first step
            goToStep(0);
        });
    </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';
                $('#custom-price-section').toggle(isCustom).find('input').prop('disabled', !isCustom);
                $('#default-price-section').toggle(!isCustom).find('input').prop('disabled', isCustom).val('');
            });

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


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

            $('.outer-repeater').repeater({
                initEmpty: true,
                repeaters: [{
                    selector: '.inner-repeater',
                    initEmpty: true,
                    show: function () {
                        // Repeater clones the LAST item as the template for new ones.
                        // If that item was a locked Tableau fixed spec, strip its fixed_key,
                        // data-spec-key, readonly state, and hidden delete button before
                        // this becomes a real, independent (and correctly-keyed) spec row.
                        $(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();

                        $(this).slideDown();
                        updateDeleteButtons($('.outer-repeater'));
                        initializeImageUploaders(this);
                        feather.replace();
                        setTimeout(function () {
                            syncOptionFrameVisibility();
                            syncOptionPaddingVisibility();
                            generateVariants();
                        }, 0);
                    },
                    hide: function (deleteElement) {
                        const $row = $(this);
                        $row.slideUp(200, function () {
                            deleteElement();
                            generateVariants();
                        });
                        updateDeleteButtons($(this).closest('.inner-repeater'));
                    },
                    afterAdd: function () {
                        updateDeleteButtons($(this).closest('.inner-repeater'));
                        initializeImageUploaders(this);
                        feather.replace();
                    },
                    afterDelete: function () {
                        updateDeleteButtons($(this).closest('.inner-repeater'));
                    },
                    nestedInputName: 'specification_options'
                }],
                show: function () {
                    $(this).slideDown();
                    updateDeleteButtons($('.outer-repeater'));
                    initializeImageUploaders(this);
                    feather.replace();
                    setTimeout(function () {
                        syncOptionFrameVisibility();
                        syncOptionPaddingVisibility();
                        generateVariants();
                    }, 0);
                },
                hide: function (deleteElement) {
                    const $row = $(this);
                    $row.slideUp(200, function () {
                        deleteElement();
                        generateVariants();
                    });
                    updateDeleteButtons($('.outer-repeater'));
                },
                afterAdd: function () {
                    updateDeleteButtons($('.outer-repeater'));
                    initializeImageUploaders($('.outer-repeater'));
                    feather.replace();
                },
                afterDelete: function () {
                    updateDeleteButtons($('.outer-repeater'));
                }
            });

// Initialize on page load
            $(document).ready(function () {
                updateDeleteButtons($('.outer-repeater'));
                updateDeleteButtons($('.inner-repeater')); // <-- important
                initializeImageUploaders($('.outer-repeater'));
            });


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

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

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

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

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

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

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

                const saveButton = $('.saveChangesButton');
                const saveLoader = $('.saveLoader');
                const saveButtonText = $('.saveChangesButton .btn-text');
                saveButton.prop('disabled', true);
                saveLoader.removeClass('d-none');
                saveButtonText.addClass('d-none');
                const formData = new FormData(this);
                const customDimensions = sessionStorage.getItem('custom_dimensions');
                if (customDimensions) {
                    const parsedDimensions = JSON.parse(customDimensions);
                    parsedDimensions.forEach((dim, index) => {
                        formData.append(`custom_dimensions[${index}][width]`, dim.width);
                        formData.append(`custom_dimensions[${index}][height]`, dim.height);
                        formData.append(`custom_dimensions[${index}][unit]`, dim.unit);
                        formData.append(`custom_dimensions[${index}][name]`, dim.name);
                        formData.append(`custom_dimensions[${index}][is_custom]`, dim.is_custom);
                    });
                }

                $.ajax({
                    url: this.action,
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if (res.success) {
                            Toastify({
                                text: "Category created successfully!",
                                duration: 2000,
                                gravity: "top",
                                position: "right",
                                backgroundColor: "#28C76F",
                                close: true,
                            }).showToast();
                            window.location.href = '/products';
                        }
                    },
                    error: function (xhr) {
                        $.each(xhr.responseJSON.errors, (k, msgArr) => {
                            Toastify({
                                text: msgArr[0],
                                duration: 4000,
                                gravity: "top",
                                position: "right",
                                backgroundColor: "#EA5455",
                                close: true
                            }).showToast();
                        });
                        saveButton.prop('disabled', false);
                        saveLoader.addClass('d-none');
                        saveButtonText.removeClass('d-none');
                    }
                });
            });
        });
    </script>

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

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

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

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

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

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

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

            // Initial load
            showStep(currentStep);
        });
    </script>
    <script>
        Dropzone.autoDiscover = false;

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

        function initOptionFrameDropzones() {
            document.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;

                new Dropzone(element, {
                    url: "{{ route('media.store') }}",
                    paramName: "file",
                    maxFiles: 1,
                    maxFilesize: 1,
                    acceptedFiles: "image/*",
                    addRemoveLinks: true,
                    headers: {
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
                    },
                    dictDefaultMessage: "Drop frame image here or click to upload",
                    init: function () {
                        this.on("success", function (file, response) {
                            if (response.success && response.data) {
                                file._hiddenInputId = response.data.id;
                                hiddenInput.value = response.data.id;
                            }
                        });

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

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

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

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

        function setTableauMode(isTableau) {
            window.selectedProductIsTableau = isTableau;

            if (isTableau) {
                initOptionFrameDropzones();
            } else {
                clearOptionFrameImages();
            }

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

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

            setTableauMode(isTableau);
        }

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

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

            $(document).on("click", "[data-repeater-create]", function () {
                setTimeout(function () {
                    syncOptionFrameVisibility();
                    syncOptionPaddingVisibility();
                    initOptionDropzones();
                }, 300);
            });
        });
    </script>

@endsection