{%- if template == 'cart' -%}
{{ 'datepicker.material.css' | asset_url | stylesheet_tag }}
{{ 'datepicker.js' | asset_url | script_tag }}
{%- endif -%}

<div id="cart-content">
{%- if cart.item_count == 0 -%}
	{% assign el_id = "empty-cart" %}
	<style>
	#{{ el_id }} .empty-content .empty-ctn-item {
		width: calc(50% - 10px);
	}
	#empty-cart .emtpy-cart-msg {
		margin-top: 7px;
	}

	@media only screen and (min-width: 1024px) {
		#empty-cart .emtpy-cart-msg {
			margin-top: 10px;
		}
	}
	</style>
	<div id="{{ el_id }}" class="sp-lg relative">
		<div class="container">
			{%- if settings.cart_empty_title -%}
				<h1 class="h3 tc c-black">{{ settings.cart_empty_title }}</h1>
			{%- endif -%}
			{%- if settings.cart_empty_msg -%}
				<div class="emtpy-cart-msg p1 c-black tc">{{ settings.cart_empty_msg }}</div>
			{%- endif -%}

			<div class="relative w-full flex jc-center ai-start flex-wrap rowgap-25 d-rowgap-40 mt-25 d-mt-40">
				<div class="ctn-cart-empty w-full pages flex jc-center flex-wrap colgap-20 rowgap-20">
					{% # empty content %}
					{%- render 'cart-empty-content' -%}
					{% # END empty content %}
				</div>
				{%- if settings.cart_empty_btn_label and settings.cart_empty_btn_url  -%}
				<a href="{{ settings.cart_empty_btn_url }}" class="btn1 tc" title="{{ settings.cart_empty_btn_label | escape }}">{{ settings.cart_empty_btn_label }}</a>
				{%- endif -%}
			</div>
		</div>
	</div>
{%- else -%}
	<style>
		.cart-checkout-panel-container {
			order: 99;
		}
        .help-icon {
            width: 15px;
            height: 15px;
        }
        .c-red a {
            color: var(--red);
        }

		.cart-checkout-panel-container .cart-checkout-panel {
			width: 100vw;
			margin-left: var(--container_padding_min);
            margin-right: var(--container_padding_min);
			position: sticky;
			top: 100px;
		}

		/* #cart-content form:not(:has(input[name="tnc"]:checked)) .btn-checkout{
			pointer-events: none;
			background: var(--grey);
		} */

		#cart-content .rte a {
			border-bottom: initial;
			text-decoration: underline;
			font-weight: initial;
		}

		#cart-content .global-checkbox .checkbox-label .checkmark {
			top: 3px;
			left: 0;
			height: 16px;
			width: 16px;
			border: 1px solid var(--border);
			border-radius: 3px;
			background-color: var(--white);
		}

		#cart-content .global-checkbox .checkbox-label input[type="checkbox"]:checked + .checkmark{
			background: var(--gold);
			border-color: var(--gold);
		}

		#cart-content .checkbox-label.p3{
			margin-bottom: 0px;
		}

		#cart-content .cart-item .global-form-qty button.global-minus {
			margin-left: initial;
		}

		#cart-content .cart-item .global-form-qty button.global-plus {
			margin-right: initial;
		}

		#cart-content textarea[name="note"]::placeholder {
			opacity: 0.3;
		}

		#cart-content .cart-item-counter {
			height: 27px;
			width: 27px;
			border-radius: 50%;
			background: var(--green);
			color: var(--white);
			display: flex;
			align-items: center;
			justify-content: center;
			
		}

		#cart-content .btn-continue{
			color: var(--green);
			font-weight: 900;
		}

		#cart-content textarea[name="note"] {
			height: 120px;
		}

		#cart-content .pt-8 {
			padding-top: 8px;
		}

		#cart-content .title-border {
			height: 1px;
			background: var(--border);
			width: 100vw;
			margin-left: var(--container_padding_min);
		}
		#cart-content .promo-codes-info-trigger:hover > .promo-codes-info {
			display: block;
		}
		#cart-content .promo-codes-info {
			display: none;
			width: 230px;
			position: absolute;
			bottom: 0;
			left: -15px;
		}
		#cart-content .promo-codes-info .inner {
			cursor: auto;
			background-color: #ffffff;
			box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.16);
		}
		#cart-content .promo-codes-info p {
			padding-bottom: 0;
		}

		#cart-content .dot-in-cart {
			width: 3px;
			height: 3px;
			display: inline-block;
			margin-bottom: 2px;
		}	
		.delivery-method .datepicker {
			width: 100%;
		}
		.delivery-method .method {
			width: 50%;
			row-gap: 2px;
		}
		.delivery-method .method.selected {
			border: 2px solid var(--black);
		}
		.delivery-method .input-with-icon input,
		.delivery-method .input-with-icon .global-select-div {
			padding-left: 45px;
		}
		.delivery-method .input-with-icon .input-icon {
			width: 16px;
			height: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 50%;
			left: 15px;
			transform: translateY(-50%);
		}
		#cart-content #cart-summary-main {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 3;
			background: var(--white);
			width: 100%;
			border-radius: 0;
			box-shadow: 0px -3px 6px #0000001A;
		}
		
		@media only screen and (min-width: 600px){
			#cart-content .cart-right {
				background-color: initial;
				margin-top: initial;
			}

			.cart-checkout-panel-container .cart-checkout-panel {
				width: 100vw;
				margin-left: var(--container_padding_min_t);
                margin-right: var(--container_padding_min_t);
			}

			#cart-content .title-border {
				margin-left: var(--container_padding_min_t);
			}
		}

		@media only screen and (min-width: 1024px){
			.hide-d {
				display: none;
			}

			.cart-checkout-panel-container {
				order: initial;
			}
			
			.d-flex-none {
				flex: none;
			}

			.cart-checkout-panel-container .cart-checkout-panel {
				width: 100%;
				margin-left: initial;
                margin-right: initial;
			}

			#cart-content .title-border {
				width: 100%;
				margin-left: initial;
			}
			#cart-content .cart-summary-parent {
				position: sticky;
				top: 170px;
			}
			#cart-content #cart-summary-main {
				position: relative;
				left: unset;
				bottom: unset;
				z-index: unset;
				background: var(--grey);
				width: auto;
				box-shadow: none;
			}
		}
	</style>
	<div class="cart-loading absolute top-0 left-0 w-full h-full zi-3 bg-grey opacity-5">&nbsp;</div>
		<div id="{{ el_id }}" class="relative">
		<div class="container pt-40 t-pt-50 d-pt-60 hd-pt-80 hhd-pt-100">
			<form action="{{ routes.cart_url }}" method="post" id="cartform" class="row flex flex-wrap">
				<div class="col-12 col-d-8">
					<div class="flex flex-column d-pr-25 hd-pr-50 hhd-pr-80">
						<div class="relative flex jc-between w-full ai-center bb-1 b-border pb-20 d-pb-25">
							<h1 class="h3 tc t-tl d-tl">{{ 'cart.general.title' | t }} ({{  cart.item_count }})</h1>
							<div class="continue-shopping">
								<a href="{{ cart_continue_link }}" class="link1" alt="{{ 'cart.general.continue_shopping' | t }}">{{ 'cart.general.continue_shopping' | t }}</a>
							</div>
						</div>
						<div class="cart-left">
							<div class="flex flex-column">
								<div class="items-wrapper bb-1 b-border">
									<ul class="header-cart-items">
										{%- for item in cart.items -%}
											{%- assign pro = item.product -%}
											{%- assign group_id = false -%}
											{%- assign group_parent = false -%}
											{%- assign is_gwp = false -%}
											{%- if item.properties['_isGWP'] != blank -%}
												{%- assign is_gwp = true -%}
											{%- endif -%}
											{%- if item.properties['_group_id'] != blank -%}
												{%- assign group_id = item.properties['_group_id'] -%}
											{%- endif -%}
											{%- if item.properties['_group_parent'] != blank -%}
												{%- assign group_parent = item.properties['_group_parent'] -%}
											{%- endif -%}
											{%- assign class = 'pt-15 pb-15' -%}
											{%- if forloop.first -%}
												{%- assign class = 'pt-25 pb-15 d-pt-30' -%}
											{%- endif  -%}
											{%- if forloop.last -%}
												{%- assign class = 'pt-15 pb-30 d-pb-50' -%}
											{%- endif  -%}
											{% render 'cart-item',
                                                index: forloop.index,
                                                item: item,
                                                group_id: group_id,
                                                group_parent: group_parent,
                                                class: class,
                                                is_cart_page: true 
                                            %}
										{%- endfor -%}
									</ul>
								</div>

								{% comment %} Check if only e gift item {% endcomment %}
								{%- assign only_e_gift = true -%}
								{%- for item in cart.items -%}
									{%- unless item.product.gift_card? -%}
										{%- assign only_e_gift = false -%}
										{%- break -%}
									{%- endunless -%}
								{%- endfor -%}
								{% comment %} Check if only e gift item {% endcomment %}

								<div class="row mt-25 d-mt-50">
									<div class="delivery-method col-12 col-hd-6 d-pr-15 hd-pr-15 hhd-pr-15 {% if only_e_gift == true %}hide-m{% endif %}">
										<h2 class="p1 bold-500 mb-15 d-mb-20">1. Select Delivery Method</h2>
										<div class="flex colgap-10 d-colgap-15 mb-15">
											<button type="button" onclick="handleChangeDeliveryMethod('delivery-el')" data-target="delivery-el" class="method flex flex-column ai-center b-1 b-border rounded-5 p-20 d-p-30 selected">
												<div class="icon">
													<svg xmlns="http://www.w3.org/2000/svg" width="17.1" height="17.1" viewBox="0 0 17.1 17.1">
														<path id="package_24dp_FILL0_wght100_GRAD0_opsz24" d="M178.292-781.156l2.208-1.1,2.208,1.1v-6.071h-4.416Zm-3.312,6.458v-.773H180.5v.773Zm-1.325,3.7a1.608,1.608,0,0,1-1.187-.469,1.608,1.608,0,0,1-.469-1.187v-13.688a1.608,1.608,0,0,1,.469-1.187,1.608,1.608,0,0,1,1.187-.469h13.688a1.608,1.608,0,0,1,1.187.469,1.608,1.608,0,0,1,.469,1.187v13.688a1.608,1.608,0,0,1-.469,1.187,1.608,1.608,0,0,1-1.187.469Zm-.883-16.227v0Zm.883,15.455h13.688a.844.844,0,0,0,.607-.276.844.844,0,0,0,.276-.607v-13.688a.844.844,0,0,0-.276-.607.844.844,0,0,0-.607-.276h-3.864v7.341l-2.981-1.49-2.981,1.49v-7.341h-3.864a.844.844,0,0,0-.607.276.844.844,0,0,0-.276.607v13.688a.844.844,0,0,0,.276.607A.844.844,0,0,0,173.656-771.773Z" transform="translate(-171.95 788.05)" fill="#050606" stroke="#050606" stroke-width="0.1"/>
													</svg>
												</div>
												<p class="p2 bold-500 c-black">Delivery</p>
											</button>
											<button type="button" onclick="handleChangeDeliveryMethod('pickup-el')" data-target="pickup-el" class="method flex flex-column ai-center b-1 b-border rounded-5 p-20 d-p-30">
												<div class="icon">
													<svg xmlns="http://www.w3.org/2000/svg" width="19.352" height="17.2" viewBox="0 0 19.352 17.2">
														<path id="material-symbols-light-storefront-outline-rounded" d="M5.121,20.5a1.579,1.579,0,0,1-1.615-1.615V10.858A2.7,2.7,0,0,1,2.58,9.633a2.351,2.351,0,0,1-.013-1.618L3.54,4.808a1.946,1.946,0,0,1,.646-.96,1.734,1.734,0,0,1,1.1-.348h13.4a1.8,1.8,0,0,1,1.1.326,1.855,1.855,0,0,1,.648.943l1.011,3.246a2.385,2.385,0,0,1-.012,1.631,2.762,2.762,0,0,1-.926,1.25v7.989A1.582,1.582,0,0,1,18.89,20.5Zm9.085-10a1.815,1.815,0,0,0,1.438-.54,1.385,1.385,0,0,0,.4-1.114L15.38,4.5H12.507V8.7a1.778,1.778,0,0,0,.5,1.268,1.591,1.591,0,0,0,1.2.532m-4.5,0a1.7,1.7,0,0,0,1.3-.532,1.791,1.791,0,0,0,.5-1.268V4.5H8.633L7.967,8.923a1.357,1.357,0,0,0,.407,1.021,1.644,1.644,0,0,0,1.332.556m-4.45,0a1.553,1.553,0,0,0,1.124-.45,1.979,1.979,0,0,0,.576-1.123L7.583,4.5h-2.3a.85.85,0,0,0-.52.144.852.852,0,0,0-.288.433L3.556,8.235a1.779,1.779,0,0,0,.21,1.527,1.618,1.618,0,0,0,1.49.738m13.5,0a1.714,1.714,0,0,0,1.434-.7,1.632,1.632,0,0,0,.266-1.565l-.973-3.2a.752.752,0,0,0-.289-.413.945.945,0,0,0-.519-.125H16.429l.627,4.427a1.979,1.979,0,0,0,.576,1.123,1.553,1.553,0,0,0,1.124.45m-13.635,9h13.77a.592.592,0,0,0,.615-.615V11.373a2.2,2.2,0,0,1-.384.1,2.493,2.493,0,0,1-.366.029,2.569,2.569,0,0,1-1.188-.263,3.065,3.065,0,0,1-.974-.84,3.092,3.092,0,0,1-.967.8,2.943,2.943,0,0,1-1.4.308,2.446,2.446,0,0,1-1.138-.279,4.444,4.444,0,0,1-1.085-.825,3.467,3.467,0,0,1-1.113.825A2.8,2.8,0,0,1,9.73,11.5,3.259,3.259,0,0,1,8.5,11.26,2.407,2.407,0,0,1,7.457,10.4a3.618,3.618,0,0,1-1.288.92,3,3,0,0,1-.912.184,2.424,2.424,0,0,1-.372-.029,2.026,2.026,0,0,1-.378-.1v7.512a.592.592,0,0,0,.615.615m13.77,0h0Z" transform="translate(-2.33 -3.4)" fill="#050606" stroke="#fff" stroke-width="0.2"/>
													</svg>
												</div>
												<p class="p2 bold-500 c-black">Self-collection</p>
											</button>
										</div>

										<div id="delivery-el" class="method-el">
											<div class="input-with-icon relative">
												<input type="text" id="cart-delivery-date" class="global-input with-border p2" placeholder="Select your delivery date" autocomplete="off">
												<div class="input-icon absolute">{{ settings.icon_calendar }}</div>
												<input type="hidden" id="_deliveryDate" name="attributes[Date Delivery]" data-old-value="">
											</div>
											<div id="cart-delivery-date-error" class="global-error-msg p3 mt-5 hide-m">Please select delivery date</div>
											<p class="no-date c-error-red p2 mt-15 hide-m">No date available</p>

											<div class="input-with-icon timeslots relative mt-15">
												{% comment %}These hardcoded options will be overriden by js{% endcomment %}
												{%- assign values = '10:00 AM - 5:00 PM,5:00 PM - 10 PM' |  split: ',' -%}
												{%- render 'global-select',
													label: 'Select your delivery time',
													label_class: 'p2',
													values: values,
													list_option_class: 'p2',
													selected_text_class: 'p2',
													id: 'delivery-time',
													field_name: 'delivery-time',
													onchange: 'selectDeliverySlots(this);'
												-%}
												<div class="input-icon absolute">
													<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">
														<path id="schedule_FILL0_wght200_GRAD0_opsz24" d="M131.944-827.388l.668-.668-3.64-3.64v-4.526h-.944v4.918ZM128.5-823a8.283,8.283,0,0,1-3.315-.669,8.589,8.589,0,0,1-2.7-1.816,8.58,8.58,0,0,1-1.818-2.7A8.267,8.267,0,0,1,120-831.5a8.284,8.284,0,0,1,.669-3.315,8.589,8.589,0,0,1,1.816-2.7,8.581,8.581,0,0,1,2.7-1.818A8.268,8.268,0,0,1,128.5-840a8.285,8.285,0,0,1,3.315.669,8.59,8.59,0,0,1,2.7,1.816,8.58,8.58,0,0,1,1.818,2.7A8.267,8.267,0,0,1,137-831.5a8.284,8.284,0,0,1-.669,3.315,8.589,8.589,0,0,1-1.816,2.7,8.58,8.58,0,0,1-2.7,1.818A8.268,8.268,0,0,1,128.5-823ZM128.5-831.5Zm0,7.555a7.283,7.283,0,0,0,5.348-2.208,7.283,7.283,0,0,0,2.208-5.348,7.284,7.284,0,0,0-2.208-5.348,7.283,7.283,0,0,0-5.348-2.208,7.283,7.283,0,0,0-5.348,2.208,7.284,7.284,0,0,0-2.208,5.348,7.283,7.283,0,0,0,2.208,5.348A7.283,7.283,0,0,0,128.5-823.945Z" transform="translate(-120 840)" fill="#050606"/>
													</svg>
												</div>
											</div>
											<div id="delivery-time-error" class="global-error-msg p3 mt-5 hide-m">Please select delivery time</div>
										</div>
										<div id="pickup-el" class="method-el hide-m">
											{%- assign stores = '' -%}
											{%- assign store_values = '' -%}
											{% for store in shop.metaobjects.store_location.values %}
												{%- if store.enable.value and store.include_in_cart_delivery_module.value -%}
													{%- assign stores = stores | append: '::' | append: store.name.value -%}
													{% comment %}
														Please don't add line break to the "capture"
													{% endcomment %}
													{% assign store_address = store.address.value | newline_to_br | strip_newlines | replace: '<br />', ' ' %}
													{% capture store_details %}{{ store.name.value }}||{{ store_address }}||{{ store.city.value }}||{{ store.province.value }}||{{ store.country.value }}||{{ store.zip_code.value }}||{{ store.phone.value }}{% endcapture %}
													{%- assign store_values = store_values | append: '::' | append: store_details -%}
												{%- endif -%}
											{% endfor %}
											{%- assign stores = stores | remove_first: '::' | split: '::' -%}
											{%- assign store_values = store_values | remove_first: '::' | split: '::' -%}
											<div class="input-with-icon relative mt-15">
												{%- render 'global-select',
													label: 'Select your store location',
													label_class: 'p2',
													values: stores,
													option_values: store_values,
													list_option_class: 'p2',
													selected_text_class: 'p2',
													id: 'store-location',
													field_name: 'store-location'
													onchange: 'setCheckoutUrlWithStoreLocation()'
												-%}
												<div class="input-icon absolute">
													<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">
														<path id="schedule_FILL0_wght200_GRAD0_opsz24" d="M131.944-827.388l.668-.668-3.64-3.64v-4.526h-.944v4.918ZM128.5-823a8.283,8.283,0,0,1-3.315-.669,8.589,8.589,0,0,1-2.7-1.816,8.58,8.58,0,0,1-1.818-2.7A8.267,8.267,0,0,1,120-831.5a8.284,8.284,0,0,1,.669-3.315,8.589,8.589,0,0,1,1.816-2.7,8.581,8.581,0,0,1,2.7-1.818A8.268,8.268,0,0,1,128.5-840a8.285,8.285,0,0,1,3.315.669,8.59,8.59,0,0,1,2.7,1.816,8.58,8.58,0,0,1,1.818,2.7A8.267,8.267,0,0,1,137-831.5a8.284,8.284,0,0,1-.669,3.315,8.589,8.589,0,0,1-1.816,2.7,8.58,8.58,0,0,1-2.7,1.818A8.268,8.268,0,0,1,128.5-823ZM128.5-831.5Zm0,7.555a7.283,7.283,0,0,0,5.348-2.208,7.283,7.283,0,0,0,2.208-5.348,7.284,7.284,0,0,0-2.208-5.348,7.283,7.283,0,0,0-5.348-2.208,7.283,7.283,0,0,0-5.348,2.208,7.284,7.284,0,0,0-2.208,5.348,7.283,7.283,0,0,0,2.208,5.348A7.283,7.283,0,0,0,128.5-823.945Z" transform="translate(-120 840)" fill="#050606"/>
													</svg>
												</div>
												<input type="hidden" id="_pickupStore" name="attributes[Store Name]">
												<input type="hidden" id="_pickupStoreAddress" name="attributes[Store Address]">
											</div>
											<div id="store-location-error" class="global-error-msg p3 mt-5 hide-m">Please select store location</div>
											
											<div class="input-with-icon relative mt-15">
												<input type="text" id="cart-pickup-date"  class="global-input with-border p2" placeholder="Select your pickup date" autocomplete="off">
												<div class="input-icon absolute">{{ settings.icon_calendar }}</div>
												<input type="hidden" id="_pickupDate" name="attributes[Date Pickup]" data-old-value="">
											</div>
											<div id="cart-pickup-date-error" class="global-error-msg p3 mt-5 hide-m">Please select pickup date</div>
											<p class="no-date c-error-red p2 mt-15 hide-m">No date available</p>

											<div class="input-with-icon timeslots relative mt-15">
												{%- assign values = '10:00 AM - 5:00 PM,5:00 PM - 10 PM' |  split: ',' -%}
												{%- render 'global-select',
													label: 'Select your pickup time',
													label_class: 'p2',
													values: values,
													list_option_class: 'p2',
													selected_text_class: 'p2',
													id: 'pickup-time',
													field_name: 'pickup-time',
													onchange: 'selectPickupSlots(this);'
												-%}
												<div class="input-icon absolute">
													<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">
														<path id="schedule_FILL0_wght200_GRAD0_opsz24" d="M131.944-827.388l.668-.668-3.64-3.64v-4.526h-.944v4.918ZM128.5-823a8.283,8.283,0,0,1-3.315-.669,8.589,8.589,0,0,1-2.7-1.816,8.58,8.58,0,0,1-1.818-2.7A8.267,8.267,0,0,1,120-831.5a8.284,8.284,0,0,1,.669-3.315,8.589,8.589,0,0,1,1.816-2.7,8.581,8.581,0,0,1,2.7-1.818A8.268,8.268,0,0,1,128.5-840a8.285,8.285,0,0,1,3.315.669,8.59,8.59,0,0,1,2.7,1.816,8.58,8.58,0,0,1,1.818,2.7A8.267,8.267,0,0,1,137-831.5a8.284,8.284,0,0,1-.669,3.315,8.589,8.589,0,0,1-1.816,2.7,8.58,8.58,0,0,1-2.7,1.818A8.268,8.268,0,0,1,128.5-823ZM128.5-831.5Zm0,7.555a7.283,7.283,0,0,0,5.348-2.208,7.283,7.283,0,0,0,2.208-5.348,7.284,7.284,0,0,0-2.208-5.348,7.283,7.283,0,0,0-5.348-2.208,7.283,7.283,0,0,0-5.348,2.208,7.284,7.284,0,0,0-2.208,5.348,7.283,7.283,0,0,0,2.208,5.348A7.283,7.283,0,0,0,128.5-823.945Z" transform="translate(-120 840)" fill="#050606"/>
													</svg>
												</div>
											</div>
											<div id="pickup-time-error" class="global-error-msg p3 mt-5 hide-m">Please select pickup time</div>
										</div>
									</div>
									<div class="col-12 col-hd-6 mt-25 hd-mt-0 d-pl-15 hd-pl-15 hhd-pl-15">
										<h2 class="p1 bold-500 mb-15 d-mb-20">{% if only_e_gift == false %}2. {% endif %}Any Special Instructions?</h2>
										<textarea name="note" id="cart-note" class="global-input with-border p2" placeholder="Enter courier instructions here; contactless delivery is default.">{{ cart.note }}</textarea>

										{%- if settings.tnc_checkbox -%}
											{%- assign tnc_label = settings.tnc_label -%}
											{%- assign tnc_link_label = settings.tnc_link_label -%}
											{%- if settings.tnc_label == blank -%}
												{%- assign tnc_label = 'I have agreed to the' -%}
											{%- endif -%}
											{%- if settings.tnc_link_label == blank -%}
												{%- assign tnc_link_label = 'Terms & Conditions' -%}
											{%- endif -%}

											<div class="relative mt-25">
												{% render 'global-checkbox'
													text: tnc_label,
													url: settings.tnc_link,
													url_label: tnc_link_label,
													url_class: 'link1',
													name: 'tnc',
													id: 'tnc-cart',
													error_message: '',
													required: false
												%}
												{%- if settings.tnc_html != blank -%}
												<div class="relative mt-10 rte p3">
													{{ settings.tnc_html }}
												</div>
												{%- endif -%}
											</div>
										{%- endif -%}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12 col-d-4">
					<div class="cart-summary-parent relative pl-0 t-pl-35 d-pl-0 hhd-pl-50">
						<div id="cart-summary-main" class="flex flex-column d-rounded-5 p-25">
							{%- render 'free-shipping-info', padding_class:'', text_class: 'p2 tc' -%}
							<div class="relative summary-wrapper flex flex-column mt-25">
								{% comment %}
								<div class="flex jc-between ai-center">
									<div class="summary-label p2">
										{{ 'cart.general.subtotal_with_count' | t: count: cart.item_count }}
									</div>
									<div class="summary-value p2">
										{{ cart.total_price | money }}
									</div>
								</div>
								<div class="flex jc-between ai-center mt-10">
									<div class="summary-label p2">
										{{ 'cart.label.shipping' | t: count: cart.item_count }}
									</div>
									<div class="summary-value p2">
										Calculated on checkout
									</div>
								</div>
								{%- if settings.cart_promo_codes_info != blank -%}
									<div class="flex jc-between ai-center mt-10 relative">
										<div class="summary-label p2 flex jc-start ai-center">
											<span>Promo code</span>
											<div class="promo-codes-info-trigger cursor help-icon ml-5">
												{{ settings.icon_question }}
												<div class="promo-codes-info pb-35">
													<div class="inner rte p3 pt-15 pb-15 pl-15 pr-15">{{ settings.cart_promo_codes_info }}</div>
												</div>
											</div>
										</div>
										<div class="summary-value p2">
											Apply on next step
										</div>
									</div>
								{%- endif -%}
								<div class="flex jc-between ai-start mt-10 pt-10 bt-1 b-border">
									<div class="summary-label p2 bold-600">
										{{ 'cart.label.total' | t }}
									</div>
									<div class="summary-value p2">
										<p class="p2 bold-600 tr">{{ cart.total_price | money }}</p>
										{%- if cart.total_discount > 0 -%}
											{%- capture cart_discount -%}{{ cart.total_discount | money }}{%- endcapture -%}
											<p class="p3 c-red tr">{{ 'cart.general.saved' | t: discount: cart_discount }}</p>
										{%- endif -%}
									</div>
								</div>
								{% endcomment %}
								<div class="flex flex-column jc-start ai-start">
									<input type="hidden" id="_rateName" name="attributes[_rateName]">
									{% comment %} <input type="hidden" id="_checkoutTime" name="attributes[_goto_checkout_time]"> {% endcomment %}
									<input type="hidden" id="_days_in_advance" name="attributes[_days_in_advance]">
									<input type="hidden" id="_cut_off_time" name="attributes[_cut_off_time]">
									<button 
										type="button" 
										onclick="handleCheckoutBtnClick(this)" 
										class="btn1 w-full btn-checkout-cart-page" 
										data-tnc-alert="{{ 'cart.general.tnc_alert' | t }}"
										data-only-e-gift="{{ only_e_gift }}"
									>
										<span>{{ 'cart.general.order_now' | t }}</span>
										<span class="dot-in-cart bg-white rounded-100c ml-10 mr-10">&nbsp;</span>
										<span class="price-in-cart">{{ cart.total_price | money }}</span>
									</button>
									<button type="submit" name="checkout" style="display:none;"></button>
								</div>
								<p class="p2 tc c-link-grey mt-15">{{ 'cart.general.discount_calculate_at_checkout' | t }}</p>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
{%- endif -%}
</div>

