@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 -->
                            <!-- 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="category" class="font-weight-bold">@lang('Category')</label>
                                                <select class="form-control" name="category_id" required>
                                                    <option disabled>@lang('Select Category')</option>
                                                    @foreach ($categories as $category)
                                                        <option value="{{ $category->id }}"
                                                            {{ $product->category_id == $category->id ? 'selected' : '' }}>
                                                            {{ __($category->name) }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <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', $product->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 type="number" name="price" id="price"
                                                    value="{{ old('price', $product->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', $product->discount) }}" class="form-control"
                                                    placeholder="@lang('Discount...')">
                                            </div>
                                            <input type="hidden" name="id" id="id"
                                                value="{{ $product->id }}" class="form-control">
                                        </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 -->
                            <!-- 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', $product->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', $product->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>
                                                @if ($product->thumbnail)
                                                    <img src="{{ asset('storage/' . $product->thumbnail) }}"
                                                        alt="Thumbnail" style="max-width: 200px;" />
                                                @endif
                                            </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>
                                                @if ($product->background)
                                                    <img src="{{ asset('storage/' . $product->background) }}"
                                                        alt="Background" style="max-width: 200px;" />
                                                @endif
                                            </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>
                                                @if ($product->file)
                                                    <a href="{{ asset('storage/' . $product->file) }}"
                                                        target="_blank">Download File</a>
                                                @endif
                                            </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>
                                                @foreach ($productImage as $image)
                                                    <div class="row mb-3">
                                                        <div class="col-10">
                                                            <img src="{{ asset('storage/' . $image->image) }}"
                                                                alt="Product Image" style="max-width: 200px;" />
                                                        </div>
                                                        <div class="col-2">
                                                            <button type="button"
                                                                class="btn text--danger removeProductImage"
                                                                data-id="{{ $image->id }}"><i
                                                                    class="la la-times ms-0"></i></button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                                <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">{{ old('description', $product->description) }}</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 -->
                            <!-- 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">
                                                @foreach ($productMetas as $index => $meta)
                                                    <tr>
                                                        <td>
                                                            <input type="text" class="form-control"
                                                                name="item[{{ $index }}][name]"
                                                                value="{{ $meta->name }}" />
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control"
                                                                name="item[{{ $index }}][value]"
                                                                value="{{ $meta->content }}" />
                                                        </td>
                                                        <td>
                                                            <div class="btn btn-danger deleteFeature">Remove</div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                                <tr>
                                                    <td>
                                                        <input type="text" class="form-control"
                                                            name="item[{{ $productMetas->count() }}][name]"
                                                            value="" />
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control"
                                                            name="item[{{ $productMetas->count() }}][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 -->
                            <!-- 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 }}"
                                                            {{ $productTypes->first() && $productTypes->first()->type_id == $type->id ? 'selected' : '' }}>
                                                            {{ $type->title }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div id="type">
                                            @foreach ($productTypes as $productType)
                                                @php
                                                    $items = \App\Models\ProductItemType::where(
                                                        'type_id',
                                                        $productType->type_id,
                                                    )
                                                        ->where('product_id', $product->id)
                                                        ->get();
                                                @endphp
                                                @foreach ($items as $item)
                                                    <div class="col-sm-6">
                                                        <label class="text-muted">{{ $item->title }}</label>
                                                        <input type="{{ $item->type ?? 'text' }}"
                                                            name="item-{{ Str::slug($item->title) }}"
                                                            class="form-control" value="{{ $item->value }}"
                                                            {{ $item->required ? 'required' : '' }}>
                                                    </div>
                                                @endforeach
                                            @endforeach
                                        </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="option-group-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 }}" {{ $product->seller_type_id == $type->id ? 'selected':'' }}>{{ $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 -->
                            <!-- 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 }}">
                                                                    @php
                                                                        $groupOptions = $optionItemPrices->where(
                                                                            'option_group_id',
                                                                            $optionGroup->id,
                                                                        );
                                                                    @endphp
                                                                    @foreach ($groupOptions as $index => $option)
                                                                        <tr class="option-row">
                                                                            <td>
                                                                                <select name="option_id[]"
                                                                                    class="form-control option-select"
                                                                                    data-group-id="{{ $optionGroup->id }}">
                                                                                    <option value="" disabled>
                                                                                        @lang('Select Option')</option>
                                                                                    @foreach (($groupOptionOptions->get($optionGroup->id) ?? collect()) as $opt)
                                                                                        <option
                                                                                            value="{{ $opt->option->id }}"
                                                                                            {{ $option->option_id == $opt->option->id ? 'selected' : '' }}>
                                                                                            {{ $opt->option->title }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </td>
                                                                            <td>
                                                                                <select name="inventory_type_new[]"
                                                                                    class="form-control item-select">
                                                                                    <option value="" disabled>
                                                                                        @lang('Select Item')</option>
                                                                                    @foreach (($optionItemsLookup->get((int) $option->option_id) ?? collect()) as $item)
                                                                                        <option
                                                                                            value="{{ $item->id }}"
                                                                                            {{ $option->item_id == $item->id ? 'selected' : '' }}>
                                                                                            {{ $item->value }}</option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </td>

                                                                            <td>
                                                                                <input type="number"
                                                                                    name="extra_price_new[]"
                                                                                    class="form-control"
                                                                                    step="0.0000000001"
                                                                                    value="{{ $option->price }}">
                                                                            </td>

                                                                            <td>

                                                                                <select name="prefix[]"
                                                                                    class="form-control">
                                                                                    <option value="+"
                                                                                        @if ($option->prefix == '+') @selected(true) @endif>
                                                                                        @lang('+')</option>
                                                                                    <option value="-"
                                                                                        @if ($option->prefix == '-') @selected(true) @endif>
                                                                                        @lang('-')</option>
                                                                                    <option value="*"
                                                                                        @if ($option->prefix == '*') @selected(true) @endif>
                                                                                        @lang('*')</option>
                                                                                    <option value="/"
                                                                                        @if ($option->prefix == '/') @selected(true) @endif>
                                                                                        @lang('/')</option>
                                                                                    <option value="%"
                                                                                        @if ($option->prefix == '%') @selected(true) @endif>
                                                                                        @lang('%')</option>
                                                                                    <option value="="
                                                                                        @if ($option->prefix == '=') @selected(true) @endif>
                                                                                        @lang('=')</option>
                                                                                </select>
                                                                            </td>
                                                                            <td>
                                                                                <label class="switch m-0">
                                                                                    <input type="checkbox"
                                                                                        name="use_as_filter_new[]"
                                                                                        class="toggle-switch"
                                                                                        @if ($option->filter) @checked(true) @endif>
                                                                                    <span class="slider round"></span>
                                                                                </label>
                                                                            </td>
                                                                            <td>
                                                                                <label class="switch m-0">
                                                                                    <input type="checkbox"
                                                                                        name="status_new[]"
                                                                                        class="toggle-switch"
                                                                                        @if ($option->status) @checked(true) @endif>
                                                                                    <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>
                                                                    @endforeach
                                                                    <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="type-group-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 -->
                            <!-- 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"
                                                        {{ $product->is_free ? 'checked' : '' }}>
                                                    <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"
                                                        {{ $product->available_for_seler_offer ? 'checked' : '' }}>
                                                    <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('Update')</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() {
            // Load options for the active option group tab
            var activeTab = $('.nav-tabs.bg-light-blue .nav-link.active');
            if (activeTab.length) {
                var groupId = activeTab.attr('aria-controls').replace('option-group-', '');
                loadOptions(groupId);
                setTimeout(function() {
                    $(`#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);
                        }
                    });
                }, 500);
            }
        });
        $(document).ready(function() {
            // 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 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.update') }}");


                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