@extends('layouts.parent')

@section('title', 'Fee Statements - Kidscholl')

@section('styles')
<style>
    .fees-header {
        background: linear-gradient(135deg, #FFECE5 0%, #FFF5F1 100%);
        border-radius: 24px;
        padding: 30px;
        margin-bottom: 30px;
        border-bottom: 4px solid var(--primary);
    }

    .alert-warning-custom {
        background-color: #fffbeb;
        border: 2px dashed #f59e0b;
        color: #92400e;
        border-radius: 18px;
        padding: 20px;
    }

    .fees-table th {
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #f1f5f9;
        background-color: #f8fafc;
    }

    .fees-table td {
        padding: 16px 12px;
    }

    .status-badge-custom {
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        font-size: 0.8rem;
        padding: 6px 16px;
        border-radius: 20px;
        text-transform: uppercase;
    }

    .status-paid {
        background-color: #d1fae5;
        color: #065f46;
        border: 1px solid #a7f3d0;
    }

    .status-unpaid {
        background-color: #fee2e2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }

    .btn-fee-action {
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        font-size: 0.85rem;
        border-radius: 30px;
        padding: 6px 18px;
        transition: all 0.2s ease;
    }

    .btn-fee-action:hover {
        transform: translateY(-2px);
    }
</style>
@endsection

@section('content')
<div class="fees-header">
    <div class="row align-items-center">
        <div class="col-md-9">
            <h2 class="text-danger mb-1"><i class="bi bi-credit-card-fill me-2"></i> School Fee Statements</h2>
            <p class="text-secondary mb-0">Track payment timelines, download invoices, and pay quarterly fees securely.</p>
        </div>
        <div class="col-md-3 text-md-end mt-3 mt-md-0">
            <span class="badge bg-white text-danger border border-2 border-danger rounded-pill px-3 py-2 fw-bold font-monospace">
                Session: 2025-2026
            </span>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="portal-card">
            <!-- Warning Alert if there are unpaid fees -->
            @php
                $unpaidCount = $fees->where('status', 'Unpaid')->count();
            @endphp
            @if($unpaidCount > 0)
                <div class="alert alert-warning-custom d-flex align-items-center mb-4" role="alert">
                    <i class="bi bi-exclamation-triangle-fill fs-4 me-3 text-warning"></i>
                    <div>
                        <strong class="text-dark">Pending Fee Reminder:</strong> You have <span class="fw-bold text-danger">{{ $unpaidCount }} unpaid fee invoice(s)</span> for {{ $student->name }}. Please submit the balance before the due dates to avoid administrative fines.
                    </div>
                </div>
            @endif

            <div class="table-responsive">
                <table class="table align-middle fees-table table-hover">
                    <thead>
                        <tr>
                            <th>Installment / Term</th>
                            <th>Amount</th>
                            <th>Due Date</th>
                            <th>Payment Status</th>
                            <th>Receipt Date</th>
                            <th class="text-end">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($fees as $fee)
                            @php
                                $statusClass = ($fee->status == 'Paid') ? 'status-paid' : 'status-unpaid';
                            @endphp
                            <tr style="border-bottom: 1px solid #f1f5f9;">
                                <td class="py-3">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-wallet2 text-primary fs-5 me-2.5"></i>
                                        <span class="fw-bold text-dark">{{ $fee->term }}</span>
                                    </div>
                                </td>
                                <td><strong class="text-primary fs-5">₹{{ number_format($fee->amount, 2) }}</strong></td>
                                <td class="text-secondary fw-bold">{{ \Carbon\Carbon::parse($fee->due_date)->format('d M Y') }}</td>
                                <td>
                                    <span class="status-badge-custom {{ $statusClass }}">
                                        {{ $fee->status }}
                                    </span>
                                </td>
                                <td class="text-secondary small fw-bold">
                                    {{ $fee->paid_date ? \Carbon\Carbon::parse($fee->paid_date)->format('d M Y') : 'N/A' }}
                                </td>
                                <td class="text-end">
                                    @if($fee->status == 'Paid')
                                        <a href="#" class="btn btn-outline-secondary btn-fee-action" onclick="alert('Downloading fee receipt PDF (Debug Mode)...'); return false;">
                                            <i class="bi bi-file-earmark-pdf-fill me-1"></i> Receipt
                                        </a>
                                    @else
                                        @if($razorpayEnabled && !empty($razorpayKeyId))
                                            <button class="btn btn-warning text-dark btn-fee-action pay-now-btn" data-id="{{ $fee->id }}">
                                                <i class="bi bi-credit-card me-1"></i> Pay Online
                                            </button>
                                        @else
                                            <button class="btn btn-secondary text-white btn-fee-action" disabled title="Online payment is currently disabled.">
                                                <i class="bi bi-credit-card me-1"></i> Pay Online
                                            </button>
                                        @endif
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Guidelines Notes -->
            <div class="mt-4 p-4 bg-light rounded-4 text-secondary small border">
                <h5 class="text-dark fw-bold mb-3"><i class="bi bi-shield-fill-exclamation text-warning me-1.5"></i> Fee Payment Guidelines</h5>
                <ul class="list-unstyled mb-0 d-flex flex-column gap-2">
                    <li class="d-flex align-items-start"><i class="bi bi-dot text-danger fs-4 lh-1"></i> <span>Late fee fines of ₹150 per day will apply if quarterly balances remain unpaid after the specified due date.</span></li>
                    <li class="d-flex align-items-start"><i class="bi bi-dot text-success fs-4 lh-1"></i> <span>Online receipt confirmations are updated instantly after digital gateway validation. Check logs for transaction records.</span></li>
                    <li class="d-flex align-items-start"><i class="bi bi-dot text-primary fs-4 lh-1"></i> <span>For structural disputes or scholarship adjustments, please contact the accounts department at the Main Campus desk.</span></li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@if($razorpayEnabled && !empty($razorpayKeyId))
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.pay-now-btn').forEach(button => {
        button.addEventListener('click', function() {
            const btn = this;
            const invoiceId = btn.getAttribute('data-id');
            const originalText = btn.innerHTML;
            
            // Disable button and show spinner
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Processing...';
            
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            
            let initiateUrl = "{{ route('parent.payment.initiate', ':id') }}";
            initiateUrl = initiateUrl.replace(':id', invoiceId);
            
            fetch(initiateUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                }
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => { throw err; });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    const options = {
                        "key": data.key,
                        "amount": data.amount,
                        "currency": data.currency,
                        "name": data.name,
                        "description": data.description,
                        "order_id": data.order_id,
                        "handler": function (response) {
                            verifyPayment(invoiceId, response, btn, originalText);
                        },
                        "prefill": {
                            "name": data.prefill.name,
                            "email": data.prefill.email,
                            "contact": data.prefill.contact
                        },
                        "notes": data.notes,
                        "theme": {
                            "color": "#FF6B6B"
                        },
                        "modal": {
                            "ondismiss": function() {
                                btn.disabled = false;
                                btn.innerHTML = originalText;
                            }
                        }
                    };
                    const rzp = new Razorpay(options);
                    rzp.open();
                } else {
                    alert(data.message || 'Error initiating payment.');
                    btn.disabled = false;
                    btn.innerHTML = originalText;
                }
            })
            .catch(error => {
                console.error('Initiation error:', error);
                alert(error.message || 'An error occurred during payment initiation.');
                btn.disabled = false;
                btn.innerHTML = originalText;
            });
        });
    });

    function verifyPayment(invoiceId, razorpayResponse, btn, originalText) {
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Verifying...';
        
        let verifyUrl = "{{ route('parent.payment.verify', ':id') }}";
        verifyUrl = verifyUrl.replace(':id', invoiceId);
        
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        
        fetch(verifyUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({
                razorpay_payment_id: razorpayResponse.razorpay_payment_id,
                razorpay_order_id: razorpayResponse.razorpay_order_id,
                razorpay_signature: razorpayResponse.razorpay_signature
            })
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(err => { throw err; });
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                alert('Payment received and verified successfully!');
                location.reload();
            } else {
                alert(data.message || 'Payment verification failed.');
                btn.disabled = false;
                btn.innerHTML = originalText;
            }
        })
        .catch(error => {
            console.error('Verification error:', error);
            alert(error.message || 'An error occurred during payment verification.');
            btn.disabled = false;
            btn.innerHTML = originalText;
        });
    }
});
</script>
@endif
@endsection