<div class="row>
    <form class="form-horizontal">
        <div class="form-group" style="float:left;padding-left:24px;margin-bottom:0px;">
            <!-- begin page-header -->
            <h3 class="page-header">
                Campaign Details for << Activate dormant users after install >>
            </h3> 
            <!-- end page-header -->
        </div> 
    </form>
</div>
<div class="row">
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-12 ui-sortable">
                <div class="panel panel-info">
                    <div class="panel-body">
                        <table class="table table-striped table-bordered" id="tblCampaigns" style="margin-bottom: 0px!important;">
                            <thead >
                                <th>Date</th>
                                <th>Reachable</th>
                                <th>Received</th>
                                <th>Viewed</th>
                                <th>Clicked</th>
                                <th>Ignored</th>
                            </thead>
                            <tbody >
                                <tr>
                                    <td>{{campaignInfo.timestamp}}</td>
                                    <td>{{ (campaignInfo.reachTo < received)? received : campaignInfo.reachTo }}</td>
                                    <td>{{received}}</td>
                                    <td>{{viewed}}</td>
                                    <td>{{clicked}}</td>
                                    <td>{{ignored}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 ui-sortable">
                <div class="panel panel-info">
                    <div class="panel-body" style="height: 415px; min-height:415px">
                        <div id="campaignGraph" height="400" width="200"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="phonePreview openExpandedView" style="top: 20px; display: block;" id="previewDiv">
            <!-- show push notifiction layout -->
            <div class="dataView" ng-if="ctype == 'PUSH'">
                <div class="dataView1">
                    <div class="form-group">
                        <div>
                            <div style="width: 250px; height: 55px">
                                <div class="" style="width: 60px; float: left; height: 90px;">
                                    <div style="height: 60px; width: 60px; border: 1px solid #2d353c; margin-left:5px;" ng-if="campaignInfo.template && campaignInfo.template.notificationImage == ''"></div>

                                    <div style="height: 60px; width: 60px; border: 1px solid #2d353c; margin-left:5px;" ng-if="!campaignInfo.template"></div>

                                    <img ng-if="campaignInfo.template && campaignInfo.template.notificationImage" ng-src="{{campaignInfo.template.notificationImage}}" style="margin-left: 10px;margin-top: 12px;cursor:pointer;"  />
                                </div>
                                <div style="float: left; width: 154px;">
                                    <div style="font-size:11px; border:none; margin-left:15px;color:#ffffff;">
                                        {{campaignInfo.name}}
                                    </div>

                                    <div class="push_message_desc" style="height: 55px;top: 100px; width: 180px; border: none;font-size: 11px;font-weight: 200;margin-left:15px;">
                                        {{campaignInfo.desc}}
                                    </div>
                                </div>   
                            </div>
                        </div>
                    </div>
                </div>
                <div ng-if="campaignInfo.template">
                    <div class="dataView2" style="width: 242px; height: 145px; margin-top: 40px; border: 1px solid #2d353c;" ng-if="campaignInfo.template.expandedNotificationImage">
                        <div>
                            <img ng-src="{{campaignInfo.template.expandedNotificationImage}}" height="145" width="240"  style="border: none;margin-top:-5px;cursor:pointer;" ng-if="campaignInfo.template.expandedNotificationImage != ''" />
                            <div style="height: 41px;top: 168px; width: 240px; border: none;position: absolute;left:5px;" ng-if="campaignInfo.template.expandedNotificationDescription != ''">
                                {{campaignInfo.template.expandedNotificationDescription}}
                            </div>
                            <div class="clearfix"></div>  
                        </div>
                    </div>
                </div>
                <div ng-if="campaignInfo.template && campaignInfo.template.actions">
                    <div class="form-group" ng-if="campaignInfo.template.actions">
                    <div class="col-md-12">
                    <span ng-repeat="action in campaignInfo.template.actions track by $index">
                            <a class="spanButton" style="cursor:pointer; display:inline-block; margin-bottom:10px; text-decoration: none;">{{action.nh}}</a>
                        </span> 
                    </div>
                    </div>
                </div>
            </div>
            <!-- end push notification layout here-->
            <!-- start in app campaign layout-->
            <div class="dataView" ng-if="ctype == 'IN-APP'">
                <div class="dataView1" ng-if="campaignInfo.template.view_mode == 'Fullscreen'">
                    <div class="pushBasic" style="width: 100%; text-align: center; margin: 1px;">
                        <div style="height: 370px; text-align: center; border: 1px solid #555;">
                            <div class="in-app-device-img" style="height: 360px; text-align:center;">
                                <img ng-src="{{campaignInfo.template.notificationImage}}" style="position: absolute;left: -84px; top: -50px; margin-left: 0px; height:95%; width: 243px; cursor:pointer;" ng-if="campaignInfo.template.notificationImage" />
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <div ng-style="{ bottom: campaignInfo.template.showAction ? '0px' : '50px', 'position':'absolute' }">
                        <div>
                            <div class="col-md-12" style="width: 238px!important; position: relative; top:0px; color:#ffffff;">
                                {{campaignInfo.template.notificationHeader}}
                            </div>
                            <div class="clearfix"></div>
                            <div class="col-md-12" ng-style="{ height: campaignInfo.template.showAction ? '40px' : '20px', 'color':'#ffffff' }">
                                {{campaignInfo.template.notificationDescription}}
                            </div>
                        </div>                          
                        <div class="clearFloat"></div>    
                        <div class="form-group" ng-if="campaignInfo.template.showAction">
                            <div class="col-md-12" style="margin-top: 10px; text-align: center;">
                                <span class="spanButton">{{campaignInfo.template.actionTitle}}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div ng-if="campaignInfo.template.view_mode == 'Footer'" class="dataView2">
                    <div style="position: absolute;bottom: -20px; width: 226px;">
                        <div style="float: left; width: 50px; border: 1px solid #ffffff; height:50px;" ng-if="!campaignInfo.template.iconImage">
                        </div>
                        <div style="float: left;" ng-if="campaignInfo.template.iconImage">
                            <img ng-src="{{campaignInfo.template.iconImage}}" style="cursor:pointer;width:48px;" ng-if="campaignInfo.template.iconImage" />
                        </div>

                        <div style="width: 171px;float: right;">                         
                            <div class="push_message_desc iosTextarea" style="margin-left:-1px !important; width:196px;">
                                {{campaignInfo.template.notificationDescription}}
                            </div>    
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div ng-if="campaignInfo.template.view_mode == 'Header'" class="dataView2">
                    <div style="position: absolute; width: 226px; left:0px;">
                        <div style="float: left; width: 50px; border: 1px solid #ffffff; height:50px;" ng-if="!campaignInfo.template.iconImage">
                        </div>
                        <div style="float: left;" ng-if="campaignInfo.template.iconImage">
                            <img ng-src="{{campaignInfo.template.iconImage}}" style="cursor:pointer;width:48px;" ng-if="campaignInfo.template.iconImage" />
                        </div>

                        <div style="width: 171px;float: right;">                         
                            <div class="push_message_desc iosTextarea" style="margin-left:-1px !important; width:196px;">
                                {{campaignInfo.template.notificationDescription}}
                            </div>    
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div ng-if="campaignInfo.template.view_mode == 'Mini'" class="dataView2">
                    <div style="position: absolute; width: 226px; top:150px;">
                        <div style="float: left; width: 50px; border: 1px solid #ffffff; height:50px;" ng-if="!campaignInfo.template.iconImage">
                        </div>
                        <div style="float: left;" ng-if="campaignInfo.template.iconImage">
                            <img ng-src="{{campaignInfo.template.iconImage}}" style="cursor:pointer;width:48px;" ng-if="campaignInfo.template.iconImage" />
                        </div>

                        <div style="width: 171px;float: right;">                         
                            <div class="push_message_desc iosTextarea" style="margin-left:-1px !important; width:196px;">
                                {{campaignInfo.template.notificationDescription}}
                            </div>    
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <!-- end in app notification layout-->
            <!-- start rating campaign layout-->
            <div class="dataView" ng-if="ctype == 'RATING'">
                <div style="  position: absolute; top: 90px;margin-bottom:70px; width:99%;height: 200px; border: 1px solid rgb(45, 53, 60);">
                    <div style="margin-bottom:20px; margin-top:20px;">
                        <div class="iosPush_message push_message" style="padding:0px!important; margin-right:0px!important;">
                            {{campaignInfo.template.question}}
                        </div>
                        <div class="clearfix down-space"></div>
                    </div>
                    <table align="center" style="width: 70%;">
                        <tbody>
                            <tr>
                                <td style="cursor:pointer" ng-repeat="ratingImg in showRatingImg">
                                    <img ng-src="{{ratingImg.img}}" height="24" width="24">
                                </td>                                       
                            </tr>
                            
                            <tr>
                                <td colspan="5" style="height:100px;text-align:center;">
                                    <div class="push_message question" style="margin:0 10%;     line-height: 2; text-align:center; width:75%; font-size:13px;float:left; border:1px solid rgb(45, 53, 60)!important;">
                                        {{campaignInfo.template.title}}
                                    </div>
                                </td> 
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- end rating campaign layout-->
            <!-- start survey campaign layout-->
            <div class="dataView" ng-if="ctype == 'SURVEY'">
                <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-3" ng-show="current" ng-click="backQues()">
                            <a href="javascript:;" class="text-inverse">
                                <i class="fa fa-arrow-left" style="font-size: 17px; color:#ffffff"></i>
                            </a>
                        </div>  
                        <div ng-class="current? 'col-md-6':'col-md-8'" ng-style="{'text-align': current? 'center':'right', 'padding-right': isBack? 'none' : '22px'}" ng-if="(current || next)">
                            {{current+1}} of {{campaignInfo.template.q.length}}
                        </div>
                        <div class="col-md-3"  ng-show="next" ng-click="nextQues()" 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="campaignInfo.template.q[current].questionText" style="padding-left: 1px;">    
                        <div class="push_message question" style="border: none; padding-left: 3px; font-size:14px;">
                            {{campaignInfo.template.q[current].questionText}}
                        </div>
                    </div>
                    <div class="clearfix down-space"></div>
                    <div style="height: 285px;overflow: auto;" ng-if="campaignInfo.template.q[current].questionType == 'radiobuttonchoice'">
                        <div class="form-group" ng-repeat="options in campaignInfo.template.q[current].questionOptions track by $index" style="margin-bottom:10px; color:#ffffff; margin-left:15px;">
                            <div class="col-md-12">
                                <div style="width:176px!important; height:25px!important; margin-bottom:10px;border: 1px solid rgb(45, 53, 60)!important;line-height:2;" >
                                    {{options.optionText}}
                                </div>
                            </div>
                        </div>
                        <div class="clearfix down-space"></div>
                            <div class="form-group" ng-if="campaignInfo.template.q[current].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>
                    <div class="form-group" ng-if="campaignInfo.template.q[current].questionType == 'textinput'">
                        <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>
<div class="row">
    <div class="col-md-2 ui-sortable">
        <div class="panel panel-info">
            <div class="panel-heading" style="height: 184px; min-height:184px; text-align: center;">
                <h3 style="color:#ffffff;">Click-Thru Rate</h3>
                <h3 style="color:#ffffff; margin-top:30px">{{ctr}}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-2 ui-sortable">
        <div class="panel panel-warning">
            <div class="panel-heading customClass" style="height: 184px; min-height:184px; text-align: center;">
                <h3 style="color:#ffffff;">Conversion</h3>
                <h3 style="color:#ffffff; margin-top:30px">{{conversion}}%</h3>
            </div>
        </div>
    </div>
    <div class="col-md-4 ui-sortable">
        <div class="panel panel-info">
            <div class="panel-body">
                <table class="table table-bordered" id="tblCampaigns" style="margin-bottom: 0px!important;">
                    <tbody>
                        <tr>
                            <td><strong>Best Location</strong></td>
                            <td>{{bestCity}}</td>
                        </tr>
                        <tr>
                            <td><strong>Worst Location</strong></td>
                            <td>{{wrostCity}}</td>
                        </tr>
                        <tr>
                            <td><strong>Best Response Time</strong></td>
                            <td>{{campaignInfo.startHrs}}-{{bestTime}}</td>
                        </tr>
                        <tr>
                            <td><strong>Worst Response Time</strong></td>
                            <td>{{campaignInfo.startHrs}}-{{wrostTime}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-4 ui-sortable">
        <div class="panel panel-info">
            <div class="panel-body">
                <table class="table table-bordered" id="tblCampaigns" style="margin-bottom: 0px!important;">
                    <thead>
                        <th colspan="2">Did not receive due to: </th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Reason</td>
                            <td>xxx</td>
                        </tr>
                        <tr>
                            <td>Reason</td>
                            <td>xxx</td>
                        </tr>
                        <tr>
                            <td>Reason</td>
                            <td>xxx</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

