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

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

<form method="post">
    <div class="text-center">
        <h2 class="display-4">Обновление бронирования по конференции</h2>
    </div>
    <div class="form-group">
        <label for="conferenceBooking">Бронирование:</label>
        <select id="conferenceBooking" name="conferenceBooking" class="form-control" asp-items="@(new SelectList(@ViewBag.ConferenceBookings, "Id", "NameHall"))"></select>
    </div>
    <div class="form-group">
        <label for="conference">Конференция:</label>
        <select id="conference" name="conference" class="form-control" asp-items="@(new SelectList(@ViewBag.Conferences, "Id", "ConferenceName"))"></select>
    </div>
    <div class="form-group">
        <label for="nameHall">Название зала:</label>
        <input type="text" id="nameHall" name="nameHall" class="form-control" placeholder="Введите название зала">
    </div>
    <div class="form-group">
        <label for="bookingDate">Дата:</label>
        <input type="datetime-local" id="bookingDate" name="bookingDate" class="form-control" placeholder="Выберите начало конференции">
    </div>
    <div class="form-group">
        <label>Обеды для бронирования:</label>
        <div class="table-responsive">
            <table class="table">
                <thead class="thead-dark">
                    <tr>
                        <th>Обед</th>
                        <th>Цена</th>
                    </tr>
                </thead>
                <tbody id="table-elements" class="u-table-body">
                </tbody>
            </table>
        </div>
    </div>
    <br>
    <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 conferenceBooking = $('#conferenceBooking').val();
            if (conferenceBooking) {
                $.ajax({
                    method: "GET",
                    url: "/Home/GetConferenceBooking",
                    data: { conferenceBookingId: conferenceBooking },
                    success: function (result) {
                        $('#nameHall').val(result.item1.nameHall);
                        $('#table-elements').html(result.item2);
                    }
                });
            };
        }
        check();
        $('#conferenceBooking').on('change', function () {
            check();
        });
    </script>
}