@extends('layouts.mainlayout')

@section('title', 'Attendance Requests 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>
                <span>Or</span>    
            <div class="col-md-3">
                    <p><input type="text" data-date-format={{ config('settings.date_format') }} readonly class="form-control required" name="from "id="rangeDateStart" value="" placeholder="Start date"></p>
                </div>
                <div class="col-md-3">
                    <p><input type="text" data-date-format={{ config('settings.date_format') }} readonly class="form-control required" name="to" id="rangeDateFinish" value="" placeholder="Finish date" disabled></p>
                </div> -->
                
            </div>
            <div class="row">
            <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="header-elements d-none text-center text-md-left mb-2 mb-md-0">
                            @if(auth()->user()->can('View All Attendance Report') || auth()->user()->can('View Team Attendance Report'))
                            <div class="btn-group mt-2">
                                <button type="button" class="btn bg-indigo-400" id ="selectOption" ><i class="icon-stack2 mr-2"></i>All</button>
                                <button type="button" class="btn bg-indigo-400 dropdown-toggle" data-toggle="dropdown"></button>
                                <div class="dropdown-menu dropdown-menu-right" style="max-height: 300px; overflow-y: auto;">
                                    <a href="JavaScript:void(0);" class="dropdown-item reportfilter active" value="0"><i class="icon-users4"></i>All</a>
                                    @foreach ($teams as $team)
                                        <a href="JavaScript:void(0);" class="dropdown-item reportfilter" value="{{$team->id}}"><i class="icon-users4"></i>{{ $team->team }}</a>
                                    @endforeach
                                </div>
                            </div>
                            </div>

                    </div>
                </div>
                            <div class="btn-group mt-2 col-md-2">
                            
                                
                                <select name="selectuserOption" id="selectuserOption" class="form-control select-multiple-drag required bg-indigo-400">
                                    <option value="0" selected="">Select Employee</option>
                                    @foreach ($users as $user)
                                       <option value="{{$user->id}}">{{ $user->name}}&nbsp; {{$user->lastName }}</option>
                                    @endforeach
                                    
                                </select>
                           
                        </div>
                            @endif
                      &nbsp;  
                <div class="button-responsive">
                <button type="submit" id="filter" class="btn btn-success mb-3 mt-2">Generate report</button> 
                <button type="reset" id="reset" onClick="window.location.reload();" class="btn btn-danger ml-3 mb-3 mt-2">Reset</button>
            </div>
            </div>
        </div>
    </div>
    <!-- /marketing campaigns -->
    
    <div class="table-responsive" id="leaveReportData" >    
        <table class="table datatable-select-single" id="leaveData">
            <thead> 
                @if(isset($columnHeaders)) 
                    <tr><th></th></tr>
                    @else
                    <tr><th></th></tr>
                @endif
            </thead>
            <tbody>  
                @if(isset($attendanceReportColl))
                    <tr><td></td></tr>
                       @else
                       {{-- no need to set tr --}}
                @endif              
            </tbody>
        </table>
    </div>
    <!-- /javascript sourced data -->
   
@endsection
@section('js')
<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>
        //This is being used to transfer base64 images from the other blade file
        let toBeEncodedImages = [];
        let encodedImages = [];

        $(window).on('load', function() { // makes sure the whole site is loaded 
  $('#status').fadeOut(); // will first fade out the loading animation 
  $('#preloader').fadeOut(); // will fade out the white DIV that covers the website. 
 // $('body').delay(350).css({'overflow':'visible'});
})

        $(document).ready(function () {
            // $('#leaveData').DataTable({
            //             "aLengthMenu": [25, 50, 75, 100],
            //             "pageLength": 25,
            //             "destroy": true,
            //         "ordering": true,
            //             columnDefs: [
            //             {
            //                 "orderable": true,
            //                 "targets": 0,
            //             },
            //             {
            //             orderable: false,
            //             targets: "mt-head",
            //             targets: '_all',
            //             }],
            //             buttons: {            
            //                 dom: {
            //                     button: {
            //                         className: 'btn btn-light'
            //                     }
            //                 },
            //                 buttons: [
                                
            //                 ]
               
            //             }
            //         });
            initializeDateFilter();
            initializeLeaveReportFilter();
            var startDate = new Date(new Date().getFullYear()-1, 0, 1);
            var endDate = new Date(new Date().getFullYear()+1, 0, 0);

        // $("#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
        //     }
        // });
    //     $("#rangeDateStart").datepicker({
    //         // format: "yyyy-mm-dd",
    //         autoclose: true,
    //         //startDate: '-0m'

    //     })
    //     .on('changeDate', function(selected) {
    //         console.info("setting the date here");
    //         let minDate = new Date(selected.date.valueOf());
    //         var year = minDate.getFullYear();
    //         var month = minDate.getMonth();
    //         var day = minDate.getDate();
    //         setStartDate = new Date(year, month, day + 1);
    //         var setEndDate = new Date(year, month + 6, day);

    //         // $('#rangeDateFinish').datepicker('setDate', setStartDate);
    //         $('#rangeDateFinish').datepicker('setStartDate', setStartDate);
    //         $('#rangeDateFinish').datepicker('setEndDate', setEndDate);
    //         console.log($('#rangeDateFinish').val());
    //         var attr = $("#rangeDateFinish").attr('disabled');

    //         // For some browsers, `attr` is undefined; for others,
    //         // `attr` is false.  Check for both.
    //         if (typeof attr !== 'undefined' && attr !== false) {
    //             console.log('disabled');
    //             $("#rangeDateFinish").removeAttr('disabled');
    //         }
    //         var teamId = $('.reportfilter.active').attr('value');
    //         console.log(teamId);
    //         if ($('#rangeDateStart').val() == "" || $('#rangeDateFinish').val() == "" || teamId == undefined) {

    //             $('#filter').prop('disabled', true);

    //         } else {

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

    // $("#rangeDateFinish").datepicker({
    //     // format: "yyyy-mm-dd",
    //     autoclose: true
    // }).on('changeDate', function(selected) {
    //     let minDate = new Date(selected.date.valueOf());
    //     $('#rangeDateStart').datepicker('setEndDate', minDate);
    //     var teamId = $('.reportfilter.active').attr('value');
    //     console.log(teamId);
    //     if ($('#rangeDateStart').val() == "" || $('#rangeDateFinish').val() == "" || teamId == undefined) {


    //         $('#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(); // will fade out the white DIV that covers the website. 
                $.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 month_year = $('#month_year').val();
                var userid = $('#selectuserOption').val();
                //var from_date = $('#rangeDateStart').val();
               // var to_date = $('#rangeDateFinish').val();
                var from_date =  $('#reportrange').data('daterangepicker').startDate;
                var to_date = $('#reportrange').data('daterangepicker').endDate;
                console.log(from_date+' '+to_date);
                //disabled the generate report button if from date and to date are empty
                /*if(month_year == "" )
                {
                    $(this).attr('disabled', true);
                }
                $('#month_year').on('click',function()
                {
                    $('#filter').prop('disabled', false);
                })*/
                var formData = new FormData();
                formData.append('teamId', teamId);
                formData.append('month_year', month_year);
                formData.append('userid', userid);
                formData.append('fromDate', from_date);
                formData.append('toDate', to_date); 
                var baseurl =  document.getElementById('baseurl').value;
                $.ajax({
                    type: 'POST',
                    url: baseurl+'/attendance-request-report/select-attendance-report',
                    processData:false,
                    contentType: false,
                    data: formData,
                    success: function(data) {
                    $('#leaveReportData').html(data);
                    $('#leaveData').DataTable({
                        "aLengthMenu": [25, 50, 75, 100],
                        "pageLength": 25,
                        order: [],
                        columnDefs: [ { orderable: false, targets: [0,1,2,3,4,6,7,8,9,10] } ],
                        "bAutoWidth": false,
                        "aoColumns": [
                            { "sWidth": "null" }, // 1st column width 
                            { "sWidth": "null" }, // 2nd column width 
                            { "sWidth": "null" }, // 3rd column width
                            { "sWidth": "null" }, // 4th column width 
                            { "sWidth": "null" }, // 5th column width 
                            { "sWidth": "null" }, // 6th column width 
                            { "sWidth": "null" }, // 7th column width
                            { "sWidth": "null" }, // 8th column width 
                            { "sWidth": "40%" }, // 9th column width
                            { "sWidth": "null" }, // 10th column width
                            { "sWidth": "10%" }, // 11th column width 
                            ],
                            buttons: {            
                            dom: {
                                button: {
                                    className: 'btn btn-light'
                                }
                            },
                            buttons: [
                            'copyHtml5',
                            'excelHtml5',
                            'csvHtml5',
                            {
                                extend: 'pdfHtml5',
                                orientation: 'portrait', // Set the orientation to landscape
                                pageSize: 'A4', // Set the page size to LEGAL (or A4, LETTER, etc.)
                                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;
                                        });
                                    }

                                    // Set font sizes for different elements
                                    doc.defaultStyle.alignment = 'center';
                                     doc.styles.tableHeader.alignment = 'center';
                                    doc.styles.title.fontSize = 6; 
                                    doc.styles.tableHeader.fontSize = 5; 
                                    doc.defaultStyle.fontSize = 5; 

                                    var startDate = $('#reportrange').data('daterangepicker').startDate.format("YYYY-MM-DD");
                                    var endDate = $('#reportrange').data('daterangepicker').endDate.format("YYYY-MM-DD");

                                    var title = 'Attendance Request 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 = 6;
                                    doc.content[0] = { text: title, style: 'title', alignment: 'center' };

                                    var maxColumns = 0;
                            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 = 300; // Adjust this value as needed
                            // var marginRight = 400; // Adjust this value as needed

                            // doc.pageMargins = [marginLeft, 0, marginRight, 0]; // [left, top, right, bottom]

                            // var rowsPerPage = 21;
                            // var tableBody = doc.content[1].table.body;
                            // for (var i = rowsPerPage; i < tableBody.length; i += rowsPerPage) {
                            //     // Insert a page break after every 23 entries
                            //     tableBody[i][0].pageBreak = 'before';
                            // }
                           

                           
                            var numImages = encodedImages.length;
                            var imageIndex = 0;
                                for (var i = 1; i < doc.content[1].table.body.length; i=i+2) {
                                    if (imageIndex < numImages) {
                                        doc.content[1].table.body[i][0] = {
                                            image: encodedImages[imageIndex],
                                            width: 10,
                                            height: 11
                                        };
                                        doc.content[1].table.body[i][0].alignment = 'center';
                                    }
                                    imageIndex++;
                                }
                            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; }
                            };

                        //   Adjust text alignment and font size
                        //   doc.defaultStyle.alignment = 'center';
                        //     doc.styles.tableHeader.alignment = 'center';
                        //     doc.defaultStyle.fontSize = 11;
                        //     doc.styles.tableHeader.fontSize = 5; // Adjust the font size for the header titles
                        //     // doc.content[1].table.headerRows = 1;
                        //     doc.styles.title.fontSize = 4;
                            }
                            }
                            ]
               
                        }
                    });
                    $('#status').fadeOut(); // will first fade out the loading animation 
                    $('#preloader').fadeOut(); // will fade out the white DIV that covers the website. 
                
                    },
                    error: function (data) {
                        alert(data.responseText);
                        $('#status').fadeOut(); // will first fade out the loading animation 
                        $('#preloader').fadeOut(); // will fade out the white DIV that covers the 
                    }                   
                });
            });
        }
        function initializeLeaveReportFilter() {
            $(".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();
        var baseurl =  document.getElementById('baseurl').value;
        $(this).parents('.btn-group').find('#selectOption').html(' <i class="icon-stack2 mr-2"></i>' + selText);
        $.ajax({
                type: 'GET',
                url: baseurl+'/get-user-list',
                data: {team:selText},
                success: function(data) {
                    $('#selectuserOption').html("");
                    $('#selectuserOption').html(data.optionData);
                },
                error: function(data) {
                    
                    
                    //alert(data.responseText);
                }
            });
        //alert(selText);
        });
    </script>
@endsection