{% extends "base.html" %}
{% block title %}Joint Shear - ConcreteDesignPy{% endblock %}

{% block content %}
<div class="calc-page">
    <a href="/" class="back-link">&larr; All Calculators</a>
    <h1>Joint Shear Verification</h1>
    <p class="ref">NSCP 2015 Section 422.7 &mdash; Special Moment Frames</p>

    <form id="calc-form" class="calc-form">
        <div class="form-section">
            <h3>Forces</h3>
            <div class="form-row">
                <div class="form-group"><label>Ve, column shear (kN)</label><input type="number" name="ve" value="384.23" step="0.01" required></div>
            </div>
        </div>

        <div class="form-section">
            <h3>Reinforcement Group 1</h3>
            <div class="form-row">
                <div class="form-group"><label>As per bar (mm&sup2;)</label><input type="number" name="as1" value="491" required></div>
                <div class="form-group"><label>Number of bars</label><input type="number" name="n_bars1" value="8" required></div>
            </div>
        </div>

        <div class="form-section">
            <h3>Reinforcement Group 2</h3>
            <div class="form-row">
                <div class="form-group"><label>As per bar (mm&sup2;)</label><input type="number" name="as2" value="491" required></div>
                <div class="form-group"><label>Number of bars</label><input type="number" name="n_bars2" value="4" required></div>
            </div>
        </div>

        <div class="form-section">
            <h3>Material &amp; Geometry</h3>
            <div class="form-row">
                <div class="form-group"><label>fy (MPa)</label><input type="number" name="fy" value="414" step="0.1" required></div>
                <div class="form-group"><label>f'c (MPa)</label><input type="number" name="fc" value="34.5" step="0.1" required></div>
                <div class="form-group"><label>Beam width (mm)</label><input type="number" name="beam_width" value="500" required></div>
                <div class="form-group"><label>Joint depth (mm)</label><input type="number" name="joint_depth" value="600" required></div>
            </div>
            <div class="form-row">
                <div class="form-group"><label>Perp. distance (mm)</label><input type="number" name="perpendicular_dist" value="50"></div>
                <div class="form-group">
                    <label>Joint Config</label>
                    <select name="joint_config">
                        <option value="1">4-face confined (1.7)</option>
                        <option value="2">3 or 2-face (1.2)</option>
                        <option value="3">Other (1.0)</option>
                    </select>
                </div>
                <div class="form-group"><label>&phi;</label><input type="number" name="phi" value="0.85" step="0.01"></div>
            </div>
        </div>

        <button type="submit" class="btn-primary">Check</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 = {};
    new FormData(this).forEach(function(v, k) {
        payload[k] = k === 'joint_config' ? parseInt(v) : parseFloat(v);
    });
    submitCalc('/api/joint/shear', payload, function(result) {
        var r = result;
        var tex = '<h3>Calculation Report</h3><div class="mathjax-report">';
        tex += '<p><b>Reference:</b> NSCP 2015 Section 422.7</p>';
        if (r.t1 !== undefined) tex += '<p>\\[ T_1 = A_{s1} \\cdot 1.25 f_y = ' + r.t1 + ' \\text{ kN} \\]</p>';
        if (r.t2 !== undefined) tex += '<p>\\[ T_2 = A_{s2} \\cdot 1.25 f_y = ' + r.t2 + ' \\text{ kN} \\]</p>';
        if (r.vu_joint !== undefined) tex += '<p>\\[ V_{u,joint} = T_1 + T_2 - V_e = ' + r.vu_joint + ' \\text{ kN} \\]</p>';
        if (r.aj !== undefined) tex += '<p>\\[ A_j = ' + r.aj + ' \\text{ mm}^2 \\]</p>';
        if (r.vn_joint !== undefined) tex += '<p>\\[ \\phi V_n = \\phi \\gamma \\sqrt{f\'_c} A_j = ' + r.vn_joint + ' \\text{ kN} \\]</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 %}