@extends('layouts.app')
@section('content')
<div class="card mb-6">
    <h5 class="card-header">{{ __('fields.bank_accounts.create_title') }}</h5>

    <form class="card-body" action="{{ route('bank_accounts.store') }}" method="POST">
        @csrf
      <div class="row g-6">
        <div class="col-md-6">
            <label class="form-label" for="bank_id">{{ __('fields.bank_accounts.bank') }}<span class="required-asterisk">*</span></label>
            <select name="bank_id" class="form-select @error('bank_id') is-invalid @enderror" data-allow-clear="true">
                <option value="" disabled selected>{{ __('fields.select_bank') }}</option>
                @foreach ($banks as $bank)
                    <option value="{{ $bank->id }}">{{ $bank->name }}</option>
                @endforeach
            </select>
            @error('bank_id')
                  <div class="invalid-feedback d-block">{{ $message }}</div>
            @enderror
        </div>
        <div class="col-md-6">
            <label class="form-label" for="account_number">{{ __('fields.bank_accounts.account_number') }}<span class="required-asterisk">*</span></label>
            <input type="text" name="account_number" class="form-control @error('account_number') is-invalid @enderror" maxlength="11" inputmode="numeric" pattern="[0-9]*"
            placeholder="{{ __('fields.placeholders.account_number') }}">
            @error('account_number')
                  <div class="invalid-feedback d-block">{{ $message }}</div>
            @enderror
        </div>
        <div class="col-md-6">
            <label class="form-label" for="clabe">{{ __('fields.bank_accounts.clabe') }} <span class="required-asterisk">*</span></label>
            <input type="text" name="clabe" class="form-control @error('clabe') is-invalid @enderror" maxlength="18" inputmode="numeric" pattern="[0-9]*"
            placeholder="{{ __('fields.placeholders.clabe') }}">
            @error('clabe')
                  <div class="invalid-feedback d-block">{{ $message }}</div>
            @enderror
        </div>
        <div class="col-md-6">
            <label class="form-label" for="card_number">{{ __('fields.bank_accounts.card_number') }}</label>
            <input type="text" name="card_number" class="form-control" maxlength="16" inputmode="numeric" pattern="[0-9]*"
            placeholder="{{ __('fields.placeholders.card_number') }}">
            @error('card_number')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>  
        <div class="col-md-6">
            <input class="form-check-input" type="checkbox" name="is_primary" id="is_primary">
            <label class="form-check-label" for="defaultCheck3"> {{ __('fields.bank_accounts.set_primary') }}</label>
        </div>      
      </div>
      
      <div class="pt-6">
        <button type="submit" class="btn btn-primary me-4">{{ __('fields.bank_accounts.save_button') }}</button>
        <a href="{{ route('bank_accounts.index') }}" class="btn btn-label-secondary">
            <i class="ti tabler-arrow-left me-1"></i> {{ __('fields.bank_accounts.back') }}
        </a>
    </div>
    </form>
  </div>

  @push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const numericInputs = ['account_number', 'clabe', 'card_number'];

    numericInputs.forEach(id => {
      const input = document.querySelector(`input[name="${id}"]`);

      input.addEventListener('input', function () {
        this.value = this.value.replace(/[^0-9]/g, '');
      });

      input.addEventListener('keypress', function (e) {
        if (!/[0-9]/.test(e.key)) {
          e.preventDefault();
        }
      });
    });
  });
</script>
@if(session('duplicate_error'))
<script>
  Swal.fire({
    icon: 'error',
    title: '{{ __("fields.duplicate_title") }}',
    text: '{{ __("fields.duplicate_text") }}',
    confirmButtonText: '{{ __("fields.ok") }}',
    customClass: {
      confirmButton: 'btn btn-danger'
    },
    buttonsStyling: false
  });
</script>
@endif
@endpush


@endsection