<script>
document.addEventListener('DOMContentLoaded', function(ev){
	$360.updateCartPage({{ cart.item_count }});

	const {slideDown, slideUp, slideToggle} = window.domSlider

	const note_cb = document.querySelector('#pc-note-cb');
	if (!note_cb) return;

	note_cb.addEventListener('change', function(cEv){
		const value = cEv.target.checked;
		const inputNote = document.querySelector('#pc-note-input');
		const cbContainer = note_cb.closest('.note-cb-container')
		const cbLabel = cbContainer.querySelector('.cb-note-label');
		if (!inputNote) return;
		slideToggle({element: inputNote})
		if (!value) {
			// cbLabel.innerHTML = cbContainer.querySelector('input[name="cb_label"]').value;
			inputNote.value = '';
		} else {
			//cbLabel.innerHTML = cbContainer.querySelector('input[name="cb_label_added"]').value;
		}
	})
});

function handleChangeDeliveryMethod(methodEl) {
	if(methodEl == 'pickup-el') {
		setCheckoutUrlWithStoreLocation();
		selectPickupSlots(document.getElementById('pickup-time'));
		document.getElementById('_deliveryDate').value = '';
		const ovPickupDate = document.getElementById('_pickupDate').getAttribute('data-old-value');
		document.getElementById('_pickupDate').value = ovPickupDate;
	} else {
		document.getElementById('cartform').setAttribute('action', '{{ routes.cart_url }}');
		document.getElementById("_pickupStore").value = '';
		document.getElementById("_pickupStoreAddress").value = '';
		selectDeliverySlots(document.getElementById('delivery-time'));
		document.getElementById('_pickupDate').value = '';
		const ovPickupDate = document.getElementById('_deliveryDate').getAttribute('data-old-value');
		document.getElementById('_deliveryDate').value = ovPickupDate;
	}

	document.querySelector('.delivery-method .method.selected').classList.remove('selected');
	document.querySelector(`.delivery-method .method[data-target="${methodEl}"]`).classList.add('selected');
	
	document.querySelector('.method-el:not(.hide-m)').classList.add('hide-m');
	document.getElementById(methodEl).classList.remove('hide-m');
}

