public function formCustom()
    {
        $sel = ZAppFeature::selectedFeature();
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        $info_slogan = isset($valuesNya['info_slogan']) ? $valuesNya['info_slogan'] : "slogan";
        $info_banner = isset($valuesNya['info_banner']) ? $valuesNya['info_banner'] : $this->feat_noimage;
        ?>
        <h1 class="header_besar" style="padding: 0; margin: 0; text-align: center; margin-top: 10px; margin-bottom: 10px;">Info</h1>
        <p style="color: #666666; font-size: 12px;">Please complete one or more fields below. <em>All fields are optional.</em></p>

        <div class="form-group">
            <label for="info_slogan">What is your slogan? </label>
            <?php 
        TextLimiter::inputText("text", "info_slogan", "info_slogan", "slogan", $info_slogan, 30, 1, "mslogantext");
        ?>
<!--            <input type="text" class="form-control" id="info_slogan" placeholder="Slogan" value="--><?php 
        //=$info_slogan;
        ?>
<!--">-->
        </div>

        <div class="form-group">

            <?php 
        global $modalReg;
        $modalReg->regCropper("bannID", "Banner", "info_banner", $info_banner, "542:400", array("mbannerImg", "bannID_prev"));
        ?>

            <?php 
        $bannerModalID = "bannID";
        ?>

                <label for="info_banner" >Main Banner </label>
                <div class="previewImg">
                    <img style="cursor:pointer;" data-toggle="modal" data-target="#<?php 
        echo $bannerModalID;
        ?>
" id="<?php 
        echo $bannerModalID;
        ?>
_prev" src="<?php 
        echo $info_banner;
        ?>
">
                </div>


            <div class="clearfix"></div>

            <input type="hidden"  id="info_banner" name="info_banner" value="<?php 
        echo $info_banner;
        ?>
" >

        </div>






            <?php 
        //load from fields
        foreach ($this->fields as $field_name => $details) {
            $field[$field_name] = isset($valuesNya[$field_name]) ? $valuesNya[$field_name] : $details['default_value'];
            ?>
                <div class="form-group">
                <label for="<?php 
            echo $this->feat_id;
            ?>
_<?php 
            echo $field_name;
            ?>
"><?php 
            echo $details['form_question'];
            ?>
 <?php 
            if ($details['optional']) {
                ?>
<span class="optional">Optional</span><?php 
            }
            ?>
</label>
                <?php 
            if ($details['type'] == "text") {
                TextLimiter::inputText("text", $this->feat_id . "_" . $field_name, $this->feat_id . "_" . $field_name, $details['placeholder'], $field[$field_name], $details['limit_max'], $details['limit_min'], "sim_" . $this->feat_id . "_" . $field_name . "_text");
            } elseif ($details['type'] == "rte") {
                TextLimiter::inputTextArea("text", $this->feat_id . "_" . $field_name, $this->feat_id . "_" . $field_name, $details['placeholder'], $field[$field_name], $details['limit_max'], $details['limit_min'], "sim_" . $this->feat_id . "_" . $field_name . "_text");
            } else {
                TextLimiter::inputTextAreaBiasa("text", $this->feat_id . "_" . $field_name, $this->feat_id . "_" . $field_name, $details['placeholder'], $field[$field_name], $details['limit_max'], $details['limit_min'], "sim_" . $this->feat_id . "_" . $field_name . "_text");
            }
            ?>
                <script>
                    $("#<?php 
            echo $this->feat_id;
            ?>
_<?php 
            echo $field_name;
            ?>
").keyup(function(){


                        var name = "sim_<?php 
            echo $this->feat_id . "_" . $field_name;
            ?>
";
                        <?php 
            if ($details['type'] == "rte") {
                ?>
                        var slc = $("#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
").html();
                        <?php 
            } else {
                ?>
                        var slc = $("#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
").val();
                        <?php 
            }
            ?>

                        autoUpdateOnKeyup(name,slc);
                    });
                </script>
                </div>
                <?php 
        }
        ?>



        <script>
            function info_save_<?php 
        echo $this->feat_id;
        ?>
(){
                //get all data from inputs
                var info_slogan = $('#info_slogan').val();
                var info_banner = $('#info_banner').val();



        <?php 
        //load from fields
        foreach ($this->fields as $field_name => $details) {
            $field[$field_name] = isset($valuesNya[$field_name]) ? $valuesNya[$field_name] : $details['default_value'];
            if ($details['type'] == "text") {
                ?>
                var vr_<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
 = $('#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
').val();
                <?php 
            } elseif ($details['type'] == "rte") {
                ?>
                var vr_<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
 = $('#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
').html();
                <?php 
            } else {
                ?>
                 var vr_<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
 = $('#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
').val();
                <?php 
            }
            $imp[] = $field_name . ": vr_" . $this->feat_id . "_" . $field_name;
        }
        ?>

        var label_name = $('#<?php 
        echo $this->feat_id;
        ?>
_labelname').val();

        //harus selalu ada ini..
        var contact_pname = $('#<?php 
        echo $this->feat_id;
        ?>
_pname').val();



                //save the data to sessions
                $.post('<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/save?id=<?php 
        echo $this->feat_id;
        ?>
',{
                    <?php 
        echo $this->feat_id;
        ?>
_labelname : label_name,
                    <?php 
        echo $this->feat_id;
        ?>
_pname : contact_pname,
                    info_slogan : info_slogan,
                    info_banner : info_banner
                    <?php 
        if (count($imp) > 0) {
            echo ",";
            echo implode(",", $imp);
        }
        ?>
                },function(data){
                    console.log(data);
                    if(data){
                        $(".hiddenform").hide();
                        //update Selected App dan Layout di Simulator
                        updateSelectedAppAndSimulator();

                    }
                });

            }


        </script>

        <script>


            function autoUpdateOnKeyup(name,slc){
                if(slc.length == 0){
                    $("#" + name).hide();
                }
                else {
                    $("#" + name).show();
                    $("#"+name+"_text").html(slc);
                }
            }

        </script>
        <style>
            .optional{
                font-size: 12px;
                color: #666666;
            }
            .mlist-item .clearfix{
                padding: 0;
                margin: 0;
            }
            .mlist-text{
                white-space: pre-wrap;
            }
            .previewImg{

                height: 80px;
                overflow: hidden;
            }
            .previewImg img{
                height: 100%;

            }
        </style>


    <?php 
    }
    public function addForm()
    {
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        //default values
        $deal_name = "Name";
        $deal_des = $this->feat_default_description;
        $deal_pic = $this->feat_noimage;
        ?>
        <div class="list_item_form" id="<?php 
        echo $this->feat_id;
        ?>
_kosong" style="display: none; padding: 10px; padding-top: 0px;">
            <div style="float: right; width: 10px; height: 10px; padding-top: 10px;color: #dedede; cursor:pointer;" onclick="closeBlur();">x</div>
            <div style="width: 600px;" >
                <h1 style="text-align: center; font-size: 17px;">New <?php 
        echo $this->feat_element_name;
        ?>
</h1>
                <hr>
                <div class="col-md-7">

                    <input type="hidden" id="<?php 
        echo $this->feat_id;
        ?>
_id" name="<?php 
        echo $this->feat_id;
        ?>
_id" value="-1">

                    <div class="form-group">

                        <?php 
        $bannerModalID = $this->feat_id . "_logo";
        ?>


                        <label for="<?php 
        echo $bannerModalID;
        ?>
_prev"><?php 
        echo $this->feat_name;
        ?>
 picture </label>
                        <div class="previewImg">
                            <img style="cursor:pointer;"  data-toggle="modal" data-target="#<?php 
        echo $bannerModalID;
        ?>
" id="<?php 
        echo $bannerModalID;
        ?>
_prev" src="<?php 
        echo $deal_pic;
        ?>
">
                        </div>

                        <?php 
        global $modalReg;
        $modalReg->regCropper($bannerModalID, $this->feat_name . " Picture", $this->feat_id . "_pic", $deal_pic, "0:0", array($this->feat_id . "_logo_prev", "sim_" . $this->feat_id . "_pic"));
        ?>



                        <div class="clearfix"></div>

                        <input type="hidden"  id="<?php 
        echo $this->feat_id;
        ?>
_pic" name="<?php 
        echo $this->feat_id;
        ?>
_pic" value="<?php 
        echo $deal_pic;
        ?>
" >


                    </div>


                    <div class="form-group">
                        <label for="<?php 
        echo $this->feat_id;
        ?>
_des"><?php 
        echo $this->feat_name;
        ?>
 Description</label>
                        <?php 
        TextLimiter::inputTextArea("text", $this->feat_id . "_des", $this->feat_id . "_des", $this->feat_name . " Description", $deal_des, 500, 1, "sim_" . $this->feat_id . "_des");
        ?>
                    </div>
                    <button id="<?php 
        echo $this->feat_id;
        ?>
_add_item_button" style="width: 100%;" class="btn btn-lg btn-success">Save</button>
                </div>
                <div class="col-md-5">
                    <div class="<?php 
        echo $this->feat_id;
        ?>
_item" style="border: 1px solid #dedede;">
                        <div class="<?php 
        echo $this->feat_id;
        ?>
_item_pic" >
                            <img id="sim_<?php 
        echo $this->feat_id;
        ?>
_pic" src="<?php 
        echo $deal_pic;
        ?>
">
                        </div>

                        <div class="<?php 
        echo $this->feat_id;
        ?>
_item_description" id="sim_<?php 
        echo $this->feat_id;
        ?>
_des"><?php 
        echo $deal_des;
        ?>
</div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>


        </div>
        <script>
            $('#<?php 
        echo $this->feat_id;
        ?>
_add_item_button').click(function(){
//                var deal_name = $('#<?php 
        //=$this->feat_id;
        ?>
//_name').val();
                var deal_des = $('#<?php 
        echo $this->feat_id;
        ?>
_des').html();
                var deal_pic = $('#<?php 
        echo $this->feat_id;
        ?>
_pic').val();
                var deal_id = $('#<?php 
        echo $this->feat_id;
        ?>
_id').val();


                $.post("<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/addArrayItem?id=<?php 
        echo $this->feat_id;
        ?>
&arrayID=<?php 
        echo $this->arrayID;
        ?>
&cekID=<?php 
        echo $this->feat_id;
        ?>
_id",{
//                    <?php 
        //=$this->feat_id;
        ?>
//_name : deal_name,
                    <?php 
        echo $this->feat_id;
        ?>
_des : deal_des,
                    <?php 
        echo $this->feat_id;
        ?>
_pic : deal_pic,
                    <?php 
        echo $this->feat_id;
        ?>
_id : deal_id
                },function(data){
                    console.log(data);
                    closeBlur();
                    update_<?php 
        echo $this->feat_id;
        ?>
_Simulator(data);
                },'json');
            });



            function update_<?php 
        echo $this->feat_id;
        ?>
_Simulator(data){

                data_<?php 
        echo $this->feat_id;
        ?>
 = data;

                var design = '';
                var list = '';

                for(var x=0;x<data.length;x++){
                    var attr = data[x];


                    design += '<div class="<?php 
        echo $this->feat_id;
        ?>
_item" id="<?php 
        echo $this->feat_id;
        ?>
_'+x+'">';

                    if(attr['<?php 
        echo $this->feat_id;
        ?>
_pic'] != '<?php 
        echo $this->feat_noimage;
        ?>
') {
                        design += '<div class="<?php 
        echo $this->feat_id;
        ?>
_item_pic">';

                        if (data_<?php 
        echo $this->feat_id;
        ?>
_justUpdated != -1) {
                            design += '<img src="' + attr['<?php 
        echo $this->feat_id;
        ?>
_pic'] + '?t=' + $.now() + '">';
//                        data_<?php 
        //=$this->feat_id;
        ?>
//_justUpdated = -1;
                        } else {
                            design += '<img src="' + attr['<?php 
        echo $this->feat_id;
        ?>
_pic'] + '">';
                        }
                        design += '</div>';
                    }
//                    design += '<div class="<?php 
        //=$this->feat_id;
        ?>
//_item_title">';
//                    design += attr['<?php 
        //=$this->feat_id;
        ?>
//_name'];
//                    design += '</div>';
                    if(attr['<?php 
        echo $this->feat_id;
        ?>
_des']!='') {
                        design += '<div class="<?php 
        echo $this->feat_id;
        ?>
_item_description" >';
                        design += attr['<?php 
        echo $this->feat_id;
        ?>
_des'];
                        design += '</div>';
                    }
                    design += '</div>';




                    list += '<li class="ui-state-default" id="<?php 
        echo $this->feat_id;
        ?>
_arr_'+x+'">';
                    list += '<div class="arraylist_item" >';
                    list += '<div class="col-md-9 arraylist_name">'+strip(attr['<?php 
        echo $this->feat_id;
        ?>
_des']).substring(0, 30)+'...</div>';
                    list += '<div class="col-md-3 arraylist_action">' +
                    ' <i onclick="edit_<?php 
        echo $this->feat_id;
        ?>
(\''+x+'\');" class="glyphicon glyphicon-pencil"></i>'+
                    ' &nbsp; '+
                    '<i onclick="delete_<?php 
        echo $this->feat_id;
        ?>
(\''+x+'\');" class="glyphicon glyphicon-remove"></i> ' +
                    '</div>';
                    list += '<div class="clearfix"></div>';
                    list += '</div>';
                    list += '</li>';

                }



                $('#<?php 
        echo $this->feat_id;
        ?>
_sortable').html(list);
                $("#app_<?php 
        echo $this->feat_id;
        ?>
_listcontent").html(design);

                if(data.length>0) {
                    $('#notfound_<?php 
        echo $this->feat_id;
        ?>
_button').hide();
                    $("#wadahform_<?php 
        echo $this->feat_id;
        ?>
_button").show();
                }else{
                    $('#notfound_<?php 
        echo $this->feat_id;
        ?>
_button').show();
                    $("#wadahform_<?php 
        echo $this->feat_id;
        ?>
_button").hide();
                }
            }
        </script>
    <?php 
    }
    public static function page()
    {
        $zp = new ZAppFeature();
        $details = ZAppFeature::loadDetails();
        ?>
        <section id="details">
            <h2 class="header_besar">Insert the details of your App <abbr class="required" title="required">*</abbr></h2>
            <hr class="garisbatas">
            <div class="form-group">
                <label for="contact_pname">App Name</label>
                <?php 
        TextLimiter::inputText("text", "app_name", "app_name", "App Name", $details['app_name'], 15, 7, "my_app_icon_text");
        ?>
            </div>

            <div class="form-group">
                <label for="app_icon_img">App Icon</label>

                <?php 
        $bannerModalID = "app_icon_img_cropper";
        ?>

                <div class="previewImg">
                    <img style="cursor:pointer;"  data-toggle="modal" data-target="#<?php 
        echo $bannerModalID;
        ?>
" id="<?php 
        echo $bannerModalID;
        ?>
_prev" src="<?php 
        echo $details['app_icon'];
        ?>
">
                </div>


                <?php 
        global $modalReg;
        $modalReg->regCropper($bannerModalID, "App Icon", "app_icon", $details['app_icon'], "1300:1300", array($bannerModalID . "_prev", 'my_app_icon_img_src'));
        ?>
                <input type="hidden" id="app_icon" value="<?php 
        echo $details['app_icon'];
        ?>
">
            </div>

            <div class="form-group">
                <label for="app_des_short">App Short Description</label>
                <?php 
        TextLimiter::inputTextAreaBiasa("text", "app_des_short", "app_des_short", "App Short Description", $details['app_des_short'], 100, 10);
        ?>
            </div>

            <div class="form-group">
                <label for="contact_pname">App Long Description</label>
                <?php 
        TextLimiter::inputTextAreaBiasa("text", "app_des_long", "app_des_long", "App Long Description", $details['app_des_long'], 2000, 10);
        ?>
            </div>

            <div class="form-group">
                <label for="contact_pname">App Feature Graphics</label>
                <?php 
        $bannerModalID = "app_feat_cropper";
        ?>

                <div class="previewImg">
                    <img style="cursor:pointer;"  data-toggle="modal" data-target="#<?php 
        echo $bannerModalID;
        ?>
" id="<?php 
        echo $bannerModalID;
        ?>
_prev" src="<?php 
        echo $details['app_feature_img'];
        ?>
">
                </div>


                <?php 
        global $modalReg;
        $modalReg->regCropper($bannerModalID, "App Feature Graphics", "app_feature_img", $details['app_feature_img'], "3000:1300", array($bannerModalID . "_prev"));
        ?>
                <input type="hidden" id="app_feature_img" value="<?php 
        echo $details['app_feature_img'];
        ?>
">
            </div>

            <div style="text-align: center; margin-top: 20px;">
                <button id="savedetails" style="width: 50%;" class="btn btn-danger btn-lg">Next</button>
            </div>

            <script>
                $('#savedetails').click(function(){
                    saveAppDetails(1);

                });

                function saveAppDetails(mode){
                    var app_name = $('#app_name').val();
                    var app_icon = $('#app_icon').val();
                    var app_des_short = $('#app_des_short').val();
                    var app_des_long = $('#app_des_long').val();
                    var app_feature_img = $('#app_feature_img').val();
                    //save the data to sessions
                    $.post('<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/saveDetails',{
                        app_name : app_name,
                        app_icon : app_icon,
                        app_des_short : app_des_short,
                        app_des_long : app_des_long,
                        app_feature_img : app_feature_img
                    },function(data){
                        console.log(data);
                        if(data){
//                            console.log('success');
                            //save JSON
                            $.get('<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/createJSON?id=<?php 
        echo $_GET['id'];
        ?>
',function(data){
                               console.log(data);
                                if(mode == 1){
                                    $.get('<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/saveIntoApp?id=<?php 
        echo $_GET['id'];
        ?>
',function(data){
                                        document.location = '<?php 
        echo _SPPATH;
        ?>
PaymentWeb/pay?app_id='+data.id;
                                    },'json');

                                }
                            });
                        }
                    });
                }
            </script>
        </section>

        <?php 
    }
    public function formCustom()
    {
        $sel = ZAppFeature::selectedFeature();
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        //        $info_bname = isset($valuesNya['info_bname'])?$valuesNya['info_bname']:"Business Name";
        $info_slogan = isset($valuesNya['info_slogan']) ? $valuesNya['info_slogan'] : "slogan";
        //        $info_profilepic = isset($valuesNya['info_profilepic'])?$valuesNya['info_profilepic']:_BPATH."images/noimage.jpg";
        $info_banner = isset($valuesNya['info_banner']) ? $valuesNya['info_banner'] : _BPATH . "images/iphone.jpg";
        //        $info_phone = $valuesNya['info_phone'];
        //        $info_email = $valuesNya['info_email'];
        //        $info_website = $valuesNya['info_website'];
        //        $info_address = $valuesNya['info_address'];
        //        $info_additional = $valuesNya['info_additional'];
        ?>
        <h1 class="header_besar" style="padding: 0; margin: 0; text-align: center; margin-top: 10px; margin-bottom: 10px;">Info</h1>
        <p style="color: #666666; font-size: 12px;">Please complete one or more fields below. <em>All fields are optional.</em></p>

        <div class="form-group">
            <label for="info_slogan">What is your slogan? </label>
            <input type="text" class="form-control" id="info_slogan" placeholder="Slogan" value="<?php 
        echo $info_slogan;
        ?>
">
        </div>

        <div class="form-group">

            <?php 
        $bannerModalID = "logoID";
        ?>

<!--            <div class="col-md-3" style="margin-left: -15px;">-->
<!--                <label for="info_profilepic">Profile picture </label>-->
<!--                <div class="previewImg">-->
<!--                    <img style="cursor:pointer;"  data-toggle="modal" data-target="#--><?php 
        //=$bannerModalID;
        ?>
<!--" id="--><?php 
        //=$bannerModalID;
        ?>
<!--_prev" src="--><?php 
        //=$info_profilepic;
        ?>
<!--">-->
<!--                </div>-->
<!--            </div>-->
            <?php 
        global $modalReg;
        $modalReg->regCropper("bannID", "Banner", "info_banner", $info_banner, "542:400", array("mbannerImg", "bannID_prev"));
        //            $modalReg->regCropper("logoID","Profile Picture","info_profilepic",$info_profilepic,"400:400",array("mlogoImg","logoID_prev"));
        ?>

            <?php 
        $bannerModalID = "bannID";
        ?>
<!--            <div class="col-md-6" >-->
                <label for="info_banner" >Main Banner </label>
                <div class="previewImg">
                    <img style="cursor:pointer;" data-toggle="modal" data-target="#<?php 
        echo $bannerModalID;
        ?>
" id="<?php 
        echo $bannerModalID;
        ?>
_prev" src="<?php 
        echo $info_banner;
        ?>
">
                </div>
<!--            </div>-->

            <div class="clearfix"></div>

            <input type="hidden"  id="info_banner" name="info_banner" value="<?php 
        echo $info_banner;
        ?>
" >
            <input type="hidden"  id="info_profilepic" name="info_profilepic" value="<?php 
        echo $info_profilepic;
        ?>
" >

        </div>




        <div class="form-group">

            <?php 
        //load from fields
        foreach ($this->fields as $field_name => $details) {
            //                $field[$field_name] = isset($valuesNya[$field_name])?$valuesNya[$field_name]:$details['default_value'];
            ?>
                <label for="<?php 
            echo $this->feat_id;
            ?>
_<?php 
            echo $field_name;
            ?>
"><?php 
            echo $details['form_question'];
            ?>
 <?php 
            if ($details['optional']) {
                ?>
<span class="optional">Optional</span><?php 
            }
            ?>
</label>
                <?php 
            if ($details['type'] == "text") {
                TextLimiter::inputText("text", $this->feat_id . "_" . $field_name, $this->feat_id . "_" . $field_name, $details['placeholder'], $field[$field_name], $details['limit_max'], $details['limit_min'], "sim_" . $this->feat_id . "_" . $field_name . " .mlist-text");
            } else {
                TextLimiter::inputTextArea("text", $this->feat_id . "_" . $field_name, $this->feat_id . "_" . $field_name, $details['placeholder'], $field[$field_name], $details['limit_max'], $details['limit_min'], "sim_" . $this->feat_id . "_" . $field_name . "_text");
            }
            ?>
                <script>
                    $("#<?php 
            echo $this->feat_id;
            ?>
_<?php 
            echo $field_name;
            ?>
").keyup(function(){

                        var name = "<?php 
            echo "sim_" . $this->feat_id . "_" . $field_name;
            ?>
";
                        var slc = $("#<?php 
            echo $this->feat_id;
            ?>
_<?php 
            echo $field_name;
            ?>
").val();

                        autoUpdateOnKeyup(name,slc);
                    });
                </script>
                <?php 
        }
        ?>
            <label for="info_phone">Your phone number <span class="optional">Optional</span></label>
            <?php 
        TextLimiter::inputText("text", "info_phone", "info_phone", "Page Name", $info_phone, 15, 5, "ninfo_phone .mlist-text");
        ?>
<!--            <input type="text" class="form-control" id="info_phone" placeholder="Phone Number" value="--><?php 
        //=$info_phone;
        ?>
<!--" >-->
        </div>

<!--        <div class="form-group">-->
<!--            <label for="info_email">Your email address <span class="optional">Optional</span></label>-->
<!--            <input type="email" class="form-control" id="info_email" placeholder="Email Address" value="--><?php 
        //=$info_email;
        ?>
<!--"  >-->
<!--        </div>-->
<!---->
<!--        <div class="form-group">-->
<!--            <label for="info_website">Your website URL <span class="optional">Optional</span></label>-->
<!--            <input type="url" class="form-control" id="info_website" placeholder="Website URL" value="--><?php 
        //=$info_website;
        ?>
<!--"  >-->
<!--        </div>-->
<!---->
<!--        <div class="form-group">-->
<!--            <label for="info_address">Your address <span class="optional">Optional</span></label>-->
<!--            <textarea id="info_address" class="form-control" rows="4" maxlength="800" placeholder="Address">--><?php 
        //=$info_address;
        ?>
<!--</textarea>-->
<!---->
<!--        </div>-->
<!---->
<!--        <div class="form-group">-->
<!--            <label for="info_additional">Additional information  <span class="optional">Optional</span></label>-->
<!--            <textarea id="info_additional" class="form-control" rows="10" maxlength="800" placeholder="Example: Opening Hours">--><?php 
        //=$info_additional;
        ?>
<!--</textarea>-->
<!---->
<!--        </div>-->


        <script>
            function info_save_<?php 
        echo $this->feat_id;
        ?>
(){
                //get all data from inputs
//                var info_bname = $('#info_bname').val();
                var info_slogan = $('#info_slogan').val();

//                var info_phone = $('#info_phone').val();
//                var info_email = $('#info_email').val();
//                var info_website = $('#info_website').val();
//                var info_address = $('#info_address').val();
//                var info_additional = $('#info_additional').val();

                var info_banner = $('#info_banner').val();

//                var info_profilepic = $('#info_profilepic').val();

        <?php 
        //load from fields
        foreach ($this->fields as $field_name => $details) {
            $field[$field_name] = isset($valuesNya[$field_name]) ? $valuesNya[$field_name] : $details['default_value'];
            if ($details['type'] == "text") {
                ?>
                var vr_<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
 = $('#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
').val();
                <?php 
            } else {
                ?>
                var vr_<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
 = $('#<?php 
                echo $this->feat_id;
                ?>
_<?php 
                echo $field_name;
                ?>
').html();
                <?php 
            }
            $imp[] = $field_name . ": vr_" . $this->feat_id . "_" . $field_name;
        }
        ?>

        var label_name = $('#<?php 
        echo $this->feat_id;
        ?>
_labelname').val();

        //harus selalu ada ini..
        var contact_pname = $('#<?php 
        echo $this->feat_id;
        ?>
_pname').val();
//                var label_name = $('#<?php 
        //=$this->feat_id;
        ?>
//_labelname').val();


                //save the data to sessions
                $.post('<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/save?id=<?php 
        echo $this->feat_id;
        ?>
',{
                    <?php 
        echo $this->feat_id;
        ?>
_labelname : label_name,
                    <?php 
        echo $this->feat_id;
        ?>
_pname : contact_pname,
//                    info_bname : info_bname,
//                    info_slogan : info_slogan,
//                    info_phone : info_phone,
//                    info_email : info_email,
//                    info_website : info_website,
//                    info_address : info_address,
//                    info_additional : info_additional,
                    info_banner : info_banner
//                    info_profilepic : info_profilepic
                    <?php 
        if (count($imp) > 0) {
            echo ",";
            echo implode(",", $imp);
        }
        ?>
                },function(data){
                    console.log(data);
                    if(data){
                        $(".hiddenform").hide();
                        //update Selected App dan Layout di Simulator
                        updateSelectedAppAndSimulator();

                    }
                });

            }


        </script>

        <script>
//            $("#info_bname").keyup(function(){
//
//                console.log("in1");
//                var slc = $("#info_bname").val();
//                $("#mheadertext_<?php 
        //=$this->feat_id;
        ?>
//").html(slc);
//                console.log("in2");
//            });
//            $("#info_slogan").keyup(function(){
//
//                console.log("in1");
//                var slc = $("#info_slogan").val();
//                $("#mslogantext").html(slc);
//                console.log("in2");
//            });
//
//            $("#info_phone").keyup(function(){
//                var name = "ninfo_phone";
//                var slc = $("#info_phone").val();
//
//                autoUpdateOnKeyup(name,slc);
//
////                if(slc.length == 0){
////                    $("#" + name).remove();
////                }
////                else {
////                    if ($("#" + name).length == 0) {
////                        //it doesn't exist
////                        var texthtml = '<div id="' + name + '" class="mlist-item">' +
////                            '<i class="glyphicon glyphicon-phone-alt"></i> &nbsp; <div class="mlist-text">' + slc + '</div>' +
////                            '<div class="clearfix"></div></div>';
////
////                        $("#mlist").append(texthtml);
////                    } else {
////                        $("#" + name + " div.mlist-text").html(slc);
////                    }
////                }
//            });
//
//            $("#info_email").keyup(function(){
//                var name = "ninfo_email";
//                var slc = $("#info_email").val();
//
//                autoUpdateOnKeyup(name,slc);
//            });
//
//            $("#info_website").keyup(function(){
//                var name = "ninfo_website";
//                var slc = $("#info_website").val();
//
//                autoUpdateOnKeyup(name,slc);
//            });
//
//            $("#info_address").keyup(function(){
//                var name = "ninfo_address";
//                var slc = $("#info_address").val();
//
//                autoUpdateOnKeyup(name,slc);
//            });
//
//            $("#info_additional").keyup(function(){
//                var name = "ninfo_additional";
//                var slc = $("#info_additional").val();
//
//                autoUpdateOnKeyup(name,slc);
//
//            });

            function autoUpdateOnKeyup(name,slc){
                if(slc.length == 0){
                    $("#" + name).hide();
                }
                else {
                    $("#" + name).show();
                    $("#"+name+" .mlist-text").html(slc);
                }
            }

        </script>
        <style>
            .optional{
                font-size: 12px;
                color: #666666;
            }
            .mlist-item .clearfix{
                padding: 0;
                margin: 0;
            }
            .mlist-text{
                white-space: pre-wrap;
            }
            .previewImg{

                height: 80px;
                overflow: hidden;
            }
            .previewImg img{
                height: 100%;

            }
        </style>


    <?php 
    }
    public function formCustom()
    {
        $sel = ZAppFeature::selectedFeature();
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        $loyalty_des = isset($valuesNya['loyalty_des']) ? $valuesNya['loyalty_des'] : "";
        $contact_pslogan = isset($valuesNya["loyalty_offer"]) ? $valuesNya['loyalty_offer'] : "";
        $loyalty_pin = isset($valuesNya['loyalty_pin']) ? $valuesNya['loyalty_pin'] : "";
        $loyalty_nr = isset($valuesNya['loyalty_nr']) ? $valuesNya['loyalty_nr'] : 6;
        ?>
        <h1 class="header_besar" style="padding: 0; margin: 0; text-align: center; margin-top: 10px; margin-bottom: 10px;"><?php 
        echo $this->feat_name;
        ?>
</h1>


        <div class="form-group">
            <label for="loyalty_offer">Offer</label>
            <?php 
        TextLimiter::inputTextArea("text", "loyalty_offer", "loyalty_offer", "buy 6th coffee get 1 free", $contact_pslogan, 500, 0, "sim_loyalty_offer");
        ?>
        </div>
        <div class="form-group">
            <label for="loyalty_nr">Number of Stamps</label>
            <select class="form-control" id="loyalty_nr">
                <?php 
        for ($x = 2; $x <= 12; $x++) {
            ?>
                    <option <?php 
            if ($x == $loyalty_nr) {
                echo "selected";
            }
            ?>
 value="<?php 
            echo $x;
            ?>
"><?php 
            echo $x;
            ?>
</option>
                    <?php 
        }
        ?>
            </select>
            <script>
                $('#loyalty_nr').change(function(){
                    var slc =  parseInt($('#loyalty_nr').val());

                    var txt = '';
                    for(var x=1;x<=slc;x++){

                        txt += '<div class="loyalty_stamp">';
                        txt += x;
                        txt += '</div>';

                    }
                    $('#sim_jumlah_loyalty').html(txt);

                });
            </script>
        </div>
        <div class="form-group">
            <label for="loyalty_des">Description</label>
            <?php 
        TextLimiter::inputTextArea("text", "loyalty_des", "loyalty_des", "Bisa diambil kapan saja", $loyalty_des, 500, 0, "sim_loyalty_description");
        ?>
        </div>
        <div class="form-group">
            <label for="loyalty_pin">PIN</label>
            <?php 
        TextLimiter::inputText("text", "loyalty_pin", "loyalty_pin", "4 digit PIN", $loyalty_pin, 4, 4);
        ?>
        </div>
        <script>
            //do not change the function name
            function info_save_<?php 
        echo $this->feat_id;
        ?>
(){
                //get all data from inputs
                var contact_pname = $('#<?php 
        echo $this->feat_id;
        ?>
_pname').val();
                var loyalty_offer = $('#loyalty_offer').html();
                var loyalty_des = $('#loyalty_des').html();
                var loyalty_pin = $('#loyalty_pin').val();
                var loyalty_nr = $('#loyalty_nr').val();

                //label_name : mandatory
                var label_name = $('#<?php 
        echo $this->feat_id;
        ?>
_labelname').val();



                //save the data to sessions
                $.post('<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/save?id=<?php 
        echo $this->feat_id;
        ?>
',{
                    <?php 
        echo $this->feat_id;
        ?>
_labelname : label_name,
                    loyalty_offer : loyalty_offer,
                    loyalty_des:loyalty_des,
                    loyalty_pin : loyalty_pin,
                    loyalty_nr : loyalty_nr,
                    <?php 
        echo $this->feat_id;
        ?>
_pname : contact_pname
                },function(data){
                    console.log(data);
                    if(data){
                        $(".hiddenform").hide();
                        //update Selected App dan Layout di Simulator
                        updateSelectedAppAndSimulator();


                    }
                });

            }
        </script>
    <?php 
    }
    public function formCustom()
    {
        $sel = ZAppFeature::selectedFeature();
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        $contact_pname = isset($valuesNya[$this->feat_id . '_pname']) ? $valuesNya[$this->feat_id . '_pname'] : $this->feat_name;
        $contact_pslogan = isset($valuesNya[$this->feat_id . '_pslogan']) ? $valuesNya[$this->feat_id . '_pslogan'] : "description";
        ?>
<h1 class="header_besar" style="padding: 0; margin: 0; text-align: center; margin-top: 10px; margin-bottom: 10px;"><?php 
        echo $this->feat_name;
        ?>
</h1>
<p style="color: #666666; font-size: 12px;">Please complete one or more fields below. <em>All fields are optional.</em></p>

<div class="form-group">
    <label for="info_slogan">Page Content</label>
    <?php 
        TextLimiter::inputTextArea("text", $this->feat_id . "_pslogan", $this->feat_id . "_pslogan", "Description", $contact_pslogan, 5000, 0, $this->feat_id . "_des");
        ?>
   </div>


        <script>
            //do not change the function name
            function info_save_<?php 
        echo $this->feat_id;
        ?>
(){
                //get all data from inputs
                var contact_pname = $('#<?php 
        echo $this->feat_id;
        ?>
_pname').val();
                var contact_pslogan = $('#<?php 
        echo $this->feat_id;
        ?>
_pslogan').html();

                //label_name : mandatory
                var label_name = $('#<?php 
        echo $this->feat_id;
        ?>
_labelname').val();



                //save the data to sessions
                $.post('<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/save?id=<?php 
        echo $this->feat_id;
        ?>
',{
                    <?php 
        echo $this->feat_id;
        ?>
_labelname : label_name,
                    <?php 
        echo $this->feat_id;
        ?>
_pslogan : contact_pslogan,
                    <?php 
        echo $this->feat_id;
        ?>
_pname : contact_pname
                },function(data){
                    console.log(data);
                    if(data){
                        $(".hiddenform").hide();
                        //update Selected App dan Layout di Simulator
                        updateSelectedAppAndSimulator();


                    }
                });

            }
        </script>
        <style>
            #<?php 
        echo $this->feat_id . "_des";
        ?>
{
                white-space:pre-wrap !important;

            }
        </style>
<?php 
    }
    public function formCustom()
    {
        $sel = ZAppFeature::selectedFeature();
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        $contact_pname = isset($valuesNya[$this->feat_id . '_pname']) ? $valuesNya[$this->feat_id . '_pname'] : "Page Name";
        $contact_pslogan = isset($valuesNya[$this->feat_id . '_pslogan']) ? $valuesNya[$this->feat_id . '_pslogan'] : "";
        ?>
        <h1 class="header_besar" style="padding: 0; margin: 0; text-align: center; margin-top: 10px; margin-bottom: 10px;"><?php 
        echo $this->feat_name;
        ?>
</h1>

        <div class="form-group">
            <label for="info_slogan">Please enter a starting point of your Location</label>
            <br><small>e.g can be your city, kecamatan or kelurahan.</small>
            <?php 
        TextLimiter::inputText("text", $this->feat_id . "_pslogan", $this->feat_id . "_pslogan", "e.g Jakarta/Pondok Indah/Ciputat/Kelapa Gading", $contact_pslogan, 150, 0);
        ?>
        </div>
        <div style="text-align: center; margin-top: 30px;">
            <button onclick="addAddress2Map();" class="btn btn-success btn-lg">Adjust Map</button>
            <br><small>You can drag the red marker <i class="glyphicon glyphicon-map-marker"></i> to your business position </small>

        </div>



        <script>



            //do not change the function name
            function info_save_<?php 
        echo $this->feat_id;
        ?>
(){
                //get all data from inputs
                var contact_pname = $('#<?php 
        echo $this->feat_id;
        ?>
_pname').val();
                var contact_pslogan = $('#<?php 
        echo $this->feat_id;
        ?>
_pslogan').val();

                //label_name : mandatory
                var label_name = $('#<?php 
        echo $this->feat_id;
        ?>
_labelname').val();



                //save the data to sessions
                $.post('<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/save?id=<?php 
        echo $this->feat_id;
        ?>
',{
                    <?php 
        echo $this->feat_id;
        ?>
_labelname : label_name,
                    <?php 
        echo $this->feat_id;
        ?>
_pslogan : contact_pslogan,
                    <?php 
        echo $this->feat_id;
        ?>
_pname : contact_pname
                },function(data){
                    console.log(data);
                    if(data){
                        $(".hiddenform").hide();
                        //update Selected App dan Layout di Simulator
                        updateSelectedAppAndSimulator();


                    }
                });

            }
        </script>
    <?php 
    }
    public function formCustom()
    {
        $sel = ZAppFeature::selectedFeature();
        $valuesNya = FeatureSessionLayer::load($this->feat_id);
        $contact_pslogan = isset($valuesNya['social_id']) ? $valuesNya['social_id'] : "";
        ?>
        <h1 class="header_besar" style="padding: 0; margin: 0; text-align: center; margin-top: 10px; margin-bottom: 10px;"><?php 
        echo $this->feat_name;
        ?>
</h1>
        <p style="color: #666666; font-size: 12px;">Please complete one or more fields below. <em>All fields are optional.</em></p>

        <div class="form-group">
            <label for="info_slogan">Your <?php 
        echo $this->socialID;
        ?>
</label>
            <?php 
        TextLimiter::inputText("text", $this->feat_id . "_social_id", $this->feat_id . "_social_id", "", $contact_pslogan, 100, 0);
        ?>
        </div>
        <div style="padding-top: 10px; text-align: right;">
            <button id="load_button_<?php 
        echo $this->feat_id;
        ?>
" class="btn btn-default">Load <?php 
        echo $this->feat_name;
        ?>
</button>
        </div>

        <script>
            //do not change the function name
            function info_save_<?php 
        echo $this->feat_id;
        ?>
(){
                //get all data from inputs
                var contact_pname = $('#<?php 
        echo $this->feat_id;
        ?>
_pname').val();
                var contact_pslogan = $('#<?php 
        echo $this->feat_id;
        ?>
_social_id').val();

                //label_name : mandatory
                var label_name = $('#<?php 
        echo $this->feat_id;
        ?>
_labelname').val();



                //save the data to sessions
                $.post('<?php 
        echo _SPPATH;
        ?>
FeatureSessionLayer/save?id=<?php 
        echo $this->feat_id;
        ?>
',{
                    <?php 
        echo $this->feat_id;
        ?>
_labelname : label_name,
                    social_id : contact_pslogan,
                    <?php 
        echo $this->feat_id;
        ?>
_pname : contact_pname
                },function(data){
                    console.log(data);
                    if(data){
                        $(".hiddenform").hide();
                        //update Selected App dan Layout di Simulator
                        updateSelectedAppAndSimulator();
                        //update
                        loadSocial_<?php 
        echo $this->feat_id;
        ?>
(contact_pslogan);

                    }
                });

            }

            $('#load_button_<?php 
        echo $this->feat_id;
        ?>
').click(function(){
                var contact_pslogan = $('#<?php 
        echo $this->feat_id;
        ?>
_social_id').val();

                if(contact_pslogan!='')
                loadSocial_<?php 
        echo $this->feat_id;
        ?>
(contact_pslogan);
                else{
                    alert('Please insert SocialMedia ID');
                }
            });

        </script>
        <?php 
        $this->socialJSLoader();
        ?>
        <style>
            #<?php 
        echo $this->feat_id . "_des";
        ?>
{
                white-space:pre-wrap !important;

            }
        </style>
    <?php 
    }