@using Contracts.ViewModels;
@model MachineViewModel;
@{
	ViewData["Title"] = "CreateMachine";
	ViewBag.Workers = Model.WorkerMachines;
}
<div class="text-center">
	<h2 class="display-4">Создание станка</h2>
</div>
<form id="machineForm" method="post">
    <div class="row">
        <div class="col-4">Название станка:</div>
        <div class="col-8">
            <input type="text" name="title" id="title" value="@Model.Title" />
            <span id="titleError" class="text-danger"></span>
        </div>
    </div>
    <div class="row">
        <div class="col-4">Страна производитель:</div>
        <div class="col-8">
            <input type="text" name="country" id="country" value="@Model.Country" />
            <span id="countryError" class="text-danger"></span>
        </div>
    </div>
    <div class="container">
        <div>Работники, управляющие станком</div>
        <div class="table-responsive-lg">
            <table id="workersTable" class="display">
                <thead>
                    <tr>
                        <th>Имя</th>
                        <th>Должность</th>
                        <th>Зарплата</th>
                        <th>Удалить</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var worker in ViewBag.Workers)
                    {
                        <tr data-worker-id="@worker.Value.Id">
                            <td>
                                <input type="hidden" name="workerIds" value="@worker.Key" />
                                @worker.Value.Name
                            </td>
                            <td>@worker.Value.Specialization</td>
                            <td class="worker-salary" data-salary="@worker.Value.Salary">@worker.Value.Salary</td>
                            <td><button type="button" class="deleteWorker" data-worker-id="@worker.Value.Id">Удалить</button></td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
        <select id="workerSelect" class="form-control">
            <option value="">Выберите работника</option>
            @foreach (var worker in ViewBag.AllWorkers)
            {
                <option value="@worker.Id" data-specialization="@worker.Specialization" data-salary="@worker.Salary">@worker.Name</option>
            }
        </select>
        <button type="button" id="addWorker" class="btn btn-secondary">Добавить работника</button>
    </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 () {
        $(document).on('click', '.deleteWorker', function () {
            var row = $(this).closest('tr');
            row.remove();
        });

        $('#addWorker').click(function () {
            var selectedWorker = $('#workerSelect option:selected');
            if (selectedWorker.val()) {
                var workerId = selectedWorker.val();
                var workerName = selectedWorker.text();
                var workerSalary = selectedWorker.data('salary');
                var workerSpecialization = selectedWorker.data('specialization');
                var exists = false;
                $('#workersTable tbody tr').each(function () {
                    if ($(this).data('worker-id') == workerId) {
                        exists = true;
                        return false;
                    }
                });
                if (exists) {
                    alert('Этот работник уже добавлен.');
                    return;
                }
                var newRow = `
                                <tr data-worker-id="${workerId}">
                                    <td>
                                        <input type="hidden" name="workerIds" value="${workerId}" />
                                        ${workerName}
                                    </td>
                                    <td>${workerSpecialization}</td>
                                    <td class="worker-salary" data-salary="${workerSalary}">${workerSalary}</td>
                                    <td><button type="button" class="deleteWorker" data-worker-id="${workerId}">Удалить</button></td>
                                </tr>
                            `;
                $('#workersTable tbody').append(newRow);
                $('#workerSelect').val('');
            } else {
                alert('Выберите работника для добавления');
            }
        });

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

            $('#titleError').text('');
            $('#countryError').text('');

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

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

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

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

        updateTotalSalary();
    });
</script>