@extends('_partials.master')
@section('page_title', 'Edit Product')
@section('page_heading', 'Edit Product')

@section('page_styles')
<!--  -->
@endsection

@section('content')

<section>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="content-body">
                    <div class="product-detail">
                        <div class="card">
                            <div class="card-body">
                                <div class="card-content">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h4 class="form-section">{{$product->name}}</h4>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="projectinput1">Language Selection :</label>
                                                <select class="form-control" name="language_selector">
                                                    <option value="default">Default</option>
                                                    <option value="french">French</option>
                                                    <option value="english">English</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-content">
                                    <div class="card-body">
                                        <ul class="product-tabs nav nav-tabs nav-underline no-hover-bg">
                                            <li class="nav-item">
                                                <a aria-controls="product-div" aria-expanded="true" class="nav-link active" data-toggle="tab" href="#product-div" id="product-tab">
                                                    Product Details
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a aria-controls="tags-div" aria-expanded="false" class="nav-link" data-toggle="tab" href="#tags-div" id="tags-tab">
                                                    Tags
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a aria-controls="variants-div" aria-expanded="false" class="nav-link" data-toggle="tab" href="#variants-div" id="variants-tab">
                                                    Variants
                                                </a>
                                            </li>
                                        </ul>
                                        <div class="product-content tab-content px-1 pt-1">
                                            <div aria-expanded="true" aria-labelledby="product-div" class="tab-pane active" id="product-div" role="tabpanel">
                                                <form method="post" action="{{ route('product.updateProductInfo', $product->id) }}" class="form" novalidate="" data-parsley-validate="" autocomplete="off">
                                                    @csrf
                                                    <div class="form-body">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="projectinput1">Product Name *</label>
                                                                    <input type="text" class="form-control" value="{{$product->name}}" placeholder="Product Name" name="product_name" required>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="projectinput2">Description</label>
                                                                    <textarea rows="5" class="form-control" name="description" placeholder="Description">{{$product->description}}</textarea>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="projectinput2">Blurb Description</label>
                                                                    <textarea rows="5" class="form-control" name="blurb_description" placeholder="Blurb Description">{{$product->blurb_description}}</textarea>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="projectinput2">Specification Description</label>
                                                                    <textarea rows="5" class="form-control" name="spec_description" placeholder="Specification Description">{{$product->spec_description}}</textarea>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="projectinput2">Available From</label>
                                                                    <input type="datetime-local" name="available_from" class="form-control" value="{{str_replace(' ', 'T', $product->available_from)}}">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="projectinput2">Available To</label>
                                                                    <input type="datetime-local" name="available_to" class="form-control" value="{{str_replace(' ', 'T', $product->available_to)}}">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="projectinput1">SKU Prefix *</label>
                                                                    <input type="text" required class="form-control" value="{{$product->sku_prefix}}" placeholder="SKU Prefix" name="sku_prefix">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <fieldset class="checkbox" style=" margin-top: 40px;">
                                                                        <label>
                                                                            <input type="checkbox" name="isPriceOnRequest" {{ $product->isPriceOnRequest == 1 ? 'checked' : '' }}>
                                                                            Enable Price On Request
                                                                        </label>
                                                                    </fieldset>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="projectinput1">Product Group *</label>
                                                                    <select id="projectinput6" name="product_group_id" class="form-control" required>
                                                                        @foreach($productGroups as $productGroup)
                                                                        <option value="{{$productGroup->id}}" {{ $product->product_group_id == $productGroup->id ? 'selected' : '' }}>
                                                                            {{$productGroup->full_name}}
                                                                        </option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="projectinput1">Product Type *</label>
                                                                    <select id="projectinput6" name="product_type_id" class="form-control" required>
                                                                        @foreach($productTypes as $productType)
                                                                        <option value="{{$productType->id}}" {{ $product->product_type_id == $productType->id ? 'selected' : '' }}>
                                                                            {{$productType->full_name}}
                                                                        </option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="projectinput1">Vendor *</label>
                                                                    <select id="projectinput6" name="vendor" class="form-control" required>
                                                                        @foreach($vendors as $vendor)
                                                                        <option value="{{$vendor->id}}" {{ $product->vendor_id == $vendor->id ? 'selected' : '' }}>
                                                                            {{$vendor->name}}
                                                                        </option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="projectinput1">Sync To Store</label>
                                                                    <br />
                                                                    <fieldset class="checkbox">
                                                                        <label>
                                                                            <input type="checkbox" id="store" name="sync_store" value="defaultStore">
                                                                            Default Store
                                                                        </label>
                                                                    </fieldset>
                                                                    <fieldset class="checkbox">
                                                                        <label>
                                                                            <input type="checkbox" id="store" name="sync_store" value="frStore">
                                                                            French Store
                                                                        </label>
                                                                    </fieldset>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <input type="hidden" name="current_tab" value="#product-div" />
                                                        <div class="text-right center">
                                                            <button type="submit" class="btn btn-info mr-1">
                                                                <i class="la la-check-square-o"></i> Update
                                                            </button>
                                                        </div>

                                                    </div>
                                                </form>
                                            </div>

                                            <div aria-labelledby="tags-div" class="tab-pane" id="tags-div">
                                                <h2 class="my-1">
                                                    Tags
                                                </h2>
                                                <form method="post" action="{{ route('product.createTag', $product->id) }}" class="form" novalidate="" data-parsley-validate="" autocomplete="off">
                                                    @csrf
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <input type="text" required class="form-control" value="" placeholder="Add new record" name="new_tag">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <button type="submit" class="btn btn-info mr-1">Add</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <input type="hidden" name="current_tab" value="#product-div" />
                                                </form>
                                                <ul class="tags_list">
                                                    @foreach($productTags as $productTag)
                                                    <li>{{$productTag->name}}<a class="removeTag" data-id="{{$productTag->tag_id}}" href="#"><i class="la la-close"></i></a></li>
                                                    @endforeach
                                                </ul>
                                            </div>

                                            <div aria-labelledby="variants-div" class="tab-pane" id="variants-div">

                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="card">
                                                            <div class="card-header">
                                                                <div class="heading-elements">
                                                                    <a href="javascript:void(0);" id="create-variant-btn" class="btn btn-info btn-sm">
                                                                        <i class="la la-plus"></i> Create New Variant
                                                                    </a>
                                                                </div>
                                                                <div class="row" style="margin-top: 50px;">
                                                                    <div class="col-md-6">
                                                                        <fieldset class="checkbox">
                                                                            <label>
                                                                                <input type="checkbox" name="isGlobalStock" {{ $product->isGlobalStock == 1 ? 'checked' : '' }}> Enable Global Stock Counter
                                                                            </label>
                                                                        </fieldset>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <input type="number" class="form-control" placeholder="Global Stock Count" name="global_stock_count" value="{{$product->global_stock_count}}" {{ $product->isGlobalStock ? '' : 'disabled' }} required="" onkeypress="return event.keyCode === 8 || event.charCode >= 48 && event.charCode <= 57">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="card-content collapse show" id="attribute-div" style="display: none;">
                                                                <div class="card-body">
                                                                    <div class="form-body">
                                                                        <div class="row">
                                                                            <div class="col-md-6">
                                                                                <h5>Select Attribute</h5>
                                                                                <select class="form-control select2" name="attribute" id="attribute">
                                                                                    <option value="">-- Select Attribute Value --</option>
                                                                                    @foreach($attributes as $attribute)
                                                                                    <option value="{{$attribute->id}}">{{$attribute->name}}</li>
                                                                                        @endforeach
                                                                                </select>
                                                                            </div>
                                                                            <div class="col-md-6">
                                                                                <h5>Select Attribute Value</h5>
                                                                                <select class="form-control select2" name="attribute_value" id="attribute_value" disabled>
                                                                                    <!-- Append Here -->
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="nav-vertical">
                                                    <ul id="sortable" class="nav nav-tabs nav-left nav-border-left nav-tabs-material">
                                                        @foreach($productVariants as $key => $productVariant)
                                                        <li data-id="{{ $productVariant->id}}" class="nav-item"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                                                            <a class="nav-link waves-effect waves-dark @if ($key === 0) active @endif" data-toggle="tab" aria-controls="tabVerticalLeft1{{$key}}" href="#tabVerticalLeft{{$key}}" aria-expanded="true">
                                                                @if ($productVariant->is_visible === 1)
                                                                <span class="mr-1 badge badge-warning float-right">On</span>
                                                                @endif
                                                                {{$productVariant->sku}}
                                                            </a>
                                                        </li>
                                                        @endforeach

                                                        <div class="nav-tabs-indicator" style="left: 0px; right: -1px;"></div>
                                                    </ul>

                                                    <div class="tab-content px-1">

                                                        @foreach($productVariants as $key => $productVariant)
                                                        <div role="tabpanel" class="tab-pane @if ($key === 0) active @endif" id="tabVerticalLeft{{$key}}" aria-expanded="true" aria-labelledby="baseVerticalLeft1-tab1">
                                                            <form class="show-loader-on-submit" method="post" action="{{ route('product.updateVariant', $productVariant->id) }}" class="form" novalidate="" data-parsley-validate="" autocomplete="off">
                                                                @csrf
                                                                <div class="form-body">

                                                                    <div class="row">
                                                                        <div class="col-md-6">
                                                                            <div class="form-group">
                                                                                <label for="projectinput1">SKU</label>
                                                                                <input type="text" class="form-control" placeholder="SKU" name="sku" value="{{ $productVariant->sku }}" required readonly="">
                                                                            </div>
                                                                            <fieldset class="checkbox">
                                                                                <label>
                                                                                    <input type="checkbox" name="is_visible" {{ $productVariant->is_visible == 1 ? 'checked' : '' }}> Is Visible
                                                                                </label>
                                                                            </fieldset>
                                                                        </div>
                                                                        <div class="col-md-6">
                                                                            <div class="form-group">
                                                                                <label for="projectinput1">Stock</label>
                                                                                <input type="number" class="form-control stock-field" placeholder="Stock" name="stock" value="{{ $productVariant->stock_is_unlimited ? '' : $productVariant->stock }}" {{ ($productVariant->stock_is_unlimited || $product->isGlobalStock) ? 'readonly' : '' }}>
                                                                                <input type="hidden" name="global_stock_count_variant" value="{{$product->global_stock_count}}">
                                                                            </div>
                                                                            <fieldset class="checkbox">
                                                                                <label>
                                                                                    <input type="checkbox" class="unlimited-stock-field" name="stock_is_unlimited" {{ ($product->isGlobalStock) ? 'disabled' : '' }} {{ ($productVariant->stock_is_unlimited) ? 'checked' : '' }}> Has Unlimited Stock
                                                                                </label>
                                                                            </fieldset>
                                                                        </div>
                                                                        <div class="col-md-6">
                                                                            <div class="form-group">
                                                                                <label for="projectinput1">Discount Percent</label>
                                                                                <input type="number" class="form-control" placeholder="Discount Percent" name="discount_percent" value="{{ $productVariant->discount_percent }}">
                                                                            </div>
                                                                            <div class="form-group">
                                                                                <label for="projectinput1">Weight [lbs]</label>
                                                                                <input type="number" step="any" class="form-control" placeholder="Weight" name="weight" value="{{ $productVariant->weight ? $productVariant->weight : 0 }}">
                                                                            </div>
                                                                        </div>
                                                                        <div style="margin-top: 10px;" class="col-md-12">
                                                                            <h3>Price Details</h3>
                                                                        </div>
                                                                        <div class="col-md-12">
                                                                            <table class="table currency-pricing">
                                                                                <thead>
                                                                                    <tr>
                                                                                        <th>Currency</th>
                                                                                        <th>Original Net Price</th>
                                                                                        <th>Net Price</th>
                                                                                    </tr>
                                                                                </thead>

                                                                                <tbody>
                                                                                    <tr>
                                                                                        <th scope="row">USD</th>
                                                                                        <td>
                                                                                            <fieldset class="form-group">
                                                                                                <input type="number" class="form-control" step="1" min="0" onKeyPress="if(this.value.length==8) return false;" name="original_net_price_USD" value="{{ isset($variantPrices[$productVariant->id]['USD']) ? $variantPrices[$productVariant->id]['USD']['original_net_price_amount'] : '0' }}" required>
                                                                                            </fieldset>
                                                                                        </td>
                                                                                        <td>
                                                                                            <fieldset class="form-group">
                                                                                                <input type="number" class="form-control" step="1" min="1" onKeyPress="if(this.value.length==8) return false;" name="net_price_USD" value="{{ isset($variantPrices[$productVariant->id]['USD']) ? $variantPrices[$productVariant->id]['USD']['net_price_amount'] : '' }}" required>
                                                                                            </fieldset>
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <th scope="row">EUR</th>
                                                                                        <td>
                                                                                            <fieldset class="form-group">
                                                                                                <input type="number" class="form-control" step="1" min="0" onKeyPress="if(this.value.length==8) return false;" name="original_net_price_EUR" value="{{ isset($variantPrices[$productVariant->id]['EUR']) ? $variantPrices[$productVariant->id]['EUR']['original_net_price_amount'] : '0' }}">
                                                                                            </fieldset>
                                                                                        </td>
                                                                                        <td>
                                                                                            <fieldset class="form-group">
                                                                                                <input type="number" class="form-control" step="1" min="0" onKeyPress="if(this.value.length==8) return false;" name="net_price_EUR" value="{{ isset($variantPrices[$productVariant->id]['EUR']) ? $variantPrices[$productVariant->id]['EUR']['net_price_amount'] : '' }}">
                                                                                            </fieldset>
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <th scope="row">GBP</th>
                                                                                        <td>
                                                                                            <fieldset class="form-group">
                                                                                                <input type="number" class="form-control" step="1" min="0" onKeyPress="if(this.value.length==8) return false;" name="original_net_price_GBP" value="{{ isset($variantPrices[$productVariant->id]['GBP']) ? $variantPrices[$productVariant->id]['GBP']['original_net_price_amount'] : '0' }}">
                                                                                            </fieldset>
                                                                                        </td>
                                                                                        <td>
                                                                                            <fieldset class="form-group">
                                                                                                <input type="number" class="form-control" step="1" min="0" onKeyPress="if(this.value.length==8) return false;" name="net_price_GBP" value="{{ isset($variantPrices[$productVariant->id]['GBP']) ? $variantPrices[$productVariant->id]['GBP']['net_price_amount'] : '' }}">
                                                                                            </fieldset>
                                                                                        </td>
                                                                                    </tr>
                                                                                </tbody>
                                                                            </table>
                                                                        </div>
                                                                    </div>
                                                                    <input type="hidden" name="isGlobalStockVariant" value="{{$product->isGlobalStock}}">
                                                                    <input type="hidden" name="current_tab" value="#product-div" />
                                                                    <div class="form-actions text-right">
                                                                        <button type="button" data-prod-id="{{$product->id}}" data-id="{{ $productVariant->id }}" class="detach_variant btn btn-warning btn-sm waves-effect waves-light">
                                                                            Detach Variant
                                                                        </button>
                                                                        <button style="margin-left: 30px;" type="submit" class="btn btn-success btn-sm waves-effect waves-light">
                                                                            Update Variant
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal -->
<div class="modal fade text-left" id="create-variant-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalLabel">Create Variant</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form method="post" id="create_variant_form" action="{{ route('product.storeVariant', $product->id) }}" class="form show-loader-on-submit" novalidate="" data-parsley-validate="" autocomplete="off">
                @csrf

                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">
                                        <span id="attr_name"></span> - <span id="attr_value"></span>
                                    </h4>
                                </div>
                                <div class="card-content collapse show">
                                    <div class="card-body">

                                        <div class="form-body">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="projectinput1">SKU</label>
                                                        <input type="text" class="form-control" placeholder="SKU" name="new_sku" required>
                                                    </div>

                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="projectinput1">Stock</label>
                                                        <input type="number" value="{{ $product->global_stock_count ? $product->global_stock_count : 0 }}" {{ $product->global_stock_count ? 'readonly' : '' }} class="form-control stock-field" placeholder="Stock" name="new_stock">
                                                    </div>
                                                    <fieldset class="checkbox">
                                                        <label>
                                                            <input type="checkbox" {{ $product->isGlobalStock ? 'disabled' : '' }} class="unlimited-stock-field" name="new_stock_is_unlimited"> Has Unlimited Stock
                                                        </label>
                                                    </fieldset>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="projectinput1">Discount Percent</label>
                                                        <input type="number" value="0" class="form-control" placeholder="Discount Percent" name="new_discount_percent">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="projectinput1">Weight [lbs]</label>
                                                        <input type="number" step="any" value="0" class="form-control" placeholder="Weight" name="new_weight">
                                                    </div>
                                                    <fieldset class="checkbox">
                                                        <label>
                                                            <input type="checkbox" name="new_is_visible"> Is Visible
                                                        </label>
                                                    </fieldset>
                                                </div>
                                                <div style="margin-top: 10px;" class="col-md-12">
                                                    <h3>Price Details</h3>
                                                </div>
                                                <div class="col-md-12">
                                                    <table class="table">
                                                        <thead>
                                                            <tr>
                                                                <th>Currency</th>
                                                                <th>Original Net Price</th>
                                                                <th>Net Price</th>
                                                            </tr>
                                                        </thead>

                                                        <tbody>
                                                            <tr>
                                                                <th scope="row">USD</th>
                                                                <td>
                                                                    <fieldset class="form-group">
                                                                        <input type="number" class="form-control" name="new_original_net_price_USD" step="1" value="0" required>
                                                                    </fieldset>
                                                                </td>
                                                                <td>
                                                                    <fieldset class="form-group">
                                                                        <input type="number" class="form-control" name="new_net_price_USD" step="1" min="1" required>
                                                                    </fieldset>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <th scope="row">EUR</th>
                                                                <td>
                                                                    <fieldset class="form-group">
                                                                        <input type="number" class="form-control" name="new_original_net_price_EUR" step="1" value="0">
                                                                    </fieldset>
                                                                </td>
                                                                <td>
                                                                    <fieldset class="form-group">
                                                                        <input type="number" class="form-control" name="new_net_price_EUR" step="1">
                                                                    </fieldset>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <th scope="row">GBP</th>
                                                                <td>
                                                                    <fieldset class="form-group">
                                                                        <input type="number" class="form-control" name="new_original_net_price_GBP" step="1" value="0">
                                                                    </fieldset>
                                                                </td>
                                                                <td>
                                                                    <fieldset class="form-group">
                                                                        <input type="number" class="form-control" name="new_net_price_GBP" step="1">
                                                                    </fieldset>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <input type="hidden" name="current_tab" value="#product-div" />
                                        <input type="hidden" name="new_attribute_id" id="new_attribute_id">
                                        <input type="hidden" name="new_attribute_value_id" id="new_attribute_value_id">
                                        <input type="hidden" name="sku_slug" id="sku_slug">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary waves-effect waves-light">
                        <i class="la la-check-square-o"></i> Create
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Loader -->
<div class="full-page-loader">
    <div class="loader-wrapper">
        <div class="loader-container">
            <div class="chasing-dots loader-brown">
                <div class="child dot1"></div>
                <div class="child dot2"></div>
            </div>
        </div>
    </div>
