@section('page_js')
    <!--begin::Page Vendors -->
    <script src="{!! asset('assets/js/datatable/datatables/jquery.dataTables.min.js')!!}"></script>
    <script src="{!! asset('assets/js/datatable/datatables/datatable.custom.js')!!}"></script>
    <script src="{!! asset('assets/js/select2/select2.full.min.js')!!}"></script>
    <script src="{!! asset('assets/js/select2/select2-custom.js')!!}"></script>
    <script src="{!! asset('assets/js/chat-menu.js')!!}"></script>


    <script src="{!! asset('assets/js/datepicker/date-picker/datepicker.js')!!}"></script>
    <script src="{!! asset('assets/js/datepicker/date-picker/datepicker.en.js')!!}"></script>
    <script src="{!! asset('assets/js/datepicker/date-picker/datepicker.custom.js')!!}"></script>
    <!--end::Page Vendors -->
    {{--    <script src="{!! asset('backend/js/formSubmit.js') !!}" type="text/javascript"></script>--}}
    {{--    <script src="{!! asset('backend/js/dynamic-datatable.js') !!}" type="text/javascript"></script>--}}
    <!--begin::Page Resources -->
    <script type="text/javascript">
        $('document').ready(function () {
            getKidsData();
            $('#validation-errors').hide();
            let select_month = $('#select_month').val();
            $('.datepicker-here').datepicker({
                dateFormat: 'yyyy-mm',
                maxDate: new Date()
            });
            $('#select_month').val(select_month);
            setTimeout(function () {
                $(".alert").hide();
            }, 3000);
        });


        function getKidsData() {
            var form = $(this);
            form.find('.form-group').removeClass('validate is-invalid');
            form.find('.form-control').removeClass('is-invalid');
            form.find('.invalid-feedback').remove();

            let select_kids = $('#select_kids').val();
            let select_month = $('#select_month').val();
            var errorHtml = '';

            if (select_kids == null) {
                errorHtml += '<li>The kids field is required.</li>';
            }
            if (select_month == '') {
                errorHtml += '<li>The month field is required.</li>';
            }
            if (select_kids == null || select_month == '') {
                $('#validation-errors').html('<ul>' + errorHtml + '</ul>');
                $('#validation-errors').show();
                return false;
            }

            $.ajax({
                type: 'POST',
                data: {
                    select_kids: select_kids,
                    select_month: select_month,
                },
                url: '{!! route('report.reports')  !!}',
                success: function (data) {
                    $('#validation-errors').hide();

                    $('.bodyData').find('tbody').empty();

                    var resultData = data;
                    var bodyData = '';
                    var bodyData1 = '';
                    var i = 1;
                    $.each(resultData, function (index, row) {
                        if (row.data == null) {
                            bodyData = "<tr class='absent'>" +
                                "<td>" + row.date + "</td>" +
                                "<td colspan='4'> Absent </td>" +
                                "</tr>";
                        } else if (row.data.is_holiday == true) {
                            bodyData = "<tr class='text-success'>" +
                                "<td>" + row.date + "</td>" +
                                "<td colspan='4'> Holiday </td>" +
                                "</tr>";
                        } else if (row.data.is_weekend == true) {
                            // bodyData = "<tr class='text-info'>" +
                            //     "<td>" + row.date + "</td>" +
                            //     "<td colspan='4'> Weekend </td>" +
                            //     "</tr>";
                        } else {
                            //alert(row.date);
                            if (row.data.parent_out !== null) {
                                bodyData = "<tr>" +
                                    "<td>" + row.date + "</td>" +
                                    "<td><p>" + row.data.parent_in.first_name + ' ' + row.data.parent_in.last_name + "</p><p>" + row.data.check_in_time + "</p></td>" +
                                    "<td><img class='img-fluid img-100' src=" + row.data.signature_in_url + "> </td>" +
                                    "<td><p>" + row.data.parent_out.first_name + ' ' + row.data.parent_out.last_name + "</p><p>" + row.data.check_out_time + "</p></td>" +
                                    "<td><img class='img-fluid img-100' src=" + row.data.signature_out_url + "> </td>" +
                                    "</tr>";
                            } else {
                                bodyData = "<tr>" +
                                    "<td>" + row.date + "</td>" +
                                    "<td><p>" + row.data.parent_in.first_name + ' ' + row.data.parent_in.last_name + "</p><p>" + row.data.check_in_time + "</p></td>" +
                                    "<td><img class='img-fluid img-100' src=" + row.data.signature_in_url + "> </td>" +
                                    "<td class='text-info'>CHECKOUT PENDING</td>" +
                                    "<td> </td>" +
                                    "</tr>";
                            }

                        }
                        bodyData1 += bodyData;
                        $("#select_kids").val();
                        // $(".bodyData").find('tbody').append(bodyData);
                    });

                    $(".bodyData").find('tbody').append(bodyData1);
                },
                error: function (xhr, status, error) {
                    if (xhr.responseJSON !== undefined || xhr.responseJSON !== null) {
                        // curObj.hasClass('');
                        $.each(xhr.responseJSON.errors, function (key, val) {
                            key = key.replace(/\./g, "_");
                            form.find('#' + key).parent('.form-group').addClass('validate is-invalid');
                            form.find('#' + key).addClass('is-invalid');
                            form.find('#' + key).after("<div id='" + key + "-error' class='error invalid-feedback'>" + val[0] + "</div>");
                            form.find('.invalid-feedback').show();
                        });
                    }
                }

            });
        }

        function getPdf() {
            let select_kids = $('#select_kids').val();
            let select_month = $('#select_month').val();
            $.ajax({
                type: 'POST',
                data: {
                    select_kids: select_kids,
                    select_month: select_month,
                },
                url: '{!! route('report.pdf')  !!}',
                success: function (data) {

                },
            });
        }
    </script>

    <!--end::Page Resources -->
@endsection