@php
$page_name = 'Productivity Report';
@endphp
@include('partial.header')
<style>
    .highlighted{
        background-color:rgba(51, 175, 101, 0.4) !important;
    }
</style>
<div class="container-fluid">

    @include('partial.navigation')
        <!--************ Main container start ************* -->
                
        <div class="main-container">
            <!-- Content wrapper start -->
            <div class="content-wrapper">

                <div class="table-container">
                    <table class="table" style="margin-bottom: 0px !important;">
                        <tbody>
                            <tr>
                                <td style="width:25px;">
                                    <a onclick="window.history.back()" href="rpt_all_shift_short#"
                                        data-toggle="dropdown" aria-haspopup="true">
                                        <i style="font-size:24px;" class="icon-keyboard_backspace"></i>
                                    </a>
                                </td>
                                <td style="width:180px;">
                                    <h5 class="table-title">Productivity Report</h5>
                                </td>
                                <td style="width:50px;"><b>Date</b></td>
                                <td style="width:65px;" id="FromDatePanel">
                                    <table style="width:100%;">
                                        <tbody>
                                            <tr class="form-control form-control-sm" style="padding:0px !important;">
                                                <td style="width:32px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Day_FromDate" name="Day_FromDate" value="{{date('d')}}"
                                                        maxlength="2" data-listener-added_e381efce="true"></td>
                                                <td style="width:3px; padding:0px !important;">/</td>
                                                <td style="width:32px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Month_FromDate" name="Month_FromDate" value="{{date('m')}}"
                                                        maxlength="2" data-listener-added_e381efce="true"></td>
                                                <td style="width:3px; padding:0px !important;">/</td>
                                                <td style="width:50px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Year_FromDate" name="Year_FromDate" value="{{date('Y')}}"
                                                        maxlength="4"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td style="width:65px;" id="ToDatePanel">
                                    <table style="width:100%;">
                                        <tbody>
                                            <tr class="form-control form-control-sm" style="padding:0px !important;">
                                                <td style="width:32px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Day_ToDate" name="Day_ToDate" value="{{date('d')}}"
                                                        maxlength="2"></td>
                                                <td style="width:3px; padding:0px !important;">/</td>
                                                <td style="width:32px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Month_ToDate" name="Month_ToDate" value="{{date('m')}}"
                                                        maxlength="2"></td>
                                                <td style="width:3px; padding:0px !important;">/</td>
                                                <td style="width:50px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Year_ToDate" name="Year_ToDate" value="{{date('Y')}}"
                                                        maxlength="4"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td style="width:80px;">
                                    <button id="SearchBtn" class="btn btn-success btn-block"
                                        onclick="getProductivityReport()">Search <span id="ajax_loader"></span></button>
                                </td>
                                <td style="width:100px;">
                                    <form id="exportForm" method="POST" action="/export_report" style="display: flex;gap: 20px;">
                                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                        <input type="hidden" name="FromDate" id="FromDateExport">
                                        <input type="hidden" name="ToDate" id="ToDateExport">

                                        <input type="hidden" name="fields" id="fieldsExport">
                                        <input type="hidden" name="format" id="formatExport">
                                        <input type="hidden" name="type" id="typeExport">

                                        <button class="btn btn-success btn-block exportToExcel" type="button" onclick="exportExternal('excel')">Excel</button>
                                        <button class="btn btn-success btn-block exportToExcel" type="button" style="margin: 0;" onclick="exportExternal('pdf')">PDF</button>
                                    </form>


                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="table-container">
                        <div class="table-responsive table2excel CustomFixedTbl CustomFreezTable"
                            style="min-height: 79vh; max-height: 79vh; overflow-x: scroll;">
                            <table class="table table-bordered">
                                <thead id="ListHeadPanel">
                                </thead>
                                <tbody id="ListBodyPanel">
                                </tbody>
                                <tfoot id="ListFooterPanel"></tfoot>
                            </table>
                        </div>
                    </div>


                </div>
                <!-- Content wrapper end -->


            </div>
            <div class="modal fade" id="reportDetailModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title"><span id="PartyName"></span></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body" style="padding:3px !important;">
                            <div class="table-responsive HPMaintable2excel CustomFixedTbl" style="max-height:60vh; ">
                                <table style="width:99.9%;" class="table table-bordered">
                                    <thead>
                                        <tr style="border-top:1px solid #DDD;">
                                            <th style="width:40px;">SR.</th>
                                            <th>Party</th>
                                            <th>Username</th>
                                            <th>Shift</th>
                                            <th>Start Time</th>
                                            <th>Time Taken</th>
                                            <th>End Time</th>
                                            <th>Free Time</th>
                                            <th>T-Count</th>
                                            <th>T-Amount</th>
                                            <th>Updated By</th>
                                            <th>Update Date</th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody id="reportDetailModalBodyPanel"></tbody>
                                    <tfoot id="reportDetailModalFooterPanel"></tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="shiftDetailModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-xl" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title"><span id="PartyNameDetails"></span></h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body" style="padding:3px !important;">
                            <div class="table-responsive HPMaintable2excel CustomFixedTbl" style="max-height:60vh; ">
                                <table style="width:99.9%;" class="table table-bordered">
                                    <thead>
                                        <tr style="border-top:1px solid #DDD;">
                                            <th style="width:40px;">SR.</th>
                                            <th>Shift Name</th>
                                            <th>Total Amount</th>
                                            <th>Total Ghar</th>
                                            <th>Total Vouchers</th>
                                            <th>Time Spent</th>
                                        </tr>
                                    </thead>
                                    <tbody id="shiftDetailModalBodyPanel"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            var BaseUrl = "/";
            var nav = "rpt_all_shift_short";
            var LoginRoleId = "2";
         </script>                           

        @include('partial.footer')
        
        <script>
            var LayerLedgerId = "0";
            var LayerFromDate = "{{date('Y-m-d')}}";



            $(document).ready(function () {
                $("#FromDatePanel").html(CustomDatePicker("FromDate", LayerFromDate));

            });
            // End Agents Group //
            function setFormValuesAndSubmit(format) {

                var JsonData = {
                    'FromDate': getCustomDatePicker("FromDate", 'D'),
                    'ToDate': getCustomDatePicker("ToDate", 'D'),
                    'format': format,
                    'type' : 'productivityReport'
                };

                // Set form values
                $('#FromDateExport').val(JsonData.FromDate);
                $('#ToDateExport').val(JsonData.ToDate);

                $('#fieldsExport').val(JsonData.fields);
                $('#formatExport').val(JsonData.format);
                $('#typeExport').val(JsonData.type);

                // Submit the form
                $('#exportForm').submit();
            }
            function exportExternal(format) {
                event.preventDefault();
                setFormValuesAndSubmit(format);
            }
            function getMinutesFromTimeString(timeString) {
                // Split the time string into an array of hours, minutes, and seconds
                let timeParts = timeString.split(':');

                // Parse hours and minutes into integers
                let hours = parseInt(timeParts[0]);
                let minutes = parseInt(timeParts[1]);

                // Calculate the total number of minutes
                let totalMinutes = (hours * 60) + minutes;

                return totalMinutes;
            }
            function getProductivityReport() {
                var FromDate = getCustomDatePicker("FromDate", 'D');
                var ToDate = getCustomDatePicker("ToDate", 'D');

                var JsonData = {
                    'FromDate': FromDate,
                    'ToDate': ToDate,
                };

                JsonData['nav'] = nav;
                JsonData['Method'] = "ajax_get_productivity_report";
                
                AjaxLoader("show");

                AjaxCall("/get_productivity_report", JsonData, function (response) {
                    $("#ListBodyPanel").html('');
                    AjaxLoader("hide");

                    // Collect unique shift names across all users
                    var uniqueShifts = [];

                    // Collect unique shift names and their item_order
                    $.each(response.data, function (index, obj) {
                        $.each(this.shifts, function (shiftId, shift) {
                            // Check if this shift name already exists in uniqueShifts array
                            if (!uniqueShifts.some(existingShift => existingShift.shift_name === shift.shift_name)) {
                                uniqueShifts.push({
                                    shift_name: shift.shift_name,
                                    item_order: shift.item_order
                                });
                            }
                        });
                    });

                    // Sort the uniqueShifts array by item_order
                    uniqueShifts.sort(function (a, b) {
                        return a.item_order - b.item_order;
                    });

                    // Extract the sorted shift names into shiftNamesArray
                    var shiftNamesArray = uniqueShifts.map(shift => shift.shift_name);


                    // Add headers dynamically
                    var headerHtml = `
                        <tr style="border-top:1px solid #DDD;">
                            <th>Sr.</th>
                            <th class="text-center" style="width:280px;">Name</th>
                            <th class="text-center">Role</th>
                            <th class="text-center">Username</th>
                            <th class="text-center">Shifts</th>
                            <th class="text-center">Free Time</th>
                            <th class="text-center">T-Time</th>
                            <th class="text-center">T-Vouchers</th>
                            <th class="text-center">T-Ghar</th>
                            <th class="text-center">T-Amount</th>`;
                    
                    $.each(shiftNamesArray, function (index, shiftName) {
                        headerHtml += `<th class="text-center">${shiftName}</th>`;
                    });

                    headerHtml += `</tr>`;
                    $("#ListHeadPanel").html(headerHtml);

                    var i = 0;
                    var sumTotalSale = 0;
                    var sumT_count = 0;
                    var sumG_count = 0;

                    $.each(response.data, function (index, obj) {
                        sumTotalSale += this.t_amount;
                        sumT_count += this.t_count;
                        sumG_count += this.g_count;
                        
                        var shifts = this.shifts;
                        var shiftData = encodeURIComponent(JSON.stringify(shifts)); // Encode the JSON string

                        var html = `<tr>
                            <td>${parseInt(i) + parseInt(1)}</td>
                            <td style="cursor:pointer" onclick="reportDetail(${index},'${this.name}','${this.username.toUpperCase()}')">${this.name}</td>
                            <td>${this.roles}</td>
                            <td>${this.username.toUpperCase()}</td>
                            <td style="cursor:pointer" data-shifts='${shiftData}' onclick="shiftDetails('${this.name}', '${this.username.toUpperCase()}', this)">${Object.keys(shifts).length}</td>
                            <td>${this.free_time}</td>
                            <td>${this.t_time}</td>                            
                            <td>${this.t_count}</td> 
                            <td>${this.g_count}</td> 
                            <td>${this.t_amount}</td>`;
                            
                            $.each(shiftNamesArray, function (index, shiftName) {
                                var shift_g_count = 0; // Default value if shift_g_count doesn't exist for the user
                                $.each(shifts, function (shiftId, shift) {
                                    if (shift.shift_name === shiftName) {
                                        shift_g_count = shift.shift_g_count;
                                    }
                                });
                                html += `<td>${shift_g_count}</td>`;
                            });
                        
                        $("#ListBodyPanel").append(html);
                        i++;
                    });

                    var htmlSum = `<tr>
                        <th colspan="7">Total</th>                          
                        <th>${sumT_count}</th>  
                        <th>${sumG_count}</th>  
                        <th>${sumTotalSale}</th>
                    </tr>`;
                    
                    $("#ListBodyPanel").append(htmlSum);
                });
            }

                function shiftDetails(name, username, element) {
                    $("#shiftDetailModalBodyPanel").html('');
                    var shifts = decodeURIComponent($(element).data('shifts'));  // Decode the JSON string
                    var shiftsArray = JSON.parse(shifts);
                    var i = 0;
                    $("#PartyNameDetails").html(name+" ("+username+")");

                    $.each(shiftsArray, function (shiftId, shift) {
                        var shiftHtml = `<tr>
                            <td>${parseInt(i) + parseInt(1)}</td>
                            <td>${shift.shift_name}</td>
                            <td>${shift.shift_amount}</td>
                            <td>${shift.shift_g_count}</td>
                            <td>${shift.shift_count}</td>
                            <td>${shift.shift_time}</td>
                        </tr>`;
                        $("#shiftDetailModalBodyPanel").append(shiftHtml);
                        i++;
                    });

                    $("#shiftDetailModal").modal("show");
                }


            function reportDetail(id, name,username){
                var FromDate = getCustomDatePicker("FromDate", 'D');
                var ToDate = getCustomDatePicker("ToDate", 'D');

                var JsonData = {
                    'FromDate': FromDate,
                    'ToDate':ToDate,
                    'AddedBy':id
                };

                JsonData['nav'] = nav;
                JsonData['Method'] = "ajax_get_productivity_report_detail";
                

                AjaxCall("/get_productivity_report_detail", JsonData, function (response) {
                    $("#PartyName").text(name);
                    $("#reportDetailModalBodyPanel").html('');
                    var i = 0;
                    

                    $.each(response.data, function (index, obj) {
                        var rowColorCss = "";

                        var timeTakeTotalMins = getMinutesFromTimeString(this.TimeTake);
                        var freeTimeTotalMins = getMinutesFromTimeString(this.FreeTime);
                        if(timeTakeTotalMins > 4){
                            rowColorCss = "style='background-color:blue;color:#fff'";
                        }
                        if(freeTimeTotalMins > 4){
                            rowColorCss = "style='background-color:red;color:#fff'";
                        }

                        var html = `<tr ${rowColorCss}>
                                <td>${parseInt(i) + parseInt(1)}</td>
                                <td>${this.LedgerName}</td>
                                 <td>${username}</td>
                                <td>${(this.ShiftName)}</td>
                                <td>${(this.StartTime)}</td>
                                <td>${(this.TimeTake)}</td>
                                <td>${(this.EndTime)}</td>                            
                                <td>${(this.FreeTime)}</td> 
                                <td>${(this.TCount)}</td> 
                                <td>${(this.TotalAmount)}</td> 
                                <td>${(this.UpdatedBy)}</td> 
                                <td>${(this.UpdatedDate)}</td> 
                                </tr>`;
                        
                            $("#reportDetailModalBodyPanel").append(html);
                        i++;
                    });

                    $("#reportDetailModal").modal("show");


                })
            }


            function ExportToExl() {
                ExportToExcel_custom("HVS_Detail_FromAllShiftReport", "HPMaintable2excel");
            }
            $(function () {
                $("body").keydown(function (e) {
                    var keyCode = e.keyCode || e.which;
                    if (keyCode == 113) // F2 - Save Transaction
                    {
                        e.preventDefault();
                        AddBtn();
                    }
                    if (keyCode == 116) // F5 - Random
                    {
                        e.preventDefault();
                    }
                });
            });
            
            
            ko.bindingHandlers.nextFieldOnEnter = {
                init: function(element, valueAccessor, allBindingsAccessor) {
                    $(element).on('keydown', 'input, select', function (e) {
                        var self = $(this)
                        , form = $(element)
                          , focusable
                          , next
                        ;
                        //LastFocusedControl_Id = $(":focus").attr("id");
                        if (e.keyCode == 13) {
                            focusable = form.find('input,select,button,textarea').filter(':visible');
                            var nextIndex = focusable.index(this) == focusable.length -1 ? 0 : focusable.index(this) + 1;
                            next = focusable.eq(nextIndex);
                                
                                
                            next.focus().select();
                            return false;
                        }
                    });
                }
            };
            ko.applyBindings({});
        </script>