@extends('admin.layouts.app')

@section('panel')
    <div class="row mb-none-30">
        <div class="col-lg-12 col-md-12 mb-30">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">@lang('Add Product')</h4>
                    <form id="productCreateForm" method="post" enctype="multipart/form-data">
                        @csrf

                        <!-- Main Tab Navigation -->
                        <ul class="nav nav-tabs" id="productTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="product-details-tab" data-bs-toggle="tab" data-bs-target="#product-details" type="button" role="tab" aria-controls="product-details" aria-selected="true">@lang('Product Details')</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="links-media-tab" data-bs-toggle="tab" data-bs-target="#links-media" type="button" role="tab" aria-controls="links-media" aria-selected="false">@lang('Links and Media')</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="false">@lang('Description')</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="meta-items-tab" data-bs-toggle="tab" data-bs-target="#meta-items" type="button" role="tab" aria-controls="meta-items" aria-selected="false">@lang('Meta Items')</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="type-group-tab" data-bs-toggle="tab" data-bs-target="#type-group" type="button" role="tab" aria-controls="type-group" aria-selected="false">@lang('Type Group')</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="seller-type-tab" data-bs-toggle="tab" data-bs-target="#seller-type" type="button" role="tab" aria-controls="seller-type" aria-selected="false">@lang('Seller Type')</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="option-group-tab" data-bs-toggle="tab" data-bs-target="#option-group" type="button" role="tab" aria-controls="option-group" aria-selected="false">@lang('Option Group')</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="availability-tab" data-bs-toggle="tab" data-bs-target="#availability" type="button" role="tab" aria-controls="availability" aria-selected="false">@lang('Availability')</button>
                            </li>
                        </ul>

                        <!-- Main Tab Content -->
                        <div class="tab-content" id="productTabsContent">
                            <!-- Product Details Tab -->
                            <div class="tab-pane fade show active" id="product-details" role="tabpanel" aria-labelledby="product-details-tab">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="main_category_id" class="font-weight-bold">@lang('Main Category')</label>
                                                <select class="form-control" id="main_category_id">
                                                    <option value="" selected disabled>@lang('Select Main Category')</option>
                                                </select>
                                                <small class="text-muted d-block mt-1">@lang('Choose the top-level category first')</small>
                                            </div>
                                        </div>
                                        <div class="col-lg-4" id="subcategoryWrapper" style="display:none;">
                                            <div class="form-group">
                                                <label for="subcategory_ids" class="font-weight-bold">@lang('Subcategories')</label>
                                                <select class="form-control" id="subcategory_ids" name="subcategory_ids[]" multiple size="5"></select>
                                                <small class="text-muted d-block mt-1">@lang('You can choose multiple subcategories')</small>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 d-flex align-items-end" id="selectedCategoryPreviewWrapper" style="display:none;">
                                            <div class="form-group w-100">
                                                <label class="font-weight-bold">@lang('Primary Category To Save')</label>
                                                <div class="form-control bg-light" id="selectedCategoryPreview">-</div>
                                                <small class="text-muted d-block mt-1">@lang('First selected subcategory is used as primary category')</small>
                                            </div>
                                        </div>
                                        <input type="hidden" name="category_id" id="category_id" value="{{ old('category_id') }}">
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="name" class="font-weight-bold">@lang('Name')</label>
                                                <input type="text" name="name" id="name" value="{{ old('name') }}"
                                                    class="form-control" placeholder="@lang('Name...')">
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="price" class="font-weight-bold">@lang('Price')</label>
                                                <input step="0.0000000001" type="number" name="price" id="price" value="{{ old('price') }}"
                                                    class="form-control" placeholder="@lang('Price...')" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-group">
                                                <label for="discount" class="font-weight-bold">@lang('Discount') %</label>
                                                <input type="number" name="discount" id="discount" value="{{ old('discount') }}"
                                                    class="form-control" placeholder="@lang('Discount...')">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card mt-3">
                                        <div class="card-body text-end">
                                            <button type="button" class="btn btn--primary btn-global next-tab" data-next-tab="links-media-tab">@lang('Next')</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Links and Media Tab -->
                            <div class="tab-pane fade" id="links-media" role="tabpanel" aria-labelledby="links-media-tab">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="demo_link" class="font-weight-bold">@lang('Demo Link')</label>
                                                <input type="text" name="demo_link" id="demo_link" value="{{ old('demo_link') }}"
                                                    class="form-control" placeholder="@lang('Demo Link...')" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="Slug" class="font-weight-bold">@lang('Slug')</label>
                                                <input type="text" name="Slug" id="Slug" value="{{ old('Slug') }}"
                                                    class="form-control" placeholder="@lang('Slug...')" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="thumbnail" class="font-weight-bold">@lang('Thumbnail') (500x370)</label>
                                                <div class="file-upload-wrapper" data-text="Select your image!">
                                                    <input type="file" name="thumbnail" id="thumbnail" class="file-upload-field">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="background" class="font-weight-bold">@lang('Background-Image') (500x370)</label>
                                                <div class="file-upload-wrapper" data-text="Select your image!">
                                                    <input type="file" name="background" id="background" class="file-upload-field">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="file" class="font-weight-bold">@lang('File-Compressed')</label>
                                                <div class="file-upload-wrapper" data-text="Select your file!">
                                                    <input type="file" name="file" id="file" class="file-upload-field">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="row form-group">
                                                <div class="col-12">
                                                    <label for="images" class="font-weight-bold">@lang('Image') (894x661)</label>
                                                </div>
                                                <div class="col-10 mb-3">
                                                    <div class="file-upload-wrapper" data-text="Select your image!">
                                                        <input type="file" name="images[]" id="images" class="file-upload-field">
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <button type="button" class="btn btn--white addProductImage ms-0"><i class="fa fa-plus"></i></button>
                                                </div>
                                                <div class="col-12">
                                                    <div id="productImage"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card mt-3">
                                        <div class="card-body text-end">
                                            <button type="button" class="btn btn--secondary btn-global prev-tab" data-prev-tab="product-details-tab">@lang('Previous')</button>
                                            <button type="button" class="btn btn--primary btn-global next-tab" data-next-tab="description-tab">@lang('Next')</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Description Tab -->
                            <div class="tab-pane fade" id="description" role="tabpanel" aria-labelledby="description-tab">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label for="description" class="font-weight-bold">@lang('Description')</label>
                                                <textarea class="form-control trumEdit" name="description" id="description" rows="3"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card mt-3">
                                        <div class="card-body text-end">
                                            <button type="button" class="btn btn--secondary btn-global prev-tab" data-prev-tab="links-media-tab">@lang('Previous')</button>
                                            <button type="button" class="btn btn--primary btn-global next-tab" data-next-tab="meta-items-tab">@lang('Next')</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Meta Items Tab -->
                            <div class="tab-pane fade" id="meta-items" role="tabpanel" aria-labelledby="meta-items-tab">
                                <div class="card-body">
                                    <div class="table-responsive--sm table-responsive my-4">
                                        <table class="table table--light style--two custom-data-table" id="myTable">
                                            <thead>
                                                <tr>
                                                    <th>@lang('Name')</th>
                                                    <th>@lang('Value')</th>
                                                    <th>@lang('Delete')</th>
                                                </tr>
                                            </thead>
                                            <tbody id="FeatureBody">
                                                <tr>
                                                    <td>
                                                        <input type="text" class="form-control" name="item[0][name]" value="" />
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control" name="item[0][value]" value="" />
                                                    </td>
                                                    <td>
                                                        <div class="btn btn-danger deleteFeature">Remove</div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="row">
                                        <div class="btn btn--primary" id="AddFeature">Add Option Item</div>
                                    </div>
                                    <div class="card mt-3">
                                        <div class="card-body text-end">
                                            <button type="button" class="btn btn--secondary btn-global prev-tab" data-prev-tab="description-tab">@lang('Previous')</button>
                                            <button type="button" class="btn btn--primary btn-global next-tab" data-next-tab="type-group-tab">@lang('Next')</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Type Group Tab -->
                            <div class="tab-pane fade" id="type-group" role="tabpanel" aria-labelledby="type-group-tab">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="TypeGroup" class="font-weight-bold">@lang('Type Group')</label>
                                                <select id="TypeGroup" class="select2-basic" name="type_id">
                                                    <option value="0">Select</option>
                                                    @foreach ($types as $type)
                                                        <option value="{{ $type->id }}">{{ $type->title }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div id="type"></div>
                                    </div>
                                    <div class="card mt-3">
                                        <div class="card-body text-end">
                                            <button type="button" class="btn btn--secondary btn-global prev-tab" data-prev-tab="meta-items-tab">@lang('Previous')</button>
                                            <button type="button" class="btn btn--primary btn-global next-tab" data-next-tab="seller-type-tab">@lang('Next')</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="seller-type" role="tabpanel" aria-labelledby="seller-type-tab">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="SellerType" class="font-weight-bold">@lang('Seller Type')</label>
                                                <select id="SellerType" class="select2-basic" name="seller_type_id">
                                                    <option value="0">Select</option>
                                                    @foreach ($sellerTypeGroups as $type)
                                                        <option value="{{ $type->id }}">{{ $type->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div id="type"></div>
                                    </div>
                                    <div class="card mt-3">
                                        <div class="card-body text-end">
                                            <button type="button" class="btn btn--secondary btn-global prev-tab" data-prev-tab="type-group-tab">@lang('Previous')</button>
                                            <button type="button" class="btn btn--primary btn-global next-tab" data-next-tab="option-group-tab">@lang('Next')</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Option Group Tab -->
                            <div class="tab-pane fade" id="option-group" role="tabpanel" aria-labelledby="option-group-tab">
                                <div class="row">
                                    <div class="col-lg-3">
                                        <ul class="nav flex-column nav-tabs bg-light-blue" id="optionGroupTabs" role="tablist">
                                            @foreach ($optionGroups as $optionGroup)
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link @if ($loop->first) active @endif" id="option-group-{{ $optionGroup->id }}-tab" data-bs-toggle="tab" data-bs-target="#option-group-{{ $optionGroup->id }}" type="button" role="tab" aria-controls="option-group-{{ $optionGroup->id }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}">@lang($optionGroup->name)</button>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <div class="col-lg-9">
                                        <div class="tab-content" id="optionGroupTabsContent">
                                            @foreach ($optionGroups as $optionGroup)
                                                <div class="tab-pane fade @if ($loop->first) show active @endif" id="option-group-{{ $optionGroup->id }}" role="tabpanel" aria-labelledby="option-group-{{ $optionGroup->id }}-tab">
                                                    <div class="card-body">
                                                        <input type="hidden" name="option_group_id[]" value="{{ $optionGroup->id }}">
                                                        <div class="table-responsive">
                                                            <table class="table table-bordered">
                                                                <thead>
                                                                    <tr>
                                                                        <th>@lang('Option')</th>
                                                                        <th>@lang('Item')</th>
                                                                        <th>@lang('Extra Price')</th>
                                                                        <th>@lang('Prefix')</th>
                                                                        <th>@lang('Use As Filter')</th>
                                                                        <th>@lang('Status')</th>
                                                                        <th>@lang('Actions')</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody id="op-items-{{ $optionGroup->id }}">
                                                                    <tr class="option-row">
                                                                        <td>
                                                                            <select name="option_id[]" class="form-control option-select" data-group-id="{{ $optionGroup->id }}">
                                                                                <option value="" disabled selected>@lang('Select Option')</option>
                                                                            </select>
                                                                        </td>
                                                                        <td>
                                                                            <select name="inventory_type_new[]" class="form-control item-select">
                                                                                <option value="" disabled selected>@lang('Select Item')</option>
                                                                            </select>
                                                                        </td>
                                                                        <td>
                                                                            <input type="number" name="extra_price_new[]" class="form-control" step="0.0000000001">
                                                                        </td>
                                                                         <td>
                                                                            <select name="prefix[]" class="form-control">
                                                                                <option value="+">@lang('+')</option>
                                                                                <option value="-">@lang('-')</option>
                                                                                <option value="*">@lang('*')</option>
                                                                                <option value="/">@lang('/')</option>
                                                                                <option value="%">@lang('%')</option>
                                                                                <option value="=">@lang('=')</option>
                                                                            </select>
                                                                        </td>
                                                                         <td>
                                                                            <label class="switch m-0">
                                                                                <input type="checkbox" name="use_as_filter_new[]" class="toggle-switch">
                                                                                <span class="slider round"></span>
                                                                            </label>
                                                                        </td>

                                                                        <td>
                                                                            <label class="switch m-0">
                                                                                <input type="checkbox" name="status_new[]" class="toggle-switch">
                                                                                <span class="slider round"></span>
                                                                            </label>
                                                                        </td>
                                                                        <td>
                                                                            <button type="button" class="btn btn-primary btn-sm add-option-row">@lang('Add')</button>
                                                                            <button type="button" class="btn btn-danger btn-sm remove-option-row">@lang('Delete')</button>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="card mt-3">
                                            <div class="card-body text-end">
                                                <button type="button" class="btn btn--secondary btn-global prev-tab" data-prev-tab="seller-type-tab">@lang('Previous')</button>
                                                <button type="button" class="btn btn--primary btn-global next-tab" data-next-tab="availability-tab">@lang('Next')</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Availability Tab -->
                            <div class="tab-pane fade" id="availability" role="tabpanel" aria-labelledby="availability-tab">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="is_free" class="font-weight-bold">@lang('Free')?</label>
                                                <label class="switch m-0">
                                                    <input type="checkbox" class="toggle-switch" name="is_free">
                                                    <span class="slider round"></span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label for="seler_offer" class="font-weight-bold">@lang('Available For Seller Offer')?</label>
                                                <label class="switch m-0">
                                                    <input type="checkbox" class="toggle-switch" name="seler_offer">
                                                    <span class="slider round"></span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card mt-3">
                                        <div class="card-body text-end">
                                            <button type="button" class="btn btn--secondary btn-global prev-tab" data-prev-tab="option-group-tab">@lang('Previous')</button>
                                            <button type="submit" class="btn btn--primary btn-global">@lang('Create')</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div id="loadingSpinnerWrapper">
                        <div id="loadingSpinner"></div>
                        <div id="spinnerPercentage">0%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('breadcrumb-plugins')
    <a href="{{ route('admin.product.index') }}" class="btn btn-sm btn--primary">@lang('Back')</a>
@endpush

@push('style')
    <style>
        .select2-container {
            z-index: 1000 !important;
        }
        .ck.ck-editor__main > .ck-editor__editable {
            min-height: 131px;
        }
        #loadingSpinnerWrapper {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            width: 100%;
            height: 100vh;
        }
        #loadingSpinner {
            position: relative;
            width: 60px;
            height: 60px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        #spinnerPercentage {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 14px;
            color: white;
        }
        .card {
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .nav-tabs .nav-link {
            color: #495057;
            background-color: #f8f9fa;
            border-color: #dee2e6 #dee2e6 #fff;
        }
        .nav-tabs .nav-link.active {
            color: #000;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
        }
        .bg-light-blue {
            background-color: #e6f0fa;
        }
        .nav-tabs.bg-light-blue .nav-link {
            color: #004085;
            background-color: #e6f0fa;
            border: none;
            border-right: 1px solid #dee2e6;
        }
        .nav-tabs.bg-light-blue .nav-link.active {
            color: #fff;
            background-color: #007bff;
            border: none;
        }
        .nav.flex-column {
            border-right: 1px solid #dee2e6;
        }
        .table-bordered th, .table-bordered td {
            border: 1px solid #dee2e6;
        }
    </style>
@endpush

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            var categoryRows = @json($categories);
            var categoryById = {};
            var childrenByParentId = {};
            var $mainCategory = $('#main_category_id');
            var $subCategory = $('#subcategory_ids');
            var $categoryInput = $('#category_id');
            var $subcategoryWrapper = $('#subcategoryWrapper');
            var $selectedCategoryPreviewWrapper = $('#selectedCategoryPreviewWrapper');
            var $selectedCategoryPreview = $('#selectedCategoryPreview');

            categoryRows.forEach(function(row) {
                var id = Number(row.id);
                var parentId = Number(row.parent_id || 0);
                if (!id) return;
                categoryById[id] = {
                    id: id,
                    name: row.name || ('Category #' + id),
                    parent_id: parentId
                };
                if (!childrenByParentId[parentId]) childrenByParentId[parentId] = [];
                childrenByParentId[parentId].push(categoryById[id]);
            });

            function getCategoryPathName(categoryId) {
                var chain = [];
                var current = categoryById[Number(categoryId)];
                var guard = 0;
                while (current && guard < 16) {
                    chain.unshift(current.name);
                    current = categoryById[Number(current.parent_id || 0)];
                    guard++;
                }
                return chain.join(' / ');
            }

            function getDescendantCategories(parentId) {
                var descendants = [];
                var stack = (childrenByParentId[Number(parentId)] || []).slice();
                while (stack.length) {
                    var current = stack.shift();
                    descendants.push(current);
                    var children = childrenByParentId[current.id] || [];
                    children.forEach(function(child) { stack.push(child); });
                }
                return descendants;
            }

            function getRootCategoryId(categoryId) {
                var current = categoryById[Number(categoryId)];
                var guard = 0;
                while (current && Number(current.parent_id || 0) !== 0 && guard < 16) {
                    current = categoryById[Number(current.parent_id || 0)];
                    guard++;
                }
                return current ? current.id : 0;
            }

            function renderMainCategories() {
                var roots = (childrenByParentId[0] || []).slice().sort(function(a, b) {
                    return a.name.localeCompare(b.name);
                });
                $mainCategory.find('option:not([disabled])').remove();
                roots.forEach(function(root) {
                    $mainCategory.append('<option value="' + root.id + '">' + root.name + '</option>');
                });
            }

            function updatePrimaryCategoryPreview() {
                var mainId = Number($mainCategory.val() || 0);
                var selectedSubs = ($subCategory.val() || []).map(function(v) { return Number(v); }).filter(Boolean);
                var descendants = getDescendantCategories(mainId);
                var primaryId = 0;

                if (descendants.length > 0) {
                    primaryId = selectedSubs.length ? selectedSubs[0] : 0;
                } else {
                    primaryId = mainId;
                }

                $categoryInput.val(primaryId ? String(primaryId) : '');
                if (primaryId) {
                    $selectedCategoryPreview.text(getCategoryPathName(primaryId));
                } else {
                    $selectedCategoryPreview.text('-');
                }
            }

            function renderSubcategories(preserveSelection) {
                var mainId = Number($mainCategory.val() || 0);
                var descendants = getDescendantCategories(mainId).sort(function(a, b) {
                    return getCategoryPathName(a.id).localeCompare(getCategoryPathName(b.id));
                });

                $subCategory.empty();
                if (!mainId) {
                    $subcategoryWrapper.hide();
                    $selectedCategoryPreviewWrapper.hide();
                    $categoryInput.val('');
                    return;
                }

                if (descendants.length > 0) {
                    $subcategoryWrapper.show();
                    descendants.forEach(function(category) {
                        var label = getCategoryPathName(category.id);
                        $subCategory.append('<option value="' + category.id + '">' + label + '</option>');
                    });
                } else {
                    $subcategoryWrapper.hide();
                }

                if (!preserveSelection) {
                    $subCategory.val([]);
                }
                $selectedCategoryPreviewWrapper.show();
                updatePrimaryCategoryPreview();
            }

            $mainCategory.on('change', function() {
                renderSubcategories(false);
            });

            $subCategory.on('change', function() {
                updatePrimaryCategoryPreview();
            });

            renderMainCategories();
            var initialCategoryId = Number($categoryInput.val() || 0);
            if (initialCategoryId) {
                var initialMainId = getRootCategoryId(initialCategoryId);
                if (initialMainId) {
                    $mainCategory.val(String(initialMainId));
                    renderSubcategories(true);
                    if (initialMainId !== initialCategoryId) {
                        $subCategory.val([String(initialCategoryId)]);
                    }
                    updatePrimaryCategoryPreview();
                }
            }

            // Save option state
            function saveOptionState(groupId) {
                var state = [];
                $(`#op-items-${groupId} .option-row`).each(function() {
                    var optionVal = $(this).find('.option-select').val();
                    var itemVal = $(this).find('.item-select').val();
                    var extraPrice = $(this).find('input[name="extra_price_new[]"]').val();
                    state.push({
                        option_id: optionVal || '',
                        item_id: itemVal || '',
                        extra_price: extraPrice || ''
                    });
                });
                return state;
            }

            // Restore option state
            function restoreOptionState(groupId, state) {
                var rows = $(`#op-items-${groupId} .option-row`);
                rows.each(function(index) {
                    if (state[index]) {
                        var row = $(this);
                        row.find('.option-select').val(state[index].option_id).trigger('change');
                        row.find('.item-select').val(state[index].item_id);
                        row.find('input[name="extra_price_new[]"]').val(state[index].extra_price);
                    }
                });
            }

            // Get selected items
            function getSelectedItems(groupId) {
                var selected = [];
                $(`#op-items-${groupId} .item-select`).each(function() {
                    var val = $(this).val();
                    if (val && val !== '') {
                        selected.push(val);
                    }
                });
                return selected;
            }

            // Load options for a group
            function loadOptions(groupId) {
                var currentState = saveOptionState(groupId);
                $.ajax({
                    url: "{{ route('admin.option-group.options') }}",
                    type: 'GET',
                    data: { id: groupId },
                    dataType: 'json',
                    success: function(data) {
                        var selectBoxes = $(`#op-items-${groupId} .option-select`);
                        selectBoxes.each(function() {
                            var selectBox = $(this);
                            var currentVal = selectBox.val();
                            selectBox.empty();
                            selectBox.append('<option value="" disabled selected>@lang("Select Option")</option>');
                            data.options.forEach(function(option) {
                                selectBox.append(`<option value="${option.id}">${option.title}</option>`);
                            });
                            if (currentVal && data.options.some(opt => opt.id.toString() === currentVal)) {
                                selectBox.val(currentVal);
                            }
                        });
                        restoreOptionState(groupId, currentState);
                    },
                    error: function(xhr) {
                        console.error('Error loading options:', xhr.responseText);
                    }
                });
            }

            // Load items for an option
            function loadItems(optionId, selectBox) {
                var groupId = selectBox.closest('.option-row').find('.option-select').data('group-id');
                var selectedItems = getSelectedItems(groupId);
                $.ajax({
                    url: "{{ route('admin.option-group.items') }}",
                    type: 'GET',
                    data: { id: optionId },
                    dataType: 'json',
                    success: function(data) {
                        var currentVal = selectBox.val();
                        selectBox.empty();
                        selectBox.append('<option value="" disabled selected>@lang("Select Item")</option>');
                        data.items.forEach(function(item) {
                            if (!selectedItems.includes(item.id.toString()) || item.id.toString() === currentVal) {
                                selectBox.append(`<option value="${item.id}">${item.value}</option>`);
                            }
                        });
                        if (currentVal && data.items.some(item => item.id.toString() === currentVal)) {
                            selectBox.val(currentVal);
                        }
                    },
                    error: function(xhr) {
                        console.error('Error loading items:', xhr.responseText);
                    }
                });
            }

            // Update item selects
            function updateItemSelects(groupId) {
                $(`#op-items-${groupId} .option-row`).each(function() {
                    var optionId = $(this).find('.option-select').val();
                    var itemSelect = $(this).find('.item-select');
                    if (optionId) {
                        loadItems(optionId, itemSelect);
                    }
                });
            }

            // Load options when tab is shown
            $('.nav-tabs.bg-light-blue .nav-link').on('shown.bs.tab', function(e) {
                var groupId = $(this).attr('aria-controls').replace('option-group-', '');
                loadOptions(groupId);
            });

            // Load items when option changes
            $(document).on('change', '.option-select', function() {
                var optionId = $(this).val();
                var itemSelect = $(this).closest('.option-row').find('.item-select');
                if (optionId) {
                    loadItems(optionId, itemSelect);
                } else {
                    itemSelect.empty().append('<option value="" disabled selected>@lang("Select Item")</option>');
                }
            });

            // Add option row
            $(document).on('click', '.add-option-row', function() {
                var tbody = $(this).closest('tbody');
                var groupId = tbody.attr('id').replace('op-items-', '');
                var newRow = `
                    <tr class="option-row">
                        <td>
                            <select name="option_id[]" class="form-control option-select" data-group-id="${groupId}">
                                <option value="" disabled selected>@lang('Select Option')</option>
                            </select>
                        </td>
                        <td>
                            <select name="inventory_type_new[]" class="form-control item-select">
                                <option value="" disabled selected>@lang('Select Item')</option>
                            </select>
                        </td>
                        <td>
                            <input type="number" name="extra_price_new[]" class="form-control" step="0.0000000001">
                        </td>
                         <td>
                                                                            <select name="prefix[]" class="form-control">
                                                                                <option value="+">@lang('+')</option>
                                                                                <option value="-">@lang('-')</option>
                                                                                <option value="*">@lang('*')</option>
                                                                                <option value="/">@lang('/')</option>
                                                                                <option value="%">@lang('%')</option>
                                                                                <option value="=">@lang('=')</option>
                                                                            </select>
                                                                        </td>
                         <td>
                                                                            <label class="switch m-0">
                                                                                <input type="checkbox" name="use_as_filter_new[]" class="toggle-switch">
                                                                                <span class="slider round"></span>
                                                                            </label>
                                                                        </td>
                                                                        <td>
                                                                            <label class="switch m-0">
                                                                                <input type="checkbox" name="status_new[]" class="toggle-switch">
                                                                                <span class="slider round"></span>
                                                                            </label>
                                                                        </td>
                        <td>
                            <button type="button" class="btn btn-primary btn-sm add-option-row">@lang('Add')</button>
                            <button type="button" class="btn btn-danger btn-sm remove-option-row">@lang('Delete')</button>
                        </td>
                    </tr>`;
                tbody.append(newRow);
                loadOptions(groupId);
            });

            // Remove option row
            $(document).on('click', '.remove-option-row', function() {
                var tbody = $(this).closest('tbody');
                var groupId = tbody.attr('id').replace('op-items-', '');
                if (tbody.find('tr').length > 1) {
                    $(this).closest('tr').remove();
                    updateItemSelects(groupId);
                }
            });

            // Update items on item select change
            $(document).on('change', '.item-select', function() {
                var tbody = $(this).closest('tbody');
                var groupId = tbody.attr('id').replace('op-items-', '');
                updateItemSelects(groupId);
            });

            // Load options for active Option Group tab
            $('#option-group-tab').on('shown.bs.tab', function() {
                var activeTab = $('.nav-tabs.bg-light-blue .nav-link.active');
                if (activeTab.length) {
                    var groupId = activeTab.attr('aria-controls').replace('option-group-', '');
                    loadOptions(groupId);
                }
            });

            // Filter Meta Items table
            $('#filterInput').on('keyup', function() {
                var filterValue = $(this).val().toLowerCase();
                $('#myTable tbody tr').filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(filterValue) > -1);
                });
            });

            $('#filterInput2').on('keyup', function() {
                var filterValue = $(this).val().toLowerCase();
                $('#myTable2 tbody tr').filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(filterValue) > -1);
                });
            });

            // Manage Meta Items
            let count = 1;
            $('#AddFeature').on('click', function() {
                let tr = `<tr><td><input type="text" class="form-control" name="item[${count}][name]" /></td><td><input type="text" class="form-control" name="item[${count}][value]" /></td><td><div class="btn btn-danger deleteFeature">Remove</div></td></tr>`;
                $('#FeatureBody').append(tr);
                count++;
            });

            $(document).on('click', '.deleteFeature', function() {
                $(this).closest('tr').remove();
            });

            // Manage file uploads
            var fileAdded = 0;
            $('.addProductImage').on('click', function() {
                if (fileAdded >= 2) {
                    notify('error', "You've added maximum number of files");
                    return false;
                }
                fileAdded++;
                $("#productImage").append(`
                    <div class="row">
                        <div class="col-10 mb-3">
                            <div class="file-upload-wrapper" data-text="@lang('Select your image!')"><input type="file" name="images[]" class="file-upload-field"></div>
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn text--danger removeProductImage"><i class="la la-times ms-0"></i></button>
                        </div>
                    </div>
                `);
            });

            $(document).on('click', '.removeProductImage', function() {
                fileAdded--;
                $(this).closest('.row').remove();
            });

            // Form submission
            $('#productCreateForm').submit(function(e) {
                e.preventDefault();
                var selectedMainId = Number($mainCategory.val() || 0);
                var selectedSubs = $subCategory.val() || [];
                var subCandidates = getDescendantCategories(selectedMainId);

                if (!selectedMainId) {
                    Toast.fire({
                        icon: 'error',
                        title: '@lang("Please select a main category.")'
                    });
                    return;
                }

                if (subCandidates.length > 0 && selectedSubs.length === 0) {
                    Toast.fire({
                        icon: 'error',
                        title: '@lang("Please select at least one subcategory.")'
                    });
                    return;
                }

                updatePrimaryCategoryPreview();
                if (!$categoryInput.val()) {
                    Toast.fire({
                        icon: 'error',
                        title: '@lang("Primary category is not resolved. Please review your selection.")'
                    });
                    return;
                }

                var formData = new FormData(this);
                var loadingSpinnerWrapper = $('#loadingSpinnerWrapper');
                var loadingSpinner = $('#loadingSpinner');
                var spinnerPercentage = $('#spinnerPercentage');

                loadingSpinnerWrapper.fadeIn();
                loadingSpinner.css('opacity', '1');

                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(event) {
                    if (event.lengthComputable) {
                        var progress = Math.round((event.loaded / event.total) * 100);
                        spinnerPercentage.text(progress + '%');
                    }
                });

                xhr.open("POST", "{{ route('admin.product.store') }}");

               xhr.onload = function() {
                    if (xhr.status === 200) {
                        var response = JSON.parse(xhr.responseText);
                        Toast.fire({
                            icon: 'success',
                            title: response.message
                        });
                        // ریدایرکت به روت admin.product.index
                        setTimeout(function() {
                            window.location.href = "{{ route('admin.product.index') }}";
                        }, 1500); // تاخیر 1.5 ثانیه‌ای برای نمایش پیام موفقیت
                        loadingSpinnerWrapper.fadeOut();
                    } else if (xhr.status === 422) {
                        loadingSpinnerWrapper.fadeOut();
                        spinnerPercentage.text('0%').fadeOut();
                        var response = JSON.parse(xhr.responseText);
                        if (response.errors) {
                            var errorMessage = Object.values(response.errors)[0][0];
                            Toast.fire({
                                icon: 'error',
                                title: errorMessage
                            });
                        }
                    } else {
                        loadingSpinnerWrapper.fadeOut();
                        spinnerPercentage.text('0%').fadeOut();
                        Toast.fire({
                            icon: 'error',
                            title: 'Product could not be created. Please try again later.'
                        });
                    }
                };

                xhr.onerror = function() {
                    loadingSpinnerWrapper.fadeOut();
                    spinnerPercentage.text('0%').fadeOut();
                    Toast.fire({
                        icon: 'error',
                        title: 'An error occurred during the request.'
                    });
                };

                xhr.send(formData);
            });

            // Type Group handling
            $('#TypeGroup').on('change', function() {
                $('#type').empty();
                var typeId = $(this).val();
                $.ajax({
                    url: "{{ route('admin.type.item') }}",
                    type: 'GET',
                    data: { id: typeId },
                    dataType: 'json',
                    success: function(data) {
                        data.data.forEach(function(type) {
                            var required = type.required == 1 ? "required" : "";
                            if (type.type != 'radio' && type.type != 'range' && type.type != 'checkbox' && type.type != 'file') {
                                var html = `<div class="col-sm-6"><label class="text-muted">${type.title}</label><input type="${type.type}" name="item-${type.title}" class="form-control" ${required}></div>`;
                                $('#type').append(html);
                            }
                        });
                    },
                    error: function(xhr) {
                        console.error('Error loading type items:', xhr.responseText);
                    }
                });
            });

            // Slug validation
            $('#Slug').on('keydown', function(event) {
                if (event.key === '/' || event.key === '_' || event.key === ' ') {
                    event.preventDefault();
                    alert("You cannot use the _, /, or whitespace characters.");
                }
            }).on('input', function() {
                this.value = this.value.replace(/[_\/\s]/g, '');
            });
        });
    </script>
@endpush