@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')}}">
<div class="content-wrapper">
    <section class="content-header">
        <h1>{{ $title }} : {{$proDetails['product_name']}} <small>SKU: {{$proDetails['product_sku']}}</small> <small> Barcode: {{$proDetails['product_barcode']}} </small></h1>
        <ol class="breadcrumb">
            <li><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i> {{ __('lbl.home') }} </a></li>
            <li> 
                @if(Helper::widgetAccess('default_product_view'))
                <a href="{{ route('product.index') }}">
                @else
                <a href="{{ route('inlineproducts') }}">
                @endif
                {{ __('lbl.products') }}
                </a> 
            </li>
            <li class="active">{{$title }} </li>
        </ol>
    </section>
    {{ Form::open(['url' => route('product.update', $proDetails['id']), 'method'=>'PATCH', 'file'=>true, 'enctype'=>'multipart/form-data', 'name' => 'productconfig', 'id' => 'productconfig']) }} 
    {{ method_field('PATCH') }}
    <section class="content">
            <div class="row">
                <div class="col-md-2">
                    <div class="peripheralstab">
                        <button type="button" class="tablinks" onclick="showMySection(event, 'basic-product-details-tab')" id="defaultOpen">{{__('lbl.basic_product_details') }}</button>
                        <button type="button" class="tablinks" onclick="showMySection(event, 'advance-product-details-tab')">{{__('lbl.advance_product_details')}}</button>
                        <button type="button" class="tablinks" onclick="showMySection(event, 'attribute-tab')">{{__('lbl.attributes')}}</button>
                        <button type="button" class="tablinks" onclick="showMySection(event, 'price-option-tab')">{{__('lbl.price_options')}}</button>
                        <button type="button" class="tablinks" onclick="showMySection(event, 'product-modifier-tab')">{{__('lbl.products_modifiers')}}</button>
                        <button type="button" class="tablinks" onclick="showMySection(event, 'inventory-tab')">{{__('lbl.inventory')}}</button>
                        <button type="button" class="tablinks" onclick="showMySection(event, 'print-option-tab')">{{__('lbl.print_options')}}</button>
                        <button type="button" class="tablinks" onclick="showMySection(event, 'ingredients-tab')">{{__('lbl.ingredients')}}</button>
                        <button type="button" class="tablinks" onclick="showMySection(event, 'mpmealplan-tab')">{{__('lbl.mpmealplan')}}</button>
                    </div>
                </div>
                <div class="col-md-10 tab-content">
                    <div class="box box-solid">
                        <div class="box-header with-border">
                            <h3 class="pull-left box-title">{{ __('lbl.products_configuration')}}</h3>
                            <div class="pull-right saveButtons">
                                {{ Form::button('<i class="fa fa-save" aria-hidden="true"></i> '.__('lbl.save'), ["name"=>"submit","id"=>"",'class' => 'btn btn-primary btn-sm clickbtncommon productSubmit', 'type' => 'submit'])}}
                                @if(Helper::widgetAccess('default_product_view'))
                                <a class="btn btn-primary btn-sm clickbtncommon" href="{{ route('product.index') }}">
                                @else
                                <a class="btn btn-primary btn-sm clickbtncommon" href="{{ route('inlineproducts') }}">
                                @endif    
                                    <i class="fa fa-arrow-circle-left"></i> {{ __('lbl.cancel') }}</a>
                            </div>
                            <div class="pull-right processButtons" style="display: none;">
                                <button type="button" disabled class="btn btn-danger btn-sm clickbtncommon ajax" title="Ajax Request">
                                    <i class="fa fa-spin fa-refresh"></i>&nbsp; Please wait...
                                </button>
                            </div>
                        </div>
                        <div class="box-body">
                            <div id="basic-product-details-tab" class="tabcontent">
                                @include('admin.v2.products.tabs.edit-basic-product-details')
                            </div>
                            <div id="advance-product-details-tab" class="tabcontent">
                                @include('admin.v2.products.tabs.edit-advance-product-details')
                            </div>
                            <div id="attribute-tab" class="tabcontent">
                                @php
                                $attrItemsNumbers = 0;
                            @endphp
                                @include('admin.v2.products.tabs.edit-attribute')
                            </div>
                            <div id="price-option-tab" class="tabcontent">
                                @include('admin.v2.products.tabs.edit-price-option')
                            </div>
                            <div id="product-modifier-tab" class="tabcontent">
                                @include('admin.v2.products.tabs.edit-product-modifier')
                            </div>
                            <div id="inventory-tab" class="tabcontent">
                                @include('admin.v2.products.tabs.edit-inventory')
                            </div>
                            <div id="print-option-tab" class="tabcontent">
                                @include('admin.v2.products.tabs.edit-print-option')
                            </div>
                            <div id="ingredients-tab" class="tabcontent">
                                @include('admin.v2.products.tabs.edit-ingredients')
                            </div>
                            <div id="mpmealplan-tab" class="tabcontent">
                                @include('admin.v2.products.tabs.edit-mpmealplan')
                            </div>
                        </div>
                    </div>
                        <hr />
                    </div>
                    <!-- /.box -->
            </div>
        </div>
    </section>
    <!-- if data copy from barcode then it's true -->
    {{ Form::hidden('manualgeneratorsku','1',['id'=>'manualgeneratorsku']) }}
    {{ Form::hidden('manualgeneratorbarcode','1',['id'=>'manualgeneratorbarcode']) }}
    {{ Form::hidden('old_sub_cat_id', $proDetails['sub_cat_id'], ['id' => 'old_sub_cat_id']) }} 
    {{ Form::hidden('productActionId', $proDetails['id'] ,['id'=>'productActionId']) }}
    {{ Form::hidden('takenBy', 0, ['id' => 'takenBy']) }} 
    {{ Form::hidden('modifiers_class',route('modifiers_class'),['id'=>'modifiers_class']) }} 
    {{ Form::hidden('product_image_file_old',$proDetails['product_image_name'], ['id'=> 'product_image_file_old']) }} 
    {{ Form::hidden('myAction','PATCH',['id'=>'myAction']) }}
    {{ Form::close() }} 

    {{ Form::hidden('skubarcodeserialnumber', ($attrItemsNumbers+1), ['id' => 'skubarcodeserialnumber']) }}
    {{ Form::hidden('isAutoGenerateBarcode', (Helper::widgetAccess('auto_generate_barcode'))?true:false,['id'=>'isAutoGenerateBarcode']) }} 
    {{ Form::hidden('isAutoGenerateSku',  (Helper::widgetAccess('auto_generate_sku'))?true:false, ['id'=>'isAutoGenerateSku']) }} 
    
    {{ Form::hidden('route_barcode', route('productBarcode'), ['id' => 'route_barcode']) }} 
    {{ Form::hidden('catId', $proDetails['cat_id'], ['id' => 'catId'])}} 
    {{ Form::hidden('subCatId', $proDetails['sub_cat_id'], ['id' => 'subCatId']) }} {{ Form::hidden('product_id', $proDetails['id'], ['id' => 'product_id']) }} {{ Form::hidden('shorturl',route('subcategories'),['id'=>'shorturl']) }} {{ Form::hidden('no_subcategories_available',__('lbl.no_subcategories_available'),['id'=>'no_subcategories_available'])}}
    <!--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']) }} {{ Form::hidden('attributeGroupremove',route('attributeGroupremove'),['id'=>'attributeGroupremove'])}} 
    {{ Form::hidden('productmodifierremove',route('productmodifierremove'),['id'=>'productmodifierremove']) }} 
    {{ Form::hidden('attributeGroupItemremove',route('attributeGroupItemremove'),['id'=>'attributeGroupItemremove']) }} {{ Form::hidden('total_groups',($proDetails['product_attributes'])? count($proDetails['product_attributes']) : 0,['id'=>'total_groups']) }}
    {{ Form::hidden('product_search', route('product_search'),['id'=>'product_search']) }}
    {{ Form::hidden('stockunitsdrop', route('productstockunitsdrop'),['id'=>'stockunitsdrop'])}}
    {{ Form::hidden('totalIngredientItems', ($product_direct_ingredient)? count($product_direct_ingredient) : 0,['id'=>'totalIngredientItems']) }}
    <!-- Content Header (Page header) -->
    <!-- HIDDEN ITEM PLEASE DO NOT REMOVE-->
    <!-- hidden data -->
    <div style="display:none">
        <div id="item_details">
            <div class="col-md-3">
                <div class="form-group">
                    {{ Form::label(__('lbl.product_price_apply')) }}
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-clock-o"></i>
                        </div>
                        {{ Form::text('product_price_time_period', '',["class"=>"form-control reservationtime mxlen_25","placeholder"=>__('product.product_price_apply'),"id"=>"reservationtime","name"=>"product_price_time_period[]"]) }}
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group ">
                    {{ Form::label(__('lbl.product_price_tire')) }} {{ Form::select('product_price_tires', $product_price_tires, '',['class'=>'form-control','id'=>'product_price_tires',"name"=>"product_price_tires[]"]) }}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group ">
                    {{ Form::label(__('lbl.product_price')) }} {{ Form::text('product_price_custome', '', ["class"=>"form-control mxlen_5","onkeypress"=>"return validateFloatKeyPress(this,event);","placeholder"=>__('lbl.product_price'),"name"=>"product_price_custome[]"])
                    }}
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group ">
                    {{ Form::label(__('lbl.action')) }}
                    <div class="clearfix"></div>
                    {{ Form::button('<i class="fa fa-trash"></i> ', ["name"=>"remove_edititem","class"=>"remove_edititem btn btn-primary btn-sm clickbtncommon ","id"=>"remove_edititem","name"=>"remove_edititem[]"]) }}
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- hidden data -->
    <!-- Hidden area-->
    <div style="display:none;">
        <div id="item_stock_details_clone">
            <div class="col-md-2">
                <div class="form-group ">
                    {{ Form::label(__('lbl.name')) }} {{ Form::text('unit', '', ["class"=>"form-control","placeholder"=>__('lbl.name'),"id"=>"unit_name","name"=>"unit_name[]"]) }}
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group ">
                    {{ Form::label(__('lbl.conversion')) }} {{ Form::text('conversion', '', ["class"=>"form-control numer_only","placeholder"=>__('lbl.conversion'),"id"=>"conversion","name"=>"conversion[]"]) }}
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group ">
                    {{ Form::label(__('lbl.barcode')) }} {{ Form::text('barcode', '', ["class"=>"form-control","placeholder"=>__('lbl.barcode'),"id"=>"barcode","name"=>"barcode[]"]) }}
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group ">
                    {{ Form::label(__('lbl.unit')) }} {{ Form::select('unit', $inventory_unit, '',['class'=>'form-control','id'=>'unit',"name"=>"unit[]"]) }}
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group ">
                    {{ Form::label(__('lbl.active')) }}
                    <div class="clearfix"></div>
                    {{ Form::select('inv_active[]', ['YES'=>'YES','NO'=>'NO'], 'YES',['class'=>'form-control inv_active','id'=>'inv_active',"name"=>"inv_active[]"]) }}
                </div>
            </div>
            <div class="col-md-1 no-padding">
                <div class="form-group ">
                    {{ Form::label(__('lbl.primary')) }}
                    <div class="clearfix"></div>
                    {{ Form::select('primary[]', ['YES'=>'YES','NO'=>'NO'], 'NO',['class'=>'form-control','id'=>'primary']) }}
                                    </div>
            </div>
            <div class="col-md-1">
                <div class="form-group ">
                    {{ Form::label(__('lbl.action')) }}
                    <div class="clearfix"></div>
                    {{ Form::button('<i class="fa fa-trash"></i> ', ["class"=>"btn btn-primary btn-sm clickbtncommon remove_stockitemedit ","id"=>"remove_stockitemedit","name"=>"remove_stockitemedit[]"]) }}
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- Hidden area end -->
    <!-- ATTRIBUTES AREA -->
    <div id="attributes_area" style="display:none">
        <div id="attributes_group">
            <!-- <div class="col-md-4">
                <div class="form-group">
                    <label for="product_group">{{ __('lbl.group_name') }}</label>
                    <input class="form-control mxlen_25 group_name" placeholder="{{ __('lbl.group_name') }}" name="product_group[]" type="text" value="" />
                </div>
            </div> -->
            <div class="col-md-4">
                <div class="form-group">
                    <label for="product_group">{{ __('lbl.action') }}</label>
                    <div class="clearfix"></div>
                    <button name="add_group_item" class="add_group_item btn btn-sm btn-primary clickbtncommon btn-sm " id="add_group_item" type="button" title="Add Group Item"><i class="fa fa-plus-circle"></i>
                        {{ __('lbl.add_item') }} </button>
                    <button name="remove_group[]" class="remove_group btn btn-sm btn-primary clickbtncommon btn-sm " id="remove_group" type="button" title="Remove Group"><i class="fa fa-trash"></i>
                        {{ __('lbl.remove_group')}} </button>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="items_header_section">
                <div class="col-md-3">
                    <div class="form-group no-margin">
                        <label>{{ __('lbl.item_name') }}</label>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group no-margin">
                        <label>{{ __('lbl.sku') }}</label>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group no-margin">
                        <label>{{ __('lbl.barcode') }}</label>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group no-margin">
                        <label>{{ __('lbl.color') }}</label>
                    </div>
                </div>
                <div class="col-md-1">
                    <div class="form-group no-margin">
                        <label>{{ __('lbl.cost') }}</label>
                    </div>
                </div>
                <div class="col-md-1">
                    <div class="form-group no-margin">
                        <label>{{ __('lbl.price') }}</label>
                    </div>
                </div>
                <div class="col-md-1">
                    <div class="form-group no-margin">
                        <label>{{ __('lbl.action') }}</label>
                    </div>
                </div>
            </div>
            <div class="items_area"></div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- ITEM AREA -->
    <div id="attributes_area_item" style="display:none">
        <div id="attributes_group_items">
            <div class="col-md-3">
                <div class="form-group">
                    <input class="item_id" type="hidden" value="" />
                    <input class="form-control mxlen_30 item_name" placeholder="{{ __('lbl.item_name') }}" name="item_name[]" type="text" value="" />
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <input class="form-control mxlen_15 sku" placeholder="{{ __('lbl.sku') }}" name="sku[]" type="text" value="" />
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <input class="form-control mxlen_15 barcode" placeholder="{{ __('lbl.barcode') }}" name="barcode[]" type="text" value="" />
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    @if(config('constants.color_codes'))
                        <select name="color[]" class="form-control color">
                        @foreach(config('constants.productColor') as $key => $v)
                            <option value="{{$key}}" >{{$v}}</option>
                        @endforeach
                        </select>
                    @endif
                </div>
            </div>
            <div class="col-md-1">
                <div class="form-group">
                    <input class="form-control mxlen_8 cost" onkeypress="return validateFloatKeyPress(this, event)" placeholder="{{ __('lbl.cost') }}" name="cost[]" type="text" value="" />
                </div>
            </div>
            <div class="col-md-1">
                <div class="form-group">
                    <input class="form-control mxlen_8 price" onkeypress="return validateFloatKeyPress(this, event)" placeholder="{{ __('lbl.price') }}" name="price[]" type="text" value="" />
                </div>
            </div>
            <div class="col-md-1">
                <div class="form-group">
                    <div class="clearfix"></div>
                        <!-- <a href="#" group_name="" item_name="" product_id="" group_id="" group_item_id=""  establishment_id="" ingredientLog="" title="Add Ingredient" class="add_ingredient_item_a" data-toggle="modal" data-target="#modal-ingredient"><button class="add_ingredient_item btn btn-sm btn-primary clickbtncommon btn-sm" type="button" title="Add Ingredient"><i class="fa fa-plus"></i></button></a> -->
                    <button class="remove_group_item btn btn-sm btn-primary clickbtncommon btn-sm" type="button" title="Remove Group"><i class="fa fa-trash"></i></button>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- ATTRIBUTES AREA -->
