@model List<HotelContracts.ViewModels.RoomViewModel>
@{
    ViewData["Title"] = "Home Page";
    Layout = "_Layout";
}

<div class="">
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="create">
        Добавить номер
    </button>
    @{
    <ul class="demo-list-two mdl-list">
        @foreach (var item in Model)
        {
            <li class="mdl-list__item mdl-list__item--two-line">
                <span class="mdl-list__item-primary-content">
                    @{
                        switch (item.Type)
                        {
                            case "standard": 
                                <i class="material-icons mdl-list__item-avatar">chair</i>
                                break;
                            case "superior":
                                <i class="material-icons mdl-list__item-avatar">weekend</i>
                                break;
                            case "bedroom":
                                <i class="material-icons mdl-list__item-avatar">bed</i>
                                break;
                            case "apartment":
                                <i class="material-icons mdl-list__item-avatar">apartment</i>
                                break;
                            case "studio":
                                <i class="material-icons mdl-list__item-avatar">yard</i>
                                break;
                            case "suite":
                                <i class="material-icons mdl-list__item-avatar">spa</i>
                                break;
                        }
                    }
                    <span>Номер: №@item.Id</span>
                    <span class="mdl-list__item-sub-title">Стоимость за сутки: @item.Cost рублей</span>
                </span>
                @{
                    if (item.IsReserved)
                    {
                        <span>Забронирована</span>
                    }
                }
                <span class="mdl-list__item-secondary-content">
                  <span class="mdl-list__item-secondary-info">@item.GetTypeRoom()</span>
                    <a 
                        href="/Home/DeleteRoom?id=@item.Id"
                        class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                        Удалить
                    </a>
                </span>
            </li>
        }
    </ul>
    }
    <dialog class="mdl-dialog">
        <h4 class="mdl-dialog__title">Добавление номера</h4>
        <form method="post" asp-controller="Home" asp-action="CreateRoom">
            <div class="mdl-dialog__content">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" type="number" id="cost" name="cost">
                    <label class="mdl-textfield__label" for="cost">Стоимость</label>
                </div>
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <select class="mdl-textfield__input" name="type" id="type">
                        <option value="standard">Стандартный</option>
                        <option value="superior">Улучшенный</option>
                        <option value="bedroom">Со спальной комнатой</option>
                        <option value="apartment">Апартаменты/квартира</option>
                        <option value="studio">Студия</option>
                        <option value="suite">Люкс</option>
                    </select>
                    <label class="mdl-textfield__label" for="type">Вид номера</label>
                </div>
            </div>
            <div class="mdl-dialog__actions">
                <button type="submit" class="mdl-button">Добавить</button>
                <button type="button" class="mdl-button close">Отмена</button>
            </div>
        </form>
    </dialog>
</div>
<script>
    const dialog = document.querySelector('dialog');
    const showDialogButton = document.querySelector('#create');

    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
</script>