JezK

Edit File: appointment.php

<?php 
include("header.php");
/*if(!isset($_SESSION['appointments']) && $_SESSION['signup_type']!=1)
{
    echo "<script>window.location='dashboard.php'</script>";
}*/
// print_r($_SESSION);exit;

$active2=$active3=$active1='';
if(isset($_REQUEST['slotid']) && $_REQUEST['slotid']==2)
{
    $active2='active';
    $active='2';
}
else if(isset($_REQUEST['slotid']) && $_REQUEST['slotid']==3)
{
    $active3='active';
    $active='3';
}
else if($active2=='' && $active3=='')
{
    $active1='active';
    $active='1';
}
?>
<style>
    div.dataTables_wrapper div.dataTables_filter {
        position: absolute;
        top: 154px;
    }
</style>
<section class="section-padding">
    <div class="container">
        
        <ul class="nav nav-tabs border-0" role="tablist">
            <li class="nav-item">
                <a class="nav-link anc-Color <?php echo $active1;?>" href="?slotid=1">UPCOMING</a>
            </li>
            <li class="nav-item">
                <a class="nav-link anc-Color <?php echo $active2;?>" href="?slotid=2">COMPLETED</a>
            </li>
            <li class="nav-item">
                <a class="nav-link anc-Color <?php echo $active3;?>"  href="?slotid=3">CANCELLED</a>
            </li>
        </ul>
        
        <div class="tab-content  bg-white mt-3">
                        
                <div class="container pt-4 border-bottom">
                    
                    <div class=" mb-2 row justify-content-center">
                        <?php if($_SESSION['signup_type']==1 || isset($_SESSION['appointments'])){ ?>
                            <select name="appointmentType" class="col-12 col-xl-5 col-md-5 col-lg-5 formField-control mr-4 mbr-Appointment" id="appointmentType" onchange="getAppointments(0,'','')";>
                                <option value="1">All Appointments</option>
                                <option value="2">Business Appointments</option>
                            </select>
                            
                        <?php } ?>
                        
                        <label class="fieldName mt-2 mr-2 mbr-dateLable">Select Date Range</label>
                        <div id="upcomingAppointments" class="col-12 col-xl-5 col-md-5 col-lg-5 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></span>  
                            <input type="hidden" class="hidden "  name="" id="hiddenval"value="0">
                            <input type="hidden" class="hidden "  name="fromdate" value="">  
                            <input type="hidden" class="hidden "  name="todate" value="">                         
                        </div>
                    </div>
                </div>
                
            
            <div id="upcoming" class="container tab-pane <?php echo $active1;?>">
                
            </div>
            
            <div id="completed" class="container tab-pane <?php echo $active2;?>">
            
            </div>
            
            <div id="cancelled" class="container tab-pane <?php echo $active3;?>">                
                
            </div>
        </div>
    </div>
</section>
<?php include("footer.php"); ?>
<script>
function unauthorizedUser(){
    alert("Sorry you are unauthorized user to take the join call");
    return false;
}
    
var fromdate=todate='';
var scrolltype="<?php echo $active;?>";
if(scrolltype==1){ var appendType='upcoming';}
if(scrolltype==2){ var appendType='completed';}
if(scrolltype==3){ var appendType='cancelled';}

$(function() {

getAppointments(0,fromdate,todate);       
      $('.page').on( 'scroll', function(){
            if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                var limitStart = $("#"+appendType+" .container").length;
                getAppointments(limitStart,fromdate,todate);
            }
        });
    });

