@using HotelContracts.ViewModels;
@using HotelDataModels.Models;

@{
    ViewData["Title"] = "CreateRoom";
}

<form method="post">
    <div class="text-center">
        <h2 class="display-4">Добавление номера</h2>
    </div>
    <div class="form-group">
        <label class="u-label u-text-custom-color-1 u-label-2">Название комнаты</label>
    </div>
    <input type="text"
           placeholder="Введите название комнаты"
           name="roomName"
           class="form-control" />
    <br>
    <div class="form-group">
        <label class="u-label u-text-custom-color-1 u-label-2">Цена комнаты</label>
    </div>
    <input type="number"
           placeholder="Введите цену комнаты"
           name="roomPrice"
           class="form-control" />
    <br>
    <div class="form-group">
        <label class="u-label u-text-custom-color-1 u-label-2">Корпус</label>
    </div>
    <input type="text"
           placeholder="Введите корпус комнаты"
           name="roomFrame"
           class="form-control" />
    <br>
    <div class="u-table u-table-responsive u-table-1">
        <label class="u-label u-text-custom-color-1 u-label-1">Обеды для номеров</label>
        <table class="table">
            <thead class="thead-dark">
                <tr style="height: 44px">
                    <th class="u-border-1 u-border-grey-50 u-table-cell">
                        Обед
                    </th>
                    <th class="u-border-1 u-border-grey-50 u-table-cell">
                        Цена
                    </th>
                </tr>
            </thead>
            <tbody class="u-table-body" id="table-elements">
            </tbody>
        </table>
    </div>
    <div class="u-container-layout u-container-layout-2">
        <input type="submit" value="Сохранить" class="btn btn-outline-dark text-center d-flex justify-content-md-center" />
    </div>
</form>

@section Scripts
{
    <script>
        function check() {
            var room = $('#room').val();
            if (room) {
                $.ajax({
                    method: "GET",
                    url: "/Home/GetRoom",
                    data: { roomId: room },
                    success: function (result) {
                        $('#roomName').val(result.item1.roomName);
                        $('#roomPrice').val(result.item1.roomPrice);
                        $('#roomFrame').val(result.item1.roomFrame);
                        $('#table-elements').html(result.item2);
                    }
                });
            };
        }
        check();
        $('#room').on('change', function () {
            check();
        });
    </script>
}