@extends('layouts.layout')

<!-- Секция, содержимое которой обычный текст. -->
@section('title', 'Калькулятор')

@section('content')
<section class="hero">
    <!-- Hero content: will be in the middle -->
    <div class="hero-body is-justify-content-center">
        <div class="field has-addons has-addons-centered">
            <label class="control">
                <input id="calculate" class="input" type="text" placeholder="Введите общий вес заказа, кг" size="30">
            </label>
            <div class="control">
                <button class="button is-static">
                    Рассчитать
                </button>
            </div>
        </div>
    </div>
</section>

<section class="hero">
    <!-- Hero content: will be in the middle -->
    <div class="hero-body is-justify-content-center">
        <div class="table-container">

            <table class="table is-hoverable is-fullwidth">
                <thead>
                <tr>
                    <th>Номер</th>
                    <th><abbr title="Наименование ингредиента">Наименование</abbr></th>
                    <th><abbr title="Остаток на складе, кг">Остаток</abbr></th>
                    <th><abbr title="Эталонный вес одного замеса, кг">Вес замеса</abbr></th>
                    <th><abbr title="Общий вес заказа, кг">Общий вес</abbr></th>
                    <th><abbr title="Коэффициент в доли рецепта, %">Коэффициент</abbr></th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <th>Номер</th>
                    <th><abbr title="Наименование ингредиента">Наименование</abbr></th>
                    <th><abbr title="Остаток на складе, кг">Остаток</abbr></th>
                    <th><abbr title="Вес одного замеса, кг">Вес замеса</abbr></th>
                    <th><abbr title="Общий вес заказа, кг">Общий вес</abbr></th>
                    <th><abbr title="Коэффициент в доли рецепта, %">Коэффициент</abbr></th>
                </tr>
                </tfoot>
                <tbody>

                @foreach ($elements as $key => $element)
                    <tr>
                        <th> {{ $key + 1 }}</th>
                        <td>{{ $element['name'] }}</td>
                        <td>{{ $element['remainder'] }}</td>
                        <td>{{ $element['batch_weight'] }}</td>
                        <td id="{{ $element['code'] }}">-</td>
                        <td>{{ $element['ratio'] }}</td>
                    </tr>
                @endforeach

                <tr class="is-selected">
                    <th></th>
                    <th>Итого:</th>
                    <td>{{ $allRemainder }}</td>
                    <td>{{ $allWeights }}</td>
                    <td id="ingridientTotal">-</td>
                    <td>-</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<footer class="footer">
    <div class="content has-text-centered">
        <p>
            <strong>Калькулятор расчета сырья</strong> разработан <a href="https://t.me/dereviankodev"
                                                                     target="_blank">@dereviankodev</a>.
            Лицензия кода -
            <a href="https://opensource.org/license/mit" target="_blank">MIT</a>.
        </p>
    </div>
</footer>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Get all "navbar-burger" elements
        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

        // Add a click event on each of them
        $navbarBurgers.forEach(el => {
            el.addEventListener('click', () => {
                // Get the target from the "data-target" attribute
                const target = el.dataset.target;
                const $target = document.getElementById(target);

                // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
                el.classList.toggle('is-active');
                $target.classList.toggle('is-active');
            });
        });

        let $input = document.getElementById('calculate');

        $input.addEventListener('input', () => {
            let $target = $input.value;
            let $ingredientFlour = document.getElementById('ingredientFlour');
            let $ingredientResin = document.getElementById('ingredientResin');
            let $ingridientChalk = document.getElementById('ingridientChalk');
            let $ingridientStabilizer = document.getElementById('ingridientStabilizer');
            let $ingridientPaint = document.getElementById('ingridientPaint');
            let $ingridientWax = document.getElementById('ingridientWax');
            let $ingridientModifierYf = document.getElementById('ingridientModifierYf');
            let $ingridientModifierCpe = document.getElementById('ingridientModifierCpe');
            let $ingridientTotal = document.getElementById('ingridientTotal');

            let $_ingredientFlour = $target === '' ? '-' : $target * (52.045 / 100);
            let $_ingredientResin = $target === '' ? '-' : $target * (18.587 / 100);
            let $_ingridientChalk = $target === '' ? '-' : $target * (26.766 / 100);
            let $_ingridientStabilizer = $target === '' ? '-' : $target * (1.041 / 100);
            let $_ingridientPaint = $target === '' ? '-' : $target * (0.669 / 100);
            let $_ingridientWax = $target === '' ? '-' : $target * (0.149 / 100);
            let $_ingridientModifierYf = $target === '' ? '-' : $target * (0.223 / 100);
            let $_ingridientModifierCpe = $target === '' ? '-' : $target * (0.52 / 100);

            $ingredientFlour.innerText = $_ingredientFlour.toFixed(2);
            $ingredientResin.innerText = $_ingredientResin.toFixed(2);
            $ingridientChalk.innerText = $_ingridientChalk.toFixed(2);
            $ingridientStabilizer.innerText = $_ingridientStabilizer.toFixed(2);
            $ingridientPaint.innerText = $_ingridientPaint.toFixed(2);
            $ingridientWax.innerText = $_ingridientWax.toFixed(2);
            $ingridientModifierYf.innerText = $_ingridientModifierYf.toFixed(2);
            $ingridientModifierCpe.innerText = $_ingridientModifierCpe.toFixed(2);

            $ingridientTotal.innerText = $target === ''
                ? '-'
                : [
                    $_ingredientFlour,
                    $_ingredientResin,
                    $_ingridientChalk,
                    $_ingridientStabilizer,
                    $_ingridientPaint,
                    $_ingridientWax,
                    $_ingridientModifierYf,
                    $_ingridientModifierCpe,
                ].filter((x) => !isNaN(x)).reduce((a, b) => a + b).toFixed(2);
        });
    });
</script>
@endsection