<style>


/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}
td, th {
    word-wrap: break-word;
    max-width: 150px; /* Adjust this value based on your needs */
    white-space: normal;
}

.modal.ng-show {
    display: block;
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 800px;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    border-radius: 5px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

.table tbody + tbody {
    border-top: 2px solid #dee2e6;
}

.table-bordered {
    border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6;
}

    .highcharts-figure,
    .highcharts-data-table table {
        min-width: 310px;
        max-width: 800px;
        margin: 1em auto;
    }

    .customAudCamp {
        color: white;
        margin-top: 60px;
        margin-left: 80px;
        text-align: center;
    }

    .box-content-preview {
        box-shadow: 0 0 3px #d2d2d2;
        border-bottom: 1px solid #cbcbcb;
        padding: 10px;
    }

    .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;
    }

    #container {
        height: 400px;
    }

    .highcharts-data-table table {
        font-family: Verdana, sans-serif;
        border-collapse: collapse;
        border: 1px solid #EBEBEB;
        margin: 10px auto;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }

    .highcharts-data-table caption {
        padding: 1em 0;
        font-size: 1.2em;
        color: #555;
    }

    .highcharts-data-table th {
        font-weight: 600;
        padding: 0.5em;
    }

    .highcharts-data-table td,
    .highcharts-data-table th,
    .highcharts-data-table caption {
        padding: 0.5em;
    }

    .highcharts-data-table thead tr,
    .highcharts-data-table tr:nth-child(even) {
        background: #f8f8f8;
    }

    .highcharts-data-table tr:hover {
        background: #f1f7ff;
    }
</style>

<!-- TODO WILL IMPLEMENT THIS ONCE DATES WILL BE OPEN -->
<div class="row">
    <form class="form-horizontal">
        <div class="form-group" style="width:50%;float:left;padding-left:24px;margin-bottom:0px;">
            <h3 style="font-size: 26px;">Campaign Details </h3> 
        </div>

        <div class="form-group" style="width:35%;float:right;padding-right:10px;margin-bottom:0px;">
                <label class="col-md-3 control-label"><span style="font-size: 14px;">Period</span></label>
                <div class="col-md-9">
                    <div id="advance-daterange" class="btn btn-white advance-daterange-class" >
                        <span></span>
                        <i class="fa fa-angle-down fa-fw"></i>
                    </div>
                </div>
        </div>
    </form>
