JezK

Edit File: dashboard.php

<?php include("header.php"); 
$professionalCount = $videocon->getBusinessUnderProf();
// echo count($professionalCount);exit;
if(is_array($professionalCount) && count($professionalCount)<=0){
    if(!isset($_SESSION["modalPopup"]))
    {
        $_SESSION["modalPopup"] = 1;
        //display modal here
        echo '<script>$(document).ready(function(){$("#myModal").modal("show");});</script>';
    }
}
$fromdate = isset($_REQUEST['fromdate'])?$_REQUEST['fromdate']:'';
$todate = isset($_REQUEST['todate'])?$_REQUEST['todate']:'';

$upcomingcnt = $videocon->upcomingCnt($fromdate,$todate);
 
$completdCancelledCnt= $videocon->completdCancelledCnt($fromdate,$todate);
// print_r($completdCancelledCnt);exit;
$upcomingAmt=isset($upcomingcnt['totalamt'])?$upcomingcnt['totalamt']:0;

$completedAmt1=isset($completdCancelledCnt['1']['totalamt'])?$completdCancelledCnt['1']['totalamt']:0;
$completedAmt2=isset($completdCancelledCnt['4']['totalamt'])?$completdCancelledCnt['4']['totalamt']:0;
$completedAmt3=isset($completdCancelledCnt['2']['totalamt'])?$completdCancelledCnt['2']['totalamt']:0;
$completedAmt=$completedAmt1 + $completedAmt2 +  $completedAmt3;

$completedAmCount1=isset($completdCancelledCnt['1']['cnt'])?$completdCancelledCnt['1']['cnt']:0;
$completedAmCount2=isset($completdCancelledCnt['4']['cnt'])?$completdCancelledCnt['4']['cnt']:0;
$completedAmCount3=isset($completdCancelledCnt['2']['cnt'])?$completdCancelledCnt['2']['cnt']:0;
$completedAmCount=$completedAmCount1 + $completedAmCount2 +  $completedAmCount3;

//$completedAmt=isset($completdCancelledCnt['2']['totalamt'])?$completdCancelledCnt['2']['totalamt']:0;
$cancelledAmt=isset($completdCancelledCnt['3']['totalamt'])?$completdCancelledCnt['3']['totalamt']:0;
$totalAmount = $upcomingAmt + $completedAmt + $cancelledAmt;
$businessDetails= $videocon->getBusiness("id",$_SESSION['pid']);
?>
<section class="dashboard-counts section-padding">
    <div class="container-fluid bg-white px-5 py-3">
        <div class="row bg-white justify-content-center">
            
            <div class="container px-1">
                   
                   
                <div class="form-group calender-Right">
                    <label class="fieldName mt-2 mr-2 s-d-range">Select Date Range</label>
                    <div id="reportrange" class="col-xl-5 col-md-6 col-lg-8 formField-control" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;">
                        
                        <i class=" float-right "><img src="img/calenderdark.png"></i>
                        
                        <span><?php echo $fromdate." ".$todate ;?></span>
                        <input type="hidden" class="hidden fromdate"  name="fromdate" value="">
                        <input type="hidden" class="hidden todate"  name="todate" value="">
                       
                    </div>
                </div>
                
            </div>
            
            <div id="datesearchappend" class="container row">
            <div class="col-xl-3 col-md-4 col-lg-6">
                <div class="wrapper count-title d-flex blue-Block pt-2 px-1">
                    <div class="icon"><img class="img dashboard-img1" src="img/users.png"  /></div>
                    <div class="name pt-2">
                        <h1 class="text-white stats-title"><?php if($upcomingcnt['cnt']!=""){echo $upcomingcnt['cnt'];}else{echo 0;}?></h1>
                        <h6 class="text-white stats-subtitle pl-2">Upcoming</h6>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-4 col-lg-6">
                <div class="wrapper count-title d-flex pink-Block pt-2 px-1">
                    <div class="icon"><img class="img dashboard-img2" src="img/completed.png"  /></div>
                    <div class="name pt-2">
                        
                        <h1 class="text-white stats-title"><?php if($completedAmCount>0){echo $completedAmCount;}else{echo 0;}?></h1>
                        <h6 class="text-white stats-subtitle pl-2">Completed Appointments</h6>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-4 col-lg-6">
                <div class="wrapper count-title orange-Block d-flex pt-2 px-1">
                    <div class="icon"><img class="img dashboard-img3" src="img/cancelled.png" /></div>
                    <div class="name pt-2">
                        <h1 class="text-white stats-title"><?php if(isset($completdCancelledCnt['3']['cnt'])){echo $completdCancelledCnt['3']['cnt'];}else{echo 0;} ?></h1>
                        <h6 class="text-white stats-subtitle">Cancelled Appointments</h6>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-4 col-lg-6">
                <div class="wrapper count-title green-Block d-flex pt-2 px-1">
                    <div class="icon"><img class="img dashboard-img4" src="img/totalincome.png"  /></div>
                    <div class="name pt-2">
                        
                        
                        <h1 class="text-white  stats-title"><?php echo ($businessDetails[0]['country'] =='101'?"Rs.":"$"). $totalAmount;?></h1>
                        <h6 class="text-white stats-subtitle">Total Income</h6>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade session-modal" id="myModal">
    <div class="modal-dialog m-logout">
        <div class="modal-content">
            
            
            <div class="modal-header border-0">
                <button type="button" class="close px-2 pt-2 pb-0" data-dismiss="modal">&times;</button>
            </div>
            
            <div class="modal-body mx-5 mb-4" style="border: 1px solid #ccc; border-radius: 15px;">
                
                <form action="" method="POST">
                    <div class="mt-3 mb-3 text-center">
                        <h6 class=" mr-auto mb-0"><small class="font-600" style="font-size:19px ">You don't have professionals yet  </small></h6>
                        
                    </div>
                    <div class="d-flex justify-content-center logout-btns">
                        
                        <h6 class="pt-1 mb-0"><small class="font-600" style="font-size:19px">Add from here </small></h6>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);"  class="btn btn-primary logout-yes a-p-link" onclick="professional();">Add Professionals</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?php include("footer.php"); ?>

