@extends('layouts.adminLayout.admin_design') @section('content')
<link rel="stylesheet" href="{{asset('js/lib/tags/bootstrap-tagsinput.css')}}">
<link rel="stylesheet" href="{{asset('js/lib/tags/app.css')}}">
<style type="text/css">
    .bg-gray {
        background-color: #f5f4ff !important;
    }
</style>
<div class="content-wrapper">
    <section class="content-header">
        <h1>{{$title}}
            <div class="btn-group">
                <button type="button" class="clickbtncommon btn btn-primary btn-sm"><i class="fa fa-rocket"></i> {{__('lbl.action')}}</button>
                <button type="button" class="clickbtncommon btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    @if(Helper::checkAccess('categories_add'))
                    <li>
                        <!-- <a href="{{ route('categorie_create') }}" class="clickbtncommon btn-sm btn btn-primary "><i class="fa fa-plus-circle"></i> {{ __('lbl.add_new') }} </a> -->
                        <a href="#" class="add category_add" data-toggle="modal" data-target="#modal-default" data-id="" data-action="category/add">
                            <i class="fa fa-plus-circle"></i> {{ __('lbl.add_new') }}
                        </a>
                    </li>
                    @endif @if(Helper::checkAccess('categories_bulk_update'))
                    <li>
                        <a href="{{ route('bulkcategorieupdate') }}" class="  "><i class="fa fa-list"></i>
                            {{ __('lbl.bulkupdate') }}
                        </a>
                    </li>
                    @endif
                    <li class="divider"></li>
                    @if(Helper::checkAccess('categories_import'))
                    <li>
                        <a href="{{ asset('csv/backend/sample_categories_import.csv')}}" download target="_blank" class="  "><i class="fa fa-download"></i> {{ __('lbl.download_csv') }}</a>
                    </li>
                    <li>
                        <a href="{{ route('categorieimport') }}" class="  "><i class="fa fa-upload"></i> {{ __('lbl.upload_csv') }}</a>
                    </li>
                    @endif
                </ul>
            </div>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i> {{ __('lbl.home') }}</a></li>
            <li class="active">{{$title}}</li>
        </ol>
    </section>
    <section class="content">
        <div class="box box-default">
            <div class="box-body">
                <table class="table table-bordered categoryTable" id="categoryTable">
                    <thead>
                        <tr>
                            <th style="width:8%"></th>
                            <th>{{ __('lbl.cat') }}</th>
                            <th>{{ __('lbl.categorie_image') }}</th>
                            <th>{{ __('lbl.color') }}</th>
                            <th>{{ __('lbl.code') }}</th>
                            <th>{{ __('lbl.sort') }}</th>
                            <th>{{ __('lbl.pos') }}</th>
                            <th>{{ __('lbl.web') }}</th>
                            <th style="width:12%">{{ __('lbl.in_employee_sales_report') }}</th>
                            <th style="width:8%">Action</th>
                        </tr>
                    </thead>
                </table>

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

