@extends('layouts.school')
@section('title', 'Settlement Payouts')
@section('header', 'Settlement Payouts')
@section('content')
    <div class="mx-auto max-w-4xl space-y-6">

        @if (!$gatewayConfigured)
            <div class="rounded-xl bg-amber-50 p-4 text-sm text-amber-800 ring-1 ring-amber-200">
                No online gateway is active yet. Settlement payouts apply to confirmed online fee
                payments. Configure and activate a gateway first.
            </div>
        @endif

        {{-- Default profile highlight --}}
        @if ($default)
            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-sm font-semibold text-gray-900">Active settlement profile</h3>
                        <p class="mt-1 text-sm text-gray-600">
                            {{ $default->bankAccount->account_name }} ·
                            {{ $default->bankAccount->bank_name }} ·
                            {{ $default->bankAccount->maskedNumber() }}
                        </p>
                        <p class="text-xs text-gray-500 mt-0.5">
                            {{ $default->settlement_currency }} · Default destination for online payouts
                        </p>
                    </div>
                    <span class="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">Active</span>
                </div>
            </div>
        @else
            <div class="rounded-xl bg-amber-50 p-4 text-sm text-amber-800 ring-1 ring-amber-200">
                No settlement profile set. Add one below so online fee income has a disbursement
                bank account.
            </div>
        @endif

        {{-- Outstanding totals --}}
        <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
            <h3 class="text-sm font-semibold text-gray-900">Unsettled online payments</h3>
            @forelse ($totals as $currency => $t)
                <div class="mt-3 flex items-center justify-between rounded-lg bg-gray-50 px-4 py-3">
                    <span class="text-sm text-gray-600">{{ $currency }} · {{ $t['count'] }} transaction(s)</span>
                    <span class="text-lg font-semibold text-gray-900">{{ number_format((float) $t['total'], 2) }}</span>
                </div>
            @empty
                <p class="mt-3 text-sm text-gray-500">No outstanding online payments.</p>
            @endforelse
        </div>

        {{-- Record payout --}}
        <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
            <h3 class="text-sm font-semibold text-gray-900">Record a payout</h3>

            @if ($unsettled->isEmpty() || !$settlements->first())
                <p class="mt-3 text-sm text-gray-500">
                    Add a settlement profile and confirm online payments before recording payouts.
                </p>
            @else
                <form method="POST" action="{{ route('school.finance.settlement.payout', request()->route('schoolId')) }}" class="mt-4 space-y-4">
                    @csrf
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Settlement profile</label>
                            <select name="profile_id" required class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                                @foreach ($settlements as $profile)
                                    <option value="{{ $profile->id }}" {{ $profile->is_default ? 'selected' : '' }}>
                                        {{ $profile->bankAccount->bank_name }} · {{ $profile->settlement_currency }}
                                        {{ $profile->is_default ? '(default)' : '' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Payout reference (e.g. batch id)</label>
                            <input type="text" name="reference" required maxlength="100" placeholder="PAYOUT-2026-0001"
                                class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Select transactions to settle</label>
                        <div class="space-y-2 max-h-64 overflow-y-auto rounded-lg border border-gray-200 p-3">
                            @foreach ($unsettled as $tx)
                                <label class="flex items-center gap-3 text-sm text-gray-700">
                                    <input type="checkbox" name="transaction_ids[]" value="{{ $tx->id }}" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                    <span class="flex-1">
                                        {{ $tx->reference }}
                                        <span class="text-xs text-gray-500">· {{ $tx->amount }} {{ $tx->currency }}</span>
                                    </span>
                                    <span class="text-xs text-gray-400">{{ $tx->paid_at?->format('M j, Y') }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <button class="rounded-lg bg-primary-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">
                        Record payout
                    </button>
                </form>
            @endif
        </div>

        {{-- All profiles --}}
        <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
            <h3 class="text-sm font-semibold text-gray-900">All settlement profiles</h3>
            <div class="mt-3 divide-y divide-gray-100">
                @forelse ($settlements as $profile)
                    <div class="flex items-center justify-between py-3">
                        <div>
                            <p class="text-sm text-gray-800">
                                {{ $profile->bankAccount->account_name }} ·
                                {{ $profile->bankAccount->bank_name }} ·
                                {{ $profile->bankAccount->maskedNumber() }}
                            </p>
                            <p class="text-xs text-gray-500">{{ $profile->settlement_currency }}</p>
                        </div>
                        <div class="flex items-center gap-3">
                            @if ($profile->is_default)
                                <span class="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">Default</span>
                            @else
                                <form method="POST" action="{{ route('school.finance.settlement.make-default', [request()->route('schoolId'), $profile->id]) }}">
                                    @csrf @method('PATCH')
                                    <button class="text-xs font-medium text-primary-600 underline">Make default</button>
                                </form>
                                <form method="POST" action="{{ route('school.finance.settlement.destroy', [request()->route('schoolId'), $profile->id]) }}"
                                      onsubmit="return confirm('Remove this settlement profile?')">
                                    @csrf @method('DELETE')
                                    <button class="text-xs font-medium text-red-600 hover:text-red-700">Remove</button>
                                </form>
                            @endif
                        </div>
                    </div>
                @empty
                    <p class="py-3 text-sm text-gray-500">No settlement profiles yet.</p>
                @endforelse
            </div>
        </div>

        {{-- Add profile --}}
        <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
            <h3 class="text-sm font-semibold text-gray-900">Add settlement profile</h3>
            <form method="POST" action="{{ route('school.finance.settlement.store', request()->route('schoolId')) }}" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
                @csrf
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Bank account</label>
                    <select name="bank_account_id" required class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                        @forelse ($bankAccounts as $account)
                            <option value="{{ $account->id }}">{{ $account->account_name }} · {{ $account->bank_name }} · {{ $account->maskedNumber() }}</option>
                        @empty
                            <option value="" disabled>Add a bank account first (Finance → Bank Accounts)</option>
                        @endforelse
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Currency</label>
                    <select name="settlement_currency" required class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                        <option value="NGN">NGN — Naira</option>
                        <option value="USD">USD — Dollar</option>
                        <option value="EUR">EUR — Euro</option>
                    </select>
                </div>
                <div class="sm:col-span-3">
                    <button class="rounded-lg bg-primary-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">
                        Add settlement profile
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection