@extends('super_admin.layouts.master')

    @section('title', 'Payment Receipt')
    @section('page_title', 'Payment Receipt #' . $payment->invoice_number)

    @section('content')

    <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
        <!-- Receipt Header -->
        <div class="bg-gradient-to-r from-green-600 to-green-700 px-8 py-6 text-white">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-3xl font-bold">PAYMENT RECEIPT</h1>
                    <p class="text-green-100 mt-1">SchoolERP Solutions</p>
                </div>
                <div class="text-right">
                    <p class="text-2xl font-bold">₹{{ number_format($payment->amount_paid, 2) }}</p>
                    <p class="text-green-100">Received</p>
                </div>
            </div>
        </div>

        <!-- Receipt Body -->
        <div class="p-8">
            <div class="grid grid-cols-2 gap-8 mb-8">
                <div>
                    <h3 class="text-gray-500 text-sm uppercase tracking-wide mb-2">School Details</h3>
                    <p class="font-bold text-lg">{{ $school->name }}</p>
                    <p class="text-gray-600">{{ $school->address }}</p>
                    <p class="text-gray-600">{{ $school->email }}</p>
                    <p class="text-gray-600">{{ $school->phone }}</p>
                </div>
                <div class="text-right">
                    <h3 class="text-gray-500 text-sm uppercase tracking-wide mb-2">Receipt Details</h3>
                    <p><span class="text-gray-600">Receipt No:</span> <span class="font-bold">RCP-{{ $payment->id }}</span></p>
                    <p><span class="text-gray-600">Invoice No:</span> <span class="font-bold">{{ $payment->invoice_number }}</span></p>
                    <p><span class="text-gray-600">Date:</span> <span class="font-bold">{{ \Carbon\Carbon::parse($payment->payment_date)->format('M d, Y') }}</span></p>
                    <p><span class="text-gray-600">Received By:</span> <span class="font-bold">{{ $receiver->name ?? 'Admin' }}</span></p>
                </div>
            </div>

            <!-- Payment Breakdown -->
            <table class="w-full mb-8">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Description</th>
                        <th class="px-4 py-3 text-right text-sm font-semibold text-gray-600">Amount</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    <tr>
                        <td class="px-4 py-3">Invoice Amount</td>
                        <td class="px-4 py-3 text-right">₹{{ number_format($payment->invoice_amount, 2) }}</td>
                    </tr>
                    @if($payment->previous_balance != 0)
                    <tr>
                        <td class="px-4 py-3">{{ $payment->previous_balance > 0 ? 'Previous Balance (Due)' : 'Previous Balance (Advance)' }}</td>
                        <td class="px-4 py-3 text-right {{ $payment->previous_balance > 0 ? 'text-red-600' : 'text-green-600' }}">
                            {{ $payment->previous_balance > 0 ? '+' : '' }}₹{{ number_format($payment->previous_balance, 2) }}
                        </td>
                    </tr>
                    @endif
                    <tr class="font-bold">
                        <td class="px-4 py-3">Total Payable</td>
                        <td class="px-4 py-3 text-right">₹{{ number_format($payment->total_payable, 2) }}</td>
                    </tr>
                    <tr class="bg-green-50">
                        <td class="px-4 py-3 font-bold text-green-700">Amount Paid</td>
                        <td class="px-4 py-3 text-right font-bold text-green-700">₹{{ number_format($payment->amount_paid, 2) }}</td>
                    </tr>
                    @if($payment->balance_remaining != 0)
                    <tr>
                        <td class="px-4 py-3 font-bold">{{ $payment->balance_remaining > 0 ? 'Balance Due' : 'Advance Credit' }}</td>
                        <td class="px-4 py-3 text-right font-bold {{ $payment->balance_remaining > 0 ? 'text-red-600' : 'text-green-600' }}">
                            ₹{{ number_format(abs($payment->balance_remaining), 2) }}
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>

            <!-- Payment Method -->
            <div class="bg-gray-50 rounded-lg p-4 mb-8">
                <p class="text-sm text-gray-600">Payment Method: <span class="font-bold uppercase">{{ str_replace('_', ' ', $payment->payment_method) }}</span></p>
                @if($payment->transaction_id)
                <p class="text-sm text-gray-600 mt-1">Transaction ID: <span class="font-bold">{{ $payment->transaction_id }}</span></p>
                @endif
                @if($payment->notes)
                <p class="text-sm text-gray-600 mt-1">Notes: {{ $payment->notes }}</p>
                @endif
            </div>

            <!-- Print Button -->
            <div class="text-center no-print">
                <button onclick="window.print()" class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                    <i class="fas fa-print mr-2"></i>Print Receipt
                </button>
                <a href="{{ route('super_admin.reports.index', ['school_id' => $payment->school_id]) }}" class="ml-3 px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Reports
                </a>
                &nbsp;&nbsp;
            <!-- DELETE BUTTON — sirf last payment ke liye show hoga -->
            <button type="button" 
                    onclick="deletePaymentReceipt({{ $payment->id }})" 
                    class="btn-delete"
                    style="display:inline-flex;align-items:center;gap:8px;padding:12px 30px;
                        background:#dc2626;color:white;border:none;border-radius:8px;
                        cursor:pointer;font-size:14px;font-weight:600;transition:all 0.3s;"
                    onmouseover="this.style.background='#b91c1c'"
                    onmouseout="this.style.background='#dc2626'">
                <i class="fas fa-trash"></i> Delete Receipt
            </button>
            
            </div>
</div>
        </div>
    </div>

    <style>
        @media print {
            .no-print { display: none; }
            body { background: white; }
        }
    </style>

    @endsection