<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        {{ Form::open(["class"=>"form-horizontal", "method"=>"POST", "name" => "categories", "id" => "categories", "file"=>true, "enctype"=>"multipart/form-data"]) }}
        <div class="modal-content">
            <div class="modal-header  box box-default" style="border-radius:0px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">
                    {{__('lbl.categories')}} {{__('lbl.add')}}/{{__('lbl.edit')}}
                </h4>
            </div>
            <div class="modal-body">
                <div class="box-body">
                    <div class="form-group required">
                        <label for="name" class="col-sm-4 control-label">{{ __('lbl.categorie_name') }}</label>
                        <div class="col-sm-8">
                            {{ Form::text('categorie_name', Input::old('categorie_name'), ["class"=>"form-control mxlen_200","placeholder"=>"Categorie Name","id"=>"categorie_name","name"=>"categorie_name"]) }} @if ($errors->has('categorie_name'))
                            <span class="error" for="categorie_name">{{ $errors->first('categorie_name') }}</span> @endif
                        </div>
                    </div>
                    <div class="form-group required">
                        <label for="product_color" class="col-sm-4 control-label">{{ __('lbl.product_color') }}</label>
                        <div class="col-sm-8">
                            {!! Form::colorlistSelect('categorie_color', '',["class"=>"form-control","id"=>"categorie_color"]) !!}
                                                    </div>
                    </div>
                    <div class="form-group">
                        <label for="categorie_code" class="col-sm-4 control-label">{{ __('lbl.categorie_code') }}</label>
                        <div class="col-sm-8">
                            {{ Form::text('categorie_code', old('categorie_code'), ["class"=>"form-control mxlen_10","placeholder"=>"Categorie Code","id"=>"categorie_code","name"=>"categorie_code"]) }}
                        </div>
                    </div>
                    <div class="form-group required">
                        <label for="categorie_type" class="col-sm-4 control-label">{{ __('lbl.categorie_type') }}</label>
                        <div class="col-sm-8">
                            <select id="categorie_type" class="form-control select2" style="width:100%" name="categorie_type">
                                <option data-class="1" value="0" selected>Is parent</option>
                                @if($categories)
                                    @foreach ($categoriestree as $cat)
                                        <option data-class="{{$cat['isbold']}}" value="{{ $cat['id'] }}" @if($cat['id'] == $cat_id) selected @endif>{!! $cat['categorie_name'] !!}</option>
                                    @endforeach
                                @endif
                            </select> @if ($errors->has('categorie_type'))
                            <span class="error" for="categorie_code">{{ $errors->first('categorie_type') }}</span> @endif
                        </div>
                    </div>
                    <div class="form-group required">
                        <label for="categorie_sort" class="col-sm-4 control-label">{{ __('lbl.categorie_sort') }}</label>
                        <div class="col-sm-8">
                            {{ Form::number('categorie_sort', !empty(Input::old('categorie_sort')) ? Input::old('categorie_sort') : $sort, ["class"=>"form-control","placeholder"=>"Categorie Sort","id"=>"categorie_sort","name"=>"categorie_sort","min"=>"0"]) }} @if ($errors->has('categorie_sort'))
                            <span class="error" for="categorie_sort">{{ $errors->first('categorie_sort') }}</span> @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="categorie_image" class="col-sm-4 control-label">{{ __('lbl.categorie_image') }}</label>
                        <div class="col-sm-8">
                            {{ Form::file('categorie_image',["class"=>"form-control",  "accept"=>"image/png, image/gif, image/jpeg", "placeholder"=>"Categorie Image","id"=>"categorie_image","name"=>"categorie_image"]) }} 
                            @if ($errors->has('categorie_image'))
                            <span class="error" for="categorie_image">{{ $errors->first('categorie_image') }}</span>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pos" class="col-sm-4 control-label">{{ __('lbl.pos') }}</label>
                        <div class="col-sm-8">
                            {{ Form::checkbox('pos', '1') }} @if ($errors->has('pos'))
                            <span class="error" for="pos">{{ $errors->first('pos') }}</span> @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="web" class="col-sm-4 control-label">{{ __('lbl.web') }}</label>
                        <div class="col-sm-8">
                            {{ Form::checkbox('web', '1') }} @if ($errors->has('web'))
                            <span class="error" for="web">{{ $errors->first('web') }}</span> @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-md-6 pull-left text-center">
                        <button type="submit" class="clickbtncommon btn btn-primary pull-left btn-sm"><i class="fa fa-save"></i> {{ __('lbl.save') }}</button>
                        <button type="button" class="clickbtncommon btn btn-primary pull-left btn-sm imcancelbutton " data-dismiss="modal"><i class="fa fa-backward"></i> {{ __('lbl.close') }}</button>
                    </div>
                </div>
                <div id="errorLog" class="pull-left"></div>
            </div>
        </div>
        <input type="hidden" value="" id="id" /> {{ Form::close() }} {{ Form::hidden('categorie_action',route('categorie_store'),['id'=>'categorie_action']) }}
    </div>
</div>

