@php
$GetResultNew=$GetREsult['TicketResult'];
$NotRespondedArray=$GetREsult['NotRespondedArray'];
$selectedTeam = request()->input('team');


if (!empty($selectedTeam)) {
$filteredResult = [];
foreach ($GetResultNew as $userId => $records) {
// Check if user has team data
if (isset($GetAllUserandRole[$userId]) &&
isset($GetAllUserandRole[$userId]['Team'])) {

// Get user's teams
$userTeams = array_map(function($teamId) use ($GetAllTeams) {
return $GetAllTeams[$teamId] ?? null;
}, $GetAllUserandRole[$userId]['Team']);

// If user belongs to selected team, keep their records
if (in_array($selectedTeam, $userTeams)) {
$filteredResult[$userId] = $records;
}
}
}
$GetResultNew = $filteredResult;
}

\Log::info("selectedTeam".json_encode($selectedTeam));

$GetResultEncode=json_encode($GetREsult);
$GetResultEncodeNew=base64_encode($GetResultEncode);

$uniqueId = uniqid('report_');

$tableId = "DownloadDetailUSERFRTATReport_" . $uniqueId;
$buttonId = "ExportButton_" . $uniqueId;

@endphp
<style>
    .hover-table {
        border-collapse: collapse;
        width: 100%;
    }

    .hover-table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    .hover-table tr:hover td {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
</style>

<h3>UserWise - First Response TAT Report Customized</h3>

<div class="row">
    <div class="col-sm-12 col-md-12" style="text-align: right">
        <button class="btn btn-primary" type="button" id="{{ $buttonId }}">Export Excel</button>
    </div>
</div>
<br>
<table class="table table-no-space table-bordered" id="{{ $tableId }}">
    <tr>
        <th>Sl.no</th>
        <th>Users</th>
        <th>Role</th>
        <th>Team</th>
        <th style="display:none;">No.Of.Tickets Created</th>
        <th>Total Tickets</th>
        <th>FR TAT Less 20 Minutes</th>
        <th>FR TAT Greater than 20 Minutes</th>
        <th>Not Responded Ticket</th>
        <th>Closed Without Reply Tickets</th>
        <th>View Total Tickets of Users</th>

    </tr>
    @php
    $a = 1; // Initialize $a
    @endphp
    @if(count($GetResultNew) > 0)
    @foreach($GetResultNew as $UserId=>$RecordDetails)
    @php

    $TicketDetails=$RecordDetails[0];
    $TotalCnt=$TicketDetails->TotalCnt;
    $Lessthan20Minutes=$TicketDetails->Lessthan20Minutes;
    $Lessthan20MinutesPercentage = ($TotalCnt > 0) ? (($Lessthan20Minutes * 100) / $TotalCnt) : 0;
    $Lessthan20MinutesPercentage=round($Lessthan20MinutesPercentage,2);

    $Greaterthan20Minutes=$TicketDetails->Greaterthan20Minutes;
    $Greaterthan20MinutesPercentage = ($TotalCnt > 0) ? (($Greaterthan20Minutes * 100) / $TotalCnt) : 0;
    $Greaterthan20MinutesPercentage=round($Greaterthan20MinutesPercentage,2);

    $NotRespondedCount = isset($NotRespondedArray[$UserId]) ? $NotRespondedArray[$UserId] : 0;
    $NotRespondedMailPercentage = ($TotalCnt > 0) ? (($NotRespondedCount * 100) / $TotalCnt) : 0;
    $NotRespondedMailPercentage = round($NotRespondedMailPercentage, 2);

    $ClosedWithoutReply=$TicketDetails->ClosedWithoutReply;
    $ClosedWithoutReplyPercentage = ($TotalCnt > 0) ? (($ClosedWithoutReply * 100) / $TotalCnt) : 0;
    $ClosedWithoutReplyPercentage=round($ClosedWithoutReplyPercentage,2);

    $OriginalTotalCnt = $TotalCnt;

    $UserTotalTickets = $Lessthan20Minutes + $Greaterthan20Minutes + $NotRespondedCount + $ClosedWithoutReply;

    $DisplayUserName=$UserId;
    if(array_key_exists($UserId,$getActiveUsersList))
    {
    $DisplayUserName=$getActiveUsersList[$UserId]['name'];
    }
    @endphp
    <tr>
        <td>{{$a}}</td>
        <td>{{$DisplayUserName}}</td>
        <td>
            @if(array_key_exists($UserId, $GetAllUserandRole))
            @foreach($GetAllUserandRole[$UserId]['Role'] as $EachRoleId)
            {{$GetAllRoles[$EachRoleId]}}&nbsp;&nbsp;
            <br>
            @endforeach
            @endif
        </td>
        <td>
            @if(array_key_exists($UserId,$GetAllUserandRole))
            @foreach($GetAllUserandRole[$UserId]['Team'] as $EachTeamId)
            @if(array_key_exists($EachTeamId,$GetAllTeams))
            {{$GetAllTeams[$EachTeamId]}}&nbsp;&nbsp;<br>
            @endif
            @endforeach
            @endif
        </td>
        <td style="display:none;">
            {{$OriginalTotalCnt}}
        </td>
        <td>{{$UserTotalTickets}}</td>
        <td>
            <a href="{{url('CustomizedDetailofUserFRTATTicketReport/Lessthan20Minutes/1/'.$SearchDate.'/'.$UserId)}}" class="text-primary" target='_blank'>
                {{$Lessthan20Minutes}}
            </a>( {{$Lessthan20MinutesPercentage}} %)
        </td>
        <td>
            <a href="{{url('CustomizedDetailofUserFRTATTicketReport/Greaterthan20Minutes/1/'.$SearchDate.'/'.$UserId)}}" class="text-primary" target='_blank'>
                {{$Greaterthan20Minutes}}
            </a>( {{$Greaterthan20MinutesPercentage}} %)
        </td>
        <td>
            <a href="{{url('CustomizedDetailofUserFRTATTicketReport/NotRespondedMail/1/'.$SearchDate.'/'.$UserId)}}" class="text-primary" target='_blank'>
                {{$NotRespondedCount}}
            </a>( {{$NotRespondedMailPercentage}} %)
        </td>
        <td>
            <a href="{{url('CustomizedDetailofUserFRTATTicketReport/ClosedWithoutReply/1/'.$SearchDate.'/'.$UserId)}}" class="text-primary" target='_blank'>
                {{$ClosedWithoutReply}}
            </a>( {{$ClosedWithoutReplyPercentage}} %)
        </td>
        <td><button type="button" class="btn btn-light-info mb-2 me-4" onclick="viewUsersTickets('{{ $SearchDate }}', '{{ $UserId }}', '{{ $DisplayUserName }}')">View</button></td>
    </tr>
    @php
    $a++;
    @endphp
    @endforeach

    @else
    <tr>
        <td colspan="9" class="text-center">No records found</td>
    </tr>
    @endif
</table>

<br>
<div class="row">
    <div class="col-sm-12 col-md-12">
        <button class="btn btn-primary" onclick="viewTicketsGroupedByUsers('{{$SearchDate}}','{{ $DisplayUserName }}',)">Total Tickets</button>
    </div>
</div>
<br>







<div class="modal fade" id="ticketModal" tabindex="-1" role="dialog" aria-labelledby="ticketModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ticketModalLabel">User Tickets</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="ticketModalBody">
                <!-- Ticket data will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark mb-2 me-4" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="totalticketModal" tabindex="-1" role="dialog" aria-labelledby="ticketModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="totalticketModalLabel">User Tickets</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="totalticketModalBody">
                <!-- Ticket data will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark mb-2 me-4" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script>
    function viewUsersTickets(searchDate, userId, userName) {
        // Show loading spinner
        $('#ticketModalBody').html('<div class="text-center"><div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div></div>');
        $('#ticketModal').modal('show');

        // Update modal title
        $('#ticketModalLabel').text('Tickets for ' + userName + ' on ' + searchDate);

        // Fetch ticket data
        $.ajax({
            url: '/getUserTickets',
            method: 'GET',
            data: {
                searchDate: searchDate,
                userId: userId
            },
            success: function(response) {
                var tableHtml = `
                <div class="table-responsive">
                    <button id="exportExcel" class="btn btn-primary mb-2">Export to Excel</button>
                    <table id="ticketsTable" class="table hover-table">
                        <thead>
                            <tr>
                                <th>Sl.no</th>
                                <th>Ticket Number</th>
                                <th>Subject</th>
                                <th>Status</th>
                                <th>Created Date</th>
                                <th>Updated Date</th>
                                <th>FRTAT</th>
                            </tr>
                        </thead>
                        <tbody>`;
                let a = 1;
                response.tickets.forEach(function(ticket) {
                    tableHtml += `
                    <tr>
                        <td>${a}</td>
                        <td>${ticket.TicketNumber}</td>
                        <td>${ticket.TicketName}</td>
                        <td>${ticket.Status}</td>
                        <td>${ticket.CreatedDate}</td>
                        <td>${ticket.UpdatedDate}</td>
                        <td style="color: ${ticket.FRTATColor};">${ticket.FRTAT || ''}</td>
                    </tr>`;
                    a++;
                });

                tableHtml += '</tbody></table></div>';

                $('#ticketModalBody').html(tableHtml);

                // Add event listener for export button
                $('#exportExcel').on('click', function() {
                    exportTableToExcel('ticketsTable', `tickets_${userName}`);
                });
            },
            error: function() {
                $('#ticketModalBody').html('<div class="alert alert-danger">Error fetching ticket data.</div>');
            }
        });
    }


    function exportTableToExcel(tableID, filename = '') {
        var table = document.getElementById(tableID);
        var wb = XLSX.utils.table_to_book(table, {
            sheet: "Sheet1"
        });
        var wbout = XLSX.write(wb, {
            bookType: 'xlsx',
            type: 'binary'
        });

        // Convert binary string to octet string for download
        function s2ab(s) {
            var buf = new ArrayBuffer(s.length);
            var view = new Uint8Array(buf);
            for (var i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }

        // Create download link
        var link = document.createElement('a');
        link.href = URL.createObjectURL(new Blob([s2ab(wbout)], {
            type: "application/octet-stream"
        }));
        link.download = filename ? filename + '.xlsx' : 'export.xlsx';

        // Trigger download
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    (function() {
        var tableId = '{{ $tableId }}';
        var buttonId = '{{ $buttonId }}';
        var fileName = 'ExportedData.xlsx';

        function exportToExcel() {
            var table = document.getElementById(tableId);
            if (!table) {
                console.error('Table not found:', tableId);
                return;
            }

            if (typeof XLSX === 'undefined') {
                console.error('XLSX library not loaded');
                return;
            }

            try {

                var clonedTable = table.cloneNode(true);

                // Iterate through each row of the cloned table
                Array.from(clonedTable.rows).forEach(function(row) {
                    // Check if the row has at least 11 columns
                    if (row.cells.length > 10) {
                        row.deleteCell(10); // Remove the 11th column (index 10)
                    }
                    // Check if the row has at least 4 columns
                    if (row.cells.length > 4) {
                        row.deleteCell(4); // Remove the 4th column (index 3)
                    }
                });


                var wb = XLSX.utils.table_to_book(clonedTable, {
                    sheet: "Sheet JS"
                });
                var wbout = XLSX.write(wb, {
                    bookType: 'xlsx',
                    type: 'array'
                });
                var blob = new Blob([wbout], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                });
                var url = URL.createObjectURL(blob);
                var a = document.createElement('a');
                a.href = url;
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
                setTimeout(function() {
                    document.body.removeChild(a);
                    window.URL.revokeObjectURL(url);
                }, 0);
            } catch (error) {
                console.error('Error exporting Excel:', error);
            }
        }

        var button = document.getElementById(buttonId);
        if (button) {
            button.addEventListener('click', exportToExcel);
        } else {
            console.error('Export button not found:', buttonId);
        }
    })();



    function viewTicketsGroupedByUsers(searchDate, userName) {
        $('#totalticketModalBody').html('<div class="text-center"><div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div></div>');
        $('#totalticketModal').modal('show');

        // Update modal title
        $('#totalticketModalLabel').text('All Tickets Grouped by Users - ' + searchDate);

        // Fetch ticket data
        $.ajax({
            url: '/getAllTickets',
            method: 'GET',
            data: {
                searchDate: searchDate
            },
            success: function(response) {
                let mainHtml = `
                <div class="mb-3">
                    <button id="exportExcel" class="btn btn-primary">Export to Excel</button>
                </div>`;

                // Group tickets by user
                const groupedTickets = {};
                response.tickets.forEach(ticket => {
                    const userName = ticket.AssignedTo || 'Unassigned';
                    if (!groupedTickets[userName]) {
                        groupedTickets[userName] = [];
                    }
                    groupedTickets[userName].push(ticket);
                });

                // Create tables for each user
                Object.keys(groupedTickets).sort().forEach(userName => {
                    const tickets = groupedTickets[userName];
                    mainHtml += `
                    <div class="user-section mb-4">
                        <h5 class="bg-light p-2 rounded">User: ${userName} (${tickets.length} tickets)</h5>
                        <div class="table-responsive">
                            <table class="table hover-table tickets-table">
                                <thead>
                                    <tr>
                                        <th>Sl.no</th>
                                        <th>Ticket Number</th>
                                        <th>Subject</th>
                                        <th>Status</th>
                                        <th>Created Date</th>
                                        <th>Updated Date</th>
                                        <th>FRTAT</th>
                                    </tr>
                                </thead>
                                <tbody>`;

                    tickets.forEach((ticket, index) => {
                        mainHtml += `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${ticket.TicketNumber}</td>
                            <td>${ticket.TicketName}</td>
                            <td>${ticket.Status}</td>
                            <td>${ticket.CreatedDate}</td>
                            <td>${ticket.UpdatedDate}</td>
                            <td style="color: ${ticket.FRTATColor};">${ticket.FRTAT || ''}</td>
                        </tr>`;
                    });

                    mainHtml += `
                                </tbody>
                            </table>
                        </div>
                    </div>`;
                });

                // Add summary section
                const totalTickets = response.tickets.length;
                const totalUsers = Object.keys(groupedTickets).length;
                mainHtml = `
                <div class="alert alert-info">
                    Total Users: ${totalUsers} | Total Tickets: ${totalTickets}
                </div>
                ${mainHtml}`;

                $('#totalticketModalBody').html(mainHtml);

                // Add event listener for export button
                $('#exportExcel').on('click', function() {
                    // Create a temporary table containing all data
                    let fullTable = '<table>';
                    Object.keys(groupedTickets).sort().forEach(userName => {
                        // Add user header row
                        fullTable += `<tr><th colspan="7">User: ${userName}</th></tr>`;
                        // Add column headers
                        fullTable += `
                        <tr>
                            <th>Sl.no</th>
                            <th>Ticket Number</th>
                            <th>Subject</th>
                            <th>Status</th>
                            <th>Created Date</th>
                            <th>Updated Date</th>
                            <th>FRTAT</th>
                        </tr>`;

                        // Add ticket rows
                        groupedTickets[userName].forEach((ticket, index) => {
                            fullTable += `
                            <tr>
                                <td>${index + 1}</td>
                                <td>${ticket.TicketNumber}</td>
                                <td>${ticket.TicketName}</td>
                                <td>${ticket.Status}</td>
                                <td>${ticket.CreatedDate}</td>
                                <td>${ticket.UpdatedDate}</td>
                                <td>${ticket.FRTAT || ''}</td>
                            </tr>`;
                        });
                        // Add spacing row between users
                        fullTable += '<tr><td colspan="7">&nbsp;</td></tr>';
                    });
                    fullTable += '</table>';

                    // Create a temporary element with the full table
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = fullTable;
                    const tempTable = tempDiv.firstChild;
                    tempTable.id = 'tempExportTable';
                    document.body.appendChild(tempTable);

                    // Export the table
                    exportTableToExcel('tempExportTable', `grouped_tickets_${searchDate}`);

                    // Remove the temporary table
                    document.body.removeChild(tempTable);
                });
            },
            error: function() {
                $('#totalticketModalBody').html('<div class="alert alert-danger">Error fetching ticket data.</div>');
            }
        });
    }
</script>