@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/vanillaSelectBox-master/vanillaSelectBox.css') }}">
@endsection

@section('content')

<form method="POST" action="{{ route("admin.products.store") }}" enctype="multipart/form-data">
@csrf
    <div class="card">
        <div class="card-header">
            {{ trans('global.create') }} {{ trans('cruds.product.title_singular') }}
        </div>

        <div class="card-body">
            <div class="form-group">
                <label class="required" for="product_name">{{ trans('cruds.product.fields.product_name') }}</label>
                <input class="form-control {{ $errors->has('product_name') ? 'is-invalid' : '' }}" type="text" name="product_name" id="product_name" value="{{ old('product_name') }}" required>
                @if($errors->has('product_name'))
                    <div class="invalid-feedback">
                        {{ $errors->first('product_name') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.product_name_helper') }}</span>
            </div>
            <div class="form-group">
                <label class="required" for="product_short_name">{{ trans('cruds.product.fields.product_short_name') }}</label>
                <input class="form-control {{ $errors->has('product_short_name') ? 'is-invalid' : '' }}" type="text" name="product_short_name" id="product_short_name" value="{{ old('product_short_name') }}" required>
                @if($errors->has('product_short_name'))
                    <div class="invalid-feedback">
                        {{ $errors->first('product_short_name') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.product_short_name_helper') }}</span>
            </div>
            <div class="form-group">
                <label class="required">{{ trans('cruds.product.fields.product_type') }}</label>
                <select class="form-control {{ $errors->has('product_type') ? 'is-invalid' : '' }}" name="product_type" id="product_type" required>
                    <option value disabled {{ old('product_type', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                    @foreach(App\Models\Product::PRODUCT_TYPE_SELECT as $key => $label)
                        <option value="{{ $key }}" {{ old('product_type') === (string) $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
                @if($errors->has('product_type'))
                    <div class="invalid-feedback">
                        {{ $errors->first('product_type') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.product_type_helper') }}</span>
            </div>
            <div class="form-group">
                <label class="required" for="product_code">{{ trans('cruds.product.fields.product_code') }}</label>
                <input class="form-control {{ $errors->has('product_code') ? 'is-invalid' : '' }}" type="text" name="product_code" id="product_code" value="{{ old('product_code') }}" required>
                @if($errors->has('product_code'))
                    <div class="invalid-feedback">
                        {{ $errors->first('product_code') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.product_code_helper') }}</span>
            </div>
            <div class="form-group row" id="unit-group" style="display: none;">
                <div class="col-md-6">
                    <label for="unit_name">{{ trans('cruds.product.fields.unit_name') }}</label>
                    <input class="form-control {{ $errors->has('unit_name') ? 'is-invalid' : '' }}" type="text" name="unit_name" id="unit_name" value="{{ old('unit_name') }}">
                    @if($errors->has('unit_name'))
                        <div class="invalid-feedback">
                            {{ $errors->first('unit_name') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.product.fields.unit_name_helper') }}</span>
                </div>
                <div class="col-md-6">
                    <label for="unit_quantity">{{ trans('cruds.product.fields.unit_quantity') }}</label>
                    <input class="form-control {{ $errors->has('unit_quantity') ? 'is-invalid' : '' }}" type="number" step=".01" name="unit_quantity" id="unit_quantity" value="{{ old('unit_quantity') }}">
                    @if($errors->has('unit_quantity'))
                        <div class="invalid-feedback">
                            {{ $errors->first('unit_quantity') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.product.fields.unit_quantity_helper') }}</span>
                </div>
            </div>
            <div class="form-group">
                <label for="vpc">{{ trans('cruds.product.fields.vpc') }}</label>
                <input class="form-control {{ $errors->has('vpc') ? 'is-invalid' : '' }}" type="text" name="vpc" id="vpc" value="{{ old('vpc') }}">
                @if($errors->has('vpc'))
                    <div class="invalid-feedback">
                        {{ $errors->first('vpc') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.vpc_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="hsn_code">{{ trans('cruds.product.fields.hsn_code') }}</label>
                <input class="form-control {{ $errors->has('hsn_code') ? 'is-invalid' : '' }}" type="text" name="hsn_code" id="hsn_code" value="{{ old('hsn_code') }}">
                @if($errors->has('hsn_code'))
                    <div class="invalid-feedback">
                        {{ $errors->first('hsn_code') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.hsn_code_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="category">{{ trans('cruds.product.fields.category') }}</label>
                <input class="form-control {{ $errors->has('category') ? 'is-invalid' : '' }}" type="number" name="category" id="category" value="{{ old('category') }}" step="1">
                @if($errors->has('category'))
                    <div class="invalid-feedback">
                        {{ $errors->first('category') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.category_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="description">{{ trans('cruds.product.fields.description') }}</label>
                <textarea class="form-control ckeditor {{ $errors->has('description') ? 'is-invalid' : '' }}" name="description" id="description">{!! old('description') !!}</textarea>
                @if($errors->has('description'))
                    <div class="invalid-feedback">
                        {{ $errors->first('description') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.description_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="picture">{{ trans('cruds.product.fields.picture') }}</label>
                <div class="needsclick dropzone {{ $errors->has('picture') ? 'is-invalid' : '' }}" id="picture-dropzone">
                </div>
                @if($errors->has('picture'))
                    <div class="invalid-feedback">
                        {{ $errors->first('picture') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.picture_helper') }}</span>
            </div>
            <div class="form-group">
                <label class="required" for="cost_price">{{ trans('cruds.product.fields.cost_price') }}</label>
                <input class="form-control {{ $errors->has('cost_price') ? 'is-invalid' : '' }}" type="number" name="cost_price" id="cost_price" value="{{ old('cost_price', 0) }}" step="0.01">
                @if($errors->has('cost_price'))
                    <div class="invalid-feedback">
                        {{ $errors->first('cost_price') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.cost_price_helper') }}</span>
            </div>
            <div class="form-group">
                <label class="required" for="sell_price">{{ trans('cruds.product.fields.sell_price') }}</label>
                <input class="form-control {{ $errors->has('sell_price') ? 'is-invalid' : '' }}" type="number" name="sell_price" id="sell_price" value="{{ old('sell_price', 0) }}" step="0.01">
                @if($errors->has('sell_price'))
                    <div class="invalid-feedback">
                        {{ $errors->first('sell_price') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.sell_price_helper') }}</span>
            </div>
            <div class="form-group">
                <label class="required" for="opening_balance">{{ trans('cruds.product.fields.opening_balance') }}</label>
                <input class="form-control {{ $errors->has('opening_balance') ? 'is-invalid' : '' }}" type="number" name="opening_balance" id="opening_balance" value="{{ old('opening_balance', 0) }}" step="1">
                @if($errors->has('opening_balance'))
                    <div class="invalid-feedback">
                        {{ $errors->first('opening_balance') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.opening_balance_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="type_2">{{ trans('cruds.product.fields.type_2') }}</label>
                <input class="form-control {{ $errors->has('type_2') ? 'is-invalid' : '' }}" type="text" name="type_2" id="type_2" value="{{ old('type_2') }}">
                @if($errors->has('type_2'))
                    <div class="invalid-feedback">
                        {{ $errors->first('type_2') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.type_2_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="minimum_order">{{ trans('cruds.product.fields.minimum_order') }}</label>
                <input class="form-control {{ $errors->has('minimum_order') ? 'is-invalid' : '' }}" type="number" name="minimum_order" id="minimum_order" value="{{ old('minimum_order') }}" step="1">
                @if($errors->has('minimum_order'))
                    <div class="invalid-feedback">
                        {{ $errors->first('minimum_order') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.minimum_order_helper') }}</span>
            </div>
            <div class="form-group">
                <label for="maximum_order">{{ trans('cruds.product.fields.maximum_order') }}</label>
                <input class="form-control {{ $errors->has('maximum_order') ? 'is-invalid' : '' }}" type="number" name="maximum_order" id="maximum_order" value="{{ old('maximum_order') }}" step="1">
                @if($errors->has('maximum_order'))
                    <div class="invalid-feedback">
                        {{ $errors->first('maximum_order') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.maximum_order_helper') }}</span>
            </div>
            <div class="form-group" id="form-group-maximum-package-qty" style="display: none;">
                <label class="required" for="maximum_package_qty">{{ trans('cruds.product.fields.maximum_package_qty') }}</label>
                <input class="form-control {{ $errors->has('maximum_package_qty') ? 'is-invalid' : '' }}" type="number" name="maximum_package_qty" id="maximum_package_qty" value="{{ old('maximum_package_qty', 1) }}" step="1">
                @if($errors->has('maximum_package_qty'))
                    <div class="invalid-feedback">
                        {{ $errors->first('maximum_package_qty') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.product.fields.maximum_package_qty_helper') }}</span>
            </div>
        </div>
    </div>

    <div class="card" id="product-package-bundle-card" style="display: none;">
        <div class="card-header">
            Product Package Bundle Details
        </div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>Product Name</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="product-package-bundle-table">
                    @if(old('product-package-bundle-table')!="")
                        <div id="countVar" data-count = "{{ count(old('product-package-bundle-table')) }}"></div>
                        @foreach(old('product-package-bundle-table') as $key => $value)
                            <tr data-id={{ ($key == 0) ? $key + 1 : $key }}>
                                <th scope="row">{{ ($key == 0) ? $key + 1 : $key }}</th>
                                <td>
                                    <select class="select2 form-control @error('product-package-bundle-table.'.$key.'.product') is-invalid @enderror" name="product-package-bundle-table[{{ $key }}][product]">
                                        @foreach ($products as $id => $product_name)
                                            <option value="{{ $id }}">{{ $product_name }}</option>
                                        @endforeach
                                    </select>
                                    @error('product-package-bundle-table.'.$key.'.product')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </td>
                                <td class="text-center">
                                    @if($key == 0)
                                        <button type="button" class="btn btn-success bundle-plus"> <i class="fa fa-plus"></i> </button>
                                    @else
                                        <button type="button" class="btn btn-success bundle-plus"> <i class="fa fa-plus"></i> </button>
                                        <button type="button" class="btn btn-danger bundle-minus"> <i class="fa fa-minus"></i> </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    @else
                    <div id="countVar" data-count="0"></div>
                    <tr data-id="1">
                        <th scope="row">1</th>
                        <td>
                            <select class="select2 form-control" name="product-package-bundle-table[1][product]">
                                @foreach ($products as $id => $product_name)
                                    <option value="{{ $id }}">{{ $product_name }}</option>
                                @endforeach
                            </select>
                            @error('product-package-bundle-table.1.product')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </td>
                        <td class="text-center">
                            <button type="button" class="btn btn-success bundle-plus"> <i class="fa fa-plus"></i> </button>
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>

    <div class="card" id="product-package-gift-card" style="display: none;">
        <div class="card-header">
            Product Package Gift Details
        </div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>Product Gift</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="product-package-gift-table">
                    @if(old('product-package-gift-table')!="")
                        <div id="countVar" data-count = "{{ count(old('product-package-gift-table')) }}"></div>
                        @foreach(old('product-package-gift-table') as $key => $value)
                            <tr data-id={{ ($key == 0) ? $key + 1 : $key }}>
                                <th scope="row">{{ ($key == 0) ? $key + 1 : $key }}</th>
                                <td>
                                    <select class="select2 form-control @error('product-package-gift-table.'.$key.'.gift') is-invalid @enderror" name="product-package-gift-table[{{ $key }}][gift]">
                                        @foreach ($products as $id => $product_name)
                                            <option value="{{ $id }}">{{ $product_name }}</option>
                                        @endforeach
                                    </select>
                                    @error('product-package-gift-table.'.$key.'.gift')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </td>
                                <td class="text-center">
                                    @if($key == 0)
                                        <button type="button" class="btn btn-success gift-plus"> <i class="fa fa-plus"></i> </button>
                                    @else
                                        <button type="button" class="btn btn-success gift-plus"> <i class="fa fa-plus"></i> </button>
                                        <button type="button" class="btn btn-danger gift-minus"> <i class="fa fa-minus"></i> </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    @else
                    <div id="countVar" data-count="0"></div>
                    <tr data-id="1">
                        <th scope="row">1</th>
                        <td>
                            <select class="select2 form-control" name="product-package-gift-table[1][gift]">
                                @foreach ($products as $id => $product_name)
                                    <option value="{{ $id }}">{{ $product_name }}</option>
                                @endforeach
                            </select>
                            @error('product-package-gift-table.1.gift')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </td>
                        <td class="text-center">
                            <button type="button" class="btn btn-success gift-plus"> <i class="fa fa-plus"></i> </button>
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            {{ trans('cruds.productStore.title_singular') }} Details
        </div>
        <div class="card-body">
            <div class="form-row mb-3">
                <div class="col-md-2">
                    <label for="product_stores_cost_price">{{ trans('cruds.productStore.fields.cost_price') }} (Default Cost Price)</label>
                    <input class="form-control {{ $errors->has('product_stores_cost_price') ? 'is-invalid' : '' }}" type="number" name="product_stores_cost_price" id="product_stores_cost_price" value="{{ old('product_stores_cost_price') }}" step="1">
                    @if($errors->has('product_stores_cost_price'))
                        <div class="invalid-feedback">
                            {{ $errors->first('product_stores_cost_price') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.productStore.fields.cost_price_helper') }}</span>
                </div>
                <div class="col-md-2">
                    <label for="product_stores_sell_price">{{ trans('cruds.productStore.fields.sell_price') }} (Default Sell Price)</label>
                    <input class="form-control {{ $errors->has('product_stores_sell_price') ? 'is-invalid' : '' }}" type="number" name="product_stores_sell_price" id="product_stores_sell_price" value="{{ old('product_stores_sell_price') }}" step="1">
                    @if($errors->has('product_stores_sell_price'))
                        <div class="invalid-feedback">
                            {{ $errors->first('product_stores_sell_price') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.productStore.fields.sell_price_helper') }}</span>
                </div>
                <div class="col-md-2">
                    <label for="product_stores_opening_balance">{{ trans('cruds.productStore.fields.opening_balance') }} (Default Opening Balance)</label>
                    <input class="form-control {{ $errors->has('product_stores_opening_balance') ? 'is-invalid' : '' }}" type="number" name="product_stores_opening_balance" id="product_stores_opening_balance" value="{{ old('product_stores_opening_balance') }}" step="1">
                    @if($errors->has('product_stores_opening_balance'))
                        <div class="invalid-feedback">
                            {{ $errors->first('product_stores_opening_balance') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.productStore.fields.opening_balance_helper') }}</span>
                </div>
                <div class="col-md-2">
                    <label for="product_stores_minimum_order">{{ trans('cruds.productStore.fields.minimum_order') }} (Default Minimum Order)</label>
                    <input class="form-control {{ $errors->has('product_stores_minimum_order') ? 'is-invalid' : '' }}" type="number" name="product_stores_minimum_order" id="product_stores_minimum_order" value="{{ old('product_stores_minimum_order') }}" step="1">
                    @if($errors->has('product_stores_minimum_order'))
                        <div class="invalid-feedback">
                            {{ $errors->first('product_stores_minimum_order') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.productStore.fields.minimum_order_helper') }}</span>
                </div>
                <div class="col-md-2">
                    <label for="product_stores_maximum_order">{{ trans('cruds.productStore.fields.maximum_order') }} (Default Maximum Order)</label>
                    <input class="form-control {{ $errors->has('product_stores_maximum_order') ? 'is-invalid' : '' }}" type="number" name="product_stores_maximum_order" id="product_stores_maximum_order" value="{{ old('product_stores_maximum_order') }}" step="1">
                    @if($errors->has('product_stores_maximum_order'))
                        <div class="invalid-feedback">
                            {{ $errors->first('product_stores_maximum_order') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.productStore.fields.maximum_order_helper') }}</span>
                </div>
                <div class="col-md-2">
                    <label for="stores">{{ trans('cruds.productStore.fields.store') }}</label>
                    <select class="form-control" id="stores" name="stores[]" multiple>
                        @foreach($stores as $id => $store)
                            <option value="{{ $id }}" {{ in_array($id, old('stores', [])) ? 'selected' : '' }}>{{ $store }}</option>
                        @endforeach
                    </select>
                    @if($errors->has('stores'))
                        <div class="invalid-feedback">
                            {{ $errors->first('stores') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.productStore.fields.store_helper') }}</span>
                </div>
            </div>
            <div class="form-group">
                <table class="table" id="product_stores_table">
                    <thead>
                        <tr>
                            <th>{{ trans('cruds.productStore.title_singular') }}</th>
                            <th>{{ trans('cruds.productStore.fields.cost_price') }}</th>
                            <th>{{ trans('cruds.productStore.fields.sell_price') }}</th>
                            <th>{{ trans('cruds.product.fields.opening_balance') }}</th>
                            <th>{{ trans('cruds.product.fields.minimum_order') }}</th>
                            <th>{{ trans('cruds.product.fields.maximum_order') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="emptyRowData">
                            <td>Please Select a Store</td>
                            <td>Please Select a Store</td>
                            <td>Please Select a Store</td>
                            <td>Please Select a Store</td>
                            <td>Please Select a Store</td>
                            <td>Please Select a Store</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="form-group">
                <button class="btn btn-danger" type="submit">
                    {{ trans('global.save') }}
                </button>
            </div>
        </div>
    </div>

    {{-- <div class="card">
        <div class="card-header">
            {{ trans('global.create') }} {{ trans('cruds.productStore.title_singular') }}
        </div>
        <div class="card-body">
            <div class="form-group">
                <table class="table" id="product_stores_table">
                    <thead>
                        <tr>
                            <th>{{ trans('cruds.productStore.title_singular') }}</th>
                            <th>{{ trans('cruds.productStore.fields.cost_price') }}</th>
                            <th>{{ trans('cruds.productStore.fields.sell_price') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="productStores0">
                            <td class="store-select">
                                <select class="form-control @error('stores.0') is-invalid @enderror" name="stores[]">
                                    <option value="">Please select a store</option>
                                    @foreach($stores as $id => $store)
                                        <option value="{{ $id }}" {{ in_array($id, old('stores', [])) ? 'selected' : '' }}>{{ $store }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <input class="form-control @error('cost_price.0') is-invalid @enderror" type="text" name="cost_price[]" id="cost_price" value="{{ old('cost_price.0') }}">
                            </td>
                            <td>
                                <input class="form-control @error('sell_price.0') is-invalid @enderror" type="text" name="sell_price[]" id="sell_price" value="{{ old('sell_price.0') }}">
                            </td>
                        </tr>
                        <tr id="productStores1"></tr>
                    </tbody>
                </table>

                <div class="row">
                    <div class="col-md-12">
                        <button id="add_row" type="button" class="btn btn-default pull-left">+ Add Row</button>
                        <button id='delete_row' type="button" class="pull-right btn btn-danger">- Delete Row</button>
                    </div>
                </div>
                <table data-dynamicrows class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>{{ trans('cruds.productStore.title_singular') }}</th>
                            <th>{{ trans('cruds.productStore.fields.cost_price') }}</th>
                            <th>{{ trans('cruds.productStore.fields.sell_price') }}</th>
                            <th>Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr id="productStores-0">
                            <td>
                                <select class="form-control" name="productStores[0][stores]">
                                    <option value="">Please select a store</option>
                                    @foreach($stores as $id => $store)
                                        <option value="{{ $id }}" {{ in_array($id, old('stores', [])) ? 'selected' : '' }}>{{ $store }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td><input type="text" class="form-control" name="productStores[0][cost_price]"></td>
                            <td><input type="text" class="form-control" name="productStores[0][sell_price]"></td>
                            <td>
                                <i class="fa fa-minus" data-remove></i>
                                <i class="fa fa-arrows" data-move></i>
                                <i class="fa fa-plus" data-add></i>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="form-group">
                <button class="btn btn-danger" type="submit">
                    {{ trans('global.save') }}
                </button>
            </div>
        </div>
    </div> --}}
</form>



@endsection

@section('scripts')
<script src="{{ asset('assets/vanillaSelectBox-master/vanillaSelectBox.js') }}"></script>
<script src="{{ asset('assets/duplicate-resort-rows-dynamic/js/dynamicrows.js') }}"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
    Dropzone.options.pictureDropzone = {
        url: '{{ route('admin.products.storeMedia') }}',
        maxFilesize: 2, // MB
        acceptedFiles: '.jpeg,.jpg,.png,.gif',
        maxFiles: 1,
        addRemoveLinks: true,
        headers: {
          'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        params: {
          size: 2,
          width: 4096,
          height: 4096
        },
        success: function (file, response) {
          $('form').find('input[name="picture"]').remove()
          $('form').append('<input type="hidden" name="picture" value="' + response.name + '">')
        },
        removedfile: function (file) {
          file.previewElement.remove()
          if (file.status !== 'error') {
            $('form').find('input[name="picture"]').remove()
            this.options.maxFiles = this.options.maxFiles + 1
          }
        },
        init: function () {
    @if(isset($product) && $product->photo)
          var file = {!! json_encode($product->photo) !!}
              this.options.addedfile.call(this, file)
          this.options.thumbnail.call(this, file, file.preview)
          file.previewElement.classList.add('dz-complete')
          $('form').append('<input type="hidden" name="picture" value="' + file.file_name + '">')
          this.options.maxFiles = this.options.maxFiles - 1
    @endif
        },
        error: function (file, response) {
            if ($.type(response) === 'string') {
                var message = response //dropzone sends it's own error messages in string
            } else {
                var message = response.errors.file
            }
            file.previewElement.classList.add('dz-error')
            _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
            _results = []
            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                node = _ref[_i]
                _results.push(node.textContent = message)
            }

            return _results
        }
    }
    $(document).ready(function () {
      function SimpleUploadAdapter(editor) {
        editor.plugins.get('FileRepository').createUploadAdapter = function(loader) {
          return {
            upload: function() {
              return loader.file
                .then(function (file) {
                  return new Promise(function(resolve, reject) {
                    // Init request
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', '{{ route('admin.products.storeCKEditorImages') }}', true);
                    xhr.setRequestHeader('x-csrf-token', window._token);
                    xhr.setRequestHeader('Accept', 'application/json');
                    xhr.responseType = 'json';

                    // Init listeners
                    var genericErrorText = `Couldn't upload file: ${ file.name }.`;
                    xhr.addEventListener('error', function() { reject(genericErrorText) });
                    xhr.addEventListener('abort', function() { reject() });
                    xhr.addEventListener('load', function() {
                      var response = xhr.response;

                      if (!response || xhr.status !== 201) {
                        return reject(response && response.message ? `${genericErrorText}\n${xhr.status} ${response.message}` : `${genericErrorText}\n ${xhr.status} ${xhr.statusText}`);
                      }

                      $('form').append('<input type="hidden" name="ck-media[]" value="' + response.id + '">');

                      resolve({ default: response.url });
                    });

                    if (xhr.upload) {
                      xhr.upload.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                          loader.uploadTotal = e.total;
                          loader.uploaded = e.loaded;
                        }
                      });
                    }

                    // Send request
                    var data = new FormData();
                    data.append('upload', file);
                    data.append('crud_id', '{{ $product->id ?? 0 }}');
                    xhr.send(data);
                  });
                })
            }
          };
        }
      }

    var allEditors = document.querySelectorAll('.ckeditor');
    for (var i = 0; i < allEditors.length; ++i) {
        ClassicEditor.create(
          allEditors[i], {
            extraPlugins: [SimpleUploadAdapter]
          }
        );
    }

    var productOptions = {!! $products !!};

    $('body').on('click', '.bundle-plus', function() { 
        // i = $('#tab_logic tr').length; 
        var i =  $('#product-package-bundle-table tr:last').data('id');
        i = i+1;
        $('#product-package-bundle-table').append('<tr data-id="'+ i +'">\
            <th scope="row">'+ i +'</th>\
            <td>\
                <select class="select2 form-control" name="product-package-bundle-table['+ i +'][product]" id="product-package-bundle-table-' + i + '-product"></select>\
            </td>\
            <td class="text-center">\
                <button type="button" class="btn btn-success bundle-plus"> <i class="fa fa-plus"></i> </button>\
                <button type="button" class="btn btn-danger bundle-minus"> <i class="fa fa-minus"></i> </button>\
            </td>\
        </tr>');

        $.each(productOptions , function (key, value) {
            $('#product-package-bundle-table-' + i + '-product').append($('<option>',
                {
                value: key,
                text: value
                })
            );
        });

        $('.select2').select2({
            placeholder: "Select an option",
            allowClear: true,
        });

        // i++;
    });

    $('body').on('click', '.gift-plus', function() { 
        var i =  $('#product-package-gift-table tr:last').data('id');
        i = i+1;
        $('#product-package-gift-table').append('<tr data-id="'+ i +'">\
            <th scope="row">'+ i +'</th>\
            <td>\
                <select class="select2 form-control" name="product-package-gift-table['+ i +'][gift]" id="product-package-gift-table-' + i + '-gift"></select>\
            </td>\
            <td class="text-center">\
                <button type="button" class="btn btn-success gift-plus"> <i class="fa fa-plus"></i> </button>\
                <button type="button" class="btn btn-danger gift-minus"> <i class="fa fa-minus"></i> </button>\
            </td>\
        </tr>');

        $.each(productOptions , function (key, value) {
            $('#product-package-gift-table-' + i + '-gift').append($('<option>',
                {
                value: key,
                text: value
                })
            );
        });

        $('.select2').select2({
            placeholder: "Select an option",
            allowClear: true,
        });
    });

    $('body').on('click', '.bundle-minus', function() {
        $(this).closest('tr').remove();
        // i--;
    });

    $('body').on('click', '.gift-minus', function() {
        $(this).closest('tr').remove();
        // i--;
    });

    $("#product_type").on("change", function(){
        let value = $(this).val();
        if(value == 1)
        {
            $("#product-package-bundle-card").show();
            $("#product-package-gift-card").show();
            $("#form-group-maximum-package-qty").show();
            $("#unit-group").show();
        }
        else
        {
            $("#product-package-bundle-card").hide();
            $("#product-package-gift-card").hide();
            $("#form-group-maximum-package-qty").hide();
            $("#unit-group").hide();
        }
    });

    // //SET OLD INPUT SESSION
    var oldInput = {!! json_encode(session()->getOldInput()) !!};
    var costPriceErrors;
    var sellPriceErrors;
    var openingBalanceErrors;
    var minimumOrderErrors;
    var maximumOrderErrors;
    var errorsCostPriceRow = [];
    var errorsSellPriceRow = [];
    var errorsOpeningBalanceRow = [];
    var errorsMinimumOrderRow = [];
    var errorsMaximumOrderRow = [];
    var errorsCostPriceLength;
    var errorsSellPriceLength;
    var errorsOpeningBalanceLength;
    var errorsMinimumOrderLength;
    var errorsMaximumOrderLength;

    var storeOptions;

    @if ($errors->has('productStores.*.cost_price'))
        costPriceErrors = {!! json_encode($errors->get('productStores.*.cost_price')) !!};
        $.each(costPriceErrors,function(index,element){
            //GET ERROR ROW NUMBER
            let rowNum = index.split('.')[1];
            errorsCostPriceRow.push(Number(rowNum));
        });
        errorsCostPriceLength = Object.keys(costPriceErrors).length;
    @endif

    @if ($errors->has('productStores.*.sell_price'))
        sellPriceErrors = {!! json_encode($errors->get('productStores.*.sell_price')) !!};
        $.each(sellPriceErrors,function(index,element){
            //GET ERROR ROW NUMBER
            let rowNum = index.split('.')[1];
            errorsSellPriceRow.push(Number(rowNum));
        });
        errorsSellPriceLength = Object.keys(sellPriceErrors).length;
    @endif

    @if ($errors->has('productStores.*.opening_balance'))
        openingBalanceErrors = {!! json_encode($errors->get('productStores.*.opening_balance')) !!};
        $.each(openingBalanceErrors,function(index,element){
            //GET ERROR ROW NUMBER
            let rowNum = index.split('.')[1];
            errorsOpeningBalanceRow.push(Number(rowNum));
        });
        errorsOpeningBalanceLength = Object.keys(openingBalanceErrors).length;
    @endif

    @if ($errors->has('productStores.*.minimum_order'))
        minimumOrderErrors = {!! json_encode($errors->get('productStores.*.minimum_order')) !!};
        $.each(minimumOrderErrors,function(index,element){
            //GET ERROR ROW NUMBER
            let rowNum = index.split('.')[1];
            errorsMinimumOrderRow.push(Number(rowNum));
        });
        errorsMinimumOrderLength = Object.keys(minimumOrderErrors).length;
    @endif

    @if ($errors->has('productStores.*.maximum_order'))
        maximumOrderErrors = {!! json_encode($errors->get('productStores.*.maximum_order')) !!};
        $.each(maximumOrderErrors,function(index,element){
            //GET ERROR ROW NUMBER
            let rowNum = index.split('.')[1];
            errorsMaximumOrderRow.push(Number(rowNum));
        });
        errorsMaximumOrderLength = Object.keys(maximumOrderErrors).length;
    @endif

    if(Object.keys(oldInput).length !== 0)
    {
        if(Object.hasOwn(oldInput, 'productStores'))
        {
            var oldProductStoresRowCount = Object.keys(oldInput.productStores).length;
            var oldProductStores = oldInput.productStores;

            tableBody = $("#product_stores_table tbody");
            tableBody.empty();
            chosenStores = getValues("stores");        
            chosenOptions = $("#stores option:selected");
            var oldTableHtml = '';

            for (var i = 0; i < oldProductStoresRowCount; i++) {
                oldTableHtml += '<tr>';
                oldTableHtml += '<td>' + $(chosenOptions[i]).text() + '</td>';
                oldTableHtml += '<td><input class="form-control" type="number" id="productStores-' + i + '-cost_price" name="productStores[' + i + '][cost_price]" value="' + Number(oldInput.productStores[i].cost_price) + '" /></td>';
                oldTableHtml += '<td><input class="form-control" type="number" id="productStores-' + i + '-sell_price" name="productStores[' + i + '][sell_price]" value="' + Number(oldInput.productStores[i].sell_price) + '" /></td>';
                oldTableHtml += '<td><input class="form-control" type="number" id="productStores-' + i + '-opening_balance" name="productStores[' + i + '][opening_balance]" value="' + Number(oldInput.productStores[i].opening_balance) + '" /></td>';
                oldTableHtml += '<td><input class="form-control" type="number" id="productStores-' + i + '-minimum_order" name="productStores[' + i + '][minimum_order]" value="' + Number(oldInput.productStores[i].minimum_order) + '" /></td>';
                oldTableHtml += '<td><input class="form-control" type="number" id="productStores-' + i + '-maximum_order" name="productStores[' + i + '][maximum_order]" value="' + Number(oldInput.productStores[i].maximum_order) + '" /></td>';
                oldTableHtml += '</tr>';
            }

            tableBody.append(oldTableHtml);

            //SET ERROR VALUE CODE
            $.each(errorsCostPriceRow, function(index,element){
                $('#productStores-' + element + '-cost_price').addClass('is-invalid');
            });
            $.each(errorsSellPriceRow, function(index,element){
                $('#productStores-' + element + '-sell_price').addClass('is-invalid');
            });
            $.each(errorsOpeningBalanceRow, function(index,element){
                $('#productStores-' + element + '-opening_balance').addClass('is-invalid');
            });
            $.each(errorsMinimumOrderRow, function(index,element){
                $('#productStores-' + element + '-minimum_order').addClass('is-invalid');
            });
            $.each(errorsMaximumOrderRow, function(index,element){
                $('#productStores-' + element + '-maximum_order').addClass('is-invalid');
            });
        }        
    }

    var chosenStores = [];
    var chosenOptions;
    var emptyRowDataHtml = $('#emptyRowData');

    let mySelect = new vanillaSelectBox("#stores",{
        maxWidth: 500,
        maxHeight: 200,
        placeHolder: 'No Stores are selected',
        search: true,
        disableSelectAll: false
    });
        
    $(document).on('change', '#stores', function(e) {
        var html = '';
        tableBody = $("#product_stores_table tbody");
        tableBody.empty();
        chosenStores = getValues("stores");        
        chosenOptions = $("#stores option:selected");

        // CHECK ARRAY IF EMPTY
        if(chosenStores.length === 0)
        {
            tableBody.append(emptyRowDataHtml);
        }
        else
        {
            let product_stores_cost_price = Number($("#product_stores_cost_price").val());
            let product_stores_sell_price = Number($("#product_stores_sell_price").val());
            let product_stores_opening_balance = Number($("#product_stores_opening_balance").val());
            let product_stores_minimum_order = Number($("#product_stores_minimum_order").val());
            let product_stores_maximum_order = Number($("#product_stores_maximum_order").val());

            $.each(chosenStores, function(key, value){
                html += '<tr>';
                html += '<td>' + $(chosenOptions[key]).text() + '</td>';
                html += '<td><input class="form-control" type="number" id="productStores-' + key + '-cost_price" name="productStores[' + key + '][cost_price]" value="' + product_stores_cost_price +'" /></td>';
                html += '<td><input class="form-control" type="number" id="productStores-' + key + '-sell_price" name="productStores[' + key + '][sell_price]" value="' + product_stores_sell_price + '" /></td>';
                html += '<td><input class="form-control" type="number" id="productStores-' + key + '-opening_balance" name="productStores[' + key + '][opening_balance]" value="' + product_stores_opening_balance + '" /></td>';
                html += '<td><input class="form-control" type="number" id="productStores-' + key + '-minimum_order" name="productStores[' + key + '][minimum_order]" value="' + product_stores_minimum_order + '" /></td>';
                html += '<td><input class="form-control" type="number" id="productStores-' + key + '-maximum_order" name="productStores[' + key + '][maximum_order]" value="' + product_stores_maximum_order + '" /></td>';
                html += '</tr>';
            });
        }

        tableBody.append(html);
    });    
});
</script>

@endsection