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

{% load static %}

{% block stylesheet %}{% endblock %}

{% block title %} Subscription {% endblock title %}

{% block content %}
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Container-->
    <div class="container-xxl" id="kt_content_container">
        <!--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 header-->
                        <div class="card-header">
                            <!--begin::Card title-->
                            <div class="card-title">
                                <h2 class="fw-bold">Current Plan</h2>
                            </div>
                        </div>
                        <!--end::Card header-->
                        <!--begin::Card body-->
                        <div class="card-body pt-0">
                            <!--begin::Table wrapper-->
                            <div class="table-responsive">
                                <!--begin::Table-->
                                <table class="table align-middle table-row-dashed fs-6 fw-semibold gy-4" id="kt_subscription_products_table">
                                    <!--begin::Table head-->
                                    <thead>
                                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                            <th class="min-w-300px">Plan</th>
                                            <th class="min-w-150px">Price</th>
                                        </tr>
                                    </thead>
                                    <!--end::Table head-->
                                    <!--begin::Table body-->
                                    <tbody class="text-gray-600">
                                        <tr>
                                            {% if plan %}
                                                <td>{{plan.plan_name}}</td>
                                                <td>$ {{plan.price}}</td>
                                                <td class="text-end">
                                                    <!--begin::Delete-->

                                                    <!--end::Delete-->
                                                </td>
                                            {% else %}
                                            <td colspan="3  ">
                                                <!--begin::Body-->
                                                <div class="d-flex flex-column my-5">
                                                    <!--begin::Title-->
                                                    <h1 class="fw-bold text-muted  text-center fs-4">
                                                        You have no  <span class="fw-boldest">Plans</span> yet
                                                    </h1>
                                                </div>
                                                <!--end::Body-->
                                            </th>
                                            {% endif %}
                                        </tr>
                                    </tbody>
                                    <!--end::Table body-->
                                </table>
                                <!--end::Table-->
                            </div>
                            <!--end::Table wrapper-->
                        </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 plan %}
                                    <!--begin::Plan-->
                                    <span class="badge badge-light-info me-2">{{plan.plan_name}}</span>
                                    <!--end::Plan-->
                                    <!--begin::Price-->
                                    <span class="fw-semibold text-gray-600">$ {{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::Container-->
</div>
{% endblock content %}

{% block javascripts %}{% endblock %}