@extends('layouts/layoutMaster')

@section('title', 'List Sub Account')

@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/list-sub-account.js')
@endsection

@section('content')

@include('akuntansi::components.menu')
<div class="card">
  <div class="card-datatable table-responsive">
    <table class="datatables-sub-accounts table table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>Kode Akun</th>
          <th>Nama Akun</th>
          <th>Nama Sub Akun</th>
          <th>Nama</th>
          <th>Saldo</th>
          <th>Aksi</th>
          <th hidden></th>
        </tr>
      </thead>
      <tbody>
        @foreach ($listSubAccounts as $list)
          <tr>
            <td>{{ $list->id }}</td>
            <td>{{ $list->code }}</td>
            <td>{{ $list->account->account_name }}</td>
            <td>{{ $list->subAccount->name }}</td>
            <td>{{ $list->name }}</td>
            <td>{{ number_format($list->balance, 2) }}</td>
            <td>
              <button class="btn btn-sm btn-icon edit-record btn-text-primary rounded-pill waves-effect" data-id="{{ $list->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" data-id="{{ $list->id }}">
                <i class="ri-delete-bin-line ri-20px"></i>
              </button>
            </td>
            <td hidden>{{ $list->account->id }}</td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <!-- Offcanvas to add new list sub account -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddListSubAccount" aria-labelledby="offcanvasAddListSubAccountLabel">
    <div class="offcanvas-header border-bottom">
      <h5 id="offcanvasAddListSubAccountLabel" class="offcanvas-title">Tambah List Sub Account</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 id="addNewListSubAccountForm" class="row gy-3">
        @csrf
        <input type="hidden" id="list_sub_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="col-12">
          <div class="form-floating form-floating-outline">
            <select id="account_id" name="account_id" class="form-select select2">
              <option value="">Pilih Akun</option>
              @foreach ($accounts as $account)
                <option value="{{ $account->id }}">{{ $account->account_name }}</option>
              @endforeach
            </select>
            <label for="account_id">Account</label>
          </div>
        </div>

        <div class="col-12">
          <div class="form-floating form-floating-outline">
            <select id="sub_account_id" name="sub_account_id" class="form-select select2">
              <option value="">Pilih Sub Akun</option>
            </select>
            <label for="sub_account_id">Sub Account</label>
          </div>
        </div>

        <div class="col-12">
          <div class="form-floating form-floating-outline">
            <input type="text" class="form-control" id="name" name="name" placeholder="Nama" />
            <label for="name">Nama</label>
          </div>
        </div>

        <div class="col-12">
          <div class="form-floating form-floating-outline">
            <input type="number" class="form-control" id="balance" name="balance" placeholder="Saldo" step="0.01" />
            <label for="balance">Saldo</label>
          </div>
        </div>

        <div class="col-12 text-center">
          <button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit">Submit</button>
          <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection