@extends('layouts.mainlayout')
@section('title', 'Monthly Attendance Details 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 Checkin, 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 src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/exceljs/dist/exceljs.min.js"></script>

<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() {
        // $('.EngagementTypefilter').addClass('active');
        // $('.reportfilter').addClass('active');
        $('.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 = $('#rangeDateStart').val();
            // var to_date = $('#rangeDateFinish').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+'/monthly-attendance-details/monthly-attendance-details-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',
                                {
    text: 'Export Excel',
    className: 'btn btn-light',
   action: function () {
            exportCustomExcelFromDataTable();
        }
},
                                'csvHtml5',
                                {
                                    extend: 'pdfHtml5',
                                    orientation: 'Landscape', // Set the orientation to landscape
                                    pageSize: 'A0', // Set the page size to A0 for a larger page
                                    customize: function (doc) { 
                                        var startDate = $('#reportrange').data('daterangepicker').startDate.format("YYYY-MM-DD");
                                        var endDate = $('#reportrange').data('daterangepicker').endDate.format("YYYY-MM-DD");

                                        var title = 'Monthly Attendance Details Report\nStart Date: ' + startDate + ' - End Date: ' + endDate;
                                        var legend = 'A - Absent, H - Holiday, L - Leave, Pay - Payable, P - Present, T - Total Days, W - Weekly off, LC - Late Check-in, LB - Leave Balance';

                                        // Set the font size for the title and add the title with dates to the PDF
                                        doc.styles.title.fontSize = 22;
                                        
                                        // Add title and legend at the top of the PDF
                                        doc.content.unshift(
                                            { text: title, style: 'title', alignment: 'center', margin: [0, 0, 0, 10] },
                                            { text: legend, style: 'legend', alignment: 'center', margin: [0, 0, 0, 20] }
                                        );

                                        // Define styles for title and legend
                                        doc.styles.legend = {
                                            fontSize: 22,
                                            bold: true
                                        };

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

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

                                        doc.pageMargins = [marginLeft, 20, marginRight, 20]; // [left, top, right, bottom]
                                        doc.defaultStyle.fontSize = 17;
                                        doc.styles.title.fontSize = 16; 
                                        doc.styles.tableHeader.fontSize = 20; 
                                        doc.defaultStyle.alignment = 'center';
                                        doc.styles.tableHeader.alignment = 'center';

                                        // Customize layout settings
                                        doc.content[2].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); 
        }
    }
 function exportCustomExcelFromDataTable() {
  function ensureSeconds(timeStr) {
    if (/\d{1,2}:\d{2}:\d{2}/.test(timeStr)) return timeStr;
    return timeStr.replace(/(\d{1,2}:\d{2})(\s*[AP]M)/i, '$1:00$2');
  }

  const table = $('#data').DataTable();
  const rawData = table.rows({ search: 'applied' }).data().toArray();
  const columns = table.columns().header().toArray().map(th => $(th).text().trim());

  if (!rawData.length) {
    alert("No data to export!");
    return;
  }

  const excelData = [];
  excelData.push(columns);

  const empNameColIndex = 0;

  rawData.forEach(row => {
    const checkinRow = [];
    const checkoutRow = [];
    const totalRow = [];

    row.forEach((cell, idx) => {
      if (typeof cell === 'string' && cell.includes('\n')) {
        const parts = cell.split('\n');

        checkinRow.push(parts[0] ? ensureSeconds(parts[0]) : '');
        checkoutRow.push(parts[1] ? ensureSeconds(parts[1]) : '');

        let totalVal = parts[2] || '';
      // Remove all occurrences of "hr" or "hrs", anywhere in the string (case-insensitive)
totalVal = totalVal.replace(/hrs?/gi, '').trim();

// Now check if it already contains seconds (like 8:46:00)
const hasSeconds = /^\d{1,2}:\d{2}:\d{2}$/.test(totalVal);


        if (!/\d{1,2}:\d{2}:\d{2}/.test(totalVal) && /\d{1,2}:\d{2}/.test(totalVal)) {
          totalVal = totalVal + ':00';
        }

        if (totalVal) totalVal = totalVal + ' Hrs';

        totalRow.push(totalVal);
      } else {
        checkinRow.push(cell);
        checkoutRow.push('');
        totalRow.push('');
      }
    });

    excelData.push(checkinRow);
    excelData.push(checkoutRow);
    excelData.push(totalRow);
    excelData.push(new Array(columns.length).fill(''));
  });

  const worksheet = XLSX.utils.aoa_to_sheet(excelData);
  worksheet['!cols'] = worksheet['!cols'] || [];
  worksheet['!cols'][0] = { width: 15 };
  for (let i = 1; i <= 50; i++) {
    worksheet['!cols'][i] = { width: 15 };
  }

  const fillColor = { fgColor: { rgb: "FFFF99" } };
  let rowIndex = 1;
  for (let i = 0; i < rawData.length; i++) {
    const checkinCellAddress = XLSX.utils.encode_cell({ c: empNameColIndex, r: rowIndex });
    if (!worksheet[checkinCellAddress].s) worksheet[checkinCellAddress].s = {};
    worksheet[checkinCellAddress].s.fill = fillColor;

    const checkoutCellAddress = XLSX.utils.encode_cell({ c: empNameColIndex, r: rowIndex + 1 });
    if (!worksheet[checkoutCellAddress]) worksheet[checkoutCellAddress] = { t: 's', v: '' };
    worksheet[checkoutCellAddress].s = { fill: fillColor };

    const totalCellAddress = XLSX.utils.encode_cell({ c: empNameColIndex, r: rowIndex + 2 });
    if (!worksheet[totalCellAddress]) worksheet[totalCellAddress] = { t: 's', v: '' };
    worksheet[totalCellAddress].s = { fill: fillColor };

    rowIndex += 4;
  }

  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Monthly Attendance");
  XLSX.writeFile(workbook, "Monthly-Attendance.xlsx", { bookType: "xlsx", bookSST: false, type: "binary" });
}

</script>
@endsection