function setCheckoutUrlWithStoreLocation() {
	if(document.getElementById('store-location').value == '') return;

	const selectedStore = document.getElementById('store-location').value.split('||');
	const companyName = '{{ shop.name }}';
	const storeName = selectedStore[0];
	const storeAddress = selectedStore[1];
	const storeCity = selectedStore[2];
	const storeProvince = selectedStore[3];
	const storeCountry = selectedStore[4];
	const storeZipCode = selectedStore[5];
	const storePhone = selectedStore[6];

	const urlQuery = new URLSearchParams();
	urlQuery.append('checkout[shipping_address][company]', companyName);
	urlQuery.append('checkout[shipping_address][address1]', storeAddress);
	urlQuery.append('checkout[shipping_address][city]', storeCity);
	urlQuery.append('checkout[shipping_address][province]', storeProvince);
	urlQuery.append('checkout[shipping_address][country]', storeCountry);
	urlQuery.append('checkout[shipping_address][zip]', storeZipCode);
	// urlQuery.append('checkout[shipping_address][phone]', storePhone);

	const checkoutUrl = `{{ routes.cart_url }}?${urlQuery}`;
	document.getElementById('cartform').setAttribute('action', checkoutUrl);

	document.getElementById('store-location').closest('.global-select-div').classList.remove('global-input-error');
	document.getElementById('store-location-error').classList.add('hide-m');

	/* store name, store address */
	const _pickupStoreAddress = `${storeAddress}\n${storeCountry}, ${storeZipCode}, ${storePhone}`;
	document.getElementById("_pickupStore").value = storeName;
	document.getElementById("_pickupStoreAddress").value = _pickupStoreAddress;
}

