<script src="../javascripts/semusi/semusi.campaignScript.js"></script>
<style>
    .tabbable-line>.nav-tabs {
        border: none;
        margin: 0px;
    }

    .tabbable-line>.nav-tabs>li {
        margin-right: 2px;
    }

    .tabbable-line>.nav-tabs>li>a {
        border: 0;
        margin-right: 0;
        color: #737373;
    }

    .tabbable-line>.nav-tabs>li>a>i {
        color: #a6a6a6;
    }

    .tabbable-line>.nav-tabs>li.open,
    .tabbable-line>.nav-tabs>li:hover {
        border-bottom: 4px solid #00ACAC;
    }

    .tabbable-line>.nav-tabs>li.open>a,
    .tabbable-line>.nav-tabs>li:hover>a {
        border: 0;
        background: none !important;
        color: #333333;
    }

    .tabbable-line>.nav-tabs>li.open>a>i,
    .tabbable-line>.nav-tabs>li:hover>a>i {
        color: #a6a6a6;
    }

    .tabbable-line>.nav-tabs>li.open .dropdown-menu,
    .tabbable-line>.nav-tabs>li:hover .dropdown-menu {
        margin-top: 0px;
    }

    .tabbable-line>.nav-tabs>li.active {
        border-bottom: 4px solid #00ACAC;
        position: relative;
    }

    .tabbable-line>.nav-tabs>li.active>a {
        border: 0;
        color: #333333;
    }

    .tabbable-line>.nav-tabs>li.active>a>i {
        color: #404040;
    }

    .tabbable-line>.tab-content {
        margin-top: -3px;
        background-color: #fff;
        border: 0;
        border-top: 1px solid #eee;
        padding: 15px 0;
    }

    .portlet .tabbable-line>.tab-content {
        padding-bottom: 0;
    }

    .nav-tabs {
        background: #fff !important;
        border-top: 1px solid #f0f0f0 !important;
        border-radius: 0px !important;
    }

    .save-v {
        cursor: pointer;
        height: 25px;
        padding: 5px;
    }
