@extends('layouts.app')
@section('page-title', 'Staircase Calculator')

@push('page-css')
<style>
/* Staircase Calculator */
.stair-page { max-width: 960px; margin: 0 auto; padding: 24px 20px; }
.stair-page h1 { font-size: 1.6rem; margin: 0 0 6px 0; color: #333; }
.stair-page .page-desc { color: #666; font-size: 0.92rem; margin: 0 0 24px 0; }

.stair-form {
    background: #fff; border: 1px solid #e0e0e0;
    border-radius: var(--brand-border-radius, 8px);
    padding: 28px 24px; margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.stair-form .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.stair-form .form-group label {
    display: block; margin-bottom: 6px; font-weight: 600;
    font-size: 0.88rem; color: #444;
}
.stair-form .form-group input,
.stair-form .form-group select {
    width: 100%; padding: 10px 12px; border: 1px solid #d0d0d0;
    border-radius: var(--brand-border-radius, 6px); font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff; color: #333; box-sizing: border-box;
}
.stair-form .form-group input:focus,
.stair-form .form-group select:focus {
    outline: none; border-color: var(--brand-primary, #4CAF50);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #4CAF50) 15%, transparent);
}
.stair-form .form-group small { display: block; margin-top: 4px; color: #888; font-size: 0.78rem; }

.stair-submit {
    margin-top: 24px; padding: 12px 32px;
    background: var(--brand-primary, #4CAF50); color: #fff; border: none;
    border-radius: var(--brand-border-radius, 6px);
    font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: background 0.2s, transform 0.15s; width: 100%;
}
.stair-submit:hover { background: var(--brand-primary-dark, #388E3C); transform: translateY(-1px); }

/* Results */
.stair-results { display: none; }

.stair-card {
    background: #fff; border: 1px solid #e0e0e0;
    border-radius: var(--brand-border-radius, 8px);
    margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden;
}
.stair-card-header { padding: 16px 20px; border-bottom: 1px solid #eee; }
.stair-card-header h2 { margin: 0; font-size: 1.15rem; color: #333; }
.stair-card-body { padding: 20px; }

.stair-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.stair-stat { text-align: center; padding: 16px; background: #f8f9fa; border-radius: var(--brand-border-radius, 6px); }
.stair-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--brand-primary, #4CAF50); line-height: 1.2; }
.stair-stat-label { font-size: 0.82rem; color: #666; margin-top: 4px; }

.stair-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.stair-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid #eee; color: #555; font-weight: 600; }
.stair-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; color: #333; }
.stair-table tr:last-child td { border-bottom: none; }

/* Compliance badges */
.stair-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 0.78rem; font-weight: 700; }
.stair-badge-pass { background: #dcfce7; color: #166534; }
.stair-badge-fail { background: #fef2f2; color: #991b1b; }
.stair-badge-warn { background: #fef3cd; color: #856404; }

.stair-compliance { margin-top: 12px; }
.stair-compliance-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem;
}
.stair-compliance-item:last-child { border-bottom: none; }
.stair-compliance-label { flex: 1; color: #555; }
.stair-compliance-value { font-weight: 600; color: #333; min-width: 100px; }

/* Summary card */
.stair-summary { background: var(--brand-primary, #4CAF50); border-color: var(--brand-primary, #4CAF50); }
.stair-summary .stair-card-header { border-bottom-color: rgba(255,255,255,0.15); }
.stair-summary .stair-card-header h2 { color: #fff; }
.stair-summary .stair-card-body { color: #fff; }
.stair-summary .stair-stat { background: rgba(255,255,255,0.15); }
.stair-summary .stair-stat-value { color: #fff; }
.stair-summary .stair-stat-label { color: rgba(255,255,255,0.8); }

/* Diagram */
.stair-diagram-box {
    border: 1px solid #e0e0e0; padding: 20px; background: #fafafa;
    border-radius: var(--brand-border-radius, 6px); text-align: center;
    overflow-x: auto;
}
.stair-diagram-box svg { max-width: 100%; height: auto; }

/* ===== Dark Mode ===== */
body.dark-mode .stair-page h1 { color: #f0f0f0; }
body.dark-mode .stair-page .page-desc { color: #aaa; }
body.dark-mode .stair-form { background: #2d2d2d; border-color: #404040; }
body.dark-mode .stair-form .form-group label { color: #ccc; }
body.dark-mode .stair-form .form-group input,
body.dark-mode .stair-form .form-group select { background: #1e1e1e; border-color: #505050; color: #e0e0e0; }
body.dark-mode .stair-card { background: #2d2d2d; border-color: #404040; }
body.dark-mode .stair-card-header { border-bottom-color: #404040; }
body.dark-mode .stair-card-header h2 { color: #f0f0f0; }
body.dark-mode .stair-stat { background: #383838; }
body.dark-mode .stair-table th { color: #ccc; border-bottom-color: #404040; }
body.dark-mode .stair-table td { color: #ddd; border-bottom-color: #383838; }
body.dark-mode .stair-compliance-item { border-bottom-color: #404040; }
body.dark-mode .stair-compliance-label { color: #aaa; }
body.dark-mode .stair-compliance-value { color: #ddd; }
body.dark-mode .stair-diagram-box { background: #1e1e1e; border-color: #404040; }
body.dark-mode .stair-badge-pass { background: #064e3b; color: #6ee7b7; }
body.dark-mode .stair-badge-fail { background: #451a1a; color: #fca5a5; }

/* ===== Theme overrides ===== */
body.theme-forest .stair-form, body.theme-forest .stair-card { background: #243020; border-color: #3d5235; }
body.theme-forest .stair-form .form-group label { color: #b8d4a8; }
body.theme-forest .stair-form .form-group input, body.theme-forest .stair-form .form-group select { background: #1a2418; border-color: #3d5235; color: #b8d4a8; }
body.theme-forest .stair-card-header { border-bottom-color: #3d5235; }
body.theme-forest .stair-card-header h2 { color: #b8d4a8; }
body.theme-forest .stair-page h1 { color: #b8d4a8; }
body.theme-forest .stair-page .page-desc { color: #8aaa78; }
body.theme-forest .stair-stat { background: #1a2418; }
body.theme-forest .stair-table th { color: #8aaa78; }
body.theme-forest .stair-table td { color: #b8d4a8; }
body.theme-forest .stair-diagram-box { background: #1a2418; border-color: #3d5235; }

body.theme-ocean .stair-form, body.theme-ocean .stair-card { background: #1c2636; border-color: #2e4460; }
body.theme-ocean .stair-form .form-group label { color: #a0c4e8; }
body.theme-ocean .stair-form .form-group input, body.theme-ocean .stair-form .form-group select { background: #141e2e; border-color: #2e4460; color: #a0c4e8; }
body.theme-ocean .stair-card-header { border-bottom-color: #2e4460; }
body.theme-ocean .stair-card-header h2 { color: #a0c4e8; }
body.theme-ocean .stair-page h1 { color: #a0c4e8; }
body.theme-ocean .stair-page .page-desc { color: #7a9ab8; }
body.theme-ocean .stair-stat { background: #141e2e; }
body.theme-ocean .stair-table th { color: #7a9ab8; }
body.theme-ocean .stair-table td { color: #a0c4e8; }
body.theme-ocean .stair-diagram-box { background: #141e2e; border-color: #2e4460; }

body.theme-slate .stair-form, body.theme-slate .stair-card { background: #faf7f2; border-color: #c8bfb0; }
body.theme-slate .stair-form .form-group label { color: #504840; }
body.theme-slate .stair-form .form-group input, body.theme-slate .stair-form .form-group select { background: #f5f0e8; border-color: #c8bfb0; color: #504840; }
body.theme-slate .stair-card-header { border-bottom-color: #c8bfb0; }
body.theme-slate .stair-card-header h2 { color: #504840; }
body.theme-slate .stair-page h1 { color: #504840; }
body.theme-slate .stair-page .page-desc { color: #8b7d6b; }
body.theme-slate .stair-stat { background: #f5f0e8; }
body.theme-slate .stair-table th { color: #8b7d6b; }
body.theme-slate .stair-table td { color: #504840; }
body.theme-slate .stair-diagram-box { background: #f5f0e8; border-color: #c8bfb0; }

body.theme-sunset .stair-form, body.theme-sunset .stair-card { background: #fff8f5; border-color: #e0bfb0; }
body.theme-sunset .stair-form .form-group label { color: #6b3f35; }
body.theme-sunset .stair-form .form-group input, body.theme-sunset .stair-form .form-group select { background: #fdf5f0; border-color: #e0bfb0; color: #6b3f35; }
body.theme-sunset .stair-card-header { border-bottom-color: #e0bfb0; }
body.theme-sunset .stair-card-header h2 { color: #6b3f35; }
body.theme-sunset .stair-page h1 { color: #6b3f35; }
body.theme-sunset .stair-page .page-desc { color: #a06858; }
body.theme-sunset .stair-stat { background: #fdf5f0; }
body.theme-sunset .stair-table th { color: #a06858; }
body.theme-sunset .stair-table td { color: #6b3f35; }
body.theme-sunset .stair-diagram-box { background: #fdf5f0; border-color: #e0bfb0; }

@media (max-width: 640px) {
    .stair-form .form-grid { grid-template-columns: 1fr; }
    .stair-stat-grid { grid-template-columns: 1fr 1fr; }
}
</style>
@endpush

@section('content')
<div class="stair-page">
    <h1>Staircase Calculator</h1>
    <p class="page-desc">Calculate stair dimensions compliant with UK Building Regs (Approved Document K).</p>

    <form id="stairForm" class="stair-form">
        <div class="form-grid">
            <div class="form-group">
                <label for="totalRise">Total Rise (mm)</label>
                <input type="number" id="totalRise" min="100" required placeholder="e.g. 2600">
                <small>Floor-to-floor height</small>
            </div>
            <div class="form-group">
                <label for="availableGoing">Available Going (mm)</label>
                <input type="number" id="availableGoing" min="100" required placeholder="e.g. 3800">
                <small>Horizontal distance available</small>
            </div>
            <div class="form-group">
                <label for="stairWidth">Stair Width (mm)</label>
                <input type="number" id="stairWidth" min="600" required placeholder="e.g. 860">
                <small>Min 800mm for private stairs</small>
            </div>
            <div class="form-group">
                <label for="materialType">Material</label>
                <select id="materialType">
                    <option value="softwood">Softwood</option>
                    <option value="hardwood">Hardwood</option>
                    <option value="composite">Composite</option>
                </select>
            </div>
        </div>
        <button type="submit" class="stair-submit">Calculate</button>
    </form>

    <div id="stairResults" class="stair-results">
        {{-- Dimensions --}}
        <div class="stair-card stair-summary">
            <div class="stair-card-header"><h2>Stair Dimensions</h2></div>
            <div class="stair-card-body">
                <div class="stair-stat-grid" id="stairStats"></div>
            </div>
        </div>

        {{-- Compliance --}}
        <div class="stair-card">
            <div class="stair-card-header"><h2>UK Building Regs Compliance</h2></div>
            <div class="stair-card-body">
                <div class="stair-compliance" id="complianceList"></div>
            </div>
        </div>

        {{-- Materials --}}
        <div class="stair-card">
            <div class="stair-card-header"><h2>Material List</h2></div>
            <div class="stair-card-body">
                <table class="stair-table">
                    <thead><tr><th>Item</th><th>Quantity</th><th>Size / Notes</th></tr></thead>
                    <tbody id="stairMaterialTable"></tbody>
                </table>
            </div>
        </div>

        {{-- Diagram --}}
        <div class="stair-card">
            <div class="stair-card-header"><h2>Side Profile</h2></div>
            <div class="stair-card-body">
                <div class="stair-diagram-box" id="stairDiagram"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('page-scripts')
<script>
(function() {
    document.getElementById('stairForm').addEventListener('submit', function(e) {
        e.preventDefault();
        calculate();
    });

    function getVal(id) { return parseFloat(document.getElementById(id).value) || 0; }

    function calculate() {
        const totalRise = getVal('totalRise');
        const availableGoing = getVal('availableGoing');
        const stairWidth = getVal('stairWidth');
        const material = document.getElementById('materialType').value;

        if (!totalRise || !availableGoing || !stairWidth) return;

        // Calculations
        const numRisers = Math.ceil(totalRise / 220); // max 220mm per UK regs
        const riserHeight = totalRise / numRisers;
        const numTreads = numRisers - 1;
        const goingDepth = availableGoing / numTreads;
        const twoRplusG = 2 * riserHeight + goingDepth;
        const stringerLength = Math.sqrt(totalRise * totalRise + availableGoing * availableGoing) + 100;
        const pitchAngle = Math.atan(totalRise / availableGoing) * (180 / Math.PI);

        // Stats
        document.getElementById('stairStats').innerHTML = `
            <div class="stair-stat"><div class="stair-stat-value">${numRisers}</div><div class="stair-stat-label">Risers</div></div>
            <div class="stair-stat"><div class="stair-stat-value">${riserHeight.toFixed(1)}</div><div class="stair-stat-label">Rise (mm)</div></div>
            <div class="stair-stat"><div class="stair-stat-value">${numTreads}</div><div class="stair-stat-label">Treads</div></div>
            <div class="stair-stat"><div class="stair-stat-value">${goingDepth.toFixed(1)}</div><div class="stair-stat-label">Going (mm)</div></div>
            <div class="stair-stat"><div class="stair-stat-value">${pitchAngle.toFixed(1)}°</div><div class="stair-stat-label">Pitch Angle</div></div>
            <div class="stair-stat"><div class="stair-stat-value">${stringerLength.toFixed(0)}</div><div class="stair-stat-label">Stringer (mm)</div></div>
        `;

        // Compliance checks
        const checks = [];

        // Rise: 150-220mm for private stairs
        const riseOk = riserHeight >= 150 && riserHeight <= 220;
        checks.push({
            label: 'Individual Rise',
            value: `${riserHeight.toFixed(1)}mm`,
            range: '150–220mm',
            pass: riseOk
        });

        // Going: 220-300mm for private stairs
        const goingOk = goingDepth >= 220 && goingDepth <= 300;
        checks.push({
            label: 'Individual Going',
            value: `${goingDepth.toFixed(1)}mm`,
            range: '220–300mm',
            pass: goingOk
        });

        // 2R+G rule: 550-700mm
        const twoRGok = twoRplusG >= 550 && twoRplusG <= 700;
        checks.push({
            label: '2R + G Formula',
            value: `${twoRplusG.toFixed(0)}mm`,
            range: '550–700mm',
            pass: twoRGok
        });

        // Pitch: max 42° for private stairs
        const pitchOk = pitchAngle <= 42;
        checks.push({
            label: 'Pitch Angle',
            value: `${pitchAngle.toFixed(1)}°`,
            range: 'Max 42°',
            pass: pitchOk
        });

        // Width: min 800mm
        const widthOk = stairWidth >= 800;
        checks.push({
            label: 'Stair Width',
            value: `${stairWidth}mm`,
            range: 'Min 800mm',
            pass: widthOk
        });

        let complianceHtml = checks.map(c => `
            <div class="stair-compliance-item">
                <span class="stair-compliance-label">${c.label} <small>(${c.range})</small></span>
                <span class="stair-compliance-value">${c.value}</span>
                <span class="stair-badge ${c.pass ? 'stair-badge-pass' : 'stair-badge-fail'}">${c.pass ? 'PASS' : 'FAIL'}</span>
            </div>
        `).join('');
        document.getElementById('complianceList').innerHTML = complianceHtml;

        // Material list
        const treadThickness = material === 'composite' ? 25 : (material === 'hardwood' ? 32 : 36);
        const riserThickness = material === 'composite' ? 18 : (material === 'hardwood' ? 18 : 22);
        const stringerSize = material === 'composite' ? '50mm × 250mm' : '38mm × 250mm';

        document.getElementById('stairMaterialTable').innerHTML = `
            <tr><td>Stringers</td><td><strong>2</strong></td><td>${stringerSize} × ${stringerLength.toFixed(0)}mm (${material})</td></tr>
            <tr><td>Treads</td><td><strong>${numTreads}</strong></td><td>${stairWidth}mm × ${goingDepth.toFixed(0)}mm × ${treadThickness}mm</td></tr>
            <tr><td>Risers</td><td><strong>${numRisers}</strong></td><td>${stairWidth}mm × ${riserHeight.toFixed(0)}mm × ${riserThickness}mm</td></tr>
            <tr><td>Newel Posts</td><td><strong>2</strong></td><td>90mm × 90mm × ${(totalRise + 900).toFixed(0)}mm (top + bottom)</td></tr>
            <tr><td>Handrail</td><td><strong>1</strong></td><td>${stringerLength.toFixed(0)}mm length (one side)</td></tr>
            <tr><td>Balusters</td><td><strong>${numTreads * 2}</strong></td><td>32mm × 32mm × 900mm (2 per tread, max 99mm gap)</td></tr>
        `;

        // SVG side-profile diagram
        drawDiagram(numRisers, riserHeight, goingDepth, totalRise, availableGoing);

        document.getElementById('stairResults').style.display = 'block';
        document.getElementById('stairResults').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    function drawDiagram(numRisers, riserHeight, goingDepth, totalRise, availableGoing) {
        const padding = 40;
        const maxW = 500, maxH = 350;
        const scaleX = (maxW - padding * 2) / availableGoing;
        const scaleY = (maxH - padding * 2) / totalRise;
        const scale = Math.min(scaleX, scaleY);

        const w = availableGoing * scale + padding * 2;
        const h = totalRise * scale + padding * 2;
        const numTreads = numRisers - 1;

        let pathD = `M ${padding} ${h - padding}`;
        for (let i = 0; i < numRisers; i++) {
            const x1 = padding + i * goingDepth * scale;
            const y1 = h - padding - i * riserHeight * scale;
            const y2 = h - padding - (i + 1) * riserHeight * scale;
            const x2 = padding + (i < numTreads ? (i + 1) * goingDepth * scale : i * goingDepth * scale);

            // Riser (vertical)
            pathD += ` L ${x1} ${y2}`;
            // Tread (horizontal) — skip on last riser
            if (i < numTreads) {
                pathD += ` L ${x2} ${y2}`;
            }
        }

        const strokeColor = getComputedStyle(document.documentElement).getPropertyValue('--brand-primary').trim() || '#4CAF50';

        const svg = `<svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" xmlns="http://www.w3.org/2000/svg">
            <path d="${pathD}" fill="none" stroke="${strokeColor}" stroke-width="2.5"/>
            <!-- Stringer line -->
            <line x1="${padding}" y1="${h - padding}" x2="${padding + numTreads * goingDepth * scale}" y2="${h - padding - numRisers * riserHeight * scale}" stroke="#999" stroke-width="1" stroke-dasharray="6,4"/>
            <!-- Rise label -->
            <line x1="${padding - 15}" y1="${h - padding}" x2="${padding - 15}" y2="${h - padding - totalRise * scale}" stroke="#888" stroke-width="1"/>
            <text x="${padding - 20}" y="${h - padding - totalRise * scale / 2}" text-anchor="end" font-size="11" fill="#666" dominant-baseline="middle">${totalRise}mm</text>
            <!-- Going label -->
            <line x1="${padding}" y1="${h - padding + 15}" x2="${padding + numTreads * goingDepth * scale}" y2="${h - padding + 15}" stroke="#888" stroke-width="1"/>
            <text x="${padding + numTreads * goingDepth * scale / 2}" y="${h - padding + 30}" text-anchor="middle" font-size="11" fill="#666">${availableGoing}mm</text>
        </svg>`;

        document.getElementById('stairDiagram').innerHTML = svg;
    }
})();
</script>
@endpush