function handleCheckoutBtnClick(button) {
	let formIsValid = true;
	const isOnlyEGift = button.getAttribute('data-only-e-gift') == 'true'

	if(!isOnlyEGift) {
		if(!document.getElementById('delivery-el').classList.contains('hide-m')) {
			if(document.getElementById('cart-delivery-date').value == '' || document.getElementById('_deliveryDate').value == '') {
				document.getElementById('cart-delivery-date').classList.add('global-input-error');
				document.getElementById('cart-delivery-date-error').classList.remove('hide-m');
				formIsValid = false;
			}
			if(document.getElementById('delivery-time').value == '') {
				document.getElementById('delivery-time').closest('.global-select-div').classList.add('global-input-error');
				document.getElementById('delivery-time-error').classList.remove('hide-m');
				formIsValid = false;
			}
		} else {
			if(document.getElementById('store-location').value == '') {
				document.getElementById('store-location').closest('.global-select-div').classList.add('global-input-error');
				document.getElementById('store-location-error').classList.remove('hide-m');
				formIsValid = false;
			}
			if(document.getElementById('cart-pickup-date').value == '' || document.getElementById('_pickupDate').value == '') {
				document.getElementById('cart-pickup-date').classList.add('global-input-error');
				document.getElementById('cart-pickup-date-error').classList.remove('hide-m');
				formIsValid = false;
			}
			if(document.getElementById('pickup-time').value == '') {
				document.getElementById('pickup-time').closest('.global-select-div').classList.add('global-input-error');
				document.getElementById('pickup-time-error').classList.remove('hide-m');
				formIsValid = false;
			}
		}
	}

	if(!formIsValid) {
		$360.scrollTo('.delivery-method');
		return;
	}	

	const tnc = button.closest('form').querySelector('input[name="tnc"]');
	if (tnc && !tnc.checked) {
		alert(button.getAttribute('data-tnc-alert'));
		return;
	}

	// let sgpTime = new Date();
	// sgpTime.setHours(sgpTime.getUTCHours() + 8);
	// document.getElementById('_checkoutTime').value = Date.parse(sgpTime);

	button.style.height = `${button.offsetHeight}px`;
	button.style.width = `${button.offsetWidth}px`;
	button.innerHTML = $360.btnLoading();
	button.setAttribute('disabled', true);
	button.form.querySelector(`button[type='submit']`).click();
}