</style>
<div ng-hide="pushNotification">
  <!-- Modal -->
  <div class="modal fade "style="z-index:1049!important;"  id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Select an Upload Method</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top: -20px;">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class='container' ng-show="urlbasedImgUpload">
            <input class="form-control" placeholder="Enter your Image url here" style="width: 80%; margin:7px 0px ;" type="text" id="inputImgUrl_1"ng-model="inputImgUrl">
            <button class='btn btn-sm btn-primary' style="margin:7px 0px ;" ng-click="saveUserUrl(inputImgUrl)"> Upload Image </button>
        </div>
        <div class="modal-footer">
          <button type="button" ng-click='openUrlInput(ImageType)' class="btn btn-secondary">Upload from Web</button>
          <button type="button" ng-click="openFileWindow(ImageType)" class="btn btn-secondary">Upload from Device</button>
        </div>
      </div>
    </div>
  </div>


  

    <!-- verient temprary hide for sbi card  -->
    <div class="row">
        <div class="col-sm-12">
            <div class="col-sm-1"></div>
            <div class="col-sm-9">
                <div class="collapse navbar-collapse tabbable-line">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="relative pushSlide"
                            ng-repeat="variableName in savevariantdata track by $index">
                            <i class="fa fa-close closeVariantIcon" ng-click="removevariant($index,'PUSH')"
                                style="z-index: 99999; cursor: pointer;"></i>
                            <a href="javascript:void(0)" ng-click="showVariantPushData($index, 'PUSH', 'Multivariate')"
                                aria-controls="child1" role="tab" data-toggle="tab" aria-expanded="true"
                                style="padding-top: 0px;">
                                {{ variableName.variance_top_name }}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div  id="ab_testing_variant" class="col-sm-2">
                <div class="dropdown" ng-if="savevariantdata.length <= 5">
                    <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Select variant
                        <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li ng-click="pushVariant()">
                            <div class="save-v">Create variant</div>
                        </li>
                        <li ng-repeat="v in variantArr">
                            <div ng-click="showVariantPushData($index, 'PUSH', 'Multivariate')" class="save-v addList">
                                {{ v.name }} </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="language_variant" class="col-sm-2">
                <div class="dropdown" ng-if="savevariantdata.length <= 5">
                    <button id='langBtn' class="btn btn-success dropdown-toggle" type="button"
                        data-toggle="dropdown">Select Language
                        <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <!-- <li ng-click="createVariant()"><div class="save-v"> Create Language</div></li> -->
                        <li ng-repeat="v in variantList">
                            <div ng-click="savevariantDataPush(v, 'PUSH', 'Profile')" class="save-v"> {{ v.name }}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row">

        <!-- Iphone Device -->
        <div class="col-sm-4 ui-sortable" id="campIphonePreview" style="display: none;">
            <div id="showPreview">
                <div class="iphonePreview openExpandedView" style="top: 20px; display: block;" id="">
                    <div id="pushNotificationView" class="dataView">

                        <!-- <div ng-hide="isBasic" class="dataView1"> -->
                        <div class="dataView1">
                            <div class="form-group">
                                <div class="" style="width: 236px; margin-top: 35px;">
                                    <div
                                        style="float: left; width: 40px;   height: 70px;  margin-left: 8px; margin-top: 3px;">
                                        <img src="{{ACTIVE_APP_ICON}}" height="40" width="40">

                                    </div>
                                    <div style="width: 186px; height:70px; float: right;">
                                        <span
                                            style="font-size: 12px; margin-left: 12px;  color: #ffffff;">{{ACTIVE_APP_NAME}}</span>
                                        <textarea ng-model="cTools.notificationDescription" id="notificationDescription"
                                            placeholder="Push notification description"
                                            class="form-control push_message_desc" ng-trim="false" maxlength="250"
                                            style="border: none; font-size: 11px;    margin: 5px 0; min-height:60px!important"
                                            ng-keyup="remainCharacter('notificationDescription', 250, 'iosPush')"
                                            ng-blur="remainCharacterHide()">
                                        </textarea>

                                        <i class="fa fa-pencil"
                                            style="cursor: pointer;float: right;margin-right: -1px;margin-top:-68px;border: none;"
                                            aria-hidden="true" href="#customfields-dialog" data-toggle="modal"
                                            ng-click="refreshCustomFields('notificationDescription')"></i>
                                    </div>

                                </div>
                            </div>
                            <div class="clearFloat"></div>
                            <div class="clearfix down-space"></div>
                            <div class="form-group">
                                <div class="col-md-12 ifActionIsYes">
                                    <span ng-repeat="action in actionsList track by $index">
                                        <a href="javascript:void(0)" data-toggle="modal" data-target="#actions-dialog"
                                            class="spanButton"
                                            style="cursor:pointer; display:inline-block; margin-bottom:10px; text-decoration: none;"
                                            ng-click="editAction($index)">{{action.actionName}}</a>
                                    </span>

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

                    </div>
                </div>
                <div ng-if="leftCharacter"
                    ng-style="{'position':'absolute', 'left':'50px','color':'#ffffff', 'bottom': leftCharBottom+'px'}">
                    {{leftCharacter}}
                </div>
            </div>
        </div>
        <!-- </div>
        </div> -->
        <!-- Iphone device ends here -->
        <!-- Device Android -->
        <div class="col-sm-4 ui-sortable" id="campAndroidPreview">
            <div id="showPreview">
                <div class="phonePreview openExpandedView" style="top: 20px; display: block;" id="previewDiv">
                    <div id="pushNotificationView" class="dataView">
                        <div class="dataView1">
                            <div class="clearfix"></div>
                            <div class="form-group" ng-hide="isBasic">
                                <div>
                                    <div style="width: 250px; height: 55px">

                                        <div class="exp-push" style="width: 60px; float: left; height: 90px;">
                                            <img src="../images/dashboard/ajax-loader.gif" class="loaderImg"
                                                ng-hide="loderImg" style="cursor:pointer;">                                             <!-- TEST END -->
                                            <div style="height: 60px; width: 60px; border: 1px solid #2d353c; margin-left:5px;"
                                                id="isBasicStaticImg" ng-hide="isBasicStaticImg">
                                                <img src="../images/dashboard/1462811934_file_add.png" alt=""
                                                    ng-click="openAskWindow('basicNotify',1)"
                                                    style="margin-left: 10px;margin-top: 12px;cursor:pointer;"
                                                    title="Upload Image" />
                                            </div>
                                            <div ng-hide="isBasicS3Img">

                                                <img src="{{notificationImageFile}}" alt="" height="{{imgHeight}}"
                                                    width="{{imgWidth}}" ng-click="openAskWindow('basicNotify',1)"
                                                    style="cursor:pointer;" loading="lazy" />

                                                <!-- <i class="fa fa-pencil" style="margin-right: -12px;font-size: 10px;float: right; cursor:pointer; z-index: 999;" ></i> -->
                                            </div>

                                            <input type="file" accept=".jpg,.jpeg,.png" id="basicNotify"
                                                style="width: 1px; display: none;" class="notificationImageFile" />
                                        </div>

                                        <div  id="header-dis" style="float: left;width: 154px;">

                                            <input type="text" class="form-control push_message"
                                            style="width:167px; overflow: hidden; text-overflow: ellipsis; font-size:11px; border:none; margin-left:10px;"
                                            name="notificationHeader" ng-model="cTools.notificationHeader"
                                            placeholder="Push notification header" id="notificationHeader"
                                            ng-trim="false" maxlength="65">
                                     

                                            <i id="header-pen" class="fa fa-pencil"
                                                style="float: right; margin-right:-175px; margin-top: 6px; cursor:pointer"
                                                href="#customfields-dialog" data-toggle="modal"
                                                ng-click="refreshCustomFields('notificationHeader')"></i>

                                                <textarea ng-model="cTools.notificationDescription"
                                                id="notificationDescription" 
                                                placeholder="Push notification Description"
                                                class="form-control push_message_desc push_notification_description"
                                                style="min-height: 115px; top: 100px; width: 180px; border: none; font-size: 11px; font-weight: 200;"
                                                ng-trim="false" maxlength="240">
                                            </textarea>                                      
                                            <!-- <p>You have {{ 250 - cTools.notificationDescription.length}} characters left  </p> -->
                                            <i class="fa fa-pencil" id="pencil3"
                                                style="float: right; margin-right:-10px; margin-top:-60px; cursor:pointer"
                                                aria-hidden="true" href="#customfields-dialog" data-toggle="modal"
                                                ng-click="refreshCustomFields('notificationDescription')"></i>
                                            <span id="pushExpendedVal" style="display: none"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="isExpanded" class="dataView2"
                                style="display: none;width: 240px; height: 145px; margin-top: 30%; border: 1px solid #2d353c;">
                                <img src="../images/dashboard/ajax-loader.gif" class="loaderImg" ng-hide="exploderImg"
                                    style="cursor:pointer; margin-top: 10%;">
                                <div style="" id="expImguploader" style="position: relative;">
                                    <img src="../images/dashboard/1462811934_file_add.png" id="expImguploader" alt=""
                                        ng-click="openAskWindow('expandedNotify',1)"
                                        style="cursor:pointer; position: absolute; right: 50%; bottom: 50%"
                                        title="Upload Expanded Image" />
                                </div>
                                <div ng-show="isExpendedImg">

                                    <img src="{{expandedNotificationImageFile}}" height="145" width="240" alt="" ng-click="openAskWindow('expandedNotify',1)" loading="lazy" ng-if="!expandedNotificationVideoFile" />
                                    <video src="{{expandedNotificationVideoFile}}" ng-show="expandedNotificationVideoFile" id="expandedNotificationImageFile" controls width="240" height="145" style="border: none; margin-top: -5px;margin-top: 3%;"  ng-click="openAskWindow('expandedNotify',1)" loading="lazy">
                                        <source src="{{expandedNotificationVideoFile}}" type="video/mp4" loading="lazy">
                                        Your browser does not support the video tag. 
                                     </video>

                                    <!-- <i class="fa fa-pencil" id="pencilUpload" style="margin-top:0px;float: right;font-size: 9px; cursor:pointer; z-index: 9999; display: none;" ></i> -->

                                </div>

                                <input type="file" accept=".jpg,.jpeg,.png,.gif,.zip,.mp4" id="expandedNotify"
                                    style=" display:none;width: 1px;" class="notificationImageFile" />
                            </div>
                             <!-- This is for exp text only -->
                                          
                             <div id="exptextdiv" style="height: 120px; top: 168px; width: 230px; border: none; position: absolute; left: 5px;" hidden>
                                <textarea style="border: none; width: 230px;  height: 120%;" ng-model="cTools.expandedNotificationDescription"
                                    placeholder="Push expanded description" id="expNotify-dis" class="form-control push_message_desc" ng-trim="false" maxlength="240">
                                </textarea>
                            
                                <i class="fa fa-pencil" id="pen_1" style="float: right; margin-right: -10px; margin-top: -50px; cursor: pointer"
                                    aria-hidden="true" href="#customfields-dialog" data-toggle="modal"
                                    ng-click="refreshCustomFields('expandedNotificationDescription')"></i>
                            </div>
                            
                       
                        <!-- This is for exp text only -->
                            <!--  <div id="txtExpanded" class="dataView2" style="width: 240px; height: 145px;">
                                            
                                        <div style="56px !important;top: 115px; width: 240px; border: none;position: absolute;left: 0px;">
                                            <textarea 
                                                style="border: none; height: 56px !important;" 
                                                ng-model="cTools.expandedNotificationDescription" 
                                                id="expandedNotificationDescription" placeholder="Push expanded description" class="form-control push_message_desc"
                                                ng-trim="false" 
                                                maxlength="120"
                                                ng-keyup="remainCharacter('expandedNotificationDescription', 120, 'androidPush')"
                                                ng-blur="remainCharacterHide()">
                                            </textarea>
                                            
                                            <i class="fa fa-pencil" style="float: right; margin-right:1px; margin-top:-64px; cursor:pointer" aria-hidden="true" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('expandedNotificationDescription')"></i>
                                        </div>
                                        
                                    </div> -->

                            <div class="clearfix"></div>
                            <div class="form-group">
                                <div class="col-md-12 ifActionIsYes">
                                    <span ng-repeat="action in actionsList track by $index">
                                        <a href="javascript:void(0)" data-toggle="modal" data-target="#actions-dialog"
                                            class="spanButton"
                                            style="cursor:pointer; display:inline-block; margin-bottom:10px; text-decoration: none;"
                                            ng-click="editAction($index)">{{action.actionName}}</a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix down-space"></div>

                    </div>
                </div>
                <div ng-if="leftCharacter"
                    ng-style="{'position':'absolute', 'left':'50px','color':'#ffffff', 'bottom': leftCharBottom+'px'}">
                    {{leftCharacter}}
                </div>
            </div>
        </div>
        <!-- </div>
        </div> -->
        <!-- device android ends -->
        <!-- PushNotification Setting section -->
        <div class="col-sm-8 ui-sortable">
            <div class="panel-body">
                <div id="divSavedTools" ng-cloak>

                    <!-- <fieldset id="pushTemplate"> -->
                    <legend>Push Notification Settings</legend>

                    <div class="form-group">
                        <label class="col-md-3 control-label">Select Existing Template</label>
                        <a ng-click="editTemplate('PUSH')" class="col-md-1 href="">  <i class=" fa fa-pencil"></i> </a>
                        <div class="col-md-8">
                            <select class="template-select form-control input-sm">
                            </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">Preview</label>
                                    <div class="col-md-8">
                                        <input 
                                            bs-switch 
                                            state="cTools.defaultDevice" 
                                            type="checkbox" 
                                            class="BSswitch" 
                                            data-off-text="&nbsp;Android" 
                                            data-on-text="&nbsp;iPhone" 
                                            data-label-text="&nbsp;iPhone" 
                                            data-on-color="success" 
                                            data-off-color="success"
                                            onSwitchChange="devicePreview">
                                        
                                    </div>
                                </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 style="color:red;margin-top:5px;">{{template_name_error}}</span>
                        </div>
                    </div>
                    <div class="clearfix down-space" ng-show="!cTools.defaultDevice"></div>
                    <div class="form-group" ng-show="!cTools.defaultDevice">
                        <label  class="col-md-4 control-label exp-text" >Expanded Image</label>
                        <div class="col-md-8" id="expImagebtn">
                            <input bs-switch state="cTools.expendedImg" type="checkbox" class="BSswitch"
                                data-off-text="&nbsp;No" data-on-text="&nbsp;Yes" data-label-text="&nbsp;Yes"
                                data-on-color="success" data-off-color="success" onSwitchChange="expendedImgAction">
                        </div>
                        <div class="clearfix down-space"></div>
                        <div class="clearfix down-space"></div>
                        
                        <label  class="col-md-4 control-label exp-text" >Expanded Text</label>
                        <div class="col-md-8" id="expTextbtn_new">
                            <input bs-switch state="cTools.expendedText" type="checkbox" class="BSswitch"
                                data-off-text="&nbsp;No" data-on-text="&nbsp;Yes" data-label-text="&nbsp;Yes"
                                data-on-color="success" data-off-color="success" onSwitchChange="expendedTextAction">
                        </div>
                        <div class="clearfix down-space"></div>
                        <div class="form-group" id="diff_col" hidden>
                            <label class="col-md-4 control-label">Image Slide Difference</label>
                            <div class="col-md-2">
                                <input type="number" id="diff" class="form-control" maxlength="40" style="width: 80px;">
                            </div>
                        </div>
                        <div class="clearfix down-space"></div>
                        <div class="form-group" id="loop_col" hidden>
                            <label class="col-md-4 control-label">Time Loop</label>
                            <div class="col-md-2">
                                <input type="number" id="loop" class="form-control" maxlength="40" style="width: 80px;">
                            </div>
                        </div>
                        <div class="clearfix down-space"></div>
                        <div class="form-group" id="gap_col" hidden>
                            <label class="col-md-4 control-label">Time Gap</label>
                            <div class="col-md-2">
                                <input type="number" id="gap" class="form-control" maxlength="40" style="width: 80px;">
                            </div>
                        </div>
                        <div class="clearfix down-space"></div>

                        <!-- Action Url Setting start here -->
                        <div class="form-group" id="actionButtonPush" >
                            <label class="col-md-4 control-label">Action</label>
                            <div class="col-md-2"> <input bs-switch state="actionStyle" type="checkbox" class="BSswitch"
                                    data-off-text="&nbsp;No" data-on-text="&nbsp;Yes" data-label-text="&nbsp;Yes"
                                    data-on-color="success" data-off-color="success" onSwitchChange="actionType">

                            </div>
                            <div class="form-group ifActionIsYes">
                                <div class="col-md-3" style="text-align:center;">
                                    <button type="button" style="display: none;" id="addActionBtn"
                                        href="#actions-dialog" data-toggle="modal"
                                        class="btn btn-sm btn-danger addAction" ng-click="clearAction()">Add Action
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- Action Url Setting ends here -->
                        <div class="clearfix down-space"></div>

                        <div id="ifActionIsNo">
                            <div class="form-group">
                                <label class="col-md-4 control-label">URL Type</label>
                                <div class="col-md-8">
                                    <input bs-switch state="cTools.notifyType" type="checkbox" class="BSswitch"
                                        data-off-text="&nbsp;Deep&nbsp;Link" data-on-text="&nbsp;Landing&nbsp;Page"
                                        data-label-text="&nbsp;Landing&nbsp;Page" data-on-color="success"
                                        data-off-color="success" onSwitchChange="notificationType">

                                        <div class="form-group readOnly" id="webview_browser" ng-show="cTools.notificationType === 'lp'">
                                            <div class="clearfix down-space"></div>
                                            <label class="col control-label"></label>
                                            <div class="col">
                                                <label class="radio-inline">
                                                    <input type="radio" name="openOption" value="browser">
                                                    Open in browser
                                                </label>
                                                <label class="radio-inline">
                                                    <input type="radio" name="openOption" value="webview">
                                                    Open as webview
                                                </label>
                                            </div>
                                        </div>   
                                </div>
                            </div>
                            <div class="clearfix down-space"></div>
                            <div class="form-group" id="external_Url_div">
                                <label class="col-md-4 control-label">External URL/Deeplink URL</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control"
                                        placeholder="Enter external url or deep link url." ng-model="cTools.externalUrl"
                                        id="externalUrl">
                                </div>
                                <div class="col-md-1" id="pen_3">
                                    <i class="fa fa-2x fa-edit" style="cursor:pointer;float: right; margin-top: 0px;"
                                        href="#customfields-dialog" data-toggle="modal"
                                        ng-click="refreshCustomFields('externalUrl')"></i>
                                </div>
                            </div>
                            <div class="clearfix down-space"></div>
                            <!-- ADD Custom data start here -->
                            <div class="form-group">
                                <label class="col-md-4 control-label">Custom Data</label>
                                <div class="col-md-2">
                                    <input bs-switch state="customDataStyle" type="checkbox" class="BSswitch"
                                        data-off-text="&nbsp;No" data-on-text="&nbsp;Yes" data-label-text="&nbsp;Yes"
                                        data-on-color="success" data-off-color="success"
                                        onSwitchChange="customDataType">

                                </div>
                                <div class="form-group" ng-if="isCustomData">
                                    <div class="col-md-3" style="text-align:center;">
                                        <button type="button" href="#customData" data-toggle="modal"
                                            class="btn btn-sm btn-danger">Add</button>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix down-space"></div>
                            <!-- </fieldset> -->
                        </div>
                        <div class="clearfix down-space"></div>
                        <div class="form-group" id="specialAttributes">
                            <label class="col-md-4 control-label">Special Attributes</label>
                            <div id="ifAndroidisTrue">
                                <div class="col-md-2">
                                    <span>Sound</span>
                                    <div class="clearfix down-space"></div>

                                    <input bs-switch state="sound" type="checkbox" class="BSswitch"
                                        data-off-text="&nbsp;No" data-on-text="&nbsp;Yes" data-label-text="&nbsp;Yes"
                                        data-on-color="success" data-off-color="success" onSwitchChange="soundAction">

                                </div>
                                <div class="col-md-3">
                                    <span style="margin-left:22px;">Vibrate</span>
                                    <div class="clearfix down-space"></div>
                                    <div style="text-align:right;">
                                        <input bs-switch state="vibrate" type="checkbox" class="BSswitch"
                                            data-off-text="&nbsp;No" data-on-text="&nbsp;Yes"
                                            data-label-text="&nbsp;Yes" data-on-color="success" data-off-color="success"
                                            onSwitchChange="vibrateAction" s>
                                    </div>
                                </div>
                            </div>
                            <div id="ifIosisTrue" style="display: block;">
                                <div class="col-md-3">
                                    <span>Increment Badge</span>
                                    <div class="clearfix down-space"></div>
                                    <input bs-switch state="badge" type="checkbox" class="BSswitch"
                                        data-off-text="&nbsp;No" data-on-text="&nbsp;Yes" data-label-text="&nbsp;Yes"
                                        data-on-color="success" data-off-color="success"
                                        onSwitchChange="increMentBadge">
                                </div>
                            </div>
                        </div>

                        <div class="clearfix down-space"></div>

                        <div class="form-group">
                            <div class="col-md-4">
                                &nbsp;
                            </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-hide="btnSavePush" id="btnSavePush"
                                    ng-click="saveSettingsTools()" class="btn btn-sm btn-success">Submit </button>
                                <button type="button" ng-hide="btnUpdatePush" id="btnUpdatePush"
                                    ng-click="updateTemplateSettingsTools()" 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>
                            <tr ng-repeat="cf in customFields">
                                <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>
                            <tr>
                                <td>
                                    <input type="checkbox" ng-model="cevent.selectedCheckbox" />
                                </td>
                                <td>
                                    <div class="form-group">
                                        <select class="form-control"
                                            ng-change="getEventAttributes(cevent.selectedEvent)"
                                            ng-model="cevent.selectedEvent">
                                            <option value="{{ ev }}" ng-repeat="ev in eventsData" ng-selected="$first">
                                                {{ ev.event }}</option>
                                        </select>
                                    </div>
                                </td>

                                <td>
                                    <div class="form-group">
                                        <select class="form-control" ng-model="cevent.selectedAttribute">
                                            <option value="{{ at.name }}" ng-repeat="at in eventAttributes"
                                                ng-selected="$first"> {{ at.name }} </option>
                                        </select>
                                    </div>
                                    <input type="text" placeholder="Default Value" class="form-control"
                                        id="ceventDefaultValue" ng-model="cevent.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-->

