@extends('layouts/layoutMaster')

@section('title', 'Tambah Jurnal')

@section('content')

<div class="card">
  <div class="card-header">
    <h5 class="card-title mb-4">Tambah Jurnal Baru</h5>
  </div>

  <div class="card-body">
    <form action="" method="POST" id="journalForm">
      @csrf

      <!-- Nomor Referensi -->
      <div class="form-floating form-floating-outline mb-3">
        <input type="text" class="form-control" id="reference" placeholder="Nomor Referensi" name="reference"/>
        <label for="reference">Nomor Referensi</label>
      </div>

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

      <!-- Tabel Entri Jurnal -->
      <div class="table-responsive">
        <table class="table table-bordered" id="journalEntriesTable">
          <thead>
            <tr>
              <th>#</th>
              <th>Akun</th>
              <th>Debet</th>
              <th>Kredit</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="journalEntriesBody">
            <tr>
              <td>1</td>
              <td>
                <select name="entries[0][account_id]" class="form-select" required>
                  <option value="">Silahkan pilih</option>
                  @foreach ($subAccounts as $subAccount)
                    <option value="{{ $subAccount->id }}">
                      {{ $subAccount->name }} - {{ $subAccount->account->account_name }}
                    </option>
                  @endforeach
                </select>
              </td>
              <td><input type="number" name="entries[0][debit]" class="form-control debit-input" placeholder="Debet"></td>
              <td><input type="number" name="entries[0][credit]" class="form-control credit-input" placeholder="Kredit"></td>
              <td><button type="button" class="btn btn-danger remove-entry">Hapus</button></td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th colspan="2" class="text-right">Total:</th>
              <th><input type="text" class="form-control" id="totalDebit" value="0" readonly></th>
              <th><input type="text" class="form-control" id="totalCredit" value="0" readonly></th>
              <th></th>
            </tr>
          </tfoot>
        </table>

      </div>

      <!-- Tombol Tambah Baris dan Simpan Jurnal -->
      <div class="d-flex justify-content-between mt-3">
        <!-- Button Tambah Baris -->
        <button type="button" id="addEntryButton" class="btn btn-primary">Tambah Baris</button>

        <!-- Button Simpan Jurnal -->
        <button type="submit" class="btn btn-success">Simpan Jurnal</button>
      </div>
    </form>
  </div>
</div>

@endsection
<script>
  document.addEventListener('DOMContentLoaded', function () {
    let entryIndex = 1; // Untuk melacak jumlah entri

    // Fungsi untuk memperbarui nomor urut
    function updateRowNumbers() {
      const rows = document.querySelectorAll('#journalEntriesBody tr');
      rows.forEach((row, index) => {
        row.querySelector('td:first-child').innerText = index + 1; // Perbarui nomor urut
      });
    }

    // Fungsi untuk menghitung total debit dan kredit
    function calculateTotals() {
      let totalDebit = 0;
      let totalCredit = 0;

      document.querySelectorAll('.debit-input').forEach(function (input) {
        const value = parseFloat(input.value) || 0;
        totalDebit += value;
      });

      document.querySelectorAll('.credit-input').forEach(function (input) {
        const value = parseFloat(input.value) || 0;
        totalCredit += value;
      });

      document.getElementById('totalDebit').value = totalDebit.toFixed(2);
      document.getElementById('totalCredit').value = totalCredit.toFixed(2);
    }

    // Fungsi untuk menambah baris entri jurnal
    document.getElementById('addEntryButton').addEventListener('click', function () {
      const tableBody = document.getElementById('journalEntriesBody');
      const newRow = document.createElement('tr');

      newRow.innerHTML = `
        <td></td>
        <td>
          <select name="entries[${entryIndex}][account_id]" class="form-select" required>
            <option value="">Silahkan pilih</option>
            @foreach ($accounts as $account)
              <option value="{{ $account->id }}">{{ $account->account_name }}</option>
            @endforeach
          </select>
        </td>
        <td><input type="number" name="entries[${entryIndex}][debit]" class="form-control debit-input" placeholder="Debet"></td>
        <td><input type="number" name="entries[${entryIndex}][credit]" class="form-control credit-input" placeholder="Kredit"></td>
        <td><button type="button" class="btn btn-danger remove-entry">Hapus</button></td>
      `;

      tableBody.appendChild(newRow);
      entryIndex++; // Tambah indeks entri
      updateRowNumbers(); // Perbarui nomor urut setelah menambah
      calculateTotals(); // Hitung ulang total setelah menambah
    });

    // Fungsi untuk menghapus baris entri jurnal
    document.getElementById('journalEntriesTable').addEventListener('click', function (event) {
      if (event.target.classList.contains('remove-entry')) {
        const row = event.target.closest('tr');
        row.remove();
        updateRowNumbers(); // Perbarui nomor urut setelah menghapus
        calculateTotals(); // Hitung ulang total setelah menghapus
      }
    });

    // Hitung total setiap kali input debit atau kredit diubah
    document.getElementById('journalEntriesTable').addEventListener('input', function (event) {
      if (event.target.classList.contains('debit-input') || event.target.classList.contains('credit-input')) {
        calculateTotals(); // Hitung ulang total ketika ada perubahan
      }
    });
  });
</script>