{% 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 {{ user.subscription.plan.plan_duration|truncatechars:2 }} </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-->
											
											<!--begin::Actions-->
											<div class="d-flex align-items-center py-2 ">
											  <button class="btn btn-sm btn-light btn-active-color-danger me-3 " data-kt-subscription-action="cancel">
											  	<!-- <input type="hidden" id="csrf-token-div" data-csrf-token="{% csrf_token %}"/> -->
											  	
											    <!--begin::Indicator label-->
											    <span class="indicator-label">Cancel</span>
											    <!--end::Indicator label-->
											    <!--begin::Indicator progress-->
											    <span class="indicator-progress">Please wait...
											    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
											    <!--end::Indicator progress-->
											  </button>
											  
											</div>
											<!--end::Actions-->
										</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 %}

<script type="text/javascript">
	// get csrf token from cookies
	function getCookie(name) {
	    let cookieValue = null;
	    if (document.cookie && document.cookie !== '') {
	        const cookies = document.cookie.split(';');
	        for (let i = 0; i < cookies.length; i++) {
	            const cookie = cookies[i].trim();
	            // Does this cookie string begin with the name we want?
	            if (cookie.substring(0, name.length + 1) === (name + '=')) {
	                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
	                break;
	            }
	        }
	    }
	    return cookieValue;
	}

	// Select all the buttons with data-kt-subscription-action="cancel"
	let buttons = document.querySelectorAll('button[data-kt-subscription-action="cancel"]');
	// let csrfToken = document.getElementById('csrf-token-div').getAttribute('data-csrf-token');
	// Loop over the buttons and log them to the console
	buttons.forEach(function(button) {
	  // Check if the button is not null
	  if (button !== null) {
	    // Log the button to the console
	   	button.addEventListener("click", function(event){
	   		event.preventDefault();
	   		swal.fire({
				text:"Are you sure you would like to cancel your subscription ?",
				icon:"warning",
				buttonsStyling:!1,
				showDenyButton:!0,
				confirmButtonText:"Yes",
				denyButtonText:"No",
				customClass:{
					confirmButton:"btn btn-primary",
					denyButton:"btn btn-light-danger"
				}
			}).then((result)=>{
				console.log(result);
				// Check if the user confirmed the action
			    if (result.isConfirmed) {
			        // Send an AJAX request to the backend
			        // Get the CSRF token value from the server
					var host = window.location.origin;
					// Assuming you have included the CSRF token in your HTML using Django's template tag
					var csrf_token = "{{ csrf_token }}";

					// Set up jQuery to include the CSRF token in all AJAX requests
					$.ajaxSetup({
					    headers: { "X-CSRFToken": csrf_token }
					});

					// Make the DELETE request
					$.ajax({
					    url: host + "/subcription/cancel-subcription/",
					    type: 'DELETE',
					    dataType: 'json',
					    data: {
					        "action": "cancel_subscription",
					    },
					    success: function(response) {
					        // if (response['status'] == "failed"){
							// 	// Handle the case where the user denies the action
						    //     swal.fire('Ok', response['message'], 'warning');
					        // } 
					        // else{
					        // 	swal.fire('Ok', response['message'], 'success');
					        // }
							console.log(response);
					    },
					    error: function(error) {
					        console.log(error);
					    }
					});
			    } else if (result.isDenied) {
			        // Handle the case where the user denies the action
			        swal.fire('Cancelled', 'Your subscription cancellation was cancelled.', 'info');
			    }
						})
				   		
				   	});
				  }
	});
	

</script>
{% endblock javascripts %}