@extends('layouts.mainlayout')
@section('title', 'Attendance Report')
@section('main')
<div class="card">
    <div class="mt-2">
        <div class="row input-daterange">
            <div class="col-md-3 mb-3 mt-2 ml-3">
                <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span></span> <i class="fa fa-caret-down"></i>
                </div>
                </div>
            <div class="page-header">
                <div class="page-header-content header-elements-inline">
                    {{-- <div class="page-title text-center">
                            <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
                        </div> --}}
                    <div class="header-elements d-none text-center text-md-left mb-2 mb-md-0">
                        <div class="btn-group mt-2">
                            <button type="button" class="btn bg-transparent" id="selectOption"><i class="icon-stack2 mr-2"></i>All</button>
                            <button type="button" class="btn bg-transparent dropdown-toggle" data-toggle="dropdown"></button>
                            <div class="dropdown-menu dropdown-menu-right" style="max-height: 300px; overflow-y: auto;">
                                <a href="JavaScript:getTeam();" class="dropdown-item reportfilter" value="0"><i class="icon-users4"></i>All</a>
                                @foreach ($teams as $team)
                                <a href="JavaScript:getTeam();" class="dropdown-item reportfilter" value="{{$team->id}}"><i class="icon-users4"></i>{{ $team->team }}</a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="header-elements d-none text-center text-md-left mb-2 mb-md-0">
                        <div class="btn-group mt-2">
                            <button type="button" class="btn bg-transparent" id="selectOption"><i class="icon-stack2 mr-2"></i>All</button>
                            <button type="button" class="btn bg-transparent dropdown-toggle" data-toggle="dropdown"></button>
                            <div class="dropdown-menu dropdown-menu-right" style="max-height: 300px; overflow-y: auto;">
                                <a href="JavaScript:getEngagementType();" class="dropdown-item EngagementTypefilter" value="0"><i class="icon-users4"></i>All</a>
                                <a href="JavaScript:getEngagementType();" class="dropdown-item EngagementTypefilter" value="Consultant"><i class="icon-users4"></i>Consultant</a>
                                <a href="JavaScript:getEngagementType();" class="dropdown-item EngagementTypefilter" value="Contract"><i class="icon-users4"></i>Contract</a>
                                <a href="JavaScript:getEngagementType();" class="dropdown-item EngagementTypefilter" value="Employee"><i class="icon-users4"></i>Employee</a>
                                <a href="JavaScript:getEngagementType();" class="dropdown-item EngagementTypefilter" value="Intern"><i class="icon-users4"></i>Intern</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="button-responsive">
                <button type="submit" id="filter" class="btn btn-primary mb-3 mt-2 ml-3">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, LC - Late Check-in, LB - Leave Balance</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 type="text/javascript">
$(function() {

    var start = moment().startOf('month');
    var end = moment().endOf('month');

    function cb(start, end) {
        $('#reportrange span').html(start.format("{{strtoupper(Config('settings.date_format'))}}") + ' - ' + end.format("{{strtoupper(Config('settings.date_format'))}}"));
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end);

});
</script>
<script>
    $(document).ready(function() {
        $('.dropdown-menu').find('.dropdown-item:first').addClass('active');
        $('#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,
        });
    });
    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')
                }
            });
            // get the values teamId, from date and to date
            var teamId = $('.reportfilter.active').attr('value');
            var EngId = $('.EngagementTypefilter.active').attr('value');

            var month_year = $('#month_year').val();
            var from_date =  $('#reportrange').data('daterangepicker').startDate;
            var to_date = $('#reportrange').data('daterangepicker').endDate;
            var formData = new FormData();
            formData.append('teamId', teamId);
            formData.append('engId', EngId);
            formData.append('month_year', month_year);
            formData.append('fromDate', from_date);
            formData.append('toDate', to_date);
            var baseurl =  document.getElementById('baseurl').value;
            $.ajax({
                type: 'POST',
                url: baseurl+'/attendance-report/select-team-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', // Set the orientation to landscape
                            pageSize: 'A0', // Set the page size to LEGAL (or A4, LETTER, etc.)
                            customize: function (doc) { 
                                // Specify the row height
                                var startDate = $('#reportrange').data('daterangepicker').startDate.format("YYYY-MM-DD");
                                                    var endDate = $('#reportrange').data('daterangepicker').endDate.format("YYYY-MM-DD");

                                                    var title = 'Monthly Attendance Report\nStart Date: ' + startDate + ' - End Date: ' + endDate;

                                                    // Set the font size for the title and add the title with dates to the PDF
                                                    doc.styles.title.fontSize = 25;
                                                    doc.content[0] = { text: title, style: 'title', alignment: 'center' };

                                                    var maxColumns = 1;
                                            doc.content[1].table.body.forEach(function (row) {
                                                if (row.length > maxColumns) {
                                                    maxColumns = row.length;
                                                }
                                            });

                                // Adjust margins to make left and right margins equal
                                    var marginLeft = 150; // Adjust this value as needed
                                    var marginRight = 160; // Adjust this value as needed

                                    doc.pageMargins = [marginLeft, 0, marginRight, 0]; // [left, top, right, bottom]
                                    doc.defaultStyle.fontSize = 50;
                                    doc.styles.title.fontSize = 30; 
                                    doc.styles.tableHeader.fontSize = 30; 
                                    doc.defaultStyle.alignment = 'center';
                            doc.styles.tableHeader.alignment = 'center';
                                    
                                // Customize layout settings
                                    doc.content[1].layout = {
                                        hLineWidth: function (i, node) {
                                            return (i === 0 || i === node.table.body.length) ? 5 : 1;
                                        },
                                        vLineWidth: function (i, node) {
                                            return (i === 0 || i === node.table.widths.length) ? 5 : 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');
        });
        $(".EngagementTypefilter").on('click', function() {
            // below code used to set the active class on report filter button
            $('.EngagementTypefilter').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);
    });

    function getTeam() {
        var teamId = $('.reportfilter.active').attr('value');
        console.log(teamId);
        if (($('#month_year').val() != "" || ($('#rangeDateStart').val() != "" || $('#rangeDateFinish').val() != "") ) && teamId != undefined) {


            $('#filter').prop('disabled', false);

        } else {

            $('#filter').prop('disabled', true); //disable false when month is selected
        }
    }

    function getEngagementType(){
        var teamId = $('.reportfilter.active').attr('value');

        var EngagementType = $('.EngagementTypefilter.active').attr('value');

        if (($('#month_year').val() != "" || ($('#rangeDateStart').val() != "" || $('#rangeDateFinish').val() != "") ) && teamId != undefined && EngagementType != undefined) {
            $('#filter').prop('disabled', false);
        } else {
           $('#filter').prop('disabled', true); 
        }
    }
</script>
@endsection