{% extends "base.html" %}
{% block title %}Beam Deflection - ConcreteDesignPy{% endblock %}

{% block content %}
<div class="calc-page">
    <a href="/" class="back-link">&larr; All Calculators</a>
    <h1>Beam Deflection</h1>
    <p class="ref">NSCP 2015 Section 424.2 / ACI 318-19</p>

    <form id="calc-form" class="calc-form">
        <div class="form-section">
            <h3>Section</h3>
            <div class="form-row">
                <div class="form-group"><label>Width, b (mm)</label><input type="number" name="b" value="300" required></div>
                <div class="form-group"><label>Height, h (mm)</label><input type="number" name="h" value="500" required></div>
                <div class="form-group"><label>Eff. depth, d (mm)</label><input type="number" name="d" value="450" required></div>
                <div class="form-group"><label>Clear span (mm)</label><input type="number" name="clearspan" value="6000" required></div>
            </div>
        </div>

        <div class="form-section">
            <h3>Material</h3>
            <div class="form-row">
                <div class="form-group"><label>f'c (MPa)</label><input type="number" name="fc" value="28" step="0.1" required></div>
                <div class="form-group"><label>fy (MPa)</label><input type="number" name="fy" value="415" step="0.1" required></div>
                <div class="form-group"><label>Es (MPa)</label><input type="number" name="es" value="200000"></div>
            </div>
        </div>

        <div class="form-section">
            <h3>Reinforcement</h3>
            <div class="form-row">
                <div class="form-group"><label>As tension (mm&sup2;)</label><input type="number" name="as_tension" value="1520" step="1" required></div>
                <div class="form-group"><label>Comp. bars (n)</label><input type="number" name="n_bars_comp" value="2"></div>
                <div class="form-group"><label>Comp. bar dia (mm)</label><input type="number" name="db_comp" value="16"></div>
            </div>
        </div>

        <div class="form-section">
            <h3>Loading</h3>
            <div class="form-row">
                <div class="form-group"><label>Point load (N)</label><input type="number" name="point_load" value="0"></div>
                <div class="form-group"><label>Uniform load (N/mm)</label><input type="number" name="uniform_load" value="15" step="0.1"></div>
                <div class="form-group"><label>Ma override (N-mm)</label><input type="number" name="ma" value="" placeholder="auto"></div>
            </div>
        </div>

        <div class="form-section">
            <h3>Options</h3>
            <div class="form-row">
                <div class="form-group">
                    <label>Beam Type</label>
                    <select name="beam_type">
                        <option value="simply_supported">Simply Supported</option>
                        <option value="cantilever">Cantilever</option>
                        <option value="fixed_both">Fixed Both Ends</option>
                        <option value="propped_cantilever">Propped Cantilever</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Member Type</label>
                    <select name="member_type">
                        <option value="floor" selected>Floor</option>
                        <option value="flat_roof">Flat Roof</option>
                        <option value="roof_with_partitions">Roof w/ Partitions</option>
                        <option value="floor_with_partitions">Floor w/ Partitions</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Sustained Duration</label>
                    <select name="sustained_duration">
                        <option value="3_months">3 months</option>
                        <option value="6_months">6 months</option>
                        <option value="12_months">12 months</option>
                        <option value="5_years_or_more" selected>5 years or more</option>
                    </select>
                </div>
            </div>
        </div>

        <button type="submit" class="btn-primary">Calculate</button>
    </form>

    <div id="results" class="results-panel" style="display:none;">
        <h2>Results</h2>
        <div id="results-content"></div>
        <div id="results-report" class="report-panel"></div>
    </div>
</div>

<script>
document.getElementById('calc-form').addEventListener('submit', function(e) {
    e.preventDefault();
    var payload = {
        b: parseFloat(this.b.value),
        h: parseFloat(this.h.value),
        d: parseFloat(this.d.value),
        clearspan: parseFloat(this.clearspan.value),
        fc: parseFloat(this.fc.value),
        fy: parseFloat(this.fy.value),
        es: parseFloat(this.es.value),
        as_tension: parseFloat(this.as_tension.value),
        n_bars_comp: parseInt(this.n_bars_comp.value),
        db_comp: parseFloat(this.db_comp.value),
        point_load: parseFloat(this.point_load.value),
        uniform_load: parseFloat(this.uniform_load.value),
        beam_type: this.beam_type.value,
        member_type: this.member_type.value,
        sustained_duration: this.sustained_duration.value,
    };
    if (this.ma.value) payload.ma = parseFloat(this.ma.value);
    submitCalc('/api/beam/deflection', payload, function(result) {
        var r = result;
        var tex = '<h3>Calculation Report</h3><div class="mathjax-report">';
        tex += '<p><b>Reference:</b> NSCP 2015 Section 424.2</p>';
        if (r.ec !== undefined) tex += '<p>\\[ E_c = 4700\\sqrt{f\'_c} = ' + r.ec + ' \\text{ MPa} \\]</p>';
        if (r.n !== undefined) tex += '<p>\\[ n = E_s / E_c = ' + r.n + ' \\]</p>';
        if (r.ig !== undefined) tex += '<p>\\[ I_g = \\frac{bh^3}{12} = ' + r.ig + ' \\text{ mm}^4 \\]</p>';
        if (r.mcr !== undefined) tex += '<p>\\[ M_{cr} = \\frac{f_r I_g}{y_t} = ' + r.mcr + ' \\text{ N-mm} \\]</p>';
        if (r.icr !== undefined) tex += '<p>\\[ I_{cr} = ' + r.icr + ' \\text{ mm}^4 \\]</p>';
        if (r.ie !== undefined) tex += '<p>\\[ I_e = \\left(\\frac{M_{cr}}{M_a}\\right)^3 I_g + \\left[1-\\left(\\frac{M_{cr}}{M_a}\\right)^3\\right] I_{cr} = ' + r.ie + ' \\text{ mm}^4 \\]</p>';
        if (r.delta_immediate !== undefined) tex += '<p><b>Immediate Deflection:</b> \\( \\Delta_i = ' + r.delta_immediate + ' \\text{ mm} \\)</p>';
        if (r.lambda_delta !== undefined) tex += '<p>\\[ \\lambda_\\Delta = \\frac{\\xi}{1+50\\rho\'} = ' + r.lambda_delta + ' \\]</p>';
        if (r.delta_long_term !== undefined) tex += '<p><b>Long-term Deflection:</b> \\( \\Delta_{LT} = ' + r.delta_long_term + ' \\text{ mm} \\)</p>';
        if (r.delta_total !== undefined) tex += '<p><b>Total Deflection:</b> \\( \\Delta_{total} = ' + r.delta_total + ' \\text{ mm} \\)</p>';
        if (r.allowable !== undefined) tex += '<p><b>Allowable:</b> \\( L/' + (r.limit_ratio || 360) + ' = ' + r.allowable + ' \\text{ mm} \\)</p>';
        if (r.status) tex += '<p><b>Status:</b> ' + r.status + '</p>';
        tex += '</div>';
        document.getElementById('results-report').innerHTML = tex;
        if (window.MathJax) MathJax.typeset();
    });
});
</script>
{% endblock %}