<?php
$y=date('Y');
$year=date('Y');
?>
<style>
.calendar{ border-left:1px solid #999; width:100%;}
tr{border:2px solid #fff !important;margin-top:3px !important; }
tr.calendar-row	{width:100%; border:2px solid #fff !important;margin-top:3px !important; }
td.calendar-day	{ min-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:100px; }
td.calendar-day:hover	{ background:#eceff5; }
td.calendar-day-np	{ background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head { background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number{ 
background:#999;
padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; }
/* shared */
td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }    

.right-btn{float:right;}
.month{width:100px;float:left;}
.year{width:100px;float:left;}
.month-year-div{width:100%;}

.left-right-btn-div{width:100%;}
</style>
<div class="container-fluid mt-3 mb-3 bg-white">
    <div class="row">
    
        <div class="col-sm-12 pt-3 pb-3">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="<?php echo base_url();?>Welcome">Home</a></li>
                <li class="breadcrumb-item">Attendance</li>
                <li class="breadcrumb-item">History</li>
            </ul>
            <div class="left-right-btn-div"><p class="btn btn-info left-btn btn-sm"><i class="fas fa-angle-left"></i><input type="hidden" id="year" value="<?php echo $year;?>"> </p><p class="btn btn-info right-btn btn-sm" value="<?php  ?>"><i class="fas fa-angle-right"></i></p></div>    
            <div id="load-calendar"></div>

    
        </div>
        <div class="col-sm-12 pb-3">
            <div class="table-responsive">
            <table class="table table-bordered text-white">
                <tr>
                    <td class="bg-danger" style="height:auto !important;padding:10px;text-align:center;">Holiday</td>
                    <td class="bg-success" style="height:auto !important;padding:10px;text-align:center;">Marked <br>& Closed</td>
                    <td class="bg-warning" style="height:auto !important;padding:10px;text-align:center;">Marked <br>& Pending</td>
                    <td class="bg-info" style="height:auto !important;padding:10px;text-align:center;">Pending</td>
                </tr>    
            </table>    
            </div>
        </div>
    </div>    
</div>




<script>
$(document).ready(function(){
    var year = $("#year").val();
    var d = new Date();
    
    var month=d.getMonth() + 1;

    function load_calendar(month, year){

        $.ajax({
            url: '<?php echo base_url(); ?>Teacher/draw_attendance_calendar/',
            type: 'POST', 
            data: {month:month,year:year},
            success: function(data){
                $("#load-calendar").html(data);
            }
        });

    }
    load_calendar(month, year);



    var month_new=month;
    $(document).on("click",".left-btn",function(){
        month=month - 1;
        if(month==0){
            month=12;
            year=year - 1;
        }
        load_calendar(month, year);
    });

    $(document).on("click",".right-btn",function(){

        month=month + 1;
        if(month >12){
            month=1;
            var sss=1;
            // year=console.log(sum([year,sss]));
            year = parseInt(year)
            year=year + 1;
            load_calendar(month, year);
        }else{
            load_calendar(month, year);    
        }

    });


});
</script>