@page "{expac?}"

@model IndexModel

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

@section scripts {
	<script type="text/javascript">
		$(document).ready(function () {
			$("#dutyTableDiv").removeAttr("style");
		});

		function durationSorter(a, b) {
			const firstIsEmpty = a === null || a === undefined || a === "";
			const secondIsEmpty = b === null || b === undefined || b === "";
			const sortOrder = $("#dutyTable").bootstrapTable("getOptions").sortOrder;
			const modifier = sortOrder === "asc" ? 1 : -1
			if (firstIsEmpty) {
				return 1 * modifier;
			}

			if (secondIsEmpty) {
				return -1 * modifier;
			}

			return a.localeCompare(b);
		}
	</script>
}

<div class="text-center" id="mainDiv">
	@if (Model.DutyCompletionRecords != null)
	{
	<nav>
		<div class="nav nav-tabs" id="nav-tab" role="tablist">
			<button class="nav-link active" id="nav-dungeons-tab" data-bs-toggle="tab" data-bs-target="#nav-dungeons" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Dungeons</button>
			<button class="nav-link" id="nav-trials-tab" data-bs-toggle="tab" data-bs-target="#nav-trials" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Trials</button>
			<button class="nav-link" id="nav-raids-tab" data-bs-toggle="tab" data-bs-target="#nav-raids" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Raids</button>
			<button class="nav-link" id="nav-alliance-raids-tab" data-bs-toggle="tab" data-bs-target="#nav-alliance-raids" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Alliance Raids</button>
			<button class="nav-link" id="nav-ultimate-raids-tab" data-bs-toggle="tab" data-bs-target="#nav-ultimate-raids" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Ultimate Raids</button>
			<button class="nav-link" id="nav-exploration-raids-tab" data-bs-toggle="tab" data-bs-target="#nav-exploration-raids" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Exploration Raids</button>
		</div>
	</nav>

	<div class="tab-content" id="nav-tabContent">
		<div class="tab-pane fade show active" id="nav-dungeons" role="tabpanel" aria-labelledby="nav-dungeons-tab">
			<div id="dutyTableDiv" style="display:none;">
				@await Html.PartialAsync("_DutyTable", Model.DutyCompletionRecords!.Where(r => r.ContentType == "Dungeons"))
			</div>
		</div>
		<div class="tab-pane fade" id="nav-trials" role="tabpanel" aria-labelledby="nav-trials-tab">
			@await Html.PartialAsync("_DutyTable", Model.DutyCompletionRecords!.Where(r => r.ContentType == "Trials"))
		</div>
		<div class="tab-pane fade" id="nav-raids" role="tabpanel" aria-labelledby="nav-raids-tab">
			@await Html.PartialAsync("_DutyTable", Model.DutyCompletionRecords!.Where(r => r.ContentType == "Raids"))
		</div>
		<div class="tab-pane fade" id="nav-alliance-raids" role="tabpanel" aria-labelledby="nav-alliance-raids-tab">
			@await Html.PartialAsync("_DutyTable", Model.DutyCompletionRecords!.Where(r => r.ContentType == "Alliance Raids"))
		</div>
		<div class="tab-pane fade" id="nav-ultimate-raids" role="tabpanel" aria-labelledby="nav-ultimate-raids-tab">
			@await Html.PartialAsync("_DutyTable", Model.DutyCompletionRecords!.Where(r => r.ContentType == "Ultimate Raids"))
		</div>
		<div class="tab-pane fade" id="nav-exploration-raids" role="tabpanel" aria-labelledby="nav-exploration-raids-tab">
			@await Html.PartialAsync("_DutyTable", Model.DutyCompletionRecords!.Where(r => r.ContentType == "Exploration"))
		</div>
		</div>
	}
	else
	{
		<nav>
			<div class="nav nav-tabs" id="nav-tab" role="tablist">
				<button class="nav-link active" id="nav-potd-tab" data-bs-toggle="tab" data-bs-target="#nav-potd" type="button" role="tab" aria-controls="nav-home" aria-selected="true">The Palace of the Dead</button>
				<button class="nav-link" id="nav-hoh-tab" data-bs-toggle="tab" data-bs-target="#nav-hoh" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Heaven-on-High</button>
				<button class="nav-link" id="nav-eo-tab" data-bs-toggle="tab" data-bs-target="#nav-eo" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Eureka Orthos</button>
			</div>
		</nav>
		<div class="tab-content" id="nav-tabContent">
			<div class="tab-pane fade show active" id="nav-potd" role="tabpanel" aria-labelledby="nav-potd-tab">
				<div id="dutyTableDiv" style="display:none;">
					@await Html.PartialAsync("_DeepDungeonTable", Model.DeepDungeonRecords!.Where(r => r.DeepDungeon == "The Palace of the Dead"))
				</div>
			</div>
			<div class="tab-pane fade" id="nav-hoh" role="tabpanel" aria-labelledby="nav-hoh-tab">
				@await Html.PartialAsync("_DeepDungeonTable", Model.DeepDungeonRecords!.Where(r => r.DeepDungeon == "Heaven-on-High"))
			</div>
			<div class="tab-pane fade" id="nav-eo" role="tabpanel" aria-labelledby="nav-eo-tab">
				@await Html.PartialAsync("_DeepDungeonTable", Model.DeepDungeonRecords!.Where(r => r.DeepDungeon == "Eureka Orthos"))
			</div>
		</div>
	}
</div>