</div>

<!-- INGREDIENT SECITON -->
<div style="display:none;">
    <table id="ingredientLogTable">
        <tr>
            <td class='text-center'><input id='ingredientNameNew' name='ingredient_name[]' value='' type='text' class='logtime form-control text-center' style='position:relative' ></td>
            <td class='text-center'><input id="quantityNew" name='quantity[]' value='' type='text' class='form-control text-center' ></td>          
            <td class='text-center'><select id="unitNameNew" name='unit_name[]' class='form-control'><option value='unit'>Unit</option><option value='lb'>LB</option></select></td>
            <td class='text-center'>
                <button id='' class='btn btn-sm btn-success store_ingredient' data-type='0' data-id='' ><i class='fa fa-save'></i></button> &nbsp;&nbsp;
                <button id='' class='btn btn-sm btn-danger remove_ingredient' data-type='0'><i class='fa fa-trash-o'></i></button>
                <input type='hidden' id="recordIdNew" name='id[]' value=''>
                <input type='hidden' id="rowType" name='rowType[]' value='new'>
            </td>
        </tr>
    </table>
</div>
<div class="modal fade" id="modal-ingredient">
    <div class="modal-dialog"> 
        {{ Form::open(["class"=>"form-horizontal", "method"=>"POST", "name" => "modal_ingredient", "id" => "modal_ingredient"]) }}
        <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" id="title-ingredient"> 
                    {{__('lbl.add_ingredient')}} 
                </h4>
            </div>
            <div class="modal-body">
                <div class="tab-pane" id="price_options">
                    <table class="table table-bordered" id="productIngredientdata" with="50%">
                        <thead>
                            <tr>
                                <th scope="col" class="text-center" width="20%">{{__('lbl.ingredient_name')}}</th>
                                <th scope="col" class="text-center" width="10%">{{__('lbl.quantity')}}</th>
                                <th scope="col" class="text-center" width="10%">{{__('lbl.unit')}}</th>
                                <th scope="col" class="text-center" width="10%">{{__('lbl.action')}}</th>
                            </tr>
                        </thead>
                        <tbody id="productIngredientdataBody">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-md-12 text-center">
                        {{ Form::button('<i class="fa fa-plus-circle"></i> '.__('lbl.add_new_ingredient'), ["type"=>'button', "id"=>"addIngredientItem","value"=>__('lbl.saveall'), 'class' => 'clickbtncommon btn-sm btn btn-primary'] ) }}
                        {{ Form::button('<i class="fa fa-backward"></i> '.__('lbl.close'), ["data-dismiss"=>"modal", "value"=>__('lbl.cancel'), 'class' => 'clickbtncommon btn-sm btn btn-primary '] ) }} 
                    </div>
                </div>
            </div>
            <input type="hidden" id="attributes_establishment_id" name="attributes_establishment_id" />
            <input type="hidden" id="attributes_product_id" name="attributes_product_id" />
            <input type="hidden" id="attributes_group_id" name="attributes_group_id" />
            <input type="hidden" id="attributes_group_item_id" name="attributes_group_item_id" />
        </div>
        {{ Form::close() }}
    </div> 
