@extends('layouts.master')
@section('page_title', 'Pay Fees Online')
@section('content')
<div class="card">
    <div class="card-header header-elements-inline">
        <h6 class="card-title font-weight-bold"><i class="icon-cash3 mr-2"></i> Pay: {{ $pr->payment->title }} — {{ optional($student)->name }}</h6>
        {!! Qs::getPanelOptions() !!}
    </div>
    <div class="card-body">
        @if ($errors->any())
            <div class="alert alert-danger">@foreach ($errors->all() as $e)<div>{{ $e }}</div>@endforeach</div>
        @endif

        <table class="table table-sm w-auto">
            <tr><th>Fee</th><td>{{ $pr->payment->title }} ({{ $pr->year }})</td></tr>
            <tr><th>Total</th><td>{{ Qs::naira($pr->payment->amount) }}</td></tr>
            <tr><th>Paid so far</th><td class="text-blue">{{ Qs::naira($pr->amt_paid) }}</td></tr>
            <tr><th>Outstanding</th><td class="text-danger font-weight-bold">{{ Qs::naira($balance) }}</td></tr>
        </table>

        @foreach($pending as $p)
            <div class="alert alert-info py-2">
                {{ Qs::naira($p->amount) }} via {{ $labels[$p->method] ?? $p->method }} is
                <strong>{{ $p->status == 'awaiting_approval' ? 'awaiting school confirmation' : 'pending' }}</strong>.
                <a href="{{ route('pay.status', $p->id) }}">Check status</a>
            </div>
        @endforeach

        @if($balance < 1)
            <div class="alert alert-success">This fee is fully paid. Thank you!</div>
        @elseif(empty($methods))
            <div class="alert alert-warning">Online payment is not available at the moment. Please pay at the school's accounts office.</div>
        @else
        <form method="post" enctype="multipart/form-data" action="{{ route('pay.start', $pr->id) }}">
            @csrf
            <div class="form-group row">
                <label class="col-lg-2 col-form-label font-weight-semibold">Amount (₦)</label>
                <div class="col-lg-4">
                    <input type="number" name="amount" min="1" max="{{ $balance }}" step="1" value="{{ old('amount', $balance) }}" required class="form-control">
                    <span class="form-text text-muted">You can pay all of it or part of it.</span>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-lg-2 col-form-label font-weight-semibold">Pay with</label>
                <div class="col-lg-10">
                    @foreach($methods as $m)
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="radio" class="form-check-input" name="method" value="{{ $m }}" {{ old('method', $methods[0]) == $m ? 'checked' : '' }} onchange="document.getElementById('bank-box').style.display = this.value=='bank_transfer' ? 'block':'none'">
                                {{ $labels[$m] }}
                            </label>
                        </div>
                    @endforeach
                </div>
            </div>

            @if(in_array('bank_transfer', $methods))
            <div id="bank-box" style="display: {{ old('method', $methods[0]) == 'bank_transfer' ? 'block' : 'none' }}" class="border rounded p-3 mb-3">
                <h6 class="font-weight-bold">Bank transfer details</h6>
                <p class="mb-1">Bank: <strong>{{ $bank['name'] }}</strong></p>
                <p class="mb-1">Account name: <strong>{{ $bank['account_name'] }}</strong></p>
                <p class="mb-1">Account number: <strong>{{ $bank['account_no'] }}</strong></p>
                @if($bank['instructions'])<p class="mb-2 text-muted">{{ $bank['instructions'] }}</p>@endif
                <p class="text-muted font-size-sm">Make the transfer, then fill in the details below. The school will confirm it and your receipt will appear here.</p>
                <div class="form-group row">
                    <label class="col-lg-3 col-form-label">Transfer reference / depositor name</label>
                    <div class="col-lg-6"><input type="text" name="bank_ref" maxlength="150" value="{{ old('bank_ref') }}" class="form-control"></div>
                </div>
                <div class="form-group row mb-0">
                    <label class="col-lg-3 col-form-label">Proof of payment (optional)</label>
                    <div class="col-lg-6"><input type="file" name="proof" class="form-control-file"><span class="form-text text-muted">JPG, PNG or PDF, up to 3 MB.</span></div>
                </div>
            </div>
            @endif

            <button type="submit" class="btn btn-primary">Continue <i class="icon-paperplane ml-2"></i></button>
            <a href="{{ route('payments.invoice', Qs::hash($pr->student_id)) }}" class="btn btn-light">Back</a>
        </form>
        @endif
    </div>
</div>
@endsection