@inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>

@{ 
	string iconPath = "/Files/Images/Icons/";
}

<div class="h-100" data-dw-colorscheme="@Pageview.CurrentParagraph?.ColorSchemeId">
	<header class="d-flex flex-row align-items-center gap-3 px-2 py-3 border-bottom">
		<h1 class="h6 m-0 flex-fill">@Pageview.CurrentParagraph.Item["Title"]</h1>
		<a href="@GetString("Ecom:CustomerCenter.RMA.AddURL")" class="btn btn-link p-0">@Translate("+ Add new request")</a>
	</header>

	@if (GetInteger("Ecom:CustomerCenter.RMA.Count") != 0)
	{
		List<LoopItem> rmaLoop = GetLoop("RMAs");
		
		<table class="table d-none d-lg-table table-striped table-hover table-linked align-top mb-0">
		
			<thead>
				<tr>
					<th>@Translate("Placed")</th>
					<th>@Translate("Request number")</th>
					<th>@Translate("Order number")</th>
					<th>@Translate("Type")</th>
					<th class="text-end">@Translate("State")</th>
				</tr>
			</thead>
			
			<tbody class="border-top-0">
				@foreach (LoopItem rma in rmaLoop)
				{
					string rmaLink = rma.GetString("Ecom:RMA.DetailsURL");
					string rmaDate = rma.GetDate("Ecom:RMA.Date").TimeOfDay.Ticks > 0 ? rma.GetDate("Ecom:RMA.Date").ToString(Dynamicweb.Core.Helpers.DateHelper.DateOnlyFormatStringMedium) : rma.GetDate("Ecom:RMA.Date").ToShortDateString();
					string rmaStatus = rma.GetString("Ecom:RMA.Status");
					string badgeColor = "bg-dark text-white";

					<tr>
						<td>
                    		<a href="@rmaLink" class="d-block text-decoration-none">
                    			<span>@rmaDate</span>
                    		</a>
	                    </td>
						<td>
							<a href="@rmaLink" class="d-block text-decoration-none" tabindex="-1">@rma.GetString("Ecom:RMA.ID")</a>
						</td>
						<td>
							<a href="@rmaLink" class="d-block text-decoration-none" tabindex="-1">@rma.GetString("Ecom:RMA.OrderID")</a>
						</td>
						<td>
							<a href="@rmaLink" class="d-block text-decoration-none" tabindex="-1">@rma.GetString("Ecom:RMA.Type.Name")</a>
						</td>
						<td>
							<a href="@rmaLink" class="d-block text-end text-decoration-none" tabindex="-1">
								<span class="badge opacity-75 @badgeColor">@rmaStatus</span>
							</a>
						</td>
					</tr>
				}
			</tbody>
		</table>
		
		<table class="table d-table d-lg-none table-borderless table-linked table-clean align-top mb-0">
			@foreach (LoopItem rma in rmaLoop)
			{
				string rmaLink = rma.GetString("Ecom:RMA.DetailsURL");
				string rmaDate = rma.GetDate("Ecom:RMA.Date").TimeOfDay.Ticks > 0 ? rma.GetDate("Ecom:RMA.Date").ToString(Dynamicweb.Core.Helpers.DateHelper.DateOnlyFormatStringMedium) : rma.GetDate("Ecom:RMA.Date").ToShortDateString();

				<tbody class="border-bottom">
					<tr>
						<th>
							<a href="@rmaLink" class="d-block text-start text-decoration-none">
								<span class="fs-8">@Translate("Placed")</span>
							</a>
						</th>
						<td>
							<a href="@rmaLink" class="d-block text-end text-decoration-none" tabindex="-1">@rmaDate</a>
						</td>
					</tr>
					<tr>
						<th>
							<a href="@rmaLink" class="d-block text-start text-decoration-none" tabindex="-1">
								<span class="fs-8">@Translate("Request number")</span>
							</a>
						</th>
						<td>
							<a href="@rmaLink" class="d-block text-end text-decoration-none" tabindex="-1">@rma.GetString("Ecom:RMA.ID")</a>
						</td>
					</tr>
					<tr>
						<th>
							<a href="@rmaLink" class="d-block text-start text-decoration-none" tabindex="-1">
								<span class="fs-8">@Translate("Order number")</span>
							</a>
						</th>
						<td>
							<a href="@rmaLink" class="d-block text-end text-decoration-none" tabindex="-1">@rma.GetString("Ecom:RMA.OrderID")</a>
						</td>
					</tr>
					<tr>
                		<th>
                			<a href="@rmaLink" class="d-block text-start text-decoration-none" tabindex="-1">
                				<span class="fs-8">@Translate("Type")</span>
                			</a>
                		</th>
                		<td>
                			<a href="@rmaLink" class="d-block text-end text-decoration-none" tabindex="-1">@rma.GetString("Ecom:RMA.Type.Name")</a>
                		</td>
	                </tr>
					<tr>
						<th>
							<a href="@rmaLink" class="d-block text-start text-decoration-none" tabindex="-1">
								<span class="badge opacity-75 bg-dark text-white">@Translate("State")</span>
							</a>
						</th>
						<td>
							<a href="@rmaLink" class="d-block text-end text-decoration-none" tabindex="-1">@rma.GetString("Ecom:RMA.Status")</a>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<a href="@rmaLink" class="d-block text-decoration-none" tabindex="-1">
								<div class="d-grid">
									<span class="btn btn-secondary" data-dw-button="secondary">@Translate("View RMA details")</span>
								</div>
							</a>
						</td>
					</tr>
				</tbody>
			}
		</table>
	
		if (GetBoolean("Ecom:CustomerCenter.RMA.Paging.Show"))
		{
			<div class="p-3 mt-3">
				<ul class="pagination m-0">
					@for (int i = 1; i <= GetInteger("Ecom:CustomerCenter.Paging.NumPages"); i++)
					{
						string css = (i == GetInteger("Ecom:CustomerCenter.Paging.CurrentPage")) ? "page-item active" : "page-item";
	
						<li class="@css">
							@string.Format("<a class=\"page-link\" href=\"javascript:goToPage({0});\">{0}</a>", i)
						</li>
					}
				</ul>
			</div>
			
			<script>
				function goToPage(page) {
					let url = new URL(document.location.href);
					url.searchParams.set('PageNum', page);
					url.searchParams.set('CCPage' + @GetString("ParagraphID"), page);
					document.location.href = url;
				}
			</script>
		}
	}
	else
	{
		<div class="alert alert-info text-center mt-3" role="alert">
			@Translate("No Requests found")
		</div>
	}

</div>
