@extends('layouts.app')

@section('content')

<div class="row">
    <div class="col-md-12">
        @include('partials._menu-settings')
      <div class="card mb-6">
        <!-- Account -->
        <div class="card-datatable table-responsive pt-0">
            <table class="datatables-basic table">
                <thead>
                    <tr>
                        <th></th> {{-- Responsive icon --}}
                        <th></th> {{-- Checkbox --}}
                        <th>{{ __('fields.bank_accounts.bank') }}</th>
                        <th>{{ __('fields.bank_accounts.account_number') }}</th>
                        <th>{{ __('fields.bank_accounts.clabe') }}</th>
                        <th>{{ __('fields.bank_accounts.card_number') }}</th>
                        <th>{{ __('fields.bank_accounts.primary') }}</th>
                        <th>{{ __('fields.bank_accounts.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($accounts as $account)
                        <tr>
                            <td></td>
                            <td></td>
                            <td>{{ $account->bank->name }}</td>
                            <td>{{ $account->account_number }}</td>
                            <td>{{ $account->clabe ?? '-' }}</td>
                            <td>{{ $account->card_number ?? '-' }}</td>
                            <td class="text-center">{{ $account->is_primary ? '✔️' : '' }}</td>
                            <td>
                                <a href="{{ route('bank_accounts.edit', $account) }}" class="text-warning me-1">{{ __('fields.bank_accounts.edit') }}</a>
                                <form action="{{ route('bank_accounts.destroy', $account) }}" method="POST" class="d-inline" onsubmit="return confirm('{{ __('fields.bank_accounts.confirm_delete') }}')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="text-danger border-0 bg-transparent">{{ __('fields.bank_accounts.delete') }}</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted p-4">{{ __('fields.bank_accounts.empty') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <!-- /Account -->
      </div>
    </div>
  </div>
@endsection

@push('scripts')
<script>
  window.translations = {
    tableTitle: @json(__('fields.bank_accounts.table_title')),
    addNew: @json(__('fields.bank_accounts.add_new')),
    confirmTitle: @json(__('fields.bank_accounts.confirm_delete_title')),
    confirmText: @json(__('fields.bank_accounts.confirm_delete_text')),
    confirmYes: @json(__('fields.bank_accounts.confirm_delete_yes')),
    cancel: @json(__('fields.bank_accounts.cancel')),
    deleted: @json(__('fields.bank_accounts.deleted')),
    deletedText: @json(__('fields.bank_accounts.deleted_text')),
    deleteError: @json(__('fields.bank_accounts.delete_error')),
    error: @json(__('fields.bank_accounts.error')),
    edit: "{{ __('fields.edit') }}",
    delete: "{{ __('fields.delete') }}",
    searchPlaceholder: "{{ __('fields.searchPlaceholder') }}",
    
    lengthMenu: "{{ __('fields.lengthMenu') }}",
    zeroRecords: "{{ __('fields.zeroRecords') }}",
    info: "{{ __('fields.info') }}",
    infoEmpty: "{{ __('fields.infoEmpty') }}",
    infoFiltered: "{{ __('fields.infoFiltered') }}",
    search: "{{ __('fields.search') }}",
    emptyTable: "{{ __('fields.emptyTable') }}",
    loadingRecords: "{{ __('fields.loadingRecords') }}",
    processing: "{{ __('fields.processing') }}",
  };
</script>
<script src="{{ asset('vuexy-assets/js/pages/bank-accounts-table.js') }}"></script>
@endpush