// Code for delivery method
function dmFormateDate(date) {
	const day = String(date.getDate()).padStart(2, '0');
	const month = String(date.getMonth() + 1).padStart(2, '0');
	const year = date.getFullYear();
	return `${day}-${month}-${year}`;
}

const globalMf = {{ shop.metafields.global | json }};
const globalDelivery = globalMf.delivery;
const globalPickup = globalMf.pickup;
const deliveryCutOffTime = globalDelivery.cut_off_time; // Represents 18:00
const pickupCutOffTime = globalPickup.cut_off_time; // Represents 18:00

const weekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const singaporeTime = new Date();
singaporeTime.setHours(singaporeTime.getUTCHours() + 8);

function dmGetAllowedDates(globalObject, type) {
	let daysInAdvance = parseInt(globalObject.days_in_advance);
	let deliveryOffTime = deliveryCutOffTime;
	let pickupOffTime = pickupCutOffTime;
	let blocked_days = globalObject.blocked_out_days;
	let blocked_dates = globalObject.blocked_out_dates;
	let max_date = globalObject.max_date;
	if(max_date === "") {
		max_date = 180;
	}

	// pull data from variant settings
	if($360Shop.vSettings) {
		if(vDeliverySettings && type == 'delivery') {
			daysInAdvance = parseInt(vDeliverySettings.days_in_advance);
			if(minDateDelivery < max_date) {
				max_date = minDateDelivery;
			}
			// deliveryOffTime = vDeliverySettings.cut_off_time;
			// blocked_days = vDeliverySettings.blocked_out_days;
			// blocked_dates = vDeliverySettings.blocked_out_dates;
		}
		if(vPickupSettings && type == 'pickup') {
			daysInAdvance = parseInt(vPickupSettings.days_in_advance);
			if(minDatePickup < max_date) {
				max_date = minDatePickup;
			}
			// pickupOffTime = vPickupSettings.cut_off_time;
			// blocked_days = vPickupSettings.blocked_out_days;
			// blocked_dates = vPickupSettings.blocked_out_dates;
		}
		// console.log('vDeliverySettings', vDeliverySettings);
		// console.log('vPickupSettings', vPickupSettings);
	}
	// END pull data from variant settings

	const cutOffTime = new Date();
	if(type == 'delivery') {
		cutOffTime.setHours(parseInt(deliveryOffTime.substring(0, 2)), parseInt(deliveryOffTime.substring(2)), 0);
		document.getElementById("_cut_off_time").value = deliveryOffTime;
	} else {
		cutOffTime.setHours(parseInt(pickupOffTime.substring(0, 2)), parseInt(pickupOffTime.substring(2)), 0);
		document.getElementById("_cut_off_time").value = pickupOffTime;
	}
	// console.log('daysInAdvance before', daysInAdvance);
	// console.log('singaporeTime.getHours()', singaporeTime.getHours(), cutOffTime.getHours());
	// console.log('singaporeTime.getMinutes()', singaporeTime.getMinutes(), cutOffTime.getMinutes());

	// Check if current time is after cutoff time (consider hours and minutes)
	if(singaporeTime.getHours() > cutOffTime.getHours() || (singaporeTime.getHours() === cutOffTime.getHours() && singaporeTime.getMinutes() > cutOffTime.getMinutes())) {
		daysInAdvance++;
	}
	document.getElementById("_days_in_advance").value = daysInAdvance;
	// console.log('daysInAdvance', daysInAdvance);

	const blockedOutDays = {};
	weekdays.forEach((day, index) => {
		blockedOutDays[day] = blocked_days[index] === "true";
	});
	const blockedOutDates = blocked_dates;

	const allowedDates = [];
	for (let num = 1; num <= max_date; num++) {
		if(num >= daysInAdvance) {
			const date = new Date(singaporeTime);
			date.setDate(singaporeTime.getDate() + num);
			const dateString = dmFormateDate(date);

			if(blockedOutDates.includes(dateString)) {
				continue;
			}

			const dayName = date.toLocaleDateString('en-US', { weekday: 'short' });
			if(blockedOutDays[dayName]) {
				allowedDates.push(date);
			}
		}
	}
	// console.log('allowedDates', allowedDates);

	return allowedDates;
}

