{% extends "mnfapp/base.html" %} {% load static %} {% block content %}

<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
   
    #h1 {
        color: black;
    }
    label {
        color: black;
    }
    
    .item1 {
        grid-area: LeftL;
    }
    
    .item2 {
        grid-area: LeftB;
    }
    
    .item3 {
        grid-area: LeftC;
    }
    
    .item4 {
        grid-area: rightR;
    }
    
    .main-container {
        display: grid;
        grid-template-areas: 'LeftL LeftL LeftL LeftL rightR rightR' 'LeftB LeftB LeftC LeftC rightR rightR';
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        grid-gap: 10px;
        padding: 10px;
        width: 90vw;
        margin: auto;
    }
    
    .item2,
    .item3 {
        background-color: #b2d8ff;
        width: 80%;
        margin-left: 10%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
        justify-content: space-between;
        flex-direction: column;
        display: flex;
        padding: 5px;
    }
    
    .item2 button,
    .item3 button,
    .item4 button {
        justify-content: flex-end;
    }
    
    .item4 {
        background-color: #FFE2E5;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
        justify-content: space-between;
        flex-direction: column;
        display: flex;
        padding: 5px;
    }
    
    .item2 b,
    .item2 b,
    .item4 b {
        padding: 1em;
        font-size: 1.2em;
    }
    
    .item2 button,
    .item3 button,
    .item4 button {
        padding: 0.4em 3em 0.4em 3em;
        margin: 0.1em;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border: 0;
        border-radius: 5px;
        color: white;
        background-color: rgb(62, 92, 190);
    }
    
    .item button:hover,
    .page-container3 button:hover {
        opacity: 0.7;
    }
    
    #h1 {
        text-align: center;
        margin-bottom: -2em;
    }
    
    #pageHead {
        animation: blink 1s linear infinite;
    }
    
    @keyframes blink {
        0% {
            opacity: 0;
        }
        50% {
            opacity: .5;
        }
        100% {
            opacity: 1;
        }
    }
    
    #boxD p {
        font-size: 1.3em;
    }
    
    .lifeform button {
        padding: 1em 2em 1em 2em;
        color: white;
        background-color: blue;
        border: solid blue 1px;
    }
</style>
<div class="container" style="text-align: center;">

{% if user.is_authenticated %} {%if dataP3 or dataP31%}


{% if messages %}
    {% for message in messages %}
    {% if message.tags == 'success' %}
    alert('{{message}}')
    {% endif %} 
    {% endfor %}
{% endif %}


<h6 style="text-align: right;"><button onclick="window.history.back()" style="width:2vw; height:2vw;padding: 3px; border-radius: 4px; color: white; background-color: red;">x</button></h6>

<h2 style="text-align: center; padding: 1em;">
    Hi {{user.first_name}}, You are  a privileged member and your membership is valid till <span id="validity"></span>


</h2>

{%elif dataP4%}

<h6 style="text-align: right;"><button onclick="window.history.back()" style="width:2vw; height:2vw;padding: 3px; border-radius: 4px; color: white; background-color: red;">x</button></h6>
<h2 style="text-align: center; padding: 1em;">
    Hi {{user.first_name}}, You are already a Life member and your membership is valid till <span id="validity2"></span>


</h2>
</div>
{%else%}
<h6 style="text-align: right;"><button onclick="window.history.back()" style="width:2vw; height:2vw;padding: 3px; border-radius: 4px; color: white; background-color: red;">x</button></h6>

