@extends('layouts.app')

@section('title', 'Block Locker Report')

@section('no-page-header')

@section('content')
<div class="space-y-6">

	<!-- Header -->
	<!-- <div class="flex items-center justify-between">
		<div>
			<p class="mt-1 text-sm text-gray-600">Manage and download block locker report</p>
		</div>
	</div> -->

	<!-- Filters -->
	<div class="bg-white rounded-lg shadow p-4">
		<div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-3 md:space-y-0">
			<div class="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
				<input type="hidden" id="from-date" name="from_date">
				<input type="text" id="from-date-display" placeholder="From Date" class="px-3 py-2 border rounded-md" autocomplete="off">

				<input type="hidden" id="to-date" name="to_date">
				<input type="text" id="to-date-display" placeholder="To Date" class="px-3 py-2 border rounded-md" autocomplete="off">

				<!-- <select id="locker-filter" class="px-3 py-2 border rounded-md">
					<option value="">All Lockers</option>
				</select> -->

				<select id="status-filter" class="px-3 py-2 border rounded-md">
					<option value="">All Status</option>
					<option value="block">Blocked</option>
					<option value="unblock">Unblocked</option>
				</select>

			</div>

			<button onclick="generateReport()" id="view-report-btn"
				class="px-4 py-2 bg-primary-600 text-white rounded-md">
				View Report
			</button>
		</div>
	</div>

</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
	.ui-datepicker { z-index: 9999 !important; }
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script>

$(document).ready(function() {
	$('#from-date-display, #to-date-display').datepicker({
		dateFormat: 'dd-mm-yy',
		changeMonth: true,
		changeYear: true,
		yearRange: '-10:+10',
		onSelect: function(dateText, inst) {
			var parts = dateText.split('-');
			var isoDate = parts[2] + '-' + parts[1] + '-' + parts[0];
			if (this.id === 'from-date-display') {
				$('#from-date').val(isoDate);
			} else {
				$('#to-date').val(isoDate);
			}
		}
	});

	$('#from-date-display').on('change', function() {
		var val = $(this).val();
		if (val) {
			var parts = val.split('-');
			if (parts.length === 3) {
				var isoDate = parts[2] + '-' + parts[1] + '-' + parts[0];
				$('#from-date').val(isoDate);
			}
		} else {
			$('#from-date').val('');
		}
	});

	$('#to-date-display').on('change', function() {
		var val = $(this).val();
		if (val) {
			var parts = val.split('-');
			if (parts.length === 3) {
				var isoDate = parts[2] + '-' + parts[1] + '-' + parts[0];
				$('#to-date').val(isoDate);
			}
		} else {
			$('#to-date').val('');
		}
	});

});

function getFilterValues() {
	return {
		from_date: document.getElementById('from-date').value,
		to_date: document.getElementById('to-date').value,
		// locker: document.getElementById('locker-filter').value,
		status: document.getElementById('status-filter').value
	};
}

async function generateReport(page = 1) {

	const filters = getFilterValues();

	let container = document.getElementById('report-container');

	if (!container) {
		container = document.createElement('div');
		container.id = 'report-container';
		container.className = 'mt-6 bg-white rounded-lg shadow p-6';
		document.querySelector('.space-y-6').appendChild(container);
	}

	container.innerHTML = "Loading...";

	try {
		const params = new URLSearchParams(filters);
		params.set('page', page);

		const response = await fetch(`/reports/block-locker/report?${params}`, {
			method: 'GET',
			headers: {
				'Accept': 'application/json'
			}
		});

		const data = await response.json();

		displayReport(data);

	} catch (e) {
		container.innerHTML = "Error loading report";
	}
}

function displayReport(data) {
	const container = document.getElementById('report-container');

	const html = `
		
			<div class="flex justify-between mb-4">
				<h3 class="text-lg font-semibold">Block Locker Report</h3>
				<div class="flex space-x-2">
					<button onclick="downloadReport('xlsx')" class="bg-green-600 text-white px-4 py-2 rounded">Download Report</button>
				</div>
			</div>
            <div class="w-full overflow-x-auto">

			<table class="min-w-full table-auto divide-y divide-gray-200">
				<thead class="bg-gray-50">
					<tr>
						<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">S.No</th>
						<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Locker&nbsp;No</th>
						<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
						<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
						<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reason</th>
						<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
					</tr>
				</thead>
				<tbody class="bg-white divide-y divide-gray-200">
					${Array.isArray(data.data) ? data.data.map((item, index) => `
						<tr class="hover:bg-gray-50">
							<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${index + 1}</td>
							<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.locker_no || '-'}</td>
							<td class="px-6 py-4  w-[10px]  whitespace-nowrap text-sm font-medium text-gray-900">${item.client || '-'}</td>
							<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.phone || '-'}</td>
							<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.reason || '-'}</td>
							<td class="px-6 py-4 whitespace-nowrap">
								<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${item.action === 'block' ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'}">
									${item.action ? (item.action === 'block' ? 'Blocked' : (item.action === 'unblock' ? 'Unblocked' : item.action)) : '-'}
								</span>
							</td>
						</tr>
					`).join('') : ''}
				</tbody>
			</table>
			</div>
			
		</div>
	`;

	container.innerHTML = html;

	// Render pagination
	renderPagination(data.pagination);
}

function renderPagination(pagination) {
	const pagContainer = document.getElementById('report-pagination');
	if (!pagContainer) return;
	if (!pagination) {
		pagContainer.innerHTML = '';
		return;
	}

	const current = pagination.current_page || 1;
	const last = pagination.last_page || 1;

	let html = '';

	// Previous button
	if (current > 1) {
		html += `<button onclick="generateReport(${current - 1})" class="px-3 py-1 bg-white border rounded">Prev</button>`;
	} else {
		html += `<button disabled class="px-3 py-1 bg-gray-100 border rounded text-gray-400">Prev</button>`;
	}

	// Page numbers (show up to 5 pages window)
	const start = Math.max(1, current - 2);
	const end = Math.min(last, start + 4);

	for (let i = start; i <= end; i++) {
		if (i === current) {
			html += `<button disabled class="px-3 py-1 bg-primary-600 text-white border rounded">${i}</button>`;
		} else {
			html += `<button onclick="generateReport(${i})" class="px-3 py-1 bg-white border rounded">${i}</button>`;
		}
	}

	// Next button
	if (current < last) {
		html += `<button onclick="generateReport(${current + 1})" class="px-3 py-1 bg-white border rounded">Next</button>`;
	} else {
		html += `<button disabled class="px-3 py-1 bg-gray-100 border rounded text-gray-400">Next</button>`;
	}

	pagContainer.innerHTML = html;
}

function downloadReport(format) {
	const filters = getFilterValues();
	const params = new URLSearchParams(filters);
	const routeFormat = format === 'xlsx' ? 'xls' : format;
	window.location.href = `/reports/block-locker/export-${routeFormat}?${params}`;
}

</script>
@endpush