@extends('layouts.app')
@section('title', 'Custom Fields | Shopping Cart')
@section('extrastyles')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    {!! RTEForm::css()  !!}
    <link href="{{ asset('/plugins/chosen/bootstrap-chosen.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('plugins/select2/select2.css') }}">
@endsection

@section('content')
    <style>
        #fields_content .main_title {
            float: right;
            color: lightgrey;
        }
        #fields_content li.ui-widget-content{
            width: 96% !important;
        }
        .tabs-container .note-editing-area .panel-body {
            margin-left: 0;
            width: 100%;
        }
        .notification_type {
            display: none;
        }
        #form_equation {
            margin-bottom: 20px;
        }
        .form_conditions{
            margin-top: 10px;
        }
        .float-left{
            float: left !important;
        }
        .custom_padding {
            padding: 2px;
        }
        .well-sm {
            margin: 0;
            margin-top: 10px;
        }
        #fields_content {
            float: left;
            width: 65%;
            min-height: 18em;
            padding: 1%;
            position: relative;
        }
        #fields_extra_content {
            float: left;
            width: 65%;
            min-height: 18em;
            padding: 1%;
            position: relative;
        }

        .ui-widget-content {
            border: 1px solid #ddd;
            left: auto;
            top: auto;
        }
        .form_fields {
            padding: 10px;
            float: right;
            width: 100%;
            min-height: 12em;
            /*border: 1px solid #ddd;*/
            background: #f9f9f9 none repeat scroll 0 0;
            list-style: none;
        }
        .form_fields li.ui-widget-content {
            float: left; width: 140px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; z-index: 9999!important; ,list-style: none;}
        .form_fields li.ui-widget-content label { margin: 0; cursor: move; }
        .form_fields li.ui-widget-content a { float: right; }

        #fields_content {
            float: left;
            width: 65%;
            min-height: 18em;
            padding: 1%;
            position: relative;
        }

        #fields_content li.ui-widget-content {
            width: 98%; float:
            left; margin-right: 0px;
            text-align: left;
            padding-left: 10px;
            padding-right: 10px;
            margin-bottom: 20px;
        }
        #fields_content h4 { line-height: 16px; margin: 0 0 0.4em; }
        #fields_content li.ui-widget-content input:disabled { cursor: pointer;}

        .item_detail_info {
            padding: 20px;
            display: none;
        }
        .item_detail_info input ,.item_detail_info textarea{
            font-weight: normal;
        }
        .item_detail_info .option_row, .item_detail_info .option_answer {
            display: none;
        }
        .field-hide {
            display: none;
        }

        .col-md-6.inner-field-content.ui-droppable .rte-form-editor{
            width: 100% !important;
        }

        .select2-container {
            z-index: 99999;
        }

    </style>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content p-md" style="min-height:600px">
                    @include('flash::message')
                    <div class="clearfix"></div>
                    <div class="ui-widget ui-helper-clearfix" id="setting_fields">
                        <div class="row">
                            {!! Form::open(['id' => 'fields_form','novalidate' => 'novalidate', 'onsubmit' => 'return saveFields();']) !!}
                            <div class="row">
                                <div class="col-sm-9">
                                    <div class="panel-body">
                                        @include('Product::custom-field.tabs._fields')
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <ul id="form_fields" class="form_fields ui-helper-reset ui-helper-clearfix col-sm-12" style="width: 100% !important;">
                                        <li class="ui-widget-content ui-corner-tr">
                                            <label class="main_title">Single Line Text</label>
                                            <input type="hidden" name="type[]" class="field_type" value="text">
                                            <input name="field_id[]" value="0" class="field_id" type="hidden">
                                        </li>
                                        <li class="ui-widget-content ui-corner-tr">
                                            <label class="main_title">Date Selector</label>
                                            <input name="field_id[]" value="0" class="field_id" type="hidden">
                                            <input type="hidden" name="type[]" class="field_type" value="date">
                                        </li>
                                        <li class="ui-widget-content ui-corner-tr">
                                            <label class="main_title">Email</label>
                                            <input type="hidden" name="type[]" class="field_type" value="email">
                                            <input name="field_id[]" value="0"  class="field_id" type="hidden">
                                        </li>
                                        <li class="ui-widget-content ui-corner-tr">
                                            <label class="main_title">Paragraph Text</label>
                                            <input name="field_id[]" value="0" type="hidden">
                                            <input type="hidden" name="type[]" class="field_type" value="textarea">
                                        </li>
                                        <li class="ui-widget-content ui-corner-tr">
                                            <label class="main_title">Radio Buttons</label>
                                            <input name="field_id[]" class="field_id" value="0" type="hidden">
                                            <input type="hidden" name="type[]" class="field_type" value="radio">
                                        </li>
                                        <li class="ui-widget-content ui-corner-tr">
                                            <label class="main_title">Drop Down</label>
                                            <input name="field_id[]" value="0" type="hidden">
                                            <input type="hidden" name="type[]" class="field_type" value="select">
                                        </li>
                                        <li class="ui-widget-content ui-corner-tr">
                                            <label class="main_title">Checkboxes</label>
                                            <input name="field_id[]" class="field_id" value="0" type="hidden">
                                            <input type="hidden" name="type[]" class="field_type" value="checkbox">
                                        </li>
                                        <li class="ui-widget-content ui-corner-tr">
                                            <label class="main_title">Phone Number</label>
                                            <input type="hidden" name="type[]" class="field_type" value="phone">
                                            <input name="field_id[]" class="field_id" value="0" type="hidden">
                                        </li>
                                        <li class="ui-widget-content ui-corner-tr not-dragable">
                                            <label class="main_title">Two Column Row</label>
                                            <input type="hidden" name="type[]" class="field_type" value="two-column-row">
                                            <input name="field_id[]" class="field_id" value="0" type="hidden">
                                        </li>
                                        <li class="ui-widget-content ui-corner-tr not-dragable">
                                            <label class="main_title">Text Description</label>
                                            <input type="hidden" name="type[]" class="field_type" value="text-description">
                                            <input name="field_id[]" class="field_id" value="0" type="hidden">
                                        </li>
                                        <li class="ui-widget-content ui-corner-tr not-dragable">
                                            <label class="main_title">Address</label>
                                            <input type="hidden" name="type[]" class="field_type" value="address block">
                                            <input name="field_id[]" class="field_id" value="0" type="hidden">
                                        </li>
                                        <li class="ui-widget-content ui-corner-tr">
                                            <label class="main_title">Upload</label>
                                            <input name="field_id[]" class="field_id" value="0" type="hidden">
                                            <input type="hidden" name="type[]" class="field_type" value="file">
                                        </li>
{{--                                        <li class="ui-widget-content ui-corner-tr calculate_result_field">--}}
{{--                                            <label class="main_title">HTML Content</label>--}}
{{--                                            <input type="hidden" name="type[]" class="field_type" value="html-content">--}}
{{--                                            <input name="field_id[]" class="field_id" value="0" type="hidden">--}}
{{--                                        </li>--}}
                                    </ul>
                                    <div class="clearfix"></div>
                                    <button type="submit" class="btn btn-primary pull-right" style="margin-top: 20px;">Update</button>
                                </div>
                            </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script src="{{ asset('/plugins/chosen/chosen.jquery.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
    {!! RTEForm::js()  !!}
    <script src="{{ asset('/plugins/select2/select2.js') }}"></script>
    <script>
        var form_equation = false;
        var field_index = 0;
        var fieldCounter = $('#fields_content').find('.ui-widget-content').length;
        fieldCounter = ( fieldCounter || fieldCounter ) < 1 ? 1  : fieldCounter;
{{--        @if($form->type == 'calculator')--}}
{{--            form_equation = true;--}}
{{--        @endif--}}
        var count_form_equation = 0;
        $(document).ready(function() {
            initializeSummerNote();
            doSendToEmail();
            $('.fieldVisibility ,.fieldCountries, .fieldRoles').select2();
            $('#in-tab-notification input[type=radio]').change(function () {
                var value = $(this).val();
                $('.notification_type').hide();
                $('.notification_type#type_'+value).show();
            })
            count_form_equation = $("#total_equation_fields").val();
            $("#fields_form #form_type").on('change', function () {
                showEquation($(this).val());
            });
            innerContentDraggable();

            $('.chosen-select').chosen({width: "100%"});
            var $form_fields = $( "#form_fields" ),
                $fields_content = $( "#fields_content" );

            $( "#fields_content ul li" ).each(function( index , element) {
                const title_text = $( element ).closest('ul').closest('li').find('.main_title').text();
                const is_child = title_text.indexOf('Two-column-row') > -1 ? true : false;
                $( element ).attr('field-counter', index + 1);
                applyAction( $( element ),is_child );
            });

            $( "li", $form_fields ).draggable({
                revert: "invalid",
                containment: "document",
                helper: "clone",
                cursor: "move"
            });
            $fields_content.droppable({
                accept: "#form_fields > li",
                classes: {
                    "ui-droppable-active": "ui-state-highlight"
                },
                drop: function( event, ui ) {
                    var clonedField = ui.draggable.clone();
                    clonedField.attr('field-counter', fieldCounter);
                    fieldCounter++;
                    cloneField( clonedField, $fields_content );
                    $('.fieldVisibility ,.fieldCountries, .fieldRoles').select2();
                    innerContentDraggable();
                    if($(clonedField).find(' .rte-form-editor').length > 0) {
                        startJoditEditor($(clonedField).find(' .rte-form-editor'));
                    }
                }
            }).sortable({
                items: "li:not(.placeholder)",
                sort: function () {
                    $(this).removeClass("ui-state-default");
                }
            });

            function innerContentDraggable() {
                const $inner_field_content = $('.inner-field-content')
                $inner_field_content.droppable({
                    greedy: true,
                    accept: "#form_fields > li",
                    classes: {
                        "ui-droppable-active": "ui-state-highlight"
                    },
                    drop: function( event, ui ) {
                        if(ui.draggable.hasClass('not-dragable')){
                            return
                        }
                        var clonedField = ui.draggable.clone();
                        clonedField.attr('field-counter', fieldCounter);
                        fieldCounter++;
                        cloneField( clonedField, $(this) , true );
                    }
                });
            }

            var recycle_icon = "<a href='javascript:void(0)' tabindex='-1' title='Delete'><i class='fa fa-trash'></i></a>";
            var field_validation_row = '<div class="field_validation_row row">' +
                '<div class="form-group col-sm-6">' +
                '<label>Min value length: </label>' +
                '{!! Form::text('field_min_value[]' , 3, ['class' => 'form-control', 'placeholder' => '3']) !!}' +
                '</div>' +
                '<div class="form-group col-sm-6">' +
                '<label>Max value length: </label>' +
                '{!! Form::text('field_max_value[]' , null, ['class' => 'form-control', 'placeholder' => '250']) !!}' +
                '</div>' +
                '</div>';


            let isFieldVisible = '{!! !isset($stepId) !!}';
            var detail_info = '<div class="item_detail_info">' +
                '<div class="form-group html-text-description">{!! RTEForm::rte('description[]','') !!}</div>'  +
                '<div class="form-group"><label>Title *</label>{!! Form::text('title[]' , null, ['class' => 'input_title form-control']) !!}</div>'  +
                '<div class="form-group"><label>Placeholder </label>{!! Form::text('place_holder[]' , null, ['class' => 'input_place_holder form-control']) !!}</div>'  +
                '<div class="form-group phone_number_format_row"><label>Phone Format </label>{!! Form::text('phone_format[]' , null, ['class' => 'input_phone_format form-control', 'required' => true, 'data-phone-format' => 'true']) !!}<small>(999)999-9999</small></div>'  +
                '<div class="form-group fieldType"> <label>Field Type</label>{!! Form::select('fieldType[]', ['text' => 'Single Line Text','email' => 'Email','first_name' => 'First Name','last_name' => 'Last Name', 'password' => 'Password', 'enroller' => 'Enroller'], '', ['class' => 'form-control','required' => true]) !!}</div>'+
                `<div class="form-group" style="display:${isFieldVisible ? 'block' : 'none'}">{!! Form::label('visibility','Visibility') !!}{!! Form::select('visibility['.rand(10,100).'][]', \App\Helpers\CustomFieldHelper::getAllVisibilityOptions() , ['all'] , ['id' => 'fieldVisibility','class' => 'form-control fieldVisibility','multiple' => true,'style' => 'width:100%;']) !!}</div>`+
                `<div class="form-group isOrderModuleDiv"><input name="orderModule" value="1" type="checkbox"><label class="ml-1">Order </label>{!! Form::hidden('isOrderModule[]' ,0,['class' => 'isOrderModule ']) !!}</div>`+
                `<div class="form-group" style="display:${isFieldVisible ? 'block' : 'none'}">{!! Form::label('countries','Countries') !!}{!! Form::select('countries['.rand(10,100).'][]', \App\Helpers\CustomFieldHelper::getAllCountriesOptions() , ['all'] , ['id' => 'fieldCountries','class' => 'form-control fieldCountries','multiple' => true,'style' => 'width:100%;']) !!}</div>`+
                `<div class="form-group" style="display:${isFieldVisible ? 'block' : 'none'}">{!! Form::label('roles','Roles') !!}{!! Form::select('roles['.rand(10,100).'][]', \App\Helpers\CustomFieldHelper::getAllRolesOptions() , ['all'] , ['id' => 'fieldRoles','class' => 'form-control fieldRoles','multiple' => true,'style' => 'width:100%;']) !!}</div>`+
                '<div class="form-group description_row"><label>Description</label>{!! Form::textarea('description[]' , null, ['rows' => 3,'class' => 'form-control']) !!}</div>' +
                '<div class="form-group custom_class_form"><label>Extra Class</label>{!! Form::text('custom_class[]' , null, ['class' => 'form-control']) !!}</div>' +
                '<div class="form-group option_row"><label>Options</label>{!! Form::textarea('options[]' , 'Option One\nOption Two\nOption Three', ['rows' => 5,'class' => 'form-control']) !!}</div>' +
                '<div class="form-group option_column_row"><label>Columns</label>{!! Form::select('option_columns[]' ,['1' => 1,'2' => 2,'3' => 3] ,null, ['class' => 'form-control']) !!}</div>' +
                '<div class="form-group option_answer"><label>Correct Answer *</label>{!! Form::text('correct_ans[]' , null, ['class' => 'form-control']) !!}</div>'  +
                '<div class="form-group enable_confirm_email"><label>Enable Confirmation Email </label> {!! Form::checkbox('enable_confirm_email_it' ,1 ,null) !!}</div>{!! Form::hidden('enable_confirm_email[]' ,0,['class' => 'enable_confirm_email_check']) !!}'  +
                '<div class="form-group confirm_email_label">{!! Form::text('confirm_email_label[]' , 'Confirm', ['class' => 'form-control']) !!}</div>'  +
                '<div class="form-group multiple_fields_row"><label>Add Multiple </label> {!! Form::checkbox('multiple_field_it' ,1 ,null ,['class' => 'multiple_field_it']) !!}{!! Form::hidden('multiple_fields[]' ,0,['class' => 'multiple_field ']) !!} </div>'  +
                '<div class="field_validation_row_multiple row" style="display : none">'  +
                '<div class="form-group col-sm-6">'  +
                '<label>Min Fields: </label>'  +
                '{!! Form::text('min_fields[]' , 1, ['class' => 'form-control', 'placeholder' => '1']) !!}'  +
                '</div>'  +
                '<div class="form-group col-sm-6">'  +
                '<label>Max Fields: </label>'  +
                '{!! Form::text('max_fields[]' , '', ['class' => 'form-control', 'placeholder' => '']) !!}'  +
                '</div>'  +
                '</div>'  +
                '<div class="form-group multiple_files_row"><label>Allow Multiple Files With Drag & Drop </label> {!! Form::checkbox('multiple_files_it' ,1 ,null) !!}{!! Form::hidden('multiple_files[]' ,0,['class' => 'multiple_files']) !!} </div>'  +
                '<div class="form-group file_type_row"><label>File Type </label> {!! Form::select('upload_files_type[]', ['any' => 'Any', 'image' => 'Image'], null, ['class' => 'form-control']) !!} </div>'  +
                '<div class="file_extra_row"><div class="form-group col-sm-6 no-padding"><label>Allowed File Types </label> <input type="text" name="allowed_file_types[]" value="{{ default_upload_files() }}" class="form-control" placeholder="800"> <i>Note: jpg,jpeg,bmp,png,tiff,gif,docx,xls,odt,pdf,ods,pptx,txt,xml</i></div>' +
                '<div class="form-group col-sm-6"><label>Allowed File Max Size </label> <input type="number" name="allowed_file_max_size[]" value="30" class="form-control" placeholder="800"> <i>Maximum: 30MB</i></div></div><div class="clearfix"></div>' +
                '<div class="file_dimension_row">' +
                '<div class="form-group col-sm-6"><label>Image Width </label> <input type="number" name="upload_file_width[]" value="0" class="form-control" placeholder="800"> </div>'  +
                '<div class="form-group col-sm-6"><label>Image Height </label> <input type="number" name="upload_file_height[]" value="0" class="form-control" placeholder="800"> </div><div class="clearfix"></div>'  +
                '<div class="form-group col-sm-6"><label>Image Max Width </label> <input type="number" name="upload_max_file_width[]" value="0" class="form-control" placeholder="800"> </div>'  +
                '<div class="form-group col-sm-6"><label>Image Max Height </label> <input type="number" name="upload_max_file_height[]" value="0" class="form-control" placeholder="800"> </div><div class="clearfix"></div>' +

                '</div>'+
                '<div class="form-group multiple_files_max_input_row"><label>Number Of Files to upload?</label><input type="number" name="max_files_to_upload[]" value="4" class="form-control" placeholder="4"> </div>'  +
                '<div class="form-group required_row"><label>Required </label> {!! Form::checkbox('required_it' ,1 ,null) !!}</div>{!! Form::hidden('requires[]' ,0,['class' => 'require_field']) !!}'  +
                {{--'<div class="form-group show_text_editor_row"><label>Show Text Editor </label> {!! Form::checkbox('show_text_editor_it' ,1 ,null) !!}</div>{!! Form::hidden('show_text_editor[]' ,0,['class' => 'show_text_editor_field']) !!}'  +--}}
                field_validation_row +
                '<div class="form-group enable_condition_row" style="display:none;"><label>Enable Conditional Logic </label> {!! Form::checkbox('enable_condition_it' ,1 ,null) !!}</div>{!! Form::hidden('enable_condition[]' ,0,['class' => 'enable_condition_field']) !!}'  +
                '<div class="form-group form_conditions_row">' +
                '<div class="col-sm-12">{!! Form::select('condition_type[]', ['show' => 'Show', 'hide' => 'Hide'], null, ['class' => 'form-control condition_type', 'style' => 'width: 100px; float:left;']) !!} <span style="line-height: 30px;">this field if the following condition match</span> </div>'+
                '<div class="clearfix"></div>' +
                '<div class="row form_conditions">' +
                '<div class="col-sm-3 condition_fields"><select name="condition_fields[]" class="form-control condition_field_select"></select></div>' +
                '<div class="col-sm-3 condition_operator">{!! Form::select('condition_operator[]', \App\Modules\Website\Models\WebsiteFormField::condition_operator(), null, ['class' => 'form-control']) !!}</div>' +
                '<div class="col-sm-3 condition_field_value">{!! Form::text('condition_value[]', null, ['class' => 'form-control']) !!}</div>'+
                '<input type="hidden" name="selected_condition_field" value="0">'+
                '<input type="hidden" name="selected_condition_value" value="">'+
                '</div>'+
                '</div>' +
                '<div class="form-group custom_post_field_row">' +
                '<label>Assign Field Value Post Field</label>' +
                '<select name="custom_post_fields[]" class="form-control custom_post_field_select"></select>' +
                '<input type="hidden" name="selected_custom_post_field" value="">' +
                '</div>'  +
                '<div class="form-group custom_post_custom_field_row">' +
                '<label>Assign Field Value Post Custom Field</label>' +
                '<select name="custom_post_fields[]" class="form-control custom_post_field_select"></select>' +
                '<input type="hidden" name="selected_custom_post_field" value="">' +
                '</div>'  +

                '</div>';

            function cloneField( $item, $parent, is_child = false) {
                const $dropeedParent = $parent || $fields_content;
                var field_name_equation_title = '';
                var field_name_equation = '';
                var field_untitled = '';
                if(form_equation && $.trim($item.find('label.main_title').text()) != 'Calculate Result') {
                    count_form_equation = parseInt(count_form_equation) + 1;
                    $("#total_equation_fields").val(count_form_equation);
                    field_name_equation = 'F'+count_form_equation;
                    field_name_equation_title = '(F'+count_form_equation+')';
                }
                if(field_name_equation_title == '') {
                    field_untitled = 'Untitled';
                }
                var parent_class = $('.form_fields.ui-helper-reset.form-main-content');
                var $list = '';
                if($( "ul", $dropeedParent ).length && is_child) {
                    $list = $( "ul", $dropeedParent );
                } else {
                    if(parent_class.length > 0) {
                        $list = parent_class.appendTo( $dropeedParent );
                    }
                    else {
                        $list = $( "<ul class='form_fields ui-helper-reset form-main-content' />" ).appendTo( $dropeedParent );
                    }
                }
                if($parent && $list.children().length > 0 && is_child){
                    return
                }

                $item.append( '<div class="form-group"><input type="hidden" name="equation_field_name[]" value="'+field_name_equation+'"><label class="main_untitled">'+field_untitled+'</label> '+field_name_equation_title+'{!! Form::text('placeholders' , null, ['class' => 'form-control','readonly']) !!}</div>' );
                $item.append( recycle_icon ).append( detail_info ).appendTo( $list ).fadeIn('slow');

                applyAction($item,is_child);
                $item.find('input[name=placeholders]').click();

                $($item).find('.item_detail_info .multiple_fields_row .multiple_field_it').change(function () {
                    if($(this).prop("checked")){
                        $($item).find('.item_detail_info .field_validation_row_multiple').show();
                    } else{
                        $($item).find('.item_detail_info .field_validation_row_multiple').hide();
                    }
                });

                $($item).find('.item_detail_info .isOrderModuleDiv input[name=orderModule]').change(function () {
                    if($(this).prop("checked")){
                        $(this).closest('.isOrderModuleDiv').find('.isOrderModule').val(1);
                    } else{
                        $(this).closest('.isOrderModuleDiv').find('.isOrderModule').val(0);
                    }
                });

            }
            $('.nav-tabs li').click(function () {
                $(this).addClass("active");
                $('.nav-tabs li').not($(this)).removeClass('active');
            });

        });

        function applyAction( $item ,is_child) {
            $item.prepend(`<input type="hidden" name="field_counter[]" id="field_counter" value="${$item.attr('field-counter')}">`);
            if(!is_child) {
                $item.prepend(`<input type="hidden" name="parent_id[]" id="parent_id" value="">`);
            }
            else {
                setTimeout(() => {
                    var parentItem = $item.closest('ul').closest('li').closest('li');
                    var parent_id = $item.closest('ul').closest('li').closest('li').find('#field_index').val();
                    parent_id = parentItem.attr('field-counter');
                    var parent = $item.find('#parent_id').val();
                    if(parent === undefined) {
                        $item.prepend(`<input type="hidden" name="parent_id[]" id="parent_id" value="${parent_id}">`);
                    }
                    else{
                        $item.find('#parent_id').val(parent_id);
                    }
                },0);
            }

            var main_title = $.trim($item.find('label.main_title:first').text());
            $item.prepend(`<input type="hidden" name="field_index[]" id="field_index" value="${field_index}">`);
            field_index ++;
            $item.find('.enable_confirm_email').hide();
            $item.find('.confirm_email_label').hide();
            $item.find('.multiple_fields_row').hide();
            $item.find('.multiple_files_row').hide();
            $item.find('.custom_post_field_row').hide();
            $item.find('.custom_post_custom_field_row').hide();
            $item.find('.show_text_editor_row').hide();
            $item.find('.multiple_files_max_input_row').hide();
            $item.find('.file_extra_row').hide();
            $item.find('.file_type_row').hide();
            $item.find('.file_dimension_row').hide();
            $item.find('.phone_number_format_row').hide();
            $item.find('.field_validation_row').hide();
            if(main_title == 'Calculate Result' && $item.find('input.input_title').val() == '') {
                $item.find('input.input_title').val('Total');
                $item.closest('li').find('.main_untitled').text('Total');
            }
            $item.find('input[name=placeholders]').unbind('click');
            $item.find('input[name=placeholders]').click(function () {
                $(this).closest('li').find('.item_detail_info').toggle('slow');
            });
            $item.find('input[name=required_it]').click(function () {
                $(this).closest('li').find('input.require_field').val(this.checked);
            });
            $item.find('input.input_title').keyup(function () {
                $(this).closest('li').find('.main_untitled').text($(this).val());
                var input_place_holder = $(this).closest('li').find('.input_place_holder').val();
                if(input_place_holder == '') {
                    $(this).closest('li').find('.input_place_holder').text($(this).val());
                }
            });

            if(main_title === 'Text-description' || main_title === 'Text Description') {
                const parentDiv = $item.find('.item_detail_info');
                $(parentDiv).find("input[name='title[]']").val('text description')
                $(parentDiv).find("input[name='title[]']").closest('.form-group').hide();
                $(parentDiv).find("input[name='place_holder[]']").closest('.form-group').hide();
                $(parentDiv).find("label[for='ds_custom_field']").closest('.form-group').hide();
                $(parentDiv).find("input[name='short_code[]']").closest('.form-group').hide();
                $(parentDiv).find('.description_row').remove();
                $(parentDiv).find("input[name='custom_class[]']").closest('.form-group').hide();
                $(parentDiv).find('.option_column_row').hide();
                $(parentDiv).find("input[name='required_it']").closest('.form-group').hide();
                $(parentDiv).find('.html-text-description').show();
            }else{
                const parentDiv = $item.find('.item_detail_info');
                $(parentDiv).find('.html-text-description').remove();
            }

            // if(main_title !== 'Single Line Text') {
            //     $($item).find('.item_detail_info .fieldType').hide();
            // }

            if( main_title === 'First_name'
                || main_title === 'Last_name'
                || main_title === 'Password'
                || main_title === 'Enroller'
                || main_title === 'Email'
            ) {
                $($item).find('.item_detail_info .fieldType').hide();
            }

            if( main_title === 'Drop Down'          ||
                main_title === 'Checkboxes'         ||
                main_title === 'Radio Buttons'      ||
                main_title === 'Radio'              ||
                main_title === 'Checkbox') {
                $item.find('.option_row').css('display','block');
            }

            if( main_title === 'Single Line Text' ||
                main_title === 'Paragraph Text' ||
                main_title === 'Email' ||
                main_title === 'Address block' ||
                main_title === 'Date Selector' ||
                main_title === 'Calculate Result' ||
                main_title === 'Website' ||
                main_title === 'Phone Number' ||
                main_title === 'Country' ||
                main_title === 'Drop Down' ||
                main_title === 'Two Column Row') {
                $item.find('.option_column_row').hide();
            }

            if(main_title == 'Single Line Text' || main_title == 'Paragraph Text') {
                $item.find('.field_validation_row').css('display','block');
            }

            if(main_title == 'Phone Number')
                $item.find('.phone_number_format_row').css('display', 'block');

            if(main_title == 'Paragraph Text') {
                $item.find('.show_text_editor_row').css('display', 'block');
                if($item.find('.show_text_editor_row input[name=show_text_editor_it]').is(':checked')) {
                    $item.find('.show_text_editor_row .show_text_editor_field').val(1);
                } else{
                    $item.find('.show_text_editor_row .show_text_editor_field').val(0);
                }
                $item.find('.show_text_editor_row input[name=show_text_editor_it]').unbind('click');
                $item.find('.show_text_editor_row input[name=show_text_editor_it]').on('click', function () {
                    applyAction($item)
                });
            }

            var condition_field_options = '';
            var current_field_id = $item.find('.field_id').val();
            var selected_condition_field = $item.find('input[name=selected_condition_field]').val();
            var selected_field_value = $item.find('input[name=selected_condition_value]').val();
            $('.form_fields').find('li').each(function () {
                var field_id = $(this).find('.field_id').val();
                var field_title = $(this).find('.input_title').val();
                if (field_id > 0 && current_field_id != field_id && field_id != undefined) {

                    condition_field_options += '<option value="' + field_id + '"';
                    if(field_id == selected_condition_field) {
                        condition_field_options += ' selected="selected"';
                    }
                    condition_field_options += '>' + field_title + '</option>';
                }
            });
            $item.find('.form_conditions .condition_fields').find('.condition_field_select').html(condition_field_options);

            doSelectConditionValue($item.find('.condition_field_select').val(), $item);
            //$item.find('.form_conditions .condition_field_value').find('input').html(selected_field_value);

            if($item.find('input[name=enable_condition_it]').is(':checked')){
                $item.find('.form_conditions_row').show();
                $item.find('.enable_condition_field').val(1);

            } else {
                $item.find('.form_conditions_row').hide();
                $item.find('.enable_condition_field').val(0);
            }
            $item.find('input[name=enable_condition_it]').unbind('change');
            $item.find('input[name=enable_condition_it]').on('change', function () {
                applyAction($item)
            });


            if($item.find('.isOrderModuleDiv input[name=orderModule]').is(':checked')) {
                $item.find('.isOrderModuleDiv .isOrderModule').val(1);
            } else{
                $item.find('.isOrderModuleDiv .isOrderModule').val(0);
            }

            // if(main_title == 'Single Line Text' ||  main_title == 'Drop Down') {
            if(main_title == 'Single Line Text') {
                $item.find('.multiple_fields_row').css('display','block');
                if($item.find('.multiple_fields_row input[name=multiple_field_it]').is(':checked')) {
                    $item.find('.multiple_fields_row .multiple_field').val(1);
                } else{
                    $item.find('.multiple_fields_row .multiple_field').val(0);
                }
                $item.find('.multiple_fields_row input[name=multiple_field_it]').unbind('click');
                $item.find('.multiple_fields_row input[name=multiple_field_it]').on('click', function () {
                    applyAction($item)
                });
            }
            if(main_title == 'Email') {
                $item.find('.enable_confirm_email').show();
                if($item.find('.enable_confirm_email input[name=enable_confirm_email_it]').is(':checked')) {
                    $item.find('.enable_confirm_email .enable_confirm_email_check').val(1);
                    $item.find('.confirm_email_label').show();
                } else {
                    $item.find('.enable_confirm_email .enable_confirm_email_check').val(0);
                }
                $item.find('.enable_confirm_email input[name=enable_confirm_email_it]').unbind('click');
                $item.find('.enable_confirm_email input[name=enable_confirm_email_it]').on('click', function () {
                    applyAction($item)
                });
            }
            if(main_title == 'Calculate Result') {
                $item.find('.description_row').css('display','none');
                $item.find('.required_row').css('display','none');
            }
            if(main_title == 'Quiz') {
                $item.find('.option_answer').css('display','block');
            }
            if(main_title == 'HTML Content') {
                $item.find('.input_title').attr('type', 'hidden');
                $item.find('.input_title').val('HTML Content');
                $item.find('.input_title').change();
                $item.find('.input_place_holder').attr('type', 'hidden');
                $item.find('.input_title').closest('.form-group').find('label').css('display', 'none');
                $item.find('.input_place_holder').closest('.form-group').find('label').css('display', 'none');
                $item.find('.option_row').css('display', 'none');
                $item.find('.required_row').css('display','none');
            }

            if(main_title === 'Two Column Row') {
                const showCustomFields = {!! count($extraCustomFields) > 0 ? 1 : 0 !!};
                $item.find('.form-group .form-control:first').hide();
                var inputHtml = $item.html();
                $item.empty();
                $item.append('<div class="field-hide" />').html('<div class="field-hide">' + inputHtml + '</div>');
                $('.field-hide .item_detail_info .input_title').remove();
                var html = `<label class="main_title"> </label>
                                <input name="type[]" class="field_type" value="" type="hidden">
                                <input name="field_id[]" class="field_id" value="" type="hidden">
                                <input name="title[]" class="input_title" value="Two Column Row" type="hidden">
                                ${showCustomFields && '<input name="ds_custom_field[]" class="" value="" type="hidden">'}
                                <div class="form-group">
                                    <div class="container">
                                        <div class="row" style="margin-top: 20px; margin-bottom: 20px; width: 100%; margin-left: 0px">
                                            <div class="col-md-6 inner-field-content" style="min-height: 30px; border: 1px dotted;">
                                            <ul class="form_fields"> </ul>
                                        </div>
                                        <div class="col-md-6 inner-field-content" style="min-height: 30px; border: 1px dotted;">
                                            <ul class="form_fields"> </ul>
                                        </div>
                                    </div>
                                    </div>
                                 </div>
                            <a href="javascript:void(0)" tabindex="" title="Delete"><i class="fa fa-trash"></i></a>`;
                // $('.form_fields').append(html);
                $item.append(html);
                $('#form_fields').find('.two-column-li').remove();
            }

            if($('.item_detail_info .option_answer').length > 0) {
                $('.quiz_setting').show();
            } else  {
                $('.quiz_setting').hide();
            }

            $item.find('a').on( "click", function( event ) {
                var $item = $( this );
                if(confirm('Are you sure you want to delete ? ')) {

                    if($item.closest('li').find('.field_id').val() != undefined) {
                        var deleted_value = $('input[name=deleted_fields]').val();
                        var new_deleted_value = '';
                        if (deleted_value == '')
                            new_deleted_value = $item.closest('li').find('.field_id').val();
                        else
                            new_deleted_value = deleted_value + '_' + $item.closest('li').find('.field_id').val();
                        $('input[name=deleted_fields]').val(new_deleted_value);
                    }
                    $item.closest('li').remove();

                    if($('.item_detail_info .option_answer').length > 0) {
                        $('.quiz_setting').show();
                    } else  {
                        $('.quiz_setting').hide();
                    }
                }
                return false;
            });
        }

        $(document).on('change', '.condition_field_select', function () {
            var field_id = $(this).val();
            var currentItem = $(this).closest('li');

            $(this).find('option').each(function (index, option) {
                if($(option).val() == field_id) {
                    $(option).attr('selected', 'selected');
                } else{
                    $(option).removeAttr('selected');
                }
            });
            doSelectConditionValue(field_id, currentItem);
        });

        $(document).on('change', '.condition_field_value select', function () {
            var fieldValue = $(this).val().trim();
            var currentItem = $(this).closest('li');

            currentItem.find('input[name=selected_condition_value]').val(fieldValue);
            $(this).find('option').each(function (index, option) {
                if($(option).val() == fieldValue) {
                    $(option).attr('selected', 'selected');
                } else{
                    $(option).removeAttr('selected');
                }
            });
            $(this).closest('li').find('.condition_field_value select').val(fieldValue);
        });

        function doSelectConditionValue(field_id, currentItem) {
            var item = $('.field_id[value='+field_id+']').closest('li');
            var field_type = item.find('.field_type').val();
            var selected_field_value = currentItem.find('input[name=selected_condition_value]').val();
            currentItem.find('.condition_field_value').html('');

            var condition_field_value = '<input name="condition_value[]" value="'+selected_field_value+'" class="form-control" />';
            if(field_type != undefined) {

                if (field_type == 'text' || field_type == 'textarea' || field_type == 'date') {

                    currentItem.find('.condition_field_value').html(condition_field_value);
                } else if (field_type == 'radio' || field_type == 'checkbox' || field_type == 'select' || field_type == 'quiz') {

                    var options = item.find('.option_row').find('textarea').val();
                    var select_box_options = '<option value=""></option>';
                    var option_split = options.split('\n');
                    for(i = 0; i< option_split.length; i++) {
                        select_box_options += '<option value="'+option_split[i]+'"';
                        if(selected_field_value == option_split[i]) {
                            select_box_options += ' selected="selected"';
                        }
                        select_box_options += '>'+option_split[i]+'</option>';
                    }
                    condition_field_value = '<select name="condition_value[]" class="form-control">'+select_box_options+'</select>';
                    currentItem.find('.condition_field_value').html(condition_field_value);
                }
            }
        }

        function doSendToEmail() {
            var field_content = makeSendToEmailRouting();
            field_content = '<div class="row well well-sm"><div class="form-group">'+field_content+'</div></div>';
        }

        $(document).on('click', '.add_send_to_email', function () {
            var field_content = makeSendToEmailRouting();
            var rand_number = (Math.random()+' ').substring(2,10)+(Math.random()+' ').substring(2,10);
            field_content = '<div class="row well well-sm" id="'+rand_number+'"><div class="form-group">'+field_content+'</div></div>';
            checkSendToRemoveButton();
        });

        $(document).on('click', '.remove_send_to_email', function () {
            if(confirm('Are you sure you want to remove it?')) {
                $(this).closest('.well-sm').remove();
            }
            checkSendToRemoveButton();
        });

        function checkSendToRemoveButton() {
            $('.to_email_routing_div').find('div.well-sm:first').find('.remove_send_to_email').hide();
        }

        $(document).on('change', '.to_email_routing_select', function () {
            var field_id  = $(this).val();
            var currentItem = $(this).closest('.well-sm');
            doSelectToEmailConditionValue(field_id, currentItem);
        });

        function makeSendToEmailRouting() {
            var sendToEmailValueField = '<div class="col-sm-12 custom_padding"><label>Send To :</label>{!! Form::text('to_email_routing_value[]', null, ['class' => 'form-control send_to_email_field_value']) !!}<small>Note: Separate multiple email addresses using commas</small></div></div>';
            var sendToEmailSelectField = '<div class="col-sm-12 custom_padding"><label>If </label></div><div class="col-sm-3 custom_padding"><select name="to_email_routing_field[]" class="form-control to_email_routing_select ">';
            var condition_field_options = '';
            $('.form_fields').find('li').each(function () {
                var field_id = $(this).find('.field_id').val();
                var field_title = $(this).find('.input_title').val();
                if (field_id > 0 && field_id != undefined) {

                    condition_field_options += '<option value="' + field_id + '"';
                    condition_field_options += '>' + field_title + '</option>';
                }
            });
            sendToEmailSelectField += condition_field_options;
            sendToEmailSelectField += '</select></div>';
            var sendToEmailOperator = '<div class="col-sm-2 custom_padding">{!! Form::select('to_email_routing_field_operator[]', \App\Modules\Website\Models\WebsiteFormField::condition_operator(), null, ['class' => 'form-control']) !!}</div>';
            var sendToFieldValueOptions = '<div class="col-sm-4 to_email_routing_field_option custom_padding"></div>';
            var buttons = '<div class="col-sm-3 action_buttons custom_padding"><a class="btn btn-primary btn-sm add_send_to_email"><i class="fa fa-plus"></i></a>';
            buttons += '<a class="btn btn-danger btn-sm remove_send_to_email"><i class="fa fa-minus"></i></a></div>' +
                '<input type="hidden" name="selected_to_email_routing_field_option_value" value="">' +
                '<input type="hidden" name="selected_to_email_routing_field" value="">' +
                '<div class="clearfix"></div>';
            return sendToEmailValueField+sendToEmailSelectField+sendToEmailOperator+sendToFieldValueOptions+buttons;
        }

        function doSelectToEmailConditionValue(field_id, currentItem) {

            var item = $('.field_id[value='+field_id+']').closest('li');
            var field_type = item.find('.field_type').val();
            var selected_field_value = currentItem.find('input[name=selected_to_email_routing_field_option_value]').val();
            currentItem.find('.to_email_routing_field_option').html('');

            var condition_field_value = '<input name="to_email_routing_field_option_value[]" value="'+selected_field_value+'" class="form-control" placeholder="Value" />';

            if(field_type != undefined) {

                if (field_type == 'text' || field_type == 'textarea' || field_type == 'date' || field_type == 'email') {

                    currentItem.find('.to_email_routing_field_option').html(condition_field_value);
                } else if (field_type == 'radio' || field_type == 'checkbox' || field_type == 'select' || field_type == 'quiz') {

                    var options = item.find('.option_row').find('textarea').val();
                    var select_box_options = '';
                    var option_split = options.split('\n');
                    for(i = 0; i< option_split.length; i++) {
                        select_box_options += '<option value="'+option_split[i]+'"';
                        if(selected_field_value == option_split[i]) {
                            select_box_options += ' selected="selected"';
                        }
                        select_box_options += '>'+option_split[i]+'</option>';
                    }
                    condition_field_value = '<select name="to_email_routing_field_option_value[]" class="form-control">'+select_box_options+'</select>';
                    currentItem.find('.to_email_routing_field_option').html(condition_field_value);
                }
            }
        }

        function saveFields() {
            $.when( saveFieldsAdd() ).done(function (data) {
                if(data != undefined && !data) {}
                else { location.reload(); }
            });
            return false;
        }

        function IsEmail(email) {
            var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if(!regex.test(email)) {
                return false;
            }else{
                return true;
            }
        }

        function saveFieldsAdd() {
            var dfd = $.Deferred();
            var parent_id = 'setting_fields';
            var name = $('#'+parent_id+' input[name=title]');
            if(name.val() == '') {
                name.focus();
                return false;
            }

            var allEmailIsValidate = true;
            $('#'+parent_id).find('.input_title').each(function () {
                var fieldType = $.trim($(this).closest('.ui-widget-content.ui-corner-tr').find('.field_type').val());
                let field_title = $(this).val();

                if(fieldType === 'checkbox' && field_title.trim() == '') {
                    $(this).val('checkbox');
                    field_title = $(this).val()
                }

                if(field_title.trim() == '') {
                    $(this).css('border', '1px solid red');
                    $(this).focus();
                    $(this).closest('.item_detail_info').show();
                    toastrShowError('There are form fields added to the form that have no title. Please specify a title before saving, or remove it, and try again.');
                    allEmailIsValidate = false;
                    return false;
                }
            });
            if(!allEmailIsValidate) {
                return false;
            }

            var data = $('#'+parent_id+' form').serialize() ;
            var btn  = $('#'+parent_id+' button[type=submit]');
            processBtnDisable(btn);
            var allowSubmit = true;
            if($('#'+parent_id+' form').find('input,select,textarea').length > 700) {
                var total_fields = $('#fields_content .form_fields li').length;
                var row_n = 0;
                for(i = 0; i < total_fields; i += 20) {

                    data = '_token='+csrf_token;
                    data += '&'+$('#basic_form_fields').find('input,select,textarea').serialize();
                    data += '&'+$('#tab-settings').find('input,select,textarea').serialize();
                    data += '&menu_order='+row_n;
                    for(j = i; j <= (i+20); j++) {
                        if($('#fields_content .form_fields').find('li:nth-child('+j+')').length > 0) {
                            $('#fields_content .form_fields').find('li:nth-child(' + j + ')').find('input,textarea,select').each(function () {
                                if($(this).attr('name') == 'options[]') {
                                    data += '&' + $(this).attr('name') + '=' + encodeURIComponent($(this).val());
                                } else {
                                    data += '&' + $(this).attr('name') + '=' + encodeURIComponent($(this).val());
                                }
                                var inputValue = $(this).val();
                                if($(this).closest('.form-group').css('display') == 'block' && $(this).data('phone-format') != undefined && inputValue.trim() == '') {
                                    $(this).css('border-color', 'red');
                                    $(this).focus();
                                    $(this).closest('li').find('.item_detail_info').show();
                                    return allowSubmit = false;
                                }
                            });
                            row_n = j;
                        }
                    }
                    if(!allowSubmit) {
                        revertProcessBtnDisable(btn,'Submit');
                        return false;
                    }

                    @if(isset($stepId))
                        data += '&stepId={!! $stepId !!}';
                    @endif

                    $.ajax({
                        method: 'POST',
                        url: '{{ ecommerce_url('custom-field/create') }}',
                        data: data,
                        dataType: 'json'
                    }).done(function(data) {
                        if(row_n == total_fields) {
                            dfd.resolve();
                        }
                        revertProcessBtnDisable(btn,'Submit');
                        location.reload();
                    }).fail(function(response) {
                        response = response.responseJSON;
                        $.each(response, function(i, item) {
                            $('#'+parent_id+' #'+i).css('border-color','red');
                        });
                        revertProcessBtnDisable(btn,'Submit');
                    });
                }
            } else {

                $('#'+parent_id+' form').find('input,select,textarea').each(function () {
                    var inputValue = $(this).val();

                    if($(this).closest('.form-group').css('display') == 'block' && $(this).data('phone-format') != undefined && inputValue.trim() == '') {
                        $(this).css('border-color', 'red');
                        $(this).focus();
                        $(this).closest('li').find('.item_detail_info').show();
                        return allowSubmit = false;
                    }
                });

                if(!allowSubmit) {
                    revertProcessBtnDisable(btn,'Submit');
                    return false;
                }

                @if(isset($stepId))
                    data += '&stepId={!! $stepId !!}';
                @endif

                $.ajax({
                    method: 'POST',
                    url: '{{ ecommerce_url('custom-field/create') }}',
                    data: data,
                    dataType: 'json'
                }).done(function(data) {
                    revertProcessBtnDisable(btn,'Submit');
                    location.reload();
                }).fail(function(response) {
                    response = response.responseJSON;
                    $.each(response, function(i, item) {
                        $('#'+parent_id+' #'+i).css('border-color','red');
                    });
                    revertProcessBtnDisable(btn,'Submit');
                });
            }
            return dfd.promise();
            return false;
        }
        function showEquation(val) {
            if(val == 'calculator') {
                $("#fields_form #form_equation").show();
                $(".calculate_result_field").show();
                form_equation = true;
            } else {
                $("#fields_form #form_equation").hide();
                $(".calculate_result_field").hide();
                form_equation = false;
            }
        }

        $('.item_detail_info .multiple_fields_row .multiple_field_it').change(function () {
            if($(this).prop("checked")){
                $(this).closest('.item_detail_info').find('.field_validation_row_multiple').show();
            } else{
                $(this).closest('.item_detail_info').find('.field_validation_row_multiple').hide();
            }
        });

        $('.item_detail_info .isOrderModuleDiv input[name=orderModule]').change(function () {
            if($(this).prop("checked")){
                $(this).closest('.item_detail_info').find('.isOrderModuleDiv .isOrderModule').val(1);
            } else{
                $(this).closest('.item_detail_info').find('.isOrderModuleDiv .isOrderModule').val(0);
            }
        });

    </script>
@endsection