<div style="margin-top: 2em;margin-bottom: 1cm;">
    <h2 id="h1">
        <i style="color: black; font-size: 1.3em;">
            <b>
                
            </b>
        </i>
    </h2><br>
    <button class="btn btn-primary" style="margin:1em;"><a href="/pay/verifygift" style="color: white;">Activate Your Gift Subscription</a></button>

    <br>

    <div class="main-container">
        <div class="item1">
            <h3 style="text-align: center;" id="pageHead"><i style="font-size: 1.13em;color: rgb(209, 6, 6);">Privileges Waiting for you !!</i></h3>
            <p style="margin: 0.6em;margin-left:2vw;font-size: 1.2em; width: 50vw;">
                ✓ Greater free use of MNF products and services, <br> ✓ Opportunity to refer MNF membership to friends and family and extend your free privileged membership duration, <br> ✓ Opportunity to gift MNF subscriptions to your friends and family
                at a discounted fee, <br> ✓ Opportunity to earn as MNF Language Pair Partner, <br> ✓ Build your profile at mynextfilm.com and attract attention of those who need you, <br> ✓ Free Membership of Harkat Clubs.
            </p>
            {% if user.is_staff %}
            <div style="margin: 0.5em; margin-left:5vw;">
                <b>MNF Employee discount of 50% added.</b>
            </div>
            {%endif%}

        </div>
        {% if user.is_staff %}
        <div class="item2">
            <div>
                <b style="color: rgb(40, 46, 126); font-size: 1.3em;"> <span style="font-size: 1.3em;">
                <del>₹100</del> ₹50</span>
            </b><br>
                <br><b>Monthly Subscription</b>
            </div>
            <form action="{% url 'payment' %}" method="post">
                {%csrf_token%}
                <input type="text" style="display: none;" name="plan" value='Monthly special' id="plan" required>
                <button type="submit" style="margin-top: -0.2em;">Buy Now</button>
            </form>
        </div>
        <div class="item3">
            <div style="height: 18vh;">

                <b style="color: rgb(40, 46, 126); font-size: 1.3em;"> <span style="font-size: 1.3em;">
                    <del>₹1000</del> ₹500</span>
                </b><br>

                <b>Yearly Subscription</b><br>
                <b><span style="font-size: 1.2em;color: #ee3c4d;"> 10% Additional Discount</span> <br> on all services </b>
            </div>
            <form action="{% url 'payment' %}" method="post">
                {%csrf_token%}
                <input type="text" style="display: none;" name="plan" value='yearly special' id="plan" required>
                <button type="submit" style="margin-top: -0.2em;">Buy Now</button>
            </form>

        </div>

        {%else%}
        <div class="item2">
            <div>
                <b style="color: rgb(40, 46, 126); font-size: 1.3em;"> <span style="font-size: 1.3em;">₹100</span></b><br>
                <br><b>Monthly Subscription</b>
            </div>
            <form action="{% url 'payment' %}" method="post">
                {%csrf_token%}
                <input type="text" style="display: none;" name="plan" value='Monthly plan' id="plan" required>
                <button type="submit" style="margin-top: -0.2em;">Buy Now</button>
            </form>
        </div>
        <div class="item3">
            <div style="height: 18vh;">
                <b style="color: rgb(40, 46, 126);font-size: 1.3em;"> <span style="font-size: 1.3em;">₹1000</span></b><br>
                <b>Yearly Subscription</b><br>
                <b><span style="font-size: 1.2em;color: #ee3c4d;"> 10% Additional Discount</span> <br> on all services </b>
            </div>
            <form action="{% url 'payment' %}" method="post">
                {%csrf_token%}
                <input type="text" style="display: none;" name="plan" value='yearly' id="plan" required>
                <button type="submit" style="margin-top: -0.3em;">Buy Now</button>
            </form>

        </div>
        {%endif%}
        <div class="item4">
            <div>
                <div style="display: grid; grid-template-columns: auto auto;">
                    <div style="width: 13vw; height: 6.5vw;background-color: yellow; border-radius: 50%; text-align: center; border:solid black 1px">
                        <h6 style="text-align: center; width: 10vw; margin:auto; margin-top: 1.7vw;">Only {{left}} left for {{thisMonth}}</h6>
                    </div>
                    <div style="width: 20vw; text-align: right;">
                        <h4 style="color: rgb(40, 46, 126);font-size: 1.3em;">Only ₹ 9500</h4>
                        <h3 id='pageHead' style="color: rgb(209, 6, 6);">Grab Life Membership</h3>
                        <h5 style="color: red;">20% Additional Discount</h5>
                        <h6>on all services(for 10 years)</h6>
                    </div>
                </div>
                <p style="text-align: left; font-size: 1.21em; padding-left: 2vw; padding-right:1.4vw ;">
                    ✓ Free trial of yet to be launched products and services, <br> ✓ Opportunity to earn as MNF Correspondent, <br> ✓ Get a committed Relationship Manager, <br> ✓ Be on the MNF Life members’ page, propose and set up a Harkat Club in your
                    locality, <br> ✓ Get priority notifications/ information for filmmaking related business proposals/assignments/opportunities. <br>

                </p>
                <br>
            </div>

            <form action="{% url 'payment' %}" method="post">
                {%csrf_token%}
                <input type="text" style="display: none;" name="plan" value='Life' id="plan" required>
                <button type="submit" style="margin-top: -0.3em;">Buy Now</button>
            </form>
        </div>
    </div>

    {%if response%}
    <div id="amt-cont" style="padding: 5px;background-color: white;position: absolute;width: 50vw; left: 25%; top: 40%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
        <h6 style="text-align: right;"><button onclick="$('#amt-cont').hide()" style="width:2vw; height:2vw;padding: 3px; border-radius: 4px; color: white; background-color: red;">x</button></h6>
        <div style="text-align: center;">
            <form action="{% url 'paymentSuccess'%}" method="POST" style="display: grid; grid-template-columns: auto auto auto;  padding: 1em;">
                {%csrf_token%}
                <span style="font-size: 1.3em; font-weight: bold; margin-right: 15%;margin-top: 6px;">Amount to be paid</span>
                <span style="font-size: 1.3em; font-weight: bold; margin-right: 15%;margin-top: 6px;" id="amount">₹{{amount}}</span>
                <input type="text" style="display: none;" name="plan" id="plan">
                <input type="text" name='amount' value='{{amount}}00' style="display: none;">
                <!-- <button class="btn btn-success" id = "rzp-button1">Buy Now</button> -->
                <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_live_51JT8ahSF9vzGWngg4N8fwhTPk5jq8fqBFdokqSMe7AVaOvH6BdyTwAfAoY79qkeJTFA0OdT5qkAk2FCNWCu6W9l000STNnHa7H" data-description='Subscribe {{desc}} Membership' data-image="{% static 'logo.jpg' %}"
                    data-label='Pay Now' data-amount="{{amount}}00" data-locale="auto" data-currency='INR' data-email='{{user.email}}'>
                </script>
            </form>
        </div>
    </div>

    {% endif %}

