@extends('layouts/layoutMaster')

@section('title', 'Bank Account List - Akuntansi')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
  'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/@form-validation/form-validation.scss'
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/moment/moment.js',
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/select2/select2.js',
  'resources/assets/vendor/libs/@form-validation/popular.js',
  'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
  'resources/assets/vendor/libs/@form-validation/auto-focus.js'
])
@endsection

@section('page-script')
@vite('Modules/Akuntansi/resources/assets/js/bank-account.js')
@endsection

@section('content')

<div class="card">
  <div class="card-datatable table-responsive">
    <table class="datatables-bank-account table table-hover">
      <thead>
        <tr>
          <th></th>
          <th hidden>ID</th>
          <th>#</th>
          <th>Nama Akun Bank</th>
          <th>Nomor Akun/Rekening</th>
          <th>Kode</th>
          <th>Saldo</th>
          <th class="text-center">Actions</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($bankAccounts as $bankAccount)
          <tr>
            <td></td>
            <td hidden>{{ $bankAccount->id }}</td>
            <td>{{ $loop->index + 1 }}</td>
            <td>{{ $bankAccount->name }}</td>
            <td>{{ $bankAccount->account_number }}</td>
            <td>{{ $bankAccount->code }}</td>
            <td>Rp. {{ number_format($bankAccount->calculated_balance, 2) }}</td>
            <td class="text-center">
              <button class="btn btn-sm btn-icon edit-record btn-text-primary rounded-pill waves-effect" data-branch-id="{{ $bankAccount->branch_id }}"><i class="ri-edit-box-line ri-20px"></i></button>
              <button class="btn btn-sm btn-icon delete-record btn-text-primary rounded-pill waves-effect"><i class="ri-delete-bin-line ri-20px"></i></button>
              <button class="btn btn-sm btn-icon view-mutation btn-text-primary rounded-pill waves-effect" data-id="{{ $bankAccount->id }}"><i class="ri-history-line ri-20px"></i></button>
            </td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <!-- Transfer Modal -->
  <div class="modal fade" id="transferModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Transfer Antar Akun</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="transferForm">
            <div class="mb-3">
              <label class="form-label">Dari Akun</label>
              <select class="form-select" name="from_account" required>
                <option value="">Pilih Akun</option>
                @foreach($bankAccounts as $account)
                  <option value="{{ $account->id }}">{{ $account->name }} - {{ $account->account_number }} (Saldo: {{ number_format($account->calculated_balance, 2) }})</option>
                @endforeach
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label">Ke Akun</label>
              <select class="form-select" name="to_account" required>
                <option value="">Pilih Akun</option>
                @foreach($bankAccounts as $account)
                  <option value="{{ $account->id }}">{{ $account->name }} - {{ $account->account_number }} (Saldo: {{ number_format($account->calculated_balance, 2) }})</option>
                @endforeach
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label">Jumlah</label>
              <input type="number" class="form-control" name="amount" required>
            </div>
            <div class="mb-3">
              <label class="form-label">Keterangan</label>
              <textarea class="form-control" name="description" rows="3"></textarea>
            </div>
            <div class="text-end">
              <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Batal</button>
              <button type="submit" class="btn btn-primary">Transfer</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Mutation Modal -->
  <div class="modal fade" id="mutationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Mutasi Rekening</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row mb-4">
            <div class="col-md-6">
              <div class="card">
                <div class="card-body">
                  <h6 class="card-title">Informasi Rekening</h6>
                  <div class="row">
                    <div class="col-6">
                      <p class="mb-1">Nama Rekening:</p>
                      <p class="mb-1">Nomor Rekening:</p>
                      <p class="mb-1">Saldo Akhir:</p>
                    </div>
                    <div class="col-6">
                      <p class="mb-1 fw-bold" id="mutationAccountName"></p>
                      <p class="mb-1 fw-bold" id="mutationAccountNumber"></p>
                      <p class="mb-1 fw-bold" id="mutationAccountBalance"></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card">
                <div class="card-body">
                  <h6 class="card-title">Filter Mutasi</h6>
                  <div class="row g-3">
                    <div class="col-md-6">
                      <input type="date" class="form-control" id="startDate" placeholder="Tanggal Mulai">
                    </div>
                    <div class="col-md-6">
                      <input type="date" class="form-control" id="endDate" placeholder="Tanggal Akhir">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="table-responsive">
            <table class="table table-hover" id="mutationTable">
              <thead>
                <tr>
                  <th>Tanggal</th>
                  <th>Jenis</th>
                  <th>Rekening</th>
                  <th class="text-end">Jumlah</th>
                  <th class="text-end">Saldo</th>
                  <th>Keterangan</th>
                </tr>
              </thead>
              <tbody>
                <!-- Mutation data will be loaded here -->
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Tutup</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Offcanvas to add new bank account -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddBankAccount" aria-labelledby="offcanvasAddBankAccountLabel">
  <div class="offcanvas-header border-bottom">
    <h5 id="offcanvasAddBankAccountLabel" class="offcanvas-title">Tambah Akun Bank</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body mx-0 flex-grow-0 h-100">
    <form class="addBankAccountForm pt-0" id="addNewBankAccountForm" enctype="multipart/form-data">
      <input type="hidden" id="bank_account_id" name="id" value="">
      <input type="hidden" id="company_id" name="company_id" value="{{auth()->user()->company_id}}">
      
      <div class="alert alert-info mb-4">
        <div class="d-flex align-items-center">
          <i class="ri-information-line me-2"></i>
          <div>
            <p class="mb-0">Akun bank akan otomatis terhubung ke Akun <strong>Aset Lancar</strong> dan Sub Akun <strong>Kas</strong>. Setiap akun bank yang dibuat akan otomatis membuat List Sub Account yang sesuai.</p>
          </div>
        </div>
      </div>
      
      <div class="form-floating form-floating-outline mb-4">
        <select class="form-select" id="branch_id" name="branch_id" aria-label="Cabang">
          @if(auth()->user()->branch_id)
            <option value="{{ auth()->user()->branch_id }}" selected>{{ auth()->user()->branch->branch_name }}</option>
          @else
            @foreach($branches as $branch)
              <option value="{{ $branch->id }}">{{ $branch->branch_name }}</option>
            @endforeach
          @endif
        </select>
        <label for="branch_id">Cabang</label>
      </div>
      
      <div class="form-floating form-floating-outline mb-4">
        <input type="text" class="form-control" id="bank-account-name" placeholder="Nama Akun Bank" name="name" aria-label="Nama Akun Bank" />
        <label for="bank-account-name">Nama Akun Bank</label>
      </div>
      <div class="form-floating form-floating-outline mb-4">
        <input type="text" class="form-control" id="account-number" placeholder="Nomor Akun" name="account_number" aria-label="Nomor Akun" />
        <label for="account-number">Nomor Rekening/Akun</label>
      </div>
      <div class="form-floating form-floating-outline mb-4">
        <input type="text" class="form-control" id="bank-code" placeholder="Kode" name="code" aria-label="Kode" />
        <label for="bank-code">Kode</label>
      </div>
      <div class="form-floating form-floating-outline mb-4">
        <input type="number" class="form-control" id="balance" placeholder="Saldo" name="balance" aria-label="Saldo" />
        <label for="balance">Saldo</label>
      </div>
      <button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit">Submit</button>
      <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Batal</button>
    </form>
  </div>
</div>
@endsection