<!-- Dialog  custom field popup Start for action-->
<div class="modal fade" id="actions-dialog" style="z-index:1040!important;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Manage Action</h4>
            </div>
            <div class="modal-body">

                <div style="height:250px;">
                    <div class="form-group row" style="margin-bottom:20px;">
                        <label class="col-md-3 control-label">Action Name</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" placeholder="Enter action name." id="actionName"
                                ng-model="action.actionName" maxlength="10"></input>
                            <span style="color:red;width:350px">{{actionNameError}}</span>
                        </div>
                    </div>
                    <div class="form-group row" style="margin-bottom:20px;">
                        <label class="col-md-3 control-label">Action Type {{pushAction.actionType}}</label>
                        <div class="col-md-7">
                            <label class="radio-inline">
                                <input type="radio" value="dl" ng-checked="true" ng-model="action.actionType"
                                    name="actionType">
                                Deep Link
                            </label>
                            <label class="radio-inline">
                                <input type="radio" value="lp" ng-model="action.actionType" name="actionType">
                                Landing Page
                            </label>

                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 control-label">Action URL</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control" placeholder="Enter action url."
                                id="actionExternalUrl" ng-model="action.actionExternalUrl"></input>
                            <span style="color:red;width:350px">{{actionUrlError}}</span>
                        </div>

                        <i class="fa fa-2x fa-edit" style="cursor:pointer" href="#customfields-dialog"
                            data-toggle="modal" ng-click="refreshCustomFields('actionExternalUrl')"></i>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <label style="color:red;width:350px"></label>

                <button class="btn btn-sm btn-primary m-r-5" ng-if="actionSave" type="button"
                    ng-click="addToActions()">Save</button>
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="addToActionsUpdate()"
                    ng-if="actionIndexSave">Update</button>

                <!-- ko if: actionsUpdate() >= 0 -->
                <button class="btn btn-sm btn-primary m-r-5" type="button" data-dismiss="modal" ng-if="!actionSave"
                    ng-click="deleteAction()">Delete</button>
                <!-- /ko -->

                <button class="btn btn-sm btn-primary m-r-5 cancelAction" type="button"
                    data-dismiss="modal">Cancel</button>

            </div>
        </div>
    </div>
