@inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>
@using Dynamicweb.Rendering
@using Dynamicweb.Frontend
@using System.Globalization

@{
	AddScript("/Files/Templates/Designs/Swift-v2/Assets/lib/flatpickr/dist/flatpickr.min.js", true);
	AddStylesheet("/Files/Templates/Designs/Swift-v2/Assets/lib/flatpickr/dist/flatpickr.min.css");

	var paragraphViewmodel = Dynamicweb.Frontend.ContentViewModelFactory.CreateParagraphInfoViewModel(Pageview.CurrentParagraph);
	string orderShippingDate = !string.IsNullOrWhiteSpace(GetString("Ecom:Order.ShippingDate")) ? GetDate("Ecom:Order.ShippingDate").ToString("yyyy-MM-dd") : string.Empty;
	bool enableDeliveryDate = !string.IsNullOrEmpty(paragraphViewmodel.Item.GetString("EnableDeliveryDate")) ? paragraphViewmodel.Item.GetBoolean("EnableDeliveryDate") : false;
	var disabledWeekdays =  !string.IsNullOrEmpty(paragraphViewmodel.Item.GetString("DisabledWeekdays")) ? paragraphViewmodel.Item.GetList("DisabledWeekdays")?.GetRawValue().OfType<string>().ToList() : new List<string>();
	var disabledDates = !string.IsNullOrEmpty(paragraphViewmodel.Item.GetString("DisabledDates")) ? paragraphViewmodel.Item.GetItems("DisabledDates") : new List<Dynamicweb.Frontend.ItemViewModel>();

	if(enableDeliveryDate)
    {
		<div class="mt-4" id="OrderDeliveryDate">

			<h3 class="fs-6 fw-normal mb-0">@Translate("Select delivery date")</h3>
			<p class="fs-8 mb-3">@Translate("Choose either next available or a specific date")</p>

			<div class="list-group">

				<label class="list-group-item list-group-item-action d-flex justify-content-between" role="button">
					<span class="d-flex justify-content-between">
						<input class="form-check-input me-3" type="radio" name="DeliveryDate" value="False" checked="@(string.IsNullOrEmpty(orderShippingDate))" onchange="hideDeliveryDateContainer()" id="NextAvailableDeliveryDate">
						<div>@Translate("Next available delivery date")</div>
					</span>
				</label>

				<label class="list-group-item list-group-item-action d-flex justify-content-between" role="button">
					<span class="d-flex justify-content-between">
						<input class="form-check-input me-3" type="radio" name="DeliveryDate" value="True" checked="@(!string.IsNullOrEmpty(orderShippingDate))" onchange="showDeliveryDateContainer()" id="SelectSpecificDeliveryDate">
						<div>@Translate("Select specific date")</div>
					</span>
				</label>

				@* Save empty delivery, if checked *@
				<div class="d-none" id="NextDeliveryDateContainer">
					<input disabled="@(!string.IsNullOrEmpty(orderShippingDate))" type="hidden" name="EcomOrderShippingDate" value="">
				</div>

				<div class="collapse @(!string.IsNullOrEmpty(orderShippingDate) ? "show" : null)" id="DeliveryDateContainer">
					<div class="list-group-item border-top-0 py-3">
						<div class="input-group flatpickr" data-swift-date-picker>
							<input type="text" class="form-control" id="EcomOrderShippingDate" name="EcomOrderShippingDate" placeholder="@Translate("Select date")" data-input disabled="@(string.IsNullOrEmpty(orderShippingDate))">

							<button class="btn btn-outline-primary d-flex justify-content-center align-items-center" type="button" data-toggle id="ToggleDateCalendar">
								<span class="icon-2">
									@ReadFile("/Files/Images/Icons/calendar.svg")
								</span>
							</button>

							<button class="btn btn-outline-primary d-flex justify-content-center align-items-center" type="button" data-clear id="DeleteDeliveryDate">
								<span class="icon-2">
									@ReadFile("/Files/Images/Icons/xmark.svg")
								</span>
							</button>
						</div>
					</div>
				</div>

			</div>

			<script>
				function showDeliveryDateContainer() {
					var show = new bootstrap.Collapse('#DeliveryDateContainer', {
						show: true
					});

					@* //Enable the correct form fields *@
					document.querySelector("#DeliveryDateContainer").querySelectorAll(".form-control").forEach(function(field) {
						field.removeAttribute("disabled");
					});

					document.querySelector("#NextDeliveryDateContainer").querySelectorAll("input").forEach(function (field) {
						field.setAttribute("disabled", "true");
					});
				};
				function hideDeliveryDateContainer() {
					var hide = new bootstrap.Collapse('#DeliveryDateContainer', {
						hide: true
					});

					@* //Enable the correct form fields *@
					document.querySelector("#DeliveryDateContainer").querySelectorAll(".form-control").forEach(function(field) {
						field.setAttribute("disabled", "true");
					});

					document.querySelector("#NextDeliveryDateContainer").querySelectorAll("input").forEach(function (field) {
						field.removeAttribute("disabled");
					});
				};
			</script>

			@{
				@* build the list of disabled weekdays for js function *@
				string disabeldDate = "date.getDay() === ";
				List<string> disabledWeekdaysList = new List<string>();
				foreach (var date in disabledWeekdays)
				{
					disabledWeekdaysList.Add(disabeldDate + date);
				}
				string disabledWeekdaysString = string.Join(" || ", disabledWeekdaysList.Select(x => x.ToString()).ToArray());

				// Convert .NET tokens to flatpickr tokens - https://flatpickr.js.org/formatting/
				string ToFlatpickr(string p) {
					return p
						.Replace("dddd", "l")
						.Replace("ddd", "D")
						.Replace("MMMM", "F")
						.Replace("MMM", "M")
						.Replace("yyyy", "Y")
						.Replace("yy", "y")
						.Replace("MM", "m")
						.Replace("M", "n")
						.Replace("dd", "d")
						.Replace("d", "j");
				}
				var fpFormat = ToFlatpickr(Pageview.Area.CultureInfo.DateTimeFormat.ShortDatePattern);
			}

			<script type="module">

				flatpickr.localize(flatpickr.l10ns.@(Pageview.Area.CultureInfo.TwoLetterISOLanguageName)); // Set the flatpickr locale language from culture info

				flatpickr("[data-swift-date-picker]", {
					altInput: true,
					dateFormat: 'Z',
					altFormat: '@(fpFormat)',
					weekNumbers: true,
					minDate: new Date().fp_incr(1),
					defaultDate: '@(!string.IsNullOrWhiteSpace(orderShippingDate) ? orderShippingDate : DateTime.Today.AddDays(1).ToString("yyyy-MM-dd"))',
					wrap: true,
			
					@if(disabledDates.Count > 0 || disabledWeekdays.Count > 0)
					{
						@:disable: [
							foreach (var date in disabledDates)
							{
								@:{
									@:from: "@date.GetDateTime("DisabledDateStart").ToString("yyyy-MM-dd")",
									if (date.GetDateTime("DisabledDateEnd") > DateTime.Now) {
										@:to: "@date.GetDateTime("DisabledDateEnd").ToString("yyyy-MM-dd")"
									}
									else {
										@:to: "@date.GetDateTime("DisabledDateStart").ToString("yyyy-MM-dd")"
									}
								@:},
							}
							if(disabledWeekdays.Count > 0)
							{
								@:function (date) {
									@:return (
										@disabledWeekdaysString
									@:);
								@:}
							}
						@:],
						@:"locale": {
							@:"firstDayOfWeek": 1
						@:}
					}
				});

			</script>

		</div>

    }

}
