{% block javascripts %}
			{{ form_start(form) }}

			<div class="position-relative mb-3">
				<label class="form-label">{{ field_label(form.name) }}</label>
				{{ form_widget(form.name) }}

			</div>
			<div class="position-relative mb-3">
				<label class="form-label">{{ field_label(form.margin) }}</label>
				{{ form_widget(form.margin) }}
			</div>

			<div class="position-relative mb-3">
				<label class="form-label">{{ field_label(form.duration) }}</label>
				{{ form_widget(form.duration) }}
			</div>
			<div class="row">
				<div class="col-md-6">
					<div class="position-relative mb-3">
						<label class="form-label">{{ field_label(form.complexityRate) }}</label>
						{{ form_widget(form.complexityRate) }}
					</div>
				</div>
				<div class="col-md-6">
					<div class="position-relative mb-3">
						<label class="form-label">{{ field_label(form.regressionRate) }}</label>
						{{ form_widget(form.regressionRate) }}
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-3">
					<div class="position-relative mb-3">
						<label class="form-label">{{ field_label(form.simpleMargin) }}</label>
						{{ form_widget(form.simpleMargin) }}
					</div>
				</div>
				<div class="col-md-3">
					<div class="position-relative mb-3">
						<label class="form-label">{{ field_label(form.intermediateMargin) }}</label>
						{{ form_widget(form.intermediateMargin) }}
					</div>
				</div>
				<div class="col-md-3">
					<div class="position-relative mb-3">
						<label class="form-label">{{ field_label(form.complexMargin) }}</label>
						{{ form_widget(form.complexMargin) }}
					</div>
				</div>
				<div class="col-md-3">
					<div class="position-relative mb-3">
						<label class="form-label">{{ field_label(form.veryComplexMargin) }}</label>
						{{ form_widget(form.veryComplexMargin) }}
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-3">
					<div class="position-relative mb-3">
						<label class="form-label">{{ field_label(form.simpleDuration) }}</label>
						{{ form_widget(form.simpleDuration) }}
					</div>
				</div>
				<div class="col-md-3">
					<div class="position-relative mb-3">
						<label class="form-label">{{ field_label(form.intermediateDuration) }}</label>
						{{ form_widget(form.intermediateDuration) }}
					</div>
				</div>
				<div class="col-md-3">
					<div class="position-relative mb-3">
						<label class="form-label">{{ field_label(form.complexDuration) }}</label>
						{{ form_widget(form.complexDuration) }}
					</div>
				</div>
				<div class="col-md-3">
					<div class="position-relative mb-3">
						<label class="form-label">{{ field_label(form.veryComplexDuration) }}</label>
						{{ form_widget(form.veryComplexDuration) }}
					</div>
				</div>
			</div>
			<button class=" mt-1 btn btn-primary px-5">{{ button_label|default('Save') }}</button>

			{{ form_end(form) }}
	<script>
    document.addEventListener('DOMContentLoaded', function () {
        function updateDurations() {
            var complexityRate = parseFloat(document.querySelector('#pack_complexityRate').value);
            var duration = parseFloat(document.querySelector('#pack_duration').value);

            if (isNaN(complexityRate) || isNaN(duration)) {
            return;
            }

            var simpleDuration = duration * complexityRate;
            var intermediateDuration = simpleDuration * complexityRate;
            var complexDuration = intermediateDuration * complexityRate;
            var veryComplexDuration = complexDuration * complexityRate;

            document.querySelector('#pack_simpleDuration').value = simpleDuration;
            document.querySelector('#pack_intermediateDuration').value = intermediateDuration;
            document.querySelector('#pack_complexDuration').value = complexDuration;
            document.querySelector('#pack_veryComplexDuration').value = veryComplexDuration;
        }

        function updateMargins() {
            var regressionRate = parseFloat(document.querySelector('#pack_regressionRate').value);
            var margin = parseFloat(document.querySelector('#pack_margin').value);

            // if (isNaN(regressionRate) || isNaN(margin)) {
            // return;
            // }

            var simpleMargin = margin * regressionRate;
            var intermediateMargin = simpleMargin * regressionRate;
            var complexMargin = intermediateMargin * regressionRate;
            var veryComplexMargin = complexMargin * regressionRate;

            document.querySelector('#pack_simpleMargin').value = simpleMargin;
            document.querySelector('#pack_intermediateMargin').value = intermediateMargin;
            document.querySelector('#pack_complexMargin').value = complexMargin;
            document.querySelector('#pack_veryComplexMargin').value = veryComplexMargin;
            }

        document.querySelector('#pack_complexityRate').addEventListener('change', updateDurations);
        document.querySelector('#pack_duration').addEventListener('change', updateDurations);
        document.querySelector('#pack_regressionRate').addEventListener('change', updateMargins);
        document.querySelector('#pack_margin').addEventListener('change', updateMargins);
        });
	</script>
{% endblock %}