@extends('layouts.app')

@section('title', 'Banking Details')

@section('content')
  <div class="card mb-3">
    <div class="card-header">
      <div class="row flex-between-center">
        <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
          <h5 class="fs-9 mb-0 text-nowrap py-2 py-xl-0">Banking Details</h5>
        </div>
        <div class="col-8 col-sm-auto text-end ps-2">
          <div id="table-banks-replace-element">
            @can('masters-business-partners-banking-details.create')
            <button class="btn btn-falcon-default btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#bankOffcanvas">
              <span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span>
              <span class="d-none d-sm-inline-block ms-1">New</span>
            </button>
            @endcan
            <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#bankFilters">
              <span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span>
              <span class="d-none d-sm-inline-block ms-1">Filter</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="collapse" id="bankFilters">
      <div class="card-body border-top fs-10">
        <div class="row g-3">
          <div class="col-md-3">
            <label class="form-label" for="filterSearch">Search</label>
            <input id="filterSearch" class="form-control form-control-sm" type="text" placeholder="Bank, IFSC, Account No, UPI">
          </div>
          <div class="col-md-2">
            <label class="form-label" for="filterEntity">Entity</label>
            <select id="filterEntity" class="form-select form-select-sm">
              <option value="">All</option>
              <option value="vendor">Vendor</option>
              <option value="customer">Customer</option>
            </select>
          </div>
          <div class="col-md-2">
            <label class="form-label" for="filterType">Account Type</label>
            <select id="filterType" class="form-select form-select-sm">
              <option value="">All</option>
              <option value="SAVINGS">SAVINGS</option>
              <option value="CURRENT">CURRENT</option>
              <option value="OD">OD</option>
              <option value="CC">CC</option>
              <option value="NRE">NRE</option>
              <option value="NRO">NRO</option>
            </select>
          </div>
          <div class="col-md-2">
            <label class="form-label" for="filterPrimary">Primary</label>
            <select id="filterPrimary" class="form-select form-select-sm">
              <option value="">All</option>
              <option value="1">Yes</option>
              <option value="0">No</option>
            </select>
          </div>
          <div class="col-md-2">
            <label class="form-label" for="filterActive">Active</label>
            <select id="filterActive" class="form-select form-select-sm">
              <option value="">All</option>
              <option value="1">Active</option>
              <option value="0">Inactive</option>
            </select>
          </div>
          <div class="col-md-1 d-flex align-items-end">
            <div class="d-grid gap-2 d-md-flex">
              <button id="applyBankFilters" type="button" class="btn btn-primary btn-sm">Apply</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card-body p-0">
      <div class="table-responsive scrollbar">
        <table class="table table-sm table-striped fs-10 mb-0">
          <thead class="bg-200">
            <tr>
              <th>Entity</th>
              <th>Bank</th>
              <th>Branch</th>
              <th>Account No</th>
              <th>Holder</th>
              <th>IFSC</th>
              <th>Type</th>
              <th>UPI</th>
              <th>Primary</th>
              <th>Active</th>
              @canany(['masters-business-partners-banking-details.update','masters-business-partners-banking-details.delete'])
              <th>Action</th>
              @endcanany
            </tr>
          </thead>
          <tbody id="table-banks-body">
            <tr>
              <td colspan="11" class="text-center py-4 text-muted">Use filters and actions above to manage bank accounts</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div id="laravel_paginator" class="p-2"></div>
    </div>
  </div>

  <!-- Offcanvas Form -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="bankOffcanvas" aria-labelledby="bankOffcanvasLabel" style="width: 40%">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="bankOffcanvasLabel">Add Bank</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
      <div class="card">
        <div class="card-body">
          <form id="bankForm">
            @csrf
            <input type="hidden" id="bank_id" />
            <div class="row ">
              <div class="col-md-6">
                <label class="form-label">Entity Type *</label>
                <select id="entity_type" class="form-select form-select-sm" >
                  <option value="">Select Entity Type</option>
                  <option value="vendor">Vendor</option>
                  <option value="customer">Customer</option>
                </select>
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Entity *</label>
                <select id="entity_selector" class="form-select d-none form-select-sm" >
                  <option value="">Select Entity</option>
                </select>
                <input id="entity_id" class="form-control form-control-sm" type="number" placeholder="Enter entity ID" >
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Bank Name *</label>
                <input id="bank_name" class="form-control form-control-sm" type="text"  maxlength="100">
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Branch Name *</label>
                <input id="branch_name" class="form-control form-control-sm" type="text"  maxlength="100">
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Account Number *</label>
                <input id="account_number" class="form-control form-control-sm" type="text"  maxlength="20" pattern="[0-9]+">
                <div class="invalid-feedback"></div>
                <div class="form-text">Numbers only</div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Account Holder Name *</label>
                <input id="account_holder_name" class="form-control form-control-sm" type="text"  maxlength="100">
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">IFSC Code *</label>
                <input id="ifsc_code" class="form-control form-control-sm" type="text"  maxlength="11" pattern="[A-Z]{4}0[A-Z0-9]{6}" placeholder="XXXX0YYYYYY" style="text-transform: uppercase;">
                <div class="invalid-feedback"></div>
                <div class="form-text">Format: BANK0BRANCH (11 chars)</div>
              </div>
              <div class="col-md-6">
                <label class="form-label">SWIFT Code</label>
                <input id="swift_code" class="form-control form-control-sm" type="text" maxlength="11" pattern="[A-Z]{6}[A-Z0-9]{2}([A-Z0-9]{3})?" style="text-transform: uppercase;">
                <div class="invalid-feedback"></div>
                <div class="form-text">8 or 11 characters (optional)</div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Account Type *</label>
                <select id="account_type" class="form-select form-select-sm" >
                  <option value="">Select Account Type</option>
                  <option value="SAVINGS">SAVINGS</option>
                  <option value="CURRENT">CURRENT</option>
                  <option value="OD">OVERDRAFT</option>
                  <option value="CC">CASH CREDIT</option>
                  <option value="NRE">NRE</option>
                  <option value="NRO">NRO</option>
                </select>
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">UPI ID</label>
                <input id="upi_id" class="form-control form-control-sm" type="text" maxlength="50" pattern="[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+">
                <div class="invalid-feedback"></div>
                <div class="form-text">Format: username@bank (optional)</div>
              </div>
              <div class="col-md-6 d-flex align-items-end">
                <div class="form-check">
                  <input id="is_primary" class="form-check-input" type="checkbox">
                  <label class="form-check-label" for="is_primary">Primary</label>
                </div>
              </div>
              <div class="col-md-6 d-flex align-items-end">
                <div class="form-check">
                  <input id="is_active" class="form-check-input" type="checkbox" checked>
                  <label class="form-check-label" for="is_active">Active</label>
                </div>
              </div>
              <div class="col-12">
                <label class="form-label">Notes</label>
                <textarea id="notes" class="form-control form-control-sm" rows="2"></textarea>
              </div>
            </div>
            <div class="d-flex justify-content-end mt-4">
              <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="offcanvas">Cancel</button>
              <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
<script>
  // Expose caps and current company to JS
  @php
    $pageCaps = isset($caps) && is_array($caps) ? $caps : [
      'view'=>false,'create'=>false,'update'=>false,'delete'=>false,'export'=>false,'toggle'=>false
    ];
    $__currentCompanyId = session('company_id');
    $vendorCaps = isset($vendorCaps) && is_array($vendorCaps) ? $vendorCaps : ['view'=>false,'create'=>false,'update'=>false,'delete'=>false];
    $customerCaps = isset($customerCaps) && is_array($customerCaps) ? $customerCaps : ['view'=>false,'create'=>false,'update'=>false,'delete'=>false];
  @endphp
  window.pageCaps = @json($pageCaps);
  window.currentCompanyId = @json($__currentCompanyId);
  window.vendorCaps = @json($vendorCaps);
  window.customerCaps = @json($customerCaps);
</script>
<script src="{{ asset('assets/js/common/get_requested_data_global.js') }}"></script>
<script src="{{ asset('assets/js/custom/business_partners/banking_details.js') }}"></script>
@endpush