</div>
</div>


{%endif%}




<script>

    {% if messages %}
    {% for message in messages %}
    {% if message.tags == 'success' %}
       alert('{{message}}')
    {% endif %} 
    {% endfor %}
    {% endif %}


    function addgift() {
        document.getElementById('giftForm').style.display = 'block';
    }

    function month() {
        document.getElementById('amount').innerHTML = " ₹ 100"
            // document.getElementById('typeM').innerHTML="Monthly Plan"
            // document.getElementById('dateM').innerHTML=""
        document.getElementById('plan').value = "Monthly plan"
        document.getElementById('boxD').style.display = 'block';

    }

    function year() {
        document.getElementById('amount').innerHTML = " ₹ 1000"
        document.getElementById('plan').value = "yearly"
            // document.getElementById('typeM').innerHTML="Yearly Plan"
            // document.getElementById('dateM').innerHTML=""
        document.getElementById('boxD').style.display = 'block';
    }

    function Life() {
        document.getElementById('amount').innerHTML = " ₹ 9500"
        document.getElementById('plan').value = "Life"
            // document.getElementById('typeM').innerHTML="Yearly Plan"
            // document.getElementById('dateM').innerHTML=""
        document.getElementById('boxD').style.display = 'block';
    }

    function student() {
        document.getElementById('amount').innerHTML = "50"
        document.getElementById('plan').value = "student"
    }
</script>

<script>
    function add_months(dt, n) {

        return new Date(dt.setMonth(dt.getMonth() + n));
    }
    '{% if dataP3%}'
    dt = new Date('{{dataP3.dateSubscribed.year}}', '{{dataP3.dateSubscribed.month}}', '{{dataP3.dateSubscribed.day}}');
    // alert(add_months(dt, 10).toString())
    // console.log(add_months(dt, 12).toString());
    dateObj = add_months(dt, parseInt('{{dataP3.months}}'))
    var month = dateObj.getUTCMonth() + 1; //months from 1-12
    var day = dateObj.getUTCDate();
    var year = dateObj.getUTCFullYear();
    document.getElementById('validity').innerHTML = day + "-" + month + "-" + year
        // document.getElementById('validity').innerHTML = "add"
        '{%endif%}'
    '{% if dataP4%}'
    dt2 = new Date('{{dataP4.dateSubscribed.year}}', '{{dataP4.dateSubscribed.month}}', '{{dataP4.dateSubscribed.day}}');
    // alert(add_months(dt2, 120).toString())
    // console.log(add_months(dt, 12).toString());
    dateObj2 = add_months(dt2, 120)
    var month2 = dateObj2.getUTCMonth() + 1; //months from 1-12
    var day2 = dateObj2.getUTCDate();
    var year2 = dateObj2.getUTCFullYear();
    document.getElementById('validity2').innerHTML = day2 + "-" + month2 + "-" + year2 '{%endif%}'
</script>




{%endif%} {%endblock%}