@extends('layouts.app')

@section('title', 'Bank Accounts')
@section('page', 'bank-book')
@section('bankNav', 'accounts')

@php
  $statusVariant = fn ($s) => $s === 'Active' ? 'success' : 'danger';
@endphp

@section('content')
  @include('partials.account-bank-nav')

  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <x-data-table
    id="bank-accounts-table"
    class="catalog-table bank-accounts-table"
    title="Bank Accounts"
    subtitle="Manage bank accounts linked to banks."
    search-placeholder="Search bank accounts..."
    :selectable="false"
    :page-size="10"
  >
    <x-slot:toolbarActions>
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#bankAccountModal" data-bank-account-add @disabled($banks->isEmpty())>
        <i class="bi bi-plus-lg"></i> Add Bank Account
      </button>
    </x-slot:toolbarActions>
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="bank" aria-label="Bank">
        <option value="">All Banks</option>
        @foreach ($banks as $bank)
          <option>{{ $bank->name }}</option>
        @endforeach
      </select>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All Statuses</option>
        <option>Active</option>
        <option>Inactive</option>
      </select>
    </x-slot:filters>
    <x-slot:head>
      <x-data-table-th label="Account" col="name" />
      <x-data-table-th label="Bank" col="bank" />
      <x-data-table-th label="Account No." col="account_number" />
      <x-data-table-th label="Type" col="account_type" />
      <x-data-table-th label="Entries" col="entries_count" sort-type="number" />
      <x-data-table-th label="Balance" col="balance" sort-type="number" />
      <x-data-table-th label="Status" col="status" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($accounts as $row)
        <tr data-id="{{ $row->id }}">
          <td data-col="name" class="cell-primary">
            <span class="cat-cell">
              <span class="cat-cell__icon cat-cell__icon--primary" aria-hidden="true">
                <i class="bi bi-credit-card"></i>
              </span>
              <span class="cat-cell__name">{{ $row->name }}</span>
            </span>
          </td>
          <td data-col="bank">{{ $row->bank?->name ?? '—' }}</td>
          <td data-col="account_number">{{ $row->account_number ?: '—' }}</td>
          <td data-col="account_type">{{ $row->account_type ?: '—' }}</td>
          <td data-col="entries_count">{{ $row->entries_count }}</td>
          <td data-col="balance" class="fw-semibold">{{ money((float) $row->balance) }}</td>
          <td data-col="status">
            <x-badge :variant="$statusVariant($row->status)">{{ $row->status }}</x-badge>
            @if ($row->is_default)
              <x-badge variant="warning" class="ms-1">Default</x-badge>
            @endif
          </td>
          <td data-edt-actions>
            <div class="edt-row-actions product-actions">
              <a
                href="{{ route('account.bank-book', ['bank_account_id' => $row->id]) }}"
                class="btn btn-sm btn-icon product-action"
                title="View entries"
                aria-label="View entries"
              >
                <i class="bi bi-journal-text" aria-hidden="true"></i>
              </a>
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--edit"
                title="Edit"
                aria-label="Edit"
                data-edt-action="edit"
                data-backend
                data-bank-account-edit
                data-id="{{ $row->id }}"
                data-bank-id="{{ $row->bank_id }}"
                data-name="{{ $row->name }}"
                data-account-number="{{ $row->account_number }}"
                data-account-type="{{ $row->account_type }}"
                data-status="{{ $row->status }}"
                data-is-default="{{ $row->is_default ? '1' : '0' }}"
                data-sort-order="{{ $row->sort_order }}"
                data-notes="{{ $row->notes }}"
                data-update-url="{{ route('account.bank-accounts.update', $row) }}"
              >
                <i class="bi bi-pencil" aria-hidden="true"></i>
              </button>
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--delete"
                title="{{ $row->is_default ? 'Default account cannot be deleted' : 'Delete' }}"
                aria-label="Delete"
                data-edt-action="delete"
                data-backend
                data-delete-open
                data-delete-url="{{ route('account.bank-accounts.destroy', $row) }}"
                data-delete-label="{{ $row->name }}"
                data-delete-type="bank account"
                @disabled($row->is_default)
              >
                <i class="bi bi-trash" aria-hidden="true"></i>
              </button>
            </div>
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="8" class="text-center text-muted py-4">
            @if ($banks->isEmpty())
              Add a bank first, then create bank accounts.
            @else
              No bank accounts yet. Add your first account.
            @endif
          </td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  <div class="modal fade" id="bankAccountModal" tabindex="-1" aria-labelledby="bankAccountModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content edt-modal">
        <form id="bank-account-form" method="post" action="{{ route('account.bank-accounts.store') }}" data-store-url="{{ route('account.bank-accounts.store') }}">
          @csrf
          <input type="hidden" name="_method" id="bank_account_form_method" value="POST">
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="bankAccountModalLabel">Add bank account</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label" for="bank_account_bank_id">Bank</label>
                <select class="form-select" id="bank_account_bank_id" name="bank_id" required>
                  @foreach ($banks as $bank)
                    <option value="{{ $bank->id }}" @selected((string) old('bank_id') === (string) $bank->id)>{{ $bank->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="bank_account_name">Account name</label>
                <input type="text" class="form-control" id="bank_account_name" name="name" required maxlength="255" placeholder="e.g. Current Account" value="{{ old('name') }}">
              </div>
              <div class="col-md-4">
                <label class="form-label" for="bank_account_number">Account number</label>
                <input type="text" class="form-control" id="bank_account_number" name="account_number" maxlength="100" value="{{ old('account_number') }}">
              </div>
              <div class="col-md-4">
                <label class="form-label" for="bank_account_type">Account type</label>
                <input type="text" class="form-control" id="bank_account_type" name="account_type" list="bank-account-type-list" maxlength="50" placeholder="Current / Savings" value="{{ old('account_type') }}">
                <datalist id="bank-account-type-list">
                  <option value="Current"></option>
                  <option value="Savings"></option>
                  <option value="Fixed Deposit"></option>
                </datalist>
              </div>
              <div class="col-md-4">
                <label class="form-label" for="bank_account_status">Status</label>
                <select class="form-select" id="bank_account_status" name="status" required>
                  <option value="Active" @selected(old('status', 'Active') === 'Active')>Active</option>
                  <option value="Inactive" @selected(old('status') === 'Inactive')>Inactive</option>
                </select>
              </div>
              <div class="col-md-4">
                <label class="form-label" for="bank_account_sort_order">Sort Order</label>
                <input type="number" min="0" class="form-control" id="bank_account_sort_order" name="sort_order" value="{{ old('sort_order', 0) }}">
              </div>
              <div class="col-md-8">
                <label class="form-label" for="bank_account_notes">Notes</label>
                <input type="text" class="form-control" id="bank_account_notes" name="notes" maxlength="1000" value="{{ old('notes') }}" placeholder="Optional note">
              </div>
              <div class="col-12">
                <div class="form-check">
                  <input type="hidden" name="is_default" value="0">
                  <input class="form-check-input" type="checkbox" id="bank_account_is_default" name="is_default" value="1" @checked(old('is_default'))>
                  <label class="form-check-label" for="bank_account_is_default">
                    Set as default bank account (POS Card / Bank payments)
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content edt-modal">
        <form id="delete-confirm-form" method="post" action="#">
          @csrf
          @method('DELETE')
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="deleteConfirmModalLabel">Delete bank account</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="mb-0">Are you sure you want to delete <strong id="delete-confirm-name">this bank account</strong>? This action cannot be undone.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
@endpush

@push('scripts')
  <script src="{{ asset('assets/js/pages/bank-accounts.js') }}"></script>
@endpush