[tmp page_title]__COMPANY__ -- [L]Checkout[/L][/tmp]
[tmp display_class]noleft[/tmp]
[tmpn onepage]1[/tmpn]

[include include/checkout/initialization]

@_TOP_@
	<!-- BEGIN CONTENT -->
		<div class="container p-4">
			<!-- Hero Section-->
			<div class="py-2">
				<h1>[L]Checkout form[/L]</h1>
				[if session logged_in]
				<p class="lead">[L]Please verify the information below and click the <b>'Place Order'</b> button to process your order.[/L]</p>[else]
				[include include/checkout/login_form][/else][/if][if !variable NO_TAX_POPUP]
				[include include/checkout/tax_popup][/if]
				[edisplay show_label=1 show_var=0 keep=1]
			</div>
			<!-- End Hero section-->
			<div class="container my-4">
					<form action="[area href=@@MV_PAGE@@ secure=1]" method="POST" name="checkout">
						[form-session-id]
						<input type="hidden" name="mv_action" value="refresh"/>
						<div class="container">
							<div class="block-header">
								<h4 class="d-flex justify-content-between align-items-center">[L]Order review[/L]</h4>
							</div>
							<div class="container my-2">
								<ul class="list-group my-2">
									<!-- Product Item -->
									[if items][then][item-list][item-calc]
									#Log("Checking master item $master");
									$row_class = ++$count % 2 ?  'cartnorm' : 'cartalt';
									my $item = '[item-increment]';
									my $up = q{[item-data merchandising upsell_to]};
									my $cr = q{[item-data merchandising cross_sell]};
									$upsell_remove{'[item-code]'} = 1;
									$cross_remove{'[item-code]'} = 1;
									my %seen = ( '' => 1 );
									$Scratch->{upsell} .= " $up" if $up;
									$Scratch->{cross_codes} .= " $cr" if $cr;
									my @up = split /\s+/, $Scratch->{upsell};
									my @cr = split /\s+/, $Scratch->{cross_codes};
									@up = grep  ( (!$seen{$_}++ && ! $upsell_remove{$_}), @up);
									@cr = grep  ( (!$seen{$_}++ && ! $cross_remove{$_}), @cr);
									$Scratch->{upsell} = join " ", @up;
									$Scratch->{cross_codes} = join " ", @cr;
									return;
									[/item-calc]
									<li class="list-group-item d-flex justify-content-between lh-sm">
										<div>
											<a href="[area href="[item-sku]"]"><h6 class="my-0">[item-description]</h6></a>
											<small class="text-muted">[item-discount-price]</small>
											<small class="text-muted">x [item-quantity]</small>
										</div>
										<span class="text-muted">[item-discount-subtotal]</</span>
									</li>
									[/item-list]
									<!-- End of Product Item -->
									<li class="list-group-item d-flex justify-content-between">
										<span>Subtotal</span>
										<strong>[subtotal]</strong>
									</li>
									[/then][/if]
								</ul>
							</div>
						</div>
						<!-- Shipping Address -->
						<div>
							<div class="block-header">
								<h4 class="d-flex justify-content-between align-items-center">Shipping</h4>
							</div>
							<div class="block-body">
							[include include/checkout/shipping_address]
							</div>
						</div>
						<!-- End of Shipping Address -->
						<!-- Billing Address -->
						<!-- End of Billing Address -->
						<!-- Delivery Method -->
						<div>
							<div class="block-header">
								<h4 class="d-flex justify-content-between align-items-center">Delivery method</h4>
							</div>
							<!-- Delivery option-->
							<div class="container my-4">
								<div class="block-body">
									<div class="form-group form-floating">
										[pikul widget="select" extra='id="ship_widget" aria-label= "Shipping method" class="form-control form-select" onchange="this.form.submit()"']
										<label for="ship_widget">Shipping method</label>
									</div>
									<!-- Shipping duration -->
									<!--div class="form-floating">
										<select class="form-select mb-3" aria-label="Shipping duration" id="shippingDurationSelect">
											<option selected value="1">Next Day (1 hari)</option>
											<option value="2">Reguler (2-3 hari)</option>
											<option value="3">Kargo (2-4 hari)</option>
										</select>
										<label for="shippingDurationSelect">Shipping duration</label>
									</div-->
									<!-- Shipping duration -->
									<!-- Shipping provider -->
									<!--div class="form-floating">
										<select class="form-select mb-3" aria-label="Shipping provider" id="shippingProviderSelect">
											<option selected value="1">AnterAja</option>
											<option value="2">Sicepat</option>
											<option value="3">JNE</option>
										</select>
										<label for="shippingProviderSelect">Shipping provider</label>
									</div-->
									<!-- Shipping provider -->
								</div>
							</div>
							<!-- End of delivery option -->
						</div>
						<!-- End of Delivery Method -->
						<!-- Payment Method -->
						<div>
							<div class="block-header">
								<h4 class="d-flex justify-content-between align-items-center">Payment method</h4>
							</div>
							<div class="block-body">
								<!-- Payment Option-->
								<div class="form-group form-floating">
									<select class="form-select" id="payment-method-1" aria-label="Payment method" name="mv_order_profile">
										<option selected value="bank_transfer">Manual Bank Transfer</option>
										<option value="QRIS">QRIS</option>
										<option value="COD">Cash on delivery</option>
									</select>
								</div>
								<!-- /Payment Option-->
							</div>
						</div>
						<!-- End of Payment Method -->
						<!-- Order summary -->
						<div>
							<div class="block-header">
								<h4 class="d-flex justify-content-between align-items-center">Order Summary</h4>
							</div>
							<div>
								<p class="text-sm">Shipping and additional costs are calculated based on values you have entered.</p>
								<ul class="order-summary mb-0 list-unstyled">
									<li class="order-summary-item"><span>[L]Subtotal[/L]</span><span>[subtotal]</span></li>
									<li class="order-summary-item"><span>[L]Shipping[/L]</span><span>[shipping]</span></li>
									<li class="order-summary-item border-0"><span>[L]Total[/L]</span><strong class="order-summary-total">[total-cost]</strong></li>
								</ul>
							</div>
						</div>

						<!-- End of Order Summary -->
						<div class="d-grid gap-2 d-md-block mb-5">[if items]
							&nbsp;&nbsp;
							[button
							text="[L]Place Order[/L]"
							wait-text="-- [L]Wait[/L] --"
							class="btn btn-primary btn-lg btn-block"
							]								mv_todo=submit
							[/button][else]
							<b>[L]No items in your shopping cart![/L]</b>[/else][/if]
						</div>
					</form>

			</div>
			[tmp clear_errors][error all=1 comment="Clear errors"][/tmp]
		</div>
		<!-- END CONTENT -->
__BOTTOM__