// parse date
function parseDate(dateString, type) {
	// Create a new Date object from the input string
	const date = new Date(dateString);
	
	// Check if the Date object is valid (optional)
	if (isNaN(date.getTime())) {
		if(type == 'delivery') {
			document.getElementById('cart-delivery-date').value == '';
		} else {
			document.getElementById('cart-pickup-date').value == '';
		}
		return '';
		// return "Invalid date format";
	}

	// Extract year, month, and day components
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0'); // Pad month with leading zero
	const day = String(date.getDate()).padStart(2, '0'); // Pad day with leading zero

	// Format the date in the desired output format
	return `${day}-${month}-${year}`;
}

// Delivery Datepicker
const deliveryWithinDates = dmGetAllowedDates(globalDelivery, 'delivery');
if(!deliveryWithinDates.length) {
	document.querySelector('#delivery-el .datepicker').classList.add('hide-m');
	document.querySelector('#delivery-el .no-date').classList.remove('hide-m');
}
new Datepicker('#cart-delivery-date', {
	weekStart: 1,
	i18n: { weekdays: weekdays },
	within: deliveryWithinDates,
	// min: new Date(deliveryWithinDates[0]),
	min: (function(){
      let date = new Date(deliveryWithinDates[0]);
      date.setDate(date.getDate() - 1);
      return date;
    })(),
	max: new Date(deliveryWithinDates[deliveryWithinDates.length - 1]),
	onRender: function(el) {
		let pickupDateEl = document.getElementById('cart-delivery-date');
		pickupDateEl.blur();
	},
	onChange: function(date) {
		if (typeof date != "undefined") {
			let deliveryDateEl = document.getElementById('cart-delivery-date');
			let deliveryDateVal = parseDate(date, 'delivery');
			deliveryDateEl.value = deliveryDateVal;
			deliveryDateEl.classList.remove('global-input-error');
			document.getElementById('cart-delivery-date-error').classList.add('hide-m');
			document.getElementById("_deliveryDate").value = deliveryDateVal;
			document.getElementById("_deliveryDate").setAttribute('data-old-value', deliveryDateVal);
		}
	}
});
// End Delivery Datepicker

