@extends('super_admin.layouts.master')

@section('title', 'Manage ' . $school->name)
@section('page_title', 'Subscription & Status Management')

@section('content')
<div class="max-w-3xl mx-auto">

    {{-- School Info Card --}}
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center mr-4 overflow-hidden">
                    @if($school->logo && \Illuminate\Support\Facades\Storage::disk('public')->exists($school->logo))
                        <img src="{{ asset('storage/' . $school->logo) }}" class="w-full h-full object-cover rounded-xl">
                    @else
                        <span class="text-blue-600 font-bold text-2xl">{{ substr($school->name, 0, 1) }}</span>
                    @endif
                </div>
                <div>
                    <h2 class="text-xl font-bold text-gray-800">{{ $school->name }}</h2>
                    <p class="text-sm text-gray-500">{{ $school->slug }}.schoolerp.com</p>
                </div>
            </div>
            
            {{-- Status & Plan Badges --}}
            <div class="text-right">
                <div class="flex flex-col items-end gap-2">
                    <span id="currentStatusBadge" class="px-3 py-1 rounded-full text-sm font-medium
                        {{ $school->status === 'active' ? 'bg-green-100 text-green-700' : 
                           ($school->status === 'suspended' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700') }}">
                        <i class="fas {{ $school->status === 'active' ? 'fa-check-circle' : 
                                          ($school->status === 'suspended' ? 'fa-ban' : 'fa-pause-circle') }} mr-1"></i>
                        {{ ucfirst($school->status) }}
                    </span>
                    
                    @php
                        $planColors = [
                            'basic' => 'bg-gray-100 text-gray-700',
                            'standard' => 'bg-blue-100 text-blue-700',
                            'premium' => 'bg-purple-100 text-purple-700'
                        ];
                        $planColor = $planColors[$school->plan] ?? 'bg-gray-100 text-gray-700';
                    @endphp
                    <span class="px-3 py-1 rounded-full text-sm font-medium {{ $planColor }}">
                        <i class="fas fa-crown mr-1"></i>{{ ucfirst($school->plan) }} Plan
                    </span>
                </div>
            </div>
        </div>

        {{-- Expiry Info Bar --}}
        <div class="mt-4 flex items-center justify-between p-3 {{ $school->subscription_end->isPast() ? 'bg-red-50 border border-red-200' : 'bg-blue-50 border border-blue-200' }} rounded-lg">
            <p class="text-sm {{ $school->subscription_end->isPast() ? 'text-red-700' : 'text-blue-700' }}">
                <i class="fas {{ $school->subscription_end->isPast() ? 'fa-exclamation-triangle' : 'fa-info-circle' }} mr-2"></i>
                @if($school->subscription_end->isPast())
                    Subscription expired <strong>{{ $school->subscription_end->diffForHumans() }}</strong>
                @else
                    Current expiry: <strong>{{ $school->subscription_end->format('M d, Y') }}</strong>
                    ({{ $school->daysUntilExpiry() }} days remaining)
                @endif
            </p>
        </div>
    </div>

    {{-- Status Management Section --}}
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">
            <i class="fas fa-power-off text-orange-600 mr-2"></i>Quick Status Change
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            @foreach(['active' => ['icon' => 'fa-check-circle', 'color' => 'green'], 
                     'inactive' => ['icon' => 'fa-pause-circle', 'color' => 'gray'], 
                     'suspended' => ['icon' => 'fa-ban', 'color' => 'red']] as $status => $config)
            <button type="button" onclick="changeStatus('{{ $status }}')"
                    class="p-4 border-2 {{ $school->status === $status ? 'border-'.$config['color'].'-600 bg-'.$config['color'].'-50' : 'border-gray-200 hover:border-'.$config['color'].'-300' }} rounded-xl transition-all text-center relative"
                    {{ $school->status === $status ? 'disabled' : '' }}>
                <i class="fas {{ $config['icon'] }} {{ $school->status === $status ? 'text-'.$config['color'].'-600' : 'text-gray-400' }} text-2xl mb-2"></i>
                <p class="font-bold {{ $school->status === $status ? 'text-'.$config['color'].'-800' : 'text-gray-800' }}">{{ ucfirst($status) }}</p>
                @if($school->status === $status)
                    <span class="absolute -top-2 -right-2 bg-{{ $config['color'] }}-500 text-white text-xs px-2 py-0.5 rounded-full">Current</span>
                @endif
            </button>
            @endforeach
        </div>
    </div>

    {{-- Plan Management Section --}}
    @if($school->status === 'active')
        
        {{-- Mode Toggle --}}
        <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">
                    <i class="fas fa-crown text-purple-600 mr-2"></i>Change Plan
                </h3>
                
                <div class="flex bg-gray-100 rounded-lg p-1">
                    <button type="button" id="modeExtend" onclick="setMode('extend')" 
                            class="px-3 py-1.5 rounded-md text-sm font-medium transition-all bg-white text-blue-600 shadow-sm">
                        <i class="fas fa-calendar-plus mr-1"></i>Extend
                    </button>
                    <button type="button" id="modePlanOnly" onclick="setMode('plan_only')" 
                        class="px-3 py-1.5 rounded-md text-sm font-medium transition-all text-gray-600 hover:text-gray-800">
                        <i class="fas fa-exchange-alt mr-1"></i>Plan Only
                    </button>
                </div>
            </div>
            
            <p id="modeDescription" class="text-sm text-gray-600 mb-4">
                Extend subscription with selected plan and duration.
            </p>
            
            @if($school->subscription_end->isPast())
                <div class="p-3 bg-yellow-50 border border-yellow-200 rounded-lg mb-4">
                    <p class="text-sm text-yellow-700">
                        <i class="fas fa-info-circle mr-1"></i>
                        Plan has expired. You can only <strong>Extend</strong>. "Plan Only" option is disabled.
                    </p>
                </div>
            @endif

            {{-- Plan Selection --}}
            @if($planPricings && $planPricings->count() > 0)
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="planSelectionGrid">
                @foreach($planPricings as $planPricing)
                    @php
                        $isCurrent = $school->plan === $planPricing->plan_key;
                        
                        // Define complete class maps for each plan
                        $planClasses = [
                            'basic' => [
                                'icon' => 'fa-seedling',
                                'bg' => 'gray',
                                'border' => 'peer-checked:border-gray-600 peer-checked:bg-gray-50 hover:border-gray-300',
                                'iconColor' => 'text-gray-600',
                                'bgColor' => 'bg-gray-100',
                                'priceColor' => 'text-gray-600',
                                'currentBg' => 'bg-gray-200',
                                'currentText' => 'text-gray-800'
                            ],
                            'standard' => [
                                'icon' => 'fa-rocket',
                                'bg' => 'blue',
                                'border' => 'peer-checked:border-blue-600 peer-checked:bg-blue-50 hover:border-blue-300',
                                'iconColor' => 'text-blue-600',
                                'bgColor' => 'bg-blue-100',
                                'priceColor' => 'text-blue-600',
                                'currentBg' => 'bg-blue-200',
                                'currentText' => 'text-blue-800'
                            ],
                            'premium' => [
                                'icon' => 'fa-crown',
                                'bg' => 'purple',
                                'border' => 'peer-checked:border-purple-600 peer-checked:bg-purple-50 hover:border-purple-300',
                                'iconColor' => 'text-purple-600',
                                'bgColor' => 'bg-purple-100',
                                'priceColor' => 'text-purple-600',
                                'currentBg' => 'bg-purple-200',
                                'currentText' => 'text-purple-800'
                            ]
                        ][$planPricing->plan_key] ?? $planClasses['standard'];
                    @endphp
                    
                    <label class="relative cursor-pointer plan-option" data-plan-key="{{ $planPricing->plan_key }}">
                        <input type="radio" name="plan" value="{{ $planPricing->plan_key }}" 
                            class="peer sr-only"
                            data-monthly-price="{{ $planPricing->monthly_price }}"
                            data-current="{{ $isCurrent ? '1' : '0' }}"
                            {{ $isCurrent ? 'checked' : '' }}
                            onchange="handlePlanChange(this)">
                        
                        <div class="p-4 border-2 border-gray-200 rounded-xl {{ $planClasses['border'] }} transition-all h-full text-center">
                            <div class="w-12 h-12 mx-auto mb-2 rounded-full {{ $planClasses['bgColor'] }} flex items-center justify-center">
                                <i class="fas {{ $planClasses['icon'] }} text-lg {{ $planClasses['iconColor'] }}"></i>
                            </div>
                            <p class="font-bold text-gray-800">{{ $planPricing->plan_name }}</p>
                            <p class="text-lg font-bold {{ $planClasses['priceColor'] }} mt-1">₹{{ number_format($planPricing->monthly_price) }}<span class="text-xs text-gray-500">/mo</span></p>
                            
                            @if($isCurrent)
                                <span class="inline-block mt-2 px-2 py-0.5 {{ $planClasses['currentBg'] }} {{ $planClasses['currentText'] }} text-xs rounded-full font-medium">Current</span>
                            @endif
                        </div>
                    </label>
                @endforeach
                </div>
            @endif
        </div>

        {{-- EXTEND MODE FORM --}}
        <form method="POST" action="{{ route('super_admin.schools.renew.process', $school) }}" id="renewForm">
            @csrf
            
            <input type="hidden" name="plan" id="extendFormPlan" value="{{ $school->plan }}">

            {{-- Duration Selection --}}
            <div id="durationSection" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">
                    <i class="fas fa-calendar-alt text-blue-600 mr-2"></i>Select Duration <span class="text-red-500">*</span>
                </h3>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    @foreach([1 => ['label' => '1 Month', 'badge' => ''], 
                             3 => ['label' => '3 Months', 'badge' => '5% off'], 
                             6 => ['label' => '6 Months', 'badge' => '10% off'], 
                             12 => ['label' => '1 Year', 'badge' => '15% off']] as $months => $info)
                    <label class="cursor-pointer">
                        <input type="radio" name="duration" value="{{ $months }}" 
                               class="peer sr-only"
                               data-discount="{{ [1=>0,3=>5,6=>10,12=>15][$months] }}"
                               {{ $months == 1 ? 'checked' : '' }}
                               onchange="calculateRenewal()">
                        <div class="p-4 border-2 border-gray-200 rounded-xl peer-checked:border-blue-600 peer-checked:bg-blue-50 transition-all relative text-center">
                            <p class="font-bold text-gray-800">{{ $info['label'] }}</p>
                            @if($info['badge'])
                                <span class="absolute -top-2 -right-2 bg-green-500 text-white text-xs px-2 py-0.5 rounded-full font-medium">{{ $info['badge'] }}</span>
                            @endif
                        </div>
                    </label>
                    @endforeach
                </div>
            </div>

            {{-- Extension Summary --}}
            <div id="paymentSummary" class="bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-xl p-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">
                    <i class="fas fa-calculator text-blue-600 mr-2"></i>Extension Summary
                </h3>
                
                <div class="space-y-3">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Plan Price:</span>
                        <span class="font-medium">₹<span id="summaryPlanPrice">0</span>/month</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Duration:</span>
                        <span class="font-medium"><span id="summaryDuration">0</span> months</span>
                    </div>
                    <div class="flex justify-between text-sm text-green-600">
                        <span>Discount:</span>
                        <span class="font-medium">-₹<span id="summaryDiscount">0</span></span>
                    </div>
                    <div class="border-t border-gray-300 pt-3">
                        <div class="flex justify-between items-center">
                            <span class="text-lg font-bold text-gray-800">Total Amount:</span>
                            <span class="text-2xl font-bold text-blue-700">₹<span id="summaryTotal">0</span></span>
                        </div>
                    </div>
                    <!--<div class="bg-white rounded-lg p-3 mt-3">
                        <p class="text-xs text-gray-500">
                            <i class="fas fa-calendar-check mr-1 text-blue-500"></i>
                            Start from: <strong id="summaryStartDate" class="text-gray-800">-</strong>
                            → New expiry: <strong id="summaryNewExpiry" class="text-gray-800">-</strong>
                        </p>
                    </div> -->
                </div>
                
                <input type="hidden" name="calculated_amount" id="calculatedAmount" value="0">
            </div>

            <div class="flex gap-4" id="extendButtons">
                <a href="{{ route('super_admin.schools.show', $school) }}"
                   class="flex-1 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 font-medium text-center">Cancel</a>
                <button type="submit" class="flex-1 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 font-medium shadow-lg">
                    <i class="fas fa-sync-alt mr-2"></i>Extend Subscription
                </button>
            </div>
        </form>

        {{-- PLAN ONLY FORM (Plan Change with Proration) --}}
        <form method="POST" action="{{ route('super_admin.schools.change-plan', $school) }}" id="planOnlyForm" class="hidden">
            @csrf
            @method('PATCH')
            
            <input type="hidden" name="new_plan" id="planOnlyNewPlan" value="{{ $school->plan }}">
            
            {{-- 🆕 START DATE FOR PLAN CHANGE --}}
            <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">
                    <i class="fas fa-calendar text-orange-600 mr-2"></i>Plan Change Date <span class="text-red-500">*</span>
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Effective Date</label>
                        <input type="date" name="plan_change_date" id="planChangeDate"
                               value="{{ now()->format('Y-m-d') }}"
                               min="{{ $school->subscription_start->format('Y-m-d') }}"
                               max="{{ $school->subscription_end->format('Y-m-d') }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                               onchange="calculateProration()"
                               required>
                        <p class="text-xs text-gray-500 mt-1">Date when new plan becomes effective</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Current Period</label>
                        <div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
                            <p class="text-sm text-gray-600">
                                <i class="fas fa-calendar-alt mr-1"></i>
                                {{ $school->subscription_start->format('M d, Y') }} → {{ $school->subscription_end->format('M d, Y') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Proration Calculation Summary --}}
            <div class="bg-gradient-to-r from-orange-50 to-yellow-50 border border-orange-200 rounded-xl p-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">
                    <i class="fas fa-calculator text-orange-600 mr-2"></i>Prorated Calculation
                </h3>
                
                <div class="space-y-3 text-sm">
                    {{-- Old Plan Usage --}}
                    <div class="flex justify-between">
                        <span class="text-gray-600">Old Plan ({{ ucfirst($school->plan) }}):</span>
                        <span class="font-medium">₹<span id="proratedOldPlanPrice">{{ number_format($currentPlanPrice) }}</span>/mo</span>
                    </div>
                    <div class="flex justify-between text-xs text-gray-500 pl-4">
                        <span>Used <span id="proratedUsedDays">0</span> days @ ₹<span id="proratedOldDaily">0</span>/day</span>
                        <span class="font-medium">₹<span id="proratedOldAmount">0</span></span>
                    </div>
                    
                    {{-- New Plan Usage --}}
                    <div class="flex justify-between">
                        <span class="text-gray-600">New Plan:</span>
                        <span class="font-medium">₹<span id="proratedNewPlanPrice">0</span>/mo</span>
                    </div>
                    <div class="flex justify-between text-xs text-gray-500 pl-4">
                        <span>Remaining <span id="proratedRemainingDays">0</span> days @ ₹<span id="proratedNewDaily">0</span>/day</span>
                        <span class="font-medium">₹<span id="proratedNewAmount">0</span></span>
                    </div>
                    
                    <div class="border-t border-gray-300 my-2"></div>
                    
                    <div class="flex justify-between">
                        <span class="text-gray-600">Subtotal:</span>
                        <span class="font-medium">₹<span id="proratedSubtotal">0</span></span>
                    </div>
                    
                    <div class="flex justify-between text-red-600">
                        <span>Already Paid:</span>
                        <span class="font-medium">-₹<span id="proratedAlreadyPaid">{{ number_format($lastPaymentAmount ?? 0) }}</span></span>
                    </div>
                    
                    <div class="border-t-2 border-orange-300 pt-3 mt-3">
                        <div class="flex justify-between items-center">
                            <span class="text-lg font-bold text-gray-800" id="proratedLabel">Amount to Pay:</span>
                            <span class="text-2xl font-bold text-orange-700">₹<span id="proratedTotal">0</span></span>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg p-3 mt-3">
                        <p class="text-xs text-gray-500">
                            <i class="fas fa-info-circle mr-1 text-orange-500"></i>
                            New expiry remains: <strong class="text-gray-800">{{ $school->subscription_end->format('M d, Y') }}</strong>
                        </p>
                    </div>
                </div>
                
                <input type="hidden" name="prorated_amount" id="proratedAmountInput" value="0">
                <input type="hidden" name="old_plan_days" id="oldPlanDaysInput" value="0">
                <input type="hidden" name="new_plan_days" id="newPlanDaysInput" value="0">
            </div>

            <div class="flex gap-4">
                <a href="{{ route('super_admin.schools.show', $school) }}"
                   class="flex-1 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 font-medium text-center">Cancel</a>
                <button type="submit" class="flex-1 py-3 bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-xl hover:from-orange-600 hover:to-orange-700 font-medium shadow-lg">
                    <i class="fas fa-exchange-alt mr-2"></i>Change Plan
                </button>
            </div>
        </form>
        
    @else
        <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-6 mb-6">
            <div class="flex items-center">
                <i class="fas fa-lock text-yellow-600 text-3xl mr-4"></i>
                <div>
                    <h3 class="font-bold text-yellow-800">Plan Modifications Locked</h3>
                    <p class="text-sm text-yellow-700">School is <strong>{{ ucfirst($school->status) }}</strong>. Activate to modify plan.</p>
                </div>
            </div>
        </div>
    @endif

</div>

{{-- Status Change Form --}}
<form id="statusForm" method="POST" action="{{ route('super_admin.schools.quick-status', $school) }}" class="hidden">
    @csrf
    @method('PATCH')
    <input type="hidden" name="status" id="statusInput" value="">
</form>

{{-- Status Modal --}}
<div id="statusModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-gray-900 bg-opacity-60 backdrop-blur-sm" onclick="closeStatusModal()"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative transform overflow-hidden rounded-2xl bg-white shadow-2xl sm:w-full sm:max-w-md">
            <div id="modalHeader" class="bg-gradient-to-r from-blue-600 to-blue-700 px-6 py-4">
                <h3 class="text-lg font-bold text-white" id="modalTitle">Confirm</h3>
            </div>
            <div class="px-6 py-6">
                <p id="modalMessage" class="text-sm text-gray-700 mb-4">Are you sure?</p>
                <div class="flex gap-3 justify-end">
                    <button onclick="closeStatusModal()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</button>
                    <button onclick="confirmStatusChange()" id="modalConfirmBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Confirm</button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    // PHP Data passed to JS
    const schoolData = {
        currentPlan: '{{ $school->plan }}',
        currentStatus: '{{ $school->status }}',  // ADD THIS LINE
        currentPlanPrice: {{ $currentPlanPrice ?? 0 }},
        subscriptionStart: '{{ $school->subscription_start->format('Y-m-d') }}',
        subscriptionEnd: '{{ $school->subscription_end->format('Y-m-d') }}',
        lastPaymentAmount: {{ $lastPaymentAmount ?? 0 }},
        isExpired: {{ $school->subscription_end->isPast() ? 'true' : 'false' }}
    };

    let currentMode = 'extend';
    let selectedPlanPrice = 0;
    let selectedPlanKey = '';

    // Mode Toggle
    function setMode(mode) {
        // ✅ Safe expired check in JS
        if (mode === 'plan_only' && schoolData.isExpired) {
            alert('Subscription has expired. Please use Extend first.');
            return;
        }
        currentMode = mode;
        const btnExtend = document.getElementById('modeExtend');
        const btnPlanOnly = document.getElementById('modePlanOnly');
        const renewForm = document.getElementById('renewForm');
        const planOnlyForm = document.getElementById('planOnlyForm');
        
        if (mode === 'extend') {
            btnExtend.className = 'px-3 py-1.5 rounded-md text-sm font-medium transition-all bg-white text-blue-600 shadow-sm';
            btnPlanOnly.className = 'px-3 py-1.5 rounded-md text-sm font-medium transition-all text-gray-600 hover:text-gray-800';
            renewForm.classList.remove('hidden');
            planOnlyForm.classList.add('hidden');
            calculateRenewal();
        } else {
            btnPlanOnly.className = 'px-3 py-1.5 rounded-md text-sm font-medium transition-all bg-white text-orange-600 shadow-sm';
            btnExtend.className = 'px-3 py-1.5 rounded-md text-sm font-medium transition-all text-gray-600 hover:text-gray-800';
            renewForm.classList.add('hidden');
            planOnlyForm.classList.remove('hidden');
            calculateProration();
        }
    }

    // Handle Plan Selection
    function handlePlanChange(radio) {
        selectedPlanKey = radio.value;
        selectedPlanPrice = parseFloat(radio.dataset.monthlyPrice) || 0;
        
        document.getElementById('extendFormPlan').value = radio.value;
        document.getElementById('planOnlyNewPlan').value = radio.value;
        
        if (currentMode === 'extend') {
            calculateRenewal();
        } else {
            calculateProration();
        }
    }

   function calculateRenewal() {
    const planRadio = document.querySelector('input[name="plan"]:checked');
    const durationRadio = document.querySelector('input[name="duration"]:checked');
    
    if (!planRadio || !durationRadio) {
        resetExtensionSummary();
        return;
    }
    
    const monthlyPrice = parseFloat(planRadio.dataset.monthlyPrice) || 0;
    const duration = parseInt(durationRadio.value) || 1;
    const discountPercent = parseInt(durationRadio.dataset.discount) || 0;
    
    const subtotal = monthlyPrice * duration;
    const discountAmount = Math.round((subtotal * discountPercent) / 100);
    const totalAmount = subtotal - discountAmount;
    
    // ✅ FIXED BLOCK (NO DUPLICATION)
    const today = new Date();
    const currentExpiry = new Date(schoolData.subscriptionEnd);

    // Start = next day after expiry
    const startFrom = new Date(currentExpiry);
    startFrom.setDate(startFrom.getDate() + 1);

    // If expired, start from today+1
    if (currentExpiry < today) {
        startFrom.setTime(today.getTime());
        startFrom.setDate(startFrom.getDate() + 1);
    }

    // End = startFrom + months - 1 day
    const newExpiry = new Date(startFrom);
    newExpiry.setMonth(newExpiry.getMonth() + duration);
    newExpiry.setDate(newExpiry.getDate() - 1);
    
    document.getElementById('summaryPlanPrice').textContent = monthlyPrice.toLocaleString('en-IN');
    document.getElementById('summaryDuration').textContent = duration;
    document.getElementById('summaryDiscount').textContent = discountAmount.toLocaleString('en-IN');
    document.getElementById('summaryTotal').textContent = totalAmount.toLocaleString('en-IN');
    document.getElementById('summaryStartDate').textContent = startFrom.toLocaleDateString('en-IN');
    document.getElementById('summaryNewExpiry').textContent = newExpiry.toLocaleDateString('en-IN');
    document.getElementById('calculatedAmount').value = totalAmount;
}

    // 🆕 Calculate Proration (Plan Change with Exact Daily Rates)
    function calculateProration() {
        const planRadio = document.querySelector('input[name="plan"]:checked');
        const changeDateInput = document.getElementById('planChangeDate').value;
        
        if (!planRadio || !changeDateInput) {
            resetProrationSummary();
            return;
        }
        
        const newPlanPrice = parseFloat(planRadio.dataset.monthlyPrice) || 0;
        const oldPlanPrice = schoolData.currentPlanPrice;
        const changeDate = new Date(changeDateInput);
        const periodStart = new Date(schoolData.subscriptionStart);
        const periodEnd = new Date(schoolData.subscriptionEnd);
        
        // 🆕 GET ACTUAL DAYS IN CHANGE DATE MONTH
        const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
        const daysInMonth = getDaysInMonth(changeDate.getFullYear(), changeDate.getMonth());
        
        // 🆕 Calculate exact used days (from period start to day before change date)
        let usedDays = 0;
        let tempDate = new Date(periodStart);
        while (tempDate < changeDate) {
            usedDays++;
            tempDate.setDate(tempDate.getDate() + 1);
        }
        
        // 🆕 Calculate exact remaining days (from change date to period end, inclusive)
        let remainingDays = 0;
        tempDate = new Date(changeDate);
        while (tempDate <= periodEnd) {
            remainingDays++;
            tempDate.setDate(tempDate.getDate() + 1);
        }
        
        // 🆕 EXACT DAILY RATES with 3 decimal precision
        const oldDaily = oldPlanPrice / daysInMonth;
        const newDaily = newPlanPrice / daysInMonth;
        
        // 🆕 EXACT AMOUNTS (no rounding until final)
        const oldAmount = Math.round(oldDaily * usedDays);
        const newAmount = Math.round(newDaily * remainingDays);
        const subtotal = oldAmount + newAmount;
        const alreadyPaid = schoolData.lastPaymentAmount;
        
        // 🆕 DOWNGRADE LOGIC: Can be negative (refund)
        const totalToPay = subtotal - alreadyPaid; // Removed max(0, ...)
        
        // Update Display with 3 decimals for daily rate
        document.getElementById('proratedOldPlanPrice').textContent = oldPlanPrice.toLocaleString('en-IN');
        document.getElementById('proratedUsedDays').textContent = usedDays;
        document.getElementById('proratedOldDaily').textContent = oldDaily.toFixed(3);
        document.getElementById('proratedOldAmount').textContent = oldAmount.toLocaleString('en-IN');
        
        document.getElementById('proratedNewPlanPrice').textContent = newPlanPrice.toLocaleString('en-IN');
        document.getElementById('proratedRemainingDays').textContent = remainingDays;
        document.getElementById('proratedNewDaily').textContent = newDaily.toFixed(3);
        document.getElementById('proratedNewAmount').textContent = newAmount.toLocaleString('en-IN');
        
        document.getElementById('proratedSubtotal').textContent = subtotal.toLocaleString('en-IN');
        document.getElementById('proratedAlreadyPaid').textContent = alreadyPaid.toLocaleString('en-IN');
        
        // 🆕 Show negative for refund (downgrade)
        const totalElement = document.getElementById('proratedTotal');
        totalElement.textContent = Math.abs(totalToPay).toLocaleString('en-IN');
        // ✅ Use classList instead of className= (preserves other classes)
        totalElement.classList.remove('text-orange-700', 'text-green-700');
        totalElement.classList.add(totalToPay >= 0 ? 'text-orange-700' : 'text-green-700');

        // ✅ Use ID instead of fragile querySelector
        const totalLabel = totalToPay >= 0 ? 'Amount to Pay:' : 'Refund Amount:';
        const labelEl = document.getElementById('proratedLabel');
        if (labelEl) labelEl.textContent = totalLabel;
        
        // Hidden inputs
        document.getElementById('proratedAmountInput').value = totalToPay;
        document.getElementById('oldPlanDaysInput').value = usedDays;
        document.getElementById('newPlanDaysInput').value = remainingDays;
        
        // Store days in month
        if (!document.getElementById('daysInMonthInput')) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.id = 'daysInMonthInput';
            input.name = 'days_in_month';
            document.getElementById('planOnlyForm').appendChild(input);
        }
        document.getElementById('daysInMonthInput').value = daysInMonth;
    }

    function resetExtensionSummary() {
        document.getElementById('summaryPlanPrice').textContent = '0';
        document.getElementById('summaryDuration').textContent = '0';
        document.getElementById('summaryDiscount').textContent = '0';
        document.getElementById('summaryTotal').textContent = '0';
        document.getElementById('summaryStartDate').textContent = '-';
        document.getElementById('summaryNewExpiry').textContent = '-';
        document.getElementById('calculatedAmount').value = '0';
    }

    function resetProrationSummary() {
        document.getElementById('proratedOldAmount').textContent = '0';
        document.getElementById('proratedNewAmount').textContent = '0';
        document.getElementById('proratedSubtotal').textContent = '0';
        document.getElementById('proratedTotal').textContent = '0';
    }

    // Status Change with Modal Confirmation
        let pendingStatus = null;

        function changeStatus(status) {
            if (status === schoolData.currentStatus) return;
            
            pendingStatus = status;
            const modal = document.getElementById('statusModal');
            const modalHeader = document.getElementById('modalHeader');
            const modalTitle = document.getElementById('modalTitle');
            const modalMessage = document.getElementById('modalMessage');
            const confirmBtn = document.getElementById('modalConfirmBtn');
            
            // Configure modal based on status
            const config = {
                'active': {
                    title: 'Activate School',
                    message: 'Are you sure you want to <strong>ACTIVATE</strong> this school? The school will be able to access all features based on their plan.',
                    headerClass: 'bg-gradient-to-r from-green-600 to-green-700',
                    btnClass: 'bg-green-600 hover:bg-green-700',
                    icon: 'fa-check-circle'
                },
                'inactive': {
                    title: 'Deactivate School',
                    message: 'Are you sure you want to <strong>DEACTIVATE</strong> this school? The school will lose access until reactivated.',
                    headerClass: 'bg-gradient-to-r from-gray-600 to-gray-700',
                    btnClass: 'bg-gray-600 hover:bg-gray-700',
                    icon: 'fa-pause-circle'
                },
                'suspended': {
                    title: 'Suspend School',
                    message: 'Are you sure you want to <strong>SUSPEND</strong> this school? This will immediately block all access. This action is usually for policy violations.',
                    headerClass: 'bg-gradient-to-r from-red-600 to-red-700',
                    btnClass: 'bg-red-600 hover:bg-red-700',
                    icon: 'fa-ban'
                }
            };
            
            const selected = config[status];
            
            // Update modal content
            modalTitle.innerHTML = `<i class="fas ${selected.icon} mr-2"></i>${selected.title}`;
            modalMessage.innerHTML = selected.message;
            
            // Update styling
            modalHeader.className = `${selected.headerClass} px-6 py-4`;
            confirmBtn.className = `px-4 py-2 text-white rounded-lg ${selected.btnClass}`;
            
            // Show modal
            modal.classList.remove('hidden');
        }

        function closeStatusModal() {
            document.getElementById('statusModal').classList.add('hidden');
            pendingStatus = null;
        }

        function confirmStatusChange() {
            if (pendingStatus) {
                document.getElementById('statusInput').value = pendingStatus;
                document.getElementById('statusForm').submit();
            }
        }

        // Close modal on Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeStatusModal();
            }
        });

    // Initialize
    document.addEventListener('DOMContentLoaded', function() {
        const checkedPlan = document.querySelector('input[name="plan"]:checked');
        if (checkedPlan) {
            selectedPlanPrice = parseFloat(checkedPlan.dataset.monthlyPrice) || 0;
            selectedPlanKey = checkedPlan.value;
            calculateRenewal();
        }
    });
</script>
@endpush