<?php include 'inc_classes.php'; 
include "admin_authentication.php";
include "include/headHeader.php";
?>
<?php
// $edit_access='';
// $sel_acc="select * from edit_previleges where admin_id='".$_SESSION['admin_id']."' and privilege_id='392'";
// $ptr_access=mysql_query($sel_acc);
// if(mysql_num_rows($ptr_access))
// {
// 	$edit_access='yes';
// }
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Dashboard Task</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
    <!-- daterange picker -->
    <link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
    <!-- bootstrap datepicker -->
    <link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
    <!-- Morris chart -->
    <link rel="stylesheet" href="bower_components/morris.js/morris.css">
    <!-- Morris charts -->
    <link rel="stylesheet" href="../../bower_components/morris.js/morris.css">
    <link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="plugins/iCheck/all.css">
    <!-- Bootstrap Color Picker -->
    <link rel="stylesheet" href="bower_components/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css">
    <!-- Bootstrap time Picker -->
    <link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="bower_components/select2/dist/css/select2.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
    <!-- Google Font -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
    <style>
        span {
            margin-left: 20%;
            text-align: center;
        }
        .form-control {
            margin-left: 20px;
        }
    </style>
</head>
<?php
 function convertToHoursMins($time, $format = '%02d:%02d') {
    if ($time < 1) {
        return;
    }
    $hours = floor($time / 60);
    $minutes = ($time % 60);
    return sprintf($format, $hours, $minutes);
}
?>
<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
        <?php include "include/header-main.php"; ?>
        <!-- Left side column. contains the logo and sidebar -->
        <?php include "include/menu_left.php"; ?>
        <!-- Content Wrapper. Contains page content -->
        <!-- Left side column. contains the logo and sidebar -->
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <!-- ================= boxes starts================ -->
            <?php include "include/tk_header_box.php"; ?>
            <!-- ================= boxes end================ -->
            <!-- main body code start -->
            <section class="content">
                <div class="row" >
                    <!-- <div style="margin-left:30%;width:395px">
                        <div class="nav-tabs-custom" style="background-color:lightblue">
                            <ul class="nav nav-tabs">
                                <li ><a href="tk_dashboard.php" ><b>Tabular View</b></a></li>
                                <li ><a href="tk_dashboard_view.php" ><b>Graphical View</b></a></li>
                                <li class="active"><a data-toggle="tab" ><b>Calendar View</b></a></li>
                            </ul>
                        </div>
                     </div> -->
                    <div class="box box-primary" >
                        <div class="box-body">
                            <?php
                             $display_query = "select * from tk_individual_task where staff_id='".$_SESSION['admin_id']."' and Validation!='in_valid' order by staff_task_id ASC";            // ".$_SESSION['admin_id']."
                            $results = mysql_query($display_query);   
                            $count = mysql_num_rows($results);  
                            if($count>0) 
                            {
                                $data_arr=array();
                                $date_arr=[];
                                $i=1;
                                while($data_row = mysql_fetch_array($results))
                                {	
                                // $data_arr[$i]['task_id'] = $data_row['staff_task_id'];
                                $data_arr[$i]['title'] = ucwords($data_row['task_name']);
                                $data_arr[$i]['start'] = date("Y-m-d", strtotime($data_row['added_date']));
                                // $date_arr[$i]['start'] = date("Y-m-d", strtotime($data_row['added_date']));
                                // $data_arr[$i]['end'] = date("Y-m-d", strtotime($data_row['due_date']));
                                if($data_row['Validation']=='pending'){
                                    // $data_arr[$i]['color'] = '#'.substr(uniqid(),-6); // 'green'; pass colour name
                                    $data_arr[$i]['color'] ='blue';
                                    }
                                elseif($data_row['status']=='complete'){
                                    $data_arr[$i]['color'] ='green';
                                }
                                elseif($data_row['status']=='in_progress' && $data_row['Validation']=='valid'){
                                    $data_arr[$i]['color'] = 'rgb(255,196,12)';
                                }
                                elseif($data_row['status']=='in_complete'){
                                    $data_arr[$i]['color'] = 'red';
                                }
                                elseif($data_row['status']=='cancel'){
                                    $data_arr[$i]['color'] = 'grey';
                                }
                                if($data_row['Validation']=='valid'){
                                    $data_arr[$i]['url'] = 'tk_individual_task_detail.php?id='.$data_row['staff_task_id'];
                                }
                                $i++;
                                }
                            }
                            $data_array=array_values($data_arr);
                            // $dates=array_values($date_arr);
                            // echo json_encode($data_array);
                            ?>
                            <!-- <script> const  data=<?php //echo json_encode($data);?>;</script> -->
                            <div style="text-align:center"><span><strong>Color Codes - </strong> &nbsp;&nbsp;&nbsp;&nbsp;In-Progress Task : <img src="images/yellow.png" width="18px" height="18px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Complete Task : <img src="images/green.png" width="18" height="18">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In-Complete Task : <img src="images/red.png" width="18" height="18">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cancel Task : <img src="images/gray.png" width="18" height="18">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Validation Pending Task : <img src="images/blue.png" width="18" height="18"></span></div>
                            <div  id="calendar"></div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <?php include "include/footer-main.php"; ?>
    </div>
    <script src='js/index.global.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            // var event = new Array();
            const  result=<?php echo json_encode($data_array);?>;
            var calendar = new FullCalendar.Calendar(calendarEl, {
            //   initialDate: '2023-01-12',
                editable: true,
                selectable: true,
                businessHours: true,
                dayMaxEvents: true, // allow "more" link when too many events
                
                events: 
                    result,
                    // select: function(result) {
                    // 		$('#event_name').val(moment(result));
                    // 		$('#event_entry_modal').modal('show');
                    // 	},
                });
            calendar.render();
        });
    </script>
    <style>
        body 
        {
            /* margin: 40px 10px; */
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }
        #calendar 
        {
            max-width: 1100px;
            margin: 0 auto;
        }
    </style>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- Select2 -->

    <script src="bower_components/select2/dist/js/select2.full.min.js"></script>

    <!-- InputMask -->

    <script src="plugins/input-mask/jquery.inputmask.js"></script>

    <script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script>

    <script src="plugins/input-mask/jquery.inputmask.extensions.js"></script>

    <!-- date-range-picker -->

    <script src="bower_components/moment/min/moment.min.js"></script>

    <script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>

    <!-- bootstrap datepicker -->

    <script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>

    <!-- bootstrap color picker -->

    <script src="bower_components/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>

    <!-- bootstrap time picker -->

    <script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>

    <!-- SlimScroll -->

    <script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>

    <!-- iCheck 1.0.1 -->

    <script src="plugins/iCheck/icheck.min.js"></script>


    <script src="bower_components/fastclick/lib/fastclick.js"></script>

    <!-- AdminLTE App -->

    <script src="dist/js/adminlte.min.js"></script>

    <!-- AdminLTE for demo purposes -->

    <script src="dist/js/demo.js"></script>
    
    <script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>
</body>
</html>