</div>
<!-- Dialog  custom field popup End-->


<!-- Dialog  custom field popup Start for action-->
<div class="modal fade" id="customData" style="z-index:1040!important;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Manage Custom Data</h4>
            </div>
            <div class="modal-body">
                <div class="row" style="margin-bottom: 20px" ng-repeat="csutomData in customDataList as parentData" ng-init="parentIndex = $index">
                    <div class="col-sm-10">
                        <div class="col-sm-3">
                            <label for="inputsm">Key</label>
                            <input type="text" class="form-control" ng-model="csutomData.key" placeholder="Key">
                        </div>
                         <!-- accept type of cdata -->
                         <!-- selection of string by default  -->
                         <div class="col-sm-3" ng-init="csutomData.type = csutomData.type || 'string'">
                            <label for="inputsm">Type</label>
                            <select class="form-control"  ng-change="onCdataTypeChange(csutomData.type,parentIndex)" ng-model="csutomData.type">
                                <option value="string">String</option>
                                <option value="boolean">Boolean</option>
                                <option value="number">Number</option>
                                <option value="json">Object</option>
                                <option value="image">Image</option>
                            </select>
                        </div>
                         <!-- end accept Type of data  -->

                         <!-- Show different controls based on the selected type -->
                         <!-- Based on String -->
                         <div class="col-sm-6" ng-hide="csutomData.type === 'image' || csutomData.type === 'json' || csutomData.type === 'boolean' || csutomData.type === 'number' ">
                             <label for="inputsm">Value</label>
                             <input type="text" class="form-control" ng-model="csutomData.value" placeholder="Value" ng-disabled="!csutomData.type">
                         </div>
                        

                         <!-- Based on Boolen -->
                        <div class="col-sm-6" ng-if="csutomData.type === 'boolean'">
                            <label for="inputsm">Value</label>
                            <select class="form-control" ng-model="csutomData.value"
                            ng-options="option.value as option.label for option in booleanOptions">
                            </select>
                        </div>
                         <!-- Based on Number -->
                        <div class="col-sm-6" ng-if="csutomData.type === 'number'">
                            <label for="inputsm">Value</label>
                            <input type="number" class="form-control" ng-model="csutomData.value" placeholder="Value" ng-disabled="!csutomData.type">
                        </div>

                        <!-- Based on JSON -->
                        <div class="col-sm-6" ng-if="csutomData.type === 'json'">
                            <label for="inputsm">Value</label>
                            <!-- {{$index}}   which isworking uptil  here  -->


                            <div class="row" ng-repeat="jsonItem in csutomData.value track by $index">
                               

                                <div class="col-sm-5">
                                    <input type="text" class="form-control" ng-model="jsonItem.jkey" placeholder="Key">
                                </div>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" ng-model="jsonItem.jvalue" placeholder="Value">
                                </div>
                                <div class="col-sm-2">
                                
                                    <button ng-if="!$last" style="margin-bottom: 23px;" type="button" class="btn btn-danger btn-sm" ng-click="removeKeyValuePair(parentIndex,$index );"
                                    title="Add"><i class="fa fa-minus"></i></button>


                                    <button  ng-if="$last" style="margin-bottom: 23px;" type="button" class="btn btn-success btn-sm" ng-click="addKeyValuePair(parentIndex,$index );"
                                        title="Add"><i class="fa fa-plus"></i></button>
                                </div>
                            </div>
                        </div>

                        <!-- BASED ON IMAGE -->
                        <div class="col-sm-6" ng-if="csutomData.type === 'image' && !isImageHidden" id="imageselect" ng-hide="isImageHidden">
                            <label for="inputsm">Value</label>
                            <!-- <input type="url" class="form-control" id="fff" ng-model="csutomData.value" placeholder="Value" ng-disabled="!csutomData.type"> -->
                            <div style="text-align: center; display: flex; justify-content: center; align-items: center;">
                                <img style="height: 30px; width: 30px;" src="../images/dashboard/1462811934_file_add.png" alt="" ng-click="openAskWindow('cDataImage',1)" style="cursor:pointer;" title="Upload Image" />
                            </div>
                            <input type="file" ng-model="csutomData.value" id="cDataImage" accept=".jpg,.jpeg,.png" style="width: 1px; display: none;" />
                            <!-- <input type="text" style="display: none;" class="form-control" ng-model="csutomData.value" placeholder="Value" ng-disabled="!csutomData.type"> -->
                        </div>


                           <!-- Based on edit -->
                           <div class="col-sm-6" ng-if="csutomData.type === 'image' && isInputShown "ng-show="isInputShown">
                            <label for="inputsm">Value</label>
                            <input type="url" class="form-control" ng-model="csutomData.value" placeholder="Value" ng-disabled="!csutomData.type">
                            <img style="height: 15px; width: 15px;" src="../images/dashboard/1462811934_file_add.png" alt="" ng-click="openAskWindow('cDataImage',1)" style="cursor:pointer;" title="Upload Image" />

                        </div>

                    </div>
                    <div class="col-sm-2">
                        <div ng-if="!$last" style="margin-top: 23px;">
                            <button type="button" class="btn btn-danger btn-sm" ng-click="removeCustomData(customDataList.indexOf(csutomData),$index);"
                                title="Add"><i class="fa fa-minus"></i>
                            </button>
                        </div>
                        <div ng-if="$last" style="margin-top: 23px;">
                            <button type="button" class="btn btn-primary btn-sm" ng-click="addCustomData(customDataList.indexOf(csutomData),$index);"
                                title="Add"><i class="fa fa-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-sm btn-primary m-r-5" type="button" data-dismiss="modal">Done</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Dialog  custom field popup End-->

