@extends('layouts.mainlayout')
@section('title', 'Employee Attendance Report')
@section('main')
    <div class="card">
        <div class="mt-2">
            <div class="row input-daterange">
                <div class="col-md-3 ml-2">
                    <p><input type="text" class="form-control required" name="from "id="month_year" value="" placeholder="Select month" readonly></p>
                </div>
               {{-- <div class="page-header">   </div> --}}
                <div class="button-responsive">
                <button type="submit" id="filter" class="btn btn-primary mb-3 mt-2">Generate report</button>
                <button type="reset" id="reset" onClick="window.location.reload();" class="btn bg-transparent text-primary border-primary ml-3 mb-3 mt-2">Clear</button>
            </div>
            </div>
        </div>
    </div>
    <div class="float-right"> <span><i><b> A - Absent, H - Holiday, L - Leave, Pay - Payable, P - Present, T - Total Days, W - Weekly off</b></i></span>  </div>
    <div class="table-responsive" id="reportData" >
        <table class="table datatable-button-html5-basic" id="data">
            <thead>
                @if(isset($columnHeaders))
                    <tr><th></th></tr>
                    @else
                    <tr><th></th></tr>
                @endif
            </thead>
            <tbody>
                @if(isset($dataArr))
                    <tr><td></td></tr>
                        @else
                        {{-- no need to set tr --}}
                @endif
            </tbody>
        </table>
    </div>
    <!-- /javascript sourced data -->
    <script>
        $(document).ready(function () {
             $('#data').DataTable({
                        "aLengthMenu": [25, 50, 75, 100],
                        "pageLength": 25,
                        "destroy": true,
                        buttons: {            
                            dom: {
                                button: {
                                    className: 'btn btn-light'
                                }
                            },
                            buttons: [
                                'copyHtml5',
                                'excelHtml5',
                                'csvHtml5',
                                'pdfHtml5'
                            ]
                        }
            });
            initializeDateFilter();
            initializeReportFilter();

            var startDate = new Date(new Date().getFullYear()-1, 0, 1);
            var endDate = new Date();

        $("#month_year").datepicker({
            format: "mm-yyyy",
            viewMode: "months",
            minViewMode: "months",
            endDate: endDate,
            autoclose: true,
            startDate: startDate,
            });
        });

         //disable generate button 
         $('#filter').prop('disabled', true);
        $("#month_year").on("change", function() {
            
            if($('#month_year').val() == ""){
                
               $('#filter').prop('disabled', true);
            
            }else{
                
               $('#filter').prop('disabled', false); //disable false when month is selected
            }
        });
        
        function initializeDateFilter(){
            $('#filter').click(function(){
                $('#status').fadeIn(); // will first fade out the loading animation 
                $('#preloader').fadeIn();
                $.ajaxSetup({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
                });
                var month_year = $('#month_year').val();
                var formData = new FormData();

                formData.append('month_year', month_year);
                var baseurl =  document.getElementById('baseurl').value;
                $.ajax({
                    type: 'POST',
                    url: baseurl+'/attendance-individual-report/select-employee-report',
                    processData:false,
                    contentType: false,
                    data: formData,
                    success: function(data) {
                    $('#reportData').html(data);
                    $('#data').DataTable({
                        "aLengthMenu": [25, 50, 75, 100],
                        "pageLength": 25,
                        buttons: {
                            dom: {
                                button: {
                                    className: 'btn btn-light'
                                }
                            },
                            buttons: [
                            'copyHtml5',
                            'excelHtml5',
                            'csvHtml5',
                                {
                                    extend: 'pdfHtml5',
                                    orientation: 'landscape',
                        pageSize: 'A0',
                        customize: function (doc) {
                            var pageWidth = doc.pageOrientation === 'landscape' ? doc.pageHeight : doc.pageWidth;

                                // Check if the table and its widths property exist
                                if (doc.content[1].table && doc.content[1].table.widths) {
                                    // Calculate the scaling factor for adjusting the table width
                                    var widthScaleFactor = pageWidth / a4PageSize.width;

                                    // Adjust the table width based on the scaling factor
                                    doc.content[1].table.widths = doc.content[1].table.widths.map(function (width) {
                                        return width * widthScaleFactor;
                                    });
                                }
                                doc.defaultStyle.alignment = 'center';
                                     doc.styles.tableHeader.alignment = 'center';
                                    doc.styles.title.fontSize =40; 
                                    doc.styles.tableHeader.fontSize = 40; 
                                    doc.defaultStyle.fontSize = 50; 
                                                
                            var maxColumns = 0;
                            doc.content[1].table.body.forEach(function (row) {
                                if (row.length > maxColumns) {
                                    maxColumns = row.length;
                                }
                            });
                            // Customize layout settings
                            doc.content[1].layout = {
                                hLineWidth: function (i, node) {
                                    return (i === 0 || i === node.table.body.length) ? 2 : 1;
                                },
                                vLineWidth: function (i, node) {
                                    return (i === 0 || i === node.table.widths.length) ? 2 : 1;
                                },
                                hLineColor: function (i, node) {
                                    return (i === 0 || i === node.table.body.length) ? 'black' : 'gray';
                                },
                                vLineColor: function (i, node) {
                                    return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';
                                },
                                fillColor: function (rowIndex, node, columnIndex) {
                                    return (rowIndex === 0) ? '#CCCCCC' : null;
                                },
                                paddingTop: function (i, node) { return 5; },
                                paddingBottom: function (i, node) { return 5; }
                            };
                        }
                                }
                            ]
                        }
                    });
                    $('#status').fadeOut(); // will first fade out the loading animation 
                    $('#preloader').fadeOut();
                    },
                    error: function (data) {
                        $('#status').fadeOut(); // will first fade out the loading animation 
                    $('#preloader').fadeOut();
                    }
                });
            });
        }
        function initializeReportFilter() {
            $(".reportfilter").on('click', function() {
                // below code used to set the active class on report filter button
               // $('.reportfilter').removeClass('active');
                $(this).addClass('active');
            });
        }

        $(".dropdown-menu a").click(function() {
        var selText = $(this).text();
        $(this).parents('.btn-group').find('#selectOption').html(' <i class="icon-stack2 mr-2"></i>' + selText);
        });
    </script>
@endsection