@extends('layouts.app')
@section('title', 'Bank Details')
@section('page-title', 'Settings')

@section('content')
@include('settings.partials.tabs', ['active' => 'bank'])

<div class="row justify-content-start">
<div class="col-lg-7">
<div class="card table-card p-4">

    <h6 class="fw-700 mb-1" style="color:#1e293b;">Bank Account Details</h6>
    <p class="text-muted small mb-4">These details appear on every invoice so clients can pay via bank transfer.</p>

    @if(session('success'))
        <div class="alert alert-success rounded-3 small py-2 mb-3">
            <i class="bi bi-check-circle me-1"></i> {{ session('success') }}
        </div>
    @endif

    <form method="POST" action="{{ route('settings.bank') }}" novalidate>
    @csrf @method('PUT')

    <div class="row g-3">
        <div class="col-12">
            <label class="form-label fw-500">Bank Name <span class="text-danger">*</span></label>
            <select name="bank_name" class="form-select" required>
                <option value="">— Select your bank —</option>
                @foreach([
                    'Access Bank','First Bank of Nigeria','Guaranty Trust Bank',
                    'United Bank for Africa','Zenith Bank','Fidelity Bank',
                    'First City Monument Bank','Stanbic IBTC Bank',
                    'Sterling Bank','Union Bank','Wema Bank',
                    'Opay','Kuda Bank','Palmpay','Moniepoint','Providus Bank'
                ] as $bank)
                    <option value="{{ $bank }}" {{ old('bank_name', $user->bank_name) === $bank ? 'selected' : '' }}>
                        {{ $bank }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-sm-5">
            <label class="form-label fw-500">Account Number <span class="text-danger">*</span></label>
            <input type="text" name="account_number" class="form-control"
                   value="{{ old('account_number', $user->account_number) }}"
                   placeholder="0123456789" maxlength="10" required>
        </div>
        <div class="col-sm-7">
            <label class="form-label fw-500">Account Name <span class="text-danger">*</span></label>
            <input type="text" name="account_name" class="form-control"
                   value="{{ old('account_name', $user->account_name) }}"
                   placeholder="YOUR BUSINESS NAME" required style="text-transform:uppercase;">
            <div class="form-text">Exactly as it appears on your bank account</div>
        </div>
    </div>

    @if($user->bank_name)
    <div class="mt-3 p-3 rounded" style="background:#f0fdf4;border:1px solid #bbf7d0;font-size:0.875rem;">
        <div class="fw-600 mb-1" style="color:#15803d;"><i class="bi bi-check-circle me-1"></i>Current Details</div>
        <span style="color:#166534;">
            {{ $user->bank_name }} · {{ $user->account_number }} · {{ $user->account_name }}
        </span>
    </div>
    @endif

    <div class="mt-4">
        <button type="submit" class="btn fw-600" style="background:#00a651;color:white;">
            <i class="bi bi-check-lg me-2"></i>Save Bank Details
        </button>
    </div>
    </form>
</div>
</div>
</div>

@push('scripts')
<script>
document.querySelector('[name="account_name"]')?.addEventListener('input', function() {
    const pos = this.selectionStart;
    this.value = this.value.toUpperCase();
    this.setSelectionRange(pos, pos);
});
</script>
@endpush
@endsection