@extends('layouts/contentLayoutMaster')

@section('title', 'Add Products')
@section('main-page', 'Products')
@section('sub-page', 'Add New Product')
@section('main-page-url', route("categories.index"))
@section('sub-page-url', route("categories.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="category-form" class="form" action="{{ route('product-without-categories.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;">Product
                                        Details</a>
                                </li>
                                <li class="nav-item" style="width: 30%;">
                                    <a class="nav-link" data-step="1" href="#" style="font-size: 14px;">Quantity &
                                        Price</a>
                                </li>
                                <li class="nav-item" style="width: 30%;">
                                    <a class="nav-link" data-step="2" href="#" style="font-size: 14px;">Product
                                        Specs</a>
                                </li>
                            </ul>


                            <div class="tab-content">
                                <!-- first tab content -->
                                <div class="tab-pane active" id="step1">
                                    <div class="row">
                                        <input type="hidden" name="is_has_category" value="0">
                                        <!-- Product Name EN/AR -->
                                        <div class="col-md-6">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="product-name-en">Product 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="Product Name (EN)"/>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="product-name-ar">Product 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="Product 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">Product
                                                    Description (EN) <span
                                                        style="color: red; font-size: 20px;">*</span></label>
                                                <textarea name="description[en]" id="description-en"
                                                          class="form-control"
                                                          placeholder="Product Description (EN)"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="description-ar">Product
                                                    Description (AR) <span
                                                        style="color: red; font-size: 20px;">*</span></label>
                                                <textarea name="description[ar]" id="description-ar"
                                                          class="form-control"
                                                          placeholder="Product Description (AR)"></textarea>
                                            </div>
                                        </div>


                                        <!-- Main Image Upload -->
                                        <div class="col-md-12">
                                            <div class="mb-2">
                                                <label class="form-label label-text" for="product-image-main">
                                                    Product Image (main) <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">
                                                    Product 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>
                                                    <button type="button" id="remove-image"
                                                            class="btn btn-sm position-absolute text-danger"
                                                            style="top: 5px; right: 5px; background-color: #FFEEED">
                                                        <i data-feather="trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

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

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

                                        <div class="col-md-12 mb-2">
                                            <div>
                                                <label class="form-label label-text">Product 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="row">
                                            <!-- Has Mockup -->
                                            <div class="col-md-6">
                                                <div class="mb-2 d-flex align-items-center gap-2">
                                                    <label class="form-label label-text ">Is this product has
                                                        Mockup?</label>
                                                    <div class="form-check form-switch">
                                                        <input type="hidden" name="has_mockup" value="0"/>
                                                        <input class="form-check-input" type="checkbox" id="has_mockup"
                                                               name="has_mockup" value="1"/>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-2 d-flex align-items-center gap-2">
                                                    <label class="form-label label-text ">Is this product has
                                                        Orientation?</label>
                                                    <div class="form-check form-switch">
                                                        <input type="hidden" name="has_orientation" value="0"/>
                                                        <input class="form-check-input" type="checkbox" id="has_orientation"
                                                               name="has_orientation" value="1"/>

                                                    </div>
                                                </div>
                                            </div>
                                            {{-- Tableau Toggle --}}
                                            <div class="col-md-6">
                                                <div class="mb-2 d-flex align-items-center gap-2">
                                                    <label class="form-label label-text">Is this product a Tableau?</label>
                                                    <div class="form-check form-switch">
                                                        <input type="hidden" name="is_tableau" value="0"/>
                                                        <input class="form-check-input" type="checkbox" id="is_tableau"
                                                               name="is_tableau" value="1"/>
                                                    </div>
                                                </div>
                                            </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">Product Specs</label>
                                            <div class="d-flex align-items-center gap-2 my-1">
                                                <button type="button" id="btnAddCuttingSpecs" class="btn btn-outline-primary  px-3 py-2">
                                                    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>
                                                                <!-- Specification Fields -->
                                                                <div class="row mt-1">
                                                                    <input type="hidden" name="fixed_key" class="spec-fixed-key">
                                                                    <div class="col-md-6">
                                                                        <div class="mb-1">
                                                                            <label class="form-label label-text">Name
                                                                                (EN) <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>
                                                                                        <span
                                                                                            class="image-hint small text-end">
                                                Max size: 1MB | Dimensions: 200x200 px
                                            </span>

                                                                                        <!-- Hidden input to store uploaded file id / path -->
                                                                                        <input type="hidden"
                                                                                               name="option_image"
                                                                                               class="option-image-hidden">
                                                                                    </div>
                                                                                    {{-- Frame Image Upload 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>
                                                    <label id="variants-title" class="form-label label-text mt-2">Variants</label>

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

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

                                        <!-- Free Shipping -->
                                        {{-- <div class="col-md-12 col-12 mb-2">--}}
                                        {{-- <div class="form-check form-switch">--}}
                                        {{-- <input type="hidden" name="is_free_shipping" value="0">--}}
                                        {{-- <input type="checkbox" class="form-check-input" id="free-shipping"
                                            name="is_free_shipping" value="1">--}}
                                        {{-- <label class="form-check-label" for="free-shipping">Product available
                                            for
                                            free shipping</label>--}}
                                        {{-- </div>--}}
                                        {{-- </div>--}}
                                        {{--
                                    </div>--}}

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

        let isSyncingTableauSpecs = false;


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

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

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


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

        function clearAndHideVariants() {
            $('#variants-title').hide();
            $('#variants-container').empty().hide();
            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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            $frameModelSpec.find('.option-frame-model-padding-wrapper').show();
        }

        // ----- Select2 UI -----
        $(document).ready(function () {

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

                // init select2 once when shown first time
                if (!$('#cuttingSpecsSelect').data('select2')) {
                    $('#cuttingSpecsSelect').select2({
                        placeholder: 'Select cutting specs...',
                        closeOnSelect: false,
                        width: '100'
                    });
                    setTimeout(generateVariants, 0);
                }
            });
            $('#cuttingSpecsSelect').on('change', function () {
                generateVariants();
            });
            if (($('#cuttingSpecsSelect').val() || []).length) {
                $('#cuttingSpecsBox').removeClass('d-none'); // optional: show it
                setTimeout(generateVariants, 0);
            }


        });
    </script>
    <script>
        window.variantImageMemory = {};

        function generateVariants() {

            if (isTableauProduct()) {
                clearAndHideVariants();
                return;
            }

            showVariants();

            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 = { ...window.variantImageMemory }; // 💾 MEMORY FIRST

            $('.variant-box').each(function () {
                let code = $(this).find('.variant-code-input').val();
                let imageId = $(this).find('.variant-image-input').val();

                if (code && imageId && !map[code]) {
                    map[code] = { id: 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>

                <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) {
                        let mediaId = response.data.id;
                        let imageUrl = response.data.original_url ?? response.data.url;

                        hiddenInput.val(mediaId);
                        file._imageId = mediaId;

                        // 🧠 SAVE IN MEMORY
                        window.variantImageMemory[code] = {
                            id: mediaId,
                            url: imageUrl
                        };
                    }

                });

                // 🔁 Restore existing image preview
                if (existingImages[code]?.id) {
                    let imageId = existingImages[code].id;
                    let imageUrl = existingImages[code].url
                        ?? `/api/v1/media/${imageId}`; // fallback for edit

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

                    dz.emit("addedfile", mockFile);
                    dz.emit("thumbnail", mockFile, imageUrl);
                    dz.emit("complete", mockFile);

                    mockFile._imageId = imageId;
                }


            });
        }

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

        $(document).on('keyup change', '.option-value-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>--}}
    {{--           document.addEventListener("DOMContentLoaded", function () {--}}
    {{--         const $colorRepeater = $('.color-repeater');--}}
    {{--        document.addEventListener("DOMContentLoaded", function () {--}}
    {{--            const $colorRepeater = $('.color-repeater');--}}


    {{--            $colorRepeater.find('[data-repeater-item]').each(function () {--}}
    {{--                initColorItem(this);--}}
    {{--            });--}}

    {{--            if (window.$ && $.fn.repeater) {--}}
    {{--                $colorRepeater.repeater({--}}
    {{--                    initEmpty: true,--}}
    {{--                    show: function () {--}}
    {{--                        $(this).slideDown();--}}

    {{--                        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;--}}

    {{--        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 !src="">
        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;

        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 = $("#category-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 () {
            $.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 () {
                        $(this).slideDown();
                        updateDeleteButtons($(this).closest('.inner-repeater'));
                        initializeImageUploaders(this);
                        feather.replace();
                        setTimeout(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(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();

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

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

                const saveButton = $('.saveChangesButton');
                const saveLoader = $('.saveLoader');
                const saveButtonText = $('.saveChangesButton .btn-text');

                saveButton.prop('disabled', true);
                saveLoader.removeClass('d-none');
                saveButtonText.addClass('d-none');

                const formEl = this;


                // Tableau products use specs/options only, not variant combinations.
                if ($('#is_tableau').is(':checked')) {
                    $('#variants-container').empty();
                    window.variantImageMemory = {};
                }

                const formData = new FormData(formEl);

                // (Optional) also inject as hidden inputs for full safety
                formEl.querySelectorAll('input[data-custom-dim="1"]').forEach(n => n.remove());

                const raw = sessionStorage.getItem('custom_dimensions');
                if (raw) {
                    try {
                        const dims = JSON.parse(raw);
                        console.log('[custom_dimensions] parsed:', dims);

                        dims.forEach((dim, i) => {
                            const isCustom = dim.is_custom ? 1 : 0;

                            // -> FormData (server receives via $_POST)
                            formData.append(`custom_dimensions[${i}][width]`, dim.width);
                            formData.append(`custom_dimensions[${i}][height]`, dim.height);
                            formData.append(`custom_dimensions[${i}][unit]`, dim.unit);
                            formData.append(`custom_dimensions[${i}][name]`, dim.name);
                            formData.append(`custom_dimensions[${i}][is_custom]`, isCustom);

                            // -> Hidden inputs (belt & suspenders)
                            [['width', dim.width], ['height', dim.height], ['unit', dim.unit], ['name', dim.name], ['is_custom', isCustom]]
                                .forEach(([k, v]) => {
                                    const inp = document.createElement('input');
                                    inp.type = 'hidden';
                                    inp.name = `custom_dimensions[${i}][${k}]`;
                                    inp.value = v;
                                    inp.setAttribute('data-custom-dim', '1');
                                    formEl.appendChild(inp);
                                });
                        });
                    } catch (e) {
                        console.warn('[custom_dimensions] JSON parse error:', e, 'raw:', raw);
                    }
                } else {
                    console.log('[custom_dimensions] none in sessionStorage');
                }

                $.ajax({
                    url: formEl.action,
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        window.location.replace('/categories');
                        if (res.success) {
                            Toastify({
                                text: "Product created successfully!",
                                duration: 2000,
                                gravity: "top",
                                position: "right",
                                backgroundColor: "#28C76F",
                                close: true,
                            }).showToast();
                        } else {
                            // backend returned success:false
                            saveButton.prop('disabled', false);
                            saveLoader.addClass('d-none');
                            saveButtonText.removeClass('d-none');
                        }
                    },
                    error: function (xhr) {
                        const errs = (xhr.responseJSON && xhr.responseJSON.errors) || {};
                        Object.keys(errs).forEach(k => {
                            Toastify({
                                text: errs[k][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>
        // ── Tableau fixed specs + frame color image only ─────────────
        Dropzone.autoDiscover = false;

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

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

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

        $(document).ready(function () {
            syncTableauFixedSpecs();
            syncOptionPaddingVisibility();
        });
    </script>

@endsection