<style>
    /* .panel.panel-default{
        box-shadow: 0 2px 3px #d2d2d2;
    }
    .panel.panel-default .panel-heading{
        border-bottom: 1px solid #cbcbcb;
        font-weight: bold;
    } */
    .box-content-preview{
        box-shadow: 0 0 3px #d2d2d2;
        border-bottom: 1px solid #cbcbcb;
        padding: 10px;
    }
    .trun {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mb-5{
        margin-bottom: 5px !important;
    }
    .relative{
        position: relative;
    }
    .faEditCustomField{
        position: absolute;
        right: 20px;
        top: 10px;
    }
    .inputEditCustomField{
        padding: 6px 20px 6px 12px !important;
    }
    </style> 
    <div ng-show="web_popup">
        <div class="row">
            <!-- <div class="col-sm-1 ui-sortable" style="margin-top:60px;">
                <div class="" style="width: 60px; float: left; height: 90px;">
                    <img src="../images/dashboard/ajax-loader.gif" style="top:13px;left:25px;" class="loaderImg" ng-hide="loderImg" style="cursor:pointer;">
                    <div style="height: 60px; width: 60px; border: 1px solid #2d353c; margin-left:5px;" id="isBasicStaticImg" ng-hide="web_push_obj.icon">
                        <img src="../images/dashboard/1462811934_file_add.png"  alt="" ng-click="openFileWindow('webpushfile')" style="margin-left: 10px;margin-top: 12px;cursor:pointer;" title="Upload Image" />
                    </div>
                    <div ng-show="web_push_obj.icon">
                        
                        <img src="{{web_push_obj.icon}}" alt="" height="{{imgHeight}}" width="{{imgWidth}}" ng-click="openFileWindow('webpushfile')" style="cursor:pointer;"/>
                        
                        
                    </div>
    
                </div>
            </div> -->
            <div class="col-sm-6 ui-sortable">
                <!-- <div class="row">
                    <div class="col-sm-12" style="text-align:center ; right: 5%;">
                        <h3>Preview</h3>
                    </div>
                </div> -->
                <!-- box ===-->
                <div id="box" class="row box-content-preview box"style="width: 400px; height: 350px; margin-left: 10%; margin-top: 15%;" ng-hide="web_pop_obj.mode == 'Banner'">
                    <div class="col-sm-3">
                        <div id="in" class="inner" style="width: 260px; height: 175px;">
                            <img src="../images/dashboard/ajax-loader.gif" style="margin-top:5%; margin-left: 5%; position: relative" class="loaderImg" ng-hide="loderImg" style="cursor:pointer;">
                            <div style="height: 80px; width: 80px; margin-left: 50%; margin-top:36%" id="isBasicStaticImg" ng-hide="web_pop_obj.icon">
                                <img src="../images/dashboard/1462811934_file_add.png"  alt="" ng-click="openFileWindow('webpopfile')" 
                                style="margin-left: 25px;margin-top: 20px;cursor:pointer;" title="Upload Image" />
                            </div>
                            <div ng-show="web_pop_obj.icon" style="margin: 10% 0 0 11%;">
                                <img src="{{web_pop_obj.icon}}" alt="" height="200px" width="300px" ng-click="openFileWindow('webpopfile')" style="cursor:pointer;"/>
                            </div>
                            <input type="file" id="webpopfile" accept=".jpg,.jpeg,.png" style="width: 1px; display: none;" 
                            class="notificationImageFile" />
                        </div>
                    </div>
                    <div class="col-sm-9" style="top:75% ;right:15%">
                        <!-- <div class="panel panel-default">
                            <div class="panel-heading">{{web_push_obj.title}}</div>
                            <div class="panel-body" style="word-wrap: break-word;white-space: pre;">{{web_push_obj.message}}</div>
                        </div>  -->
                        <div class="row">
                            <div id="box-t" class="mb-5 trun" style="word-wrap: break-word; text-align: center;"><b>{{web_pop_obj.title}}</b></div>
                            <div id="box-m" class="mb-5" style="word-wrap: break-word;text-align: center;">{{web_pop_obj.message}}</div>
                            <!-- <a style="word-wrap: break-word;min-height: 40px;" href="{{web_pop_obj.url}}" target="_blank">{{web_pop_obj.url}}</a> -->
                        </div>
                    </div>
                    
                </div>
                  <!-- box end========-->
                  <!-- banner start=========-->
                  <div id="banner" class="row box-content-preview box" style="margin-top:15%; margin-left: 10%; width: 600px;" ng-hide="web_pop_obj.mode == 'Box'">
                    <div class="col-sm-3">
                        <div class="" style="width: 80px; float: left; height: 90px;">
                            <img src="../images/dashboard/ajax-loader.gif" style="top:13px;left:5px;margin-left:20%;" class="loaderImg" ng-hide="loderImg" style="cursor:pointer;">
                            <div style="height: 80px; width: 80px; margin-left:5px; margin-top: 5px; border: 1px solid #2d353c ;"  id="isBasicStaticImg" ng-hide="web_pop_obj.iconB">
                                <img src="../images/dashboard/1462811934_file_add.png"  alt="" ng-click="openFileWindow('webpopfileb')" style="margin-left: 25px;margin-top: 25px;cursor:pointer;" title="Upload Image" />
                            </div>
                            <div ng-show="web_pop_obj.iconB" style="margin-top: 18%;" >
                                <img src="{{web_pop_obj.iconB}}" alt="" height="{{imgHeight}}" width="{{imgWidth}}" ng-click="openFileWindow('webpopfileb')" style="cursor:pointer;"/>
                            </div>
                            <input type="file" accept=".jpg,.jpeg,.png" id="webpopfileb" style="width: 1px; display: none;" class="notificationImageFile" />
                        </div>
                    </div>
                    <div class="col-sm-9" style="top:75% ;right:14%">
                        <div class="row">
                            <div id="banner-t" class="mb-5 trun" style="word-wrap: break-word; text-align: center;"><b>{{web_pop_obj.title}}</b></div>
                            <div id="banner-m" class="mb-5" style="margin-left: 17%;word-wrap: break-word; width:70%; text-align: center; overflow: hidden;">{{web_pop_obj.message}}</div>
                            <!-- <a style="word-wrap: break-word;min-height: 40px;" href="{{web_pop_obj.url}}" target="_blank">{{web_pop_obj.url}}</a> -->
                        </div>
                    </div>
                    
                </div>
                <!-- banner end ===-->
            </div> 
        <!-- web push Setting section -->
            <div class="col-sm-6 ui-sortable">
                <div class="panel-body">
                    <div ng-cloak>
                    <!-- <fieldset id="pushTemplate"> -->
                        <legend>Web Pop Up Settings</legend>
                        
                        <div class="form-group">
                            <label class="col-md-3 control-label">Select Existing Template</label>
                            <a href="javascript:void(0)" ng-click="editTemplate('WEB_POPUP')" class="col-md-1 href="">  <i class="fa fa-pencil"></i> </a>
                            <div class="col-md-8">
                                <select id="selectPushTemplate" ng-model="selectPushTemplate" ng-change="getAppTemplatesById(selectPushTemplate)" class="form-control input-sm">
                                    <option value="">Select Template</option>
                                    <option ng-repeat="pushTemplate in pushTemplates" value="{{pushTemplate._id}}">{{pushTemplate.template_name}}</option>
                                </select>
                            </div>
                        </div>
    
                        <div class="clearfix down-space"></div>
                        
                        <div style="width: 98%; height:12px; border-bottom: 1px solid #e2e7eb; text-align: center; margin-bottom: 10px; margin-left: 2%;">
                            <span style="font-size: 15px; background-color: #F3F5F6; padding: 0 10px;">
                            Create New
                            </span>
                        </div>
    
                        <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">Template Name</label>
                            <div class="col-md-8">
                                <input type="text" id="templateName" class="form-control" placeholder="Template Name" maxlength="40" ng-model="cTools.template_name" >
                                <span>{{template_message_error}}</span>
                            </div>
                        </div>
    
                        <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">Redirect URL</label>
                            <div class="col-md-8 relative">
                                <input type="text" id="web_pop_redirectUrl" class="form-control inputEditCustomField" placeholder="Redirect URL" maxlength="256" ng-keydown="getValuesOnChange($event,'url')" ng-model="web_pop_obj.url" >
                                <span>{{template_url_error}}</span>
                            </div> 
                        </div>
                        
                        <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">Pop Up Position</label>
                            <div class="col-md-8">
                                <select id="selectPushTemplate" ng-model="web_pop_obj.ps" class="form-control input-sm">
                                    <option value="T-R" selected>Top - Right</option>
                                    <option value="T-L" >Top - Left</option>
                                    <option value="B-R" >Bottom - Right</option>
                                    <option value="B-L" >Bottom - Left</option>
                                </select>
                            </div>
                        </div>

                        <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">Pop Up Type</label>
                            <div class="col-md-8">
                                <select id="selectPushTemplate" ng-model="web_pop_obj.mode" class="form-control input-sm">
                                    <option value="Box" selected>Box</option>
                                    <option value="Banner" >Banner</option>
                                    <!-- <option value="Interstitial" >Interstitial</option> -->
                                </select>
                            </div>
                        </div>

                        <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">Border Radius</label>
                            <div class="col-md-6 relative" style="padding-right: 5px;">
                                <input type="number" id="web_pop_title" class="form-control inputEditCustomField" placeholder="Pop Up Border Radius"  ng-model="web_pop_obj.br" maxlength="250" >
                            </div>
                            <div class="col-md-2" style="padding-left: 0px;">
                                <select id="selectPushTemplate" ng-model="web_pop_obj.brType" class="form-control input-sm">
                                    <!-- <option value="px" selected>px</option> -->
                                    <option value="%" selected>%</option>
                                </select>
                            </div>
                        </div>

                        <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">Width </label>
                            <div class="col-md-6 relative" style="padding-right: 5px;">
                                <input type="number" id="web_pop_width" class="form-control inputEditCustomField" placeholder="Pop Up Width"  ng-model="web_pop_obj.wh" value="" maxlength="250" >
                            </div>
                            <div class="col-md-2" style="padding-left: 0px;">
                                <select id="selectPushTemplate" ng-model="web_pop_obj.whType" class="form-control input-sm">
                                    <option value="px" selected>px</option>
                                    <!-- <option value="%" selected>%</option> -->
                                </select>
                            </div>
                        </div>

                        <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">Header Color</label>
                            <div class="col-md-8 relative">
                                <input type="color" id="web_pop_hc" class="form-control inputEditCustomField" ng-model="web_pop_obj.hc" >
                            </div>
                        </div>

                        <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">Message Color</label>
                            <div class="col-md-8 relative">
                                <input type="color" id="web_pop_dc" class="form-control inputEditCustomField"  ng-model="web_pop_obj.dc" >
                            </div>
                        </div>

                        <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">background Color</label>
                            <div class="col-md-8 relative">
                                <input type="color" id="web_pop_bg" class="form-control inputEditCustomField" value="" placeholder="Title" ng-model="web_pop_obj.bg" >
                            </div>
                        </div>


                        <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">Title</label>
                            <div class="col-md-8 relative">
                                <input type="text" id="web_pop_title" class="form-control inputEditCustomField" placeholder="Title" ng-keydown="getValuesOnChange($event,'title')" ng-model="web_pop_obj.title" maxlength="50" >
                                <span>{{template_title_error}}</span>
                            </div>
                        </div>
    
                        <div  class="clearfix down-space"></div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">Message</label>
                            <div class="col-md-8 relative">
                                <!--ng-model="cTools.web_title"-->
                                <textarea class="form-control inputEditCustomField" rows="5" ng-keydown="getValuesOnChange($event,'message')" ng-model="web_pop_obj.message" id="web_message" maxlength="119"></textarea>
                                <span>{{template_message_error}}</span>
                            </div>
                        </div>
    
                        <div  class="clearfix down-space"></div>
                        
                        <div  class="clearfix down-space"></div>
                        <!-- </fieldset> -->
                    </div>
                    <div  class="clearfix down-space"></div>
                    <div class="form-group">
                        <div class="col-md-4">
                            &nbsp;
                        </div>
                        <div class="col-md-8">
                            <span ng-if="template_name_error" style="color: red">{{template_name_error}}</span>
                        </div>
                    </div>
                    <div  class="clearfix down-space"></div>
                    <div  class="clearfix down-space"></div>
                    <legend>                    
                    </legend>
                    <div class="form-group">
                        <label class="col-md-3 control-label"></label>
                        <div class="col-md-9" style="text-align: right;">
                            <button type="button" ng-show="btnWebPopUpSavePush"  ng-click="saveWebPopUpSettingsTools()" class="btn btn-sm btn-success">Submit </button>
                            <button type="button" ng-show="btnWebPopUpUpdatePush" ng-click="updateWebPopUpTemplateSettingsTools()" class="btn btn-sm btn-success">Update </button>
                            <button type="button" id="btnClose" class="btn btn-sm btn-success" ng-click="closeTemplate(clearTemplateId);">Close</button>
                            
                        </div>
                        
                    </div>
                </div>
            </div>
        <!-- Setting ends here -->
        </div>
    </div>
    </div>
    </div>
    
    <!-- Dialog  custom field popup Start-->
    <!-- <div class="modal fade" id="customfields-dialog" style="z-index:1050!important;">
        <div class="modal-dialog embedCustomField">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Embed Custom Fields</h4>
                </div>
                <div class="modal-body">
                    
                    <div style="height:250px;overflow:auto">
                    <table class="table">
                        <thead>                     
                            <th>Select</th>
                            <th>Field Name</th>
                            <th>Default Value</th>                                              
                        </thead>
                        <tbody ng-repeat="cf in customFields">
                            <tr >
                                <td><input type="checkbox" ng-model="cf.selected"/></td>
                                <td>{{cf.name}}</td> 
                                <td><input type="text" placeholder="Default Value" class="form-control" ng-model="cf.defaultValue"></td>                            
                            </tr>
                        </tbody>
                    </table>
                    </div>                                                              
                </div>
                <div class="modal-footer">              
                    <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="embedCustomField()"  data-dismiss="modal">Save</button>                
                    <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="refreshCustomFields()" data-dismiss="modal">Cancel</button>
                   
                </div>
            </div>
        </div>
    </div> -->
    <!-- Dialog  custom field popup End-->