{{ header }}
<div id="checkout-checkout" class="container">
	<ul class="breadcrumb">
		{% for breadcrumb in breadcrumbs %}
			<li class="breadcrumb-item">
				<a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
			</li>
		{% endfor %}
	</ul>
	<div class="row justify-content-center">{{ column_left }}
		<div id="content" class="col-md-10">{{ content_top }}
			{# <h1>{{ heading_title }}</h1> #}
			<div
				class="row justify-content-center card mb-5" id="checkout-main-row">
				{# CUSTOM DEV #}
				<style>
					#myTab .nav-tabs .nav-item.show .nav-link,
					.nav-tabs .nav-link {
						color: white;
					}
					#myTab .nav-tabs .nav-item.show .nav-link,
					.nav-tabs .nav-link.active {
						color: #000000 !important
					}
				</style>
				<div class="col-md-12 p-0">
					<ul class="nav nav-tabs justify-content-start" id="myTab" role="tablist" style="background: #000000;">
						<li class="nav-item" role="presentation">
							<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true" title="PERSONAL DETAILS">
								<i class="fa-solid fa-calendar-check"></i>
								PERSONAL DETAILS
							</button>
						</li>
						<li class="nav-item" role="presentation">
							<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false" title="CONFIRM ORDER">
								<i class="fa-solid fa-circle-check"></i>
								CONFIRM ORDER
							</button>
						</li>
					</ul>
					<div class="tab-content p-3" id="myTabContent">
						<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
							{% if register or payment_address or shipping_address %}
								<div class="col-md-12 mb-3">
									{% if register %}
										<div id="checkout-register">{{ register }}</div>
									{% endif %}
									{% if payment_address %}
										<div id="checkout-payment-address">{{ payment_address }}</div>
									{% endif %}
									{% if shipping_address %}
										<div id="checkout-shipping-address">{{ shipping_address }}</div>
									{% endif %}
								</div>
							{% endif %}
						</div>
						<div class="tab-pane fade mb-3" id="profile" role="tabpanel" aria-labelledby="profile-tab">
							<div class="row pt-3">
								{% if shipping_method %}
									<div id="checkout-shipping-method" class="mb-3 col-md-6 mb-0" style="height: 70px;">{{ shipping_method }}</div>
								{% endif %}
								<div id="checkout-payment-method" class="mb-4 col-md-6 mb-0" style="height: 70px;">{{ payment_method }}</div>


								<div class="mb-2 mt-2  col-md-12">
									<label for="input-comment" class="form-label">
										<strong>Add Comment</strong>
									</label>
									<textarea name="comment" rows="4" id="input-comment" class="form-control">{{ comment }}</textarea>
								</div>

								<div id="checkout-confirm" class="mt-3">{{ confirm }}</div>
							</div>
						</div>
					</div>
				</div>
				{# CUSTOM DEV #}


			</div>
		</div>
		{{ content_bottom }}
	</div>
	{{ column_right }}
</div>
{{ footer }}

<script>

	// Comment
var timer = '';

$('#input-comment').on('keydown', function () {
$('#button-confirm').prop('disabled', true);

// Request
clearTimeout(timer);

timer = setTimeout(function (object) {
chain.attach(function () {
return $.ajax({
url: 'index.php?route=checkout/payment_method.comment&language=                                                                   {{ language }}',
type: 'post',
data: $('#input-comment').serialize(),
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
success: function (json) {
console.log(json);

$('.alert-dismissible').remove();

if (json['redirect']) {
location = json['redirect'];
}

if (json['error']) {
$('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');

$('#button-confirm').prop('disabled', false);
}

if (json['success']) {
$('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-circle-check"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');

$('#button-confirm').prop('disabled', false);
}

window.setTimeout(function () {
$('.alert-dismissible').fadeTo(1000, 0, function () {
$(this).remove();
});
}, 3000);
},
error: function (xhr, ajaxOptions, thrownError) {
$('#button-confirm').prop('disabled', false);

console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
}, 1000, this);
});
</script>