<main class="common_margin" id="main">
    <div class="main-wrap">
        <div class="breadcrumb-section">
            <ol class="breadcrumb breadcrumb-back"> 
                <a href="<?php echo base_url() ?>student/attendance"><li class="breadcrumb-item"> Back</li>  </a>
            </ol>
        </div> 
        <div class="po-calendar" style="width: 30%" class="mt-3 mb-3">
            <input type="text" class="form-control" placeholder="Select a date" id="nepali-datepicker">
            <i class="fas fa-calendar-alt cal-icon"></i>
        </div>
        <p class="mt-2">Note : To view different months notification, please select the required month and any day</p>
            <hr>
        <div class="attendance-view-cover mt-4">
            <div class="attendance-view-sub">
                <div class="att-row">
                    <div class="att-subject">
                        <img src="<?php echo  base_url(); ?>assets_admin/images/icons/<?php echo $icon ?>">
                        <h5><?php echo $subject_name ?></h5>
                    </div>
                    <div class="att-bar">
                        <div class="progress maths-att" style="width : <?php echo $total_present_percentage ?>%"></div>
                    </div>
                    <div class="att-number">
                        <?php echo $total_present_count ?>
                    </div>
                </div>
            </div>
            <div class="attendance-table">
                <table id="student-attendance" style="width:70%">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Time</th>
                            <th>Present (P)/ Absent (A)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        $totalCount = count($result);
                        $presentCount = 0;
                        foreach($result as $key => $value) {
                            $presentCount += $value['status'] == 'present' ? 1 : 0;
                            $class_name = $value['status'] == 'present' ? 'att-present' : 'att-absent';
                            $attendance_key = $value['status'] == 'present' ? 'P' : 'A';
                            ?>
                            <tr>
                                <td><?php echo $value['date'] ?></td>
                                <td><?php echo date('g:i A', strtotime($value['time']));  ?></td>
                                <td><span class="<?php echo $class_name ?>"><?php echo $attendance_key ?></span></td>
                            </tr>
                        <?php }
                        ?>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td><strong>Total Days (Current Month)</strong></td>
                            <td><strong><?php echo $presentCount ?>/<?php echo $totalCount ?></strong></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</main> 

<script type="text/javascript">

    $('#nepali-datepicker').nepaliDatePicker({
        language : 'english',
        ndpYear: true,
        ndpMonth: true,
        ndpYearCount: 10,

        onChange: function(data) {

            console.log(typeof data.object.month)
            let monthNum = data.object.month;
            let yearNum = data.object.year;
            
            let cId = "<?php echo $classroom_id ?>";
            let subId = "<?php echo $subject_id ?>";
            console.log(cId,subId,monthNum,yearNum)
            $.ajax({
                type : 'POST',
                url : "<?php echo base_url(); ?>student/ajax_get_attendance_by_month",
                data : {
                    cId : cId,
                    subId : subId,
                    monthNum : monthNum,
                    yearNum : yearNum
                },
                success : function(data) {
                    console.log(data);
                    let table = $('#student-attendance');

                    if(data == 'failed') {
                        table.empty();
                        table.append('<p class="mt-3 text-danger"> There is no attendance data for this month </p>');
                    } else {
                        table.empty();
                        table.html(data);
                    }   

                }
            });
        }
    });
    

</script>