</div>

@stop

@push('page_scripts')

<script type="text/javascript">
    $(document).ready(function() {

        @if(\Session::has('current_tab'))
        //Stay on tabs
        var url = window.location.href;
        var id = '{!! \Session::get('
        current_tab ') !!}';
        if (id) {
            $('.product-tabs').find('.nav-link').each(function() {
                $(this).removeClass('active');
            })

            $('.nav-link[href="' + id + '"]').trigger('click');
            $('input[name="current_tab"]').each(function() {
                $(this).val(id);
            });
        }
        @endif


        $('.nav-link').click(function() {
            $('input[name="current_tab"]').val($(this).attr('href'));
        });

        $('#create-variant-btn').click(function() {
            var isChecked=$('input[name="isGlobalStock"]').prop('checked');
            var globalStockCountValue = jQuery('input[name="global_stock_count"]').val().length;
            if( isChecked == true)
            {
                if(globalStockCountValue==0)
                {
                    alert('Global Stock count value should not be empty');
                }
                else
                {
                    alert('! Enable Global Stock is checked hence, update the existing variant before proceeding with creating new variant.');
                    $('#attribute-div').toggle(); 
                }
            }
            else
            {
                $('#attribute-div').toggle(); 
            }
            
        });

        $("#attribute").change(function() {

            $("#attribute_value").empty().append('<option value="">-- Select Attribute Value --</option>');
            $("#attribute_value").prop("disabled", true);

            if ($(this).val() == "") return;

            $.ajax({
                url: "{{ url('product/fetchAttributeValues') }}",
                type: "POST",
                data: {
                    '_token': '{{ csrf_token() }}',
                    'attribute_id': $(this).val()
                },
                success: function(response) {
                    if (response.status) {

                        var options = [];
                        options.push('<option value="">-- Select an option --</option>');
                        $.each(response.attributeValues, function(key, value) {
                            options.push('<option value="' + value.id + '">' + value.value_string + '</option>');
                        });
                        $("#attribute_value").html(options.join(''));

                        setTimeout(function() {
                            $("#attribute_value").prop("disabled", false);
                        }, 500);
                    }
                },
                error: function(data) {
                    // console.log("error");
                }
            });

        });
        $('.show-loader-on-submit').submit(function() {
            var globalStockValue = jQuery('input[name="isGlobalStock"]:checked').length;
            if (globalStockValue == 1) {
                var globalStockCountValue = jQuery('input[name="global_stock_count"]').val();
                if ((globalStockCountValue == null) || (globalStockCountValue == 0)) {
                    jQuery('input[name="global_stock_count"]').addClass('parsley-error');
                    jQuery('input[name="global_stock_count"]').after('<ul class="parsley-errors-list filled" id="parsley-id-stock" aria-hidden="false"><li class="parsley-required">This value is required.</li></ul>')
                    return false;
                } else {
                    jQuery('input[name="global_stock_count"]').removeClass('parsley-error');
                    jQuery('#parsley-id-stock').remove();
                }
            }
            $('.full-page-loader').addClass('active');
        });

       
       
        $("input[name='isGlobalStock']").change(function() {           
            if ($(this).is(":checked")) {
                var confirmAction = confirm("Do you want to proceed with 'Enable Global Stock' option?, \n If Yes, please check the product is created/available in Magento.");
                if (confirmAction === false) {
                    $("input[name='isGlobalStock']").prop('checked',false);
                    return false;
                    }
              $('input[name="isGlobalStockVariant"]').val('1');
                
                $('input[name="new_stock"]').attr("disabled", true);
                $('input[name="new_stock_is_unlimited"]').attr("disabled", true);
                $('input[name="stock"]').each(function() {
                    $(this).attr("disabled", true);
                    $(this).attr("readonly", true);
                });
                $('input[name="stock_is_unlimited"]').each(function() {
                    $(this).attr("disabled", true);
                });
                $('input[name="global_stock_count"]').attr("disabled", false);
            } else {
                $('input[name="isGlobalStockVariant"]').val('0');
                $('input[name="new_stock"]').attr("disabled", false);
                $('input[name="new_stock_is_unlimited"]').attr("disabled", false);
                $('input[name="stock"]').each(function() {
                    $(this).attr("disabled", false);
                    $(this).attr("readonly", false);
                });
                $('input[name="stock_is_unlimited"]').each(function() {
                    $(this).attr("disabled", false);
                });
                $('input[name="global_stock_count"]').attr("disabled", true);
            }
        });
        $("input[name='global_stock_count']").change(function() {
            var thisVal = $(this).val();
            $('input[name="global_stock_count_variant"]').each(function() {
                $(this).val(thisVal);
            });
        });

        $("#attribute_value").change(function() {

            if ($(this).val() == "") return;

            // clear modal form
            $("#create_variant_form").trigger('reset');

            var attr_id = $("#attribute").val();
            var attr_val_id = $(this).val();

            $.ajax({
                url: "{{ url('product/fetchAttributeSlug') }}",
                type: "POST",
                data: {
                    '_token': '{{ csrf_token() }}',
                    'id': attr_val_id
                },
                success: function(response) {


                    $("#new_attribute_id").val(attr_id);
                    $("#new_attribute_value_id").val(attr_val_id);
                    $("#attr_name").text($("#attribute option:selected").text());
                    $("#attr_value").text($("#attribute_value option:selected").text());


                    var sku_prefix = $("input[name=sku_prefix]").val();
                    if (response[0]['sku_slug'] === null) {
                        response[0]['sku_slug'] = '-' + attr_id + '-' + attr_val_id;
                    } else {
                        response[0]['sku_slug'] = '-' + response[0]['sku_slug'];
                    }

                    $("input[name=new_sku]").val(sku_prefix + response[0]['sku_slug']);

                    $("#create-variant-modal").modal('show');
                },
                error: function(data) {
                    console.log("error");
                }
            });

        });

        // Has Unlimited Stock checkbox toggle
        $(".unlimited-stock-field").click(function() {
            if (this.checked) {
                $(this).parents('.form-body').find('.stock-field').val("");
                $(this).parents('.form-body').find('.stock-field').prop('readonly', true);
            } else {
                $(this).parents('.form-body').find('.stock-field').prop('readonly', false);
            }
        });

        // Multilanguage Selection Change
        $('select[name="language_selector"]').on('change', function() {
            if ($(this).val() != 'default') {
                $('input[name="sku_prefix"]').prop('disabled', true);
                $('input[name="available_from"]').prop('disabled', true);
                $('input[name="available_to"]').prop('disabled', true);
                $('input[name="new_tag"]').prop('disabled', true);
                $('input[name="isPriceOnRequest"]').prop('disabled', true);
                $('select[name="product_group_id"]').prop('disabled', true);
                $('select[name="product_type_id"]').prop('disabled', true);
            } else {
                $('input[name="sku_prefix"]').prop('disabled', false);
                $('input[name="available_from"]').prop('disabled', false);
                $('input[name="available_to"]').prop('disabled', false);
                $('input[name="new_tag"]').prop('disabled', false);
                $('input[name="isPriceOnRequest"]').prop('disabled', false);
                $('select[name="product_group_id"]').prop('disabled', false);
                $('select[name="product_type_id"]').prop('disabled', false);
            }
        });

        // Remove tags

        $('body').on('click', '.removeTag', function(e) {
            e.preventDefault();
            swal({
                title: 'Are you sure?',
                text: "You won't be able to revert this operation.",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3c9fce',
                cancelButtonColor: '#e86256',
                confirmButtonText: 'Yes, delete it',
                cancelButtonText: 'No, cancel'
            }).then((result) => {
                if (result.value) {

                    var $this = $(this);
                    $.ajax({
                        url: "{{ route('product.removeTag', $product->id) }}",
                        type: "POST",
                        data: {
                            '_token': '{{ csrf_token() }}',
                            'tag_id': $(this).attr('data-id')
                        },
                        success: function(response) {
                            if (response.status) {
                                $this.parent().fadeOut("normal", function() {
                                    $(this).remove();
                                });

                                swal({
                                    // position: 'top-end',
                                    type: 'success',
                                    title: response.message,
                                    showConfirmButton: true,
                                    timer: 2500
                                })
                            }
                        },
                        error: function(data) {
                            // console.log("error");
                        }
                    });
                }
            })
        });

        $('.detach_variant').on('click', function() {
            $('.full-page-loader').addClass('active');
            var $this = $(this);
            $.ajax({
                url: "{{ route('product.detachVariant') }}",
                type: "POST",
                data: {
                    '_token': '{{ csrf_token() }}',
                    'variation_id': $(this).attr('data-id'),
                    'prod_id': $(this).attr('data-prod-id'),
                },
                success: function(response) {
                    if (response.status) {

                        $('.full-page-loader').removeClass('active');
                        swal({
                            // position: 'top-end',
                            type: 'success',
                            title: response.message,
                            showConfirmButton: true
                        });

                        setTimeout(function() {
                            location.reload();
                        }, 5000);
                    }
                },
                error: function(data) {
                    // console.log("error");
                }
            });
            return false;
        });

        $('#create_variant_form').submit(function(){           
            var isChecked=$('input[name="isGlobalStock"]').prop('checked');
            if(($('#variants-div').find('#sortable li').length == 0) && (isChecked == '1')){
            var confirmAction = alert("'Enable Global Stock' is enabled !\nThe product/variant will NOT be created in BackOffice, if the product does not exists in the Magento.");
                if (confirmAction === false) {
                        return false;
                    }
            }
        });


        
    });
</script>
<script>
    $(function() {
        $("#sortable").sortable({
            out: function(event, ui) {
                var variations = [];
                $('#sortable').find('li.nav-item').each(function() {
                    if ($(this).attr('data-id') != null) {
                        variations.push($(this).attr('data-id'));
                    }
                });
                var $this = $(this);
                $('.full-page-loader').addClass('active');
                $.ajax({
                    url: "{{ route('product.sortVariant') }}",
                    type: "POST",
                    data: {
                        '_token': '{{ csrf_token() }}',
                        'variations': JSON.stringify(variations)
                    },
                    success: function(response) {
                        $('.full-page-loader').removeClass('active');
                        if (response.status) {
                            console.log(response.message);
                        }
                    },
                    error: function(data) {
                        // console.log("error");
                    }
                });
            }
        });
        $("#sortable").disableSelection();
    });
</script>

@endpush