{% extends 'base.html.twig' %}

{% block title %}
	{{ parent() }}
	- Checkout
{% endblock %}

{% set frequency = {
    "onetime": "one-time purchase",
    "monthly": "monthly subscription",
} %}

{% block content %}
	<div class="row g-2">
		<div class="col">
      {% if settings("checkout_allow_gifting") %}
        {% include msystem("checkout_gifting") %}
      {% endif %}

			<div class="card overflow-hidden mb-2">
				<div class="card-header">
					<b>Cart</b>
				</div>
				<div class="card-body">
					<div class="card overflow-hidden">
						<div class="d-flex">
							{% if product.image %}
								<div>
									<img src="{{ product.image }}" width="64" height="64" class="rounded overflow-hidden border m-2" alt="...">
								</div>
							{% endif %}
							<div class="card-body p-2 d-flex flex-column justify-content-center">
								<h5 class="card-title m-0">{{ product.name }}</h5>
								<p class="card-text">
									<small class="form-text">{{ (product.price / 100)|format_currency("USD") }}
										{{ frequency[product.frequency] }}</small>
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="card mt-2">
				<div class="card-header">
					Add a coupon code
				</div>
				<div class="card-body">
					<div class="input-group">
						<div class="form-floating">
							<input type="text" class="form-control" id="coupon" placeholder="Coupon code">
							<label for="coupon">Coupon code</label>
						</div>
						<button class="btn btn-warning px-4" id="addCoupon">Add coupon</button>
					</div>
					<div class="text-danger mt-2" id="addCouponError" style="display:none;">No coupon code was provided.</div>
				</div>
			</div>
		</div>

		<div class="col-sm-5 col-md-6 col-lg-5">
			<div class="card">
				<div class="card-body">
					<div id="loading" class="fade show placeholder-wave placeholder-glow">
						<div class="placeholder col-9"></div>
						<div class="form-text">
							<span class="placeholder col-1"></span>
							<span class="placeholder col-3"></span>
							<span class="placeholder col-5"></span>
							<span class="placeholder col-2"></span>
						</div>
						<select disabled class="form-control placeholder"></select>
						<a class="placeholder col-5 p-0 disabled mt-2" href="#"></a>
						<button class="mt-2 btn btn-warning disabled placeholder bg-gradient w-100"></button>
						<div class="form-text w-100">
							<span class="placeholder col-3"></span>
							<span class="placeholder col-2"></span>
							<span class="placeholder col-4"></span>
						</div>
					</div>
					<div id="collectTosAcceptance" class="fade">
						<div>Accept our Terms of Service</div>
						<small class="form-text">By clicking the button below, you acknowledge that you have read and agree to our
							<a href="https://reborngaming.net/tos">Terms of Service</a>
							and
							<a href="https://reborngaming.net/help/privacy-policy/">Privacy Policy</a>. If you do not agree to these terms, do not proceed with your purchase and close this webpage.</small>
						<button id="tosAcceptanceSubmit" class="btn btn-warning mt-2 w-100 bg-gradient">I accept</button>
					</div>
					<div id="collectEmail" class="fade">
						<div>Provide an email address</div>
						<small class="form-text">To continue with your purchase, we need your email address.</small>
						<div class="form-floating">
							<input type="email" class="form-control" id="email" placeholder="name@example.com">
							<label for="email">Email address</label>
						</div>
						<div class="form-text">
							We will
							<b>never</b>
							sell your email address.
							<a href="https://reborngaming.net/help/privacy-policy/">View how we use your data.</a>
						</div>
						<button id="emailSubmit" class="btn btn-warning mt-2 w-100 bg-gradient">Continue</button>
						<div class="form-text"></div>
					</div>
          {% if settings("collect_billing_information") %}
            <div id="collectBilling" class="fade">
              <div>Create your billing account</div>
              {# tooltip #}
              <div class="form-text">To complete your purchase, we need to create a
                <span class="text-muted text-decoration-underline" style="text-decoration-style: dotted!important;" data-bs-toggle="tooltip" data-bs-placement="top" title="Your billing account (Stripe) stores payment information and is used to identify you when making purchases">billing account.</div>
                <small class="form-text">Please provide your billing information.</small>
                <form id="billingForm" onsubmit="return false;">
                  <div class="form-floating mb-2">
                    <input type="text" class="form-control" id="name" placeholder="Name on card">
                    <label for="name">Legal Name on card</label>
                  </div>
                  <div class="form-floating mb-2">
                    <input type="text" class="form-control" id="addressLine1" placeholder="Address line 1" autocomplete="address-line1">
                    <label for="addressLine1">Address</label>
                  </div>
                  <div class="form-floating mb-2">
                    <input type="text" class="form-control" id="addressLine2" placeholder="Address line 2" autocomplete="address-line2">
                    <label for="addressLine2">Address (# of Apt, Ste, etc.)</label>
                  </div>
                  <div class="form-floating mb-2">
                    <input type="text" class="form-control" id="city" placeholder="City" autocomplete="address-level2">
                    <label for="city">City</label>
                  </div>
                  <div class="form-floating mb-2">
                    <input type="text" class="form-control" id="state" placeholder="State" autocomplete="address-level1">
                    <label for="state">State</label>
                  </div>
                  <div class="form-floating">
                    <input type="text" class="form-control" id="postalCode" placeholder="Postal code" autocomplete="postal-code">
                    <label for="postalCode">Postal code</label>
                  </div>
                </form>
                <button id="billingSubmit" class="btn btn-warning mt-2 w-100 bg-gradient">Continue</button>
                <div class="form-text">
                  We will
                  <b>never</b>
                  sell your billing information.
                  <a href="https://reborngaming.net/help/privacy-policy/">View how we use your data.</a>
                </div>
              </div>
            {% endif %}
						<div id="addCard" class="fade">
							<div>Enter payment information</div>
							<small class="form-text">
								You can remove this card at any time.
							</small>
							<div id="stripe-card-element"></div>
							<button class="btn btn-link text-decoration-none p-0 mt-2" disabled id="choosePaymentBtn">Use current payment method</button>
							<button class="btn btn-warning bg-gradient w-100 mt-2" id="saveCardBtn">Continue</button>
							<div class="form-text">
								We will
								<b>never</b>
								sell your card information.
								<a href="https://reborngaming.net/help/privacy-policy/">View how we use your data.</a>
							</div>
							<div class="text-danger mt-2 text-center" id="saveCardError" style="display:none;"></div>
						</div>
						<div id="existingCard" class="fade">
							<div>Confirm payment information</div>
							<small class="form-text">This card will be used to complete your purchase.</small>
							<div id="cardDetails" class="border rounded py-1 px-3 d-flex justify-content-between">
								<div class="card-left d-flex">
									<div class="card-icon">
										<i class="fab fa-cc-visa" id="cardIcon"></i>
									</div>
									<div class="card-details ms-2 me-auto" id="cardDetails">
										<code class="card-number-section text-muted">&bull;&bull;&bull;&bull;</code>
										<code class="card-number-section text-muted">&bull;&bull;&bull;&bull;</code>
										<code class="card-number-section text-muted">&bull;&bull;&bull;&bull;</code>
										<code class="card-number-section text-light" id="cardLast4">1234</code>
									</div>
								</div>
								<div class="card-right d-flex">
									<div class="card-expiry">
										<code class="text-light" id="cardExpiry">MM/YY</code>
									</div>
								</div>
							</div>
							<button class="btn btn-link text-decoration-none p-0 mt-2" id="addPaymentBtn">Change payment method</button>
							<button class="btn btn-warning bg-gradient w-100 mt-2" id="confirmPaymentBtn">Complete Purchase</button>
							<div class="form-text">
								We will
								<b>never</b>
								sell your card information.
								<a href="https://reborngaming.net/help/privacy-policy/">View how we use your data.</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		{% include msystem("stripe") %}
	{% endblock %}