</div>
{{Form::hidden('ingredientaddupdate',route('ingredientaddupdate'),['id'=>'ingredientaddupdate'])}} 
{{Form::hidden('ingredientItemdelete',route('ingredientItemdelete'),['id'=>'ingredientItemdelete'])}}
{{Form::hidden('ingredientItemlog',route('ingredientItemlog'),['id'=>'ingredientItemlog'])}} 

<!-- ingredient hidden data -->
<!-- INGREDIENT SECITON -->

<!-- Modal -->
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button> -->

<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header text-center"><h4 class="modal-title">Please wait...<i class="fa fa-hand-paper-o" aria-hidden="true"></i></h4></div>
            <div class="modal-body">
                <div class="text-center">
                    <h5>Please do not refresh or close your browser while we process...</h5>
                    <button type="button" class="btn btn-primary btn-sm clickbtncommon ajax" title="Ajax Request" style="color: #000;background: none;border: none;font-size: 19px;">
                        <i class="fa fa-spin fa-refresh"></i>&nbsp; Processing...
                    </button>
                </div>
            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>  
            </div> -->
        </div>
    </div>
</div>

<div class="modal fade" id="errorBlock" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header text-center"><h4 class="modal-title">Error!</h4></div>
            <div class="modal-body">
                <div id="responseError"></div>    
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-sm clickbtncommon" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection @section('pagescript') 
{!! Helper::pagejs([ 
    'js/lib/select2/dist/js/select2.full.min.js', 
    'js/lib/moment/min/moment.min.js', 
    'js/lib/bootstrap-daterangepicker/daterangepicker.js', 
    'js/lib/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js',
    'js/lib/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js', 
    'js/lib/plugins/timepicker/bootstrap-timepicker.min.js', 
    'js/lib/tags/bootstrap-tagsinput.min.js',
    'js/backend/producttab/add_edit.js', 
    'js/backend/producttab/productmodifiers.js', 
    'js/backend/producttab/productingredient.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' ]) !!}

<script type="text/javascript">
    $(document).ready(function() {
        $(".pickacolor").pickAColor({
            showSpectrum: true,
            showSavedColors: true,
            saveColorsPerElement: true,
            fadeMenuToggle: true,
            showAdvanced: true,
            showBasicColors: true,
            showHexInput: true,
            allowBlank: true,
            inlineDropdown: true
        });
    });

    function showMySection(evt, divId) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(divId).style.display = "block";
        evt.currentTarget.className += " active";
    }

    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();

</script>
@stop