// $( "h1.target" ).change(function() {
//     alert();
//     var that = $(this),
//         textLength = that.val().length;
    
//     if(textLength > 18) {
//         that.css('font-size', '10px');
//     } else if(textLength > 15) {
//         that.css('font-size', '20px');
//     } else if(textLength > 10) {
//         that.css('font-size', '30px');
//     }
//     else if(textLength > 5) {
//         that.css('font-size', '40px');
//     }
// });

$(function() {

var start = moment().add(0, 'days');
// var end = moment();
var end = moment().startOf('hour').add(24, 'hour');
// endDate: moment().startOf('hour').add(32, 'hour'),
function cb(start, end) {

$('.fromdate').val(start.format('YYYY-MM-DD'));
    $('.todate').val(end.format('YYYY-MM-DD'));
    
    // $('#reportrange span').html($fromdate);
    $('#reportrange span').html(start.format('MMMM D, YYYY hh:mm A') + ' - ' + end.format('MMMM D, YYYY hh:mm A'));
    
    
}

$('#reportrange').daterangepicker({
    timePicker: true,
    startDate: start,
    endDate: end,
    ranges: {
        //    'Today': [moment(), moment()],
        //    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        //    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        //    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        //    'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
}, cb);

cb(start, end);

});

$('#reportrange').on('apply.daterangepicker', function(ev, picker) {

//   console.log(picker.startDate.format('DD-MM-YYYY'));
//   console.log(picker.endDate.format('DD-MM-YYYY'));
  //alert(picker.startDate.format('DD-MM-YYYY')+' To '+picker.endDate.format('DD-MM-YYYY'));

//   $('#dashboardsubmit').submit();

var fromdate = picker.startDate.format('YYYY-MM-DD');
  var todate =picker.endDate.format('YYYY-MM-DD');

var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              
                $('#datesearchappend').html(this.responseText);
            }
          };
          xmlhttp.open("POST", "ajax.php?action=dashboard&fromdate="+fromdate+"&todate="+todate , true);
          xmlhttp.send();
        
});

var options = {
        chart: {
            height: 350,
            type: 'line',
            stacked: false
        },

stroke: {
            show: true,
            // curve: 'line',
            // lineCap: 'butt',
            colors: ['#5c91a1', '#3772ee'],
            width: 2,
            dashArray: 0,
        },

series: [{
            name: 'Users',
            type: 'area',
            color: '#5c91a1',
            data: [0, 500, 1100, 1700, 2400]

}, {
            name: 'Appointment',
            type: 'area',
            color: '#3772ee',
            data: [55, 850, 1350, 1500, 2100]
        }],
        fill: {
            type: 'solid',
            opacity: [0.35, 0.25],
        },
        labels: ['Jan 01', 'Jan 08', 'Jan 15', 'Jan 22', 'Jan 29'],
        markers: {
            size: 0
        },
        legend: {
            shape: "square",
            horizontalAlign: 'right',
            position: 'top',
            colors: ['#5c91a1', '#3772ee'],
            radius: 0

markers: {
            size: [3, 3],
            colors: ['#5c91a1', '#3772ee'],
            strokeColors: '#fff',
            strokeWidth: 2,
            strokeOpacity: 0.9,
            fillOpacity: 1,
            discrete: [],
            shape: "circle",
            radius: 2,
            offsetX: 0,
            offsetY: 0,
            onClick: undefined,
            onDblClick: undefined,
        },

//   yaxis: [
        //     {
        //       title: {
        //         text: 'Series A',
        //       },
        //     },
        //     {
        //       opposite: true,
        //       title: {
        //         text: 'Series B',
        //       },
        //     },
        //   ],
        tooltip: {
            shared: true,
            intersect: false,
            y: {
                formatter: function(y) {
                    if (typeof y !== "undefined") {
                        return y.toFixed(0) + " points";
                    }
                    return y;

}
            }
        }

}

var chart = new ApexCharts(
        document.querySelector("#chart"),
        options
    );

chart.render();
</script>
<script type="text/javascript">
    function professional()
    {
        window.location='addProfessional.php';
    }
</script>