@extends('layouts.app')
@section('page-title', 'Deck Estimator')

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

@push('head-scripts')
    <script>window.PRODUCTS = {!! json_encode($products, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!};</script>
@endpush

@section('content')
@if($tenant->watermark)
    <div class="demo-watermark" role="alert">
        🔒 {{ $tenant->watermark }}
    </div>
@endif
    <h1>{{ $tenant->company_name ?? 'EstiFlow' }} — Deck Estimator</h1>

    <div class="unit-toggle-container">
        <label>Measurement Units:</label>
        <div class="unit-toggle-buttons">
            <button type="button" class="unit-toggle-btn active" data-unit="mm" id="unitMM">Millimeters (mm)</button>
            <button type="button" class="unit-toggle-btn" data-unit="m" id="unitM">Meters (m)</button>
            <button type="button" class="unit-toggle-btn" data-unit="ft" id="unitFT">Feet/Inches (ft)</button>
        </div>
    </div>

    <section class="templates-section">
        <h2>Quick Start Templates</h2>
        <p class="templates-description">Choose a pre-configured deck size to get started quickly, then customise as needed.</p>
        <div class="templates-grid">
            <button type="button" class="template-btn" data-template="smallPatio">
                <span class="template-icon"><img src="/images/small-deck.png" height="108" width="180" style="max-width: 90px; height: auto;" alt="Small Deck"/></span>
                <span class="template-name">Small Deck</span>
                <span class="template-size">3m × 3m</span>
            </button>
            <button type="button" class="template-btn" data-template="mediumDeck">
                <span class="template-icon"><img src="/images/small-deck.png" height="108" width="180" style="max-width: 120px; height: auto;" alt="Medium Deck"/></span>
                <span class="template-name">Medium Deck</span>
                <span class="template-size">6m × 4m</span>
            </button>
            <button type="button" class="template-btn" data-template="largeDeck">
                <span class="template-icon"><img src="/images/small-deck.png" height="108" width="180" style="max-width: 160px; height: auto;" alt="large Deck"/></span>
                <span class="template-name">Large Deck</span>
                <span class="template-size">8m × 5m</span>
            </button>
            <button type="button" class="template-btn" data-template="balcony">
                <span class="template-icon"><img src="/images/balcony-deck.png" height="116" width="180" style="max-width: 120px; height: auto;" alt="Balcony Deck"/></span>
                <span class="template-name">Balcony Deck</span>
                <span class="template-size">2.5m × 1.5m</span>
            </button>
            <button type="button" class="template-btn" data-template="lshape">
                <span class="template-icon"><img src="/images/L-deck.png" height="104" width="180" style="max-width: 120px; height: auto;" alt="L-Shaped Deck"/></span>
                <span class="template-name">L-Shape Deck</span>
                <span class="template-size">6m × 4m</span>
            </button>
            <button type="button" class="template-btn" data-template="narrow">
                <span class="template-icon"><img src="/images/narrow-deck.png" height="90" width="180" style="max-width: 120px; height: auto;" alt="Narrow Deck"/></span>
                <span class="template-name">Narrow Deck</span>
                <span class="template-size">5m × 2m</span>
            </button>
        </div>
    </section>

    <section class="deck-areas-section">
        <h2>Deck Areas</h2>
        <p class="deck-areas-description">Add multiple deck areas to calculate combined materials. Each area can have different dimensions and specifications.</p>


        <div id="deckAreasList" class="deck-areas-list">
            <div class="deck-area-card active" id="deckArea-1" data-area-id="1" draggable="true">
                <div class="deck-area-header">
                    <h3>Deck Area 1</h3>
                    <span class="deck-area-status">Current</span>
                </div>
                <div class="deck-area-preview" id="deckAreaPreview-1">
                    <div class="deck-area-preview-placeholder">Preview will appear after calculation</div>
                </div>
                <p class="deck-area-info" id="deckAreaInfo-1">Configure deck details below</p>
                <div class="deck-area-actions">
                    <button type="button" class="deck-area-action-btn clone-btn" onclick="cloneDeckArea(1)" title="Duplicate this deck area">📋 Clone</button>
                </div>
            </div>
        </div>

        <button type="button" id="addDeckAreaBtn" class="add-deck-btn">+ Add Another Deck Area</button>
        <button type="button" id="showCombinedTotalsBtn" class="combined-totals-btn" style="display: none;">📊 View Combined Totals</button>
    </section>

    <form id="deckForm" role="form" aria-label="Deck Calculator Form">
        <label>
  <span class="label-with-icon">
    <svg viewBox="0 0 24 24">
      <path d="M2 12h20M15 5l7 7-7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M9 19L2 12l7-7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    Deck Length <span class="unit-label">(mm)</span>
    <span class="tooltip"><span class="tooltip-icon">?</span><span class="tooltiptext">e.g., 6000mm for a 6 meter deck</span></span>
  </span>
            <input type="number" id="deckLength" min="500" max="50000" step="1" required data-base-unit="mm">
            <span class="error-message" id="deckLength-error"></span>
        </label>

        <label>
  <span class="label-with-icon">
    <svg viewBox="0 0 24 24">
      <path d="M12 2v20M5 15l7 7 7-7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M5 9l7-7 7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    Deck Width <span class="unit-label">(mm)</span>
    <span class="tooltip"><span class="tooltip-icon">?</span><span class="tooltiptext">e.g., 4000mm for a 4 meter wide deck</span></span>
  </span>
            <input type="number" id="deckWidth" min="500" max="50000" step="1" required data-base-unit="mm">
            <span class="error-message" id="deckWidth-error"></span>
        </label>
        <label>🏭 Manufacturer
            <select id="manufacturer" required>
                <option value="">-- Select Manufacturer --</option>
                <option value="timber">Generic Timber</option>
                <option value="ecodek">Ecodek</option>
                <option value="trex">Trex</option>
            </select>
        </label>
        <label>📋 Board Range
            <select id="boardType" required disabled>
                <option value="">-- Select Manufacturer First --</option>
            </select>
        </label>
        <label>🎨 Colour
            <select id="boardColour" disabled>
                <option value="">-- Select Board First --</option>
            </select>
        </label>
        <label id="boardWidthSelectRow" style="display:none;"><span class="label-header">📐 Board Width
            <span class="tooltip"><span class="tooltip-icon">?</span><span class="tooltiptext">Select the board face width</span></span>
        </span>
            <select id="boardWidthSelect">
                <option value="">-- Select Width --</option>
            </select>
        </label>
        <label><span class="label-header">📏 Board Width <span class="unit-label">(mm)</span>
            <span class="tooltip"><span class="tooltip-icon">?</span><span class="tooltiptext">Typical: 138mm for standard boards, 120mm or 144mm for composite</span></span>
        </span><input type="number" id="boardWidth" value="138" min="50" max="500" step="1" required data-base-unit="mm">
            <span class="error-message" id="boardWidth-error"></span>
        </label>
        <label><span class="label-header">📐 Board Gap <span class="unit-label">(mm)</span>
            <span class="tooltip"><span class="tooltip-icon">?</span><span class="tooltiptext">Recommended: 6mm for timber, 5-8mm for composite (allows for expansion)</span></span>
        </span><input type="number" id="boardGap" value="6" min="0" max="50" step="0.5" required data-base-unit="mm">
            <span class="error-message" id="boardGap-error"></span>
        </label>
        <label>
        <span class="label-with-icon">
            📐 Board Length <span class="unit-label">(mm)</span>
            <label class="toggle-switch" style="display: inline-block; margin-left: 10px;" title="Auto-set board length based on deck dimensions">
                <input type="checkbox" id="autoSetBoardLength" checked>
                <span class="slider"></span>
            </label>
            <span style="font-size: 0.85em; color: #666;">Auto</span>
        </span>
            <input type="number" id="boardLength" value="3600" min="1000" max="10000" step="1" required data-base-unit="mm">
            <span class="error-message" id="boardLength-error"></span>
            <span style="font-size: 0.85em; color: #666;" id="boardLengthHint">Auto-set based on board direction</span>
        </label>
        <label><span class="label-header">⚠️ Board Wastage Factor (%)
            <span class="tooltip"><span class="tooltip-icon">?</span><span class="tooltiptext">Extra boards to account for cutting errors and damaged boards. Recommended: 10% for standard jobs, 15% for complex cuts</span></span>
        </span>
            <input type="number" id="wastageFactor" value="10" min="0" max="50" step="1">
            <span class="error-message" id="wastageFactor-error"></span>
        </label>
        <label><span class="label-header">⚠️ Timber Wastage Factor (%)
            <span class="tooltip"><span class="tooltip-icon">?</span><span class="tooltiptext">Extra timber for cutting errors and damaged pieces. Recommended: 5% for simple jobs, 10-15% for complex projects</span></span>
        </span>
            <input type="number" id="timberWastageFactor" value="5" min="0" max="30" step="1">
            <span class="error-message" id="timberWastageFactor-error"></span>
        </label>
        <label><span class="label-header">🔧 Joist Spacing (mm)
            <span class="tooltip">
            <span class="tooltip-icon">?</span>
            <span class="tooltiptext">Distance between joists. 400mm is standard for most decking, 600mm for thicker boards only</span>
        </span></span>
            <select id="joistSpacing">
                <option value="400">400mm</option>
                <option value="450">450mm</option>
                <option value="600">600mm</option>
            </select>
        </label>
        <label><span class="label-header">🎨 Deck Style
            <span class="tooltip">
            <span class="tooltip-icon">?</span>
            <span class="tooltiptext">Choose between standard deck (all boards same direction) or picture frame deck (decorative border)</span>
        </span></span>
            <select id="deckStyle">
                <option value="standard">Standard Deck</option>
                <option value="picture-frame">Picture Frame Deck</option>
            </select>
        </label>

        <label id="boardDirectionLabel"><span class="label-header">🧭 Board Direction
            <span class="tooltip">
            <span class="tooltip-icon">?</span>
            <span class="tooltiptext">Direction boards run relative to deck dimensions. Affects joist placement and material calculations</span>
        </span></span>
            <select id="boardDirection">
                <option value="width">Widthways ↕</option>
                <option value="length">Lengthways ↔</option>
            </select>
        </label>

        <label><span class="label-header">🏗️ Deck Height from Ground <span class="unit-label">(mm)</span></span><input type="number" id="deckHeight" value="138" min="0" max="5000" step="1" required data-base-unit="mm">
            <span class="error-message" id="deckHeight-error"></span>
        </label>

        <label>🪵 Timber Length Available (m)
            <select id="timberLength" required>
                <option value="">Choose an Option...</option>
                <option value="2.4">2.4m</option>
                <option value="3">3.0m</option>
                <option value="3.6">3.6m</option>
                <option value="4.2">4.2m</option>
                <option value="4.8">4.8m</option>
            </select>
            <span class="error-message" id="timberLength-error"></span>
            <span id="timberLengthHint" style="display:none; font-size:0.82em; color: var(--brand-primary, #2e7d32); font-weight:600; margin-top:3px;"></span>
        </label>

        <div id="pictureFrameOptions" style="display: none;">
            <label><span class="label-header">🖼️ Border Width
                <span class="tooltip">
                <span class="tooltip-icon">?</span>
                <span class="tooltiptext">Width of decorative border around deck perimeter. Border boards run perpendicular to field boards</span>
            </span></span>
                <select id="borderWidth">
                    <option value="single">Single Board (~138mm)</option>
                    <option value="double">Double Board (~276mm)</option>
                    <option value="custom">Custom Width</option>
                </select>
            </label>

            <label id="customBorderWidthLabel" style="display: none;">
                <span class="label-header">Custom Border Width <span class="unit-label">(mm)</span></span>
                <input type="number" id="customBorderWidth" min="100" max="500" value="138" step="1" data-base-unit="mm">
                <span class="error-message" id="customBorderWidth-error"></span>
            </label>

            <label><span class="label-header">🧭 Field Board Direction
                <span class="tooltip">
                <span class="tooltip-icon">?</span>
                <span class="tooltiptext">Direction of field boards (inside the border). Border boards will run perpendicular to this</span>
            </span></span>
                <select id="fieldBoardDirection">
                    <option value="width">Widthways ↕</option>
                    <option value="length">Lengthways ↔</option>
                </select>
            </label>

            <div class="info-box" style="margin: 10px 0; padding: 10px; background: #e3f2fd; border-left: 4px solid #2196F3; font-size: 0.9em;">
                <strong>ℹ️ Picture Frame Note:</strong><br>
                Border boards run perpendicular to field boards, creating a decorative frame effect.
                All corners require 45° miter cuts. Recommended wastage: 15% (vs 10% standard).
            </div>
        </div>

        <div class="fascia-balustrade-group">
        <div class="fascia-section">
            <label class="balustrade-toggle-label">
                <input type="checkbox" id="includeFascia">
                Include Fascia Boards
            </label>

            <div id="fasciaOptions" style="display: none;">
                <fieldset>
                    <legend>Fascia Sides (click to select)</legend>
                    <div class="fascia-grid">
                        <div class="fascia-button fascia-top" id="faciaFront" data-side="front">Front</div>
                        <div class="fascia-button fascia-left" id="faciaLeft" data-side="left">Left</div>
                        <div class="fascia-center">Deck</div>
                        <div class="fascia-button fascia-right" id="faciaRight" data-side="right">Right</div>
                        <div class="fascia-button fascia-bottom" id="faciaBack" data-side="back">Back</div>
                    </div>
                </fieldset>
                <div class="fascia-inputs">
                    <label><span class="label-header">Fascia Board Length <span class="unit-label">(mm)</span></span><input type="number" id="faciaBoardLength" value="3600" min="1000" max="10000" step="1" required data-base-unit="mm">
                        <span class="error-message" id="faciaBoardLength-error"></span>
                    </label>
                    <label><span class="label-header">Fascia Board Height <span class="unit-label">(mm)</span></span><input type="number" id="faciaBoardHeight" value="138" min="50" max="500" step="1" required data-base-unit="mm">
                        <span class="error-message" id="faciaBoardHeight-error"></span>
                    </label>
                </div>
            </div>
        </div>

        <!-- Balustrade / Railing Section -->
        <div class="balustrade-section">
            <label class="balustrade-toggle-label">
                <input type="checkbox" id="includeBalustrade">
                🛡️ Include Balustrade / Railing
            </label>

            <div id="balustradeOptions" style="display: none;">
                <div class="info-box" style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 10px; margin: 10px 0;">
                    <strong>⚠️ UK Building Regulations:</strong><br>
                    Balustrade required for decks over 600mm high (min height: 1100mm).<br>
                    Max baluster spacing: 99mm | Max post spacing: 1800mm
                </div>

                <label>Balustrade Type
                    <select id="balustradeType">
                        <option value="timber">Timber (Traditional)</option>
                        <option value="glass">Glass Panels (Premium)</option>
                        <option value="metal">Metal / Steel (Modern)</option>
                    </select>
                </label>

                <fieldset>
                    <legend>Select Sides with Balustrade (click to select)</legend>
                    <div class="fascia-grid">
                        <div class="fascia-button fascia-top" id="balustradeFront" data-side="front">Front</div>
                        <div class="fascia-button fascia-left" id="balustradeLeft" data-side="left">Left</div>
                        <div class="fascia-center">Deck</div>
                        <div class="fascia-button fascia-right" id="balustradeRight" data-side="right">Right</div>
                        <div class="fascia-button fascia-bottom" id="balustradeBack" data-side="back">Back</div>
                    </div>
                </fieldset>

                <div class="gate-section">
                    <label class="gate-toggle">
                        <input type="checkbox" id="includeGate">
                        🚪 Include Gate
                    </label>

                    <div id="gateOptions" style="display: none; margin-left: 20px;">
                        <label>Gate Side
                            <select id="gateSide">
                                <option value="front">Front</option>
                                <option value="back">Back</option>
                                <option value="left">Left</option>
                                <option value="right">Right</option>
                            </select>
                        </label>

                        <label>Gate Width
                            <select id="gateWidth">
                                <option value="600">600mm (Narrow)</option>
                                <option value="750">750mm (Standard)</option>
                                <option value="900" selected>900mm (Wide)</option>
                                <option value="1000">1000mm (Double-wide)</option>
                            </select>
                        </label>
                    </div>
                </div>

                <details class="advanced-balustrade">
                    <summary>⚙️ Advanced Options</summary>
                    <div style="padding: 10px 0;">
                        <label><span class="label-header">Post Spacing <span class="unit-label">(mm)</span></span>
                            <select id="postSpacing">
                                <option value="1500">1500mm (Closer)</option>
                                <option value="1800" selected>1800mm (Standard)</option>
                            </select>
                        </label>

                        <label><span class="label-header">Baluster Spacing <span class="unit-label">(mm)</span></span>
                            <select id="balusterSpacing">
                                <option value="85">85mm (Very Close)</option>
                                <option value="90">90mm (Close)</option>
                                <option value="95" selected>95mm (Standard)</option>
                                <option value="99">99mm (Max - Building Regs)</option>
                            </select>
                            <small style="color: #666;">Applies to timber only (glass has solid panels)</small>
                        </label>

                        <label><span class="label-header">Balustrade Height <span class="unit-label">(mm)</span></span>
                            <input type="number" id="balustradeHeight" value="1100" min="1100" max="1500" step="10">
                            <small style="color: #666;">Min 1100mm for decks >600mm high</small>
                        </label>
                    </div>
                </details>
            </div>
        </div>
        </div><!-- end fascia-balustrade-group -->

        <div class="toggle-group">
            <div class="toggle-wrapper">
            <span>Stakes
                <span class="tooltip">
                    <span class="tooltip-icon">?</span>
                    <span class="tooltiptext">Support posts placed at 1m intervals to support the deck frame and joists</span>
                </span>
            </span>
                <label class="toggle-switch">
                    <input type="checkbox" id="includeStakes" checked>
                    <span class="slider"></span>
                </label>
            </div>

            <div class="toggle-wrapper">
            <span>Deck Tape
                <span class="tooltip">
                    <span class="tooltip-icon">?</span>
                    <span class="tooltiptext">Protective tape applied to joists before deck board installation to prevent moisture damage</span>
                </span>
            </span>
                <label class="toggle-switch">
                    <input type="checkbox" id="includeTape">
                    <span class="slider"></span>
                </label>
            </div>

            <div class="toggle-wrapper">
            <span>Membrane
                <span class="tooltip">
                    <span class="tooltip-icon">?</span>
                    <span class="tooltiptext">Weed control membrane placed under deck to prevent weed growth</span>
                </span>
            </span>
                <label class="toggle-switch">
                    <input type="checkbox" id="includeMembrane">
                    <span class="slider"></span>
                </label>
            </div>
        </div>

        <div class="button-group">
            <button type="button" id="calculateBtn" class="full-width">Calculate</button>
            <button type="button" id="clearBtn" class="clear-btn">Clear All</button>
        </div>
    </form>

    <div class="results" id="results" style="display: none;" role="region" aria-label="Calculation Results" aria-live="polite">

        <div class="results-grid">
            <div>
                <h2>Results</h2>
                <p id="deckArea"></p>
                <p id="joistCount"></p>
                <p id="frameLength"></p>
                <p id="joistLength"></p>
                <p id="nogginInfo"></p>
                <p id="stakeCount"></p>
                <p id="timberLengthMetres"></p>

                <h3>Material List</h3>
                <p id="totalTimber"></p>
                <p id="boardCount"></p>
                <p id="fasciaInfo"></p>

                <h4>Sundries</h4>
                <p id="screwCountFraming"></p>
                <p id="screwCountNoggins"></p>
                <p id="deckTapeRolls" style="display: none;"></p>
                <p id="membraneRolls" style="display: none;"></p>

                <h3>Waste Summary</h3>
                <div id="wasteSummary">
                    <p id="wasteBoards"></p>
                    <p id="wasteTimber"></p>
                    <p id="wasteTotalCost"></p>
                    <p id="wasteEfficiency"></p>
                </div>



            </div>

            <div>
                <h3>Tools Required</h3>
                <ul id="toolsList">
                    <li>Impact Driver / Combi Drill</li>
                    <li>Mitre Saw / Circular Saw</li>
                    <li>Spirit Level</li>
                    <li>Measuring Tape</li>
                    <li>Square (for marking)</li>
                    <li>Post Level (if using stakes)</li>
                    <li>Rubber Mallet / Sledge Hammer</li>
                    <li>String Line (for alignment)</li>
                    <li>Utility Knife (for membrane or tape)</li>
                    <li>Deck Board Spacers (optional)</li>
                </ul>

                <h3>Rough Estimate for Customer</h3>
                <p id="estimateSelectedBoard" style="font-size: 1.1em; font-weight: bold;"></p>

                <h4>Total Cost Estimate <span style="font-size:0.8em; font-weight:normal; color:#666;">— uncheck to exclude</span></h4>
                <ul id="estimateBreakdown">
                    <li class="cost-line"><label><input type="checkbox" class="cost-toggle" data-target="estBoards" checked> Deck Boards: &pound;<span id="estBoards">-</span></label></li>
                    <li class="cost-line"><label><input type="checkbox" class="cost-toggle" data-target="estTimber42" checked> Framing Timber (4x2"): &pound;<span id="estTimber42">-</span></label></li>
                    <li class="cost-line"><label><input type="checkbox" class="cost-toggle" data-target="estLabour" checked> Labour: &pound;<span id="estLabour">-</span></label></li>
                    <li class="cost-line"><label><input type="checkbox" class="cost-toggle" data-target="estFixings" checked> Fixings: &pound;<span id="estFixings">-</span></label></li>
                    <li id="estTapeRow" class="cost-line" style="display: none;"><label><input type="checkbox" class="cost-toggle" data-target="estTape" checked> Deck Tape: &pound;<span id="estTape">-</span></label></li>
                    <li id="estMembraneRow" class="cost-line" style="display: none;"><label><input type="checkbox" class="cost-toggle" data-target="estMembrane" checked> Weed Membrane: &pound;<span id="estMembrane">-</span></label></li>
                    <li id="estBalustradeRow" class="cost-line" style="display: none;"><label><input type="checkbox" class="cost-toggle" data-target="estBalustrade" checked> Balustrade: &pound;<span id="estBalustrade">-</span></label></li>
                    <li id="estDeliveryRow" class="cost-line" style="display: none;"><label><input type="checkbox" class="cost-toggle" data-target="estDelivery" checked> Delivery: &pound;<span id="estDelivery">-</span></label></li>
                    <li class="cost-total-line"><strong>Total: &pound;<span id="estTotal">-</span></strong></li>
                </ul>

                <!-- Balustrade Detailed Breakdown (shown when balustrade is included) -->
                <div id="balustradeBreakdown" style="display: none; margin-top: 20px; padding: 15px; background: #f8f9fa; border-left: 4px solid #6c757d; border-radius: 4px;">
                    <h4 style="margin-top: 0;">🛡️ Balustrade Breakdown</h4>
                    <div id="balustradeDetails"></div>
                </div>

                <!-- Manufacturer Comparison (shown after first calculation) -->
                <div id="manufacturerComparison" style="display: none; margin-top: 24px;">
                    <h4 style="margin-top: 0; margin-bottom: 12px;">Brand Comparison — Same Deck Spec</h4>
                    <p style="font-size: 0.85em; color: #666; margin-bottom: 12px;">Board cost only (same framing, labour &amp; sundries apply to all).</p>
                    <div id="comparisonTable"></div>
                </div>


                <!-- Optimised Cut List (framing timber breakdown) -->
                <div id="cutListSection" style="display: none; margin-top: 20px;">
                    <h3>Framing Timber Cut List</h3>
                    <div id="cutListTable"></div>
                </div>

            </div>
        </div>
    </div>

    <div class="combined-totals" id="combinedTotals" style="display: none;">
        <h2>Combined Totals - All Deck Areas</h2>

        <div id="combinedAreasList" class="combined-areas-summary"></div>

        <div class="combined-results-grid">
            <div>
                <h3>Combined Material List</h3>
                <p id="combinedTotalArea"></p>
                <p id="combinedTotalBoards"></p>
                <p id="combinedTotalTimber"></p>
                <p id="combinedTotalFascia"></p>

                <h4>Combined Sundries</h4>
                <p id="combinedScrews"></p>
                <p id="combinedTape"></p>
                <p id="combinedMembrane"></p>
            </div>

            <div>
                <h3>Combined Cost Estimate</h3>
                <ul id="combinedCostBreakdown">
                    <li>Deck Boards: &pound;<span id="combinedEstBoards">-</span></li>
                    <li>Framing Timber: &pound;<span id="combinedEstTimber">-</span></li>
                    <li>Labour: &pound;<span id="combinedEstLabour">-</span></li>
                    <li>Fixings: &pound;<span id="combinedEstFixings">-</span></li>
                    <li id="combinedEstTapeRow" style="display: none;">Deck Tape: &pound;<span id="combinedEstTape">-</span></li>
                    <li id="combinedEstMembraneRow" style="display: none;">Weed Membrane: &pound;<span id="combinedEstMembrane">-</span></li>
                    <li id="combinedEstDeliveryRow" style="display: none;">Delivery: &pound;<span id="combinedEstDelivery">-</span></li>
                    <li><strong>Grand Total: &pound;<span id="combinedEstTotal">-</span></strong></li>
                </ul>
            </div>
        </div>

        <div class="combined-totals-actions">
            <button type="button" id="exportCombinedTotalsBtn" class="export-combined-btn">📥 Export Combined Quote</button>
            <button type="button" id="printCombinedTotalsBtn" class="print-combined-btn">🖨️ Print Combined Totals</button>
        </div>
    </div>

    <div id="visual" class="toggle-drawing-lines" style="display: none;" role="region" aria-label="Deck Visual Diagram">
        <div class="toggle-group" style="justify-content: center;">
            <div class="toggle-wrapper">
                <span>Frame</span>
                <label class="toggle-switch">
                    <input type="checkbox" id="toggleFrame" checked>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="toggle-wrapper">
                <span>Joists</span>
                <label class="toggle-switch">
                    <input type="checkbox" id="toggleJoists" checked>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="toggle-wrapper">
                <span>Deck Boards</span>
                <label class="toggle-switch">
                    <input type="checkbox" id="toggleBoards" checked>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="toggle-wrapper">
                <span>Fascia</span>
                <label class="toggle-switch">
                    <input type="checkbox" id="toggleFascia" checked>
                    <span class="slider"></span>
                </label>
            </div>
            <div class="toggle-wrapper">
                <span>Stakes</span>
                <label class="toggle-switch">
                    <input type="checkbox" id="toggleStakes">
                    <span class="slider"></span>
                </label>
            </div>
            <div class="toggle-wrapper">
                <span>Noggins</span>
                <label class="toggle-switch">
                    <input type="checkbox" id="toggleNoggins">
                    <span class="slider"></span>
                </label>
            </div>
        </div>

        <div class="canvas-controls">
            <button id="zoomInBtn" class="canvas-control-btn" title="Zoom In">🔍+</button>
            <button id="zoomOutBtn" class="canvas-control-btn" title="Zoom Out">🔍−</button>
            <button id="resetZoomBtn" class="canvas-control-btn" title="Reset Zoom">↺</button>
            <button id="fullscreenBtn" class="canvas-control-btn" title="Fullscreen">⛶</button>
        </div>

        <div id="canvasContainer" class="canvas-container">
            <canvas id="deckCanvas" width="2000" height="1600" role="img" aria-label="Deck design diagram showing layout of boards, joists, and frame"></canvas>
        </div>

        <button id="downloadCanvasBtn">Download Drawing</button>
        <button id="printButton">Print Results</button>
        <button id="printCutListBtn">📋 Print Cut List</button>
        <button id="printQuoteBtn" style="background: #2196F3; color: white;">📄 Customer Quote (PDF)</button>
    </div>

    <!-- Project Management -->
    <div class="project-management">
        <div class="project-header">
            <div class="project-name-group">
                <label for="projectName">Project Name:</label>
                <input type="text" id="projectName" class="project-name-input" value="Untitled Project" placeholder="Enter project name">
            </div>
        </div>
        <div class="project-notes-group">
            <label for="projectNotes">Project Notes:</label>
            <textarea id="projectNotes" class="project-notes-input" placeholder="Add notes about this project (e.g., client preferences, special requirements, location details...)" rows="2"></textarea>
        </div>
        <div class="cloud-sync-header">
            <span class="cloud-icon">📁</span>
            <span class="cloud-sync-title">Project Management</span>
        </div>
        <div class="cloud-sync-actions">
            <button type="button" id="saveProjectBtn" class="cloud-btn save-project-btn" title="Save current project">
                <span class="btn-icon">💾</span> Save Project
            </button>
            <button type="button" id="loadProjectBtn" class="cloud-btn load-project-btn" title="Load a saved project">
                <span class="btn-icon">📂</span> Load Project
            </button>
            <button type="button" id="newProjectBtn" class="cloud-btn new-project-btn" title="Close current project and start fresh">
                <span class="btn-icon">📄</span> New Project
            </button>
            <button type="button" id="manageProjectsBtn" class="cloud-btn manage-projects-btn" title="View and manage all projects">
                <span class="btn-icon">📋</span> Manage Projects
            </button>
        </div>
    </div>
@endsection

@push('page-scripts')
    @vite(['resources/js/tools/estimator_prices.js', 'resources/js/tools/estimator.js'])
@endpush