// Pickup Datepicker
const pickupWithinDates = dmGetAllowedDates(globalPickup, 'pickup');
if(!pickupWithinDates.length) {
	document.querySelector('#pickup-el .datepicker').classList.add('hide-m');
	document.querySelector('#pickup-el .no-date').classList.remove('hide-m');
}
new Datepicker('#cart-pickup-date', {
	weekStart: 1,
	i18n: { weekdays: weekdays },
	within: pickupWithinDates,
	min: (function(){
      let date = new Date(pickupWithinDates[0]);
      date.setDate(date.getDate() - 1);
      return date;
    })(),
	// min: new Date(pickupWithinDates[0]),
	max: new Date(pickupWithinDates[pickupWithinDates.length - 1]),
	onRender: function(el) {
		let pickupDateEl = document.getElementById('cart-pickup-date');
		pickupDateEl.blur();
	},
	onChange: function(date) {
		if (typeof date != "undefined") {
			let pickupDateEl = document.getElementById('cart-pickup-date');
			let pickupDateVal = parseDate(date, 'pickup');
			pickupDateEl.value = pickupDateVal;
			pickupDateEl.classList.remove('global-input-error');
			document.getElementById('cart-pickup-date-error').classList.add('hide-m');
			document.getElementById("_pickupDate").value = pickupDateVal;
			document.getElementById("_pickupDate").setAttribute('data-old-value', pickupDateVal);
		}
	}
});
// End Pickup Datepicker