<div id="addNewProduct" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" style="width:90%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">{{ __('lbl.add_new_product') }}</h4>
            </div>
            {{ Form::open(['url' => route('sampleproductadd'), 'method'=>'POST', 'name' => 'sampleproduct', 'id' => 'sampleproduct','class' => 'form-horizontal']) }} {{ Form::hidden('refresh_status','1')}}
            <div class="modal-body">
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group required">
                                {{ Form::label("name", __('lbl.name'),['class'=>'control-label col-sm-6 comman-label']) }}
                                <div class="col-sm-6">
                                    {{ Form::text('product_name', '', ["class"=>"form-control comman-input mxlen_100","placeholder"=> __('lbl.name'),"id"=>"product_name"]) }}
                                </div>
                            </div>
                            <div class="form-group required">
                                {{ Form::label("category", __('lbl.cat'),['class'=>'control-label col-sm-6 comman-label']) }}
                                <div class="col-sm-6">
                                    {{ Form::select('cat_id', $categories ,'',["class"=>"form-control searchCategory select2","id"=>"cat_id"]) }}
                                </div>
                            </div>
                            <div class="form-group required">
                                {{ Form::label("sub_cat_id", __('lbl.sub_cat'),['class'=>'control-label col-sm-6 comman-label']) }}
                                <div class="col-sm-6">
                                    {{ Form::select('sub_cat_id', [],'',["class"=>"form-control comman-input searchCategory select2","id"=>"sub_cat_id"]) }}
                                </div>
                            </div>
                            <div class="form-group required">
                                {{ Form::label("price", __('lbl.price'),['required','class'=>'control-label col-sm-6 comman-label']) }}
                                <div class="col-sm-6">
                                    {{ Form::text('product_price', '0.00', ["class"=>"form-control comman-input",'maxlength' => 8,"onkeypress"=>"return validateFloatKeyPress(this,event);","placeholder"=> __('lbl.price'),"id"=>"product_price"]) }}
                                </div>
                            </div>
                            <div class="form-group required">
                                {{ Form::label("product_cost", __('lbl.product_cost'),['class'=>'control-label col-sm-6 comman-label']) }}
                                <div class="col-sm-6">
                                    {{ Form::text('product_cost', '0.00', [ "class"=>"form-control comman-input",'maxlength' => 8,"onkeypress"=>"return validateFloatKeyPress(this,event);","placeholder"=> __('lbl.product_cost'),"id"=>"product_cost"]) }}
                                </div>
                            </div>
                            <div class="form-group required">
                                {{ Form::label("product_sku", __('lbl.product_sku'),['class'=>'control-label col-sm-6 comman-label']) }}
                                <div class="col-sm-3">
                                    {{ Form::text('product_sku', '', ["class"=>"form-control comman-input",'maxlength' => 20,"placeholder"=> __('lbl.product_sku'),"id"=>"product_sku"]) }}
                                </div>
                                <div class="col-sm-3 pull-left">
                                    <button type="button" id="generate_sku" class="btn btn-primary clickbtncommon btn-sm ">
                                        <i class="fa fa-refresh"></i>
                                        {{ __('lbl.product_auto_generate') }}
                                    </button>
                                </div>
                                <div class="clearfix"></div>
                                <div id="generateSkuError" class="col-md-12 col-md-offset-6"></div>
                            </div>
                            <div class="form-group required">
                                {{ Form::label("product_barcode", __('lbl.product_barcode'),['class'=>'control-label col-sm-6 comman-label']) }}
                                <div class="col-sm-3">
                                    {{ Form::text('product_barcode', '', ["class"=>"form-control comman-input",'maxlength' => 20,"placeholder"=> __('lbl.product_barcode'),"id"=>"product_barcode","name"=>"product_barcode"]) }}
                                </div>
                                <!--div class="col-sm-3">
                                    <button type="button" onClick="check_barcode(0);
                                            return false;" class="btn btn-primary clickbtncommon btn-sm">
                                        <i class="fa fa-refresh"></i>
                                        {{ __('lbl.product_barcode_button') }}
                                    </button>
                                </div-->
                                <div class="col-sm-3">
                                    <button type="button" id="generate_barcode" class="btn btn-primary clickbtncommon btn-sm">
                                        <i class="fa fa-refresh"></i>
                                        {{ __('lbl.product_auto_generate') }}
                                    </button>
                                </div>
                                <div class="clearfix"></div>
                                <div id="generateBarcodeError" class="col-md-12 col-md-offset-6"></div>
                            </div>
                            <div class="form-group">
                                {{ Form::label("product_tags", __('lbl.product_tags'),['class'=>'control-label col-sm-6 comman-label']) }}
                                <div class="col-sm-6">
                                    {{ Form::text('product_tags', '', ["class"=>"form-control bootstrap-tagsinput comman-input","id"=>"product_tags"]) }}
                                </div>
                            </div>
                            <div class="form-group">
                                {{ Form::label("reorder_to_par", __('lbl.reorder_to_par'),['class'=>'control-label col-sm-6 comman-label']) }}
                                <div class="col-sm-6">
                                    {{ Form::checkbox('reorder_to_par', '1') }}
                                </div>
                            </div>
                            <div class="form-group">
                                {{ Form::label("sold_by_weight", __('lbl.sold_by_weight'),['class'=>'control-label col-sm-6 comman-label']) }}
                                <div class="col-sm-5">
                                    {{ Form::checkbox('sold_by_weight', '1', false) }}
                                </div>
                            </div>
                            <div class="form-group">
                                {{ Form::label("is_custom_product", __('lbl.is_custom_product'),['class'=>'control-label col-sm-6 comman-label']) }}
                                <div class="col-sm-5">
                                    {{ Form::checkbox('is_custom_product', '1', false) }}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group required">
                                {{ Form::label("product_group", __('lbl.product_group'),['class'=>'control-label col-sm-5 comman-label']) }}
                                <div class="col-sm-5">
                                    {{ Form::select('product_group', ($product_group)?$product_group:[], '',['class'=>'form-control select2 productGroup','id'=>'product_group']) }}
                                </div>
                            </div>
                            <div class="form-group required">
                                {{ Form::label("tax_class", __('lbl.tax_class'),['class'=>'control-label col-sm-5 comman-label']) }}
                                <div class="col-sm-5">
                                    {{ Form::select('product_tax_class', ($product_tax_class)?$product_tax_class:[], '',[ "class"=>"form-control select2 productTaxClass","id"=>"product_tax_class"]) }}
                                </div>
                            </div>
                            <div class="form-group required">
                                {{ Form::label("primary_vendor", __('lbl.primary_vendor'),['class'=>'control-label col-sm-5 comman-label']) }}
                                <div class="col-sm-5">
                                    {{ Form::select('primary_vendor', !empty($primary_vendor) ? [''=>'Select vendor'] + $primary_vendor : [''=>'Please select vendor'], '', ["class"=>"form-control comman-input select2 primaryVendor","id"=>"primary_vendor"]) }}
                                </div>
                            </div>
                            <div class="form-group">
                                {{ Form::label("vendor_item_id", __('lbl.vendor_item_id'),['class'=>'control-label col-sm-5 comman-label']) }}
                                <div class="col-sm-5">
                                    {{ Form::text('vendor_item_id', '', ["class"=>"form-control comman-input","maxlength" => "20","id"=>"vendor_item_id"]) }}
                                </div>
                            </div>
                            <div class="form-group">
                                {{ Form::label("reorder_unit_type", __('lbl.reorder_unit_type'),['class'=>'control-label col-sm-5 comman-label']) }}
                                <div class="col-sm-5">
                                    {{ Form::text('reorder_unit_type', 'Unit', ["class"=>"form-control comman-input numeric","maxlength" => "8","placeholder"=> __('lbl.reorder_unit_type'),"id"=>"unit_name","name"=>"unit_name"]) }}
                                </div>
                            </div>
                            <div class="form-group">
                                {{ Form::label("conversion", ucfirst(strtolower(__('lbl.conversion'))),['class'=>'control-label col-sm-5 comman-label']) }}
                                <div class="col-sm-5">
                                    <!-- numer_only -->
                                    {{ Form::text('conversion', '1', ["class"=>"form-control comman-input","maxlength" => "6","placeholder"=> __('lbl.conversion'),"id"=>"conversion"]) }}
                                </div>
                            </div>
                            <div class="form-group">
                                {{ Form::label("default_reorder_quantity", __('lbl.default_reorder_quantity'),['class'=>'control-label col-sm-5 comman-label']) }}
                                <div class="col-sm-5">
                                    {{ Form::text('default_reorder_quantity', '', ["class"=>"form-control comman-input numer_only","onkeypress"=>"return validateFloatKeyPress(this,event);","maxlength" => "8","placeholder"=> __('lbl.default_reorder_quantity'),"id"=>"default_reorder_quantity"])
                                    }}
                                </div>
                            </div>
                            <div class="form-group">
                                {{ Form::label("is_taxable", __('lbl.is_taxable'),['class'=>'control-label col-sm-5 comman-label']) }}
                                <div class="col-sm-5">
                                    {{ Form::checkbox('product_is_taxable', '1', true) }}
                                </div>
                            </div>
                            <div class="form-group required">
                                {{ Form::label("crv_applied", __('lbl.crv_applied'),['class'=>'control-label col-sm-5 comman-label']) }}
                                <div class="col-sm-5">
                                    {{ Form::select('crv_applied', ['1'=>'YES','0'=>'NO'] , '0', ["class"=>"form-control comman-input","id"=>"crv_applied"]) }}
                                </div>
                            </div>
                            <div class="form-group">
                                {{ Form::label("crv_amount", __('lbl.crv_amount'),['class'=>'control-label col-sm-5 comman-label']) }}
                                <div class="col-sm-5">
                                    {{ Form::text('crv_amount', '', ["class"=>"form-control comman-input","maxlength" => "8","id"=>"crv_amount"]) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                {{ Form::button('<i class="fa fa-save" aria-hidden="true"></i> '.__('lbl.save'), ["name"=>"submit",'class' => 'productSubmit clickbtncommon btn btn-primary btn-sm', 'type' => 'submit']) }} {{ Form::button('<i class="fa fa-arrow-circle-left"
                    aria-hidden="true"></i> '.__('lbl.close'), ['class' => 'clickbtncommon btn btn-primary btn-sm', 'data-dismiss' => 'modal']) }}
            </div>
            {{ Form::hidden('update_product_cost_price',route('update_product_cost_price'),['id'=>'update_product_cost_price']) }} {{ Form::hidden('product_search',route('product_search'),['id'=>'product_search']) }} {{ Form::hidden('shorturl',route('subcategories'),['id'=>'shorturl'])}}
            {{ Form::hidden('no_subcategories_available',__('lbl.no_subcategories_available'),['id'=>'no_subcategories_available']) }} {{ Form::close() }}
            <!--ON BUTTON PRESS EVENT-->
            {{ Form::hidden('route_auto_generate',route('autoGenerateSku'),['id'=>'route_auto_generate']) }} {{ Form::hidden('route_auto_generate_barcode',route('autoGenerateBarcode'),['id'=>'route_auto_generate_barcode']) }}
            <!--ON KEYPRESS EVENT-->
            {{ Form::hidden('generateSku',route('generateSku'),['id'=>'generateSku']) }} {{ Form::hidden('generateBarcode',route('generateBarcode'),['id'=>'generateBarcode']) }}
        </div>
    </div>
</div>

{{ Form::hidden('bulkcategoryrowupdate',route('bulkcategoryrowupdate'),['id'=>'bulkcategoryrowupdate'])}} @endsection 
@section('pagescript') 
{!! Helper::pagejs([ 'js/lib/datatables.net/js/jquery.dataTables.min.js', 'js/lib/datatables.net-bs/js/dataTables.bootstrap.min.js',
'js/lib/datatables.net/js/handlebars.js', 'js/lib/tags/bootstrap-tagsinput.min.js', ]) !!}
<script id="subItems" type="text/x-handlebars-template">
    @verbatim
    <br/>
    <table class="table details-table" id="subItems-{{id}}">
        <thead>
            <tr>
                <th style="width:8%"></th>
                <th>Sub Category</th>
                <th>Categorie Image</th>
                <th>Color</th>
                <th>Code</th>
                <th>Sort</th>
                <th>POS</th>
                <th>WEB</th>
                <th>In Employee Sales</th>
                <th style="width:8%">Action</th>
            </tr>
        </thead>
    </table>
    @endverbatim
</script>
<!-- <th style="width:8%">Status</th> -->

<!-- 
    PLEASE DO NOT DELTE THIS CODE
<a class="clickbtncommon btn-sm btn btn-primary openPopup" onClick='showModel()'><i class='fa fa-plus-circle icon-white'></i> {{ __('lbl.add_new') }}</a> 
-->
<script id="productItems" type="text/x-handlebars-template">
    @if(Helper::checkAccess('categories_quick_create'))
    <center style="margin-bottom:0px;">
        <button id="addnewproduct" type="button" class="clickbtncommon btn-primary btn-sm" data-toggle="modal" data-target="#addNewProduct" style="line-height:15px;"><i class="fa fa-plus-circle"></i> {{ __('lbl.add_new') }}</button>
    </center>
    @endif @verbatim
    <br/>
    <table class="table productItems-table" id="productItems-{{id}}">
        <thead>
            <tr>
                <th style="width:10%" class="no-sort"></th>
                <th style="width:30%">Product Name</th>
                <th style="width:10%" class='text-right'>SKU</th>
                <th style="width:10%" class='text-right'>Bar Code</th>
                <th style="width:10%" class='text-right'>Cost</th>
                <th style="width:10%" class='text-right'>Price</th>
                <th style="width:10%" class='text-right'>Taxable</th>
                <th style="width:10%" class='text-center'>Action</th>
                <th style="width:8%" class="no-sort"></th>
            </tr>
        </thead>
    </table>
    @endverbatim
</script>
<!--data-toggle="modal"-->
<script>
    var template = Handlebars.compile($("#subItems").html());
    var table = $('#categoryTable').DataTable({
        processing: true,
        'language': {
            'loadingRecords': '&nbsp;',
            'processing': 'Processing.. <i class="fa fa-circle-o-notch fa-spin"></i>'
        },
        serverSide: true,
        searching: true,
        "bDestroy": true,
        "lengthMenu": [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "All"]
        ],
        "pageLength": 25,
        "ajax": {
            url: '{{ route("categories") }}',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
        },
        "columns": [
            {
                "data": null,
                "className": 'subCatload',
                "orderable": false,
                "searchable": false,
                "defaultContent": '',
            }, {
                data: 'categorie_name',
                name: 'tbl_categories.categorie_name',
                "searchable": true,
            },{
                data: 'cateimagepath',
                name: 'tbl_categories.categorie_image',
                "searchable": false,
            }, {
                data: 'categorie_color',
                name: 'tbl_categories.categorie_color',
                "searchable": true,
            }, {
                data: 'categorie_code',
                name: 'tbl_categories.categorie_code',
                "searchable": true,
            }, {
                data: 'categorie_sort',
                name: 'tbl_categories.categorie_sort',
                "searchable": true,
            }, {
                data: 'pos',
                name: 'pos',
                "searchable": false,
            }, {
                data: 'web',
                name: 'web',
                "searchable": false,
            },{
                data: 'in_employee_sales_report',
                name: 'in_employee_sales_report',
                "searchable": false,
            }, {
                data: 'action',
                name: 'action'
            },
        ],
        "columnDefs": [{
            "searchable": true,
            "bSortable": false,
            "targets": [0,6,7,8]
        }],
    }); 


    $('#categoryTable_filter input, #categoryTable_length select').addClass('treeinput');
    // Add event listener for opening and closing details
    $('#categoryTable tbody').on('click', 'td.subCatload', function() {
        var tr = $(this).closest('tr');
        var row = table.row(tr);
        var tableId = 'subItems-' + row.data().id;
        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            row.child(template(row.data())).show();
            initTable(tableId, row.data());
            tr.addClass('shown');
            tr.next().find('td').addClass('no-padding bg-gray');
        }
    });
    var table1 = ''
    function initTable(tableId, data) {
        table1 = $('#' + tableId).DataTable({
            processing: true,
            searching: false,
            serverSide: true,
            bPaginate: false,
            paging: false,
            lengthChange: false,
            info: false,
            ajax: data.subItemUrl,
            columns: [{
                    data: null,
                    /*className: 'product',*/
                    /* TO OPEN PRODUCT LIST*/
                    "defaultContent": ''
                }, {
                    data: 'categorie_name',
                    name: 'categorie_name'
                }, {
                    data: 'cateimagepath',
                    name: 'cateimagepath'
                }, {
                    data: 'categorie_color',
                    name: 'categorie_color'
                }, {
                    data: 'categorie_code',
                    name: 'categorie_code'
                }, {
                    data: 'categorie_sort',
                    name: 'categorie_sort'
                }, {
                    data: 'pos',
                    name: 'pos'
                }, {
                    data: 'web',
                    name: 'web'
                },
                 {
                    data: 'in_employee_sales_report',
                    name: 'in_employee_sales_report'
                },
                /* {data: 'status', name: 'status'}, */
                {
                    data: 'action',
                    name: 'action'
                }
            ],
            columnDefs: [{
                    "searchable": true,
                    "bSortable": false,
                    "targets": [0, 1, 2, 3, 4, 5, 6, 7, 8]
                }] //, 3
        })
    }
    var template1 = Handlebars.compile($("#productItems").html());
    $('#categoryTable tbody').on('click', 'td.product', function() {
        var tr = $(this).closest('tr');
        var row = table1.row(tr);
        var tableId = 'productItems-' + row.data().id;
        //console.log('SubId:' + row.data().id + 'ParentId:' + row.data().categorie_type);
        $('#cat_id').val(row.data().categorie_type); //parentid
        $('#sub_cat_id').val(row.data().id); //subit
        if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass('shown');
        } else {
            row.child(template1(row.data())).show();
            var arraypost = {
                'tableId': tableId,
                'productItemUrl': row.data().productItemUrl
            };
            initProductTable(arraypost);
            tr.addClass('shown');
            tr.next().find('td').addClass('no-padding bg-gray');
        }
    });
    var producttable = ''

    function initProductTable(data) {
        producttable = $('#' + data.tableId).DataTable({
            processing: true,
            serverSide: true,
            ajax: data.productItemUrl,
            fnCreatedRow: function(nRow, data, iDataIndex) {
                $(nRow).attr('id', data['id']);
            },
            columns: [{
                data: 'blankcolumn',
                name: '',
                'orderable': false,
                'searchabl': false
            }, {
                data: 'product_name',
                name: 'product_name'
            }, {
                data: 'product_sku',
                name: 'product_sku'
            }, {
                data: 'product_barcode',
                name: 'product_barcode'
            }, {
                data: 'product_cost',
                name: 'product_cost'
            }, {
                data: 'product_price',
                name: 'product_price'
            }, {
                data: 'product_is_taxable',
                name: 'product_is_taxable'
            }, {
                data: 'action',
                name: 'action',
                'orderable': false,
                'searchabl': false,
                className: 'text-center'
            }, {
                data: 'blankcolumn',
                name: '',
                'orderable': false,
                'searchabl': false
            }, ],
            rowCallback: function(row, data) {
                $('input.editor-active-tax', row).attr('product_id', data['id']);
            },
            columnDefs: [{
                "searchable": true,
                "bSortable": false,
                "targets": [0, 4, 5]
            }]
        });
    }
</script>
{!! Helper::pagejs([ 'js/lib/select2/dist/js/select2.full.min.js', 'js/backend/categories/tree_view.js', 'js/backend/categories/add_edit.js', 'js/backend/producttab/quickproductadd.js', 'js/backend/categories/categorynamefilterupdate.js',
'js/lib/colorpick/dependencies/tinycolor-0.9.15.min.js', 'js/lib/colorpick/1.2.3/js/pick-a-color-1.2.3.min.js' ])!!} @stop