@extends('layouts/layoutMaster')

@section('title', 'Daftar Cash Flow Transactions')

@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/cashflow.js')
@endsection

@section('content')
<div class="card mb-4">
  <div class="card-body">
      <!-- Informasi Akun dan Filter -->
      <div class="row mb-3">
          <div class="col-md-6">
              <h5 class="card-title">Laporan Transaksi</h5>
          </div>
      </div>

      <!-- Form Filter -->
      <form id="filterForm">
          <div class="row g-3">
              <div class="col-md-3">
                  <label for="start_date">Rentang Tanggal Awal:</label>
                  <input type="date" name="start_date" id="start_date" class="form-control" value="{{ request('start_date') }}">
              </div>
              <div class="col-md-3">
                  <label for="end_date">Rentang Tanggal Akhir:</label>
                  <input type="date" name="end_date" id="end_date" class="form-control" value="{{ request('end_date') }}">
              </div>
              <div class="col-md-3">
                  <label for="account_id_filter">Akun:</label>
                  <select name="account_id" id="account_id_filter" class="form-select select2">
                      <option value="">Pilih Akun</option>
                      @foreach ($accounts as $account)
                          <option value="{{ $account->id }}" {{ request('account_id') == $account->id ? 'selected' : '' }}>
                              {{ $account->account_name }}
                          </option>
                      @endforeach
                  </select>
              </div>
              <div class="col-md-3">
                <label for="transaction_type_filter">Jenis Transaksi:</label>
                <select name="transaction_type" id="transaction_type_filter" class="form-select select2">
                    <option value="">Pilih Jenis Transaksi</option>

                        <option value="pembelian" {{ request('transaction_type_filter') == "pembelian" ? 'selected' : '' }}>
                            Pembelian
                        </option>
                        <option value="penjualan" {{ request('transaction_type_filter') == "penjualan" ? 'selected' : '' }}>
                          Penjualan
                        </option>
                        <option value="pengeluaran" {{ request('transaction_type_filter') == "pengeluaran" ? 'selected' : '' }}>
                          Pengeluaran
                        </option>

                </select>
            </div>
          </div>

          <!-- Tombol Filter dan Clear -->
          <div class="row mt-3">
              <div class="col-md-12 d-flex justify-content-end">
                  <button type="submit" class="btn btn-primary me-2">Filter</button>
                  <button type="button" id="clearFilterButton" class="btn btn-secondary">Clear Filter</button>
              </div>
          </div>
      </form>
  </div>
</div>

<div class="card">
  <!-- DataTables untuk Cash Flow Transactions -->
  <div class="card-body">

  <div class="card-datatable table-responsive">
    <table class="datatables-transactions table table-bordered table-hover">
      <thead class="table-dark">
        <tr>
          <th></th>
          <th>Kode Transaksi</th>
          <th>Nama Transaksi</th>
          <th>Akun</th>
          <th>Deskripsi</th>
          <th>Jenis Transaksi</th>
          <th>Jumlah</th>
          <th>Tanggal</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($transactions as $transaction)
        <tr>
          <td></td>
          <td>{{ $transaction->transaction_code }}</td>
          <td>{{ $transaction->transaction_name }}</td>
          <td>{{ $transaction->account->account_name ?? '-'}}</td>
          <td>{{ $transaction->description }}</td>
          <td>
              @if ($transaction->transaction_type == 'penjualan')
                  <span class="badge bg-success">Penjualan</span>
              @elseif ($transaction->transaction_type == 'pembelian')
                  <span class="badge bg-warning text-dark">Pembelian</span>
              @else
                  <span class="badge bg-danger">Pengeluaran</span>
              @endif
          </td>
          <td>{{ rupiah_format($transaction->amount, 2) }}</td>
          <td>{{ formatTanggalIndonesia($transaction->transaction_date) }}</td>
          <td>
            <button class="btn btn-sm btn-icon edit-record btn-text-primary rounded-pill waves-effect" data-id="{{ $transaction->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="{{ $transaction->id }}"><i class="ri-delete-bin-line ri-20px"></i></button>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
  </div>

  <!-- Offcanvas untuk menambahkan atau mengedit 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 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="addTransactionForm pt-0" id="addNewTransactionForm" enctype="multipart/form-data">
        @csrf
        <input type="hidden" id="transaction_id" name="id" value="">

        <!-- Nama Transaksi -->
        <div class="form-floating form-floating-outline mb-3">
          <input type="text" class="form-control" id="transaction_name" placeholder="Nama Transaksi" name="transaction_name" required/>
          <label for="transaction_name">Nama Transaksi</label>
        </div>

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

        <!-- Jenis Transaksi -->
        <div class="form-floating form-floating-outline mb-3">
          <select id="transaction_type" name="transaction_type" class="select2 form-select" required>
            <option value="">Pilih Jenis Transaksi</option>
            <option value="penjualan">Penjualan</option>
            <option value="pembelian">Pembelian</option>
            <option value="pengeluaran">Pengeluaran</option>
          </select>
          <label for="transaction_type">Jenis Transaksi</label>
        </div>

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

        <!-- Jumlah -->
        <div class="form-floating form-floating-outline mb-3">
          <input type="number" class="form-control" id="amount" placeholder="Jumlah" name="amount" required/>
          <label for="amount">Jumlah</label>
        </div>

        <!-- Tanggal Transaksi -->
        <div class="form-floating form-floating-outline mb-3">
          <input type="date" class="form-control" id="transaction_date" placeholder="Tanggal Transaksi" name="transaction_date" required/>
          <label for="transaction_date">Tanggal Transaksi</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