@extends('layouts.app')
@section('page-title', 'Joist Span')

@push('page-css')
<style>
/* Joist Span Calculator */
.joist-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 20px;
}

.joist-page h1 {
    font-size: 1.6rem;
    margin: 0 0 6px 0;
    color: #333;
}

.joist-page .page-desc {
    color: #666;
    font-size: 0.92rem;
    margin: 0 0 24px 0;
}

/* Form Card */
.joist-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);
}

.joist-form .form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.joist-form .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    color: #444;
}

.joist-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;
}

.joist-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);
}

/* Results Card */
.joist-results {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--brand-border-radius, 8px);
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}

.joist-results h2 {
    margin: 0 0 16px 0;
    font-size: 1.15rem;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.joist-output {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    color: var(--brand-primary, #4CAF50);
    padding: 16px 0;
}

.joist-note {
    color: #888;
    font-size: 0.85rem;
    text-align: center;
    margin: 8px 0 0 0;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

/* ===== Dark Mode ===== */
body.dark-mode .joist-page h1 { color: #f0f0f0; }
body.dark-mode .joist-page .page-desc { color: #aaa; }

body.dark-mode .joist-form {
    background: #2d2d2d;
    border-color: #404040;
}

body.dark-mode .joist-form .form-group label { color: #ccc; }

body.dark-mode .joist-form .form-group select {
    background: #1e1e1e;
    border-color: #505050;
    color: #e0e0e0;
}

body.dark-mode .joist-results {
    background: #2d2d2d;
    border-color: #404040;
}

body.dark-mode .joist-results h2 {
    color: #f0f0f0;
    border-bottom-color: #404040;
}

body.dark-mode .joist-note {
    color: #888;
    border-top-color: #404040;
}

/* ===== Theme overrides ===== */
body.theme-forest .joist-form,
body.theme-forest .joist-results { background: #243020; border-color: #3d5235; }
body.theme-forest .joist-form .form-group label { color: #b8d4a8; }
body.theme-forest .joist-form .form-group select { background: #1a2418; border-color: #3d5235; color: #b8d4a8; }
body.theme-forest .joist-results h2 { color: #b8d4a8; border-bottom-color: #3d5235; }
body.theme-forest .joist-page h1 { color: #b8d4a8; }
body.theme-forest .joist-page .page-desc { color: #8aaa78; }
body.theme-forest .joist-note { color: #8aaa78; border-top-color: #3d5235; }

body.theme-ocean .joist-form,
body.theme-ocean .joist-results { background: #1c2636; border-color: #2e4460; }
body.theme-ocean .joist-form .form-group label { color: #a0c4e8; }
body.theme-ocean .joist-form .form-group select { background: #141e2e; border-color: #2e4460; color: #a0c4e8; }
body.theme-ocean .joist-results h2 { color: #a0c4e8; border-bottom-color: #2e4460; }
body.theme-ocean .joist-page h1 { color: #a0c4e8; }
body.theme-ocean .joist-page .page-desc { color: #7a9ab8; }
body.theme-ocean .joist-note { color: #7a9ab8; border-top-color: #2e4460; }

body.theme-slate .joist-form,
body.theme-slate .joist-results { background: #faf7f2; border-color: #c8bfb0; }
body.theme-slate .joist-form .form-group label { color: #504840; }
body.theme-slate .joist-form .form-group select { background: #f5f0e8; border-color: #c8bfb0; color: #504840; }
body.theme-slate .joist-results h2 { color: #504840; border-bottom-color: #c8bfb0; }
body.theme-slate .joist-page h1 { color: #504840; }
body.theme-slate .joist-page .page-desc { color: #8b7d6b; }
body.theme-slate .joist-note { color: #8b7d6b; border-top-color: #c8bfb0; }

body.theme-sunset .joist-form,
body.theme-sunset .joist-results { background: #fff8f5; border-color: #e0bfb0; }
body.theme-sunset .joist-form .form-group label { color: #6b3f35; }
body.theme-sunset .joist-form .form-group select { background: #fdf5f0; border-color: #e0bfb0; color: #6b3f35; }
body.theme-sunset .joist-results h2 { color: #6b3f35; border-bottom-color: #e0bfb0; }
body.theme-sunset .joist-page h1 { color: #6b3f35; }
body.theme-sunset .joist-page .page-desc { color: #a06858; }
body.theme-sunset .joist-note { color: #a06858; border-top-color: #e0bfb0; }

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

@section('content')
<div class="joist-page">
    <h1>Joist Span Calculator</h1>
    <p class="page-desc">Calculate recommended joist spacing based on timber grade, beam size, and load requirements.</p>

    <div class="joist-form">
        <div class="form-grid">
            <div class="form-group">
                <label for="strength">Strength Class</label>
                <select id="strength">
                    <option value="C16">C16 &ndash; Softwood, General Use</option>
                    <option value="C24">C24 &ndash; Higher Grade Softwood</option>
                </select>
            </div>
            <div class="form-group">
                <label for="beamSize">Beam Size</label>
                <select id="beamSize">
                    <option value="">Loading...</option>
                </select>
            </div>
            <div class="form-group">
                <label for="load">Imposed Load</label>
                <select id="load">
                    <option value="1.5">1.5 kN (Domestic)</option>
                    <option value="4">4 kN (Commercial)</option>
                </select>
            </div>
        </div>
    </div>

    <div class="joist-results">
        <h2>Result</h2>
        <div class="joist-output" id="result">Select options to see joist spacing.</div>
        <p class="joist-note">Joist spacing is shown in mm based on maximum span.</p>
    </div>
</div>
@endsection

@push('page-scripts')
<script>
    const spanData = {
        C16: {
            '47x122': { '1.5': { '1.2': 1.58, '1.8': 1.29, '2.4': 1.12, '3': 1.00 }, '4': { '1.2': 1.01 } },
            '47x147': { '1.5': { '1.2': 1.87, '1.8': 1.53, '2.4': 1.32, '3': 1.18, '3.6': 1.06 }, '4': { '1.2': 1.20 } },
            '47x170': { '1.5': { '1.2': 2.16, '1.8': 1.76, '2.4': 1.53, '3': 1.37, '3.6': 1.23, '4.2': 1.05 }, '4': { '1.2': 1.38, '1.8': 1.00 } },
            '47x195': { '1.5': { '1.2': 2.48, '1.8': 2.02, '2.4': 1.75, '3': 1.57, '3.6': 1.41, '4.2': 1.21 }, '4': { '1.2': 1.58, '1.8': 1.15 } },
        },
        C24: {
            '47x122': { '1.5': { '1.2': 1.89, '1.8': 1.58, '2.4': 1.37, '3': 1.23, '3.6': 1.10 }, '4': { '1.2': 1.24 } },
            '47x147': { '1.5': { '1.2': 2.27, '1.8': 1.87, '2.4': 1.62, '3': 1.45, '3.6': 1.32, '4.2': 1.14 }, '4': { '1.2': 1.46, '1.8': 1.08 } },
            '47x170': { '1.5': { '1.2': 2.63, '1.8': 2.16, '2.4': 1.87, '3': 1.67, '3.6': 1.53, '4.2': 1.31 }, '4': { '1.2': 1.69, '1.8': 1.25, '2.4': 1.08 } },
            '47x195': { '1.5': { '1.2': 3.02, '1.8': 2.48, '2.4': 2.15, '3': 1.92, '3.6': 1.75, '4.2': 1.51 }, '4': { '1.2': 1.94, '1.8': 1.44, '2.4': 1.21 } }
        }
    };

    const strengthEl = document.getElementById('strength');
    const beamSizeEl = document.getElementById('beamSize');
    const loadEl = document.getElementById('load');
    const resultEl = document.getElementById('result');

    function updateBeamSizes() {
        const strength = strengthEl.value;
        const sizes = spanData[strength] ? Object.keys(spanData[strength]) : [];
        if (sizes.length === 0) {
            beamSizeEl.innerHTML = '<option value="">No sizes available</option>';
            return;
        }
        beamSizeEl.innerHTML = sizes.map(size => `<option value="${size}">${size.replace(/x/g, ' x ')}</option>`).join('');
        updateResult();
    }

    function updateResult() {
        const strength = strengthEl.value;
        const beamSize = beamSizeEl.value;
        const load = loadEl.value;
        const spacingOptions = spanData[strength]?.[beamSize]?.[load];

        if (!spacingOptions) {
            resultEl.textContent = 'No data for this combination';
            return;
        }

        const maxSpacing = Object.entries(spacingOptions).reduce((best, [spacing, span]) => {
            const spacingNum = parseFloat(spacing);
            return span > (spacingOptions[best] || 0) ? spacing : best;
        }, null);

        if (maxSpacing) {
            resultEl.textContent = `Recommended Joist Spacing: ${parseFloat(maxSpacing) * 1000} mm (Max Span: ${spacingOptions[maxSpacing]} meters)`;
        } else {
            resultEl.textContent = 'No span data available for selected options';
        }
    }

    strengthEl.addEventListener('change', updateBeamSizes);
    beamSizeEl.addEventListener('change', updateResult);
    loadEl.addEventListener('change', updateResult);

    updateBeamSizes();
</script>
@endpush