// Delivery time slot picker
const deliveryTimeSlots = globalDelivery.timeslots;
let dtsOptionLiHtml = '';
let dtsOptionHtml = '<option value="">-- Please select --</option>';
deliveryTimeSlots.forEach(dts => {
	dtsOptionLiHtml += `<li class="option p2" data-value="${dts.timeslot}">${dts.shipping_title}</li>`;
	dtsOptionHtml += `<option value="${dts.timeslot}" data-shipping-title="${dts.shipping_title}">${dts.shipping_title}</option>`;
});

document.querySelector('#delivery-el .timeslots .options').innerHTML = dtsOptionLiHtml;
document.querySelector('#delivery-el .timeslots select').innerHTML = dtsOptionHtml;

function selectDeliverySlots(el) {
	const selectedOpt = el.options[el.selectedIndex];
	const targetEl = document.getElementById("_rateName");
	if (selectedOpt.dataset.shippingTitle) {
		targetEl.value = selectedOpt.dataset.shippingTitle;
		document.getElementById('delivery-time').closest('.global-select-div').classList.remove('global-input-error');
		document.getElementById('delivery-time-error').classList.add('hide-m');
	}
}
// Delivery time slot picker

// Pickup time slot picker
const pickupTimeSlots = globalPickup.timeslots;
let ptsOptionLiHtml = '';
let ptsOptionHtml = '<option value="">-- Please select --</option>';
pickupTimeSlots.forEach(pts => {
	ptsOptionLiHtml += `<li class="option p2" data-value="${pts.timeslot}">${pts.shipping_title}</li>`;
	ptsOptionHtml += `<option value="${pts.timeslot}" data-shipping-title="${pts.shipping_title}">${pts.shipping_title}</option>`;
});

document.querySelector('#pickup-el .timeslots .options').innerHTML = ptsOptionLiHtml;
document.querySelector('#pickup-el .timeslots select').innerHTML = ptsOptionHtml;

function selectPickupSlots(el) {
	const selectedOpt = el.options[el.selectedIndex];
	const targetEl = document.getElementById("_rateName");
	if (selectedOpt.dataset.shippingTitle) {
		targetEl.value = selectedOpt.dataset.shippingTitle;
	}

	document.getElementById('pickup-time').closest('.global-select-div').classList.remove('global-input-error');
	document.getElementById('pickup-time-error').classList.add('hide-m');
}
// Pickup time slot picker
</script>

{% schema %}
{
    "name": "Cart Content",
    "settings": [
        {
            "type": "header",
            "content": "Cart Settings"
        }
    ],
    "presets": [
		{
			"name": "Cart Content",
			"blocks": []
		}
	]
}
{% endschema %}
