<div class="box" id="accounts-form">
    <div class="box-header">
        <h5 class="box-title">{{ __('forms.MoneyAccounts') }}</h5>
    </div>
    <div class="box-body pb-2">
        <form action="{{ route('individual.accounts.store', $individual) }}" method="POST">
            @csrf
            <div class="grid grid-cols-2 gap-x-6 space-y-0 lg:space-y-0">
                <div class="mb-6">
                    <label for="bank_account_number" class="ti-form-label @error('bank.account_number') error @enderror">
                        @error('bank.account_number')
                            {{ $message }}
                        @else
                            {{ __('forms.BankAccount') }}
                        @enderror
                    </label>
                    <input id="bank_account_number" type="text" name="bank[account_number]" 
                        value="{{ old('bank.account_number') }}"
                        class="ti-form-input shadow-sm @error('bank.account_number') border-red-500 @enderror"
                        placeholder="{{ __('forms.BankAccount') }}" 
                        {{ $readonly ? 'disabled' : '' }}>
                </div>
                <div class="mb-6">
                    <label for="eur_account_number" class="ti-form-label @error('eur.account_number') error @enderror">
                        @error('eur.account_number')
                            {{ $message }}
                        @else
                            {{ __('forms.EurAccount') }}
                        @enderror
                    </label>
                    <input id="eur_account_number" type="text" name="eur[account_number]" 
                        value="{{ old('eur.account_number') }}"
                        class="ti-form-input shadow-sm @error('eur.account_number') border-red-500 @enderror"
                        placeholder="{{ __('forms.EurAccount') }}" 
                        {{ $readonly ? 'disabled' : '' }}>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-x-6 space-y-0 lg:space-y-0">
                <div class="mb-4">
                    <label for="usd_account_number" class="ti-form-label @error('usd.account_number') error @enderror">
                        @error('usd.account_number')
                            {{ $message }}
                        @else
                            {{ __('forms.UsdAccount') }}
                        @enderror
                    </label>
                    <input id="usd_account_number" type="text" name="usd[account_number]" 
                        value="{{ old('usd.account_number') }}"
                        class="ti-form-input shadow-sm @error('usd.account_number') border-red-500 @enderror"
                        placeholder="{{ __('forms.UsdAccount') }}"
                        {{ $readonly ? 'disabled' : '' }}>
                </div>
                <div class="mb-4">
                    <label for="security_account_number" class="ti-form-label @error('security.account_number') error @enderror">
                        @error('security.account_number')
                            {{ $message }}
                        @else
                            {{ __('forms.SecurityAccount') }}
                        @enderror
                    </label>
                    <input id="security_account_number" type="text" name="security[account_number]" 
                        value="{{ old('security.account_number') }}"
                        class="ti-form-input shadow-sm @error('security.account_number') border-red-500 @enderror"
                        placeholder="{{ __('forms.SecurityAccount') }}"
                        {{ $readonly ? 'disabled' : '' }}>
                </div>
            </div>

            @if (!$readonly)
                <!-- Submit Button -->
                <div class="flex justify-between">
                    <div></div>
                    <button type="submit" class="ti-btn ti-btn-outline-success py-1 px-3 mr-0">
                        <span>{{ __('forms.Save') }}</span>
                    </button>
                </div>
            @endif
        </form>
    </div>
</div>
