@page
@using IOL.Fagprove.Data
@using IOL.Fagprove.Utilities
@model IOL.Fagprove.Pages.App.ReservationForm
@{
    ViewData["Title"] = "Ny reservasjon";
}

<div class="ui segment"
     id="newReservationSteps">
    <h2>1. Velg hytten du vil reservere</h2>
    <form class="ui form"
          id="newReservationForm"
          onsubmit="return false">
        <div>
            @foreach (var field in StaticData.CabinFields.Where(field => Model.Cabins.Any(c => c.CategoryId == field.Id)))
            {
                <h3>@field.Name</h3>
                <div class="ui cards">
                    @foreach (var cabin in Model.Cabins.Where(c => c.CategoryId == field.Id))
                    {
                        <div class="card">
                            <div class="content">
                                <div class="header">
                                    @cabin.Name
                                    <i class="icon checkmark green card-title"
                                       style="display: none">
                                    </i>
                                </div>
                                <div class="meta">
                                    @if (cabin.Capacity != null)
                                    {
                                        <span>Sengeplasser: @cabin.Capacity</span>
                                    }
                                    @if (cabin.Price.IsPresent())
                                    {
                                        <span>Pris per natt: @cabin.Price</span>
                                    }
                                </div>
                                @if (cabin.Description.IsPresent())
                                {
                                    <div class="description">@cabin.Description</div>
                                }
                            </div>
                            <div class="extra content">
                                <button class="ui button choose-cabin-button"
                                        onclick="pickCabin(this, '@cabin.Id')">
                                    Velg
                                </button>
                            </div>
                        </div>
                    }
                </div>
            }
        </div>
        <div class="ui divider"></div>
        <div id="second-step" style="display: none">
            <h2>2. Velg dato for innsjekk/utsjekk</h2>
            <div class="field">
                <div id="calendar"></div>
            </div>
            <div class="field">
                <label for="">Kommentar</label>
                <textarea id="comment" style="max-width: 320px;"></textarea>
            </div>
            <div class="field">
                <div class="ui checkbox"
                     id="consent">
                    <input name="consent"
                           type="checkbox">
                    <label>
                        Jeg samtykker til
                        <a href="/app/terms">Bruksvilkårene</a>.
                    </label>
                </div>
            </div>
            <button class="ui huge green button"
                    id="submitReservation">
                Send til godkjenning
            </button>
        </div>
    </form>
</div>

@section Scripts
{
    <script src="~/scripts/reservationForm.js"></script>
}