{% extends "web/base.html" %}
{% load static %}
{% load bangla_numbers %}




{% block title %}সাবস্ক্রিপশন কিনুন{% endblock title %}

{% block content %}
<div class="bg-white sm:px-8 px-4 py-10">
    <div class="max-w-screen-xl max-md:max-w-xl mx-auto ">

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-y-12 gap-x-8 lg:gap-x-12 ">
            <div class="lg:col-span-2">
                <form method="POST" action="{% url 'app:process_subscription' %}" dara-turbo="false">
                    {% csrf_token %}
                    <input type="hidden" name="subscription_id" value="{{ subscription.id }}">
                    <input type="hidden" name="subscription_type" value="{{ subscription_type }}">

                    <div>
                        <h2 class="text-xl md:text-2xl text-slate-900 font-extrabold mb-6">ডেলিভারি বিবরণ</h2>
                        <div class="grid lg:grid-cols-2 gap-y-6 gap-x-4">
                            <div>
                                <label class="text-sm text-slate-900 font-medium block mb-2">প্রথম নাম</label>
                                <input type="text" name="first_name" placeholder="প্রথম নাম লিখুন"
                                    class="px-4 py-2.5 bg-white border border-gray-400 text-slate-900 w-full text-sm rounded-md focus:outline-blue-600" required 
                                    value="{{ request.user.first_name|default:'' }}" />
                            </div>
                            <div>
                                <label class="text-sm text-slate-900 font-medium block mb-2">শেষ নাম</label>
                                <input type="text" name="last_name" placeholder="শেষ নাম লিখুন"
                                    class="px-4 py-2.5 bg-white border border-gray-400 text-slate-900 w-full text-sm rounded-md focus:outline-blue-600" required 
                                    value="{{ request.user.last_name|default:'' }}" />
                            </div>
                            <div>
                                <label class="text-sm text-slate-900 font-medium block mb-2">ইমেইল</label>
                                <input type="email" name="email" placeholder="ইমেইল লিখুন"
                                    class="px-4 py-2.5 bg-white border border-gray-400 text-slate-900 w-full text-sm rounded-md focus:outline-blue-600" required 
                                    value="{{ request.user.email|default:'' }}" />
                            </div>
                            <div>
                                <label class="text-sm text-slate-900 font-medium block mb-2">ফোন নম্বর</label>
                                <input type="text" name="phone" placeholder="ফোন নম্বর লিখুন"
                                    class="px-4 py-2.5 bg-white border border-gray-400 text-slate-900 w-full text-sm rounded-md focus:outline-blue-600" required 
                                    value="{{ request.user.phone_number|default:'' }}" />
                            </div>
                            <div>
                                <label class="text-sm text-slate-900 font-medium block mb-2">ঠিকানা</label>
                                <input type="text" name="address" placeholder="ঠিকানা লিখুন"
                                    class="px-4 py-2.5 bg-white border border-gray-400 text-slate-900 w-full text-sm rounded-md focus:outline-blue-600" required />
                            </div>
                            <div>
                                <label class="text-sm text-slate-900 font-medium block mb-2">শহর</label>
                                <input type="text" name="city" placeholder="শহরের নাম লিখুন"
                                    class="px-4 py-2.5 bg-white border border-gray-400 text-slate-900 w-full text-sm rounded-md focus:outline-blue-600" required />
                            </div>
                        </div>
                    </div>

                    <div class="mt-12">
                        <h2 class="text-xl text-slate-900 font-semibold mb-6">পেমেন্ট</h2>
                        <div class="grid gap-4 lg:grid-cols-2">
                            <div class="bg-gray-50 p-4 rounded-md border border-gray-300 max-w-sm">
                                <div class="flex items-center">
                                    <input type="radio" name="payment_method" value="card" class="w-5 h-5 cursor-pointer" id="card" checked />
                                    <label for="card" class="ml-4 flex gap-2 cursor-pointer">
                                        <img src="https://readymadeui.com/images/visa.webp" class="w-12" alt="card1" />
                                        <img src="https://readymadeui.com/images/american-express.webp" class="w-12" alt="card2" />
                                        <img src="https://readymadeui.com/images/master.webp" class="w-12" alt="card3" />
                                    </label>
                                </div>
                                <p class="mt-4 text-sm text-slate-500 font-medium">ডেবিট বা ক্রেডিট কার্ড দিয়ে পেমেন্ট করুন</p>
                            </div>
                            <div class="bg-gray-50 p-4 rounded-md border border-gray-300 max-w-sm">
                                <div class="flex items-center">
                                    <input type="radio" name="payment_method" value="paypal" class="w-5 h-5 cursor-pointer" id="paypal" />
                                    <label for="paypal" class="ml-4 flex gap-2 cursor-pointer">
                                        <img src="https://readymadeui.com/images/paypal.webp" class="w-20" alt="paypalCard" />
                                    </label>
                                </div>
                                <p class="mt-4 text-sm text-slate-500 font-medium">আপনার পেপাল অ্যাকাউন্ট দিয়ে পেমেন্ট করুন</p>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-4 mt-8">
                        <button type="submit" data-turbo="false" class="rounded-md px-4 py-2.5 w-full text-sm font-medium tracking-wide bg-[#12a66b] hover:bg-[#1b874d] duration-200 text-white cursor-pointer">পেমেন্ট সম্পন্ন করুন</button>
                    </div>
                </form>
            </div>

            <div class="relative">
                <div class=" xl:sticky top-26">
                    <h2 class="text-xl md:text-2xl text-slate-900 font-extrabold mb-6">অর্ডার সারাংশ</h2>
                    <div class="flex flex-col border border-gray-400 rounded-lg px-4 py-5 bg-white">
                        <h1 class="text-xl md:text-2xl font-bold text-green-700">{{ subscription.title }}</h1>
                        <p class="text-sm font-normal mt-2 md:mt-">{{ subscription.description }}</p>
                        
                        {% if subscription.keys %}
                        <div class="mt-4">
                            <h2 class="text-lg font-semibold text-gray-700">কি থাকছে:</h2>
                            <ul class="list-disc pl-5 mt-2">
                                {% for key in subscription.keys.all %}
                                    <li>{{ key.key }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}


                        {% if subscription.subjects %}
                            <div class="mt-4">
                                <h2 class="text-lg font-semibold text-gray-700">বিষয় সমূহ:</h2>
                                <ul class="list-disc pl-5 mt-2">
                                    {% for s in subscription.subjects.all %}
                                    <li>{{ s.name }}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        {% endif %}
                        
                        <div class="mt-4">
                            <p class="text-sm ">
                                {% if subscription_type == 'annual' %}
                                    এই সাবস্ক্রিপশনটি কেনার তারিখ থেকে ১ বছর পর্যন্ত বৈধ থাকবে।
                                {% else %}
                                    এই সাবস্ক্রিপশনটি <strong> {{ current_year|bangla_number }}সালের ৩১ ডিসেম্বর</strong> পর্যন্ত বৈধ থাকবে।
                                {% endif %}
                            </p>
                        </div>
                        
                        <div class="flex flex-row justify-between items-center mt-4">
                            <span class="text-red-600 text-2xl font-extrabold">{{ subscription.price|bangla_number }}৳ <span class="font-semibold">মাত্র</span></span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock content %}