<style>
    .hero-widget { text-align: center; padding-top: 20px; padding-bottom: 20px; text-shadow: 1px 1px 2px blue, 0 0 25px blue, 0 0 5px darkblue; }
.hero-widget .icon { display: block; font-size: 96px; line-height: 96px; margin-bottom: 10px; text-align: center; }
.hero-widget var { display: block; height: 64px; font-size: 64px; line-height: 64px; font-style: normal; }
.hero-widget label { font-size: 17px; }
.hero-widget .options { margin-top: 10px; }
.well {  background-color : #040404 }
.acolor { color: #000000;}

.new1 .icon { display: block; font-size: 96px; line-height: 96px; margin-bottom: 10px; text-align: center; }

.bot {    padding-bottom: 20px !important; }
.new1 var { display: block; height: 96px; font-size: 96px; line-height: 96px; font-style: normal; }
</style>


<style> 
/*.new1 {
  width: 200px;
  height: auto;
  padding: 15px;
  background-color: #f6f7fb;
  box-shadow: 10px 10px 5px grey;
  font-size:30px;
  border: 2px solid red;
  border-radius: 50px 20px;
  text-align: center;
  
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   text-shadow: 1px 1px 2px blue, 0 0 25px blue, 0 0 5px darkblue;
}*/
.new1 {
    padding: 15px;
    background-color: #f6f7fb;
    box-shadow: 3px 5px 5px #dad2d2;
    font-size: 30px;
    /* border: 1px solid #bbacac; */
    /* border-radius: 50px 20px; */
    text-align: center;
    color: #5da3c1;
    /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */
    /* text-shadow: 1px 1px 1px #5da3c1, 0 0 25px #5da3c1, 0 0 5px #5da3c1; */
}

.selcls { 
  /*  padding: 9px; */
    border: solid 1px #517B97; 
    outline: 0; 
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 

    } 
    
</style>

<div class="container">

    <div class="row"><div class="col-sm-4"><h4>Total</h4></div></div>

    <div class="row">
        <div class="col-sm-4 bot">
            <div class="new1"> 
                   <div class="text">
                     <var>{{$TotalCalled}}</var>
                 </div>
                Called
            </div>
        </div>

         <div class="col-sm-4 bot">
            <div class="new1"> 
                   <div class="text">
                     <var>{{$contactedTotalCalled}}</var>
                 </div>
                Contacted
            </div>
        </div>

         <div class="col-sm-4 bot">
            <a href="javascript:;">
                <div class="new1"> 
                       <div class="text">
                        @if(isset($calllog))
                         <var>{{count($calllog)}}</var>
                         @else
                         <var> {{$calllog}}</var>
                         @endif
                     </div>
                    Follow Up
                </div>
            </a>
        </div>
    </div>

    <div class="row"><div class="col-sm-4"><h4>Campaign Wise</h4></div></div>

    <div class="row">
        <div class="col-sm-4 bot">
            <div class="new1"> 
                   <div class="text">
                     <var>{{$campaignTotalCalled}}</var>
                 </div>
                Called
            </div>
        </div>

        <div class="col-sm-4 bot">
            <div class="new1"> 
                   <div class="text">
                     <var>{{$campaignContactedTotalCalled}}</var>
                 </div>
                Contacted
            </div>
        </div>

        <div class="col-sm-4 bot">
            <a href="javascript:;">
                <div class="new1"> 
                       <div class="text">
                        @if(isset($campaignFollowupCount))
                         <var>{{count($campaignFollowupCount)}}</var>
                         @else
                          <var>{{$campaignFollowupCount}}</var>
                          @endif
                     </div>
                    Follow Up
                </div>
            </a>
        </div>

    </div>
</div>

</div>
<div style='clear:both'></div>

<script>

@if($client)
$("#tcampaign_select").val('{{$client}}')
@endif

function loadFollowupData(val)
{
    var menu = "dashboard/followUp";
    var dashlet="dialer";
    
    doAjax(menu+"?module="+dashlet+"&client="+$("#tcampaign_select").val()+"&selection="+val,'','content','ajax_'+menu,'singlethis','GET');
}

callingModeChange();

</script>