//akun
@extends('layouts/layoutMaster')

@section('title', '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',
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/select2/select2.js',
])
@endsection

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

@section('content')
@include('akuntansi::components.menu')

<div class="card">
  <!-- Add card header with buttons -->
  <div class="card-header border-bottom">
    <h5 class="card-title mb-0">Daftar Akun</h5>
    <div class="dt-action-buttons d-flex align-items-center justify-content-md-end justify-content-center flex-wrap mt-2 mt-md-0 gap-2">

    </div>
  </div>

  <div class="card-datatable table-responsive">
    <table class="datatables-account table table-hover">
      <thead>
        <tr>
          <th></th>
          <th hidden>ID</th>
          <th>#</th>
          <th>Kode Akun</th>
          <th>Nama Akun</th>
          <th>Jenis Akun</th>
          <th class="text-center">Actions</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($accounts as $account)
          <tr>
            <td></td>
            <td hidden>{{ $account->id }}</td>
            <td>{{ $loop->index + 1 }}</td>
            <td>{{ $account->account_code }}</td>
            <td>{{ $account->account_name }}</td>
            <td>{{ $account->account_type }}</td>
            <td class="text-center">
              <button class="btn btn-sm btn-icon edit-record btn-text-primary rounded-pill waves-effect">
                <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>
            </td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <!-- Offcanvas to add new account -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddAccount" aria-labelledby="offcanvasAddAccountLabel">
    <div class="offcanvas-header border-bottom">
      <h5 id="offcanvasAddAccountLabel" class="offcanvas-title">Tambah Akun</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="addAccountForm pt-0" id="addNewAccountForm" enctype="multipart/form-data">
        <input type="hidden" id="account_id" name="id" value="">
        <input type="hidden" id="company_id" name="company_id" value="{{auth()->user()->company_id}}">
        <input type="hidden" id="branch_id" name="branch_id" value="{{auth()->user()->branch_id}}">
        <div class="form-floating form-floating-outline mb-4">
          <input type="text" class="form-control" id="account-code" placeholder="Kode Akun" name="account_code" aria-label="Kode Akun" />
          <label for="account-code">Kode Akun</label>
        </div>
        <div class="form-floating form-floating-outline mb-4">
          <input type="text" class="form-control" id="account-name" placeholder="Nama Akun" name="account_name" aria-label="Nama Akun" />
          <label for="account-name">Nama Akun</label>
        </div>
        <div class="form-floating form-floating-outline mb-4">
          <select id="account-type" name="account_type" class="select2 form-select" data-placeholder="Jenis Akun">
            <option value="asset">Asset</option>
            <option value="liability">Liability</option>
            <option value="equity">Equity</option>
            <option value="revenue">Revenue</option>
            <option value="expense">Expense</option>
          </select>
          <label for="account-type">Jenis Akun</label>
        </div>
        <div class="d-flex justify-content-between gap-2">
          <button type="submit" class="btn btn-primary flex-grow-1 data-submit">Submit</button>
          <button type="reset" class="btn btn-outline-secondary flex-grow-1" data-bs-dismiss="offcanvas">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection