@include('Admin.Includes.header')
@php
    use Illuminate\Support\Facades\Auth;
    $logged_in_user = Auth::user();
@endphp
<style>
    .img-preview {
        max-width: 200px;
        height: auto;
        margin: 10px;
    }
    .btn-remove {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
    }
    .preview-wrapper {
        position: relative;
        display: inline-block;
        border: 2px solid transparent;
        margin: 5px;
    }
    .preview-wrapper.selected {
        border-color: #007bff;
    }
    .radio-button {
        position: absolute;
        top: 5px;
        left: 5px;
    }
    .noselect {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .multiselect {
        font-size: 15px;
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        transition: 0.2s;
        outline: none;
    }
    .multiselect:hover {
        border: 1px solid rgba(0, 0, 0, 0.3);
    }
    .multiselect.active {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom: 1px solid transparent;
    }
    .multiselect>.title {
        cursor: pointer;
        height: 30px;
        padding: 6px;
    }
    .multiselect>.title>.text {
        max-height: 25px;
        display: block;
        float: left;
        overflow: hidden;
        line-height: 1.3em;
    }
    .reduce_button{
        padding: 4px 9px;
    }
    .multiselect>.title>.expand-icon,
    .multiselect>.title>.close-icon {
        float: right;
        border-radius: 50%;
        padding: 0 4px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        font-weight: 700;
        transition: 0.2s;
        display: none;
    }
    .multiselect.selection>.title>.expand-icon {
        display: none;
    }
    .multiselect>.title>.expand-icon,
    .multiselect.selection>.title>.close-icon {
        display: block;
    }
    .multiselect>.title>.close-icon:hover {
        border: 1px solid rgba(0, 0, 0, 0.3);
        background: rgb(203, 32, 32);
        color: #fff;
    }
    .multiselect>.container {
        max-height: 200px;
        overflow: auto;
        margin-top: 4px;
        margin-left: -1px;
        background: #fff;
        border: 1px solid transparent;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    .multiselect.active>.container {
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        border-top: 0;
    }
    .multiselect:hover>.container {
        border-top-color: rgba(0, 0, 0, 0.3);
    }
    .multiselect.active:hover>.container {
        border-color: rgba(0, 0, 0, 0.3);
    }
    .multiselect>.container>optgroup {
        display: none;
        cursor: pointer;
        transition: 0.2s;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
    }
    .multiselect>.container>optgroup.selected {
        background: rgb(122, 175, 233);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        color: #fff;
    }
    .multiselect>.container>option:hover {
        background: rgba(0, 0, 0, 0.1);
        color: #000;
    }
    .multiselect.active>.container>optgroup {
        display: block;
    }
    .selected-option {
        background-color: aliceblue;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__clear {
   
}

    /* test */
</style>
<!-- Page Inner Start -->
<div class="page-inner">
    <!-- Breadcrumb Start -->
    <div class="pageheader pd-t-25 pd-b-35">
        <div class="d-flex justify-content-between">
            <div class="clearfix">
                <div class="pd-t-5 pd-b-5">
                    <h1 class="pd-0 mg-0 tx-20 tx-dark">{{ __('Create Product') }}</h1>
                </div>
                <div class="breadcrumb pd-0 mg-0">
                    <a class="breadcrumb-item" href="{{ url('/') }}/admin"><i class="icon ion-ios-home-outline"></i>
                        Dashboard</a>
                    <a class="breadcrumb-item" href="{{ url('/') }}/admin/products">Products</a>
                    <span class="breadcrumb-item active">Create</span>
                </div>
            </div>
            <div class="d-flex align-items-center">
                @if (Session::has('permissions') && in_array('Product List', Session::get('permissions')))
                <button type="button" onclick="window.location = '{{ url('/') }}/admin/products'"
                    class="btn btn-default mb-2 mb-md-0 d-none d-lg-block pd-t-6-force pd-b-5-force">
                    <i data-feather="package" class="wd-16 mr-2"></i>Product List</button>
                @endif
                @if (Session::has('permissions') && in_array('Product Trash List', Session::get('permissions')))
                <button type="button" onclick="window.location = '{{ url('/') }}/admin/products/list/trash'"
                    class="btn btn-default mb-2 mb-md-0 d-none d-lg-block pd-t-6-force pd-b-5-force">
                    <i data-feather="package" class="wd-16 mr-2"></i>Trash List</button>
                @endif
            </div>
        </div>
    </div>
    <!-- Breadcrumb End -->
    <div class="col-md-12 col-lg-12 px-0">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                    <li>If you have already selected featured image, Please select it again!</li>
                </ul>
            </div>
        @endif
        <form id="product-create-form" method="POST" action="{{ route('products.store') }}"
            enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="created_by" value="{{ $logged_in_user->id }}">
            <div class="row">
                <div class="col-md-9">
                    <!-- Product Details (Compulsory) -->
                    <div class="card mg-b-30">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Product Details (Compulsory)') }}
                                    </h6>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label class="form-control-label active">Title: <span class="tx-danger">*</span></label>
                                <input class="form-control form-control-lg addTitle"
                                    type="text" name="title" placeholder="Shoulder Bag"
                                    value="{{ old('title') }}" required>
                            </div>
                            <div class="form-group">
                                <label class="form-control-label active">Permalink: <span
                                        class="tx-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">{{ url('/') }}/product-detail/</span>
                                    </div>
                                    <input class="form-control permalink" id="permalink" type="text" name="permalink"
                                        value="{{ old('permalink') }}" placeholder="shoulder-bag" required>
                                </div>
                                <div class="text-danger permalink_error"></div>
                                <input type="hidden" class="permalink_status" name="permalink_status"
                                    value="{{ old('permalink_status') }}" required>
                            </div>
                        </div>
                    </div>
                    <!-- Product Details (Optional) -->
                    <div class="card mg-b-30">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Product Details (Optional)') }}
                                    </h6>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                        <div class="form-group">
                            <label class="form-control-label active">Short Description: (Add Only Text)</label>
                            <textarea class="form-control" id="short_description" name="short_description" placeholder="Short Description...">{{ old('short_description') }}</textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label active">Long Description:(Add Only Text) </label>
                            <textarea class="form-control" id="long_description" name="long_description" placeholder="Long Description...">{{ old('long_description') }}</textarea>
                        </div>
                    </div>

                    </div>
                    <!-- Gallery Media (Optional) -->
                    <div class="card mg-b-30">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Gallery Media (Optional)') }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="card-body gallery-media">
                            <div class="input-group mb-3">
                                <input type="file" class="form-control" id="imageInput" name="gallery_media[]"
                                    multiple accept="image/*" placeholder="Select Images">
                                <button type="button" class="btn btn-priamry" onclick="uploadImages()">Upload</button>
                            </div>
                            <input type="hidden" name="variations_count[]" value="variation">
                            <div class="row mt-3" id="imagePreviewContainer">
                                @if ($errors->any())
                                    @php
                                        $product_variations = DB::table('product_temp_variation')
                                            ->where('created_by', $logged_in_user->id)
                                            ->get();
                                    @endphp
                                    @if (sizeof($product_variations) > 0)
                                        @if ($product->gallery_media != '')
                                            @php
                                                $imagePaths = explode(',', $product_variations->gallery_media);
                                            @endphp
                                            @foreach ($imagePaths as $imagePath)
                                                <img class="m-1" src="{{ url('/') . '/' . $imagePath }}"
                                                    width="25%" height="25%">
                                            @endforeach
                                        @endif
                                    @endif
                                @endif
                            </div>
                            <div class="response_section"></div>
                            <small class="text-secondary">Select a featured image by clicking on it.</small>
                        </div>
                    </div>
                    <!-- Product SEO Details (Optional) -->
                    <div class="card mg-b-30">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Product SEO Details (Optional)') }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label class="form-control-label active">SEO Title: </label>
                                <input type="text" class="form-control" name="_seo_title"
                                    value="{{ old('_seo_title') }}" placeholder="SEO Title...">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label active">SEO Tags: </label>
                                <input type="text" name="_seo_tags" value="{{ old('_seo_tags') }}"
                                    class="form-control rounded-0" id="seo_tags">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label active">SEO Description: </label>
                                <textarea class="form-control" name="_seo_description" placeholder="SEO Description...">{{ old('_seo_description') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Right Column -->
                <div class="col-md-3">
                    <!-- Shipping Areas (Required) -->
                    <div class="card mg-b-30">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Shipping Areas (Required)') }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label class="form-control-label active">Select Shipping Area: </label>
                                <select class="select2-demo form-control" name="area_group_id[]" multiple
                                    style="width: 100%">
                                    <optgroup label="Over the Globe">
                                        <option value="0">All Countries</option>
                                    </optgroup>
                                    @foreach ($areagroups as $areagroup)
                                        <optgroup label="{{ $areagroup->title }}">
                                            @foreach ($areagroup->groupsMeta as $groupmeta)
                                                <option value="{{ $groupmeta->postcode }}">{{ $groupmeta->title }}
                                                </option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- More Details (Optional) -->
                    <div class="card mg-b-30">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('More Details (Optional)') }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- Brand -->
                            <div class="form-group">
                                <label class="form-control-label active">Brand: </label>
                                <select class="form-control select2-demo" id="brand_type" name="brand_id">
                                    <option selected>Select Brand</option>
                                    @foreach ($brands as $brand)
                                        <option value="{{ $brand->id }}"
                                            @if (old('brand_type') == $brand->id) selected @endif>{{ $brand->title }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <!-- Discount -->
                            <div class="form-group">
                                <label class="form-control-label active">Discount: </label>
                                <select class="form-control" name="discount_id">
                                    <option selected>Select Discount On Product</option>
                                    @foreach ($discounts as $discount)
                                        <option value="{{ $discount->id }}"
                                            @if (old('discount_id') == $discount->id) selected @endif>{{ $discount->title }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <!-- GST Included -->
                            <div class="form-group">
                                <label class="form-control-label active">GST Included:</label>
                                <select class="form-control" id="_gst" name="_gst">
                                 
                                    <option value="1" @if (old('_gst') == 1) selected @endif>True</option>
                                    <option value="0" @if (old('_gst') == 0) selected @endif>False</option>
                                </select>
                            </div>
                            <!-- Product Type -->
                            <div class="form-group">
                                <label class="form-control-label active">Product Type: </label>
                                <select class="form-control select2-demo" id="product_type" name="product_type" required>
                                    @foreach ($producttypes as $producttype)
                                        <option value="{{ $producttype->id }}"
                                            @if (old('product_type') == $producttype->id) selected @endif>{{ $producttype->title }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <!-- Product Variant -->
                            <div class="form-group">
                                <label class="form-control-label active">Product Varient: </label>
                                <select class="form-control" id="variant" name="variant">
                                    <option value="1" @if (old('product_type') == 1) selected @endif>Individual</option>
                                    <!-- <option value="2" @if (old('product_type') == 2) selected @endif>Kit Product</option> -->
                                </select>
                            </div>
                            <!-- Stock, Price, SKU, Weight, UPC -->
                            <div class="form-group">
                                <label class="form-control-label active">Product Stock:</label>
                                <select class="form-control" name="_stock_status">
                                    <option value="in_stock" {{ old('_stock_status') === 'in_stock' ? 'selected' : '' }}>
                                        In Stock
                                    </option>
                                    <option value="out_stock" {{ old('_stock_status') === 'out_stock' ? 'selected' : '' }}>
                                        Out of Stock
                                    </option>
                                </select>
                            </div>
                            <div class="form-group regular_price_Section">
                                <label class="form-control-label active">Buy Price: </label>
                                <input class="form-control" type="number" min="0" value="{{ old('_buy_price', 0) }}"
                                    step="0.1" name="_buy_price" required>
                            </div>
                            <div class="form-group regular_price_Section">
                                <label class="form-control-label active">Price: </label>
                                <input class="form-control" type="number" min="0" value="{{ old('_price', 0) }} "
                                    step="0.0001" name="_price" required>
                            </div>
                            <div class="form-group">
                                <label class="form-control-label active">SKU:(Required) </label>
                                <input class="form-control" type="text" value="{{ old('sku') }}" name="sku" required>
                            </div>
                            <div class="form-group">
                                <label class="form-control-label active">Weight(KG) </label>
                                <input class="form-control" value="{{ old('_weight') }}" type="number" min="0"  step="0.001" name="_weight" required>
                            </div>
                            <div class="form-group">
                                <label class="form-control-label active">UPC/Barcode:(Required) </label>
                                <input class="form-control" type="text" value="{{ old('_upc') }}" name="_upc">
                            </div>
                            <!-- Active Status -->
                            <div class="form-group">
                                <label class="form-control-label active">Active Status: </label>
                                <select class="form-control" name="active">
                                    <option value="0" @if (old('active') == 0) selected @endif>Draft</option>
                                    <option value="1" @if (old('active') == 1) selected @endif>Public</option>
                                    <option value="2" @if (old('active') == 2) selected @endif>Private</option>
                                    <option value="3" @if (old('active') == 3) selected @endif>Trash</option>
                                </select>
                            </div>
                            <hr>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" name="_virtual" value="1"
                                    id="customCheckvirtual" @if (old('_virtual') == 1) checked @endif>
                                <label class="custom-control-label" for="customCheckvirtual">Is this a featured
                                    Product?</label>
                            </div>
                            <hr>
                            <input class="btn btn-primary float-right" type="submit" value="Submit">
                        </div>
                    </div>
                    <!-- Featured Media (Optional) -->
                    <div class="card mg-b-30">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Featured Media (Optional)') }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label class="form-control-label active">Featured Image: </label>
                                <input class="form-control" name="featured_image" accept="image/*" type="file"
                                    id="featuredimageInput">
                                <div class="text-secondary"><small>Preferred Dimension: (720px) x (800px)</small></div>
                            </div>
                            <div class="form-group">
                                <label class="form-control-label active">Featured Image Alt: </label>
                                <input class="form-control" name="_alt" type="text" value="{{ old('_alt') }}">
                            </div>
                            <div id="featuredimagePreview"></div>
                        </div>
                    </div>
                    <!-- Product Category (Optional) -->
                    <div class="card mg-b-30">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Product Category (Optional)') }}</h6>
                                </div>
                            </div>
                        </div>
                            <div class="card-body">
                            <!-- Main Category -->
                            <div class="form-group">
                                <label class="form-control-label active">Main Category:</label>
                                <select class="form-control" id="main_category" name="category_id" required>
                                    <!-- Default (deselect) option -->
                                    <option value="">-- Select Main Category --</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->title }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Child Category -->
                            <div class="form-group d-none">
                                <label class="form-control-label active">Child Category:</label>
                                <select class="form-control" id="child_category" name="child_category">
                                    <!-- Default (deselect) option -->
                                    <option value="">-- None --</option>
                                </select>
                            </div>

                            <!-- Sub Child Category -->
                            <div class="form-group d-none">
                                <label class="form-control-label active">Sub Child Category:</label>
                                <select class="form-control" id="grand_child_category" name="grand_child_category">
                                    <!-- Default (deselect) option -->
                                    <option value="">-- None --</option>
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- Order Active dataTable End -->
</div>
<!-- Page Inner End -->

@include('Admin.Includes.footer')

<script>
    document.addEventListener('DOMContentLoaded', function() {
    var shortDesc = document.getElementById('short_description');
    var longDesc = document.getElementById('long_description');
    var shortNote = document.getElementById('short_note');
    var longNote = document.getElementById('long_note');

    // Function to update note based on input
    function updateNote(textarea, noteElement, descriptionType) {
        if (textarea.value.length > 0) {
            noteElement.innerText = `You are typing the ${descriptionType}.`;
        } else {
            noteElement.innerText = ''; // Clear note when textarea is empty
        }
    }

    // Event listeners for each textarea
    shortDesc.addEventListener('input', function() {
        updateNote(shortDesc, shortNote, 'short description');
    });
    longDesc.addEventListener('input', function() {
        updateNote(longDesc, longNote, 'long description');
    });
});

    // Get DOM elements
    const mainCategorySelect         = document.getElementById('main_category');
    const childCategorySelect        = document.getElementById('child_category');
    const grandChildCategorySelect   = document.getElementById('grand_child_category');

    // Example data passed from Laravel backend
    const childCategoriesData        = {!! json_encode($childcats) !!};
    const grandChildCategoriesData   = {!! json_encode($grandcats) !!};

    /**
     * Resets the child and grandchild <select> boxes to their default (none) option.
     */
    function resetChildAndGrandChildSelects() {
        // Reset child category to just “-- None --”
        childCategorySelect.innerHTML = '<option value="">-- None --</option>';
        // Reset grandchild category to just “-- None --”
        grandChildCategorySelect.innerHTML = '<option value="">-- None --</option>';
    }

    /**
     * Update child categories based on a selected main category ID.
     */
    function updateChildCategories(mainCategoryId) {
        // First, always reset child & grandchild so user can deselect again
        resetChildAndGrandChildSelects();

        // If mainCategoryId is empty, user selected “-- Select Main Category --”
        if (!mainCategoryId) {
            return; // Stop here, do not populate child categories
        }

        // Filter child categories for those whose main parent matches
        const filteredChildCategories = childCategoriesData.filter((child) => {
            return child.main_parent_category == mainCategoryId;
        });

        // Populate the child <select>
        filteredChildCategories.forEach((child) => {
            const option = document.createElement('option');
            option.value = child.id;
            option.textContent = child.child_title;
            childCategorySelect.appendChild(option);
        });
    }

    /**
     * Update grandchild categories based on a selected child category ID.
     */
    function updateGrandChildCategories(childCategoryId) {
        // Reset the grandchild first
        grandChildCategorySelect.innerHTML = '<option value="">-- None --</option>';

        // If childCategoryId is empty, user selected “-- None --” for child category
        if (!childCategoryId) {
            return; // Stop here, do not populate grandchild categories
        }

        // Filter grandchild categories for those whose mid parent matches
        const filteredGrandChildCategories = grandChildCategoriesData.filter((grandChild) => {
            return grandChild.mid_parent_category == childCategoryId;
        });

        // Populate the grandchild <select>
        filteredGrandChildCategories.forEach((grandChild) => {
            const option = document.createElement('option');
            option.value = grandChild.id;
            option.textContent = grandChild.grand_title;
            grandChildCategorySelect.appendChild(option);
        });
    }

    // Main category change event
    mainCategorySelect.addEventListener('change', (e) => {
        const selectedMainCategoryId = e.target.value;
        updateChildCategories(selectedMainCategoryId);
    });

    // Child category change event
    childCategorySelect.addEventListener('change', (e) => {
        const selectedChildCategoryId = e.target.value;
        updateGrandChildCategories(selectedChildCategoryId);
    });

    // Optional: If a main category is already selected on load, populate children
    const initialMainCategoryId = mainCategorySelect.value;
    if (initialMainCategoryId) {
        updateChildCategories(initialMainCategoryId);
    }
</script>
<script>
   $('.addTitle').on('input', function() {
  // Trim leading/trailing whitespace
  var title = $(this).val().trim();

  // Replace any sequence of spaces with a single hyphen and convert to lowercase
  var sku = title.replace(/\s+/g, '-').toLowerCase();

  $('.permalink').val(sku);
  validate_permalink();
});

$('.permalink').on('input', function() {
  validate_permalink();
});

    $('#short_description').summernote({
        placeholder: 'Short Description...',
        tabsize: 2,
        height: 150,
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']]
        ]
    });
    $('#long_description').summernote({
        placeholder: 'Long Description...',
        tabsize: 2,
        height: 250,
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['insert', ['link']],
            ['view', ['codeview']],
        ],
        popover: {
            image: [
                ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
                ['remove', ['removeMedia']]
            ],
            link: [
                ['link', ['unlink']]
            ],
            air: [
                ['color', ['color']],
                ['font', ['bold', 'underline', 'clear']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture']]
            ]
        }
    });
    $('#seo_tags').tagsinput({
        tagClass: 'badge badge-primary'
    });

    // --- Featured Image Preview JS ---
    var imageInput = document.getElementById('featuredimageInput');
    var imagePreview = document.getElementById('featuredimagePreview');
    imageInput.addEventListener('change', function(event) {
        var selectedFile = event.target.files[0];
        if (selectedFile) {
            var reader = new FileReader();
            reader.onload = function(event) {
                var imageElement = document.createElement('img');
                imageElement.src = event.target.result;
                imageElement.style.width = '100%';
                imageElement.style.height = 'auto';
                imagePreview.innerHTML = '';
                imagePreview.appendChild(imageElement);
            }
            reader.readAsDataURL(selectedFile);
        } else {
            imagePreview.innerHTML = '';
        }
    });

    function validate_permalink() {
        var permalink = $('#permalink').val();
        $.ajax({
            url: '{{ route('Admin.Product.CheckPermalink') }}',
            method: 'POST',
            data: {
                permalink: permalink,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            dataType: 'json',
            success: function(response) {
                $('.permalink_status').val('1');
                $('.permalink_error').html('');
            },
            error: function(xhr, status, error) {
                console.log(xhr);
                $('.permalink_status').val('');
                $('.permalink_error').html(
                    '<small>This permalink already in used or field is empty!, Please change the permalink.</small>'
                );
            }
        });
    }

    $(function() {
        $('.select2-demo').each(function() {
            $(this)
                .wrap('<div class="position-relative"></div>')
                .select2({
                    placeholder: 'Select value',
                    dropdownParent: $(this).parent()
                });
        });
    });

    // --- Gallery Media and Featured Image Selection JS ---
    document.addEventListener('DOMContentLoaded', function() {
        const imageInput = document.getElementById('imageInput');
        const imagePreviewContainer = document.getElementById('imagePreviewContainer');

        imageInput.addEventListener('change', function(event) {
            const selectedImages = event.target.files;
            // Convert FileList to array
            const imagesArray = Array.from(selectedImages);

            // Get existing image URLs from previews
            const existingImages = Array.from(imagePreviewContainer.querySelectorAll('img')).map(img => img.src);

            // Remove previews that are no longer selected
            imagePreviewContainer.querySelectorAll('.preview-wrapper').forEach(wrapper => {
                const img = wrapper.querySelector('img');
                if (!imagesArray.includes(img.src)) {
                    wrapper.remove();
                }
            });

            // Create new previews for newly added images
            imagesArray.forEach(image => {
                if (!existingImages.includes(URL.createObjectURL(image))) {
                    const reader = new FileReader();

                    reader.onload = function() {
                        const imgPreview = document.createElement('img');
                        imgPreview.src = reader.result;
                        imgPreview.classList.add('img-thumbnail', 'img-preview');

                        // Add a radio button for featured image selection
                        const radioInput = document.createElement('input');
                        radioInput.type = 'radio';
                        radioInput.name = 'featuredImage';
                        // For demonstration, we use a static value ('1'); adjust as needed
                        radioInput.value = '1';
                        radioInput.classList.add('radio-button');
                        radioInput.addEventListener('click', function() {
                            setFeaturedImage(reader.result);
                        });

                        // Add a "Remove" button for removing the image
                        const removeButton = document.createElement('button');
                        removeButton.type = 'button';
                        removeButton.classList.add('btn', 'btn-sm', 'btn-danger', 'badge', 'btn-remove', 'reduce_button');
                        removeButton.textContent = 'X';
                        removeButton.addEventListener('click', function() {
                            const previewWrapper = removeButton.parentNode;
                            if (previewWrapper.classList.contains('selected')) {
                                setFeaturedImage(null);
                            }
                            previewWrapper.remove();
                        });

                        // Wrap the image, radio button, and remove button in a container
                        const previewWrapper = document.createElement('label');
                        previewWrapper.classList.add('preview-wrapper');
                        previewWrapper.appendChild(imgPreview);
                        previewWrapper.appendChild(radioInput);
                        previewWrapper.appendChild(removeButton);

                        imagePreviewContainer.appendChild(previewWrapper);
                    }

                    reader.readAsDataURL(image);
                }
            });
        });

        function setFeaturedImage(imageSrc) {
            // Remove existing selection
            const prevSelected = document.querySelector('.preview-wrapper.selected');
            if (prevSelected) {
                prevSelected.classList.remove('selected');
                const prevRadio = prevSelected.querySelector('.radio-button');
                prevRadio.checked = false;
            }
            // Set new featured image if provided
            if (imageSrc) {
                const selectedWrapper = document.querySelector(`.preview-wrapper [value="${imageSrc}"]`).parentNode;
                selectedWrapper.classList.add('selected');
                const selectedRadio = selectedWrapper.querySelector('.radio-button');
                selectedRadio.checked = true;
            }
        }
    });

    function uploadImages() {
        const fileInput = $('#imageInput');
        if (fileInput[0].files.length === 0) {
            alert('Please select at least one image.');
            return;
        }

        const radioInput = $('.radio-button:checked');
        if (radioInput.length === 0) {
            alert('Please select a featured image.');
            return;
        }

        const formData = new FormData();
        const selectedFiles = fileInput[0].files;
        for (let i = 0; i < selectedFiles.length; i++) {
            formData.append('gallery_media[]', selectedFiles[i]);
        }
        formData.append('featuredImage', radioInput.val());
        const csrfToken = $('meta[name="csrf-token"]').attr('content');

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': csrfToken,
            },
        });

        $.ajax({
            url: '/admin/products/add_product_variation',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('.response_section').html('<div class="alert alert-success">' + response.message + '</div>');
            },
            error: function(xhr, status, error) {
                $('.response_section').html('<div class="alert alert-danger">Error saving data to the server.</div>');
            },
        });
    }

    function dataURItoBlob(dataURI) {
        const byteString = atob(dataURI.split(',')[1]);
        const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        const ab = new ArrayBuffer(byteString.length);
        const ia = new Uint8Array(ab);
        for (let i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], { type: mimeString });
    }

    Array.prototype.search = function(elem) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == elem) return i;
        }
        return -1;
    };

    var Multiselect = function(selector) {
        if (!$(selector)) {
            console.error("ERROR: Element %s does not exist.", selector);
            return;
        }
        Multiselect.prototype.toggleBackgroundColor = function(option) {
            $(option).toggleClass("selected-option");
        };

        this.selector = selector;
        this.selections = [];

        (function(that) {
            that.events();
        })(this);
    };

    Multiselect.prototype = {
        open: function(that) {
            var target = $(that).parent().attr("data-target");
            if (!this.selections) {
                this.selections = [];
            }
            $(this.selector + ".multiselect").toggleClass("active");
        },
        close: function() {
            $(this.selector + ".multiselect").removeClass("active");
        },
        events: function() {
            var that = this;
            $(document).on("click", that.selector + ".multiselect > .title", function(e) {
                if (e.target.className.indexOf("close-icon") < 0) {
                    that.open();
                }
            });
            $(document).on("click", that.selector + ".multiselect option", function(e) {
                var selection = $(this).text();
                var target = $(this).parent().parent().attr("data-target");

                var io = that.selections.search(selection);
                if (io < 0) {
                    that.selections.push(selection);
                    that.toggleBackgroundColor(this);
                } else {
                    that.selections.splice(io, 1);
                    that.toggleBackgroundColor(this);
                }
                that.selectionStatus();
                that.setSelectionsString();
            });
            $(document).on("click", that.selector + ".multiselect > .title > .close-icon", function(e) {
                that.clearSelections();
            });
            $(document).click(function(e) {
                if (e.target.className.indexOf("title") < 0) {
                    if (e.target.className.indexOf("text") < 0) {
                        if (e.target.className.indexOf("-icon") < 0) {
                            if (e.target.className.indexOf("selected") < 0 || e.target.localName != "option") {
                                that.close();
                            }
                        }
                    }
                }
            });
        },
        selectionStatus: function() {
            var obj = $(this.selector + ".multiselect");
            if (this.selections.length) obj.addClass("selection");
            else obj.removeClass("selection");
        },
        clearSelections: function() {
            this.selections = [];
            this.selectionStatus();
            this.setSelectionsString();
        },
        getSelections: function() {
            return this.selections;
        },
        setSelectionsString: function() {
            var selects = this.getSelectionsString().split(", ");
            $(this.selector + ".multiselect > .title").attr("title", selects);
            var opts = $(this.selector + ".multiselect option");
            if (selects.length > 3) {
                var _selects = this.getSelectionsString().split(", ");
                _selects = _selects.splice(0, 3);
                $(this.selector + ".multiselect > .title > .text").text(_selects + " [...]");
            } else {
                $(this.selector + ".multiselect > .title > .text").text(selects);
            }
            for (var i = 0; i < opts.length; i++) {
                $(opts[i]).removeClass("selected");
            }
            for (var j = 0; j < selects.length; j++) {
                var select = selects[j];
                for (var i = 0; i < opts.length; i++) {
                    if ($(opts[i]).text() == select) {
                        $(opts[i]).addClass("selected");
                        break;
                    }
                }
            }
        },
        getSelectionsString: function() {
            if (this.selections.length > 0)
                return this.selections.join(", ");
            else return "Select";
        },
        setSelections: function(arr) {
            if (!arr[0]) {
                error("ERROR: This does not look like an array.");
                return;
            }
            this.selections = arr;
            this.selectionStatus();
            this.setSelectionsString();
        },
    };

    $(document).ready(function() {
        var multi = new Multiselect("#countries");
    });
</script>