@extends('admin.layout.app')

@section('body')
<div class="card card-page p-3 shadow-sm">
    <h4>Payments for {{ $studentFee->student->name }} - {{ $studentFee->semester->name }}</h4>
    <p>{{ __('admin.net_fee') }}: {{ number_format($studentFee->net_amount,2) }} | Paid: {{ number_format($studentFee->paid_amount,2) }} | Outstanding: {{ number_format($studentFee->outstanding,2) }}</p>
    <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addPaymentModal">{{ __('admin.record_payment') }}</button>

    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr><th>{{ __('admin.receipt_no') }}</th><th>{{ __('admin.amount_2') }}</th><th>{{ __('admin.method') }}</th><th>{{ __('admin.date') }}</th><th>{{ __('admin.receipt') }}</th></tr>
            </thead>
            <tbody>
                @foreach($studentFee->payments as $p)
                <tr>
                    <td>{{ $p->receipt_no }}</td>
                    <td>{{ number_format($p->amount,2) }}</td>
                    <td>{{ $p->payment_method }}</td>
                    <td>{{ $p->paid_at->format('Y-m-d H:i') }}</td>
                    <td><a href="{{ route('fee.receipt.download', $p->id) }}" class="btn btn-sm btn-secondary">{{ __('admin.download_pdf') }}</a></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Modal for adding payment -->
<div class="modal fade" id="addPaymentModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('fee.payments.store', $studentFee->id) }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('admin.record_payment_2') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('admin.close') }}"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin.amount_3') }}</label>
                        <input type="number" step="0.01" name="amount" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin.payment_method') }}</label>
                        <select name="payment_method" class="form-select" required>
                            <option value="cash">{{ __('admin.cash') }}</option>
                            <option value="bank_transfer">{{ __('admin.bank_transfer') }}</option>
                            <option value="online">{{ __('admin.online_payment') }}</option>
                            <option value="mobile_money">{{ __('admin.mobile_money') }}</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin.transaction_id_optional') }}</label>
                        <input type="text" name="transaction_id" class="form-control" placeholder="{{ __('admin.reference_number') }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin.notes_optional') }}</label>
                        <textarea name="notes" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin.cancel') }}</button>
                    <button type="submit" class="btn btn-primary">{{ __('admin.save_payment') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection