@php

$uniqueId = uniqid('report_');

$tableId = "DownloadXAxisReport_" . $uniqueId;
$buttonId = "ExportButton_" . $uniqueId;
@endphp
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
<div style="overflow-x: auto;white-space: nowrap; !important;">
<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>
@foreach($XAxisArray as $EachXAxis=>$XAxisValue)
<table  style="width:100%;margin: 18px;" class="table table-bordered mb-4" id="{{ $tableId }}">
	<tr>
		<th>{{$LabelNames[$EachXAxis]}}</th>
		<th>Count</th>
	</tr>
	@php
	$XAxisData=$GetResult[$EachXAxis];
	$FieldDetail=$FieldsDisplayType[$EachXAxis];
	$DisplayType=$FieldDetail['DisplayType'];
	$DisplayValue='';
	$total=0;
	@endphp
	
	@foreach($XAxisData as $Values=>$ColumnCnt)
		<tr>
			@if($DisplayType==2 || $DisplayType==5)
				@php
					$DropDownNameId=$FieldDetail['DropDownNameId'];
					if($GetDropdownLists[$DropDownNameId])
					{
						$ChildDropDown=$GetDropdownLists[$DropDownNameId];
						if(array_key_exists($Values,$ChildDropDown))
						{
							$DisplayValue=$ChildDropDown[$Values];
						}
					}
				@endphp
			@elseif($DisplayType==15)
				@php
					$DisplayFinalValue="";
					$AssignedUserNameTEmp="";
					if(array_key_exists($Values,$AssignedToList))
					{
						$AssignedUserNameTEmp=$AssignedToList[$Values];
						$DisplayValue=$AssignedUserNameTEmp['name'];
					}
				@endphp
			@elseif($DisplayType==1 || $DisplayType==11 || $DisplayType==17 || $DisplayType==13) 
				@php
					$DisplayValue=$Values;
				@endphp
			@else
				@php
					$DisplayValue=$Values;
				@endphp
			@endif
			<td style="cursor:pointer">
				@if($DisplayValue=='')
					(EMPTY)
				@else
					{{$DisplayValue}}
				@endif
			</td>
			<td style="cursor:pointer">
				@php
				$total=$total+$ColumnCnt;
				@endphp
				<a onclick="AdhocDrillDown('{{$EachXAxis}}','{{$Values}}','','','{{$AdHocReportId}}','{{$ReportType}}','{{$PrimaryModuleId}}',1,'{{$mode}}')" data-bs-toggle="modal" data-bs-target="#XAxisModal">
				{{$ColumnCnt}}
				</a>
			</td>
		</tr>
	@endforeach
	<tr>
		<td>Total</td>
		<td style="cursor:pointer">
			<a onclick="AdhocDrillDown('','','','','{{$AdHocReportId}}','{{$ReportType}}','{{$PrimaryModuleId}}',1,'{{$mode}}')" data-bs-toggle="modal" data-bs-target="#XAxisModal">{{$total}}</a>
		</td>
	</tr>
</table>
@endforeach

<div class="modal fade" id="XAxisModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">BPM360</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </div>
            <div class="modal-body" id="response_div">
                <p class="modal-text"></p>
				<div id="DrillDropDetails"></div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
                <!-- <button type="button" class="btn btn-primary">Save</button> -->
            </div>
        </div>
    </div>
</div>
<script>
(function() {
        var tableId = '{{ $tableId }}';
        var buttonId = '{{ $buttonId }}';
        var fileName = 'Report.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>