@using Contracts.ViewModels

@model ProductViewModel;

@{
    ViewData["Title"] = "CreateProduct";
    ViewBag.Details = Model.DetailProducts;
}
<div class="text-center">
    <h2 class="display-4">Создание изделия</h2>
</div>
<form id="productForm" method="post">
    <div class="row">
        <div class="col-4">Название:</div>
        <div class="col-8">
            <input type="text" name="title" id="title" value="@Model.Name"/>
            <span id="titleError" class="text-danger"></span>
        </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>
                        <th>Удалить</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var detail in ViewBag.Details)
                    {
                        <tr data-detail-id="@detail.Value.Item1.Id">
                            <td>
                                <input type="hidden" name="detailIds" value="@detail.Key" />
                                @detail.Value.Item1.Name
                            </td>
                            <td>
                                <input type="number" name="counts" value="@detail.Value.Item2" min="0" class="form-control detail-count" data-cost="@detail.Value.Item1.Cost" />
                            </td>
                            <td>@detail.Value.Item1.Cost</td>
                            <td>
                                <button type="button" class="deleteDetail" data-detail-id="@detail.Value.Item1.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 count = $(this).find('input[name="counts"]').val();
                var cost = $(this).find('input[name="counts"]').data('cost');
                sum += count * cost;
            });
            $('#sum').val(sum.toFixed(2));
        }

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

        $(document).on('change', '.detail-count', function () {
            updateSum();
        });

        $('#addDetail').click(function () {
            var selectedDetail = $('#detailSelect option:selected');
            if (selectedDetail.val()) {
                var detailId = selectedDetail.val();
                var detailName = selectedDetail.text();
                var detailCost = selectedDetail.data('cost');

                var exists = false;
                $('#detailsTable tbody tr').each(function () {
                    if ($(this).data('detail-id') == detailId) {
                        exists = true;
                        return false;
                    }
                });

                if (exists) {
                    alert('Эта деталь уже добавлена.');
                    return;
                }

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

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

        $('#productForm').submit(function (event) {
            var title = $('#title').val();
            var isValid = true;

            $('#titleError').text('');
            if (title.length < 2 || title.length > 50) {
                $('#titleError').text('Название должно быть от 2 до 50 символов.');
                isValid = false;
            }

            var totalDetails = $('#detailsTable tbody tr').length;
            if (totalDetails == 0) {
                alert('Пожалуйста, добавьте хотя бы одну деталь.');
                isValid = false;
            }

            $('#detailsTable tbody tr').each(function () {
                var count = $(this).find('input[name="counts"]').val();
                if (count < 1) {
                    alert('Количество каждой детали должно быть не менее 1.');
                    isValid = false;
                    return false; 
                }
            });

            if (!isValid) {
                event.preventDefault();
            }
        });

        updateSum();
    });
</script>