<!-- Dialog  create-variant popup Start for action-->
<div class="modal fade" id="create-variant" style="z-index:1040!important;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Carete Variant</h4>
            </div>
            <div class="modal-body">
                <div class="row" style="padding: 4px; margin-bottom: 20px">
                    <div class="col-sm-12">
                        <div class="alert alert-success" role="alert" ng-if="success">
                            This variant successfully saved.
                        </div>
                        <input type="text" class="form-control" ng-model="variant.name"
                            placeholder="Enter Variant Name " />
                        <span ng-if="verror" class="text-danger"> {{ verror }} </span>
                    </div>

                </div>
                <div class="row" style="margin-bottom: 20px">
                    <div class="tabbable-panel">
                        <div class="tabbable-line">
                            <ul class="nav nav-tabs">
                                <li class="active" ng-if="$index == 0"
                                    ng-repeat="cat in categories |filter :{category:category}">
                                    <a href="javascript:void(0)" ng-click="selectCategory(cat)" data-toggle="tab">{{
                                        cat.category }} </a>
                                </li>
                                <li ng-if="$index > 0" ng-repeat="cat in categories |filter :{category:category}">
                                    <a href="javascript:void(0)" ng-click="selectCategory(cat)" data-toggle="tab">{{
                                        cat.category }} </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab_default_1">
                                    <p>
                                    <div class="col-sm-4">
                                        <select class="form-control" ng-model="variant.operand"
                                            ng-click="selectAttribute(variant.operand)">
                                            <option value="{{ attr.label }}" ng-repeat="attr in attributes">{{ attr.text
                                                }}</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-4">

                                        <select class="form-control" ng-model="variant.operator"
                                            ng-click="selectOperator(variant.operator)">
                                            <option value="{{ oprt.label }}" ng-repeat="oprt in operators[0]">{{
                                                oprt.text }}</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-4">
                                        <input type="text" ng-model="variant.value" class="form-control"
                                            placeholder="value" />
                                    </div>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-sm btn-primary m-r-5" type="button" data-dismiss="modal">Close</button>
                    <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="submitvariant()">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>