{{-- Live client-side readout of the doctor/center split, purely informational — the server
     validator in StoreServicePriceRequest is the one that actually enforces the mandatory match. --}}
<script>
    (function () {
        function computeShare(type, value, total) {
            value = parseFloat(value) || 0;
            total = parseFloat(total) || 0;

            return type === 'percentage' ? (total * value / 100) : value;
        }

        function refreshBlock(block) {
            var total = block.querySelector('.js-total-price').value;
            var typeSelects = block.querySelectorAll('.js-share-type');
            var valueInputs = block.querySelectorAll('.js-share-value');
            var output = block.querySelector('.js-computed-split');

            var doctorAmount = computeShare(typeSelects[0].value, valueInputs[0].value, total);
            var centerAmount = computeShare(typeSelects[1].value, valueInputs[1].value, total);
            var sum = Math.round((doctorAmount + centerAmount) * 100) / 100;
            var totalNum = Math.round((parseFloat(total) || 0) * 100) / 100;
            var matches = Math.abs(sum - totalNum) <= 0.01;

            output.textContent = '{{ trans('clinic.pricing.computed_split') }}: '
                + doctorAmount.toFixed(2) + ' + ' + centerAmount.toFixed(2) + ' = ' + sum.toFixed(2)
                + ' / ' + totalNum.toFixed(2);
            output.classList.toggle('text-danger', !matches);
            output.classList.toggle('text-muted', matches);
        }

        document.querySelectorAll('.js-service-block').forEach(function (block) {
            block.addEventListener('input', function () { refreshBlock(block); });
            block.addEventListener('change', function () { refreshBlock(block); });
            refreshBlock(block);
        });
    })();
</script>