{% extends "main_card.html.twig" %}

{% block title %}{% trans %}tools.reel_calc.title{% endtrans %}{% endblock %}

{% block card_title %}
    <i class="fas fa-ruler"></i> {% trans %}tools.reel_calc.title{% endtrans %}
{% endblock %}

{% block card_content %}
    <div class="row">
        <div class="col-sm-4">
            <img src="{{ asset('img/smd_reel/smd_reel.svg') }}" alt="Sizes explanation" class="img-fluid img-thumbnail">
        </div>
        <div class="col-sm-8">
            <div class="form-group row">
                <label for="reel_dia_inner" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.inner_dia{% endtrans %} <var>d<sub>0</sub></var>:</label>
                <div class="col-sm-8 input-group">
                    <input class="form-control" id="reel_dia_inner" value="60" type="number" min="0">
                    <div class="input-group-append">
                        <span class="input-group-text">mm</span>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="reel_dia_outer" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.outer_dia{% endtrans %} <var>d<sub>1</sub></var>:</label>
                <div class="col-sm-8 input-group">
                    <input class="form-control" id="reel_dia_outer" type="number" min="0">
                    <div class="input-group-append">
                        <span class="input-group-text">mm</span>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="reel_tape_thick" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.tape_thick{% endtrans %} <var>a</var>:</label>
                <div class="col-sm-8 input-group">
                    <input class="form-control" id="reel_tape_thick" type="number" min="0,8" value="0.6">
                    <div class="input-group-append">
                        <span class="input-group-text">mm</span>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.part_distance{% endtrans %} <var>b</var>:</label>
                <div class="col-sm-8 input-group">
                    <input  class="form-control" id="reel_part_distance" value="4" type="number" min="0">
                    <div class="input-group-append">
                        <span class="input-group-text">mm</span>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-8 offset-sm-4 input-group">
                    <button type="button" onclick="updateReelCalc()" class="btn btn-primary">{% trans %}tools.reel_calc.update{% endtrans %}</button>
                </div>
            </div>

            <div class="form-group row">
                <label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.parts_per_meter{% endtrans %}:</label>
                <div class="col-sm-8 input-group">
                    <span class="form-control-plaintext" id="result_parts_per_meter"></span>
                </div>
            </div>

            <div class="form-group row">
                <label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.result_length{% endtrans %}:</label>
                <div class="col-sm-8 input-group">
                    <span class="form-control-plaintext" id="result_length"></span>
                </div>
            </div>

            <div class="form-group row">
                <label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.result_amount{% endtrans %}:</label>
                <div class="col-sm-8 input-group">
                    <span class="form-control-plaintext" id="result_amount"></span>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
    function updateReelCalc() {
        var dia_inner = document.getElementById('reel_dia_inner').value;
        var dia_outer = document.getElementById('reel_dia_outer').value;
        var tape_thickness = document.getElementById('reel_tape_thick').value;
        var part_distance = document.getElementById('reel_part_distance').value;

        if (dia_inner == "" || dia_outer == "" || tape_thickness == "") {
            bootbox.alert("{% trans %}tools.reel_calc.missing_values.error{% endtrans %}");
            return;
        }

        if (dia_outer**dia_outer < dia_inner**dia_inner) {
            bootbox.alert("{% trans %}tools.reel_calc.outer_greater_inner_error{% endtrans %}");
            return;
        }

        var length = Math.PI * (dia_outer * dia_outer - dia_inner * dia_inner ) / (4 * tape_thickness);

        var legth_formatted = length.toFixed(2) + ' mm';

        if (length > 1000) {
            length_formatted = (length / 1000).toFixed(2) + ' m';
        } else if (length > 10) {
            length_formatted = (length / 10).toFixed(2) + ' cm';
        }

        document.getElementById('result_length').textContent = length_formatted;

        //Skip if no part_distance was given
        if (part_distance == "" || part_distance == 0) {
            return;
        }

        var parts_per_meter = 1 / (part_distance / 1000);

        document.getElementById('result_parts_per_meter').textContent = parts_per_meter.toFixed(2) + ' 1/m';

        var parts_amount = (length/1000) * parts_per_meter;

        document.getElementById('result_amount').textContent = Math.floor(parts_amount);

    }
</script>
{% endblock %}