@php
    $hasEditableFields = blank($user->account_holder_name)
        || blank($user->bank_name)
        || blank($user->account_number)
        || blank($user->branch_name)
        || blank($user->city)
        || blank($user->ifsc_code);
@endphp

<x-card class="!p-0 overflow-hidden">
    <div class="border-b border-slate-100 bg-slate-50/50 px-6 py-4">
        <div class="flex items-center gap-3">
            <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-800 text-white">
                <i class="bi bi-bank"></i>
            </span>
            <div>
                <h3 class="text-base font-semibold text-slate-900">Bank Account Details</h3>
                <p class="text-sm text-slate-500">Salary disbursement account information</p>
            </div>
        </div>
    </div>

    @if($hasEditableFields)
        <form action="{{ route('settings.profile.bank.update') }}" method="post" class="space-y-6 p-6" autocomplete="off">
            @csrf
            @method('PUT')

            <p class="text-xs text-slate-500">Fill empty fields once. Saved bank details cannot be changed here — contact HR to update.</p>

            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                @include('settings.profile.partials.self-service-field', [
                    'name' => 'account_holder_name',
                    'label' => 'Account Holder Name',
                    'userValue' => $user->account_holder_name,
                ])
                @include('settings.profile.partials.self-service-field', [
                    'name' => 'bank_name',
                    'label' => 'Bank Name',
                    'userValue' => $user->bank_name,
                ])
                @include('settings.profile.partials.self-service-field', [
                    'name' => 'account_number',
                    'label' => 'Account Number',
                    'userValue' => $user->account_number,
                ])
                @include('settings.profile.partials.self-service-field', [
                    'name' => 'branch_name',
                    'label' => 'Branch Name',
                    'userValue' => $user->branch_name,
                ])
                @include('settings.profile.partials.self-service-field', [
                    'name' => 'city',
                    'label' => 'City',
                    'userValue' => $user->city,
                ])
                @include('settings.profile.partials.self-service-field', [
                    'name' => 'ifsc_code',
                    'label' => 'IFSC Code',
                    'userValue' => $user->ifsc_code,
                    'uppercase' => true,
                ])
            </div>

            <div class="flex justify-end border-t border-slate-100 pt-4">
                <button type="submit" class="rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:opacity-90">
                    Save bank details
                </button>
            </div>
        </form>
    @else
        <div class="space-y-6 p-6">
            <dl class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Account Holder Name</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->account_holder_name ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Bank Name</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->bank_name ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Account Number</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->account_number ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Branch Name</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->branch_name ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">City</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->city ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">IFSC Code</dt>
                    <dd class="mt-1 text-sm text-slate-900">{{ $user->ifsc_code ?? '—' }}</dd>
                </div>
            </dl>
            <p class="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
                All details on this section are saved. Contact HR to request changes.
            </p>
        </div>
    @endif
</x-card>