{% extends '_base.html' %}
{% block title  %}خرید اشتراک  {% endblock title %}

{% block content %}

<style>
    .active {

        border-color: rgba(1, 255, 1, 0.616) !important;
    }
</style>

<h1 class="text-4xl font-bold text-amber-400 mb-6 text-center">
    خرید اشتراک
</h1>


{% if messages %}
                <div class="mb-4 w-full max-w-sm">
                    {% for message in messages %}
                    <div class="p-3 rounded-lg text-sm font-medium
                        {% if message.tags == 'error' %}
                            bg-red-600 text-white
                        {% elif message.tags == 'success' %}
                            bg-green-600 text-white
                        {% else %}
                            bg-gray-700 text-white
                        {% endif %}
                        mb-2">
                        {{ message }}
                    </div>
                    {% endfor %}
                </div>
                {% endif %}



{% if request.user.get_active_plan %}

                 <p>
                    شما اشتراک فعال {{request.user.get_active_plan.subscription_plan.name}} تا تاریخ {{request.user.get_active_plan.expire_date}} دارید.
                 </p>             


  {% else %}

                            
<p class="text-gray-400 mb-8 text-center">
    یکی از پلن‌های زیر را انتخاب کنید و اشتراک خود را فعال کنید.
</p>
<form method="post" action="{% url 'dash:plans' %}" class="max-w-xl mx-auto">
    {% csrf_token %}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
         <input type="text" name="plan" id="plan_id" value="0" class="peer hidden">
        {% for plan in plans %}
        <label class="border-2 border-gray-700 rounded-xl p-6 bg-gray-900 group-hover:border-amber-400 peer-checked:border-amber-500 transition-all shadow-lg flex flex-col gap-2 block cursor-pointer group mt-4" id="plan-{{ plan.id }}" onclick="selectedPlan({{ plan.id }})">
           
            <div >
                <div class="flex items-center justify-between mb-2">
                    <span class="text-lg font-bold text-amber-400">{{ plan.name }}</span>
                    <span class="bg-amber-500 text-gray-900 font-bold px-3 py-1 rounded-full text-sm">{{ plan.price }} تومان</span>
                </div>
                <div class="text-gray-300 text-sm mb-1">
                    <span class="font-semibold">تعداد استفاده مجاز:</span>
                    {{ plan.usage_limit }} بار
                </div>
                <div class="text-gray-300 text-sm mb-1">
                    <span class="font-semibold">مدت اعتبار:</span>
                    {{ plan.duration_days }} روز
                </div>
                {% if plan.description %}
                <div class="text-gray-400 text-xs mt-2">{{ plan.description }}</div>
                {% endif %}
            </div>
        </label>
        {% endfor %}
    </div>
    <button type="submit" class="w-full bg-green-600 text-white font-bold py-3 px-8 rounded-lg shadow-lg hover:bg-green-700 transition-all duration-200 transform hover:scale-105">
        خرید و فعال‌سازی اشتراک
    </button>
</form>




                          
                            {%endif %}

{% endblock %}


{% block script %}

<script>
    function selectedPlan(planId) {
        console.log(planId);
        const plans = document.querySelectorAll('label[id^="plan-"]');
        plans.forEach(plan => {
            plan.classList.remove('active');


        });
        const selectedPlan = document.getElementById(`plan-${planId}`);
        selectedPlan.classList.add('active');
        document.getElementById('plan_id').value = planId;
    }
</script>


{% endblock script %}