@extends('layouts.school')
@section('title', 'Bank Accounts')
@section('header', 'School Bank Accounts')
@section('content')
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div class="lg:col-span-2 grid grid-cols-1 gap-4 sm:grid-cols-2">
            @forelse ($accounts as $account)
                <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5 {{ $account->is_active ? '' : 'opacity-50' }}">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-sm font-semibold text-gray-900">{{ $account->bank_name }}</p>
                            <p class="text-xs text-gray-500">{{ $account->purpose ?? ucfirst($account->account_type) }}</p>
                        </div>
                        @if ($account->is_default)<span class="rounded-full bg-primary-50 px-2 py-0.5 text-xs font-semibold text-primary-700">Default</span>@endif
                    </div>
                    <p class="mt-3 font-mono text-lg tracking-wider text-gray-900">{{ $account->maskedNumber() }}</p>
                    <p class="text-xs text-gray-500">Acct name: {{ $account->account_name }}</p>
                    <div class="mt-4 flex gap-2">
                        @unless ($account->is_default)
                            <form method="POST" action="{{ route('school.finance.bank-accounts.make-default', [request()->route('schoolId'), $account->id]) }}">@csrf @method('PATCH')<button class="rounded-md bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200">Make default</button></form>
                        @endunless
                        <form method="POST" action="{{ route('school.finance.bank-accounts.toggle-active', [request()->route('schoolId'), $account->id]) }}">@csrf @method('PATCH')<button class="rounded-md bg-gray-100 px-2.5 py-1 text-xs font-medium {{ $account->is_active ? 'text-red-600' : 'text-green-600' }} hover:bg-gray-200">{{ $account->is_active ? 'Deactivate' : 'Activate' }}</button></form>
                    </div>
                </div>
            @empty
                <div class="sm:col-span-2 rounded-xl bg-white p-12 text-center shadow-sm ring-1 ring-gray-900/5">
                    <p class="text-sm text-gray-500">No bank accounts yet. Add one so parents know where to transfer fees.</p>
                </div>
            @endforelse
        </div>

        <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 self-start">
            <h3 class="mb-4 text-sm font-semibold text-gray-900">Add Bank Account</h3>
            <form method="POST" action="{{ route('school.finance.bank-accounts.store', request()->route('schoolId')) }}" class="space-y-3">
                @csrf
                <input type="text" name="account_name" required placeholder="Account name *" value="{{ old('account_name') }}" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                <input type="text" name="bank_name" required placeholder="Bank *" value="{{ old('bank_name') }}" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                <input type="text" name="account_number" required minlength="6" maxlength="30" placeholder="Account number *" value="{{ old('account_number') }}" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                <select name="account_type" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
                    <option value="current">Current</option><option value="savings">Savings</option>
                </select>
                <input type="text" name="purpose" placeholder="Purpose (e.g. School fees)" value="{{ old('purpose') }}" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                <button class="w-full rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700">Add Account</button>
            </form>
        </div>
    </div>
@endsection