@extends('layouts.app')
@section('page-title', 'Balustrade Material')

@push('page-css')
    @vite('resources/css/tools/balustrade-material-estimator.css')
@endpush

@section('content')
<main class="balustrade-estimator">
	<h1>Balustrade Material Estimator</h1>
	<p class="intro">
		Estimate all materials required for your decking balustrade — including posts, handrails, spindles, and fixings.
	</p>

	<form id="balustradeEstimator" onsubmit="return false;">
		<div class="input-row">
			<label for="totalLength">Total Length:</label>
			<input type="number" id="totalLength" placeholder="Enter length" required>
			<select id="unitSelect">
				<option value="mm">mm</option>
				<option value="m">m</option>
			</select>
		</div>

		<div class="input-row">
			<label for="systemType">System Type:</label>
			<select id="systemType">
				<option value="timber">Timber</option>
				<option value="pvc">PVC</option>
				<option value="composite">Composite</option>
			</select>
		</div>

		<div class="input-row">
			<label for="postSpacing">Post Spacing (mm):</label>
			<input type="number" id="postSpacing" value="1800" required>
		</div>

		<div class="input-row">
			<label for="spindleWidth">Spindle Width (mm):</label>
			<input type="number" id="spindleWidth" value="41" required>
		</div>

		<div class="input-row">
			<label for="maxGap">Max Gap Allowed (mm):</label>
			<input type="number" id="maxGap" value="99" required>
		</div>

		<div class="input-row checkbox">
			<label><input type="checkbox" id="includeCorners"> Include Corner Posts</label>
		</div>

		<button type="button" id="calcBalustradeEstimateBtn">Estimate Materials</button>
	</form>

	<div id="results" class="results hidden">
		<h2>Results</h2>
		<p><strong>System Type:</strong> <span id="resType"></span></p>
		<p><strong>Sections:</strong> <span id="resSections"></span></p>
		<p><strong>Posts Required:</strong> <span id="resPosts"></span></p>
		<p><strong>Spindles Required:</strong> <span id="resSpindles"></span></p>
		<p><strong>Handrail Lengths:</strong> <span id="resHandrail"></span></p>
		<p><strong>Baserail Lengths:</strong> <span id="resBaserail"></span></p>
		<p><strong>Estimated Fixings:</strong> <span id="resFixings"></span></p>
	</div>
</main>



<div id="diagramContainer" class="diagram-container hidden">
	<h2>Visual Layout</h2>
	<canvas id="balustradeDiagram" width="800" height="200"></canvas>
	<p class="diagram-note">
		Illustration scaled to fit. Actual component positions shown approximately.
	</p>
</div>
@endsection

@push('page-scripts')
    @vite(['resources/js/tools/balustrade-material-estimator.js', 'resources/js/tools/dark-mode.js'])
@endpush