@model List<HotelContracts.ViewModels.CleaningViewModel>
@{
    ViewData["Title"] = "Уборки";
    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" style="padding: 0 0 16px;"> 
                    <div class="demo-card-wide mdl-card mdl-shadow--2dp" style="width: 100%;">
                        <div class="mdl-card__title">
                            <h2 class="mdl-card__title-text">Уборка @item.Date.ToShortDateString()</h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                            <span>Номер: #@item.Room.Id</span>
                            <ul class="demo-list-item mdl-list">
                                @{
                                    @foreach (var room in item.CleaningInstruments)
                                    {
                                        <li class="mdl-list__item">
                                            <span class="mdl-list__item-primary-content">
                                                Комплект для уборки №@room.Value.Id @room.Value.Type
                                            </span>
                                        </li>
                                    }
                                }
                            </ul>
                            <span>Всего инструментов @item.CleaningInstruments.Count</span>
                        </div>
                        <div class="mdl-card__actions mdl-card--border">
                            <a 
                                href="/Home/DeleteClean?id=@item.Id"
                                class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                                Удалить
                            </a>
                            <a 
                                href="/Home/EditCleaning?id=@item.Id"
                                class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
                                Изменить
                            </a>
                        </div>
                    </div>
                </li>
            }
        </ul>
    }
    <dialog class="mdl-dialog">
        <h4 class="mdl-dialog__title">Добавление уборки</h4>
        <form method="post" asp-controller="Home" asp-action="CreateCleaning">
            <div class="mdl-dialog__content">
                <span>Дата уборки</span>
                <div class="mdl-textfield mdl-js-textfield">
                    <input class="mdl-textfield__input" type="date" id="date" name="dateTime">
                </div>
                
                <span>Номер</span>
                <div class="mdl-textfield mdl-js-textfield">
                    <select name="roomId" id="rooms" class="mdl-textfield__input">
                        @{
                            @foreach (var room in ViewBag.Rooms)
                            {
                                <option value="@room.Id">#@room.Id @room.GetTypeRoom()</option>
                            }
                        }
                    </select>
                </div>
                
                <span>Инструменты для уборки</span>
                <div class="mdl-textfield mdl-js-textfield">
                    <select name="cleanings" id="" class="mdl-textfield__input" multiple="multiple">
                        @{
                            @foreach (var item in ViewBag.CleaningInstruments)
                            {
                                <option value="@item.Id">#@item.Id @item.Type</option>
                            }
                        }
                    </select>
                </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>