@extends('layouts.portal')

@section('title', 'Fees')

@section('page-header')
    <div class="mb-8">
        <h1 class="font-display text-2xl font-extrabold text-slate-900 sm:text-3xl">Fees &amp; Payments</h1>
        <p class="mt-1 text-sm text-slate-500">Invoices and payment history for {{ $child->full_name }}</p>
    </div>
@endsection

@section('content')
    @if (session('success'))
        <div class="mb-6 rounded-xl bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700 ring-1 ring-emerald-200">{{ session('success') }}</div>
    @endif
    @if (session('info'))
        <div class="mb-6 rounded-xl bg-sky-50 px-4 py-3 text-sm font-medium text-sky-700 ring-1 ring-sky-200">{{ session('info') }}</div>
    @endif
    @if (session('error'))
        <div class="mb-6 rounded-xl bg-rose-50 px-4 py-3 text-sm font-medium text-rose-700 ring-1 ring-rose-200">{{ session('error') }}</div>
    @endif

    <div class="grid grid-cols-2 gap-4 xl:grid-cols-4">
        <x-portal.stat-card title="Total billed" value="&#8358;{{ number_format($feeSummary['billed'], 2) }}" sub="All invoices" icon="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
        <x-portal.stat-card title="Total paid" value="&#8358;{{ number_format($feeSummary['paid'], 2) }}" sub="Confirmed payments" tone="emerald" icon="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        <x-portal.stat-card title="Outstanding" value="&#8358;{{ number_format($feeSummary['outstanding'], 2) }}" sub="{{ $feeSummary['overdue'] }} overdue invoice(s)" tone="{{ $feeSummary['outstanding'] > 0 ? 'rose' : 'emerald' }}" icon="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/>
        <x-portal.stat-card title="{{ $feeSummary['credit'] > 0 ? 'Credit available' : 'Settled invoices' }}" value="{{ $feeSummary['credit'] > 0 ? '&#8358;' . number_format($feeSummary['credit'], 2) : $feeSummary['invoices']->where('status', 'paid')->count() . ' / ' . $feeSummary['invoices']->count() }}" sub="{{ $feeSummary['credit'] > 0 ? 'Applies to future invoices' : 'Fully paid' }}" tone="sky" icon="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"/>
    </div>

    <div class="mt-6 grid gap-6 lg:grid-cols-5">
        {{-- Invoices --}}
        <x-portal.panel heading="Invoices" subtitle="{{ $child->class?->name ?? '' }}" class="lg:col-span-3">
            @if ($feeSummary['invoices']->isEmpty())
                <x-portal.empty message="No invoices have been raised yet."/>
            @else
                <div class="space-y-3">
                    @foreach ($feeSummary['invoices'] as $invoice)
                        @php
                            $balance = round((float) $invoice->amount - (float) $invoice->discount - (float) $invoice->total_paid, 2);
                            if ($invoice->status === 'paid') { [$tone, $label] = ['emerald', 'Paid']; }
                            elseif ($invoice->isOverdue()) { [$tone, $label] = ['rose', 'Overdue']; }
                            elseif ($invoice->total_paid > 0) { [$tone, $label] = ['amber', 'Partial']; }
                            else { [$tone, $label] = ['slate', 'Unpaid']; }
                        @endphp
                        <div class="rounded-xl bg-white p-4 ring-1 ring-slate-100">
                            <div class="flex flex-wrap items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <p class="font-semibold text-slate-800">{{ $invoice->feeStructure?->category?->name ?? 'School fees' }}
                                        <span class="ml-1 font-mono text-xs text-slate-400">{{ $invoice->invoice_no }}</span></p>
                                    <p class="mt-0.5 text-xs text-slate-400">
                                        {{ $invoice->academicYear?->name }}{{ $invoice->term?->name ? ' · ' . $invoice->term->name : '' }}
                                        · Due {{ $invoice->due_date?->format('M j, Y') ?? '-' }}
                                    </p>
                                </div>
                                <div class="text-right">
                                    <p class="font-bold tabular-nums text-slate-800">&#8358;{{ number_format((float) $invoice->amount - (float) $invoice->discount, 2) }}</p>
                                    @if ($invoice->total_paid > 0 && $invoice->status !== 'paid')
                                        <p class="text-xs tabular-nums text-emerald-500">Paid &#8358;{{ number_format((float) $invoice->total_paid, 2) }}</p>
                                    @endif
                                    <span class="mt-1 inline-block"><x-portal.badge :tone="$tone" dot>{{ $label }}</x-portal.badge></span>
                                </div>
                            </div>

                            @if ($balance > 0)
                                <details class="mt-3 border-t border-dashed border-slate-100 pt-3">
                                    <summary class="cursor-pointer text-sm font-semibold text-emerald-600">Pay now &middot; &#8358;{{ number_format($balance, 2) }}</summary>

                                    @php $charge = $serviceCharges[$invoice->id] ?? null; @endphp
                                    @if ($charge && (float) $charge['charge_amount'] > 0)
                                        <div class="mt-3 rounded-lg bg-slate-50 p-3 text-sm ring-1 ring-slate-100">
                                            <div class="flex items-center justify-between text-slate-600">
                                                <span>School fee</span>
                                                <span class="tabular-nums">{{ number_format((float) $charge['base_amount'], 2) }}</span>
                                            </div>
                                            <div class="mt-1 flex items-center justify-between text-slate-600">
                                                <span>Pishon service charge
                                                    @if ($charge['charge_to'] === 'school')
                                                        <span class="text-xs text-slate-400">· absorbed by school</span>
                                                    @endif
                                                </span>
                                                <span class="tabular-nums">
                                                    {{ number_format((float) $charge['charge_amount'], 2) }}
                                                </span>
                                            </div>
                                            <div class="mt-1 flex items-center justify-between border-t border-dashed border-slate-200 pt-1 font-bold text-slate-900">
                                                <span>Total to pay</span>
                                                <span class="tabular-nums">{{ number_format((float) $charge['total_charged'], 2) }}</span>
                                            </div>
                                        </div>
                                    @endif

                                    <form method="POST" action="{{ route('portal.fees.claim-transfer', array_filter([$school->id, $invoice->id, $child->id])) }}" class="mt-3 grid grid-cols-2 gap-3">
                                        @csrf
                                        <input type="hidden" name="amount" value="{{ $balance }}">
                                        <input type="text" name="payer_name" required placeholder="Payer full name *" class="col-span-2 rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-accent-500 focus:outline-none">
                                        <input type="text" name="transaction_ref" required placeholder="Bank transfer reference *" class="col-span-2 rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-accent-500 focus:outline-none">
                                        <button class="col-span-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700">Submit transfer claim</button>
                                        <p class="col-span-2 text-xs text-slate-400">Transfer to any school account below, then submit the reference for confirmation.</p>
                                    </form>
                                    @if ($onlineEnabled && count($onlineProviders))
                                        <div class="mt-3 flex flex-wrap gap-2 border-t border-dashed border-slate-100 pt-3">
                                            @foreach ($onlineProviders as $provider)
                                                <form method="POST" action="{{ route('portal.fees.pay-online', array_filter([$school->id, $invoice->id, $child->id])) }}">
                                                    @csrf
                                                    <input type="hidden" name="provider" value="{{ $provider }}">
                                                    <button class="rounded-full bg-sky-50 px-4 py-1.5 text-xs font-bold uppercase tracking-wide text-sky-700 ring-1 ring-sky-200 hover:bg-sky-100">Pay with {{ ucfirst($provider) }}</button>
                                                </form>
                                            @endforeach
                                        </div>
                                    @endif
                                </details>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </x-portal.panel>

        {{-- Payment history + bank accounts --}}
        <div class="space-y-6 lg:col-span-2">
            <x-portal.panel heading="Payment history" subtitle="{{ $feeSummary['payments']->count() }} transaction(s)">
                @if ($feeSummary['payments']->isEmpty())
                    <x-portal.empty message="No payments recorded yet."/>
                @else
                    <ol class="space-y-4">
                        @foreach ($feeSummary['payments'] as $payment)
                            <li class="flex items-start gap-3 rounded-xl {{ in_array($payment->status, ['confirmed','verified','reconciled']) ? 'bg-slate-50' : 'bg-amber-50/60' }} p-3.5">
                                <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full {{ in_array($payment->status, ['confirmed','verified','reconciled']) ? 'bg-emerald-100 text-emerald-600' : 'bg-amber-100 text-amber-600' }}">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"/></svg>
                                </span>
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-baseline justify-between gap-2">
                                        <p class="font-bold tabular-nums {{ in_array($payment->status, ['confirmed','verified','reconciled']) ? 'text-slate-800' : 'text-amber-700' }}">&#8358;{{ number_format((float) $payment->amount, 2) }}</p>
                                        <p class="text-[11px] text-slate-400">{{ $payment->payment_date?->format('M j, Y') ?? $payment->created_at->format('M j, Y') }}</p>
                                    </div>
                                    <p class="mt-0.5 truncate text-xs text-slate-400">
                                        {{ $payment->payment_method ? ucwords(str_replace('_', ' ', $payment->payment_method)) : 'Payment' }}
                                        @if ($payment->receipt_no) &middot; {{ $payment->receipt_no }} @endif
                                        @if ($payment->status === 'pending_verification')
                                            &middot; <span class="font-semibold text-amber-600">awaiting confirmation</span>
                                        @elseif ($payment->status === 'rejected')
                                            &middot; <span class="font-semibold text-rose-500">rejected</span>
                                        @endif
                                    </p>
                                    @if (in_array($payment->status, ['confirmed','verified','reconciled']) && $payment->receipt_no)
                                        <a href="{{ route('portal.fees.receipt', array_filter([$school->id, $payment->id, $child->id])) }}" class="mt-1 inline-block text-xs font-semibold text-accent-600 hover:text-accent-700">View receipt</a>
                                    @endif
                                </div>
                            </li>
                        @endforeach
                    </ol>
                @endif
            </x-portal.panel>

            @if ($bankAccounts->isNotEmpty())
                <x-portal.panel heading="School bank accounts" subtitle="For transfers">
                    <ul class="space-y-3 text-sm">
                        @foreach ($bankAccounts as $account)
                            <li class="rounded-xl bg-slate-50 p-3.5">
                                <p class="font-semibold text-slate-800">{{ $account->bank_name }}</p>
                                <p class="font-mono text-base tracking-wider text-slate-700">{{ $account->maskedNumber() }}</p>
                                <p class="text-xs text-slate-400">Account name: {{ $account->account_name }}@if($account->is_default) · <span class="font-semibold text-emerald-600">preferred</span>@endif</p>
                            </li>
                        @endforeach
                    </ul>
                </x-portal.panel>
            @endif
        </div>
    </div>
@endsection