@extends('layouts.app')
@section('page-title', 'Spindle Spacing')

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

@section('content')
<main class="balustrade-tool">
	<h1>Balustrade Spacing Calculator</h1>
	<p class="intro">
		Calculate equal spindle spacing for your decking balustrade, keeping within UK building regulations (max 99mm gap).
	</p>

	<form id="balustradeForm" onsubmit="return false;">
		<div class="input-row">
			<label for="railLength">Length:</label>
			<input type="number" id="railLength" placeholder="Enter length" required>
			<label for="unitSelect"></label><select id="unitSelect">
				<option value="mm">mm</option>
				<option value="m">m</option>
			</select>
		</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="includeNewels">Include Newel Posts in Length</label>
		</div>

        <button type="button" id="calcBalustradeBtn">Calculate</button>

    </form>

	<div id="results" class="results hidden">
		<h2>Results</h2>
		<p><strong>Number of Spindles:</strong> <span id="numSpindles"></span></p>
		<p><strong>Actual Gap Between Spindles:</strong> <span id="actualGap"></span> mm</p>
		<p><strong>Total Gap Distance:</strong> <span id="totalGap"></span> mm</p>
	</div>

    <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 spacing and spindle count shown above.
        </p>
    </div>

</main>
@endsection

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