@extends('layouts/layoutMaster')

@section('title', 'Assets - Asset Management')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.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/assets.js')
@endsection

@section('content')

<div class="card">
  <div class="card-header">
    <h5 class="card-title mb-4">Aset Aktif</h5>
    <div class="d-flex justify-content-between align-items-center row gap-5 gx-6 gap-md-0">
      <div class="col-md-4 asset_filter"></div>
      <div class="col-md-4 depreciation_date"></div>
    </div>
  </div>

  <!-- DataTables for Assets -->
  <div class="card-datatable table-responsive">
    <table class="datatables-assets table table-hover">
      <thead>
        <tr>
          <th></th>
          <th hidden>ID</th>
          <th>#</th>
          <th>Nama Aset</th>
          <th>Tanggal Pembelian</th>
          <th>Harga Pembelian</th>
          <th>Nilai Buku</th>
          <th>Total Penyusutan</th>
          <th>Tanggal Penyusutan</th>
          <th>Umur Aset (Tahun)</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($assets as $asset)
        <tr>
          <td></td>
          <td hidden>{{ $asset->id }}</td>
          <td>{{ $loop->index + 1 }}</td>
          <td>{{ $asset->name }}</td>
          <td>{{ $asset->acquisition_date ?? ' ' }}</td>
          <td>{{ rupiah_format($asset->acquisition_cost) }}</td>
          <td>{{ rupiah_format($asset->book_value) }}</td>
          <td>{{ rupiah_format($asset->depreciations->sum('depreciation_amount')) }}</td>
          <td>{{ $asset->tanggal_penyusutan ?? ' ' }}</td>
          <td>{{ $asset->useful_life }}</td>
          <td>
            <button class="btn btn-sm btn-icon edit-record btn-text-primary rounded-pill waves-effect" data-id="{{ $asset->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="{{ $asset->id }}"><i class="ri-delete-bin-line ri-20px"></i></button>
            <button class="btn btn-sm btn-icon calculate-depreciation btn-text-primary rounded-pill waves-effect" data-id="{{ $asset->id }}"><i class="ri-calculator-line ri-20px"></i></button>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <!-- Off-canvas for Adding or Editing Asset -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddAsset" aria-labelledby="offcanvasAddAssetLabel">
    <div class="offcanvas-header border-bottom">
      <h5 id="offcanvasAddAssetLabel" class="offcanvas-title">Tambah Aset Baru</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="addAssetForm pt-0" id="addNewAssetForm" enctype="multipart/form-data">
        <input type="hidden" id="asset_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-3">
          <input type="text" class="form-control" id="asset-name" placeholder="Nama Aset" name="name" required />
          <label for="asset-name">Nama Aset</label>
        </div>

        <div class="form-floating form-floating-outline mb-3">
          <input type="text" class="form-control" id="asset-number" placeholder="Nomor Aset" name="asset_number" required />
          <label for="asset-number">Nomor Aset</label>
        </div>

        <div class="form-floating form-floating-outline mb-3">
          <select id="asset-account" name="asset_account" class="select2 form-select" data-placeholder="Pilih Akun Aset Tetap" required>
            <option value="">Pilih Akun Aset Tetap</option>
            @foreach ($accounts as $account)
              <option value="{{ $account->id }}">{{ $account->account_name }}</option>
            @endforeach
          </select>
        </div>

        <div class="form-floating form-floating-outline mb-3">
          <textarea class="form-control" id="asset-description" placeholder="Deskripsi" name="description"></textarea>
          <label for="asset-description">Deskripsi</label>
        </div>

        <div class="row">
          <div class="col-md-6">
            <div class="form-floating form-floating-outline mb-3">
              <input type="date" class="form-control" id="acquisition-date" placeholder="Tanggal Akuisisi" name="acquisition_date" required />
              <label for="acquisition-date">Tanggal Akuisisi</label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-floating form-floating-outline mb-3">
              <input type="number" class="form-control" id="acquisition-cost" placeholder="Biaya Akuisisi" name="acquisition_cost" required />
              <label for="acquisition-cost">Biaya Akuisisi</label>
            </div>
          </div>
        </div>

        <div class="col-md-12">
          <div class="form-floating form-floating-outline mb-3">
            <select id="credited-account" name="credited_account" class="select2 form-select" data-placeholder="Pilih Akun Dikreditkan" required>
              <option value="">Pilih Akun Dikreditkan</option>
              @foreach ($accounts as $account)
                <option value="{{ $account->id }}">{{ $account->account_name }}</option>
              @endforeach
            </select>
            <label for="credited-account">Akun Dikreditkan</label>
          </div>
        </div>

        <!-- Depreciation -->
        <h5>Penyusutan</h5>
        <div class="d-flex justify-content-between align-items-center border-top pt-2">
          <p class="mb-3">Aset non-depresiasi</p>
          <div class="w-25 d-flex justify-content-end">
            <div class="form-check form-switch me-n3 mb-3">
              <input type="checkbox" class="form-check-input" id="depresiasi-checkbox" />
            </div>
          </div>
        </div>

        <div id="depreciation-method-container" style="display: none;">
          <div class="form-floating form-floating-outline mb-3">
            <select id="depreciation-method" class="select2 form-select" name="depreciation_method">
              <option value="">Pilih Metode Penyusutan</option>
              <option value="straight-line">Straight Line</option>
              <option value="declining-balance">Declining Balance</option>
            </select>
            <label for="depreciation-method">Metode Penyusutan</label>
          </div>
        </div>

        <!-- Depreciation Form Fields (Initially Hidden) -->
        <div id="depreciation-form" style="display: none;">
          <div data-method="straight-line" style="display: none;">
            <div class="form-floating form-floating-outline mb-3">
              <input type="number" class="form-control" id="useful-life" placeholder="Masa Manfaat (Tahun)" name="useful_life" required />
              <label for="useful-life">Masa Manfaat (Tahun)</label>
            </div>
            <div class="form-floating form-floating-outline mb-3">
              <input type="number" class="form-control" id="salvage-value" name="salvage_value" placeholder="Nilai Sisa" required />
              <label for="salvage-value">Nilai Sisa</label>
            </div>
          </div>
          <div data-method="declining-balance" style="display: none;">
            <div class="form-floating form-floating-outline mb-3">
              <input type="number" class="form-control" id="annual-rate" placeholder="Nilai / Tahun (%)" name="annual_rate" required />
              <label for="annual-rate">Nilai / Tahun (%)</label>
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="form-floating form-floating-outline mb-3">
            <select id="akun-depresiasi" name="akun-depresiasi" class="select2 form-select" data-placeholder="Pilih Akun Penyusutan" required>
              <option value="">Pilih Akun Penyusutan</option>
              @foreach ($accounts as $account)
                <option value="{{ $account->id }}">{{ $account->account_name }}</option>
              @endforeach
            </select>
            <label for="akun-depresiasi">Pilih Akun Penyusutan</label>
          </div>
        </div>

        <div class="col-md-12">
          <div class="form-floating form-floating-outline mb-3">
            <select id="akun-depresiasi-akumulasi" name="akun-depresiasi-akumulasi" class="select2 form-select" data-placeholder="Pilih Akumulasi Akun Penyusutan" required>
              <option value="">Akumulasi Akun Penyusutan</option>
              @foreach ($accounts as $account)
                <option value="{{ $account->id }}">{{ $account->account_name }}</option>
              @endforeach
            </select>
            <label for="akun-depresiasi-akumulasi">Akumulasi Akun Penyusutan</label>
          </div>
        </div>

        <div class="col-md-12">
          <div class="form-floating form-floating-outline mb-3">
            <input type="date" class="form-control" id="tanggal_penyusutan" placeholder="Pada Tanggal" name="tanggal_penyusutan"/>
            <label for="tanggal_penyusutan">Pada Tanggal</label>
          </div>
        </div>

        <button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit">Simpan</button>
        <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Batal</button>
      </form>
    </div>
  </div>
</div>
@endsection