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

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

@section('subcontent')
<form class="validate-form" id="product-form" enctype="multipart/form-data">
    <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">Add New 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" aria-describedby="input-form-2"
                                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">
                                    Category <span class="text-danger">*</span>
                                </label>
                                <select id="category" name="categories[]" class="form-control sm:mr-2 tom-select"
                                required data-pristine-required-message="Please select attribute group" multiple>
                                    @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $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 tom-select sm:mr-2"
                                    aria-label="Default select example">
                                    <option value="">Select</option>
                                    @foreach ($brands as $brand)
                                    <option value="{{ $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">
                            </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>
                            </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" id="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" id="description"></textarea>
                            <div id="error-description" class="form__input-error text-danger"></div>
                        </div>
                        
                    </div>
                </div>
                <!-- BEGIN: Form Layout -->
            </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">

                        </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"
                                class="w-full h-full top-0 left-0 absolute opacity-0">
                        </div>
                    </div>
                    <div id="error-photos" class="form__input-error text-danger mt-1"></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">
                            <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>
                            <input id="attachment" type="file" class="form-control form__input"
                                name="attachment" accept=".pdf">
                            <div id="error-attachment" class="form__input-error text-danger"></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="1" 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="1" 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="1" 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="" 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">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" 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">
                                </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" class="form-check-input" type="checkbox" value="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">
                                </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">
                                <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">
                                    Shipping weight<span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <input id="shipping_weight" type="number" class="form-control form__input"
                                        name="shipping_weight" required>
                                    <div class="input-group-text">KG</div>
                                </div>
                                <div id="error-shipping_weight" 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}}">{{$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">
                                <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">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" 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" 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" class="form-check-input" type="checkbox" value="1">
                                <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" class="form-check-input" type="checkbox" value="1">
                                <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)">
                                    <option value="">Select</option>
                                    @foreach ($attributeGroups as $attributeGroup)
                                    <option value="{{ $attributeGroup->id }}">
                                        {{ $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>

                                    </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"></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</h2>
                    <input id="bulk_discount" class="form-check-input" type="checkbox" value="1">
                    <label class="form-check-label" for="options">This product has bulk discount</label>
                </div>
                <div class="repeater 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">
                                    <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">
                                                <input type="number" class="form-control form__input"
                                                    placeholder="Discount" name="value">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-form">
                                                <select class="form-control form__input" name="type">
                                                    <option value="amount">Amount</option>
                                                    <option value="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>
                                </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 mt-2 items-center 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" type="checkbox" value="1">
            <label class="form-check-label" for="options">This product has options, like size or color</label>
        </div>
        <form class="repeater hidden" action="javascript:;" id="repeaterForm">
            <div class="p-5">
                <div class="preview">
                    @csrf
                    <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" 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" 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>
                </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" id="submitOption">
                    Save
                </button>
            </div>
        </form>
    </div>
</div>
<div class="intro-y col-span-12 mt-5 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>
                                <td></td>
                                <td>Variant</td>
                                <td width="20%">Price</td>
                                <td width="20%">Quantity</td>
                                <td width="20%">SKU</td>
                                <td></td>
                                <td></td>
                            </tr>
                        </thead>
                        <tbody id="variantTableBody">

                        </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"></h3>
                            <div class="TbwUpd NJjxre">
                                {{ config('app.url') }}/<cite id="seo_slug"></cite>
                            </div>
                        </a>
                        <div class="IsZvec" id="seo_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" name="meta_title" />
                        <small><span id="title_count"></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" 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"></textarea>
                        <small><span id="description_count"></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">Submit</button>
        <button type="reset" id="btn-clear" class="btn btn-outline-secondary w-24 mr-1">Reset</button>
    </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/create.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('vendor/laravel-filemanager/js/stand-alone-button.js') }}"></script>
<script>
    lfm('lfm', 'image');
        const store_products_route = '{{ route('products.store') }}'
        const createProductVariantRoute = '{{ route('create.product.variant') }}'
        const update_product_variant_route = '{{ route('update.product.variant') }}'
        const getTagsRoute = '{{ route('tags.list') }}'
        var category_id = ''

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

        function updateProductOptionRoute(id) {
            let url = '{{ route('update.product.option', ':id') }}';
            return url.replace(':id', 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);
        }

        function categoryShowRoute(id) {
            let url = '{{ route('category.show', ':id') }}';
            return url.replace(':id', id);
        }

        function editProductRoute(id) {
            let url = '{{ route('products.edit', ':id') }}';
            return url.replace(':id', id);
        }
</script>
@endsection