function getAppointments(limitStart,fromdate,todate) {

var s  =   $('#upcomingAppointments span').html();
    //   var x = $('.fromdate').val();
     //   var str = "August 18, 2019 - September 16, 2019";
     if( $('#hiddenval').val()==0){
        var fromdate = '';
        var todate = '';
     }
     else{

var arr1 = s.split("-")[0];
        var arr2 = s.split("-")[1];
        var fromdate1 = new Date(arr1);
        var todate2 = new Date(arr2);
        fromMonth = '' + (fromdate1.getMonth() + 1),
        fromDay = '' + fromdate1.getDate(),
        fromYear = fromdate1.getFullYear();

toMonth = '' + (todate2.getMonth() + 1),
        toDay = '' + todate2.getDate(),
        toYear = todate2.getFullYear();

if(limitStart<=0 && !data)
                {
                    $("#"+appendType).html("");
                    if(scrolltype==1)
                    {
                        $("#"+appendType).append("<div class='container pb-3'><div class='row justify-content-center'><h2 class='bg-goldImg text-center' style='padding: 10px;'>No Upcoming Bookings</h2></div></div>");
                    }
                    if(scrolltype==2)
                    {
                        $("#"+appendType).append("<div class='container pb-3'><div class='row justify-content-center'><h2 class='bg-goldImg text-center' style='padding: 10px;'>No Completed Bookings</h2></div></div>");
                    }
                    if(scrolltype==3)
                    {
                        $("#"+appendType).append("<div class='container pb-3'><div class='row justify-content-center'><h2 class='bg-goldImg text-center' style='padding: 10px;'>No Cancelled Bookings</h2></div></div>");
                    }
                }
                if (data) {
                    
                    $("#"+appendType).append(data);
                }
            }
        );
    }
    async function bookingAccept(id)
    {
        const agoraDetails = await getToken()
        console.log(agoraDetails, 'agoraDetails')
        console.log(agoraDetails.token, 'agoraDetails.tokenboking')
        let agoraToken = encodeURIComponent(agoraDetails.token); 
        let channelName = encodeURIComponent(agoraDetails.channelName);

const url = "ajax.php?action=bookingAccept&bid="+id+"&agoratoken="+agoraToken+"&channelName="+channelName
        console.log(url, 'url')
        xhttp.open("GET", url, true);
        xhttp.send();
    }
    function cancelconfirmed(id)
    {
        if(confirm('Are you sure wants to cancel this booking'))
        {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var data=this.responseText;                        
                    if(data==1)
                    {
                        alert("Your booking slot is cancelled");
                        window.location='appointment.php';
                    }else{
                        alert("Booking cancel was failed");
                       $('#cancelAppointment').modal(hide);

}
                }
            };
            xhttp.open("GET", "ajax.php?action=cancelappointment&bid="+id, true);
            xhttp.send();
        }else{
            return false;
        }
    }

async function getToken() {
    // Generate channelName and uid
    const channelName = Math.floor(Math.random() * 10000);
    // Construct the URL with query parameters
    const url = `../agora/tokenGeneration.php?channelName=${channelName}`;
    try {
        // Fetch token using GET method
        const response = await fetch(url, {
            method: 'GET',
            headers: { 'Content-Type': 'application/json' }
        });

if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

// Parse JSON response
        const data = await response.json();
        console.log('data:', data);
        console.log(data.token, 'agoraDetails.token')
        return data;
    } catch (error) {
        console.error('Error fetching token:', error);
        throw error;
    }
}

$('#upcomingAppointments').on('apply.daterangepicker', function(ev, picker) {        
        var fromdate = picker.startDate.format('YYYY-MM-DD');
        var todate =picker.endDate.format('YYYY-MM-DD');
         $('#hiddenval').val('1');

getAppointments(0,fromdate,todate); 
        
    });
function informToSubscriber(bid,uid, token, channel_name){
    //window.location='../opentok_archive/web/index.php?joincall&uid='+uid+'&id='+bid;  
   // window.location = '../agora/webVideoChannel.php';
   var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var data=this.responseText;            
            if(!data){
                alert('This time slot is not available now.Please check the time slots and join the call');
                return false;
            }
            else if(data == 2){
                 alert("Sorry user is not available due to blocked/deleted by admin")  ;return false
            }   
            else if(data == 1){

window.location = 'hostVideo.php?bid='+bid+'&uid='+uid+'&token='+encodeURIComponent(token)+'&channel_name='+channel_name;
                // window.location='../opentok_archive/web/index.php?joincall&uid='+uid+'&id='+bid;  
            }                      
            else if(data!='')
            {
                window.location=data;  
            }

}
    };
    xhttp.open("GET", "ajax.php?action=joncalltonotify&bid="+bid+"&uid="+uid, true);
    xhttp.send();
}
/*function showNotification() { 
    if (!Notification) {
        $('body').append('<h4 style="color:red">*Browser does not support Web Notification</h4>');
        return;
    }
    if (Notification.permission !== "granted") {        
        Notification.requestPermission();
    } else {        
        $.ajax({
            url : "notification.php",
            type: "POST",
            success: function(data, textStatus, jqXHR) {
                var data = jQuery.parseJSON(data);
                if(data.result == true) {
                    var data_notif = data.notif;
                    for (var i = data_notif.length - 1; i >= 0; i--) {
                        var theurl = data_notif[i]['url'];
                        var notifikasi = new Notification(data_notif[i]['title'], {
                            icon: data_notif[i]['icon'],
                            body: data_notif[i]['msg'],
                        });
                        notifikasi.onclick = function () {
                            window.open(theurl); 
                            notifikasi.close();     
                        };
                        setTimeout(function(){
                            notifikasi.close();
                        }, 5000);
                    };
                } else {
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {}
        }); 
    }
};*/
        //
       
</script>