@extends('super_admin.layouts.master')

    @section('title', 'Reports & Billing')
    @section('page_title', 'Financial Reports & Invoicing')

    @section('content')

    <!-- Filters Card -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <form method="GET" action="{{ route('super_admin.reports.index') }}" id="filterForm" class="grid grid-cols-1 md:grid-cols-5 gap-4">
            
            <!-- Status Filter -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">School Status</label>
                <select name="status" id="statusFilter" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" onchange="this.form.submit()">
                    <option value="all" {{ request('status') == 'all' ? 'selected' : '' }}>All Status</option>
                    <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    <option value="suspended" {{ request('status') == 'suspended' ? 'selected' : '' }}>Suspended</option>
                </select>
            </div>

            <!-- School Name Filter -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">School Name</label>
                <select name="school_id" id="schoolFilter" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" onchange="this.form.submit()">
                    <option value="">All Schools</option>
                    @foreach($schools as $school)
                        <option value="{{ $school->id }}" {{ request('school_id') == $school->id ? 'selected' : '' }}>
                            {{ $school->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Date From -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">From Date</label>
                <input type="date" name="from_date" value="{{ request('from_date', now()->subMonth()->format('Y-m-d')) }}" 
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- Date To -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">To Date</label>
                <input type="date" name="to_date" value="{{ request('to_date', now()->format('Y-m-d')) }}" 
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- Actions -->
            <div class="flex items-end gap-2">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                    <i class="fas fa-filter mr-2"></i>Filter
                </button>
                <a href="{{ route('super_admin.reports.index') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
                    <i class="fas fa-undo"></i>
                </a>
            </div>
        </form>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <!-- Schools Count -->
        <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl p-4 text-white shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-orange-100 text-sm font-medium">Total Schools</p>
                    <p class="text-3xl font-bold">{{ $schools->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                    <i class="fas fa-school text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Total Revenue -->
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-4 text-white shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-100 text-sm font-medium">Total Revenue</p>
                    <p class="text-3xl font-bold">₹{{ number_format($summary['total_revenue'] ?? 0) }}</p>
                </div>
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                    <p  class="text-3xl font-bold">₹</p>
                </div>
            </div>
        </div>

        <!-- Total GST -->
        <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-4 text-white shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-100 text-sm font-medium">Total GST Collected</p>
                    <p class="text-3xl font-bold">₹{{ number_format($summary['total_gst'] ?? 0) }}</p>
                </div>
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                    <i class="fas fa-receipt text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Transactions -->
        <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-4 text-white shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-purple-100 text-sm font-medium">Total Invoices</p>
                    <p class="text-3xl font-bold">{{ $summary['total_transactions'] ?? 0 }}</p>
                </div>
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                    <i class="fas fa-file-invoice text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Selected School Info Card (if filtered) -->
    @if(request('school_id') && $selectedSchool)
    <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl p-6 mb-6 text-white">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-16 h-16 bg-white bg-opacity-20 rounded-xl flex items-center justify-center text-3xl font-bold mr-4">
                    {{ substr($selectedSchool->name, 0, 1) }}
                </div>
                <div>
                    <h3 class="text-xl font-bold">{{ $selectedSchool->name }}</h3>
                    <p class="text-indigo-100">{{ $selectedSchool->email }} | {{ $selectedSchool->phone }}</p>
                    <div class="flex items-center gap-3 mt-2">
                        <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs">
                            {{ ucfirst($selectedSchool->plan) }} Plan
                        </span>
                        <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs">
                            Expires: {{ $selectedSchool->subscription_end->format('M d, Y') }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="text-right">
                <p class="text-indigo-100 text-sm">Total Spent</p>
                <p class="text-3xl font-bold">₹{{ number_format($schoolTotalSpent) }}</p>
            </div>
        </div>
    </div>
    @endif

    <!-- Revenue by Plan Chart - NOW SHOWS SCHOOL COUNT -->
    @if(!request('school_id'))
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Schools by Plan</h3>
        
        @php
            $hasData = !empty($planRevenue) && array_sum($planRevenue) > 0;
            $maxCount = !empty($planRevenue) ? max($planRevenue) : 0;
            $totalSchools = array_sum($planRevenue);
        @endphp
        
        @if($hasData)
        <div class="h-64 flex items-end justify-around gap-4 px-4">
            @foreach($planRevenue as $plan => $count)
            @php
                $percentage = $totalSchools > 0 ? ($count / $totalSchools * 100) : 0;
                // Scale bar height relative to max count (max 180px)
                $barHeight = $maxCount > 0 ? ($count / $maxCount * 180) : 0;
                $barHeight = max($barHeight, 4); // Minimum 4px visibility
                
                // Different color for each plan
                $colors = [
                    'basic' => 'from-gray-400 to-gray-500',
                    'standard' => 'from-blue-400 to-blue-600',
                    'premium' => 'from-purple-400 to-purple-600'
                ];
                $colorClass = $colors[$plan] ?? 'from-blue-400 to-blue-600';
            @endphp
            <div class="flex flex-col items-center flex-1 min-w-[80px]">
                <div class="relative w-full flex items-end justify-center" style="height: 200px;">
                    <div class="w-16 bg-gradient-to-t {{ $colorClass }} rounded-t-lg relative group cursor-pointer transition-all duration-300 hover:opacity-90 shadow-md" 
                        style="height: {{ $barHeight }}px;">
                        <!-- Tooltip -->
                        <div class="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-xs px-3 py-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-20 shadow-xl pointer-events-none">
                            <div class="font-bold">{{ $count }} Schools</div>
                            <div class="text-gray-300">{{ number_format($percentage, 1) }}% of total</div>
                            <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
                        </div>
                    </div>
                </div>
                <div class="mt-3 text-center">
                    <p class="text-sm font-semibold text-gray-800 uppercase tracking-wide">{{ ucfirst($plan) }}</p>
                    <p class="text-xs text-gray-500 font-medium">{{ $count }} Schools</p>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div class="h-64 flex flex-col items-center justify-center text-gray-400 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200">
            <i class="fas fa-school text-5xl mb-3 text-gray-300"></i>
            <p class="text-lg font-medium">No school data available</p>
            <p class="text-sm">Schools will appear here when subscriptions are created</p>
        </div>
        @endif
    </div>
    @endif

    <!-- Date Quick Filters -->
    <div class="flex gap-2 mb-4">
        <a href="{{ route('super_admin.reports.index', array_merge(request()->except(['from_date', 'to_date']), ['from_date' => now()->startOfMonth()->format('Y-m-d'), 'to_date' => now()->format('Y-m-d')])) }}" 
        class="px-3 py-1 text-xs rounded-full {{ request('from_date') == now()->startOfMonth()->format('Y-m-d') ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700' }} hover:bg-blue-500 hover:text-white transition-colors">
            This Month
        </a>
        <a href="{{ route('super_admin.reports.index', array_merge(request()->except(['from_date', 'to_date']), ['from_date' => now()->subMonth()->startOfMonth()->format('Y-m-d'), 'to_date' => now()->subMonth()->endOfMonth()->format('Y-m-d')])) }}" 
        class="px-3 py-1 text-xs rounded-full {{ request('from_date') == now()->subMonth()->startOfMonth()->format('Y-m-d') ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700' }} hover:bg-blue-500 hover:text-white transition-colors">
            Last Month
        </a>
        <a href="{{ route('super_admin.reports.index', array_merge(request()->except(['from_date', 'to_date']), ['from_date' => now()->startOfYear()->format('Y-m-d'), 'to_date' => now()->format('Y-m-d')])) }}" 
        class="px-3 py-1 text-xs rounded-full {{ request('from_date') == now()->startOfYear()->format('Y-m-d') ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700' }} hover:bg-blue-500 hover:text-white transition-colors">
            This Year
        </a>
        <a href="{{ route('super_admin.reports.index', array_merge(request()->except(['from_date', 'to_date']), ['from_date' => '2020-01-01', 'to_date' => now()->format('Y-m-d')])) }}" 
        class="px-3 py-1 text-xs rounded-full {{ request('from_date') == '2020-01-01' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700' }} hover:bg-blue-500 hover:text-white transition-colors">
            All Time
        </a>
    </div>
    <!-- Detailed Table -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-800">
                @if(request('school_id'))
                    Subscription History: {{ $selectedSchool->name }}
                @else
                    All Subscription History
                @endif
            </h3>
            <div class="flex gap-2">
                <button onclick="exportToExcel()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm">
                    <i class="fas fa-file-excel mr-2"></i>Export
                </button>
                @if(request('school_id'))
                <a href="{{ route('super_admin.schools.show', request('school_id')) }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm">
                    <i class="fas fa-eye mr-2"></i>View School
                </a>
                @endif
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left">
                <thead class="bg-gray-50 text-gray-700">
                    <tr>
                        <th class="px-4 py-3 font-semibold">Sr.</th>
                        <th class="px-4 py-3 font-semibold">Invoice #</th>
                        <th class="px-4 py-3 font-semibold">School</th>
                        <th class="px-4 py-3 font-semibold">Plan</th>
                        <th class="px-4 py-3 font-semibold">Period</th>
                        <th class="px-4 py-3 font-semibold">Duration</th>
                        <th class="px-4 py-3 font-semibold text-right">Amount</th>
                        <th class="px-4 py-3 font-semibold text-center">Status</th>
                        <th class="px-4 py-3 font-semibold text-center">Actions</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-200">
                    @forelse($histories as $history)
                    <tr class="hover:bg-gray-50 transition-colors">
                         <!-- Added Sr No -->
                        <td class="px-4 py-3 text-sm text-gray-600">
                            {{ $loop->iteration }}
                        </td>
                        <!-- Added Invoice Number -->
                        <td class="px-4 py-3 text-sm font-bold text-gray-800">
                            @if($history->invoice)
                                {{ $history->invoice->invoice_number }}
                            @else
                                <span class="text-gray-400 font-normal">Draft</span>
                            @endif
                        </td>

                        <td class="px-4 py-3">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold mr-3">
                                    {{ $history->school ? substr($history->school->name, 0, 1) : '?' }}
                                </div>
                                <div>
                                    <p class="font-medium text-gray-800">
                                        {{ $history->school ? $history->school->name : 'Unknown School' }}
                                    </p>
                                    <p class="text-xs text-gray-500">
                                        {{ $history->school ? $history->school->email : 'ID: ' . $history->school_id }}
                                    </p>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-1 rounded-full text-xs font-medium
                                {{ $history->plan === 'basic' ? 'bg-gray-100 text-gray-700' : 
                                ($history->plan === 'standard' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700') }}">
                                {{ ucfirst($history->plan) }}
                            </span>
                            @if($history->action !== 'created' && $history->action !== 'renewed')
                                <span class="ml-1 px-2 py-0.5 bg-yellow-100 text-yellow-700 text-xs rounded-full">
                                    {{ ucfirst($history->action) }}
                                </span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            <p class="text-sm">{{ $history->start_date->format('M d, Y') }}</p>
                            <p class="text-xs text-gray-500">to {{ $history->end_date->format('M d, Y') }}</p>
                        </td>
                        <td class="px-4 py-3">
                            {{ $history->duration_months }} month(s)
                        </td>
                        <td class="px-4 py-3 text-right">
                            @php
                                // 🆕 Get actual invoice amount if invoice exists, else fall back to plan amount
                                $invoice = \App\Models\Invoice::where('subscription_history_id', $history->id)->first();
                                $displayAmount = $invoice ? $invoice->total_amount : $history->amount;
                                $displayGst = $invoice ? $invoice->gst_amount : ($history->amount * 0.18);
                            @endphp
                            <p class="font-semibold text-gray-800">₹{{ number_format($displayAmount, 2) }}</p>
                            @if($displayAmount > 0)
                                <p class="text-xs text-gray-500">
                                    GST: ₹{{ number_format($displayGst, 2) }}
                                </p>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-center">
                            <span class="px-2 py-1 rounded-full text-xs font-medium
                                {{ $history->school && $history->school->status === 'active' ? 'bg-green-100 text-green-700' : 
                                ($history->school && $history->school->status === 'suspended' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700') }}">
                                {{ $history->school ? ucfirst($history->school->status) : 'Unknown' }}
                            </span>
                        </td>
                    

                        <td class="px-4 py-3">
                        <!-- This wrapper creates the spacing between buttons -->
                        <div class="flex flex-wrap gap-1 justify-center items-center">
                            @if($history->school)
                                @php
                                    $invoice = \App\Models\Invoice::where('subscription_history_id', $history->id)->first();
                                    $paymentCount = \App\Models\Payment::where('subscription_history_id', $history->id)->count();
                                    $hasInvoice = !is_null($invoice);
                                    $hasPayments = $paymentCount > 0;
                                    $isFullyPaid = $invoice && $invoice->is_locked;
                                    $hasPartialPayment = $invoice && !$invoice->is_locked && $paymentCount > 0;
                                    $isCreditNote = $invoice && $invoice->is_credit_note;
                                    
                                    $isLatest = \App\Models\SubscriptionHistory::where('school_id', $history->school_id)
                                        ->orderBy('id', 'desc')
                                        ->first()?->id === $history->id;
                                    $isFirstEntry = \App\Models\SubscriptionHistory::where('school_id', $history->school_id)
                                        ->orderBy('id', 'asc')
                                        ->first()?->id === $history->id;
                                @endphp

                                @if(!$hasInvoice)
                                   
                                    <button type="button" onclick="openInvoiceModal({{ $history->id }})" 
                                            class="px-3 py-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-xs">
                                        <i class="fas fa-file-invoice mr-1"></i>Generate
                                    </button>

                                     @if($isLatest && !$isFirstEntry)
                                        <button type="button" onclick="confirmDeleteSubscription({{ $history->id }})" 
                                                class="px-3 py-1 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-xs"
                                                title="Delete this subscription entry">
                                            <i class="fas fa-trash-alt mr-1"></i>Plan
                                        </button>
                                    @endif
                                @else
                                    @if($isCreditNote)
                                        <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-lg text-xs font-semibold">
                                            <i class="fas fa-credit-card mr-1"></i>CreditNote
                                        </span>
                                        <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded-lg text-xs">
                                            ₹{{ number_format(abs($invoice->total_amount), 2) }}
                                        </span>
                                        
                                        @php
                                            $isConsumed = false;
                                            if ($invoice->credit_consumed) {
                                                if ($invoice->consumed_by_invoice_id) {
                                                    $consumingInvoice = \App\Models\Invoice::find($invoice->consumed_by_invoice_id);
                                                    $isConsumed = !is_null($consumingInvoice);
                                                } else {
                                                    $isConsumed = true;
                                                }
                                            }
                                            $canDeleteCreditNote = !$isConsumed;
                                        @endphp
                                        
                                        @if($canDeleteCreditNote)
                                            <button type="button" onclick="confirmDeleteCreditNote({{ $invoice->id }})" 
                                                    class="px-3 py-1 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-xs"
                                                    title="Delete Credit Note">
                                                <i class="fas fa-trash-alt mr-1"></i> Delete
                                            </button>
                                        @else
                                            <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded-lg text-xs" title="Applied to Invoice #{{ $invoice->consumed_by_invoice_id ?? 'N/A' }}">
                                                <i class="fas fa-link mr-1"></i> Adjusted
                                            </span>
                                        @endif
                                    @else
                                      
                                        
                                        @if($isFullyPaid)
                                            <button type="button" onclick="openReceiptModal({{ $invoice->id }})" 
                                                    class="px-3 py-1 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-xs">
                                                <i class="fas fa-receipt mr-1"></i>Receipt
                                            </button>
                                            <span class="px-2 py-1 bg-green-100 text-green-700 rounded-lg text-xs">
                                                <i class="fas fa-check mr-1"></i>Paid
                                            </span>
                                        @elseif($hasPartialPayment)
                                            <button type="button" onclick="openPaymentModal({{ $history->id }})" 
                                                    class="px-3 py-1 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors text-xs">
                                                <i class="fas fa-money-bill-wave mr-1"></i>Payment
                                            </button>
                                            <button type="button" onclick="openReceiptModal({{ $invoice->id }})"
                                                    class="px-3 py-1 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors text-xs">
                                                <i class="fas fa-receipt mr-1"></i>Receipts
                                            </button>
                                        @else
                                            <button type="button" onclick="openPaymentModal({{ $history->id }})" 
                                                    class="px-3 py-1 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-xs">
                                                <i class="fas fa-money-bill-wave mr-1"></i>Payment
                                            </button>
                                        @endif
                                        
                                        <button type="button" onclick="openInvoiceModal({{ $history->id }})" 
                                                class="px-3 py-1 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-xs">
                                            <i class="fas fa-eye mr-1"></i>Invoice
                                        </button>

                                          @if(!$hasPayments)
                                            <button type="button" onclick="confirmDeleteInvoice({{ $invoice->id }})" 
                                                    class="px-3 py-1 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-xs"
                                                    title="Delete Invoice">
                                                <i class="fas fa-trash-alt mr-1"></i>Bill
                                            </button>
                                        @endif
                                    @endif
                                @endif
                            @else
                                <span class="text-xs text-gray-400">N/A</span>
                            @endif
                        </div>
                    </td>

                    </tr>

                    
                    @empty
                    <tr>
                        <td colspan="9" class="px-4 py-8 text-center text-gray-500">
                            <i class="fas fa-inbox text-4xl mb-3"></i>
                            <p>No records found for the selected filters</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="px-6 py-4 border-t border-gray-200">
            {{ $histories->links() }}
        </div>
    </div>

    <!-- Invoice Modal -->
    <div id="invoiceModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            
            <!-- Backdrop -->
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="closeInvoiceModal()"></div>

            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

            <!-- Modal Panel -->
            <div class="relative inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
                
                <!-- Header -->
                <div class="bg-gradient-to-r from-blue-600 to-blue-700 px-6 py-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-file-invoice text-white text-lg"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-white" id="modal-title">Generate Invoice</h3>
                                <p class="text-blue-100 text-xs" id="invoiceSchoolName">Loading...</p>
                            </div>
                        </div>
                        <button type="button" onclick="closeInvoiceModal()" class="text-white hover:text-blue-200 focus:outline-none">
                            <i class="fas fa-times text-xl"></i>
                        </button>
                    </div>
                </div>

                <!-- Content -->
                <div class="p-6 max-h-[70vh] overflow-y-auto" id="invoiceModalContent">
                    <div class="flex items-center justify-center py-12">
                        <i class="fas fa-spinner fa-spin text-blue-600 text-3xl mr-3"></i>
                        <span class="text-gray-600">Loading invoice details...</span>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- Professional Success Modal -->
    <div id="successModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeSuccessModal()"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="relative inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full">
                <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-4">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-check text-white text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-white">Success!</h3>
                            <p class="text-green-100 text-sm">Invoice Generated</p>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <div class="text-center">
                        <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-4">
                            <i class="fas fa-file-invoice text-green-600 text-2xl"></i>
                        </div>
                        <p class="text-gray-600 mb-4">Your invoice has been saved successfully.</p>
                        
                        <div class="bg-gray-50 rounded-lg p-4 mb-4 text-left">
                            <div class="flex justify-between text-sm mb-2">
                                <span class="text-gray-500">Invoice Number:</span>
                                <span class="font-semibold text-gray-800" id="successInvoiceNumber">-</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">Total Amount:</span>
                                <span class="font-semibold text-green-600" id="successTotalAmount">-</span>
                            </div>
                        </div>
                    </div>
                    <button type="button" onclick="closeSuccessModalAndReload()" 
                            class="w-full py-3 bg-green-600 text-white rounded-xl hover:bg-green-700 font-semibold transition-colors shadow-lg shadow-green-200">
                        Continue
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Error/Locked Modal -->
    <div id="errorModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeErrorModal()"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="relative inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full">
                <div class="bg-gradient-to-r from-red-500 to-red-600 px-6 py-4">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-lock text-white text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-white" id="errorModalTitle">Error</h3>
                            <p class="text-red-100 text-sm" id="errorModalSubtitle">Please check the details</p>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <div class="text-center">
                        <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-100 mb-4">
                            <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
                        </div>
                        <p class="text-gray-600 mb-4" id="errorModalMessage">Payment has already been received against this invoice.</p>
                        
                        <div class="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
                            <p class="text-xs text-red-700">
                                <i class="fas fa-info-circle mr-1"></i>
                                To make changes, you must first delete the payment receipt.
                            </p>
                        </div>
                    </div>
                    <button type="button" onclick="closeErrorModal()" 
                            class="w-full py-3 bg-gray-600 text-white rounded-xl hover:bg-gray-700 font-semibold transition-colors">
                        Understood
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Success Modal -->
    <div id="paymentSuccessModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closePaymentSuccessModal()"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="relative inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full">
                <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-4">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-check text-white text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-white">Payment Received!</h3>
                            <p class="text-green-100 text-sm">Transaction Complete</p>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <div class="text-center">
                        <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-4">
                            <i class="fas fa-money-bill-wave text-green-600 text-2xl"></i>
                        </div>
                        <p class="text-gray-600 mb-4">Payment has been recorded successfully.</p>
                        
                        <div class="bg-gray-50 rounded-lg p-4 mb-4 text-left">
                            <div class="flex justify-between text-sm mb-2">
                                <span class="text-gray-500">Invoice Number:</span>
                                <span class="font-semibold text-gray-800" id="paymentInvoiceNumber">-</span>
                            </div>
                            <div class="flex justify-between text-sm mb-2">
                                <span class="text-gray-500">Amount Paid:</span>
                                <span class="font-semibold text-green-600" id="paymentAmountPaid">-</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">Balance:</span>
                                <span class="font-semibold" id="paymentBalance">-</span>
                            </div>
                        </div>
                    </div>
                    <div style="display:flex;gap:10px;">
                    <button type="button" onclick="closePaymentSuccessModalAndReload()" 
                            class="flex-1 py-3 bg-gray-500 text-white rounded-xl hover:bg-gray-600 
                                font-semibold transition-colors">
                        <i class="fas fa-times mr-2"></i>Close
                    </button>
                    <button type="button" onclick="closePaymentAndOpenReceipt()" 
                            class="flex-1 py-3 bg-green-600 text-white rounded-xl hover:bg-green-700 
                                font-semibold transition-colors shadow-lg shadow-green-200">
                        <i class="fas fa-receipt mr-2"></i>Print All Receipts
                    </button>
                </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
<div id="deleteConfirmModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-900 bg-opacity-60 transition-opacity backdrop-blur-sm" onclick="closeDeleteConfirmModal()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        <div class="relative inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full border border-red-100">
            <div class="bg-gradient-to-r from-red-500 to-red-600 px-6 py-5">
                <div class="flex items-center">
                    <div class="w-14 h-14 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4 shadow-lg">
                        <i class="fas fa-exclamation-triangle text-white text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-white">Delete Payment Receipt?</h3>
                        <p class="text-red-100 text-sm mt-1">This action cannot be undone</p>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="bg-red-50 border-l-4 border-red-500 rounded-r-lg p-4 mb-5">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-red-500 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-red-700 font-medium">Deleting this receipt will:</p>
                            <ul class="mt-2 text-sm text-red-600 space-y-1 list-disc list-inside">
                                <li>Remove the payment record permanently</li>
                                <li>Unlock the invoice for editing</li>
                                <li>Update the balance accordingly</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-xl p-4 mb-5 border border-gray-200">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-gray-500">Invoice:</span>
                        <span class="text-sm font-bold text-gray-800 font-mono" id="deleteModalInvoiceNum">-</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500">Amount:</span>
                        <span class="text-sm font-bold text-red-600" id="deleteModalAmount">-</span>
                    </div>
                </div>
                <div class="flex gap-3">
                    <button onclick="closeDeleteConfirmModal()" class="flex-1 py-3 px-4 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 font-semibold transition-all flex items-center justify-center gap-2">
                        <i class="fas fa-times"></i>Cancel
                    </button>
                    <button onclick="executeDeleteLastPayment()" class="flex-1 py-3 px-4 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-xl hover:from-red-600 hover:to-red-700 font-semibold transition-all shadow-lg shadow-red-200 flex items-center justify-center gap-2">
                        <i class="fas fa-trash-alt"></i>Yes, Delete
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

    <script>
    function closePaymentSuccessModal() {
        const modal = document.getElementById('paymentSuccessModal');
        if (modal) {
            modal.classList.add('hidden');
        }
        document.body.style.overflow = '';
    }

    // ✅ FIXED: Payment success ke baad ALL receipts print karo
        function closePaymentAndOpenReceipt() {
            closePaymentSuccessModal();
            
            if (window._lastPaidInvoiceId) {
                // Show loading indicator
                const loadingToast = document.createElement('div');
                loadingToast.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Loading receipts...';
                loadingToast.style.cssText = `
                    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
                    background: #3b82f6; color: white; padding: 16px 24px; border-radius: 8px;
                    z-index: 99999; font-weight: 600;
                `;
                document.body.appendChild(loadingToast);
                
                // Fetch and print all receipts
                fetch(`/super-admin/reports/receipt/${window._lastPaidInvoiceId}/print-all`, {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    loadingToast.remove();
                    
                    if (data.success && data.html) {
                        // Open print window with all receipts
                        const win = window.open('', '_blank', 'width=900,height=700,scrollbars=yes');
                        if (!win) {
                            alert('Please allow popups to print receipts');
                            return;
                        }
                        
                        win.document.write(data.html);
                        win.document.close();
                        
                        // ✅ Reload page after print window opens
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        alert(data.message || 'Could not load receipts');
                        // Fallback: reload anyway
                        window.location.reload();
                    }
                })
                .catch(error => {
                    loadingToast.remove();
                    console.error('Error:', error);
                    // Fallback to single receipt
                    if (window._lastPaidPaymentId) {
                        printSinglePayment(window._lastPaidPaymentId, 'Receipt');
                    }
                    // Reload after fallback
                    setTimeout(() => window.location.reload(), 2000);
                });
            } else {
                window.location.reload();
            }
        }

        // Keep this for backward compatibility (used in payment form)
        function printAllReceipts(invoiceNumber) {
            const receiptContent = document.getElementById('receiptContent');
            if (!receiptContent) return;
            
            const clone = receiptContent.cloneNode(true);
            clone.querySelectorAll('.action-buttons, .no-print, button').forEach(el => el.remove());
            openPrintWindow(clone.innerHTML, 'All-Receipts-' + invoiceNumber);
        }

    // ✅ NEW: Single payment ki receipt print karo
    function printSinglePayment(paymentId, invoiceNumber) {
        fetch(`{{ url('super-admin/reports/payment') }}/${paymentId}/receipt`, {
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                openPrintWindow(data.html, 'Receipt-' + invoiceNumber);
            }
        })
        .catch(() => {
            alert('Could not load receipt for printing');
        });
    }

    // ✅ NEW: Print all receipts
    function printAllReceipts(invoiceNumber) {
        const receiptContent = document.getElementById('receiptContent');
        if (!receiptContent) return;

        const clone = receiptContent.cloneNode(true);
        clone.querySelectorAll('.action-buttons, .no-print, button').forEach(el => el.remove());
        openPrintWindow(clone.innerHTML, 'All-Receipts-' + invoiceNumber);
    }

    // ✅ Helper: Print window open karo
    function openPrintWindow(html, title) {
        const win = window.open('', '_blank', 'width=900,height=700,scrollbars=yes');
        if (!win) { alert('Please allow popups'); return; }

        var styles = '';
        try {
            Array.from(document.styleSheets).forEach(s => {
                try { Array.from(s.cssRules).forEach(r => { styles += r.cssText + '\n'; }); } catch(e) {}
            });
        } catch(e) {}

        win.document.write(`<!DOCTYPE html>
    <html><head>
        <title>${title}</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
        <style>
            @page { size: A4; margin: 10mm; }
            ${styles}
            body { background: white !important; padding: 20px; font-family: 'Segoe UI', sans-serif; }
            .no-print, .action-buttons, button { display: none !important; }
        </style>
    </head>
    <body>${html}
    <script>window.onload=function(){setTimeout(function(){window.print();},400);};<\/script>
    </body></html>`);
        win.document.close();
    }
    </script>
    <script>
    // ✅ NEW: Print all receipts from main table button + refresh page
    function printAllReceiptsAndRefresh(invoiceId) {
        // Show loading indicator
        const loadingToast = document.createElement('div');
        loadingToast.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Loading receipts...';
        loadingToast.style.cssText = `
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: #3b82f6; color: white; padding: 16px 24px; border-radius: 8px;
            z-index: 99999; font-weight: 600;
        `;
        document.body.appendChild(loadingToast);
        
        // Fetch and print all receipts
        fetch(`/super-admin/reports/receipt/${invoiceId}/print-all`, {
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            loadingToast.remove();
            
            if (data.success && data.html) {
                // Open print window with all receipts
                const win = window.open('', '_blank', 'width=900,height=700,scrollbars=yes');
                if (!win) {
                    alert('Please allow popups to print receipts');
                    return;
                }
                
                win.document.write(data.html);
                win.document.close();
                
                // ✅ Refresh page after print window opens
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                // If no print-all available, fallback to modal
                openReceiptModal(invoiceId);
            }
        })
        .catch(error => {
            loadingToast.remove();
            console.error('Error:', error);
            // Fallback to modal view
            openReceiptModal(invoiceId);
        });
    }
    </script>

    <!-- Delete Subscription Confirmation Modal -->
<div id="deleteSubscriptionModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-900 bg-opacity-60 transition-opacity backdrop-blur-sm" onclick="closeDeleteSubscriptionModal()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        <div class="relative inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full border border-red-100">
            <div class="bg-gradient-to-r from-red-600 to-red-700 px-6 py-5">
                <div class="flex items-center">
                    <div class="w-14 h-14 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4 shadow-lg">
                        <i class="fas fa-exclamation-triangle text-white text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-white">Delete Subscription?</h3>
                        <p class="text-red-100 text-sm mt-1">This action cannot be undone</p>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="bg-red-50 border-l-4 border-red-500 rounded-r-lg p-4 mb-5">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-red-500 mt-0.5"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-red-700 font-medium">Deleting this subscription will:</p>
                            <ul class="mt-2 text-sm text-red-600 space-y-1 list-disc list-inside">
                                <li>Permanently remove the subscription record</li>
                                <li>Delete any associated draft invoice</li>
                                <li>Update the school's balance</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-xl p-4 mb-5 border border-gray-200">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-gray-500">School:</span>
                        <span class="text-sm font-bold text-gray-800" id="deleteSubSchoolName">-</span>
                    </div>
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-gray-500">Period:</span>
                        <span class="text-sm font-semibold text-gray-800" id="deleteSubPeriod">-</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500">Amount:</span>
                        <span class="text-sm font-bold text-red-600" id="deleteSubAmount">-</span>
                    </div>
                </div>
                <div class="flex gap-3">
                    <button onclick="closeDeleteSubscriptionModal()" class="flex-1 py-3 px-4 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 font-semibold transition-all flex items-center justify-center gap-2">
                        <i class="fas fa-times"></i>Cancel
                    </button>
                    <button onclick="executeDeleteSubscription()" class="flex-1 py-3 px-4 bg-gradient-to-r from-red-600 to-red-700 text-white rounded-xl hover:from-red-700 hover:to-red-800 font-semibold transition-all shadow-lg shadow-red-200 flex items-center justify-center gap-2">
                        <i class="fas fa-trash-alt"></i>Yes, Delete
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

    @endsection

    @push('scripts')
    <script>
        // Open Invoice Modal
        function openInvoiceModal(historyId) {
            const modal = document.getElementById('invoiceModal');
            const content = document.getElementById('invoiceModalContent');
            const schoolName = document.getElementById('invoiceSchoolName');
            
            // Show modal
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
            
            // Reset content
            content.innerHTML = `
                <div class="flex items-center justify-center py-12">
                    <i class="fas fa-spinner fa-spin text-blue-600 text-3xl mr-3"></i>
                    <span class="text-gray-600">Loading invoice details...</span>
                </div>
            `;
            
            // Fetch invoice form
            fetch(`{{ url('super-admin/reports/invoice') }}/${historyId}`, {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
                        .then(data => {
                if (data.success) {
                    content.innerHTML = data.html;
                    schoolName.textContent = data.school_name || 'Unknown School';
                    
                    // 🆕 FIXED: Initialize calculations with multiple delays
                    // First try immediately
                    if (typeof calculateInvoice === 'function') {
                        calculateInvoice();
                    }
                    // Then again after DOM settles
                    setTimeout(function() {
                        if (typeof calculateInvoice === 'function') {
                            calculateInvoice();
                        }
                        if (typeof handleDiscountTypeChange === 'function') {
                            handleDiscountTypeChange();
                        }
                    }, 100);
                    // Final check after animation
                    setTimeout(function() {
                        if (typeof calculateInvoice === 'function') {
                            calculateInvoice();
                        }
                    }, 500);
                } else {
                    content.innerHTML = `
                        <div class="text-center py-8 text-red-600">
                            <i class="fas fa-exclamation-circle text-4xl mb-3"></i>
                            <p>${data.message || 'Failed to load invoice form'}</p>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                content.innerHTML = `
                    <div class="text-center py-8 text-red-600">
                        <i class="fas fa-exclamation-circle text-4xl mb-3"></i>
                        <p>Error loading invoice. Please try again.</p>
                        <p class="text-xs text-gray-500 mt-2">${error.message}</p>
                    </div>
                `;
            });
        }

        // Close Invoice Modal
        function closeInvoiceModal() {
            const modal = document.getElementById('invoiceModal');
            modal.classList.add('hidden');
            document.body.style.overflow = '';
        }

        // ✅ GLOBAL: Invoice calculation function (must be in parent page, not modal)
function calculateInvoice() {
    const applyGst = document.getElementById('apply_gst')?.checked || false;
    const applyDiscount = document.getElementById('apply_discount')?.checked || false;
    const discountType = document.getElementById('discount_type')?.value || 'percentage';
    const discountValue = parseFloat(document.getElementById('discount_value')?.value) || 0;
    
    const studentCountInput = document.getElementById('student_count');
    const monthlyRateInput = document.getElementById('monthly_rate');
    const durationMonthsInput = document.getElementById('duration_months');
    
    // Parse values with explicit checks
    const studentCountRaw = studentCountInput?.value;
    const studentCount = (studentCountRaw !== '' && studentCountRaw !== null && studentCountRaw !== undefined) 
        ? parseInt(studentCountRaw) || 0 
        : 0;
        
    const monthlyRateRaw = monthlyRateInput?.value;
    const monthlyRate = (monthlyRateRaw !== '' && monthlyRateRaw !== null && monthlyRateRaw !== undefined)
        ? parseFloat(monthlyRateRaw) || 0
        : 0;
        
    const durationMonthsRaw = durationMonthsInput?.value;
    const durationMonths = (durationMonthsRaw !== '' && durationMonthsRaw !== null && durationMonthsRaw !== undefined)
        ? parseInt(durationMonthsRaw) || 1
        : 1;
    
    // Calculate base amount
    let baseAmount = 0;
    if (studentCount > 0 && monthlyRate > 0 && durationMonths > 0) {
        baseAmount = monthlyRate * studentCount * durationMonths;
    }

    let subtotal = baseAmount;
    let gstAmount = 0;
    let discountAmount = 0;

    // Calculate discount
    if (applyDiscount && discountValue > 0) {
        if (discountType === 'percentage') {
            discountAmount = (subtotal * discountValue) / 100;
        } else {
            discountAmount = discountValue;
        }
        discountAmount = Math.min(discountAmount, subtotal);
        subtotal -= discountAmount;
    }

    // Calculate GST
    if (applyGst) {
        gstAmount = subtotal * 0.18;
    }

    const total = subtotal + gstAmount;

    // Update display elements
    updateInvoiceDisplay('display_calculated_base', baseAmount);
    updateInvoiceDisplay('display_student_count', studentCount > 0 ? studentCount : 0, false, false);
    updateInvoiceDisplay('display_subtotal', baseAmount);
    updateInvoiceDisplay('display_discount', discountAmount, true);
    updateInvoiceDisplay('display_taxable', subtotal);
    updateInvoiceDisplay('display_gst', gstAmount);
    updateInvoiceDisplay('display_total', total);
    
    // Show/hide rows
    const discountRow = document.getElementById('discount_row');
    const gstRow = document.getElementById('gst_row');
    if (discountRow) discountRow.classList.toggle('hidden', !(applyDiscount && discountAmount > 0));
    if (gstRow) gstRow.classList.toggle('hidden', !applyGst);

    // Update hidden inputs
    const calcGst = document.getElementById('calculated_gst');
    const calcDiscount = document.getElementById('calculated_discount');
    const calcTotal = document.getElementById('calculated_total');
    const baseInput = document.getElementById('base_amount');

    if (calcGst) calcGst.value = gstAmount.toFixed(2);
    if (calcDiscount) calcDiscount.value = discountAmount.toFixed(2);
    if (calcTotal) calcTotal.value = total.toFixed(2);
    if (baseInput) baseInput.value = baseAmount.toFixed(2);
}

// ✅ GLOBAL: Display helper
function updateInvoiceDisplay(elementId, value, isNegative = false, isCurrency = true) {
    const el = document.getElementById(elementId);
    if (!el) return;
    
    if (value === null || value === undefined || (typeof value === 'number' && isNaN(value))) {
        el.textContent = isCurrency ? '₹0.00' : '-';
        return;
    }
    
    if (!isCurrency) {
        el.textContent = String(value);
        return;
    }
    
    const formatted = '₹' + Math.abs(value).toLocaleString('en-IN', {
        minimumFractionDigits: 2, 
        maximumFractionDigits: 2
    });
    
    el.textContent = isNegative ? '-' + formatted : formatted;
}

// ✅ GLOBAL: Toggle discount
function toggleDiscount() {
    const checkbox = document.getElementById('apply_discount');
    const fields = document.getElementById('discountFields');
    
    if (checkbox && fields) {
        if (checkbox.checked) {
            fields.classList.remove('hidden');
            handleDiscountTypeChange();
        } else {
            fields.classList.add('hidden');
            const discountValue = document.getElementById('discount_value');
            if (discountValue) discountValue.value = 0;
            calculateInvoice();
        }
    }
}

// ✅ GLOBAL: Toggle GST
function toggleGst() {
    calculateInvoice();
}

// ✅ GLOBAL: Handle discount type change
function handleDiscountTypeChange() {
    const typeSelect = document.getElementById('discount_type');
    const valueInput = document.getElementById('discount_value');
    const label = document.getElementById('discount_value_label');
    
    if (!typeSelect || !valueInput) return;
    
    const isFixed = typeSelect.value === 'fixed';
    if (label) label.textContent = isFixed ? 'Discount Amount (₹)' : 'Discount Percentage (%)';
    valueInput.step = isFixed ? '0.01' : '0.1';
    valueInput.max = isFixed ? '' : '100';
    
    calculateInvoice();
}

// 🆕 Add event listeners for live calculation
document.addEventListener('DOMContentLoaded', function() {
    const studentStrengthInput = document.getElementById('student_strength');
    const ratePerStudentInput = document.getElementById('rate_per_student');
    
    if (studentStrengthInput) {
        studentStrengthInput.addEventListener('input', calculateInvoice);
        studentStrengthInput.addEventListener('keyup', calculateInvoice);
    }
    if (ratePerStudentInput) {
        ratePerStudentInput.addEventListener('input', calculateInvoice);
        ratePerStudentInput.addEventListener('keyup', calculateInvoice);
    }
});

        // Toggle Discount Fields
        function toggleDiscount() {
            const checkbox = document.getElementById('apply_discount');
            const fields = document.getElementById('discountFields');
            const row = document.getElementById('discount_row');
            
            if (checkbox && fields) {
                if (checkbox.checked) {
                    fields.classList.remove('hidden');
                } else {
                    fields.classList.add('hidden');
                    const discountValue = document.getElementById('discount_value');
                    if (discountValue) discountValue.value = 0;
                }
            }
            calculateInvoice();
        }

        // Toggle GST
        function toggleGst() {
            calculateInvoice();
        }

        // Preview Final Invoice
        function previewFinalInvoice() {
            const form = document.getElementById('invoiceConfigForm');
            if (!form) return;

            const formData = new FormData(form);
            
            fetch('{{ route('super_admin.reports.invoice.generate') }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success && data.html) {
                    const content = document.getElementById('invoiceModalContent');
                    content.innerHTML = data.html;
                } else {
                    alert(data.message || 'Failed to generate invoice');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error generating invoice preview');
            });
        }

        // Download Invoice
        function downloadInvoice() {
            const invoiceNumber = document.getElementById('invoice_number')?.value;
            if (invoiceNumber) {
                window.open(`{{ url('super-admin/reports/invoice/download') }}/${invoiceNumber}`, '_blank');
            }
        }

        // Export to Excel
        function exportToExcel() {
            const params = new URLSearchParams(window.location.search);
            window.open(`{{ route('super_admin.reports.index') }}?${params.toString()}&export=excel`, '_blank');
        }

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

        // Close modal on backdrop click
        document.getElementById('invoiceModal')?.addEventListener('click', function(e) {
            if (e.target === this) {
                closeInvoiceModal();
            }
        });

        // Open Payment Modal
        function openPaymentModal(historyId) {
            const modal = document.getElementById('invoiceModal');
            const content = document.getElementById('invoiceModalContent');
            const schoolName = document.getElementById('invoiceSchoolName');
            const title = document.getElementById('modal-title');
            
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
            title.textContent = 'Record Payment';
            
            content.innerHTML = `
                <div class="flex items-center justify-center py-12">
                    <i class="fas fa-spinner fa-spin text-green-600 text-3xl mr-3"></i>
                    <span class="text-gray-600">Loading payment form...</span>
                </div>
            `;
            
            fetch(`{{ url('super-admin/reports/payment') }}/${historyId}`, {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    content.innerHTML = data.html;
                    schoolName.textContent = data.school_name;
                } else {
                    content.innerHTML = `<div class="text-red-600 text-center py-8">${data.message}</div>`;
                }
            })
            .catch(error => {
                content.innerHTML = `<div class="text-red-600 text-center py-8">Error loading payment form</div>`;
            });
        }

        // Show professional success modal
        function showSuccessModal(invoiceNumber, totalAmount) {
            const modal = document.getElementById('successModal');
            document.getElementById('successInvoiceNumber').textContent = invoiceNumber || '-';
            document.getElementById('successTotalAmount').textContent = totalAmount ? '₹' + parseFloat(totalAmount).toFixed(2) : '-';
            
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        function closeSuccessModal() {
            const modal = document.getElementById('successModal');
            modal.classList.add('hidden');
            document.body.style.overflow = '';
        }

        function closeSuccessModalAndReload() {
            const modal = document.getElementById('successModal');
            if (modal) modal.classList.add('hidden');

            document.body.style.overflow = '';
            window.location.reload();
        }

        // Show error modal
        function showErrorModal(message, title, subtitle) {
            const modal    = document.getElementById('errorModal');
            const titleEl  = document.getElementById('errorModalTitle');
            const subEl    = document.getElementById('errorModalSubtitle');
            const msgEl    = document.getElementById('errorModalMessage');

            if (titleEl) titleEl.textContent  = title    || 'Error';
            if (subEl)   subEl.textContent    = subtitle || 'Please check the details';
            if (msgEl)   msgEl.textContent    = message  || 'An error occurred.';

            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        function closeErrorModal() {
            const modal = document.getElementById('errorModal');
            modal.classList.add('hidden');
            document.body.style.overflow = '';
        }

        // Update table row buttons without full reload
        function updateTableRowButtons(historyId, invoiceNumber) {
            const rows = document.querySelectorAll('tbody tr');
            rows.forEach(row => {
                const actionCell = row.querySelector('td:last-child');
                if (actionCell && actionCell.innerHTML.includes(`openInvoiceModal(${historyId})`)) {
                    // Update buttons for this row
                    actionCell.innerHTML = `
                         <button type="button" onclick="openPaymentModal(${historyId})" 
                                class="px-3 py-1 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-xs mr-1">
                            <i class="fas fa-money-bill-wave mr-1"></i>Receive Payment
                        </button>
                        <button type="button" onclick="openInvoiceModal(${historyId})" 
                                class="px-3 py-1 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-xs">
                            <i class="fas fa-eye mr-1"></i>Invoice
                        </button>
                    `;
                }
            });
        }

        // Global function to go back to invoice form from preview
        function goBackToInvoiceForm() {
            const historyId = document.querySelector('#invoiceConfigForm input[name="history_id"]')?.value;
            
            if (!historyId) {
                console.error('History ID not found');
                return;
            }
            
            const content = document.getElementById('invoiceModalContent');
            const schoolName = document.getElementById('invoiceSchoolName');
            const title = document.getElementById('modal-title');
            
            title.textContent = 'Generate Invoice';
            
            content.innerHTML = `
                <div class="flex items-center justify-center py-12">
                    <i class="fas fa-spinner fa-spin text-blue-600 text-3xl mr-3"></i>
                    <span class="text-gray-600">Loading invoice form...</span>
                </div>
            `;
            
            fetch(`{{ url('super-admin/reports/invoice') }}/${historyId}`, {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    content.innerHTML = data.html;
                    schoolName.textContent = data.school_name || 'Unknown School';
                    
                    setTimeout(() => {
                        if (typeof calculateInvoice === 'function') calculateInvoice();
                        if (typeof handleDiscountTypeChange === 'function') handleDiscountTypeChange();
                    }, 100);
                } else {
                    content.innerHTML = `
                        <div class="text-center py-8 text-red-600">
                            <i class="fas fa-exclamation-circle text-4xl mb-3"></i>
                            <p>${data.message || 'Failed to load invoice form'}</p>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                content.innerHTML = `
                    <div class="text-center py-8 text-red-600">
                        <i class="fas fa-exclamation-circle text-4xl mb-3"></i>
                        <p>Error loading invoice form. Please try again.</p>
                    </div>
                `;
            });
        }

        // Global function to print invoice from preview
        function printInvoice() {
            const invoiceContent = document.getElementById('invoiceContent');
            
            if (!invoiceContent) {
                console.error('Invoice content not found');
                return;
            }
            
            const printWindow = window.open('', '_blank', 'width=900,height=700,scrollbars=yes,resizable=yes');
            
            if (!printWindow) {
                alert('Please allow popups to print the invoice');
                return;
            }
            
            const contentHTML = invoiceContent.innerHTML;
            
            printWindow.document.open();
            printWindow.document.write(`
                <!DOCTYPE html>
                <html>
                <head>
                    <title>Invoice</title>
                    <meta charset="utf-8">
                    <style>
                        @page { size: A4; margin: 10mm; }
                        * { box-sizing: border-box; margin: 0; padding: 0; }
                        body { 
                            font-family: 'Segoe UI', Arial, sans-serif; 
                            margin: 0; 
                            padding: 20px; 
                            background: white; 
                            line-height: 1.6;
                            color: #333;
                        }
                        .invoice-container { 
                            max-width: 800px; 
                            margin: 0 auto; 
                            background: white; 
                            padding: 40px; 
                        }
                        .header { 
                            display: flex; 
                            justify-content: space-between; 
                            margin-bottom: 30px; 
                            border-bottom: 3px solid #2563eb; 
                            padding-bottom: 20px; 
                        }
                        .company-info h1 { margin: 0; color: #2563eb; font-size: 28px; }
                        .company-info p { margin: 5px 0; color: #666; font-size: 14px; }
                        .invoice-details { text-align: right; }
                        .invoice-details h2 { margin: 0; color: #2563eb; font-size: 24px; }
                        .badge { 
                            display: inline-block; 
                            padding: 5px 15px; 
                            border-radius: 20px; 
                            font-size: 12px; 
                            font-weight: bold; 
                            text-transform: uppercase; 
                            margin-top: 5px;
                        }
                        .badge-paid { background: #dcfce7; color: #166534; }
                        .badge-pending { background: #fef3c7; color: #92400e; }
                        .badge-partial { background: #dbeafe; color: #1e40af; }
                        .client-section { display: flex; justify-content: space-between; margin: 30px 0; }
                        .client-box { width: 45%; }
                        .client-box h3 { margin: 0 0 10px 0; color: #374151; font-size: 14px; text-transform: uppercase; font-weight: 600; }
                        .client-box p { margin: 3px 0; font-size: 14px; color: #4b5563; }
                        table { width: 100%; border-collapse: collapse; margin: 30px 0; }
                        th { background: #f3f4f6; padding: 12px; text-align: left; font-size: 12px; text-transform: uppercase; color: #6b7280; border-bottom: 2px solid #e5e7eb; font-weight: 600; }
                        td { padding: 12px; border-bottom: 1px solid #e5e7eb; font-size: 14px; }
                        .text-right { text-align: right; }
                        .summary-section { margin-top: 30px; border-top: 2px solid #e5e7eb; padding: 20px; background: #f9fafb; border-radius: 8px; }
                        .summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
                        .summary-row.total { font-size: 20px; font-weight: bold; color: #2563eb; border-top: 2px solid #2563eb; margin-top: 10px; padding-top: 15px; }
                        .terms { margin-top: 40px; padding-top: 20px; border-top: 1px dashed #ccc; font-size: 12px; color: #6b7280; }
                        .no-print { display: none !important; }
                    </style>
                </head>
                <body>
                    <div class="invoice-container">
                        ${contentHTML}
                    </div>
                    <script>
                        window.onload = function() {
                            setTimeout(function() {
                                window.print();
                            }, 500);
                        };
                    <\/script>
                </body>
                </html>
            `);
            printWindow.document.close();
        }

        // Global function to view payment receipt from anywhere
        function viewReceipt(invoiceId) {
            window.location.href = '/super-admin/reports/receipt/' + invoiceId;
        }

        // Open Payment Receipt in Modal (same as Invoice)
        function openReceiptModal(invoiceId) {
            // Store current invoice ID for delete functionality
            window._lastInvoiceIdInModal = invoiceId;
            
            const modal = document.getElementById('invoiceModal');
            const content = document.getElementById('invoiceModalContent');
            const schoolName = document.getElementById('invoiceSchoolName');
            const title = document.getElementById('modal-title');
            
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
            title.textContent = 'Payment Receipt';
            schoolName.textContent = 'Loading...';
            
            content.innerHTML = `
                <div class="flex items-center justify-center py-12">
                    <i class="fas fa-spinner fa-spin text-green-600 text-3xl mr-3"></i>
                    <span class="text-gray-600">Loading receipt...</span>
                </div>
            `;
            
            fetch(`/super-admin/reports/receipt/${invoiceId}/ajax`, {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    content.innerHTML = data.html;
                    schoolName.textContent = data.school_name || 'Receipt';
                    
                    // Update button text based on mode
                    const printBtn = content.querySelector('[onclick="printReceipt()"]');
                    if (printBtn && window._receiptModalMode === 'delete') {
                        printBtn.innerHTML = '<i class="fas fa-trash-alt mr-2"></i>Confirm Delete';
                        printBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
                        printBtn.classList.add('bg-red-600', 'hover:bg-red-700');
                    }
                } else {
                    content.innerHTML = `<div class="text-center py-8 text-red-600">${data.message || 'Failed to load receipt'}</div>`;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                content.innerHTML = '<div class="text-center py-8 text-red-600">Error loading receipt</div>';
            });
        }

        // Listen for messages from receipt iframe/popup
        window.addEventListener('message', function(event) {
            console.log('Parent received message:', event.data);
            
            if (event.data && event.data.action === 'openInvoiceFromReceipt') {
                var historyId = event.data.historyId;
                
                console.log('Opening invoice from receipt, history ID:', historyId);
                
                if (typeof openInvoiceModal === 'function' && historyId) {
                    openInvoiceModal(historyId);
                }
            }
        });

        // RECEIPT MODAL FUNCTIONS
        function goBackToInvoiceFromReceipt() {
            var historyId = document.getElementById('receipt_history_id')?.value;
            
            if (!historyId) {
                console.error('History ID not found in receipt');
                closeInvoiceModal();
                return;
            }
            
            var title = document.getElementById('modal-title');
            if (title) title.textContent = 'Generate Invoice';
            
            openInvoiceModal(historyId);
        }

        function printReceipt() {
            var receiptContent = document.getElementById('receiptContent');
            if (!receiptContent) {
                alert('Receipt content not found');
                return;
            }
            
            var contentClone = receiptContent.cloneNode(true);
            
            var actionButtons = contentClone.querySelector('.action-buttons');
            if (actionButtons) actionButtons.remove();
            
            contentClone.querySelectorAll('input[type="hidden"]').forEach(function(el) { 
                el.remove(); 
            });

            var styles = '';
            try {
                Array.from(document.styleSheets).forEach(function(sheet) {
                    try {
                        Array.from(sheet.cssRules || sheet.rules || []).forEach(function(rule) {
                            styles += rule.cssText + '\n';
                        });
                    } catch(e) {}
                });
            } catch(e) {}

            var printWindow = window.open('', '_blank', 'width=900,height=700,scrollbars=yes');
            if (!printWindow) {
                alert('Please allow popups to print the receipt');
                return;
            }

            printWindow.document.open();
            printWindow.document.write(`<!DOCTYPE html>
    <html>
    <head>
        <title>Payment Receipt</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
        <style>
            @page { size: A4; margin: 10mm; }
            ${styles}
            body { background: white !important; padding: 20px; }
            .receipt-container { box-shadow: none !important; max-width: 100% !important; }
            .no-print { display: none !important; }
        </style>
    </head>
    <body>
        <div class="receipt-container">
            ${contentClone.innerHTML}
        </div>
        <script>
            window.onload = function() { 
                setTimeout(function() { window.print(); }, 400); 
            };
        <\/script>
    </body>
    </html>`);
            printWindow.document.close();
        }

       // Invoice save functions
        function saveInvoice() {
            const form = document.getElementById('invoiceConfigForm');
            const formData = new FormData(form);
            
            const baseAmountInput = document.getElementById('base_amount');
            if (baseAmountInput && !formData.has('base_amount')) {
                formData.append('base_amount', baseAmountInput.value);
            }

            const submitBtn = document.querySelector('[onclick="saveInvoice()"]');

            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Saving...';
            }

            fetch('{{ url('super-admin/reports/invoice/save') }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(async response => {
                const data = await response.json();
                if (!response.ok) {
                    if (data.error_type === 'locked') {
                        showErrorModal(data.message, 'Invoice Locked', 'Amendment Restricted');
                    } else if (data.error_type === 'validation') {
                        showErrorModal(data.message, 'Validation Error', 'Please fix the fields');
                    } else {
                        showErrorModal(data.message || 'Save failed', 'Server Error', 'Something went wrong');
                    }
                    throw new Error('handled');
                }
                return data;
            })
                     .then(data => {
                        if (data.success) {
                            // ✅ Show success modal
                            showSuccessModal(data.invoice_number, data.total_amount);
                            
                            // 🆕 AUTO-REFRESH after 1.5 seconds
                            setTimeout(() => {
                                closeSuccessModalAndReload();
                            }, 1500);
                        }
                    })
            .catch(error => {
                if (error.message !== 'handled') {
                    showErrorModal(error.message, 'Unexpected Error', 'Please try again');
                }
            })
            .finally(() => {
                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = '<i class="fas fa-save mr-2"></i>Save Invoice';
                }
            });
        }

        function showInvoiceSavedToast(invoiceNumber, amount) {
            const old = document.getElementById('invoiceSavedToast');
            if (old) old.remove();

            const toast = document.createElement('div');
            toast.id = 'invoiceSavedToast';
            toast.innerHTML = `
                <div style="display:flex;align-items:center;gap:12px;">
                    <div style="width:36px;height:36px;background:rgba(255,255,255,0.2);
                                border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <i class="fas fa-check" style="font-size:16px;"></i>
                    </div>
                    <div>
                        <div style="font-weight:700;font-size:14px;">Invoice Saved Successfully!</div>
                        <div style="font-size:12px;opacity:0.9;">${invoiceNumber} &nbsp;|&nbsp; ₹${parseFloat(amount).toFixed(2)}</div>
                    </div>
                </div>
            `;
            toast.style.cssText = `
                position:fixed; top:24px; right:24px; z-index:99999;
                background: linear-gradient(135deg, #16a34a, #15803d);
                color:white; padding:16px 22px; border-radius:14px;
                font-family:'Segoe UI',sans-serif;
                box-shadow: 0 8px 32px rgba(22,163,74,0.4);
                transform: translateX(120%);
                transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
                min-width: 280px;
            `;
            document.body.appendChild(toast);

            requestAnimationFrame(() => {
                requestAnimationFrame(() => { toast.style.transform = 'translateX(0)'; });
            });

            setTimeout(() => {
                toast.style.transform = 'translateX(120%)';
                setTimeout(() => toast.remove(), 400);
            }, 4000);
        }

        // Delete Payment Receipt (individual payment)
        function deletePaymentReceipt(paymentId) {
            if (!confirm('Are you sure you want to delete this payment receipt?\n\nThis will unlock the invoice for editing.')) {
                return;
            }

            fetch(`/reports/payment/${paymentId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const historyId = data.history_id;
                    const title = document.getElementById('modal-title');
                    if (title) title.textContent = 'Generate Invoice';
                    
                    showDeleteSuccessToast();
                    
                    if (historyId) {
                        setTimeout(() => openInvoiceModal(historyId), 800);
                    } else {
                        closeInvoiceModal();
                        setTimeout(() => window.location.reload(), 500);
                    }
                } else {
                    showErrorModal(data.message, 'Delete Failed', 'Could not delete receipt');
                }
            })
            .catch(error => {
                showErrorModal('Network error. Please try again.', 'Connection Error', '');
            });
        }

    // Show beautiful delete confirmation modal
    function showDeleteConfirmationModal(invoiceId) {
        // Fetch invoice details first
        fetch(`/reports/receipt/${invoiceId}/ajax`, {
            method: 'GET',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Parse HTML to get payment details (or use data directly if available)
                const modal = document.getElementById('deleteConfirmModal');
                
                // Set invoice number if available
                const invoiceNumEl = document.getElementById('deleteModalInvoiceNum');
                if (invoiceNumEl && data.invoice_number) {
                    invoiceNumEl.textContent = data.invoice_number;
                }
                
                // Show modal
                modal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            }
        })
        .catch(() => {
            // Show modal anyway with default values
            const modal = document.getElementById('deleteConfirmModal');
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        });
    }

    function closeDeleteConfirmModal() {
        const modal = document.getElementById('deleteConfirmModal');
        modal.classList.add('hidden');
        document.body.style.overflow = '';
    }

    // Execute the actual delete
    function executeDeleteLastPayment() {
        const invoiceId = window._currentInvoiceIdForDelete;
        
        if (!invoiceId) {
            showErrorModal('Invoice ID not found', 'Error', 'Please try again');
            return;
        }

        // Disable button and show loading
        const deleteBtn = document.querySelector('[onclick="executeDeleteLastPayment()"]');
        const originalText = deleteBtn.innerHTML;
        deleteBtn.disabled = true;
        deleteBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Deleting...';

        // Close confirmation modal
        closeDeleteConfirmModal();

        // Show loading toast
        const loadingToast = document.createElement('div');
        loadingToast.innerHTML = `
            <div class="flex items-center gap-3">
                <i class="fas fa-spinner fa-spin text-red-500 text-xl"></i>
                <div>
                    <div class="font-semibold text-gray-800">Deleting Receipt...</div>
                    <div class="text-sm text-gray-500">Please wait</div>
                </div>
            </div>
        `;
        loadingToast.style.cssText = `
            position: fixed; top: 24px; right: 24px; z-index: 99999;
            background: white; color: #374151; padding: 16px 24px; border-radius: 12px;
            font-family: 'Segoe UI', sans-serif; box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            border-left: 4px solid #ef4444; min-width: 280px;
            animation: slideInRight 0.3s ease;
        `;
        document.body.appendChild(loadingToast);

        // ✅ CORRECTED URL - No leading slash issue
        fetch(`{{ url('reports/invoice') }}/${invoiceId}/delete-last-payment`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json().then(data => ({ status: response.status, body: data })))
        .then(({ status, body }) => {
            if (status === 403 || !body.success) {
                throw new Error(body.message || 'Access Denied');
            }
            return body;
        })
        .then(data => {
            loadingToast.remove();
            
            if (data.success) {
                // Show success modal (ERP styled)
                showDeleteSuccessModal(data.message, data.remaining_balance);
                
                // Refresh after delay
                setTimeout(() => {
                    window.location.reload();
                }, 2000);
            } else {
                showErrorModal(data.message || 'Failed to delete receipt', 'Delete Failed', 'Please try again');
                deleteBtn.disabled = false;
                deleteBtn.innerHTML = originalText;
            }
        })
        .catch(error => {
            loadingToast.remove();
            console.error('Delete error:', error);
            showErrorModal('Network error or route not found. Please check console.', 'Connection Error', '');
            deleteBtn.disabled = false;
            deleteBtn.innerHTML = originalText;
        });
    }

    // Beautiful success modal after delete
    function showDeleteSuccessModal(message, remainingBalance) {
        const modal = document.createElement('div');
        modal.id = 'deleteSuccessModal';
        modal.className = 'fixed inset-0 z-50 overflow-y-auto';
        modal.innerHTML = `
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 bg-gray-900 bg-opacity-60 transition-opacity backdrop-blur-sm"></div>
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
                <div class="relative inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full">
                    <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-6 text-center">
                        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-check text-white text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-white">Deleted Successfully!</h3>
                    </div>
                    <div class="p-6 text-center">
                        <p class="text-gray-600 mb-4">${message}</p>
                        ${remainingBalance > 0 ? `
                            <div class="bg-orange-50 rounded-lg p-3 mb-4 border border-orange-200">
                                <p class="text-sm text-orange-700">Remaining Balance: <span class="font-bold">₹${parseFloat(remainingBalance).toLocaleString('en-IN', {minimumFractionDigits: 2})}</span></p>
                            </div>
                        ` : `
                            <div class="bg-green-50 rounded-lg p-3 mb-4 border border-green-200">
                                <p class="text-sm text-green-700">Invoice is now fully unlocked</p>
                            </div>
                        `}
                        <button onclick="document.getElementById('deleteSuccessModal').remove(); window.location.reload();" 
                                class="w-full py-3 bg-green-600 text-white rounded-xl hover:bg-green-700 font-semibold transition-colors">
                            Continue
                        </button>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
    }

        // Payment functions
        function submitPayment() {
            const form = document.getElementById('paymentForm');
            if (!form) { alert('Payment form not found'); return; }

            const formData  = new FormData(form);
            const submitBtn = document.querySelector('[onclick="submitPayment()"]');

            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Processing...';
            }

            fetch('{{ url('super-admin/reports/payment/record') }}', {
                method: 'POST',
                body:   formData,
                headers: {
                    'X-CSRF-TOKEN':     '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept':           'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window._lastPaidInvoiceId = data.invoice_id;
                    window._lastPaidPaymentId = data.payment_id;
                    window._isPartialPayment = data.balance_remaining > 0;

                    const modal   = document.getElementById('paymentSuccessModal');
                    const invNum  = document.getElementById('paymentInvoiceNumber');
                    const amtPaid = document.getElementById('paymentAmountPaid');
                    const balEl   = document.getElementById('paymentBalance');

                    if (invNum)  invNum.textContent  = data.invoice_number || '-';
                    if (amtPaid) amtPaid.textContent = '₹' + parseFloat(data.amount_paid)
                        .toLocaleString('en-IN', {minimumFractionDigits: 2});

                    const bal = parseFloat(data.balance_remaining);
                    if (balEl) {
                        if (bal <= 0) {
                            balEl.textContent = 'Fully Paid ✓';
                            balEl.style.color = '#16a34a';
                        } else {
                            balEl.textContent = '₹' + bal.toLocaleString('en-IN', {minimumFractionDigits: 2}) + ' remaining';
                            balEl.style.color = '#dc2626';
                        }
                    }

                    if (modal) {
                        modal.classList.remove('hidden');
                        document.body.style.overflow = 'hidden';
                    }
                } else {
                    showErrorModal(data.message || 'Payment failed', 'Payment Error', 'Please try again');
                }
            })
            .catch(() => {
                showErrorModal('Network error. Please try again.', 'Connection Error', '');
            })
            .finally(() => {
                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = '<i class="fas fa-check mr-2"></i>Record Payment';
                }
            });
        }

        function closePaymentSuccessModal() {
            const modal = document.getElementById('paymentSuccessModal');
            if (modal) {
                modal.classList.add('hidden');
            }
            document.body.style.overflow = '';
        }

           // ✅ FIXED: Payment success ke baad page reload with delay
        function closePaymentSuccessModalAndReload() {
            closePaymentSuccessModal();
            // Show loading indicator
            const loadingToast = document.createElement('div');
            loadingToast.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Refreshing page...';
            loadingToast.style.cssText = `
                position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
                background: #3b82f6; color: white; padding: 16px 24px; border-radius: 8px;
                z-index: 99999; font-weight: 600;
            `;
            document.body.appendChild(loadingToast);
            
            // Reload after short delay
            setTimeout(() => {
                window.location.reload();
            }, 500);
        }

        // ✅ FIXED: Close payment and open receipt, then reload
        function closePaymentAndOpenReceipt() {
            closePaymentSuccessModal();
            
            if (window._lastPaidInvoiceId) {
                // Show loading indicator
                const loadingToast = document.createElement('div');
                loadingToast.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Loading receipts...';
                loadingToast.style.cssText = `
                    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
                    background: #3b82f6; color: white; padding: 16px 24px; border-radius: 8px;
                    z-index: 99999; font-weight: 600;
                `;
                document.body.appendChild(loadingToast);
                
                // Fetch and print all receipts
                fetch(`/super-admin/reports/receipt/${window._lastPaidInvoiceId}/print-all`, {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    loadingToast.remove();
                    
                    if (data.success && data.html) {
                        // Open print window with all receipts
                        const win = window.open('', '_blank', 'width=900,height=700,scrollbars=yes');
                        if (!win) {
                            alert('Please allow popups to print receipts');
                            window.location.reload(); // Reload anyway
                            return;
                        }
                        
                        win.document.write(data.html);
                        win.document.close();
                        
                        // ✅ Reload page after print window opens
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        alert(data.message || 'Could not load receipts');
                        window.location.reload(); // Reload anyway
                    }
                })
                .catch(error => {
                    loadingToast.remove();
                    console.error('Error:', error);
                    window.location.reload(); // Reload on error too
                });
            } else {
                window.location.reload();
            }
        }

           // ✅ NEW: Auto-refresh page after invoice save
    function closeSuccessModalAndReload() {
        const modal = document.getElementById('successModal');
        if (modal) modal.classList.add('hidden');
        document.body.style.overflow = '';
        
        // Show loading toast
        const loadingToast = document.createElement('div');
        loadingToast.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Refreshing...';
        loadingToast.style.cssText = `
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: #3b82f6; color: white; padding: 16px 24px; border-radius: 8px;
            z-index: 99999; font-weight: 600;
        `;
        document.body.appendChild(loadingToast);
        
        // Reload page
        setTimeout(() => {
            window.location.reload();
        }, 500);
    }

    // ✅ FIXED: Payment success with auto-refresh
    function closePaymentSuccessModalAndReload() {
        closePaymentSuccessModal();
        
        // Show loading and reload
        const loadingToast = document.createElement('div');
        loadingToast.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Refreshing...';
        loadingToast.style.cssText = `
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: #3b82f6; color: white; padding: 16px 24px; border-radius: 8px;
            z-index: 99999; font-weight: 600;
        `;
        document.body.appendChild(loadingToast);
        
        setTimeout(() => {
            window.location.reload();
        }, 500);
    }

    // ✅ FIXED: Print receipt then auto-refresh
    function closePaymentAndOpenReceipt() {
        closePaymentSuccessModal();
        
        if (window._lastPaidInvoiceId) {
            const loadingToast = document.createElement('div');
            loadingToast.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Loading receipts...';
            loadingToast.style.cssText = `
                position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
                background: #3b82f6; color: white; padding: 16px 24px; border-radius: 8px;
                z-index: 99999; font-weight: 600;
            `;
            document.body.appendChild(loadingToast);
            
            fetch(`/super-admin/reports/receipt/${window._lastPaidInvoiceId}/print-all`, {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                loadingToast.remove();
                
                if (data.success && data.html) {
                    const win = window.open('', '_blank', 'width=900,height=700,scrollbars=yes');
                    if (!win) {
                        alert('Please allow popups to print receipts');
                        window.location.reload();
                        return;
                    }
                    
                    win.document.write(data.html);
                    win.document.close();
                    
                    // 🆕 AUTO-REFRESH after print window opens
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    window.location.reload();
                }
            })
            .catch(error => {
                loadingToast.remove();
                console.error('Error:', error);
                window.location.reload();
            });
        } else {
            window.location.reload();
        }
    }
        // ✅ NEW: Print all receipts from main table button + refresh page
        function printAllReceiptsAndRefresh(invoiceId) {
            // Show loading indicator
            const loadingToast = document.createElement('div');
            loadingToast.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Loading receipts...';
            loadingToast.style.cssText = `
                position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
                background: #3b82f6; color: white; padding: 16px 24px; border-radius: 8px;
                z-index: 99999; font-weight: 600;
            `;
            document.body.appendChild(loadingToast);
            
            // Fetch and print all receipts using the PRINT-ALL endpoint
            fetch(`/super-admin/reports/receipt/${invoiceId}/print-all`, {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                loadingToast.remove();
                
                if (data.success && data.html) {
                    // Open print window with all receipts
                    const win = window.open('', '_blank', 'width=900,height=700,scrollbars=yes');
                    if (!win) {
                        alert('Please allow popups to print receipts');
                        return;
                    }
                    
                    win.document.write(data.html);
                    win.document.close();
                    
                    // ✅ Refresh page after print window opens
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    alert(data.message || 'Could not load receipts');
                    window.location.reload();
                }
            })
            .catch(error => {
                loadingToast.remove();
                console.error('Error:', error);
                // Fallback to modal view
                openReceiptModal(invoiceId);
            });
        }

        // Single payment print (for individual receipt buttons in payment form)
        function printSinglePayment(paymentId, invoiceNumber) {
            fetch(`{{ url('super-admin/reports/payment') }}/${paymentId}/receipt`, {
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    openPrintWindow(data.html, 'Receipt-' + invoiceNumber);
                }
            })
            .catch(() => {
                alert('Could not load receipt for printing');
            });
        }

        // Helper to open print window
        function openPrintWindow(html, title) {
            const win = window.open('', '_blank', 'width=900,height=700,scrollbars=yes');
            if (!win) { 
                alert('Please allow popups'); 
                return; 
            }

            let styles = '';
            try {
                Array.from(document.styleSheets).forEach(sheet => {
                    try { 
                        Array.from(sheet.cssRules || []).forEach(rule => { 
                            styles += rule.cssText + '\n'; 
                        }); 
                    } catch(e) {}
                });
            } catch(e) {}

            win.document.write(`<!DOCTYPE html>
    <html>
    <head>
        <title>${title}</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
        <style>
            @page { size: A4; margin: 10mm; }
            ${styles}
            body { background: white !important; padding: 20px; font-family: 'Segoe UI', sans-serif; }
            .no-print, .action-buttons, button { display: none !important; }
        </style>
    </head>
    <body>
        ${html}
        <script>
            window.onload = function() {
                setTimeout(function() {
                    window.print();
                }, 400);
            };
        <\/script>
    </body>
    </html>`);
            win.document.close();
        }



        // ✅ NEW: Open receipt modal with delete mode (stores invoice ID for delete)
    function openReceiptModalWithDelete(invoiceId) {
        // Store that we want to show delete option
        window._receiptModalMode = 'delete';
        window._currentInvoiceIdForDelete = invoiceId;
        
        // Open the standard receipt modal
        openReceiptModal(invoiceId);
    }

    // ✅ UPDATED: Override printReceipt to handle delete mode
    function printReceipt() {
        var receiptContent = document.getElementById('receiptContent');
        if (!receiptContent) {
            alert('Receipt content not found');
            return;
        }
        
        // Check if we're in delete mode
        if (window._receiptModalMode === 'delete') {
            // Show delete confirmation instead of print
            if (confirm('Are you sure you want to DELETE the last payment receipt?\n\nThis will unlock the invoice for editing.')) {
                deleteLastPaymentFromModal();
            }
            return;
        }
        
        // Normal print flow
        var contentClone = receiptContent.cloneNode(true);
        
        var actionButtons = contentClone.querySelector('.action-buttons');
        if (actionButtons) actionButtons.remove();
        
        contentClone.querySelectorAll('input[type="hidden"]').forEach(function(el) { 
            el.remove(); 
        });

        var styles = '';
        try {
            Array.from(document.styleSheets).forEach(function(sheet) {
                try {
                    Array.from(sheet.cssRules || sheet.rules || []).forEach(function(rule) {
                        styles += rule.cssText + '\n';
                    });
                } catch(e) {}
            });
        } catch(e) {}

        var printWindow = window.open('', '_blank', 'width=900,height=700,scrollbars=yes');
        if (!printWindow) {
            alert('Please allow popups to print the receipt');
            return;
        }

        printWindow.document.open();
        printWindow.document.write(`<!DOCTYPE html>
    <html>
    <head>
        <title>Payment Receipt</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
        <style>
            @page { size: A4; margin: 10mm; }
            ${styles}
            body { background: white !important; padding: 20px; }
            .receipt-container { box-shadow: none !important; max-width: 100% !important; }
            .no-print { display: none !important; }
        </style>
    </head>
    <body>
        <div class="receipt-container">
            ${contentClone.innerHTML}
        </div>
        <script>
            window.onload = function() { 
                setTimeout(function() { window.print(); }, 400); 
            };
        <\/script>
    </body>
    </html>`);
        printWindow.document.close();
    }

    // ✅ NEW: Delete last payment from within modal
    function deleteLastPaymentFromModal() {
        const invoiceId = window._currentInvoiceIdForDelete || window._lastInvoiceIdInModal;
        
        if (!invoiceId) {
            alert('Invoice ID not found');
            return;
        }

        // Show loading
        const loadingToast = document.createElement('div');
        loadingToast.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Deleting...';
        loadingToast.style.cssText = `
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: #dc2626; color: white; padding: 16px 24px; border-radius: 8px;
            z-index: 99999; font-weight: 600;
        `;
        document.body.appendChild(loadingToast);

        fetch(`/reports/invoice/${invoiceId}/delete-last-payment`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            loadingToast.remove();
            
            if (data.success) {
                // Show success
                const toast = document.createElement('div');
                toast.innerHTML = `<i class="fas fa-check-circle mr-2"></i>${data.message}`;
                toast.style.cssText = `
                    position: fixed; top: 24px; right: 24px; z-index: 99999;
                    background: #16a34a; color: white; padding: 16px 24px; border-radius: 8px;
                    font-weight: 600; box-shadow: 0 4px 20px rgba(0,0,0,0.2);
                `;
                document.body.appendChild(toast);
                
                // Reset mode
                window._receiptModalMode = 'normal';
                window._currentInvoiceIdForDelete = null;
                
                // Close modal and refresh
                closeInvoiceModal();
                
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                alert(data.message || 'Failed to delete receipt');
            }
        })
        .catch(error => {
            loadingToast.remove();
            console.error('Error:', error);
            alert('Network error. Please try again.');
        });
    }

    // ✅ WORKING: Direct delete function for "Delete Last Payment" button in receipt modal
function deleteLastPaymentDirectly() {
    // Get invoice ID from hidden input in receipt modal
    const invoiceId = document.getElementById('receipt_invoice_id')?.value;
    const lastPaymentId = document.getElementById('last_payment_id')?.value;
    
    if (!invoiceId) {
        alert('Invoice ID not found. Please close modal and try again.');
        return;
    }

    // Show beautiful ERP-styled confirmation modal
    showDeleteConfirmationModal(invoiceId, lastPaymentId);
}

function showDeleteConfirmationModal(invoiceId, paymentId) {
    window._currentInvoiceIdForDelete = invoiceId;
    window._currentPaymentIdForDelete = paymentId;
    
    const modal = document.getElementById('deleteConfirmModal');
    
    // ✅ FIXED: Get the LAST payment details from the receipt modal
    const allReceipts = document.querySelectorAll('.receipt-wrapper');
    const lastReceipt = allReceipts[allReceipts.length - 1]; // Get last one
    
    // Get receipt number from last receipt
    const receiptNumEl = lastReceipt?.querySelector('.receipt-details strong');
    const receiptNum = receiptNumEl?.textContent || '#RCP-' + paymentId;
    
    // Get amount from last receipt summary
    const amountEl = lastReceipt?.querySelector('.summary-row.total span:last-child');
    const amount = amountEl?.textContent || '₹0.00';
    
    // Get date from last receipt
    const dateEl = lastReceipt?.querySelector('.receipt-details p:nth-child(3)');
    const date = dateEl?.textContent.replace('Date: ', '') || 'N/A';
    
    // Update modal
    const invoiceNumEl = document.getElementById('deleteModalInvoiceNum');
    const receiptDisplayEl = document.getElementById('deleteModalReceiptNum') || document.getElementById('deleteModalInvoiceNum');
    const amountDisplayEl = document.getElementById('deleteModalAmount');
    
    if (invoiceNumEl) invoiceNumEl.textContent = receiptNum;
    if (amountDisplayEl) amountDisplayEl.textContent = amount;
    
    // Add receipt number if element exists
    const receiptToDeleteEl = document.getElementById('deleteModalReceiptNum');
    if (receiptToDeleteEl) receiptToDeleteEl.textContent = receiptNum;
    
    // Show modal
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeDeleteConfirmModal() {
    const modal = document.getElementById('deleteConfirmModal');
    modal.classList.add('hidden');
    document.body.style.overflow = '';
}

// Execute the actual delete
function executeDeleteLastPayment() {
    const invoiceId = window._currentInvoiceIdForDelete;
    const paymentId = window._currentPaymentIdForDelete;
    
    if (!invoiceId) {
        showErrorModal('Invoice ID not found', 'Error', 'Please try again');
        return;
    }

    // Close confirmation modal
    closeDeleteConfirmModal();

    // Show loading toast
    const loadingToast = document.createElement('div');
    loadingToast.innerHTML = `
        <div class="flex items-center gap-3">
            <i class="fas fa-spinner fa-spin text-red-500 text-xl"></i>
            <div>
                <div class="font-semibold text-gray-800">Deleting Receipt...</div>
                <div class="text-sm text-gray-500">Please wait</div>
            </div>
        </div>
    `;
    loadingToast.style.cssText = `
        position: fixed; top: 24px; right: 24px; z-index: 99999;
        background: white; color: #374151; padding: 16px 24px; border-radius: 12px;
        font-family: 'Segoe UI', sans-serif; box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        border-left: 4px solid #ef4444; min-width: 280px;
        animation: slideInRight 0.3s ease;
    `;
    document.body.appendChild(loadingToast);

    // ✅ FIXED URL: Use the correct route with super-admin prefix
    // Try payment ID first (more specific), then invoice ID
    const url = paymentId 
        ? `{{ url('super-admin/reports/payment') }}/${paymentId}`
        : `{{ url('super-admin/reports/invoice') }}/${invoiceId}/delete-last-payment`;

    fetch(url, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        loadingToast.remove();
        
        if (data.success) {
            // Show success modal
            showDeleteSuccessModal(data.message, data.remaining_balance || 0);
            
            // Close invoice modal after delay
            setTimeout(() => {
                closeInvoiceModal();
                window.location.reload();
            }, 2000);
        } else {
            showErrorModal(data.message || 'Failed to delete receipt', 'Delete Failed', 'Please try again');
        }
    })
    .catch(error => {
        loadingToast.remove();
        console.error('Delete error:', error);
        showErrorModal('Failed to delete. Error: ' + error.message, 'Connection Error', 'Please check console');
    });
}

// Beautiful success modal after delete
function showDeleteSuccessModal(message, remainingBalance) {
    const modalHtml = `
        <div id="deleteSuccessModal" class="fixed inset-0 z-50 overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 bg-gray-900 bg-opacity-60 transition-opacity backdrop-blur-sm" onclick="this.parentElement.parentElement.remove()"></div>
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
                <div class="relative inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full">
                    <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-6 text-center">
                        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-check text-white text-3xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-white">Deleted Successfully!</h3>
                    </div>
                    <div class="p-6 text-center">
                        <p class="text-gray-600 mb-4">${message}</p>
                        ${remainingBalance > 0 ? `
                            <div class="bg-orange-50 rounded-lg p-3 mb-4 border border-orange-200">
                                <p class="text-sm text-orange-700">Remaining Balance: <span class="font-bold">₹${parseFloat(remainingBalance).toLocaleString('en-IN', {minimumFractionDigits: 2})}</span></p>
                            </div>
                        ` : `
                            <div class="bg-green-50 rounded-lg p-3 mb-4 border border-green-200">
                                <p class="text-sm text-green-700"><i class="fas fa-unlock mr-1"></i> Invoice is now unlocked for editing</p>
                            </div>
                        `}
                        <button onclick="document.getElementById('deleteSuccessModal').remove(); window.location.reload();" 
                                class="w-full py-3 bg-green-600 text-white rounded-xl hover:bg-green-700 font-semibold transition-colors shadow-lg shadow-green-200">
                            <i class="fas fa-check mr-2"></i>Continue
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing if any
    const existing = document.getElementById('deleteSuccessModal');
    if (existing) existing.remove();
    
    document.body.insertAdjacentHTML('beforeend', modalHtml);
}

// 🆕 ERP-STYLED DELETE CONFIRMATION MODAL
    let invoiceToDelete = null;

    function confirmDeleteInvoice(invoiceId) {
        invoiceToDelete = invoiceId;
        
        // Create modal if not exists
        if (!document.getElementById('erpDeleteModal')) {
            const modalHTML = `
            <div id="erpDeleteModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
                <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity backdrop-blur-sm" onclick="closeErpDeleteModal()"></div>
                    <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
                    <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border border-red-100">
                        <div class="bg-gradient-to-r from-red-600 to-red-700 px-6 py-5">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center mr-4">
                                    <i class="fas fa-exclamation-triangle text-white text-xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold text-white" id="modal-title">Delete Invoice?</h3>
                                    <p class="text-red-100 text-sm mt-1">This action cannot be undone</p>
                                </div>
                            </div>
                        </div>
                        <div class="px-6 py-5 bg-white">
                            <div class="bg-red-50 border-l-4 border-red-500 rounded-r-lg p-4 mb-4">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <i class="fas fa-info-circle text-red-500 mt-0.5"></i>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm text-red-700 font-medium">You are about to permanently delete:</p>
                                        <ul class="mt-2 text-sm text-red-600 space-y-1 list-disc list-inside">
                                            <li>Invoice record</li>
                                            <li>All associated payment data</li>
                                            <li>Subscription history link</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-gray-50 rounded-xl p-4 mb-4 border border-gray-200">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm text-gray-500">Invoice ID:</span>
                                    <span class="text-sm font-bold text-gray-800 font-mono">#INV-${invoiceId}</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-500">School:</span>
                                    <span class="text-sm font-semibold text-gray-800" id="deleteSchoolName">Loading...</span>
                                </div>
                            </div>
                            <div class="flex gap-3">
                                <button type="button" onclick="closeErpDeleteModal()" class="flex-1 py-3 px-4 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 font-semibold transition-all flex items-center justify-center gap-2">
                                    <i class="fas fa-times"></i>Cancel
                                </button>
                                <button type="button" onclick="executeErpDelete()" class="flex-1 py-3 px-4 bg-gradient-to-r from-red-600 to-red-700 text-white rounded-xl hover:from-red-700 hover:to-red-800 font-semibold transition-all shadow-lg shadow-red-200 flex items-center justify-center gap-2">
                                    <i class="fas fa-trash-alt"></i>Yes, Delete
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;
            document.body.insertAdjacentHTML('beforeend', modalHTML);
        }
        
        // Show modal
        document.getElementById('erpDeleteModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        
        // Fetch school name for display
        const row = document.querySelector(`button[onclick="confirmDeleteInvoice(${invoiceId})"]`).closest('tr');
        const schoolName = row.querySelector('td:first-child .font-medium')?.textContent || 'Unknown School';
        document.getElementById('deleteSchoolName').textContent = schoolName;
    }

    function closeErpDeleteModal() {
        const modal = document.getElementById('erpDeleteModal');
        if (modal) {
            modal.classList.add('hidden');
        }
        document.body.style.overflow = '';
        invoiceToDelete = null;
    }

    function executeErpDelete() {
        if (!invoiceToDelete) return;
        
        const btn = document.querySelector('#erpDeleteModal button[onclick="executeErpDelete()"]');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Deleting...';
        
        fetch(`{{ url('super-admin/reports/invoice') }}/${invoiceToDelete}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            closeErpDeleteModal();
            if (data.success) {
                showErpToast('success', 'Invoice Deleted', data.message);
                setTimeout(() => window.location.reload(), 1500);
            } else {
                showErpToast('error', 'Delete Failed', data.message);
            }
        })
        .catch(error => {
            closeErpDeleteModal();
            showErpToast('error', 'Error', 'Network error. Please try again.');
            console.error('Delete error:', error);
        });
    }

    // 🆕 ERP Toast Notification
    function showErpToast(type, title, message) {
        const toast = document.createElement('div');
        const colors = type === 'success' 
            ? 'from-green-500 to-green-600' 
            : 'from-red-500 to-red-600';
        const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
        
        toast.innerHTML = `
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                    <i class="fas ${icon} text-white"></i>
                </div>
                <div>
                    <div class="font-bold text-white">${title}</div>
                    <div class="text-sm text-white text-opacity-90">${message}</div>
                </div>
            </div>
        `;
        
        toast.style.cssText = `
            position: fixed; top: 24px; right: 24px; z-index: 99999;
            background: linear-gradient(135deg, #dc2626, #b91c1c);  // RED GRADIENT
            color: white; padding: 16px 24px; border-radius: 16px;
            font-family: 'Segoe UI', sans-serif; min-width: 320px;
            box-shadow: 0 10px 40px rgba(220, 38, 38, 0.3);
            transform: translateX(120%);
            transition: transform 0.4s ease;
        `;
        
        document.body.appendChild(toast);
        
        requestAnimationFrame(() => {
            toast.style.transform = 'translateX(0)';
        });
        
        setTimeout(() => {
            toast.style.transform = 'translateX(120%)';
            setTimeout(() => toast.remove(), 400);
        }, 4000);
    }

        // 🆕 DELETE SUBSCRIPTION FUNCTIONS
    let subscriptionToDelete = null;

    function confirmDeleteSubscription(historyId) {
        subscriptionToDelete = historyId;
        
        // Get row data for display
        const row = document.querySelector(`button[onclick="confirmDeleteSubscription(${historyId})"]`).closest('tr');
        const schoolName = row.querySelector('td:first-child .font-medium')?.textContent || 'Unknown School';
        const period = row.querySelector('td:nth-child(3)')?.textContent?.trim() || '-';
        const amount = row.querySelector('td:nth-child(5) .font-semibold')?.textContent || '-';
        
        document.getElementById('deleteSubSchoolName').textContent = schoolName;
        document.getElementById('deleteSubPeriod').textContent = period;
        document.getElementById('deleteSubAmount').textContent = amount;
        
        const modal = document.getElementById('deleteSubscriptionModal');
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeDeleteSubscriptionModal() {
        const modal = document.getElementById('deleteSubscriptionModal');
        modal.classList.add('hidden');
        document.body.style.overflow = '';
        subscriptionToDelete = null;
    }

    function executeDeleteSubscription() {
        if (!subscriptionToDelete) return;
        
        const btn = document.querySelector('#deleteSubscriptionModal button[onclick="executeDeleteSubscription()"]');
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Deleting...';
        
        fetch(`{{ url('super-admin/reports/history') }}/${subscriptionToDelete}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            closeDeleteSubscriptionModal();
            
            if (data.success) {
                showErpToast('success', 'Deleted Successfully', data.message);
                setTimeout(() => window.location.reload(), 1500);
            } else {
                showErpToast('error', 'Delete Failed', data.message);
            }
        })
        .catch(error => {
            closeDeleteSubscriptionModal();
            showErpToast('error', 'Error', 'Network error. Please try again.');
            console.error('Delete error:', error);
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = originalText;
        });
    }

        // 🆕 DELETE CREDIT NOTE CONFIRMATION
    let creditNoteToDelete = null;

    function confirmDeleteCreditNote(invoiceId) {
        creditNoteToDelete = invoiceId;
        
        // Create modal if not exists
        if (!document.getElementById('creditNoteDeleteModal')) {
                        const modalHTML = `
            <div id="creditNoteDeleteModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
                <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity backdrop-blur-sm" onclick="closeCreditNoteDeleteModal()"></div>
                    <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"></span>
                    <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border border-purple-100">
                        <div class="bg-gradient-to-r from-purple-600 to-purple-700 px-6 py-5">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center mr-4">
                                    <i class="fas fa-credit-card text-white text-xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold text-white" id="modal-title">Delete Credit Note?</h3>
                                    <p class="text-purple-100 text-sm mt-1">This action will affect your payment records</p>
                                </div>
                            </div>
                        </div>
                        <div class="px-6 py-5 bg-white">
                            <div class="bg-red-50 border-l-4 border-red-500 rounded-r-lg p-4 mb-4">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <i class="fas fa-exclamation-triangle text-red-500 mt-0.5"></i>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm text-red-700 font-bold">CRITICAL WARNING:</p>
                                        <ul class="mt-2 text-sm text-red-600 space-y-1 list-disc list-inside">
                                            <li>The <b>Payment Receipt</b> that generated this Credit Note will also be <b>Permanently Deleted</b>.</li>
                                            <li>The advance amount will be removed from the school's balance.</li>
                                            <li>Next invoices will not have this amount adjusted.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="flex gap-3">
                                <button type="button" onclick="closeCreditNoteDeleteModal()" class="flex-1 py-3 px-4 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 font-semibold transition-all flex items-center justify-center gap-2">
                                    <i class="fas fa-times"></i>Cancel
                                </button>
                                <button type="button" onclick="executeCreditNoteDelete()" class="flex-1 py-3 px-4 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-xl hover:from-purple-700 hover:to-purple-800 font-semibold transition-all shadow-lg shadow-purple-200 flex items-center justify-center gap-2">
                                    <i class="fas fa-trash-alt"></i>Yes, Delete Both
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;

            document.body.insertAdjacentHTML('beforeend', modalHTML);
        }
        
        // Show modal
        document.getElementById('creditNoteDeleteModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeCreditNoteDeleteModal() {
        const modal = document.getElementById('creditNoteDeleteModal');
        if (modal) {
            modal.classList.add('hidden');
        }
        document.body.style.overflow = '';
        creditNoteToDelete = null;
    }

    function executeCreditNoteDelete() {
        if (!creditNoteToDelete) return;
        
        const btn = document.querySelector('#creditNoteDeleteModal button[onclick="executeCreditNoteDelete()"]');
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Deleting...';
        
        fetch(`{{ url('super-admin/reports/invoice') }}/${creditNoteToDelete}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            closeCreditNoteDeleteModal();
            
            if (data.success) {
                showErpToast('success', 'Credit Note Deleted', data.message);
                setTimeout(() => window.location.reload(), 1500);
            } else {
                showErpToast('error', 'Delete Failed', data.message);
            }
        })
        .catch(error => {
            closeCreditNoteDeleteModal();
            showErpToast('error', 'Error', 'Network error. Please try again.');
            console.error('Delete error:', error);
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = originalText;
        });
    }
    </script>

    @endpush