@props(['gettasknticketdetail','ticketstatus','a','issueclassificationdd', 'supportclassification'])
@php

echo "<pre>";
//print_r($gettasknticketdetail);
//print_r($ticketstatus);
echo "</pre>";
$ModuleId="806867ab-96a5-11eb-948a-56b1773fd56f";

$uniqueId = uniqid('report_');

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

<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>
<div class="table-responsive">
				<table class="table table-bordered mb-4" id="{{ $tableId }}">
					<thead>
						<tr>
							<th class="text-center">Sl no</th>
							<th class="text-center">Ticket TicketNumber</th>
							<th class="text-center">Ticket Name</th>
							<th class="text-center">Created Date</th>
							<th class="text-center">First Response Date</th>
							<th class="text-center">FR TAT</th>
							<th class="text-center">Updated Date</th>
							<th class="text-center">Status</th>
							<th class="text-center">Assigned User</th>
							<th class="text-center">Edit</th>
						</tr>
					</thead>
					<tbody>
						@foreach($gettasknticketdetail as $EachRecord)
						<tr>
							<td>{{$a}}</td>
							<!--<td><a href="/ShowDetailView//"><font color="blue">{{$EachRecord->TicketNumber}}</font></a></td>-->
							<td title="View Conversation & Compose Mail"><a onclick="ViewMail('{{$EachRecord->TicketId}}','{{$ModuleId}}','{{$EachRecord->TicketNumber}}')"  data-toggle="modal" data-target="#DisplayEmailView"><font color="blue" style="cursor:pointer">{{$EachRecord->TicketNumber}}</font></a></td>
							<td title="View the Ticket in Detail"><a href="/ShowDetailView//"><font color="blue">{{$EachRecord->TicketName}}</font></a></td>
							@php
								$DisplayCreatedDate="";
								if($EachRecord->CreatedDate)
								{
									$CreatedDate=$EachRecord->CreatedDate;
									$DisplayCreatedDate=date('d-m-Y h:i a',strtotime("$CreatedDate"));
								}
								$DisplayUpdatedDate="";
								if($EachRecord->UpdatedDate)
								{
									$UpdatedDate=$EachRecord->UpdatedDate;
									$DisplayUpdatedDate=date('d-m-Y h:i a',strtotime("$UpdatedDate"));
								}
								$DisplayFirstResponseTime="";
								if($EachRecord->FirstResponseTime)
								{
									$FirstResponseTime=$EachRecord->FirstResponseTime;
									$DisplayFirstResponseTime=date('d-m-Y h:i a',strtotime("$FirstResponseTime"));
								}
								$DisplayFRTAT="";
								if($EachRecord->FRTAT)
								{
									$FRTAT=$EachRecord->FRTAT;
									$FRTATExplode=explode(':',$FRTAT);
									$DisplayFRTAT=$FRTATExplode[0]." hours ".$FRTATExplode[1]." Min";
								}
							@endphp
							<td>{{$DisplayCreatedDate}}</td>
							<td>{{$DisplayFirstResponseTime}}</td>
							<td>{{$DisplayFRTAT}}</td>
							<td>{{$DisplayUpdatedDate}}</td>
							<td>
								@php
									if(array_key_exists($EachRecord->Status,$ticketstatus))
									{
										echo $ticketstatus[$EachRecord->Status];
									}
								@endphp
							</td>
							<td>{{$EachRecord->name}}</td>
							<td title="Edit the Ticket">
								<a href="/ShowEditView//">
								<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2 p-1 br-6 mb-1"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
								</a>
							</td>
							
						</tr>
						@php
						$a++;
						@endphp
						@endforeach
					</tbody>
				</table>
			</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
	(function() {
        var tableId = '{{ $tableId }}';
        var buttonId = '{{ $buttonId }}';
        var fileName = 'DrillDownReport.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 wb = XLSX.utils.table_to_book(table, {
                    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);
        }
    })();
</script>