@extends('Layouts.Application')

@section('MainContent')
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="row">
    <div class="col-sm-12">

        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>Attendance Report</strong>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    {!! csrf_field() !!}

                    <div class="form-group form-group-sm">
                        <label for="AttendanceDateFrom" class="col-sm-1 control-label">From</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control datepicker" id="AttendanceDateFrom"  name="AttendanceDateFrom" required>
                        </div>
                        <label for="AttendanceDateTo" class="col-sm-1 control-label">To</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control datepicker" id="AttendanceDateTo"  name="AttendanceDateTo" required>
                        </div>
                    </div>

                    <div class="form-group form-group-sm">
                        <div class="col-sm-12">
                            <button class="btn btn-primary btn-block" type="button" id="ShowStudentsForAttendance"><i class="fa fa-list"></i>&nbsp;View Report</button>
                        </div>

                    </div>



                </form>
            </div>

        </div>

    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div id="GetStudentsForAttendanceByDate"></div>
    </div>
</div>


<script>
    $(document).ready(function () {

        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true
        });


        $(document).on('click', '#ShowStudentsForAttendance', function () {
            
             var AttendanceDateFrom = $('#AttendanceDateFrom').val();
             var AttendanceDateTo = $('#AttendanceDateTo').val();
            // alert(AttendanceDateFrom);
            if (AttendanceDateTo && AttendanceDateFrom) {
                $.ajax({
                    url: baseURL + '/!/StudentModule/StudentAbsentReportView/' + AttendanceDateTo + '/'+ AttendanceDateFrom,
                    type: 'GET',
                    success: function (response) {
                        $('#GetStudentsForAttendanceByDate').html(response);
                    }
                });
            } else {
                $('#GetStudentsForAttendanceByDate').html('<strong class="text-danger  text-center">NO DATA FOUND.</strong>');
            }

        });
    });
</script>
@endsection