@page
@model TicketOffice.Pages.IndexModel
@{
    ViewData["Title"] = "Home page";
}

<link rel="stylesheet" href="~/css/Routes.css" asp-append-version="true"/>

<form class="search-block">
    <div class="stations">
        <div class="station">
            <div class="title">
                Звідки
            </div>
            <input type="text" autocomplete="off" asp-for="from">
        </div>
        <a class="change-dir"></a>
        <div class="station">
            <div class="title">
                Куди
            </div>
            <input type="text" autocomplete="off" asp-for="to">
        </div>
    </div>
    <div class="opt">
        <div class="date">
            <div class="title">
                Дата відправлення
            </div>
            <input type="date" value="@Model.date.ToString("yyyy-MM-dd")" asp-for="date">
        </div>
    </div>
    <input type="submit" value="Пошук"/>
</form>

<a asp-page-handler="SortByDuration" asp-route-from=@Model.from a in a  asp-route-to=@Model.to asp-route-date=@Model.date.ToString("yyyy-MM-dd") asp-route-isDescending="false">За зростанням</a>
<a asp-page-handler="SortByDuration" asp-route-from=@Model.from a in a  asp-route-to=@Model.to asp-route-date=@Model.date.ToString("yyyy-MM-dd") asp-route-isDescending="true">За спаданням</a>

@if (Model.Route.Count > 0)
{
    <div class="route-list">
        <table>
            <thead>
                <tr>
                    <th>
                        № автобуса
                    </th>
                    <th>
                        Звідки / Куди
                    </th>
                    <th>
                        Дата
                    </th>
                    <th>
                        <div class="departure">Відправлення</div>
                        <div class="arrival">Прибуття</div>
                    </th>
                    <th>
                        Тривалість
                    </th>
                    <th>
                        Вільніих місць
                    </th>
                    <th>
                        Дії
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var route in Model.Route)
                {
                    <tr class="table-row">
                        <td class="num">
                            @route.Number
                        </td>
                        <td class="city">
                            <div>@route.Cities.First().Name</div>
                            <div>@route.Cities.Last().Name</div>
                        </td>
                        <td>
                            <div class="route-date">
                                <span>Відправлення</span>
                                <span>@route.Cities.First().DepartureTime?.ToString("dd.MM.yyy")</span>
                            </div>
                            <div class="route-date">
                                <span>Прибуття</span>
                                <span>@route.Cities.Last().ArrivalTime?.ToString("dd.MM.yyy")</span>
                            </div>
                        </td>
                        <td class="time">
                            <div>@route.Cities.First().DepartureTime?.ToString("HH:mm")</div>
                            <div>@route.Cities.Last().ArrivalTime?.ToString("HH:mm")</div>
                        </td>
                        <td class="duration">
                            @{ TimeSpan? duration = route.Cities.Last().ArrivalTime - route.Cities.First().DepartureTime; }
                            @($"{duration?.TotalHours.ToString().Split(".")[0]}:{duration?.Minutes}")
                        </td>
                        <td class="capacity">
                            @(route.Capacity - route.Tickets.Count)
                        </td>
                        <td class="action">
                            <a asp-page=".">Вибрати</a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
}
else
{
    <div class="search-error">
        <p>По заданому Вами напрямку місць немає</p>
    </div>
}