@extends('layouts.parent')
@section('title', 'Submit Payment')
@section('content')
    <x-page-head title="Submit Payment" subtitle="{{ $invoice->invoice_number }}" />
    <x-panel>
        <dl style="display:grid; grid-template-columns: 140px 1fr; gap:8px 16px; margin-bottom:20px;">
            <dt>Student</dt><dd>{{ $invoice->student?->full_name }}</dd>
            <dt>Invoice Total</dt><dd>{{ number_format($invoice->total_amount, 2) }}</dd>
            <dt>Balance Due</dt><dd><strong>{{ number_format($invoice->balance_due, 2) }}</strong></dd>
        </dl>

        <form method="POST" action="{{ route('parent.fees.pay.store', $invoice) }}" id="pay-form">
            @csrf
            <div style="display:grid; grid-template-columns: repeat(2, 1fr); gap:16px;">
                <div class="form-group">
                    <label class="form-label" for="amount">Amount</label>
                    <input class="input" type="number" step="0.01" min="0.01" max="{{ $invoice->balance_due }}" id="amount" name="amount" value="{{ old('amount', $invoice->balance_due) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="payment_method">Payment Method</label>
                    <select class="input" id="payment_method" name="payment_method" required>
                        @foreach ($paymentMethods as $value => $label)
                            <option value="{{ $value }}" @selected(old('payment_method', 'manual') === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group" id="reference-group">
                    <label class="form-label" for="reference">Reference / Transaction ID</label>
                    <input class="input" type="text" id="reference" name="reference" value="{{ old('reference') }}">
                </div>
                <div class="form-group" style="grid-column: span 2;">
                    <label class="form-label" for="notes">Notes</label>
                    <textarea class="input" id="notes" name="notes" rows="3">{{ old('notes') }}</textarea>
                </div>
            </div>
            <p id="pay-hint" style="color:var(--text2); margin:16px 0;">Your payment request will be reviewed by finance before it is applied to the invoice.</p>
            <div style="display:flex; gap:10px;">
                <button type="submit" class="btn btn-primary" id="submit-btn">Submit Payment Request</button>
                <a href="{{ route('parent.fees.index', ['student_id' => $invoice->student_id]) }}" class="btn btn-outline">Cancel</a>
            </div>
        </form>
    </x-panel>
@endsection

@push('scripts')
<script>
    (function () {
        const method = document.getElementById('payment_method');
        const referenceGroup = document.getElementById('reference-group');
        const hint = document.getElementById('pay-hint');
        const submitBtn = document.getElementById('submit-btn');
        const gatewayMethods = ['paychangu', 'one_khusa'];

        function syncForm() {
            const value = method.value;
            const isGateway = gatewayMethods.includes(value);
            referenceGroup.style.display = isGateway ? 'none' : '';
            hint.textContent = isGateway
                ? (value === 'paychangu'
                    ? 'You will be redirected to PayChangu secure checkout.'
                    : 'You will receive a One Khusa timed account number to complete payment.')
                : 'Your payment request will be reviewed by finance before it is applied to the invoice.';
            submitBtn.textContent = isGateway ? 'Continue to Payment' : 'Submit Payment Request';
        }

        method.addEventListener('change', syncForm);
        syncForm();
    })();
</script>
@endpush