@extends('layouts/layoutMaster')

@section('title', 'Asset Transactions - 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/asset-transactions.js')
@endsection

@section('content')

<div class="card">
  <div class="card-datatable table-responsive">
    <table class="datatables-asset-transactions table table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>#</th>
          <th>Nama Aset</th>
          <th>Tanggal Transaksi</th>
          <th>Tipe Transaksi</th>
          <th>Harga Jual</th>
          <th>Nilai Buku</th>
          <th>Keuntungan / Kerugian</th>
          <th class="text-center">Aksi</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($transactions as $transaction)
          <tr>
            <td>{{ $transaction->id }}</td>
            <td>{{$loop->index + 1}}</td>
            <td>{{ $transaction->asset->name ?? '-' }}</td>
            <td>{{ $transaction->transaction_date }}</td>
            <td>{{ ucfirst($transaction->transaction_type) }}</td>
            <td>{{ rupiah_format($transaction->sale_price, 2) }}</td>
            <td>{{ rupiah_format($transaction->book_value, 2) }}</td>
            <td>{{ rupiah_format($transaction->profit_loss, 2) }}</td>
            <td class="text-center">
              <button class="btn btn-sm btn-icon delete-transaction btn-text-primary rounded-pill waves-effect" data-id="{{ $transaction->id }}"><i class="ri-delete-bin-line ri-20px"></i></button>
            </td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  <!-- Offcanvas untuk menambahkan transaksi -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddTransaction" aria-labelledby="offcanvasAddTransactionLabel">
    <div class="offcanvas-header border-bottom">
      <h5 id="offcanvasAddTransactionLabel" class="offcanvas-title">Tambah Transaksi</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="addTransactionForm pt-0" id="addNewTransactionForm">
        @csrf
        <div class="form-floating form-floating-outline mb-3">
          <select id="transaction-asset" name="asset_id" class="select2 form-select" data-placeholder="Pilih Aset">
            @foreach ($assets as $asset)
              <option value="{{ $asset->id }}">{{ $asset->name }}</option>
            @endforeach
          </select>
          <label for="transaction-asset">Aset</label>
        </div>
        <div class="form-floating form-floating-outline mb-3">
          <input type="date" class="form-control" id="transaction-date" placeholder="Tanggal Transaksi" name="transaction_date" aria-label="Tanggal Transaksi" required />
          <label for="transaction-date">Tanggal Transaksi</label>
        </div>
        <div class="form-floating form-floating-outline mb-3">
          <select id="transaction-type" name="transaction_type" class="select2 form-select" data-placeholder="Pilih Tipe">
            <option value="sale">Jual</option>
            <option value="disposal">Lepas</option>
          </select>
          <label for="transaction-type">Tipe Transaksi</label>
        </div>
        <div class="form-floating form-floating-outline mb-3">
          <input type="number" class="form-control" id="sale-price" placeholder="Harga Jual" name="sale_price" aria-label="Harga Jual" required />
          <label for="sale-price">Harga Jual</label>
        </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