Spaces:

sksameermujahid
/

propertyverification

Running

App Files Files Community

propertyverification / templates /index2.html

sksameermujahid

Upload 34 files

9860c76 verified 17 days ago

raw

history blame contribute delete

119 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI Property Verifier</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<style>
	:root {
	--primary: #4361ee;
	--secondary: #3f37c9;
	--success: #4cc9f0;
	--danger: #f72585;
	--warning: #f8961e;
	--info: #4895ef;
	--light: #f8f9fa;
	--dark: #212529;
	--gray: #6c757d;
	--border-radius: 12px;
	--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Poppins', sans-serif;
	background-color: #f5f7fa;
	color: #333;
	line-height: 1.6;
	padding: 20px;
	}

	.container {
	max-width: 1200px;
	margin: 0 auto;
	}

	header {
	text-align: center;
	margin-bottom: 30px;
	}

	h1 {
	font-size: 2.5rem;
	color: var(--primary);
	margin-bottom: 10px;
	}

	.subtitle {
	font-size: 1.1rem;
	color: var(--gray);
	}

	.card {
	background: white;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	padding: 25px;
	margin-bottom: 25px;
	}

	.card-header {
	border-bottom: 1px solid #eee;
	padding-bottom: 15px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.card-title {
	font-size: 1.5rem;
	color: var(--dark);
	font-weight: 600;
	}

	.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	}

	.form-group {
	margin-bottom: 20px;
	}

	.form-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: var(--dark);
	}

	.form-control {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid #ddd;
	border-radius: var(--border-radius);
	font-size: 1rem;
	transition: border-color 0.3s;
	}

	.form-control:focus {
	border-color: var(--primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
	}

	textarea.form-control {
	min-height: 100px;
	resize: vertical;
	}

	.btn {
	display: inline-block;
	padding: 12px 24px;
	background-color: var(--primary);
	color: white;
	border: none;
	border-radius: var(--border-radius);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s;
	}

	.btn:hover {
	background-color: var(--secondary);
	transform: translateY(-2px);
	}

	.btn-block {
	display: block;
	width: 100%;
	}

	.section-title {
	font-size: 1.2rem;
	color: var(--primary);
	margin-bottom: 15px;
	font-weight: 600;
	}

	.results-container {
	display: none;
	margin-top: 30px;
	}

	.results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
	gap: 25px;
	}


	.result-card {
	background: white;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	padding: 20px;
	height: 100%;
	}

	.result-header {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	}

	.result-icon {
	width: 40px;
	height: 40px;
	background-color: var(--light);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	}

	.result-title {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--dark);
	}

	.trust-score {
	text-align: center;
	padding: 20px;
	}

	.score-value {
	font-size: 3rem;
	font-weight: 700;
	color: var(--primary);
	}

	.score-label {
	font-size: 1rem;
	color: var(--gray);
	}

	.progress-container {
	margin: 15px 0;
	}

	.progress-bar {
	height: 10px;
	background-color: #eee;
	border-radius: 5px;
	overflow: hidden;
	}

	.progress-fill {
	height: 100%;
	background-color: var(--primary);
	border-radius: 5px;
	transition: width 0.5s ease-in-out;
	}

	.alert {
	padding: 15px;
	border-radius: var(--border-radius);
	margin-bottom: 20px;
	font-weight: 500;
	}

	.alert-danger {
	background-color: rgba(247, 37, 133, 0.1);
	color: var(--danger);
	border-left: 4px solid var(--danger);
	}

	.alert-warning {
	background-color: rgba(248, 150, 30, 0.1);
	color: var(--warning);
	border-left: 4px solid var(--warning);
	}

	.alert-success {
	background-color: rgba(76, 201, 240, 0.1);
	color: var(--success);
	border-left: 4px solid var(--success);
	}

	.suggestion-list {
	list-style-type: none;
	padding: 0;
	}

	.suggestion-item {
	padding: 10px 15px;
	background-color: rgba(67, 97, 238, 0.05);
	border-radius: var(--border-radius);
	margin-bottom: 10px;
	border-left: 3px solid var(--primary);
	}

	.image-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
	}

	.preview-item {
	width: 100px;
	height: 100px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	}

	.preview-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

	.preview-remove {
	position: absolute;
	top: 5px;
	right: 5px;
	background: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	}

	.loading {
	display: none;
	text-align: center;
	padding: 30px;
	}

	.spinner {
	width: 50px;
	height: 50px;
	border: 5px solid rgba(67, 97, 238, 0.1);
	border-radius: 50%;
	border-top-color: var(--primary);
	animation: spin 1s ease-in-out infinite;
	margin: 0 auto 20px;
	}

	@keyframes spin {
	to { transform: rotate(360deg); }
	}

	.chart-container {
	position: relative;
	height: 200px;
	margin-bottom: 20px;
	}

	.pdf-preview {
	background-color: #f8f9fa;
	padding: 15px;
	border-radius: var(--border-radius);
	margin-top: 10px;
	max-height: 200px;
	overflow-y: auto;
	}

	.pdf-filename {
	font-weight: 500;
	margin-bottom: 5px;
	}

	.image-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 15px;
	margin-top: 20px;
	}

	.gallery-item {
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: var(--box-shadow);
	aspect-ratio: 1;
	}

	.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

	.badge {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 500;
	margin-right: 5px;
	margin-bottom: 5px;
	}

	.badge-primary { background-color: rgba(67, 97, 238, 0.1); color: var(--primary); }
	.badge-success { background-color: rgba(76, 201, 240, 0.1); color: var(--success); }
	.badge-warning { background-color: rgba(248, 150, 30, 0.1); color: var(--warning); }
	.badge-danger { background-color: rgba(247, 37, 133, 0.1); color: var(--danger); }

	.explanation-box {
	background-color: #f8f9fa;
	border-radius: var(--border-radius);
	padding: 15px;
	margin-top: 15px;
	border-left: 4px solid var(--info);
	}

	.explanation-title {
	font-weight: 600;
	color: var(--info);
	margin-bottom: 10px;
	}

	@media (max-width: 768px) {
	.form-grid, .results-grid {
	grid-template-columns: 1fr;
	}

	.card {
	padding: 15px;
	}
	}

	.property-summary {
	padding: 15px;
	}

	.property-details p {
	margin-bottom: 8px;
	}

	.final-verdict {
	padding: 15px;
	}

	.verdict-box {
	display: flex;
	align-items: center;
	padding: 15px;
	border-radius: var(--border-radius);
	margin-bottom: 15px;
	background-color: #f8f9fa;
	}

	.verdict-icon {
	font-size: 2rem;
	margin-right: 15px;
	}

	.verdict-text {
	font-size: 1.2rem;
	font-weight: 600;
	}

	.verdict-legitimate {
	background-color: rgba(76, 201, 240, 0.1);
	border-left: 4px solid var(--success);
	}

	.verdict-suspicious {
	background-color: rgba(248, 150, 30, 0.1);
	border-left: 4px solid var(--warning);
	}

	.verdict-fraudulent {
	background-color: rgba(247, 37, 133, 0.1);
	border-left: 4px solid var(--danger);
	}

	.verification-scores {
	padding: 15px;
	}

	.score-item {
	margin-bottom: 15px;
	}

	.score-label {
	font-weight: 500;
	margin-bottom: 5px;
	}

	.score-bar-container {
	display: flex;
	align-items: center;
	}

	.score-bar {
	height: 10px;
	background-color: #e9ecef;
	border-radius: 5px;
	flex-grow: 1;
	margin-right: 10px;
	position: relative;
	overflow: hidden;
	}

	.score-bar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-color: var(--primary);
	border-radius: 5px;
	width: 0%;
	transition: width 0.5s ease;
	}

	.score-value {
	font-weight: 600;
	min-width: 40px;
	text-align: right;
	}

	.red-flags {
	padding: 15px;
	}

	.verdict-score {
	text-align: center;
	margin: 15px 0;
	padding: 10px;
	background-color: rgba(67, 97, 238, 0.05);
	border-radius: var(--border-radius);
	}

	.verdict-details {
	margin-top: 20px;
	}

	.verdict-section {
	margin-bottom: 15px;
	padding: 10px;
	border-radius: var(--border-radius);
	}

	.verdict-section h4 {
	font-size: 1rem;
	margin-bottom: 10px;
	color: var(--dark);
	}

	#criticalIssuesSection {
	background-color: rgba(247, 37, 133, 0.05);
	border-left: 4px solid var(--danger);
	}

	#warningsSection {
	background-color: rgba(248, 150, 30, 0.05);
	border-left: 4px solid var(--warning);
	}

	#recommendationsSection {
	background-color: rgba(76, 201, 240, 0.05);
	border-left: 4px solid var(--success);
	}

	.price-analysis-content {
	padding: 15px;
	}

	.price-overview {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: var(--border-radius);
	}

	.price-main {
	display: flex;
	gap: 20px;
	}

	.price-value, .price-assessment {
	display: flex;
	flex-direction: column;
	}

	.label {
	font-size: 0.9rem;
	color: var(--gray);
	}

	.value {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--dark);
	}

	.price-confidence {
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.confidence-bar {
	width: 100px;
	height: 8px;
	background: #e9ecef;
	border-radius: 4px;
	overflow: hidden;
	}

	.confidence-fill {
	height: 100%;
	background: var(--primary);
	transition: width 0.3s ease;
	}

	.confidence-value {
	font-size: 0.9rem;
	color: var(--gray);
	}

	.price-details {
	display: grid;
	gap: 20px;
	}

	.price-ranges, .market-trends, .price-factors, .risk-indicators {
	background: white;
	padding: 15px;
	border-radius: var(--border-radius);
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	}

	.range-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin-top: 10px;
	}

	.range-item {
	padding: 10px;
	border-radius: var(--border-radius);
	text-align: center;
	}

	.range-item.budget {
	background: #e3f2fd;
	}

	.range-item.mid-range {
	background: #f3e5f5;
	}

	.range-item.premium {
	background: #fff3e0;
	}

	.range-label {
	display: block;
	font-size: 0.9rem;
	color: var(--gray);
	margin-bottom: 5px;
	}

	.range-value {
	font-weight: 600;
	color: var(--dark);
	}

	.trend-info {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	margin-top: 10px;
	}

	.trend-item {
	display: flex;
	flex-direction: column;
	}

	.trend-label {
	font-size: 0.9rem;
	color: var(--gray);
	}

	.trend-value {
	font-weight: 600;
	color: var(--dark);
	}

	.factors-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin-top: 10px;
	}

	.factor-item {
	padding: 10px;
	background: #f8f9fa;
	border-radius: var(--border-radius);
	}

	.factor-label {
	display: block;
	font-size: 0.9rem;
	color: var(--gray);
	margin-bottom: 5px;
	}

	.factor-details {
	display: flex;
	flex-direction: column;
	gap: 5px;
	}

	.factor-value {
	font-weight: 600;
	color: var(--dark);
	}

	.factor-impact {
	font-size: 0.8rem;
	color: var(--gray);
	}

	.risk-list {
	list-style: none;
	padding: 0;
	margin: 10px 0 0 0;
	}

	.risk-list li {
	padding: 8px 12px;
	margin-bottom: 5px;
	background: #fff3e0;
	border-radius: var(--border-radius);
	font-size: 0.9rem;
	color: #e65100;
	}

	h4 {
	font-size: 1.1rem;
	color: var(--primary);
	margin-bottom: 10px;
	}

	.fraud-analysis-content {
	padding: 20px;
	}

	.fraud-overview {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: var(--border-radius);
	}

	.fraud-main {
	display: flex;
	gap: 20px;
	}

	.fraud-status, .fraud-confidence {
	display: flex;
	flex-direction: column;
	}

	.fraud-score {
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.score-bar {
	width: 100px;
	height: 8px;
	background: #e9ecef;
	border-radius: 4px;
	overflow: hidden;
	}

	.score-fill {
	height: 100%;
	background: var(--primary);
	transition: width 0.3s ease;
	}

	.risk-levels {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 20px;
	}

	.risk-section {
	padding: 15px;
	border-radius: var(--border-radius);
	background: white;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	}

	.risk-section.high-risk {
	border-left: 4px solid var(--danger);
	}

	.risk-section.medium-risk {
	border-left: 4px solid var(--warning);
	}

	.risk-section.low-risk {
	border-left: 4px solid var(--success);
	}

	.risk-list {
	list-style: none;
	padding: 0;
	margin: 10px 0 0 0;
	}

	.risk-list li {
	padding: 8px 12px;
	margin-bottom: 5px;
	border-radius: var(--border-radius);
	font-size: 0.9rem;
	}

	.high-risk .risk-list li {
	background: rgba(247, 37, 133, 0.1);
	color: var(--danger);
	}

	.medium-risk .risk-list li {
	background: rgba(248, 150, 30, 0.1);
	color: var(--warning);
	}

	.low-risk .risk-list li {
	background: rgba(76, 201, 240, 0.1);
	color: var(--success);
	}

	.fraud-chart-container {
	margin: 20px 0;
	height: 200px;
	}

	.fraud-reasoning {
	background: #f8f9fa;
	padding: 15px;
	border-radius: var(--border-radius);
	margin-top: 20px;
	}

	.reasoning-text {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--gray);
	}

	.image-analysis-summary {
	background: #f8f9fa;
	padding: 15px;
	border-radius: var(--border-radius);
	margin-bottom: 20px;
	}

	.image-container {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	border-radius: var(--border-radius);
	}

	.image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

	.image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10px;
	opacity: 0;
	transition: opacity 0.3s ease;
	}

	.gallery-item:hover .image-overlay {
	opacity: 1;
	}

	.confidence-score {
	color: white;
	font-size: 0.9rem;
	text-align: right;
	}

	.analysis-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
	margin-top: 20px;
	}

	.analysis-item {
	background: white;
	padding: 15px;
	border-radius: var(--border-radius);
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	}
	</style>
	</head>
	<body>
	<div class="container">
	<header>
	<h1>AI Property Verifier & Fraud Detection</h1>
	<p class="subtitle">Powered by advanced AI models to verify property listings and detect potential fraud</p>
	</header>

	<div class="card">
	<div class="card-header">
	<h2 class="card-title">Property Details</h2>
	</div>

	<form id="propertyForm">
	<div class="section-title">Basic Information</div>
	<div class="form-grid">
	<div class="form-group">
	<label class="form-label" for="propertyName">Property Name</label>
	<input type="text" class="form-control" id="propertyName" name="property_name" required>
	</div>

	<div class="form-group">
	<label class="form-label" for="propertyType">Property Type</label>
	<select class="form-control" id="propertyType" name="property_type" required>
	<option value="">Select Type</option>
	<option value="Apartment">Apartment</option>
	<option value="House">House</option>
	<option value="Condo">Condo</option>
	<option value="Townhouse">Townhouse</option>
	<option value="Villa">Villa</option>
	<option value="Land">Land</option>
	<option value="Commercial">Commercial</option>
	<option value="Other">Other</option>
	</select>
	</div>

	<div class="form-group">
	<label class="form-label" for="status">Status</label>
	<select class="form-control" id="status" name="status" required>
	<option value="">Select Status</option>
	<option value="For Sale">For Sale</option>
	<option value="For Rent">For Rent</option>
	<option value="Sold">Sold</option>
	<option value="Under Contract">Under Contract</option>
	<option value="Pending">Pending</option>
	</select>
	</div>
	</div>

	<div class="form-group">
	<label class="form-label" for="description">Property Description</label>
	<textarea class="form-control" id="description" name="description" rows="4" required></textarea>
	</div>

	<div class="section-title">Location Details</div>
	<div class="form-grid">
	<div class="form-group">
	<label class="form-label" for="address">Address</label>
	<input type="text" class="form-control" id="address" name="address" required>
	</div>

	<div class="form-group">
	<label class="form-label" for="city">City</label>
	<input type="text" class="form-control" id="city" name="city" required>
	</div>

	<div class="form-group">
	<label class="form-label" for="state">State/Province</label>
	<input type="text" class="form-control" id="state" name="state" required>
	</div>

	<div class="form-group">
	<label class="form-label" for="country">Country</label>
	<input type="text" class="form-control" id="country" name="country" required>
	</div>

	<div class="form-group">
	<label class="form-label" for="zip">Zip/Postal Code</label>
	<input type="text" class="form-control" id="zip" name="zip" required>
	</div>

	<div class="form-group">
	<label class="form-label" for="latitude">Latitude</label>
	<input type="text" class="form-control" id="latitude" name="latitude" placeholder="e.g. 40.7128">
	</div>

	<div class="form-group">
	<label class="form-label" for="longitude">Longitude</label>
	<input type="text" class="form-control" id="longitude" name="longitude" placeholder="e.g. -74.0060">
	</div>
	</div>

	<div class="section-title">Property Specifications</div>
	<div class="form-grid">
	<div class="form-group">
	<label class="form-label" for="bedrooms">Bedrooms</label>
	<input type="number" class="form-control" id="bedrooms" name="bedrooms" min="0">
	</div>

	<div class="form-group">
	<label class="form-label" for="bathrooms">Bathrooms</label>
	<input type="number" class="form-control" id="bathrooms" name="bathrooms" min="0" step="0.5">
	</div>

	<div class="form-group">
	<label class="form-label" for="totalRooms">Total Rooms</label>
	<input type="number" class="form-control" id="totalRooms" name="total_rooms" min="0">
	</div>

	<div class="form-group">
	<label class="form-label" for="yearBuilt">Year Built</label>
	<input type="number" class="form-control" id="yearBuilt" name="year_built" min="1800" max="2100">
	</div>

	<div class="form-group">
	<label class="form-label" for="parking">Parking Spaces</label>
	<input type="number" class="form-control" id="parking" name="parking" min="0">
	</div>

	<div class="form-group">
	<label class="form-label" for="sqFt">Square Feet</label>
	<input type="text" class="form-control" id="sqFt" name="sq_ft" min="0">
	</div>

	<div class="form-group">
	<label class="form-label" for="marketValue">Market Value</label>
	<input type="text" class="form-control" id="marketValue" name="market_value" min="0">
	</div>
	</div>

	<div class="form-group">
	<label class="form-label" for="amenities">Amenities (comma separated)</label>
	<input type="text" class="form-control" id="amenities" name="amenities" placeholder="e.g. Pool, Gym, Garden, Garage">
	</div>

	<div class="form-group">
	<label class="form-label" for="nearbyLandmarks">Nearby Landmarks</label>
	<input type="text" class="form-control" id="nearbyLandmarks" name="nearby_landmarks" placeholder="e.g. School, Hospital, Park, Shopping Mall">
	</div>

	<div class="form-group">
	<label class="form-label" for="legalDetails">Legal & Infrastructure Details</label>
	<textarea class="form-control" id="legalDetails" name="legal_details" rows="3" placeholder="Include zoning, permits, utilities, etc."></textarea>
	</div>

	<div class="section-title">Documents & Images</div>
	<div class="form-group">
	<label class="form-label" for="images">Upload Images (JPG/PNG)</label>
	<input type="file" class="form-control" id="images" name="images" accept="image/jpeg, image/png" multiple>
	<div class="image-preview" id="imagePreview"></div>
	</div>

	<div class="form-group">
	<label class="form-label" for="documents">Upload Documents (PDF)</label>
	<input type="file" class="form-control" id="documents" name="documents" accept="application/pdf" multiple>
	<div id="pdfPreview"></div>
	</div>

	<div class="form-group">
	<button type="submit" class="btn btn-block" id="submitBtn">Verify Property with AI</button>
	</div>
	</form>
	</div>

	<div class="loading" id="loadingIndicator">
	<div class="spinner"></div>
	<p>AI models are analyzing your property data...</p>
	<p class="subtitle">This may take a moment as we're processing multiple AI models</p>
	</div>

	<div class="results-container" id="resultsContainer">
	<div class="card">
	<div class="card-header">
	<h2 class="card-title">AI Verification Results</h2>
	</div>

	<div class="results-grid">
	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">🏠</div>
	<div class="result-title">Property Summary</div>
	</div>
	<div class="property-summary">
	<h3 id="propertyTitle">Property Details</h3>
	<div class="property-details">
	<p><strong>Name:</strong> <span id="summaryName"></span></p>
	<p><strong>Type:</strong> <span id="summaryType"></span></p>
	<p><strong>Status:</strong> <span id="summaryStatus"></span></p>
	<p><strong>Location:</strong> <span id="summaryLocation"></span></p>
	<p><strong>Price:</strong> <span id="summaryPrice"></span></p>
	<p><strong>Size:</strong> <span id="summarySize"></span></p>
	<p><strong>Bedrooms/Bathrooms:</strong> <span id="summaryRooms"></span></p>
	</div>
	</div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">⚠️</div>
	<div class="result-title">Final Verdict</div>
	</div>
	<div class="final-verdict" id="finalVerdict">
	<div class="verdict-box" id="verdictBox">
	<div class="verdict-icon" id="verdictIcon">⏳</div>
	<div class="verdict-text" id="verdictText">Analysis in progress...</div>
	</div>
	<div class="verdict-score">
	<div class="score-label">Overall Score</div>
	<div class="score-value" id="verdictScoreValue">--</div>
	<div class="progress-container">
	<div class="progress-bar">
	<div class="progress-fill" id="verdictScoreBar" style="width: 0%"></div>
	</div>
	</div>
	</div>
	<div class="verdict-details">
	<div class="verdict-section" id="criticalIssuesSection">
	<h4>Critical Issues</h4>
	<ul id="criticalIssuesList" class="suggestion-list">
	<!-- Will be populated by JavaScript -->
	</ul>
	</div>
	<div class="verdict-section" id="warningsSection">
	<h4>Warnings</h4>
	<ul id="warningsList" class="suggestion-list">
	<!-- Will be populated by JavaScript -->
	</ul>
	</div>
	<div class="verdict-section" id="recommendationsSection">
	<h4>Recommendations</h4>
	<ul id="recommendationsList" class="suggestion-list">
	<!-- Will be populated by JavaScript -->
	</ul>
	</div>
	</div>
	</div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">🔍</div>
	<div class="result-title">Detailed Verification</div>
	</div>
	<div class="verification-scores">
	<div class="score-item">
	<div class="score-label">Trust Score</div>
	<div class="score-bar-container">
	<div class="score-bar" id="trustBar"></div>
	<div class="score-value" id="trustValue">--</div>
	</div>
	</div>
	<div class="score-item">
	<div class="score-label">Image Authenticity</div>
	<div class="score-bar-container">
	<div class="score-bar" id="imageBar"></div>
	<div class="score-value" id="imageValue">--</div>
	</div>
	</div>
	<div class="score-item">
	<div class="score-label">Document Verification</div>
	<div class="score-bar-container">
	<div class="score-bar" id="documentBar"></div>
	<div class="score-value" id="documentValue">--</div>
	</div>
	</div>
	<div class="score-item">
	<div class="score-label">Content Quality</div>
	<div class="score-bar-container">
	<div class="score-bar" id="contentBar"></div>
	<div class="score-value" id="contentValue">--</div>
	</div>
	</div>
	<div class="score-item">
	<div class="score-label">Location Accuracy</div>
	<div class="score-bar-container">
	<div class="score-bar" id="locationBar"></div>
	<div class="score-value" id="locationValue">--</div>
	</div>
	</div>
	</div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">🚩</div>
	<div class="result-title">Red Flags</div>
	</div>
	<div class="red-flags">
	<ul id="redFlagsList" class="suggestion-list">
	<!-- Will be populated by JavaScript -->
	</ul>
	</div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">📊</div>
	<div class="result-title">Trust Score</div>
	</div>
	<div class="trust-score">
	<div class="score-value" id="trustScoreValue">--</div>
	<div class="score-label">Trust Score</div>
	<div class="progress-container">
	<div class="progress-bar">
	<div class="progress-fill" id="trustScoreBar" style="width: 0%"></div>
	</div>
	</div>
	</div>
	<div class="chart-container">
	<canvas id="trustScoreChart"></canvas>
	</div>
	<div class="explanation-box">
	<div class="explanation-title">AI Reasoning</div>
	<div id="trustReasoning"></div>
	</div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">🔍</div>
	<div class="result-title">Fraud Analysis</div>
	</div>
	<div id="fraudAlertContainer" class="fraud-analysis-content">
	<div class="fraud-overview">
	<div class="fraud-main">
	<div class="fraud-status">
	<span class="label">Alert Level</span>
	<span class="value" id="fraud-alert-level">Unknown</span>
	</div>
	<div class="fraud-confidence">
	<span class="label">Confidence</span>
	<span class="value" id="fraud-confidence">0%</span>
	</div>
	</div>
	<div class="fraud-score">
	<div class="score-bar">
	<div class="score-fill" id="fraud-score-bar"></div>
	</div>
	<span class="score-value" id="fraud-score-value">0%</span>
	</div>
	</div>

	<div class="fraud-details">
	<div class="risk-levels">
	<div class="risk-section high-risk">
	<h4>High Risk Indicators</h4>
	<ul id="high-risk-list" class="risk-list">
	<!-- Will be populated dynamically -->
	</ul>
	</div>
	<div class="risk-section medium-risk">
	<h4>Medium Risk Indicators</h4>
	<ul id="medium-risk-list" class="risk-list">
	<!-- Will be populated dynamically -->
	</ul>
	</div>
	<div class="risk-section low-risk">
	<h4>Low Risk Indicators</h4>
	<ul id="low-risk-list" class="risk-list">
	<!-- Will be populated dynamically -->
	</ul>
	</div>
	</div>

	<div class="fraud-chart-container">
	<canvas id="fraudAnalysisChart"></canvas>
	</div>

	<div class="fraud-reasoning">
	<h4>AI Reasoning</h4>
	<div id="fraudReasoning" class="reasoning-text">
	<!-- Will be populated dynamically -->
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">📝</div>
	<div class="result-title">AI Summary</div>
	</div>
	<div id="aiSummary"></div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">💡</div>
	<div class="result-title">Improvement Suggestions</div>
	</div>
	<div id="improvementSuggestions"></div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">🏠</div>
	<div class="result-title">Property Quality Assessment</div>
	</div>
	<div id="qualityAssessment"></div>
	<div class="chart-container">
	<canvas id="qualityChart"></canvas>
	</div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">📍</div>
	<div class="result-title">Location Analysis</div>
	</div>
	<div id="locationAnalysis"></div>
	<div class="chart-container">
	<canvas id="locationChart"></canvas>
	</div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">💰</div>
	<div class="result-title">Price Analysis</div>
	</div>
	<div id="priceAnalysis"></div>
	<div class="chart-container">
	<canvas id="priceChart"></canvas>
	</div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">⚖️</div>
	<div class="result-title">Legal Analysis</div>
	</div>
	<div id="legalAnalysis"></div>
	<div class="chart-container">
	<canvas id="legalChart"></canvas>
	</div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">🔄</div>
	<div class="result-title">Cross-Validation Checks</div>
	</div>
	<div id="crossValidation"></div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">📄</div>
	<div class="result-title">Document Analysis</div>
	</div>
	<div id="documentAnalysis"></div>
	<div class="chart-container">
	<canvas id="documentChart"></canvas>
	</div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">🖼️</div>
	<div class="result-title">Image Analysis</div>
	</div>
	<div id="imageAnalysis"></div>
	<div class="image-gallery" id="imageGallery"></div>
	</div>

	<div class="result-card">
	<div class="result-header">
	<div class="result-icon">
	<i class="fas fa-chart-line"></i>
	</div>
	<h3 class="result-title">Price Analysis</h3>
	</div>
	<div class="price-analysis-content">
	<div class="price-overview">
	<div class="price-main">
	<div class="price-value">
	<span class="label">Price per sq.ft.</span>
	<span class="value" id="price-per-sqft">₹0</span>
	</div>
	<div class="price-assessment">
	<span class="label">Assessment</span>
	<span class="value" id="price-assessment">Unknown</span>
	</div>
	</div>
	<div class="price-confidence">
	<div class="confidence-bar">
	<div class="confidence-fill" id="price-confidence-bar"></div>
	</div>
	<span class="confidence-value" id="price-confidence-value">0%</span>
	</div>
	</div>

	<div class="price-details">
	<div class="price-ranges">
	<h4>Price Ranges</h4>
	<div class="range-grid">
	<div class="range-item budget">
	<span class="range-label">Budget</span>
	<span class="range-value" id="budget-range">₹0 - ₹0</span>
	</div>
	<div class="range-item mid-range">
	<span class="range-label">Mid-Range</span>
	<span class="range-value" id="mid-range">₹0 - ₹0</span>
	</div>
	<div class="range-item premium">
	<span class="range-label">Premium</span>
	<span class="range-value" id="premium-range">₹0 - ₹0</span>
	</div>
	</div>
	</div>

	<div class="market-trends">
	<h4>Market Trends</h4>
	<div class="trend-info">
	<div class="trend-item">
	<span class="trend-label">City Tier</span>
	<span class="trend-value" id="city-tier">Unknown</span>
	</div>
	<div class="trend-item">
	<span class="trend-label">Price Trend</span>
	<span class="trend-value" id="price-trend">Unknown</span>
	</div>
	<div class="trend-item">
	<span class="trend-label">Market Average</span>
	<span class="trend-value" id="market-average">₹0</span>
	</div>
	<div class="trend-item">
	<span class="trend-label">Deviation</span>
	<span class="trend-value" id="price-deviation">0%</span>
	</div>
	</div>
	</div>

	<div class="price-factors">
	<h4>Price Factors</h4>
	<div class="factors-grid">
	<div class="factor-item">
	<span class="factor-label">Property Age</span>
	<div class="factor-details" id="age-factor">
	<span class="factor-value">Unknown</span>
	<span class="factor-impact">Impact: Unknown</span>
	</div>
	</div>
	<div class="factor-item">
	<span class="factor-label">Size Efficiency</span>
	<div class="factor-details" id="size-factor">
	<span class="factor-value">Unknown</span>
	<span class="factor-impact">Impact: Unknown</span>
	</div>
	</div>
	<div class="factor-item">
	<span class="factor-label">Amenities</span>
	<div class="factor-details" id="amenities-factor">
	<span class="factor-value">Unknown</span>
	<span class="factor-impact">Impact: Unknown</span>
	</div>
	</div>
	</div>
	</div>

	<div class="risk-indicators">
	<h4>Risk Indicators</h4>
	<ul class="risk-list" id="risk-indicators">
	<!-- Risk indicators will be populated dynamically -->
	</ul>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	// Global variables to store form data
	let uploadedImages = [];
	let uploadedPDFs = [];

	// Initialize charts
	let trustScoreChart;
	let fraudAnalysisChart;
	let qualityChart;
	let locationChart;
	let priceChart;
	let legalChart;
	let documentChart;

	document.addEventListener('DOMContentLoaded', function() {
	// Request location access when page loads
	requestLocationAccess();

	const propertyForm = document.getElementById('propertyForm');
	const loadingIndicator = document.getElementById('loadingIndicator');
	const resultsContainer = document.getElementById('resultsContainer');
	const imageInput = document.getElementById('images');
	const imagePreview = document.getElementById('imagePreview');
	const pdfInput = document.getElementById('documents');
	const pdfPreview = document.getElementById('pdfPreview');

	// Handle image uploads
	imageInput.addEventListener('change', function(e) {
	handleImageUpload(e.target.files);
	});

	// Handle PDF uploads
	pdfInput.addEventListener('change', function(e) {
	handlePDFUpload(e.target.files);
	});

	// Form submission
	propertyForm.addEventListener('submit', function(e) {
	e.preventDefault();
	submitForm();
	});

	// Initialize charts
	initCharts();
	});

	function requestLocationAccess() {
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(
	function(position) {
	const latitude = position.coords.latitude;
	const longitude = position.coords.longitude;

	// Update form fields with coordinates
	document.getElementById('latitude').value = latitude;
	document.getElementById('longitude').value = longitude;

	// Send to backend to get address details
	fetch('/get-location', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify({
	latitude: latitude,
	longitude: longitude
	}),
	})
	.then(response => response.json())
	.then(data => {
	if (data.status === 'success') {
	// Fill form fields with location data
	document.getElementById('address').value = data.address \|\| '';
	document.getElementById('city').value = data.city \|\| '';
	document.getElementById('state').value = data.state \|\| '';
	document.getElementById('country').value = data.country \|\| '';
	document.getElementById('zip').value = data.postal_code \|\| '';

	console.log('Location data loaded successfully');
	} else {
	console.error('Error getting location details:', data.message);
	}
	})
	.catch(error => {
	console.error('Error getting location details:', error);
	});
	},
	function(error) {
	console.error('Error getting location:', error.message);
	// Show a message to the user about location access
	const locationMessage = document.createElement('div');
	locationMessage.className = 'alert alert-warning';
	locationMessage.innerHTML = 'Location access denied or unavailable. Please enter your location manually.';
	document.querySelector('.container').prepend(locationMessage);

	// Auto-remove the message after 5 seconds
	setTimeout(() => {
	locationMessage.remove();
	}, 5000);
	},
	{
	enableHighAccuracy: true,
	timeout: 5000,
	maximumAge: 0
	}
	);
	} else {
	console.error('Geolocation is not supported by this browser');
	}
	}

	function handleImageUpload(files) {
	const imagePreview = document.getElementById('imagePreview');
	imagePreview.innerHTML = ''; // Clear existing previews
	uploadedImages = []; // Reset uploaded images array

	for (let i = 0; i < files.length; i++) {
	const file = files[i];
	if (!file.type.match('image.*')) continue;

	const reader = new FileReader();
	reader.onload = function(e) {
	const imageData = e.target.result;
	uploadedImages.push({
	name: file.name,
	data: imageData,
	file: file
	});

	// Create preview
	const previewItem = document.createElement('div');
	previewItem.className = 'preview-item';
	previewItem.innerHTML = `
	<img src="${imageData}" alt="${file.name}">
	<button type="button" class="preview-remove" data-index="${uploadedImages.length - 1}">×</button>
	`;
	imagePreview.appendChild(previewItem);

	// Add remove functionality
	previewItem.querySelector('.preview-remove').addEventListener('click', function() {
	const index = parseInt(this.getAttribute('data-index'));
	uploadedImages.splice(index, 1);
	imagePreview.removeChild(previewItem);
	updateImagePreviews();
	});
	};
	reader.readAsDataURL(file);
	}
	}

	function updateImagePreviews() {
	const imagePreview = document.getElementById('imagePreview');
	imagePreview.innerHTML = '';

	uploadedImages.forEach((image, index) => {
	const previewItem = document.createElement('div');
	previewItem.className = 'preview-item';
	previewItem.innerHTML = `
	<img src="${image.data}" alt="${image.name}">
	<button type="button" class="preview-remove" data-index="${index}">×</button>
	`;
	imagePreview.appendChild(previewItem);

	previewItem.querySelector('.preview-remove').addEventListener('click', function() {
	uploadedImages.splice(index, 1);
	updateImagePreviews();
	});
	});
	}

	function handlePDFUpload(files) {
	const pdfPreview = document.getElementById('pdfPreview');
	pdfPreview.innerHTML = ''; // Clear existing previews
	uploadedPDFs = []; // Reset uploaded PDFs array

	for (let i = 0; i < files.length; i++) {
	const file = files[i];
	if (file.type !== 'application/pdf') continue;

	uploadedPDFs.push({
	name: file.name,
	file: file
	});

	// Create preview
	const previewItem = document.createElement('div');
	previewItem.className = 'pdf-preview';
	previewItem.innerHTML = `
	<div class="pdf-filename">${file.name}</div>
	<button type="button" class="btn" data-index="${uploadedPDFs.length - 1}">Remove</button>
	`;
	pdfPreview.appendChild(previewItem);

	// Add remove functionality
	previewItem.querySelector('.btn').addEventListener('click', function() {
	const index = parseInt(this.getAttribute('data-index'));
	uploadedPDFs.splice(index, 1);
	pdfPreview.removeChild(previewItem);
	updatePDFPreviews();
	});
	}
	}

	function updatePDFPreviews() {
	const pdfPreview = document.getElementById('pdfPreview');
	pdfPreview.innerHTML = '';

	uploadedPDFs.forEach((pdf, index) => {
	const previewItem = document.createElement('div');
	previewItem.className = 'pdf-preview';
	previewItem.innerHTML = `
	<div class="pdf-filename">${pdf.name}</div>
	<button type="button" class="btn" data-index="${index}">Remove</button>
	`;
	pdfPreview.appendChild(previewItem);

	previewItem.querySelector('.btn').addEventListener('click', function() {
	uploadedPDFs.splice(index, 1);
	updatePDFPreviews();
	});
	});
	}

	function initCharts() {
	try {
	// Store all charts in an array for easier management
	window.charts = [];

	// Trust Score Chart initialization
	const trustCtx = document.getElementById('trustScoreChart').getContext('2d');
	trustScoreChart = new Chart(trustCtx, {
	type: 'doughnut',
	data: {
	datasets: [{
	data: [0, 100],
	backgroundColor: [
	'#4361ee',
	'#f1f1f1'
	],
	borderWidth: 0
	}]
	},
	options: {
	cutout: '70%',
	circumference: 180,
	rotation: -90,
	plugins: {
	legend: {
	display: false
	},
	tooltip: {
	enabled: false
	}
	},
	maintainAspectRatio: false
	}
	});
	charts.push(trustScoreChart);

	// Fraud Analysis Chart (Bar)
	const fraudAnalysisCtx = document.getElementById('fraudAnalysisChart').getContext('2d');
	fraudAnalysisChart = new Chart(fraudAnalysisCtx, {
	type: 'bar',
	data: {
	labels: ['Legitimate', 'Suspicious', 'Fraudulent'],
	datasets: [{
	label: 'Fraud Indicators',
	data: [0, 0, 0],
	backgroundColor: [
	'#4cc9f0',
	'#f8961e',
	'#f72585'
	],
	borderWidth: 0
	}]
	},
	options: {
	indexAxis: 'y',
	plugins: {
	legend: {
	display: false
	}
	},
	scales: {
	x: {
	beginAtZero: true,
	max: 100
	}
	},
	maintainAspectRatio: false
	}
	});

	// Quality Assessment Chart
	const qualityCtx = document.getElementById('qualityChart').getContext('2d');
	qualityChart = new Chart(qualityCtx, {
	type: 'radar',
	data: {
	labels: ['Completeness', 'Accuracy', 'Clarity', 'Authenticity', 'Detail'],
	datasets: [{
	label: 'Quality Score',
	data: [0, 0, 0, 0, 0],
	backgroundColor: 'rgba(67, 97, 238, 0.2)',
	borderColor: '#4361ee',
	borderWidth: 2,
	pointBackgroundColor: '#4361ee'
	}]
	},
	options: {
	scales: {
	r: {
	beginAtZero: true,
	max: 100
	}
	},
	maintainAspectRatio: false
	}
	});

	// Location Analysis Chart
	const locationCtx = document.getElementById('locationChart').getContext('2d');
	locationChart = new Chart(locationCtx, {
	type: 'pie',
	data: {
	labels: ['Complete', 'Partial', 'Missing'],
	datasets: [{
	data: [0, 0, 0],
	backgroundColor: [
	'#4cc9f0',
	'#f8961e',
	'#f72585'
	],
	borderWidth: 0
	}]
	},
	options: {
	plugins: {
	legend: {
	position: 'bottom'
	}
	},
	maintainAspectRatio: false
	}
	});

	// Price Analysis Chart
	const priceCtx = document.getElementById('priceChart').getContext('2d');
	priceChart = new Chart(priceCtx, {
	type: 'bar',
	data: {
	labels: ['Market Value', 'Price per Sq.Ft.'],
	datasets: [{
	label: 'Price Analysis',
	data: [0, 0],
	backgroundColor: [
	'#4361ee',
	'#4895ef'
	],
	borderWidth: 0
	}]
	},
	options: {
	scales: {
	y: {
	beginAtZero: true
	}
	},
	maintainAspectRatio: false
	}
	});

	// Legal Analysis Chart
	const legalCtx = document.getElementById('legalChart').getContext('2d');
	legalChart = new Chart(legalCtx, {
	type: 'doughnut',
	data: {
	labels: ['Complete', 'Partial', 'Missing'],
	datasets: [{
	data: [0, 0, 0],
	backgroundColor: [
	'#4cc9f0',
	'#f8961e',
	'#f72585'
	],
	borderWidth: 0
	}]
	},
	options: {
	plugins: {
	legend: {
	position: 'bottom'
	}
	},
	maintainAspectRatio: false
	}
	});

	// Document Analysis Chart
	const documentCtx = document.getElementById('documentChart').getContext('2d');
	documentChart = new Chart(documentCtx, {
	type: 'polarArea',
	data: {
	labels: ['Authentic', 'Suspicious', 'Incomplete'],
	datasets: [{
	data: [0, 0, 0],
	backgroundColor: [
	'#4cc9f0',
	'#f8961e',
	'#f72585'
	],
	borderWidth: 0
	}]
	},
	options: {
	plugins: {
	legend: {
	position: 'bottom'
	}
	},
	maintainAspectRatio: false
	}
	});

	// Add window resize handler for chart responsiveness
	window.addEventListener('resize', debounce(() => {
	charts.forEach(chart => {
	if (chart && typeof chart.resize === 'function') {
	chart.resize();
	}
	});
	}, 250));

	} catch (error) {
	console.error('Error initializing charts:', error);
	document.getElementById('chartErrors').innerHTML =
	'<div class="alert alert-danger">Error initializing charts. Please refresh the page.</div>';
	}
	}

	// Utility function for debouncing
	function debounce(func, wait) {
	let timeout;
	return function executedFunction(...args) {
	const later = () => {
	clearTimeout(timeout);
	func(...args);
	};
	clearTimeout(timeout);
	timeout = setTimeout(later, wait);
	};
	}

	// Data validation function
	function validateAnalysisData(data) {
	return {
	trustScore: {
	score: data.trust_score?.score ?? 0,
	reasoning: data.trust_score?.reasoning ?? 'No reasoning provided'
	},
	fraudClassification: {
	alertLevel: data.fraud_classification?.alert_level ?? 'low',
	classification: data.fraud_classification?.classification ?? 'Unknown',
	confidence: data.fraud_classification?.confidence ?? 0,
	indicators: data.fraud_classification?.fraud_indicators ?? [],
	scores: data.fraud_classification?.indicator_scores ?? []
	},
	qualityAssessment: {
	assessment: data.quality_assessment?.assessment ?? 'Unknown',
	score: data.quality_assessment?.score ?? 0,
	isAiGenerated: data.quality_assessment?.is_ai_generated ?? false,
	reasoning: data.quality_assessment?.reasoning ?? 'No reasoning provided'
	},
	// ... other validations
	};
	}

	// Safe chart update function
	function updateChart(chart, newData, options = {}) {
	try {
	if (chart && typeof chart.update === 'function') {
	chart.data = newData;
	chart.update(options);
	return true;
	}
	return false;
	} catch (error) {
	console.error('Error updating chart:', error);
	return false;
	}
	}

	function submitForm() {
	// Show loading indicator
	document.getElementById('loadingIndicator').style.display = 'block';
	document.getElementById('resultsContainer').style.display = 'none';

	// Create form data
	const formData = new FormData(document.getElementById('propertyForm'));

	// Format price data before sending
	const marketValue = document.getElementById('marketValue').value;
	const sqFt = document.getElementById('sqFt').value;

	// Remove any non-numeric characters except decimal point
	const cleanMarketValue = marketValue.replace(/[^0-9.]/g, '');
	const cleanSqFt = sqFt.replace(/[^0-9.]/g, '');

	// Log the cleaned values to check
	console.log('Cleaned Market Value:', cleanMarketValue);
	console.log('Cleaned Sq Ft:', cleanSqFt);

	// Update form data with cleaned values
	formData.set('market_value', cleanMarketValue);
	formData.set('sq_ft', cleanSqFt);

	// Clear any existing image/document entries
	formData.delete('images');
	formData.delete('documents');

	// Add images (only once)
	uploadedImages.forEach((image) => {
	formData.append('images', image.file);
	});

	// Add PDFs (only once)
	uploadedPDFs.forEach((pdf) => {
	formData.append('documents', pdf.file);
	});

	// Send to backend
	fetch('/verify', {
	method: 'POST',
	body: formData
	})
	.then(response => {
	if (!response.ok) {
	throw new Error('Network response was not ok');
	}
	return response.json();
	})
	.then(data => {
	// Hide loading indicator
	document.getElementById('loadingIndicator').style.display = 'none';

	// Display results
	displayResults(data);

	// Show results container
	document.getElementById('resultsContainer').style.display = 'block';

	// Scroll to results
	document.getElementById('resultsContainer').scrollIntoView({ behavior: 'smooth' });
	})
	.catch(error => {
	console.error('Error:', error);
	document.getElementById('loadingIndicator').style.display = 'none';
	alert('An error occurred while processing your request. Please try again.');
	});
	}
	function displayResults(data) {
	try {
	console.log("Received data:", JSON.stringify(data));

	// Basic data validation
	if (!data) {
	throw new Error("No data received from server");
	}

	// Show results container
	const resultsContainer = document.getElementById('resultsContainer');
	if (!resultsContainer) {
	throw new Error("Results container not found");
	}
	resultsContainer.style.display = 'block';

	// Validate and sanitize data with safe defaults
	const validatedData = {
	trust_score: {
	score: parseFloat(data.trust_score?.score \|\| 0),
	reasoning: data.trust_score?.reasoning \|\| 'No reasoning provided'
	},
	fraud_classification: {
	alert_level: data.fraud_classification?.alert_level \|\| 'unknown',
	classification: data.fraud_classification?.classification \|\| 'Unknown',
	confidence: parseFloat(data.fraud_classification?.confidence \|\| 0),
	alert_score: parseFloat(data.fraud_classification?.alert_score \|\| 0),
	high_risk: Array.isArray(data.fraud_classification?.high_risk) ? data.fraud_classification.high_risk : [],
	medium_risk: Array.isArray(data.fraud_classification?.medium_risk) ? data.fraud_classification.medium_risk : [],
	low_risk: Array.isArray(data.fraud_classification?.low_risk) ? data.fraud_classification.low_risk : []
	},
	quality_assessment: {
	assessment: data.quality_assessment?.assessment \|\| 'Unknown',
	score: parseFloat(data.quality_assessment?.score \|\| 0),
	is_ai_generated: Boolean(data.quality_assessment?.is_ai_generated),
	reasoning: data.quality_assessment?.reasoning \|\| 'No reasoning provided'
	},
	price_analysis: data.price_analysis \|\| {},
	location_analysis: data.location_analysis \|\| {},
	legal_analysis: data.legal_analysis \|\| {},
	document_analysis: data.document_analysis \|\| {},
	image_analysis: data.image_analysis \|\| {},
	final_verdict: data.final_verdict \|\| {}
	};

	// Update each section with error handling
	try {
	updateTrustScore(validatedData.trust_score);
	} catch (error) {
	console.error('Error updating trust score:', error);
	}

	try {
	updateFraudAnalysis(validatedData.fraud_classification);
	} catch (error) {
	console.error('Error updating fraud analysis:', error);
	}

	try {
	updateQualityAssessment(validatedData.quality_assessment);
	} catch (error) {
	console.error('Error updating quality assessment:', error);
	}

	try {
	updatePriceAnalysis(validatedData.price_analysis);
	} catch (error) {
	console.error('Error updating price analysis:', error);
	}

	try {
	updateLocationAnalysis(validatedData.location_analysis);
	} catch (error) {
	console.error('Error updating location analysis:', error);
	}

	try {
	updateLegalAnalysis(validatedData.legal_analysis);
	} catch (error) {
	console.error('Error updating legal analysis:', error);
	}

	try {
	updateDocumentAnalysis(validatedData.document_analysis);
	} catch (error) {
	console.error('Error updating document analysis:', error);
	}

	try {
	updateImageAnalysis(validatedData.image_analysis);
	} catch (error) {
	console.error('Error updating image analysis:', error);
	}

	try {
	updateFinalVerdict(validatedData.final_verdict);
	} catch (error) {
	console.error('Error updating final verdict:', error);
	}

	try {
	updatePropertySummary(data);
	} catch (error) {
	console.error('Error updating property summary:', error);
	}

	} catch (error) {
	console.error('Error displaying results:', error);
	const resultsContainer = document.getElementById('resultsContainer');
	if (resultsContainer) {
	resultsContainer.innerHTML = `
	<div class="alert alert-danger">
	<h4>Error Displaying Results</h4>
	<p>${error.message}</p>
	<p>Please try again or contact support if the problem persists.</p>
	</div>
	`;
	resultsContainer.style.display = 'block';
	}
	}
	}

	function updateTrustScore(data) {
	try {
	const score = Math.min(100, Math.max(0, data.score));
	document.getElementById('trustScoreValue').textContent = `${Math.round(score)}%`;
	document.getElementById('trustScoreBar').style.width = `${score}%`;
	document.getElementById('trustReasoning').textContent = data.reasoning;

	// Update Trust Score Chart
	if (trustScoreChart) {
	trustScoreChart.data.datasets[0].data = [score, 100 - score];
	trustScoreChart.update();
	}
	} catch (error) {
	console.error('Error updating trust score:', error);
	}
	}

	function updateFraudAnalysis(data) {
	try {
	if (!data) {
	console.error('No fraud analysis data provided');
	return;
	}

	// Update fraud overview
	const alertLevel = document.getElementById('fraud-alert-level');
	const confidence = document.getElementById('fraud-confidence');
	const scoreValue = document.getElementById('fraud-score-value');
	const scoreBar = document.getElementById('fraud-score-bar');

	if (alertLevel) {
	alertLevel.textContent = (data.alert_level \|\| 'unknown').toUpperCase();
	}
	if (confidence) {
	confidence.textContent = `${Math.round((data.confidence \|\| 0) * 100)}%`;
	}
	if (scoreValue) {
	scoreValue.textContent = `${Math.round((data.alert_score \|\| 0) * 100)}%`;
	}

	// Update score bar
	if (scoreBar) {
	const score = Math.round((data.alert_score \|\| 0) * 100);
	scoreBar.style.width = `${score}%`;
	scoreBar.style.backgroundColor = score >= 70 ? '#f72585' : score >= 40 ? '#f8961e' : '#4cc9f0';
	}

	// Update risk indicators
	updateRiskList('high-risk-list', data.high_risk \|\| []);
	updateRiskList('medium-risk-list', data.medium_risk \|\| []);
	updateRiskList('low-risk-list', data.low_risk \|\| []);

	// Update fraud chart
	if (fraudAnalysisChart) {
	const highRiskScore = (data.high_risk \|\| []).reduce((sum, [_, score]) => sum + (score \|\| 0), 0) * 100;
	const mediumRiskScore = (data.medium_risk \|\| []).reduce((sum, [_, score]) => sum + (score \|\| 0), 0) * 100;
	const lowRiskScore = (data.low_risk \|\| []).reduce((sum, [_, score]) => sum + (score \|\| 0), 0) * 100;

	fraudAnalysisChart.data.datasets[0].data = [
	Math.min(100, highRiskScore),
	Math.min(100, mediumRiskScore),
	Math.min(100, lowRiskScore)
	];
	fraudAnalysisChart.update();
	}

	// Update reasoning
	const reasoning = document.getElementById('fraudReasoning');
	if (reasoning) {
	reasoning.textContent = `This property was classified as ${data.classification \|\| 'Unknown'} based on AI analysis of the listing details.`;
	}
	} catch (error) {
	console.error('Error updating fraud analysis:', error);
	}
	}

	function updateRiskList(listId, indicators) {
	try {
	const list = document.getElementById(listId);
	if (!list) {
	console.error(`Risk list element not found: ${listId}`);
	return;
	}

	list.innerHTML = '';

	if (!Array.isArray(indicators) \|\| indicators.length === 0) {
	const li = document.createElement('li');
	li.textContent = 'No indicators found';
	list.appendChild(li);
	return;
	}

	indicators.forEach((indicator) => {
	try {
	const [text, score] = Array.isArray(indicator) ? indicator : [indicator, 0];
	const li = document.createElement('li');
	li.innerHTML = `${text} <span class="confidence">(${Math.round((score \|\| 0) * 100)}% confidence)</span>`;
	list.appendChild(li);
	} catch (error) {
	console.error('Error processing indicator:', error);
	}
	});
	} catch (error) {
	console.error(`Error updating risk list ${listId}:`, error);
	}
	}

	function updateQualityAssessment(data) {
	try {
	const qualityDiv = document.getElementById('qualityAssessment');
	const score = Math.min(100, Math.max(0, data.score));

	qualityDiv.innerHTML = `
	<div class="quality-score mb-4">
	<h5>Content Quality Score</h5>
	<div class="score-display">
	<span class="score-value">${Math.round(score)}%</span>
	<div class="progress">
	<div class="progress-bar ${getScoreColorClass(score)}"
	role="progressbar"
	style="width: ${score}%"
	aria-valuenow="${score}"
	aria-valuemin="0"
	aria-valuemax="100">
	</div>
	</div>
	</div>
	</div>
	<div class="quality-details">
	<div class="detail-item">
	<strong>Assessment:</strong> ${data.assessment}
	</div>
	<div class="detail-item">
	<strong>AI Generated:</strong> ${data.is_ai_generated ? 'Yes' : 'No'}
	</div>
	<div class="detail-item">
	<strong>Analysis:</strong>
	<p class="reasoning-text">${data.reasoning}</p>
	</div>
	</div>
	`;

	// Update Quality Chart
	if (qualityChart) {
	qualityChart.data.datasets[0].data = [
	data.completeness_score \|\| 0,
	data.accuracy_score \|\| 0,
	data.clarity_score \|\| 0,
	data.authenticity_score \|\| 0,
	data.detail_score \|\| 0
	];
	qualityChart.update();
	}
	} catch (error) {
	console.error('Error updating quality assessment:', error);
	}
	}

	function updatePriceAnalysis(data) {
	try {
	if (!data \|\| !data.has_price) {
	document.getElementById('priceAnalysis').innerHTML =
	'<p>No price information provided for analysis.</p>';
	return;
	}

	// Update main price information
	document.getElementById('price-per-sqft').textContent = data.formatted_price_per_sqft \|\| '₹0';
	document.getElementById('price-assessment').textContent = data.assessment \|\| 'Unknown';

	// Update confidence
	const confidence = Math.round((data.confidence \|\| 0) * 100);
	const confidenceBar = document.getElementById('price-confidence-bar');
	const confidenceValue = document.getElementById('price-confidence-value');
	confidenceValue.textContent = `${confidence}%`;
	confidenceBar.style.width = `${confidence}%`;
	confidenceBar.style.backgroundColor = getScoreColor(confidence);

	// Update price ranges
	if (data.market_trends?.price_ranges) {
	updatePriceRanges(data.market_trends.price_ranges);
	}

	// Update market trends
	if (data.market_trends) {
	updateMarketTrends(data.market_trends);
	}

	// Update price factors
	if (data.price_factors) {
	updatePriceFactors(data.price_factors);
	}

	// Update risk indicators
	updateRiskIndicators(data.risk_indicators \|\| []);

	// Update price chart
	if (priceChart) {
	priceChart.data.datasets[0].data = [
	(data.price \|\| 0) / 1000,
	data.price_per_sqft \|\| 0
	];
	priceChart.update();
	}
	} catch (error) {
	console.error('Error updating price analysis:', error);
	}
	}

	function updatePriceRanges(ranges) {
	try {
	const elements = {
	'budget-range': ranges.budget,
	'mid-range': ranges.mid_range,
	'premium-range': ranges.premium
	};

	Object.entries(elements).forEach(([id, range]) => {
	const element = document.getElementById(id);
	if (element) {
	element.innerHTML = `
	<div class="range-value">₹${range.min.toLocaleString()} - ₹${range.max.toLocaleString()}</div>
	<div class="range-description">${range.description}</div>
	`;
	}
	});
	} catch (error) {
	console.error('Error updating price ranges:', error);
	}
	}

	function updateMarketTrends(trends) {
	try {
	// City tier
	const cityTier = document.getElementById('city-tier');
	if (cityTier) {
	const tierIcon = trends.city_tier === 'metro' ? '🏙️' :
	trends.city_tier === 'tier-1' ? '🌆' :
	trends.city_tier === 'tier-2' ? '🏘️' : '🏡';
	cityTier.innerHTML = `${tierIcon} ${trends.city_tier.toUpperCase()}`;
	}

	// Price trend
	const priceTrend = document.getElementById('price-trend');
	if (priceTrend) {
	const trendIcon = trends.avg_price_range.trend === 'increasing' ? '📈' :
	trends.avg_price_range.trend === 'decreasing' ? '📉' : '➡️';
	priceTrend.innerHTML = `${trendIcon} ${trends.avg_price_range.trend.toUpperCase()}`;
	}

	// Market average
	const marketAvg = document.getElementById('market-average');
	if (marketAvg) {
	const avgPrice = trends.price_per_sqft.market_avg;
	marketAvg.innerHTML = `
	<div class="trend-value">₹${avgPrice.toLocaleString()}</div>
	<div class="trend-description">Market Average</div>
	`;
	}

	// Price deviation
	const priceDeviation = document.getElementById('price-deviation');
	if (priceDeviation) {
	const deviation = trends.price_per_sqft.deviation;
	const deviationColor = deviation > 20 ? '#f72585' : deviation > 10 ? '#f8961e' : '#4cc9f0';
	priceDeviation.innerHTML = `
	<div class="trend-value" style="color: ${deviationColor}">${deviation.toFixed(1)}%</div>
	<div class="trend-description">From Market Average</div>
	`;
	}
	} catch (error) {
	console.error('Error updating market trends:', error);
	}
	}

	function updatePriceFactors(factors) {
	try {
	// Property age factor
	if (factors.age_factor) {
	const ageFactor = document.getElementById('age-factor');
	if (ageFactor) {
	const ageImpact = factors.age_factor.impact === 'high' ? '🔴' :
	factors.age_factor.impact === 'medium' ? '🟡' : '🟢';
	ageFactor.innerHTML = `
	<span class="factor-value">${factors.age_factor.property_age} years</span>
	<span class="factor-impact">${ageImpact} Impact: ${factors.age_factor.impact.toUpperCase()}</span>
	`;
	}
	}

	// Size factor
	if (factors.size_factor) {
	const sizeFactor = document.getElementById('size-factor');
	if (sizeFactor) {
	const sizeEfficiency = factors.size_factor.efficiency === 'high' ? '🟢' :
	factors.size_factor.efficiency === 'medium' ? '🟡' : '🔴';
	sizeFactor.innerHTML = `
	<span class="factor-value">${sizeEfficiency} ${factors.size_factor.efficiency.toUpperCase()}</span>
	<span class="factor-impact">Size: ${factors.size_factor.size.toLocaleString()} sq.ft.</span>
	`;
	}
	}

	// Amenities factor
	if (factors.amenities_factor) {
	const amenitiesFactor = document.getElementById('amenities-factor');
	if (amenitiesFactor) {
	const amenitiesImpact = factors.amenities_factor.impact === 'high' ? '🟢' :
	factors.amenities_factor.impact === 'medium' ? '🟡' : '🔴';
	amenitiesFactor.innerHTML = `
	<span class="factor-value">${amenitiesImpact} ${factors.amenities_factor.count} amenities</span>
	<span class="factor-impact">Impact: ${factors.amenities_factor.impact.toUpperCase()}</span>
	`;
	}
	}
	} catch (error) {
	console.error('Error updating price factors:', error);
	}
	}

	function updateRiskIndicators(indicators) {
	try {
	const riskList = document.getElementById('risk-indicators');
	if (!riskList) return;

	riskList.innerHTML = '';
	if (indicators.length > 0) {
	indicators.forEach(risk => {
	const li = document.createElement('li');
	li.innerHTML = `⚠️ ${risk}`;
	li.style.background = '#fff3e0';
	li.style.color = '#e65100';
	riskList.appendChild(li);
	});
	} else {
	const li = document.createElement('li');
	li.innerHTML = '✅ No significant risks identified';
	li.style.background = '#e8f5e9';
	li.style.color = '#2e7d32';
	riskList.appendChild(li);
	}
	} catch (error) {
	console.error('Error updating risk indicators:', error);
	}
	}

	function getScoreColorClass(score) {
	if (score >= 80) return 'bg-success';
	if (score >= 60) return 'bg-info';
	if (score >= 40) return 'bg-warning';
	return 'bg-danger';
	}

	function getScoreColor(score) {
	if (score >= 70) return '#4cc9f0';
	if (score >= 40) return '#f8961e';
	return '#f72585';
	}

	function updateLocationAnalysis(data) {
	// Update location analysis section
	document.getElementById('locationAnalysis').innerHTML = `
	<p><strong>Assessment:</strong> ${data.assessment \|\| "Unknown"}</p>
	<p><strong>Completeness:</strong> ${data.completeness_score \|\| 0}%</p>
	<p><strong>Coordinates:</strong> ${data.coordinates_check \|\| "Unknown"}</p>
	<p><strong>Landmarks:</strong> ${data.landmarks_provided ? 'Provided' : 'Not provided'}</p>
	`;

	// Update Location Chart
	if (locationChart) {
	locationChart.data.datasets[0].data = [
	data.completeness_score \|\| 0,
	100 - (data.completeness_score \|\| 0),
	data.coordinates_check === 'coordinates_missing' ? 30 : 0
	];
	locationChart.update();
	}
	}

	function updateLegalAnalysis(data) {
	// Update legal analysis section
	document.getElementById('legalAnalysis').innerHTML = `
	<p><strong>Assessment:</strong> ${data.assessment \|\| "Unknown"}</p>
	<p><strong>Completeness:</strong> ${data.completeness_score \|\| 0}%</p>
	<p><strong>Summary:</strong> ${data.summary \|\| "No summary available"}</p>
	${data.terms_found && data.terms_found.length > 0 ? `<p><strong>Legal Terms Found:</strong> ${data.terms_found.join(', ')}</p>` : ''}
	${data.potential_issues ? '<p class="alert alert-warning">Potential legal issues detected</p>' : ''}
	`;

	// Update Legal Chart
	if (legalChart) {
	legalChart.data.datasets[0].data = [
	data.completeness_score \|\| 0,
	100 - (data.completeness_score \|\| 0),
	data.potential_issues ? 30 : 0
	];
	legalChart.update();
	}
	}

	function updateDocumentAnalysis(data) {
	// Update document analysis section
	document.getElementById('documentAnalysis').innerHTML = `
	<p><strong>Documents Analyzed:</strong> ${data.pdf_count}</p>
	${data.pdf_analysis.map((pdf, index) => `
	<div class="pdf-preview">
	<p><strong>Document ${index + 1}</strong></p>
	<p><strong>Type:</strong> ${pdf.document_type.classification} (${Math.round(pdf.document_type.confidence * 100)}% confidence)</p>
	<p><strong>Authenticity:</strong> ${pdf.authenticity.assessment} (${Math.round(pdf.authenticity.confidence * 100)}% confidence)</p>
	<p><strong>Summary:</strong> ${pdf.summary}</p>
	<p><strong>Contains Signatures:</strong> ${pdf.contains_signatures ? 'Yes' : 'No'}</p>
	<p><strong>Contains Dates:</strong> ${pdf.contains_dates ? 'Yes' : 'No'}</p>
	</div>
	`).join('')}
	`;

	// Update Document Chart
	if (documentChart) {
	documentChart.data.datasets[0].data = [
	data.pdf_analysis.filter(pdf => pdf.authenticity.assessment.includes('authentic')).length,
	data.pdf_analysis.filter(pdf => pdf.authenticity.assessment.includes('fraudulent')).length,
	data.pdf_analysis.length - data.pdf_analysis.filter(pdf => pdf.authenticity.assessment.includes('authentic')).length - data.pdf_analysis.filter(pdf => pdf.authenticity.assessment.includes('fraudulent')).length
	];
	documentChart.update();
	}
	}

	function updateImageAnalysis(data) {
	try {
	const imageAnalysisDiv = document.getElementById('imageAnalysis');
	const imageGallery = document.getElementById('imageGallery');

	if (!imageAnalysisDiv \|\| !imageGallery) {
	console.error('Image analysis elements not found');
	return;
	}

	// Clear previous content
	imageAnalysisDiv.innerHTML = '';
	imageGallery.innerHTML = '';

	// Check if we have valid data
	if (!data \|\| !data.image_analysis) {
	imageAnalysisDiv.innerHTML = '<p class="alert alert-warning">No image analysis data available</p>';
	return;
	}

	// Create analysis summary
	const summaryDiv = document.createElement('div');
	summaryDiv.className = 'image-analysis-summary';
	summaryDiv.innerHTML = `
	<h4>Image Analysis Summary</h4>
	<p><strong>Total Images:</strong> ${data.image_count \|\| 0}</p>
	<p><strong>Property-Related Images:</strong> ${data.image_analysis.filter(img => img && img.is_property_related).length}</p>
	<p><strong>Analysis Confidence:</strong> ${Math.round((data.confidence \|\| 0) * 100)}%</p>
	`;
	imageAnalysisDiv.appendChild(summaryDiv);

	// Create image gallery
	if (data.image_analysis && data.image_analysis.length > 0) {
	data.image_analysis.forEach((img, index) => {
	if (!img \|\| !img.image_data) return;

	const galleryItem = document.createElement('div');
	galleryItem.className = 'gallery-item';

	// Create image container
	const imgContainer = document.createElement('div');
	imgContainer.className = 'image-container';

	// Create image element
	const imgElement = document.createElement('img');
	imgElement.src = `data:image/jpeg;base64,${img.image_data}`;
	imgElement.alt = `Property Image ${index + 1}`;
	imgElement.onerror = function() {
	this.src = 'placeholder.jpg'; // Fallback image
	console.error(`Failed to load image ${index + 1}`);
	};

	// Create analysis overlay
	const overlay = document.createElement('div');
	overlay.className = 'image-overlay';
	overlay.innerHTML = `
	<div class="badge ${img.is_property_related ? 'badge-success' : 'badge-warning'}">
	${img.is_property_related ? 'Property' : 'Not Property'}
	</div>
	<div class="confidence-score">
	Confidence: ${Math.round((img.confidence \|\| 0) * 100)}%
	</div>
	`;

	imgContainer.appendChild(imgElement);
	imgContainer.appendChild(overlay);
	galleryItem.appendChild(imgContainer);
	imageGallery.appendChild(galleryItem);
	});
	} else {
	imageGallery.innerHTML = '<p class="alert alert-info">No images available for analysis</p>';
	}

	// Add analysis details
	const detailsDiv = document.createElement('div');
	detailsDiv.className = 'image-analysis-details';
	detailsDiv.innerHTML = `
	<h4>Detailed Analysis</h4>
	<div class="analysis-grid">
	${data.image_analysis.map((img, index) => `
	<div class="analysis-item">
	<h5>Image ${index + 1}</h5>
	<p><strong>Type:</strong> ${img.image_type \|\| 'Unknown'}</p>
	<p><strong>Property Related:</strong> ${img.is_property_related ? 'Yes' : 'No'}</p>
	<p><strong>Confidence:</strong> ${Math.round((img.confidence \|\| 0) * 100)}%</p>
	${img.analysis_details ? `<p><strong>Details:</strong> ${img.analysis_details}</p>` : ''}
	</div>
	`).join('')}
	</div>
	`;
	imageAnalysisDiv.appendChild(detailsDiv);

	} catch (error) {
	console.error('Error updating image analysis:', error);
	const imageAnalysisDiv = document.getElementById('imageAnalysis');
	if (imageAnalysisDiv) {
	imageAnalysisDiv.innerHTML = `
	<div class="alert alert-danger">
	<h4>Error Processing Images</h4>
	<p>${error.message}</p>
	</div>
	`;
	}
	}
	}

	function updateFinalVerdict(data) {
	// Update final verdict display
	const verdictBox = document.getElementById('verdictBox');
	const verdictIcon = document.getElementById('verdictIcon');
	const verdictText = document.getElementById('verdictText');
	const verdictScoreValue = document.getElementById('verdictScoreValue');
	const verdictScoreBar = document.getElementById('verdictScoreBar');

	// Get final verdict data
	const finalVerdict = data \|\| {};
	const verdictStatus = finalVerdict.status \|\| 'unknown';
	const verdictScore = finalVerdict.score \|\| 0;
	const verdictConfidence = finalVerdict.confidence \|\| 0;

	// Update verdict display
	if (verdictStatus === 'fraudulent') {
	verdictBox.className = 'verdict-box verdict-fraudulent';
	verdictIcon.textContent = '❌';
	verdictText.textContent = 'HIGH RISK - LIKELY FRAUDULENT';
	} else if (verdictStatus === 'suspicious') {
	verdictBox.className = 'verdict-box verdict-suspicious';
	verdictIcon.textContent = '⚠️';
	verdictText.textContent = 'CAUTION - SUSPICIOUS ELEMENTS';
	} else if (verdictStatus === 'legitimate') {
	verdictBox.className = 'verdict-box verdict-legitimate';
	verdictIcon.textContent = '✅';
	verdictText.textContent = 'VERIFIED REAL ESTATE LISTING';
	} else {
	verdictBox.className = 'verdict-box';
	verdictIcon.textContent = '❓';
	verdictText.textContent = 'VERDICT UNKNOWN';
	}

	// Update verdict score
	verdictScoreValue.textContent = `${Math.round(verdictScore)}%`;
	verdictScoreBar.style.width = `${verdictScore}%`;
	verdictScoreBar.className = `progress-fill ${getScoreColorClass(verdictScore)}`;

	// Display critical issues
	const criticalIssuesList = document.getElementById('criticalIssuesList');
	criticalIssuesList.innerHTML = '';

	if (finalVerdict.critical_issues && finalVerdict.critical_issues.length > 0) {
	finalVerdict.critical_issues.forEach(issue => {
	const li = document.createElement('li');
	li.className = 'suggestion-item';
	li.innerHTML = `<i class="fas fa-exclamation-circle"></i> ${issue}`;
	criticalIssuesList.appendChild(li);
	});
	document.getElementById('criticalIssuesSection').style.display = 'block';
	} else {
	document.getElementById('criticalIssuesSection').style.display = 'none';
	}

	// Display warnings
	const warningsList = document.getElementById('warningsList');
	warningsList.innerHTML = '';

	if (finalVerdict.warnings && finalVerdict.warnings.length > 0) {
	finalVerdict.warnings.forEach(warning => {
	const li = document.createElement('li');
	li.className = 'suggestion-item';
	li.innerHTML = `<i class="fas fa-exclamation-triangle"></i> ${warning}`;
	warningsList.appendChild(li);
	});
	document.getElementById('warningsSection').style.display = 'block';
	} else {
	document.getElementById('warningsSection').style.display = 'none';
	}

	// Display recommendations
	const recommendationsList = document.getElementById('recommendationsList');
	recommendationsList.innerHTML = '';

	if (finalVerdict.recommendations && finalVerdict.recommendations.length > 0) {
	finalVerdict.recommendations.forEach(recommendation => {
	const li = document.createElement('li');
	li.className = 'suggestion-item';
	li.innerHTML = `<i class="fas fa-check-circle"></i> ${recommendation}`;
	recommendationsList.appendChild(li);
	});
	document.getElementById('recommendationsSection').style.display = 'block';
	} else {
	document.getElementById('recommendationsSection').style.display = 'none';
	}

	// Update Verification Scores
	updateScoreBar('trustBar', 'trustValue', validatedData.trust_score.score);

	// Image authenticity score
	let imageScore = 0;
	if (data.image_analysis && data.image_analysis.image_analysis) {
	const propertyImages = data.image_analysis.image_analysis.filter(img => img && img.is_property_related);
	imageScore = data.image_count > 0 ?
	Math.round((propertyImages.length / data.image_count) * 100) : 0;
	}
	updateScoreBar('imageBar', 'imageValue', imageScore);

	// Document verification score
	let docScore = 0;
	if (data.document_analysis && data.document_analysis.pdf_analysis) {
	const verificationScores = data.document_analysis.pdf_analysis.map(
	pdf => pdf.verification_score \|\| 0
	);
	docScore = verificationScores.length > 0 ?
	Math.round((verificationScores.reduce((a, b) => a + b, 0) / verificationScores.length) * 100) : 0;
	}
	updateScoreBar('documentBar', 'documentValue', docScore);

	// Content quality score
	const contentScore = validatedData.quality_assessment.score;
	updateScoreBar('contentBar', 'contentValue', contentScore);

	// Location accuracy score
	const locationScore = data.location_analysis ? data.location_analysis.completeness_score \|\| 0 : 0;
	updateScoreBar('locationBar', 'locationValue', locationScore);

	// Update Red Flags
	const redFlagsList = document.getElementById('redFlagsList');
	redFlagsList.innerHTML = '';

	const redFlags = [];

	// Check for inconsistencies and issues
	if (data.cross_validation) {
	data.cross_validation.forEach(check => {
	if (check.status === 'inconsistent' \|\| check.status === 'invalid' \|\|
	check.status === 'suspicious' \|\| check.status === 'no_match') {
	redFlags.push(`${check.check}: ${check.message}`);
	}
	});
	}

	if (validatedData.quality_assessment.isAiGenerated) {
	redFlags.push('Description appears to be AI-generated, which may indicate a fake listing');
	}

	if (data.price_analysis &&
	(data.price_analysis.assessment === 'suspicious pricing' \|\|
	data.price_analysis.assessment === 'overpriced' \|\|
	data.price_analysis.assessment === 'underpriced')) {
	redFlags.push(`Price is ${data.price_analysis.assessment} for this type of property`);
	}

	if (data.legal_analysis && data.legal_analysis.potential_issues) {
	redFlags.push('Potential legal issues detected in the property documentation');
	}

	if (data.image_analysis && data.image_count > 0) {
	const propertyImages = data.image_analysis.image_analysis.filter(img => img && img.is_property_related);
	if (propertyImages.length === 0) {
	redFlags.push('None of the uploaded images appear to be related to real estate');
	}
	}

	// If no red flags, add a positive message
	if (redFlags.length === 0) {
	redFlags.push('No significant red flags detected in this listing');
	}

	redFlags.forEach(flag => {
	const li = document.createElement('li');
	li.className = 'suggestion-item';
	li.textContent = flag;
	redFlagsList.appendChild(li);
	});

	}

	function updatePropertySummary(data) {
	// Update property summary
	document.getElementById('summaryName').textContent = document.getElementById('propertyName').value \|\| 'Not provided';
	document.getElementById('summaryType').textContent = document.getElementById('propertyType').value \|\| 'Not provided';
	document.getElementById('summaryStatus').textContent = document.getElementById('status').value \|\| 'Not provided';
	document.getElementById('summaryLocation').textContent =
	`${document.getElementById('address').value \|\| ''}, ${document.getElementById('city').value \|\| ''}, ${document.getElementById('state').value \|\| ''}, India`;
	document.getElementById('summaryPrice').textContent = document.getElementById('marketValue').value ? `₹${document.getElementById('marketValue').value}` : 'Not provided';
	document.getElementById('summarySize').textContent = document.getElementById('sqFt').value ? `${document.getElementById('sqFt').value} sq. ft.` : 'Not provided';
	document.getElementById('summaryRooms').textContent =
	`${document.getElementById('bedrooms').value \|\| '0'} BHK`; // BHK is common in Indian real estate
	}

	function updateScoreBar(barId, valueId, score) {
	const bar = document.getElementById(barId);
	const value = document.getElementById(valueId);

	if (bar && value) {
	bar.style.setProperty('--score-width', `${score}%`);
	bar.style.background = `linear-gradient(to right,
	${getScoreColor(score)} ${score}%,
	#e9ecef ${score}%)`;
	value.textContent = `${score}%`;
	}
	}
	</script>
	</body>
	</html>