Coursach/Course/ImplementerApp/Views/Home/CreateProduction.cshtml

@using Contracts.ViewModels

@model ProductionViewModel

@{
    ViewData["Title"] = "CreateProduction";
    ViewBag.Details = Model.DetailProductions;
}
<div class="text-center">
    <h2 class="display-4">Создание производства</h2>
</div>
<form method="post">
    <div class="row">
        <div class="col-4">Название:</div>
        <div class="col-8"><input type="text" name="title" id="title" value="@Model.Name"/></div>
    </div>
    <div class="container">
        <div>Детали</div>
        <div class="table-responsive-lg">
            <table id="detailsTable" class="display">
                <thead>
                    <tr>
                        <th>Название</th>
                        <th>Стоимость</th>
                        <th>Удалить</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var detail in ViewBag.Details)
                    {
                        <tr data-detail-id="@detail.Value.Id">
                            <td>
                                <input type="number" hidden="hidden" name="detailIds" value="@detail.Value.Id" />
                                @detail.Value.Name
                            </td>
                            <td class="detail-cost" data-cost="@detail.Value.Cost">@detail.Value.Cost</td>
                            <td><button type="button" class="deleteDetail" data-detail-id="@detail.Value.Id">Удалить</button></td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
        <select id="detailSelect" class="form-control">
            <option value="">Выберите деталь</option>
            @foreach (var detail in ViewBag.AllDetails)
            {
                <option value="@detail.Id" data-cost="@detail.Cost">@detail.Name</option>
            }
        </select>
        <button type="button" id="addDetail" class="btn btn-secondary">Добавить деталь</button>
    </div>
    <div class="row">
        <div class="col-4">Сумма:</div>
        <div class="col-8"><input type="text" id="sum" name="sum" readonly /></div>
    </div>
    <div class="row">
        <div class="col-8"></div>
        <div class="col-4"><input type="submit" value="Сохранить" class="btn btn-primary" /></div>
    </div>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
<script>
    $(document).ready(function () {
        function updateSum() {
            var sum = 0;
            $('#detailsTable tbody tr').each(function () {
                var cost = $(this).find('.detail-cost').data('cost');
                sum += parseFloat(cost);
            });
            $('#sum').val(sum.toFixed(2));
        }

        $('.deleteDetail').off('click').on('click', function () {
            var row = $(this).closest('tr');
            row.remove();
            updateSum();
        });

        $('#addDetail').click(function () {
            var selectedDetail = $('#detailSelect option:selected');
            if (selectedDetail.val()) {
                var exists = false;
                $('#detailsTable tbody tr').each(function () {
                    if ($(this).data('detail-id') == detailId) {
                        exists = true;
                        return false;
                    }
                });
                if (exists) { return; }

                var detailId = selectedDetail.val();
                var detailName = selectedDetail.text();
                var detailCost = selectedDetail.data('cost');

                var newRow = `
                        <tr data-detail-id="${detailId}">
                            <td>
                                <input type="hidden" name="detailIds" value="${detailId}" />
                                ${detailName}
                            </td>
                            <td class="detail-cost" data-cost="${detailCost}">${detailCost}</td>
                            <td><button type="button" class="deleteDetail" data-detail-id="${detailId}">Удалить</button></td>
                        </tr>
                    `;
                $('#detailsTable tbody').append(newRow);

                $('.deleteDetail').off('click').on('click', function () {
                    var row = $(this).closest('tr');
                    row.remove();
                    updateSum();
                });

                $('#detailSelect').val('');

                updateSum();
            } else {
                alert('Выберите деталь для добавления');
            }
        });

        updateSum();
    });
</script>