{% extends "layouts/base.html" %}

{% load static %}

{% block title %} Account Billing {% endblock title %}

{% block stylesheet %} {% endblock stylesheet %}

{% block body_attributes %} {% endblock body_attributes %}

{% block content %} 
<!--begin::Container-->
<div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
	<!--begin::Post-->
	<div class="content flex-row-fluid" id="kt_content">
        <!--begin::Navbar-->
        <div class="card mb-5 mb-xl-10">
            <div class="card-body pt-9 pb-0">
                <!--begin::Details-->
                {% include "profiles/profile_info.html" %}
                <!--end::Details-->
                <!--begin::Navs-->
                {% include "profiles/profile_menu.html" %}
                <!--begin::Navs-->
            </div>
        </div>
        <!--end::Navbar-->
		<!--begin::Billing Summary-->
		
		<!--end::Billing Summary-->
		<!--begin::Layout-->
		<div class="d-flex flex-column flex-lg-row">
			<!--begin::Content-->
			<div class="flex-lg-row-fluid me-lg-15 order-2 order-lg-1 mb-10 mb-lg-0">
				<!--begin::Form-->
				<form class="form" action="#" id="kt_subscriptions_create_new">
					<!--begin::Pricing-->
					<div class="card card-flush pt-3 mb-5 mb-lg-10">
			<!--begin::Card body-->
			<div class="card-body">
				
				
				<!--begin::Row-->
				<div class="row">
					<!--begin::Col-->
					<div class="col-lg-7">
						<!--begin::Heading-->
						<h3 class="mb-2">Active until {{user.subscription.ends_time}}</h3>
						<p class="fs-6 text-gray-600 fw-bold mb-6 mb-lg-15">We will send you a notification upon Subscription expiration</p>
						<!--end::Heading-->
						<!--begin::Info-->
						<div class="fs-5 mb-2">
							<span class="text-gray-800 fw-bolder me-1">${{user.subscription.plan.price}}</span>
							<span class="text-gray-600 fw-bold">Per Month</span>
						</div>
						<!--end::Info-->
						<!--begin::Notice-->
						<div class="fs-6 text-gray-600 fw-bold">Extended Pro Package. Up to 100 Agents &amp; 25 Projects</div>
						<!--end::Notice-->
					</div>
					<!--end::Col-->
					<!--begin::Col-->
					{% comment %} <div class="col-lg-5">
						<!--begin::Heading-->
						<div class="d-flex text-muted fw-bolder fs-5 mb-3">
							<span class="flex-grow-1 text-gray-800">Plan Time</span>
							<span class="text-gray-800">86 of 100 Used</span>
						</div>
						<!--end::Heading-->
						<!--begin::Progress-->
						<div class="progress h-8px bg-light-primary mb-2">
							<div class="progress-bar bg-primary" role="progressbar" style="width: 86%" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100"></div>
						</div>
						<!--end::Progress-->
						<!--begin::Description-->
						<div class="fs-6 text-gray-600 fw-bold mb-10">14 Users remaining until your plan requires update</div>
						<!--end::Description-->
						<!--begin::Action-->
						<div class="d-flex justify-content-end pb-0 px-0">
							<a href="#" class="btn btn-light btn-active-light-primary me-2">Cancel Subscription</a>
							<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_upgrade_plan">Upgrade Plan</button>
						</div>
						<!--end::Action-->
					</div> {% endcomment %}
					<!--end::Col-->
				</div>
				<!--end::Row-->
			</div>
			<!--end::Card body-->
					</div>
					<!--end::Pricing-->
					<!--begin::Payment method-->
					<div class="card card-flush pt-3 mb-5 mb-lg-10" data-kt-subscriptions-form="pricing">
						<!--begin::Card header-->
						<div class="card-header">
							<!--begin::Card title-->
							<div class="card-title">
								<h2 class="fw-bold">Payment Information</h2>
							</div>
							<!--begin::Card title-->
						</div>
						<!--end::Card header-->
						<!--begin::Card body-->
						<div class="card-body pt-0">
							<!--begin::Options-->
							<div id="kt_create_new_payment_method">
								<!--begin::Option-->
								{% if user.subscription %}
								<div class="py-1">
									<!--begin::Header-->
									<div class="py-3 d-flex flex-stack flex-wrap">
										<!--begin::Toggle-->
										<div class="d-flex align-items-center collapsible toggle" data-bs-toggle="collapse" data-bs-target="#kt_create_new_payment_method_1">
											<!--begin::Arrow-->
											<div class="btn btn-sm btn-icon btn-active-color-primary ms-n3 me-2">
												<!--begin::Svg Icon | path: icons/duotune/general/gen036.svg-->
												<span class="svg-icon toggle-on svg-icon-primary svg-icon-2">
													<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
														<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="currentColor" />
														<rect x="6.0104" y="10.9247" width="12" height="2" rx="1" fill="currentColor" />
													</svg>
												</span>
												<!--end::Svg Icon-->
												<!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
												<span class="svg-icon toggle-off svg-icon-2">
													<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
														<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="5" fill="currentColor" />
														<rect x="10.8891" y="17.8033" width="12" height="2" rx="1" transform="rotate(-90 10.8891 17.8033)" fill="currentColor" />
														<rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="currentColor" />
													</svg>
												</span>
												<!--end::Svg Icon-->
											</div>
											<!--end::Arrow-->
											<!--begin::Logo-->
											<!-- <img src="/metronic8/demo7/assets/media/svg/card-logos/mastercard.svg" class="w-40px me-3" alt="" /> -->
											<!--end::Logo-->
											<!--begin::Summary-->
											<div class="me-3">
												<div class="d-flex align-items-center fw-bold">{{user.subscription.plan.paymentSource}}
												<div class="badge badge-light-primary ms-5">Primary</div></div>
												<div class="text-muted">Expired: {{user.subscription.ends_time|date:"d b Y"}}</div>
											</div>
											<!--end::Summary-->
										</div>
										<!--end::Toggle-->
									</div>
									<!--end::Header-->
									<!--begin::Body-->
									<div id="kt_create_new_payment_method_1" class="collapse show fs-6 ps-10">
										<!--begin::Details-->
										<div class="d-flex flex-wrap py-5">
											<!--begin::Col-->
											<div class="flex-equal me-5">
												<table class="table table-flush fw-semibold gy-1">
													<tr>
														<td class="text-muted min-w-125px w-125px">Name</td>
														<td class="text-gray-800">{{user.get_full_name}}</td>
													</tr>
													<tr>
														<td class="text-muted min-w-125px w-125px">Expires</td>
														<td class="text-gray-800">{{user.subscription.ends_time|date:"d b Y"}}</td>
													</tr>
													<tr>
														<td class="text-muted min-w-125px w-125px">ID</td>
														<td class="text-gray-800">{{user.subscription.payment.transactionID}}</td>
													</tr>
												</table>
											</div>
											<!--end::Col-->
											<!--begin::Col-->
											<div class="flex-equal">
												<table class="table table-flush fw-semibold gy-1">
													<tr>
														<td class="text-muted min-w-125px w-125px">Phone</td>
														<td class="text-gray-800">{{user.profile.phone}}</td>
													</tr>
													<tr>
														<td class="text-muted min-w-125px w-125px">Email</td>
														<td class="text-gray-800">
															<a href="#" class="text-gray-900 text-hover-primary">{{user.email}}</a>
														</td>
													</tr>
													<tr>
														<td class="text-muted min-w-125px w-125px">Logged From</td>
														<td class="text-gray-800">{{user.profile.country.name}}
															<div class="symbol symbol-20px symbol-circle ms-2">
																<img src="{{user.profile.country.flag}}" />
															</div>
														</td>
													</tr>
												</table>
											</div>
											<!--end::Col-->
										</div>
										<!--end::Details-->
									</div>
									<!--end::Body-->
								</div>
								{% else %}
								<div class="py-1">
									<h2>You have no payment method yet!</h2>
								</div>
								{% endif %}
								<!--end::Option-->
								
								<!--end::Option-->
							</div>
							<!--end::Options-->
						</div>
						<!--end::Card body-->
					</div>
					<!--end::Payment method-->
				</form>
				<!--end::Form-->
			</div>
			<!--end::Content-->
			<!--begin::Sidebar-->
			<div class="flex-column flex-lg-row-auto w-100 w-lg-250px w-xl-300px mb-10 order-1 order-lg-2">
				<!--begin::Card-->
				<div class="card card-flush pt-3 mb-0" data-kt-sticky="true" data-kt-sticky-name="subscription-summary" data-kt-sticky-offset="{default: false, lg: '200px'}" data-kt-sticky-width="{lg: '250px', xl: '300px'}" data-kt-sticky-left="auto" data-kt-sticky-top="150px" data-kt-sticky-animation="false" data-kt-sticky-zindex="95">
					<!--begin::Card header-->
					<div class="card-header">
						<!--begin::Card title-->
						<div class="card-title">
							<h2>Summary</h2>
						</div>
						<!--end::Card title-->
					</div>
					<!--end::Card header-->
					<!--begin::Card body-->
					<div class="card-body pt-0 fs-6">
						<!--begin::Section-->
						<div class="mb-7">
							<!--begin::Title-->
							<h5 class="mb-3">My Account</h5>
							<!--end::Title-->
							<!--begin::Details-->
							<div class="d-flex align-items-center mb-1">
								<!--begin::Name-->
								<a href="{% url 'profile:index' %}" class="fw-bold text-gray-800 text-hover-primary me-2"> {{ user.get_full_name }} </a>
								<!--end::Name-->
								<!--begin::Status-->
								{% if user.is_verified %} 
								<span class="badge badge-light-success"> Active </span> 
								{% else %}
								<span class="badge badge-light-warning"> Not Active </span> 
								{% endif %}
								<!--end::Status-->
							</div>
							<!--end::Details-->
							<!--begin::Email-->
							<a href="#" class="fw-semibold text-gray-600 text-hover-primary"> {{ request.user.email }} </a>
							<!--end::Email-->
						</div>
						<!--end::Section-->
						<!--begin::Seperator-->
						<div class="separator separator-dashed mb-7"></div>
						<!--end::Seperator-->
						<!--begin::Section-->
						<div class="mb-7">
							<!--begin::Title-->
							<h5 class="mb-3">Payment Method</h5>
							<!--end::Title-->
							<!--begin::Details-->
							<div class="mb-0">
								{% if user.subscription %}
									<!--begin::Plan-->

									<span class="badge badge-light-info me-2">{{user.subscription.plan.plan_name}}</span>

									<!--end::Plan-->
									<!--begin::Price-->
									<span class="fw-semibold text-gray-600">$ {{user.subscription.plan.price}} / Month</span>
									<!--end::Price-->
								{% else %}
								<span class="fw-semibold text-gray-600"> You have no Plans yet</span>
								{% endif %}

							</div>
							<!--end::Details-->
						</div>
						<!--end::Section-->
						<!--begin::Seperator-->
						<div class="separator separator-dashed mb-7"></div>
						<!--end::Seperator-->
						<!--begin::Section-->
						<div class="mb-10">
							<!--begin::Title-->
							<h5 class="mb-3">Payment Details</h5>
							<!--end::Title-->
							{% if user.subscription.ends_time %}
							<!--begin::Details-->
							<div class="mb-0">
								<!--begin::Card info-->
								<div class="fw-semibold text-gray-600 d-flex align-items-center">
									<img src="{% static 'images/svg/payment-methods/paypal.svg' %}" class="w-35px me-2" alt="" />
									<span>{% if plan %} {{plan.paymentSource}} {% else %} {% endif %}</span>
								</div>
								<br>
								<!--end::Card info-->
								<!--begin::Card expiry-->
								<div class="fw-semibold text-gray-600"><b>Expired Date: </b><span>{{user.subscription.ends_time|date:"d b Y"}}</span></div>
								<!--end::Card expiry-->
							</div>
							<!--end::Details-->
							{% else %}
							<div class="mb-0">
								<!--begin::Card info-->
								<div class="fw-semibold text-gray-600 d-flex align-items-center">{% if plan.paymentSource %} {{plan.paymentSource}} {% else %} No Payment Source Detected {% endif %}
								<img src="{% static 'images/svg/payment-methods/none.svg' %}" class="w-35px ms-2" alt="" /></div>
								<!--end::Card info-->
							</div>
							<!--end::Details-->
							{% endif %}
						</div>
						<!--end::Section-->
					</div>
					<!--end::Card body-->
				</div>
				<!--end::Card-->
			</div>
			<!--end::Sidebar-->
		</div>
		<!--end::Layout-->
	</div>
	<!--end::Post-->
</div>
<!--end::Container-->
{% endblock content %}

{% block javascripts %} {% endblock javascripts %}