</div>
<div class="row" style="margin-top:35px;">
        <div class="row">
                <div class="col-md-8">
                    <div class="col-md-12" style="width: min-content;">
                        <div class="panel panel-default">
                            <div class="">
                                <table class="table table-striped panel-body">
                                    <thead>
                                        <tr ng-repeat="camp in campaignStatusData" >
                                            <th ng-if="platformWiseData.length>0 && activeAppid == '5e3880a5838d70064cd27049'" title="View Platform-wise Campaign Data"  ng-click="ShowPlatformWiseData()">                                                 <i id="chartIcon" style="font-size: 22px !important; cursor: pointer;"
                                                class="fa fa-2x fa-mobile" aria-hidden="true"></i></th>
                                            <th ng-if="campaignVariantData.length>0"><i id="faIcon"
                                                    style="font-size: 22px !important; cursor: pointer;"
                                                    class="fa fa-2x fa-angle-right" aria-hidden="true"
                                                    ng-click="openChild()"></i></th>
                                            <th scope="col">Type</th>
                                            <th scope="col">Name</th>
                                            <th scope="col">Audience Segment</th>
                                            <th scope="col">Reachable Audience</th>
                                            <th scope="col">Sent</th>
                                            <th class="receivedTo" scope="col">Received</th>
                                            <th ng-if="camp.type == 'IN-APP'" class="deletedTo" scope="col">Dismissed</th>
                                            <th class="impressionRate" scope="col">Impression Rate</th>
                                            <th class="clickedTo" scope="col">Clicked</th>
                                            <th class="ctr" scope="col">CTR</th>
                                            <th class="conversion" scope="col">Conversion</th>
                                            <th scope="col">Start Date</th>
                                            <th scope="col">End Date</th>
                                            <th scope="col">Maker</th>
                                            <th scope="col">Checker</th>
                                            <th ng-if=" controlGroup != '' " scope="col">Control Group</th>
                                            <th id="camp_details_csv" scope="col"><a style="text-decoration: none; color:gray;"
                                                href="javascript:void(0)" ng-click="downloadCSV()"
                                                title="Download csv"><i class="fa fa-2x fa-download"></i></a></th>
                                                <th id="camp_details_search" scope="col">
                                                    <input ng-show="campaignStatusData[0].cy === 't'" type="text" id="searchInputRequestId" ng-model="requestId" placeholder="Enter Request Id" style="padding: 5px;">
                                                </th>
                                                <th>
                                                    <a ng-show="campaignStatusData[0].cy === 't'" id="searchBtn" ng-href="javascript:void(0)" ng-click="searchRequestId(requestId)" style="text-decoration: none; color: gray;" title="Search">
                                                        <i class="fa fa-2x fa-search"></i>
                                                    </a>
                                                </th>                                                    
                                        <th scope></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="camp in campaignStatusData">
                                            <td ng-if="platformWiseData.length>0  && activeAppid == '5e3880a5838d70064cd27049'"></td>
                                            <td ng-if="campaignVariantData.length>0"></td>
                                            <td>{{camp.type}}</td>
                                            <td>{{camp.cname}}</td>
                                            <td>{{camp.segmentname}}</td>
                                            <td>{{camp.reach}}</td> <!-- Reachable Audience -->
                                            <td>{{totalStats.pushedTo ? totalStats.pushedTo : camp.pushedTo}}</td>

                                            <td class="receivedTo" >{{camp.receivedTo}}</td> 
                                            <td ng-if="camp.type == 'IN-APP'" class="deletedTo">{{ camp.deletedTo ? camp.deletedTo : 0 }}</td>
                                            <td class="impressionRate">{{camp.impressionRate}}</td>
                                            <td class="clickedTo">{{totalStats.clickedTo ? totalStats.clickedTo : camp.clickedTo}}</td>
                                            <td class="ctr" >{{totalStats.ctr ? totalStats.ctr : camp.ctr}}</td> 
                                            <td class="conversion" >{{totalStats.conversion ? totalStats.conversion : camp.conversion}}</td>
                                            <td>{{camp.sd | date:'medium'}}</td> <!-- Start Date -->
                                            <td>{{camp.ed | date:'medium'}}</td> <!-- End Date -->
                                            <td>{{camp.c_maker}}</td>
                                            <td>{{camp.c_checker}}</td>
                                            <td ng-if=" controlGroup != '' ">{{controlGroup}}</td>
                                            <td> </td>
                                            <td> </td>

                                        </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>


                    </div>

                    <div class="col-md-12" ng-if="isPlatformData" id="spilitData" style="display: none;">
                        <div class="panel panel-default">
                            <div class="">
                                <table class="table table-striped panel-body">
                                    <thead>
                                        <tr>
                                            <th scope="col">Platform</th>
                                            <th scope="col">Reachable Audience</th>
                                            <th scope="col">Sent</th>
                                            <th class="receivedTo" scope="col">Received</th>
                                            <th class="impressionRate" scope="col">Impression Rate</th>
                                            <th class="clickedTo" scope="col">Clicked</th>
                                            <th class="ctr" scope="col">CTR</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="platform in platformWiseData">
                                            <td>{{platform.platformName}}</td> <!-- platform name  -->
                                            <td>{{platform.reach}}</td> <!-- Reachable Audience -->
                                            <td>{{platform.pushedTo}}</td>

                                            <td class="receivedTo" >{{platform.receivedTo}}</td> 
                                            <td class="impressionRate">{{platform.impressionRate}}</td>
                                            <td class="clickedTo">{{platform.clickedTo}}</td>
                                            <td class="ctr" >{{platform.ctr }}</td>
                                        
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- starts Appinbox Reports  only if  IsappInboxReports is enabled and not of webpush -->
                    <div class="col-md-12" ng-repeat="camp in campaignStatusData"  ng-if="camp.type !== 'IN-APP'" >
                        <h4 style="font-size: 20px;">Appinbox Details </h4>
                        <div class="panel panel-default">
                            <div class="">
                                <table class="table table-striped panel-body">
                                    <thead>
                                        <tr>
                                            <th scope="col">Name</th>
                                            <th scope="col">Reachable Audience</th>
                                            <th scope="col">Sent</th>
                                            <th scope="col">Clicked</th>
                                            <th ng-if="appinbox_et" scope="col">Inbox Read</th>
                                            <th ng-if="appinbox_et" scope="col">Appinbox Expiry</th>
                                            <!-- <th scope="col">Inbox Clicked</th> -->
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="camp in campaignStatusData">
                                            <td>{{camp.type}}</td>
                                            <td>{{camp.reach}}</td> <!-- Reachable Audience -->
                                            <td>{{camp.pushedTo}}</td> <!-- Sent -->
                                            <td>{{camp.clickedTo ?  camp.clickedTo : 0}}</td>
                                            <td ng-if="appinbox_et" >{{camp.inbox_read ? camp.inbox_read : 0 }}</td>
                                            <td ng-if="appinbox_et" >{{camp.appinbox_et | date:'medium'}}</td>                                        
                                            <!-- Received App Inbox -->
                                            <!-- <td>{{camp.Inbox_clicked ? camp.Inbox_clicked : 0 }}</td> Clicked App InBox -->
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- END Appinbox Reports -->

                    <!-- Modal HTML for camp details page-->
                    <div class="col-md-12">
                        <div id="reqIdModal" class="modal">
                            <div class="modal-content">
                              <span id="closemModal" class="close">&times;</span>
                              <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Request ID</th>
                                        <th>Timestamp</th>
                                        <th>Campaign ID</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="data in modalData">
                                        <td>{{ data.requestId }}</td>
                                        <td>{{ data.Timestamp }}</td>
                                        <td>{{ data.CampaignID }}</td>
                                    </tr>
                                </tbody>
                            </table>
                            </div>
                          </div>

                          <div id="loadingModal" class="modal" ng-show="loading">
                            <div class="modal-content">
                                <p>Loading...</p>
                            </div>
                        </div>

                        <div id="errorModal" class="modal" style="display: none;">
                            <div class="modal-content">
                                <span id="closemModalError" class="close" style="color: red;">&times;</span>
                              <p>Error loading data. Please try again.</p>
                            </div>
                          </div>
                          

                    <div class="col-md-12" ng-if="campaignVariantData.length>0" id="isVisible" style="display: none;">
                        <div class="panel panel-default">
                            <div class="">
                                <table class="table table-striped panel-body">
                                    <thead>
                                        <tr>
                                            <th scope="col">Name</th>
                                            <th scope="col">Reachable Audience</th>
                                            <th scope="col">Pushed To/Recieve</th>
                                            <th scope="col">Clicked</th>
                                            <th scope="col">CTR</th>
                                            <th scope="col">Conversion</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="variant in campaignVariantData">
                                            <td>{{variant.name}}</td>
                                            <td>{{variant.p}}%</td>
                                            <td>{{variant.pushedTo}}</td>
                                            <td>{{variant.clickedTo}}</td>
                                            <td>{{variant.ctr}}</td>
                                            <td>{{variant.conversion}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <figure class="highcharts-figure">
                                    <div id="container"></div>
                                    <p class="highcharts-description">
                                    </p>
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4" style="margin-top: 60px;">

                <!-- --------- web push preview ------->
                <div id="campWebPreview" style="display: none; margin-top: 110px;">
                    <div class="row">
                        <div class="col-lg-12" style="margin-bottom: 15px; padding: 0px;">
                            <div class="collapse navbar-collapse tabbable-line">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li style="width: 90px;" role="presentation" class="relative downSlide"
                                        ng-repeat="variableName in savevariantdata track by $index">
                                        <a href="javascript:void(0)" ng-click="showVariantPushData($index, 'webpush')"
                                            aria-controls="child1" role="tab" data-toggle="tab" aria-expanded="true">
                                            {{ variableName.variance_top_name }}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row box-content-preview" style="width: 85%;">
                        <div class="col-sm-3">
                            <div class="" style="width: 80px; float: left; height: 90px;">
                                <div>
                                    <img src="{{web_push_obj.icon}}" alt="" height="60px" width="60px"
                                        style="cursor:pointer;" />
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-9">
                            <div class="row">
                                <div class="mb-5"><b>{{web_push_obj.title}}</b></div>
                                <div class="mb-5" style="word-wrap: break-word;min-height: 40px;">
                                    {{web_push_obj.message}}</div>
                                <a style="word-wrap: break-word;min-height: 40px;" href="{{web_push_obj.url}}"
                                    target="_blank">{{web_push_obj.url}}</a>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="width: 85%;">
                        <div class="col-sm-12">
                            <div id="WebIsExpanded" class="dataView2" style="display: none;margin-top: 5px;">
                                <div class="row box-content-preview" style="height: 200px;">
                                    <div style="margin: auto; text-align:center; margin-top:10px">
                                        <img src="{{expandedNotificationImageFile}}" alt=""
                                            ng-if="expandedNotificationImageFile" id="expandedNotificationImageFile"
                                            height="145" width="240" style="margin-top:-5px;cursor:pointer;"
                                            ng-click="openFileWindow('expandedNotify')" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                   <!----Push Andoid Preview----->
                   <div class="col-sm-4 ui-sortable" id="campAndroidPreview" style="display: none; margin-top: 70px;">
                    <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 style="width: 250px; height: 55px; background-color: violet;"> -->
                                            <div ng-if="templateDetails.template[0].notificationImage || templateDetails.template.notificationImage" class="" ng-show="isBasicStaticImg">

                                                <img alt="" ng-click="openFileWindow('file')"
                                                style="cursor:pointer; margin-left: 5px;"
                                                src="{{ templateDetails.template && templateDetails.template.length > 0 
                                                        ? templateDetails.template[0].notificationImage 
                                                        : (templateDetails.template.notificationImage.includes(templateDetails.blobContainerCDN) 
                                                            ? templateDetails.template.notificationImage 
                                                            : templateDetails.blobContainerCDN + templateDetails.template.notificationImage) }}"
                                                width="60" height="60">

                                                <!-- <i class="fa fa-pencil" style="margin-right: -12px;font-size: 10px;float: right; cursor:pointer; z-index: 999;" ></i> -->
                                            </div>
                                            <div style="float: left; width: 250px;">
                                                <input type="text"
                                                    class="form-control readonly-input"
                                                    style="width: 240px; font-size: 11px; border: none; background-color: transparent; resize: none; color: white;"
                                                    value="{{templateDetails.template.notificationHeader}}"
                                                    readonly>
                                            
                                                <textarea
                                                    class="form-control readonly-input"
                                                    style="min-height: 100px; top: 100px; width: 250px; border: none; font-size: 11px; font-weight: 200; background-color: transparent; resize: none; color: white;"
                                                    value="{{templateDetails.template.notificationDescription}}"
                                                    readonly></textarea>
                                            
                                                    <div id="exptextdiv" style="height: 100px; top: 168px; width: 230px; border: none; position: absolute; left: 5px;">
                                                        <textarea style="border: none; height: 120% ; background-color: transparent; resize: none; overflow: hidden; color: white;"
                                                            class="form-control readonly-input"
                                                            value="{{templateDetails.template.expandedNotificationDescription}}"
                                                            readonly></textarea>
                                                </div>
                                            </div>
                                            
                                            
                                            
                                        <!-- </div> -->
                                    </div>
                                    <div id="isExpanded" class="dataView2 uploader"
                                        style="display: none;width: 240px; height: 145px; margin-top: 40px; border: 1px solid #2d353c;">
                                        <img ng-if="!customAudCamp" src="../images/dashboard/ajax-loader.gif"
                                            class="loaderImg ng-hide" ng-hide="exploderImg" style="cursor:pointer;">
                                        <h4 class="customAudCamp" ng-if="customAudCamp"> This campaign generates content
                                            dynamically, so a preview is not available! </h4>
                                        <div style="" id="expImguploader" ng-hide="expImguploader">
                                            <img src="../images/dashboard/1462811934_file_add.png" id="expImguploader"
                                                alt="" ng-click="openFileWindow('expandedNotify')"
                                                style="cursor:pointer; position: absolute; right: 50%; bottom: 50%"
                                                title="Upload Expanded Image">
                                        </div>
                                        <div ng-show="isExpendedImg" class="">

                                            <!-- ngIf: expandedNotificationImageFile -->
                                            <img src="{{ templateDetails.template && templateDetails.template.length > 0 
                                                ? templateDetails.template[0].expandedNotificationImage 
                                                : (templateDetails.template.expandedNotificationImage.includes(templateDetails.blobContainerCDN) 
                                                    ? templateDetails.template.expandedNotificationImage 
                                                    : templateDetails.blobContainerCDN + templateDetails.template.expandedNotificationImage) }}"
                                        style="border: none;margin-top:-5px;cursor:pointer;"
                                        ng-click="openFileWindow('expandedNotify')" class="ng-scope" width="240" height="145">

                                            <!-- <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 style="height: 41px;top: 168px; width: 240px; border: none;position: absolute;left: 0px;"
                                                ng-show="isExpandedDesc">
                                                <textarea style="border: none;"
                                                    ng-model="cTools.expandedNotificationDescription"
                                                    id="expandedNotificationDescription"
                                                    placeholder="Push expanded description"
                                                    class="form-control push_message_desc ng-pristine ng-untouched ng-valid ng-valid-maxlength"
                                                    ng-trim="false" maxlength="250"
                                                    ng-keyup="remainCharacter('expandedNotificationDescription', 250, 'androidPush')"
                                                    ng-blur="remainCharacterHide()"
                                                    value="{{templateDetails.template.expandedNotificationDescription}}">                                        </textarea>

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

                                    </div>

                                    <div class="clearfix"></div>
                                    <div class="form-group">
                                        <div class="col-md-12" ng-show="isPushAction">
                                            <!-- ngRepeat: action in actionsList track by $index -->

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

                            </div>
                        </div>
                        <!-- ngIf: leftCharacter -->
                    </div>
                </div>

                <!--- In app Android Preview -->
                <div class="col-sm-4 ui-sortable" id="inAppAndroidPreview" style="display: none;  margin-top: 70px;">
                    <div id="showPreview">
                        <div class="phonePreview openExpandedView" style="top: 20px; display: block;" id="previewDiv">
                            <div id="pushNotificationView" class="dataView">

                                <!-- ngIf: inAppFull -->
                                <div class="dataView1 ng-scope" ng-if="inAppFull">
                                    <div class="pushBasic"
                                        style="width: 86%; margin-left: 7%; margin-right: 7%; text-align: center; height: 350px; margin-top: 13px;  margin-bottom: 13px; border: 1px solid #555;">

                                        <div style="height: 360px; text-align:center;">
                                            <img src="{{ templateDetails.blobContainerCDN }}{{templateDetails.template.notificationImage}}"
                                                ng-hide="isBasicStaticImgFull" alt=""
                                                ng-click="openFileWindow('inAppImageFile3')"
                                                style="position: absolute;left: 0px; margin-left: 0px; width: 100%; height: 100%; cursor:pointer;"
                                                class="ng-hide">
                                            <div style="position:relative; top:-2px; left: 47%;">
                                                <i class="ion-close-round fa-1x text-inverse"
                                                    style="color:#ffffff!important"></i>
                                            </div>
                                            <div class="in-app-device-img">
                                                <img ng-if="!customAudCamp" src="../images/dashboard/ajax-loader.gif"
                                                    ng-hide="loderImgfull" class="ng-hide">
                                                <h4 class="customAudCamp" ng-if="customAudCamp"> This campaign generates
                                                    content dynamically, so a preview is not available! </h4>

                                                <img src="../images/dashboard/1462811934_file_add.png"
                                                    ng-show="fullScreenImgIconfull" alt=""
                                                    ng-click="openFileWindow('inAppImageFile3')"
                                                    style="cursor:pointer;">

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

                                    <div style="position:absolute;bottom:0px;width: 100%;">
                                        <div class="clearfix"></div>
                                        <div class="form-group" ng-hide="isBasic">
                                            <div class="col-md-12" style="position: relative;top: 25px;">

                                                <!-- <input type="text" class="form-control push_message iosPush_message" name="inAppHeader" ng-model="inApp.inAppHeader" placeholder="In App Header" id="inAppHeader" style="width:238px!important; position: relative;top: 30px;left: 3px;" ng-trim="false" maxlength="65" ng-keyup="remainCharacter('inAppHeader', 65, 'full')" ng-blur="remainCharacterHide()"> -->

                                                <!-- <i class="fa fa-pencil inputEditIcon" aria-hidden="true" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppHeader')" style="top: -5px;!important"></i> -->

                                                <!-- <textarea ng-model="inApp.inAppDescription" id="inAppDescription" placeholder="In App Description" class="form-control push_message_desc iosTextarea" style="width:236px!important;   padding-left: 26px;" ng-trim="false" maxlength="120" ng-keyup="remainCharacter('inAppDescription', 120, 'full')" ng-blur="remainCharacterHide()">
                                                    </textarea> -->
                                                <!-- <span>You have {{ 350 - cTools.notificationDescription.length}} characters left  </span> -->
                                                <!-- <i class="fa fa-pencil inputTextareaIcon" aria-hidden="true" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppDescription')"></i> -->

                                            </div>

                                        </div>
                                        <div class="form-group" ng-show="hideCta">
                                            <div class="col-md-12" style="text-align:center;" ng-show="setAction">
                                                <span
                                                    class="spanButton ng-binding">{{templateDetails.template.actionTitle}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div><!-- end ngIf: inAppFull -->

                                <!-- ngIf: inAppMini -->
                                <div ng-if="inAppMini" class="dataView2 ng-scope">
                                    <div style="position: absolute;top:80px; width: 226px;">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <div
                                                    style="float: left; margin-top: 15px; width: 40px;margin-left: -9px;">
                                                    <img ng-if="!customAudCamp"
                                                        src="../images/dashboard/ajax-loader.gif" ng-hide="loderImgmini"
                                                        class="ng-hide">
                                                    <h4 class="customAudCamp" ng-if="customAudCamp"> This campaign
                                                        generates content dynamically, so a preview is not available!
                                                    </h4>

                                                    <img src="../images/dashboard/1462811934_file_add.png"
                                                        ng-show="miniScreenImgIconmini" alt=""
                                                        ng-click="openFileWindow('inAppImageFile4')"
                                                        style="cursor:pointer; border: 1px solid #555; padding: 8px;">

                                                    <img ng-src="{{ templateDetails.blobContainerCDN }}{{templateDetails.template.iconImage}}"
                                                        ng-hide="inAppBasicS3Img" alt=""
                                                        ng-click="openFileWindow('inAppImageFile4')"
                                                        style="cursor:pointer;" class="ng-hide" height="190"
                                                        width="240">

                                                </div>
                                                <div style="width: 171px;float: right; margin-top:15px">

                                                    <!-- <textarea id="inAppMiniDesc" ng-model="inApp.inAppMiniDesc" placeholder="In App Description" class="form-control push_message_desc iosTextarea ng-pristine ng-untouched ng-valid ng-valid-maxlength" style="margin-left:-1px !important; width:200px;" ng-trim="false" maxlength="120" ng-keyup="remainCharacter('inAppMiniDesc', 120, 'mini')" ng-blur="remainCharacterHide()" value="{{templateDetails.template.notificationDescription}}"></textarea>     -->

                                                    <!-- <i class="fa fa-pencil inputTextareaIcon" aria-hidden="true" style="left:107%!important" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppMiniDesc')" >
                                                </i> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- ngIf: header -->

                                <div ng-if="header" class="dataView2 ng-scope" style="margin-left: 3%;">
                                    <div style="position: absolute;top:-18px; width: 226px;">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <div
                                                    style="float: left; margin-top: 20px; width: 40px;margin-left: -15px;">
                                                    <img ng-if="!customAudCamp"
                                                        src="../images/dashboard/ajax-loader.gif"
                                                        ng-hide="loderImgheader" class="ng-hide">
                                                    <h4 class="customAudCamp" ng-if="customAudCamp"> This campaign
                                                        generates content dynamically, so a preview is not available!
                                                    </h4>

                                                    <img src="../images/dashboard/1462811934_file_add.png"
                                                        ng-show="headerScreenImgIconheader" alt=""
                                                        ng-click="openFileWindow('inAppImageFile4')"
                                                        style="cursor:pointer; border: 1px solid #555; padding: 8px;">

                                                    <img ng-hide="inAppBasicS3ImgHeader"
                                                        ng-src="{{iconInAppImageFileHeader}}" alt=""
                                                        ng-click="openFileWindow('inAppImageFile4')"
                                                        style="cursor:pointer;" class="ng-hide" width="48" height="48">

                                                </div>
                                                <div style="width: 171px;float: right; margin-top:20px">

                                                    <textarea id="inAppHeaderDesc" ng-model="inApp.inAppHeaderDesc"
                                                        placeholder="In App Description"
                                                        class="form-control push_message_desc iosTextarea ng-pristine ng-untouched ng-valid ng-valid-maxlength"
                                                        style="margin-left:-1px !important; width:200px;"
                                                        ng-trim="false" maxlength="120"
                                                        ng-keyup="remainCharacter('inAppHeaderDesc', 120, 'header')"
                                                        ng-blur="remainCharacterHide()"
                                                        value="{{templateDetails.template.notificationDescription}}">									</textarea>

                                                    <!-- <i class="fa fa-pencil inputTextareaIcon" aria-hidden="true" style="left:107%!important" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppMiniDesc')">
                                                </i> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- ngIf: footer -->

                                <div ng-if="footer" class="dataView2 ng-scope" style="margin-left: 3%;">
                                    <div style="position: absolute;bottom: -40px; width: 226px;">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <div
                                                    style="float: left; margin-top: 20px; width: 40px;margin-left: -15px;">
                                                    <img ng-if="!customAudCamp"
                                                        src="../images/dashboard/ajax-loader.gif"
                                                        ng-hide="loderImgfooter" class="ng-hide">
                                                    <h4 class="customAudCamp" ng-if="customAudCamp"> This campaign
                                                        generates content dynamically, so a preview is not available!
                                                    </h4>
                                                    <img src="../images/dashboard/1462811934_file_add.png"
                                                        ng-show="footerScreenImgIcon" alt=""
                                                        ng-click="openFileWindow('inAppImageFile4')"
                                                        style="cursor:pointer; border: 1px solid #555; padding: 8px;">

                                                    <img ng-hide="inAppBasicS3ImgFooter"
                                                        ng-src="{{iconInAppImageFileHeader}}" alt=""
                                                        ng-click="openFileWindow('inAppImageFile4')"
                                                        style="cursor:pointer;" class="ng-hide" width="48" height="48">

                                                </div>
                                                <div style="width: 171px;float: right; margin-top:20px">

                                                    <textarea id="inAppFooterDesc" ng-model="inApp.inAppFooterDesc"
                                                        placeholder="In App Description"
                                                        class="form-control push_message_desc iosTextarea ng-pristine ng-untouched ng-valid ng-valid-maxlength"
                                                        style="margin-left:-1px !important; width:200px;"
                                                        ng-trim="false" maxlength="120"
                                                        ng-keyup="remainCharacter('inAppFooterDesc', 120, 'footer')"
                                                        ng-blur="remainCharacterHide()"
                                                        value="{{templateDetails.template.notificationDescription}}">
                                                </textarea>

                                                    <!-- <i class="fa fa-pencil inputTextareaIcon " aria-hidden="true" style="left:107%!important" href="#customfields-dialog" data-toggle="modal" ng-click="refreshCustomFields('inAppMiniDesc')"> -->
                                                    </i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- ngIf: leftCharacter -->
                            </div>
                        </div>
                    </div>
                </div>

                <!---InApp Rating Preview --->

                <div class="phonePreview openExpandedView" style="top: 20px; display: none; margin-top: 70px;"
                    id="inAppAndroidRating">
                    <div class="dataView">
                        <div ng-show="!isShowMsg"
                            style="  position: absolute; top: 90px;margin-bottom:70px; width:99%;height: 200px; border: 1px solid rgb(45, 53, 60);">
                            <div style="position:relative; top:-2px; left: 95%;">
                                <i class="ion-close-round fa-1x text-inverse" style="color:#ffffff!important"></i>
                            </div>
                            <div style="margin-bottom:20px; maring-top:20px;">
                                <input type="text"
                                    class="form-control iosPush_message push_message ng-pristine ng-untouched ng-valid ng-valid-maxlength"
                                    ng-model="appRating.question" id="ratingQuestion"
                                    placeholder="Enter rating question" maxlength="35"
                                    style="padding:0px!important; margin-right:0px!important;" ng-trim="false"
                                    ng-keyup="remainCharacter('ratingQuestion', 35, 'ratingSubmit')"
                                    ng-blur="remainCharacterHide()">

                                <i class="fa fa-pencil inputEditIcon" aria-hidden="true" href="#customfields-dialog"
                                    data-toggle="modal" ng-click="refreshCustomFields('inAppHeader')"
                                    style="left:94%; top:0px!important;"></i>
                                <div class="clearfix down-space"></div>
                            </div>
                            <table style="padding:10px;" align="center">
                                <tbody>
                                    <tr>
                                        <!-- ngRepeat: ratingImg in showRatingImg -->
                                        <td style="cursor:pointer" ng-repeat="ratingImg in showRatingImg"
                                            class="ng-scope">
                                            <img src="{{ratingImg.img}}" width="24" height="24">
                                        </td>
                                    </tr>

                                    <tr>
                                        <td colspan="5" style="height:100px;text-align:center;">
                                            <input type="text"
                                                class="form-control push_message question ng-valid ng-valid-maxlength ng-dirty ng-valid-parse ng-touched"
                                                style="margin:0 10%; text-align:center; font-size:13px; width:75%; float:left; border:1px solid rgb(45, 53, 60)!important;"
                                                ng-model="appRating.action" ng-trim="false" id="ratingSubmit"
                                                maxlength="10"
                                                ng-keyup="remainCharacter('ratingSubmit', 10, 'ratingSubmit')"
                                                ng-blur="remainCharacterHide()">
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                            <p></p>

                        </div>

                        <div ng-show="isShowMsg"
                            style="position: absolute; top: 110px;margin-bottom: 70px; width: 100%;height: 200px; border: 1px solid #555;"
                            class="ng-hide">
                            <div style="position:relative; top:-2px; left: 95%;">
                                <i class="ion-close-round fa-1x text-inverse" style="color:#ffffff!important"></i>
                            </div>
                            <div style="margin-bottom:20px; maring-top:20px;">
                                <p style="padding-left:10px; padding-rigth:10px;" class="ng-binding">Thanks</p>
                                <div class="clearfix down-space"></div>
                                <span class="spanButton" data-bind="text:actionTitle"
                                    style="margin-left:35%; cursor:pointer;" ng-click="thankYouMsg(false)">Back</span>
                            </div>

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

                        <!-- ngIf: leftCharacter -->
                    </div>
                </div>

                <!-- web pop  -->
                <div class="col-sm-6 ui-sortable" id="web_popup_preview" style="margin-top: 21%;">
                    <!-- <div class="row">
                            <div class="col-sm-12" style="text-align:center ; right: 5%;">
                                <h3>Preview</h3>
                            </div>
                        </div> -->
                    <!-- box ===-->
                    <div id="box" ng-if="templateDetails.template.mode == 'Box'" class="row box-content-preview box"
                        style="width: 400px; height: 350px; margin-left: 10%; margin-top: 15%;">
                        <div class="col-sm-3">
                            <div id="in" class="inner" style="width: 260px; height: 175px;">
                                <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" ng-if="templateDetails.template.mode == 'Banner'"
                        class="row box-content-preview box" style="margin-top:15%; margin-left: 10%; width: 480px;">
                        <div class="col-sm-3">
                            <div class="" style="width: 80px; float: left; height: 90px;">
                                <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 pop end  -->

                <!---InApp Survey---->

                <div class="phonePreview openExpandedView" id="AndroidInappSurvey"
                    style="display: none;  margin-top: 70px;">
                    <div id="pushNotificationView" class="dataView">
                        <div class="dataView1" style="margin-top: 10px;">

                            <div class="pushBasic"
                                style="width: 100%; font-size: 14px; font-weight: bold; color:#ffffff">
                                <div class="col-md-12" style="text-align: center;" ng-if="!(isBack || isNext)">
                                    {{surveyCounter+1}} of {{surveyCounter+1}}
                                </div>
                                <div class="col-md-3" ng-show="isBack" ng-click="back()">
                                    <a href="javascript:;" class="text-inverse">
                                        <i class="fa fa-arrow-left" style="font-size: 17px; color:#ffffff"></i>
                                    </a>
                                </div>
                                <div ng-class="isBack? 'col-md-6':'col-md-8'"
                                    ng-style="{'text-align': isBack? 'center':'right', 'padding-right': isBack? 'none' : '22px'}"
                                    ng-if="(isBack || isNext)">{{surveyCounter+1}} of {{surveyCounter+1}}</div>
                                <div class="col-md-3" ng-show="isNext" ng-click="next()" style="text-align:right;">
                                    <a href="javascript:;" class="text-inverse">
                                        <i class="fa fa-arrow-right" style="font-size: 17px;color:#ffffff"></i>
                                    </a>
                                </div>
                            </div>

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

                            <div class="col-md-12" ng-show="surveyQuestions[surveyCounter].showQues"
                                style="padding-left: 1px;">
                                <input type="text" class="form-control push_message question" name="question"
                                    ng-model="surveyQuestions[surveyCounter].question"
                                    style="border: none; padding-left: 3px; font-size:14px;"
                                    placeholder="Enter question" maxlength="50" ng-trim="false" id="surveyQues"
                                    ng-keyup="remainCharacter('surveyQues', 50, 'servey')"
                                    ng-blur="remainCharacterHide()" onfocus="this.placeholder = ''"
                                    onblur="this.placeholder = 'Enter question'" autofocus="">
                            </div>

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

                            <div ng-show="surveyQuestions[surveyCounter].ischoice && surveyQuestions[surveyCounter].question != ''"
                                style="height: 285px;overflow: auto;">
                                <div class="form-group" ng-show="surveyQuestions[surveyCounter].ischoice"
                                    ng-repeat="option in surveyQuestions[surveyCounter].options track by $index"
                                    style="margin-bottom:10px; color:#ffffff">
                                    <div class="col-md-10">
                                        <input type="text" class="form-control push_message" name="notificationHeader"
                                            ng-model="surveyQuestions[surveyCounter].options[$index]"
                                            style="width:176px!important; height:25px!important; margin-bottom:10px;border: 1px solid rgb(45, 53, 60)!important;">
                                    </div>
                                    <div class="col-md-2" ng-click="removeOption($index)" style="cursor:pointer;">
                                        <i class="fa fa-1x fa-minus-circle"></i>
                                    </div>
                                </div>
                                <div class="clearfix down-space"></div>
                                <div class="form-group" style="cursor:pointer; color:#ffffff">
                                    <div ng-click="addOption()"
                                        ng-style="{'margin-left': '32px', 'text-align': (surveyQuestions[surveyCounter].options.length > 0)? 'right':'left', 'padding-right': (surveyQuestions[surveyCounter].options.length > 0)? '16px':'none'}">
                                        <span style="padding-right:5px; ">Add choice</span>
                                        <i class="fa fa-1x fa-plus-circle"></i>
                                    </div>
                                </div>

                                <div class="form-group" ng-if="surveyQuestions[surveyCounter].otherOption">
                                    <div
                                        style="border: 1px solid rgb(45, 53, 60)!important; height:25px;  width: 73%;margin-left: 26px; padding: 3px; border-radius: 3px;">
                                        <span>Other Option</span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group" ng-show="surveyQuestions[surveyCounter].isTextField">
                                <div class="col-md-12" style="padding-left:1px; padding-right:3px;
">
                                    <div
                                        style="border-top-right-radius: 10px; border-top-left-radius: 10px; height: 100px; border: 1px solid rgb(45, 53, 60); color:#ffffff; margin-top: 10px; padding: 10px;">
                                        Your answer goes here..
                                    </div>

                                </div>
                                <div style="position: absolute; bottom: -24px;">
                                    <img src="/appimages/Android-keyboard.png" style="width:99%;">
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        
        <!-- <div class="row">
                <div class="col-md-6" >
                    <div class="panel panel-default" style="height: 200px; background:skyblue;">
                        <div class="panel-body">
                        <div class="chunk-items" style="display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        margin-top: 5%;">
                            <h3 style="color: #fff; font-size: 25px; font-weight: bolder;">Click-Thru Rate</h3>
                            <h3 style="color: #fff;font-size: 25px; font-weight: bolder;" >{{campaignStatusData[0].ctr}}</h3>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6" >
                    <div class="panel panel-default" style="height: 200px; background:lightgreen;">
                        <div class="panel-body">
                            <div class="chunk-items" style="display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            margin-top: 5%;">
                            <h3 style="color: #fff; font-size: 25px; font-weight: bolder;">Conversion</h3>
                            <h3 style="color: #fff; font-size: 25px; font-weight: bolder;" >{{campaignStatusData[0].conversion}}</h3>
                            </div>
                        </div>
                    </div></div>
             </div> -->
    </div>
</div>