@extends('../backend/layout/' . $layout)

@section('subhead')
<title>Products</title>
@endsection

@section('subcontent')
<form class="validate-form" method="POST" id="product-form" enctype="multipart/form-data">
    @method('PUT')
    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12">
            <div class="intro-y box">
                <div
                    class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Edit Product</h2>
                </div>
                <div id="form-validation" class="p-5">
                    <div class="preview">
                        <div class="input-form mb-4">
                            <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                Name <span class="text-danger">*</span>
                            </label>
                            <input id="name" type="text" class="form-control form__input"
                                placeholder="Enter product name." name="name" value="{{ $product->name }}" 
                                required data-pristine-required-message="Please enter product name">
                            <div id="error-name" class="form__input-error text-danger"></div>
                        </div>
                        <div class="grid grid-cols-12 gap-4">
                            <div class="input-form mb-4 col-span-6">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    Categories <span class="text-danger">*</span>
                                </label>
                                <select id="category" name="categories[]" class="form-control tom-select sm:mr-2"
                                    aria-label="Default select example"
                                    required data-pristine-required-message="Please enter product name" multiple>
                                    @foreach ($categories as $category)
                                    <option value="{{ $category->id }}" @selected(in_array($category->id,
                                        $product->categories()->pluck('id')->toArray()))>{{ $category->parent_id ? $category->parent->name .'>'.
                                        $category->name : $category->name }}</option>
                                    @endforeach
                                </select>
                                <div id="error-categories" class="form__input-error text-danger"></div>
                            </div>
                            <div class="input-form mb-4 col-span-6">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    Brand
                                </label>
                                <select id="brand_id" name="brand_id" class="form-control form-select sm:mr-2"
                                    aria-label="Default select example">
                                    <option value="">Select</option>
                                    @foreach ($brands as $brand)
                                    <option value="{{ $brand->id }}" @selected($product->brand_id == $brand->id)>
                                        {{ $brand->name }}</option>
                                    @endforeach
                                </select>
                                <div id="error-email" class="form__input-error text-danger"></div>
                            </div>
                        </div>
                        <div class="input-form mb-4 flex">
                            <label for="crud-form-4" class="form-label flex flex-col sm:flex-row">
                                Status
                            </label>
                            <div class="form-switch mb-1 grow-0 ml-2">
                                <input type="checkbox" class="form-check-input" name="status" id="status" @checked($product->status == 1)>
                            </div>
                            <div id="error-status" class="form__input-error text-danger"></div>
                        </div>
                        <div class="input-form mb-4">
                            <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                Keywords &nbsp;<small> (It is used for SEO & Search)</small>
                            </label>
                            <select id="meta_tags" name="meta_tags[]" class="form-control sm:mr-2 meta_tags" multiple>
                                @if (is_array($product->meta_tags) && count($product->meta_tags))
                                @foreach ($product->meta_tags as $tag)
                                <option value="{{ $tag }}" selected>{{ $tag }}</option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="input-form mb-4">
                            <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                Summary
                            </label>
                            <textarea name="summary" class="form-control form__input editor"
                                id="summary">{{ $product->summary }}</textarea>
                            <div id="error-summary" class="form__input-error text-danger"></div>
                        </div>
                        <div class="input-form mb-4">
                            <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                Description
                            </label>
                            <textarea name="description" class="form-control form__input editor"
                                id="description">{{ $product->description }}</textarea>
                            <div id="error-description" class="form__input-error text-danger"></div>
                        </div>
                        {{-- <div class="input-form mb-4 flex">
                            <label for="crud-form-4" class="form-label flex flex-col sm:flex-row">
                                Status
                            </label>
                            <div class="form-switch mb-1 grow-0 ml-2">
                                <input type="checkbox" class="form-check-input" name="status" id="status" @checked($product->status == 1)>
                            </div>
                            <div id="error-status" class="form__input-error text-danger"></div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-3 intro-y col-span-12">
            <div class="intro-y box">
                <div
                    class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Media</h2>
                </div>
                <div class="preview p-5">
                    <div class="border-2 border-dashed dark:border-darkmode-400 rounded-md pt-4">
                        <div class="flex flex-wrap px-4" id="photo-view">
                            @php
                            $photos = explode(',', $product->photos);
                            $photos = array_filter($photos);
                            @endphp
                            @foreach ($photos as $key => $photo)
                            <div class="w-24 h-24 relative flex items-center product-image justify-center mb-5 mr-5 cursor-pointer zoom-in"
                                id="{{ $key }}">
                                <img class="rounded-md" src="{{ $photo }}">
                                <div title="Remove this image?"
                                    class="tooltip w-5 h-5 flex items-center justify-center absolute rounded-full text-white bg-danger right-0 top-0 -mr-2 -mt-2">
                                    <i data-lucide="x" class="w-4 h-4"
                                        onclick="deleteImg('{{ $photo }}', 'lfm', {{ $key }})"></i>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div id="lfm" class="px-4 pb-4 flex items-center cursor-pointer relative" data-input="photos"
                            data-preview="photo-view" data-edit="1">
                            <i data-lucide="image" class="w-4 h-4 mr-2"></i> <span class="text-primary mr-1">Upload a
                                image</span>
                            <input type="hidden" name="photos" id="photos" value="{{ $product->photos }}"
                                class="w-full h-full top-0 left-0 absolute opacity-0">
                        </div>
                        <div id="error-photo" class="form__input-error text-danger mt-1"></div>
                    </div>
                    <small><strong>Note:</strong> Recommanded image size is 800*900px</small>
                    <div class="grid grid-cols-12 gap-2 mt-2">
                        <div class="input-form mb-4 col-span-6">
                            <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                Video URL
                            </label>
                            <input id="video_url" type="text" class="form-control form__input" placeholder="https:://example.com"
                                name="video_url" value="{{ $product->video_url }}">
                            <div id="error-video_url" class="form__input-error text-danger"></div>
                        </div>
                        <div class="input-form mb-4 col-span-6">
                            <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                Document (Full Technical Specification)
                            </label>
                            @if ($product->attachment)
                                <a href="{{ $product->attachment()}}" target="_blank" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">View Attachment</a>
                                <button type="button" class="btn btn-sm btn-danger" id="delete-attachment" data-route="{{ route('attachment.delete', $product->id) }}">Delete</button>
                            @else
                                <input id="attachment" type="file" class="form-control form__input"
                                    name="attachment" accept=".pdf" value="{{ $product->attachment() }}">
                                <div id="error-attachment" class="form__input-error text-danger"></div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="intro-y col-span-12">
            <div class="intro-y box">
                <div
                    class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Pricing</h2>
                </div>
                <div class="p-5">
                    <div class="preview">
                        <div class="grid grid-cols-12 gap-2">
                            <div class="input-form mb-4 col-span-6">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    Price <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <div class="input-group-text">{{ config('constant.currency')}}</div>
                                    <input id="price" type="number" class="form-control form__input" placeholder="0.00"
                                        name="price" value="{{ $product->price }}"
                                        required data-pristine-required-message="Please enter product price">
                                </div>

                                <div id="error-price" class="form__input-error text-danger"></div>
                            </div>
                            <div class="input-form mb-4 col-span-6">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    MRP
                                </label>
                                <div class="input-group">
                                    <div class="input-group-text">{{ config('constant.currency')}}</div>
                                    <input id="compare_at_price" type="text" class="form-control form__input"
                                        placeholder="0.00" name="compare_at_price"
                                        value="{{ $product->compare_at_price }}">
                                </div>
                                <div id="error-compare_at_price" class="form__input-error text-danger"></div>
                            </div>
                            <div class="form-check col-span-6">
                                <input id="charge_tax" name="charge_tax" class="form-check-input" type="checkbox"
                                    value="1" @checked($product->charge_tax == 1)>
                                <label class="form-check-label" for="charge_tax">Charge tax on this product</label>
                            </div>
                        </div>
                        <div class="grid grid-cols-12 gap-5 mt-4">
                            <div class="input-form col-span-4">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    Cost per item
                                </label>
                                <div class="input-group">
                                    <div class="input-group-text">{{ config('constant.currency')}}</div>
                                    <input id="cost_per_item" type="number" class="form-control form__input"
                                        placeholder="0.00" name="cost_per_item" value="{{ $product->cost_per_item }}">
                                </div>
                                <div id="error-cost_per_item" class="form__input-error text-danger"></div>
                            </div>
                            <div class="input-form col-span-4">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    Margin
                                </label>
                                <h2 id="margin"></h2>
                            </div>
                            <div class="input-form col-span-4">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    Profit
                                </label>
                                <h2 id="profit"></h2>
                            </div>
                            <div class="input-form col-span-4">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    Quantity
                                </label>
                                <input id="quantity" type="number" class="form-control form__input" placeholder="0.00"
                                    name="quantity" value="{{ $product->quantity }}">
                                <div id="error-quantity" class="form__input-error text-danger"></div>
                            </div>
                            <div class="input-form col-span-4">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    GST
                                </label>
                                <select name="gst" id="gst" class="form-control">
                                    @foreach (\App\Models\Product::GST as $gst)
                                        <option value="{{$gst}}" @selected($gst == $product->gst)>{{$gst}}%</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="input-form col-span-4">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    HSN Code
                                </label>
                                <input id="hsn_code" type="text" class="form-control form__input"
                                    name="hsn_code" value="{{ $product->hsn_code }}">
                                <div id="error-hasn_code" class="form__input-error text-danger"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="intro-y col-span-12">
            <div class="intro-y box">
                <div
                    class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Packing Dimensions</h2>
                </div>
                <div class="p-5">
                    <div class="preview">
                        <div class="grid grid-cols-12 gap-5">
                            <div class="input-form col-span-3">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    Width<span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input id="packing_dimensions-width" type="number" class="form-control form__input"
                                        name="packing_dimensions[width]" value="{{ $product->packing_dimensions['width'] }}" required>
                                    <div class="input-group-text">CM</div>
                                </div>
                                <div id="error-packing_dimensions-width" class="form__input-error text-danger"></div>
                            </div>
                            <div class="input-form col-span-3">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    Height<span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input id="packing_dimensions-height" type="number" class="form-control form__input"
                                        name="packing_dimensions[height]" value="{{ $product->packing_dimensions['height'] }}" required>
                                    <div class="input-group-text">CM</div>
                                </div>
                                <div id="error-packing_dimensions-height" class="form__input-error text-danger"></div>
                            </div>
                            <div class="input-form col-span-3">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    Length<span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input id="packing_dimensions-length" type="number" class="form-control form__input"
                                        name="packing_dimensions[length]" value="{{ $product->packing_dimensions['length'] }}" required>
                                    <div class="input-group-text">CM</div>
                                </div>
                                <div id="error-packing_dimensions-length" class="form__input-error text-danger"></div>
                            </div>
                            <div class="input-form col-span-3">
                                <label for="crud-form-4" class="form-label w-full flex flex-col sm:flex-row">
                                    Weight<span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input id="packing_dimensions-weight" type="number" class="form-control form__input"
                                        name="packing_dimensions[weight]" value="{{ $product->packing_dimensions['weight'] }}" required>
                                    <div class="input-group-text">KG</div>
                                </div>
                                <div id="error-packing_dimensions-weight" class="form__input-error text-danger"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="intro-y col-span-12">
            <div class="intro-y box">
                <div
                    class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Inventory</h2>
                </div>
                <div class="p-5">
                    <div class="preview">
                        <div class="grid grid-cols-12 gap-2">
                            <div class="input-form mb-4 col-span-6">
                                <label for="sku" class="form-label w-full flex flex-col sm:flex-row">
                                    SKU (Stock Keeping Unit)
                                </label>
                                <input id="sku" type="text" class="form-control form__input" value="{{ $product->sku }}"
                                    name="sku">
                                <div id="error-sku" class="form__input-error text-danger"></div>
                            </div>
                            <div class="input-form mb-4 col-span-6">
                                <label for="barcode" class="form-label w-full flex flex-col sm:flex-row">
                                    Barcode (ISBN, UPC, GTIN, etc)
                                </label>
                                <input id="barcode" type="text" class="form-control form__input"
                                    value="{{ $product->barcode }}" name="barcode">
                                <div id="error-barcode" class="form__input-error text-danger"></div>
                            </div>
                            <div class="form-check col-span-12">
                                <input id="track_quantity" name="track_quantity" class="form-check-input"
                                    type="checkbox" value="1" @checked($product->track_quantity)>
                                <label class="form-check-label" for="track_quantity">Track quantity</label>
                            </div>
                            <div class="form-check col-span-12">
                                <input id="selling_out_of_stock" name="selling_out_of_stock" class="form-check-input"
                                    type="checkbox" value="1" @checked($product->selling_out_of_stock)>
                                <label class="form-check-label" for="selling_out_of_stock">Continue selling when out of
                                    stock</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- <div class="intro-y col-span-12">
            <div class="intro-y box">
                <div class="items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <div class="form-check col-span-6 gap-2">
                        <h2 class="font-medium text-base mr-auto">Specification</h2>
                    </div>
                </div>
                <div class="p-5">
                    <div class="preview">
                        <div class="grid grid-cols-12 gap-2">
                            <div class="input-form mb-4 col-span-12">
                                <label for="sku" class="form-label w-full flex flex-col sm:flex-row">
                                    Attribute Group
                                </label>
                                <select name="attribute_group_id" class="form-control form__input"
                                    id="attribute_group_id" onchange="getAttributes(this, {{ $product->id }})">
                                    <option value="">Select</option>
                                    @foreach ($attributeGroups as $attributeGroup)
                                    <option value="{{ $attributeGroup->id }}" @selected(is_array($product->attributes)
                                        && in_array($attributeGroup->name, array_keys($product->attributes)))>
                                        {{ $attributeGroup->name }}</option>
                                    @endforeach
                                </select>
                                <div id="error-attribute_group_id" class="form__input-error text-danger"></div>
                            </div>
                            <div class="col-span-12">
                                <table class="table" id="attributeTable">
                                    <thead>
                                        <tr>
                                            <th width="40%">Attribute</th>
                                            <th width="60%">Text</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if (is_array($product->attributes))
                                        @foreach ($product->attributes as $attributes)
                                        @foreach ($attributes as $key => $attribute)
                                        <tr>
                                            <td>
                                                <label class="form-check-label">{{ $key }}</label>
                                            </td>
                                            <td>
                                                <textarea name="attributes[{{ $key }}][{{ $attribute }}]"
                                                    class="form-control" rows="3">{{ $attribute }}</textarea>
                                            </td>
                                        </tr>
                                        @endforeach
                                        @endforeach
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
        <div class="intro-y col-span-12">
            <div class="box">
                <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Custom Specifications</h2>
                </div>
                <textarea name="custom_specification" class="form-control form__input" id="custom-specification">{{ $product->custom_specification }}</textarea>
            </div>
        </div>
        <div class="intro-y col-span-12">
            <div class="box">
                <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Specifications</h2>
                </div>
                <div id="specification-accordion-1" class="accordion p-5">

                </div>
            </div>
        </div>
        <div class="intro-y col-span-12">
            <div class="intro-y box">
                <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Bulk Discount
                        <small>(Note: This discount affected all variant price)</small>
                    </h2>
                    <input id="bulk_discount" class="form-check-input" name="bulk_discount" type="checkbox" value="1"
                        @checked(!empty($product->discount))>
                    <label class="form-check-label" for="options">This product has bulk discount</label>
                </div>
                <div class="repeater {{ empty($product->discount) ? 'hidden' : '' }}" id="discount_form">
                    <div class="p-5">
                        <div class="preview">
                            <table class="table">
                                <thead>
                                    <th>Quantity</th>
                                    <th>Value</th>
                                    <th>Type</th>
                                    <th></th>
                                </thead>
                                <tbody data-repeater-list="discount">
                                    @forelse ($product->discount as $key => $discount)
                                    <tr data-repeater-item>
                                        <td>
                                            <div class="input-form">
                                                <input type="number" class="form-control form__input"
                                                    placeholder="Quantity" value="{{ $discount['quantity'] }}"
                                                    name="discount[{{ $key }}][quantity]" />
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-form">
                                                <input type="number" class="form-control form__input"
                                                    placeholder="Discount" value="{{ $discount['value'] ?? '' }}"
                                                    name="discount[{{ $key }}][value]">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-form">
                                                <select class="form-control form__input" name="discount[{{ $key }}][type]">
                                                    <option value="amount" @selected(isset($discount['type']) && $discount['type'] == 'amount')>Amount</option>
                                                    <option value="percentage" @selected(isset($discount['type']) && $discount['type'] == 'percentage')>Percentage</option>
                                                </select>
                                            </div>
                                        </td>
                                        <td>
                                            <button data-repeater-delete class="btn btn-outline-danger" type="button">
                                                <i data-lucide="trash" class="w-4 h-4"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr data-repeater-item>
                                        <td>
                                            <div class="input-form">
                                                <input type="number" class="form-control form__input"
                                                    placeholder="Quantity" name="quantity" />
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-form">
                                                <div class="input-group">
                                                    <input type="number" class="form-control form__input"
                                                        placeholder="Discount" name="discount_per">
                                                    <div class="input-group-text">%</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <button data-repeater-delete class="btn btn-outline-danger" type="button">
                                                <i data-lucide="trash" class="w-4 h-4"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div
                        class="flex flex-col sm:flex-row items-center p-5 border-t border-slate-200/60 dark:border-darkmode-400 gap-2">
                        <button data-repeater-create class="btn btn-outline-primary" type="button">
                            <i data-lucide="plus" class="w-4 h-4"></i> Add another option
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<div class="intro-y col-span-12 mt-5">
    <div class="intro-y box">
        <div class="flex flex-row p-5 border-b border-slate-200/60 dark:border-darkmode-400">
            <h2 class="font-medium text-base mr-auto">Options</h2>
            <input id="options" class="form-check-input" name="options" type="checkbox" value="1"
                @checked($product->options)>
            <label class="form-check-label" for="options">This product has options, like size or color</label>
            {{-- <div class="form-check col-span-12">
                <input id="options" class="form-check-input" name="options" type="checkbox" value="1"
                    @checked($product->options)>
                <label class="form-check-label" for="options">This product has options, like size or color</label>
            </div> --}}
        </div>
        <form class="repeater {{ $product->options ? '' : 'hidden' }}" action="javascript:;" id="repeaterForm">
            <div class="p-5">
                <div class="preview">
                    @csrf
                    @method('PUT')
                    <div data-repeater-list="options">
                        @if (count($product->productOptions))
                        @foreach ($product->productOptions as $option)
                        <div data-repeater-item class="mb-4">
                            <label for="name" class="col-form-label">Option name</label>
                            <div class="grid grid-cols-12 gap-2 mb-2">
                                <div class="form-control col-span-6">
                                    <div class="form-group">
                                        <input type="text" list="_options" class="form-control" name="name"
                                            value="{{ $option->name }}" required />
                                        <datalist id="_options">
                                            <option>Colors</option>
                                            <option>Size</option>
                                            <option>Materials</option>
                                            <option>Style</option>
                                        </datalist>
                                        <input type="hidden" class="form-control" value="{{ $option->id }}" name="id" />
                                    </div>
                                </div>
                                <div class="col-span-6">
                                    <div class="form-group">
                                        <button data-repeater-delete class="btn btn-outline-danger" type="button">
                                            <i data-lucide="trash" class="w-4 h-4"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <!-- innner repeater -->
                            <div class="inner-repeater ml-4 m-4">
                                <label for="name" class="col-form-label">Option values</label>
                                <div data-repeater-list="option_values">
                                    @forelse ($option->values as $value)
                                    <div data-repeater-item>
                                        <div class="grid grid-cols-12 gap-2 mb-2">
                                            <div class="col-span-6">
                                                <div class="form-group">
                                                    <input type="text" class="form-control" name="name"
                                                        value="{{ $value->name }}" required />
                                                    <input type="hidden" class="form-control" value="{{ $value->id }}"
                                                        name="id" />
                                                </div>
                                            </div>
                                            <div class="col-span-6">
                                                <div class="form-group">
                                                    <button data-repeater-delete class="btn btn-outline-danger"
                                                        type="button">
                                                        <i data-lucide="trash" class="w-4 h-4"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @empty
                                    <div data-repeater-item>
                                        <div class="grid grid-cols-12 gap-2 mb-2">
                                            <div class="col-span-6">
                                                <div class="form-group">
                                                    <input type="text" class="form-control" name="name" required />
                                                    <input type="hidden" class="form-control" name="id" />
                                                </div>
                                            </div>
                                            <div class="col-span-6">
                                                <div class="form-group">
                                                    <button data-repeater-delete class="btn btn-outline-danger"
                                                        type="button">
                                                        <i data-lucide="trash" class="w-4 h-4"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforelse
                                </div>
                                <button data-repeater-create type="button" class="btn btn-outline-primary">
                                    <i data-lucide="plus" class="w-4 h-4"></i> Option value
                                </button>
                            </div>
                        </div>
                        @endforeach
                        @else
                        <div data-repeater-list="options">
                            <div data-repeater-item class="mb-4">
                                <label for="name" class="col-form-label">Option name</label>
                                <div class="grid grid-cols-12 gap-2 mb-2">
                                    <div class="form-control col-span-6">
                                        <div class="form-group">
                                            <input type="text" list="_options" class="form-control" name="name"
                                                required />
                                            <datalist id="_options">
                                                <option>Colors</option>
                                                <option>Size</option>
                                                <option>Materials</option>
                                                <option>Style</option>
                                            </datalist>
                                            <input type="hidden" class="form-control" name="id" />
                                        </div>
                                    </div>
                                    <div class="col-span-6">
                                        <div class="form-group">
                                            <button data-repeater-delete class="btn btn-outline-danger" type="button">
                                                <i data-lucide="trash" class="w-4 h-4"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <!-- innner repeater -->
                                <div class="inner-repeater ml-4 m-4">
                                    <label for="name" class="col-form-label">Option values</label>
                                    <div data-repeater-list="option_values">
                                        <div data-repeater-item>
                                            <div class="grid grid-cols-12 gap-2 mb-2">
                                                <div class="col-span-6">
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" name="name" required />
                                                        <input type="hidden" class="form-control" name="id" />
                                                    </div>
                                                </div>
                                                <div class="col-span-6">
                                                    <div class="form-group">
                                                        <button data-repeater-delete class="btn btn-outline-danger"
                                                            type="button">
                                                            <i data-lucide="trash" class="w-4 h-4"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button data-repeater-create type="button" class="btn btn-outline-primary">
                                        <i data-lucide="plus" class="w-4 h-4"></i> Option value
                                    </button>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            <div
                class="flex flex-col sm:flex-row items-center p-5 border-t border-slate-200/60 dark:border-darkmode-400 gap-2">
                <button data-repeater-create class="btn btn-outline-primary" type="button">
                    <i data-lucide="plus" class="w-4 h-4"></i> Add another option
                </button>
                <button class="btn btn-primary" type="submit" onclick="updateProductOption({{ $product->id }})"
                    id="submitOption">
                    Save
                </button>
            </div>
        </form>
    </div>
</div>
<div class="intro-y col-span-12 mt-5 {{ $product->options ? '' : 'hidden' }}" id="variant">
    <div class="intro-y box">
        <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
            <h2 class="font-medium text-base mr-auto">Variants</h2>
        </div>
        <div class="p-5">
            <div class="preview">
                <form action="javascript:;" id="variantForm">
                    @csrf
                    <table class="table" id="variantTable">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Variant</th>
                                <th width="20%">Price</th>
                                <th width="20%">Quantity</th>
                                <th width="20%">SKU</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="variantTableBody">
                            @if (count($product->variants))
                            @foreach ($product->variants as $key => $variant)
                            <tr>
                                <td>
                                    <div class="flex items-center justify-center product-image productImg"
                                        id="productImg_{{ $key }}" data-input="thumbnail_{{ $key }}"
                                        data-preview="productImg_{{ $key }}" data-thumb="0"
                                        style="height: 5rem; width:5rem;border: 1px dashed #000; cursor: pointer;">
                                        @if (!empty($variant->photo))
                                        <img src="{{ strtok($variant->photo, ',') }}">
                                        @else
                                        <i data-lucide="image-plus"></i>
                                        @endif
                                    </div>
                                    <input type="hidden" name="variants[{{ $variant->id }}][photo]"
                                        value="{{ $variant->photo }}" id="thumbnail_{{ $key }}">
                                </td>
                                <td>
                                    <b>{{ $variant->name }}</b>
                                </td>
                                <td>
                                    <div class="input-group">
                                        <div class="input-group-text">{{ config('constant.currency') }}</div>
                                        <input type="number" class="form-control price"
                                            name="variants[{{ $variant->id }}][price]" data-id="{{ $variant->id }}"
                                            value="{{ $variant->price }}" />
                                    </div>
                                </td>
                                <td>
                                    <input type="number" class="form-control quantity"
                                        name="variants[{{ $variant->id }}][quantity]" data-id="{{ $variant->id }}"
                                        value="{{ $variant->quantity }}" />
                                </td>
                                <td>
                                    <input type="text" class="form-control sku" name="variants[{{ $variant->id }}][sku]"
                                        maxlength="100" data-id="{{ $variant->id }}" value="{{ $variant->sku }}" />
                                </td>
                                <td>
                                    <button class="btn btn-outline-danger"
                                        onclick="deleteVariant(this, {{ $variant->id }})"><i data-lucide="trash"
                                            class="w-4 h-4"></i></button>
                                </td>
                                <td>
                                    <button class="btn btn-outline-primary"
                                        onclick="editVariant({{ $variant->id }})"><i data-lucide="edit-2"
                                            class="w-4 h-4"></i></button>
                                </td>
                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="intro-y col-span-12 mt-5">
    <div class="intro-y box">
        <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
            <h2 class="font-medium text-base mr-auto">Search engine listing preview</h2>
            <button class="btn btn-link btn-link-success" onclick="toggleSEOSection()">Edit website
                SEO</button>
        </div>
        <div class="p-5">
            <div class="preview">
                <div class="row mb-5">
                    <div class="col yuRUbf">
                        <a href="javascript:;">
                            <h3 class="LC20lb MBeuO DKV0Md" id="seo_title">{{ $product->meta_title }}</h3>
                            <div class="TbwUpd NJjxre">
                                {{ config('app.url') }}/<cite id="seo_slug">{{ $product->slug }}</cite>
                            </div>
                        </a>
                        <div class="IsZvec" id="seo_description">
                            {!! html_entity_decode($product->meta_description) !!}
                        </div>
                    </div>
                </div>
                <hr>
                <div class="grid grid-cols-12 gap-2 mt-5 hidden" id="seo_section">
                    <div class="input-form mb-4 col-span-12">
                        <label for="meta_title">Page title</label>
                        <input type="text" class="form-control" id="meta_title" value="{{ $product->meta_title }}"
                            name="meta_title" />
                        <small><span id="title_count">{{ strlen($product->meta_title) }}</span> of 70 charactors
                            used</small>
                    </div>
                    <div class="input-form mb-4 col-span-12">
                        <label for="url">URL</label>
                        <input type="text" class="form-control" id="slug" value="{{ $product->slug }}" name="url" />
                    </div>
                    <div class="input-form mb-4 col-span-12">
                        <label for="url">Description</label>
                        <textarea name="meta_description" style="resize:none" class="form-control" id="meta_description"
                            cols="30" rows="5">{{ strip_tags($product->meta_description) }}</textarea>
                        <small><span id="description_count">{{ strlen($product->meta_description) }}</span> of 320
                            charactors used</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="intro-y col-span-12 mt-5">
    <div class="intro-y box p-5">
        <button type="submit" id="btn-submit" class="btn btn-primary w-24">Update</button>
        <a href="{{ route('products.index') }}" class="btn btn-outline-secondary w-24 mr-1">Back</a>
    </div>
</div>
@include('backend.products.edit_variant_modal')
@endsection

@section('script')
<script src="{{ mix('dist/backend/js/ckeditor-classic.js') }}"></script>
<script src="{{ asset(mix('vendors/jquery/jquery.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/repeater/jquery.repeater.min.js')) }}"></script>
<script src="{{ asset(mix('js/backend/pages/products/edit.js')) }}"></script>
<script src="{{ asset(mix('js/backend/pages/products/comman.js')) }}"></script>
<script src="{{ asset(mix('js/backend/pages/file-manager/file-manager.js')) }}"></script>
<script src="{{ asset(mix('js/backend/pages/file-manager/others-file-manager.js')) }}"></script>
<script src="{{ asset('vendor/laravel-filemanager/js/dropzone.min.js') }}"></script>
<script src="{{ asset('vendor/laravel-filemanager/js/stand-alone-button.js') }}"></script>
<script>
    const product_id = '{{ $product->id }}';
        var category_id = '{{ $product->categories[0]->id ?? '' }}';
        const update_products_route = '{{ route('products.update', $product->id) }}';
        const updateProductVariantRoute = '{{ route('update.product.variant') }}';
        const getTagsRoute = '{{ route('tags.list') }}'

        function updateProductOptionRoute(product_id) {
            let url = '{{ route('update.product.option', ':product_id') }}';
            return url.replace(':product_id', product_id);
        }

        function getAttributesRoute(id) {
            let url = '{{ route('product.attribute', ':id') }}';
            return url.replace(':id', id);
        }

        function editVariantRoute(id) {
            let url = '{{ route('variant.edit', ':id') }}';
            return url.replace(':id', id);
        }

        function updateVariantRoute(id) {
            let url = '{{ route('variant.update', ':id') }}';
            return url.replace(':id', id);
        }

        function destroyVariantRoute(id) {
            let url = '{{ route('variant.destroy', ':id') }}';
            return url.replace(':id', id);
        }

        lfm('lfm', 'image');

        fetchAttributesGroup('#specification-accordion-1', category_id, { product_id } );
</script>
@endsection