@props([
	'facilities' => [],
	'mapCenter' => [
		'lat' => 35.868287,
		'lng' => 140.022625,
		'zoom' => 13,
	]
])

<div id="map" class="w-100 h-100" style="min-height: 420px;"></div>

@push('scripts')
<script>
window.OPENDX = {
	center: @json($data['map_center']),
	facilities: @json($data['facility_list'], JSON_UNESCAPED_UNICODE)
};
</script>

<script>
let map;
const markers = new Map();
const infoWins = new Map();

function initOpendxMap() {
	const c = OPENDX.center || { lat: 35.868287, lng: 140.022625, zoom: 13 };
	map = new google.maps.Map(document.getElementById('map'), {
	center: { lat: Number(c.lat), lng: Number(c.lng) },
	zoom: Number(c.zoom || 13),
	mapTypeControl: false,
	streetViewControl: false,
	});

	const bounds = new google.maps.LatLngBounds();

	(OPENDX.facilities || []).forEach(f => {
	const id = Number(f.id);
	const lat = Number(f.lat), lng = Number(f.lng);
	if (!isFinite(lat) || !isFinite(lng)) return;

	const pos = { lat, lng };
	const marker = new google.maps.Marker({ position: pos, map, title: f.name || '' });
	markers.set(id, marker);

	const html = `
		<div style="max-width:260px">
		<div class="fw-bold mb-1">${escapeHtml(f.name || '')}</div>
		${f.palliative_outpatient_name ? `<div>外来: ${escapeHtml(f.palliative_outpatient_name)}</div>` : ''}
		${f.bed_count ? `<div>病床数: ${f.bed_count}</div>` : ''}
		${Number(f.is_cancer_coop) ? `<div>がん診療連携: 有</div>` : ''}
		${f.remark ? `<div class="text-muted small">備考: ${escapeHtml(f.remark)}</div>` : ''}
		</div>`;
	const iw = new google.maps.InfoWindow({ content: html });
	infoWins.set(id, iw);

	marker.addListener('click', () => {
		iw.open({ anchor: marker, map });
	});

	bounds.extend(pos);
	});

	if (!bounds.isEmpty()) {
	map.fitBounds(bounds);
	google.maps.event.addListenerOnce(map, 'bounds_changed', () => {
		if (map.getZoom() > 16) map.setZoom(16);
	});
	}

	wireCheckboxHandlers();
}

function escapeHtml(text) {
	const div = document.createElement('div');
	div.innerText = text;
	return div.innerHTML;
}

/** チェックボックスイベントに対応してピン表示切替 */
function wireCheckboxHandlers() {
	document.querySelectorAll('.chk-facility').forEach(cb => {
	cb.addEventListener('change', e => {
		const id = Number(e.target.value);
		const marker = markers.get(id);
		if (marker) {
		if (e.target.checked) marker.setMap(map);
		else marker.setMap(null);
		}
	});
	});

	// 全選択 / 全解除
	document.getElementById('btn-check-all')?.addEventListener('click', () => {
	document.querySelectorAll('.chk-facility').forEach(cb => {
		cb.checked = true;
		markers.get(Number(cb.value))?.setMap(map);
	});
	});

	document.getElementById('btn-uncheck-all')?.addEventListener('click', () => {
	document.querySelectorAll('.chk-facility').forEach(cb => {
		cb.checked = false;
		markers.get(Number(cb.value))?.setMap(null);
	});
	});
}
</script>

<script async
src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google.maps_api_key') }}&callback=initOpendxMap&loading=async">
</script>
@endpush