@extends('layouts.app')
@section('title', __('accounting.journal'))
@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
  <h5 class="fw-bold mb-0">{{ __('accounting.journal') }}</h5>
  <button class="btn btn-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#entryForm"><i class="bi bi-plus-lg"></i> {{ __('accounting.add_entry') }}</button>
</div>

<div class="collapse mb-3" id="entryForm">
  <div class="card"><div class="card-body">
    <form method="POST" action="{{ route('accounting.journal.store') }}">@csrf
      <div class="row g-2 mb-2">
        <div class="col-md-3"><input type="date" name="date" value="{{ now()->toDateString() }}" class="form-control" required></div>
        <div class="col-md-9"><input name="description" class="form-control" placeholder="{{ __('app.description') }}"></div>
      </div>
      <table class="table align-middle" id="linesTable">
        <thead><tr><th style="min-width:260px">{{ __('treasury.account') }}</th><th>{{ __('accounting.debit') }}</th><th>{{ __('accounting.credit') }}</th><th></th></tr></thead>
        <tbody></tbody>
      </table>
      <button type="button" class="btn btn-sm btn-outline-primary mb-3" onclick="addLine()"><i class="bi bi-plus"></i></button>
      <div class="d-flex justify-content-between align-items-center">
        <div class="small">
          <span class="me-3">{{ __('accounting.debit') }}: <b id="totalDebit">0</b></span>
          <span>{{ __('accounting.credit') }}: <b id="totalCredit">0</b></span>
        </div>
        <button class="btn btn-primary px-4">{{ __('app.save') }}</button>
      </div>
    </form>
  </div></div>
</div>

<div class="card"><div class="card-body">
  @forelse($entries as $entry)
  <div class="border rounded p-3 mb-2">
    <div class="d-flex justify-content-between mb-1">
      <span class="fw-bold">{{ $entry->number }} — {{ $entry->date->format('Y-m-d') }}</span>
      <span class="small text-secondary">{{ $entry->user->name ?? '' }}</span>
    </div>
    @if($entry->description)<div class="small text-secondary mb-1">{{ $entry->description }}</div>@endif
    <table class="table table-sm mb-0 small">
      @foreach($entry->lines as $line)
      <tr>
        <td>{{ $line->account->code ?? '' }} — {{ $line->account->name ?? '' }}</td>
        <td class="text-success" style="width:120px">{{ $line->debit > 0 ? money($line->debit) : '' }}</td>
        <td class="text-danger" style="width:120px">{{ $line->credit > 0 ? money($line->credit) : '' }}</td>
      </tr>
      @endforeach
    </table>
  </div>
  @empty
  <p class="text-secondary small text-center py-4">{{ __('app.no_data') }}</p>
  @endforelse
  {{ $entries->links() }}
</div></div>
@endsection
@push('scripts')
<script>
const accounts = [@foreach($accounts as $account){id:{{ $account->id }},label:@json($account->code . ' — ' . $account->name)},@endforeach];
let li = 0;
function addLine() {
  const tb = document.querySelector('#linesTable tbody');
  const tr = document.createElement('tr');

  const tdA = document.createElement('td');
  const sel = document.createElement('select');
  sel.name = `lines[${li}][account_id]`;
  sel.className = 'form-select form-select-sm';
  sel.required = true;
  accounts.forEach(a => { const o = document.createElement('option'); o.value = a.id; o.textContent = a.label; sel.appendChild(o); });
  tdA.appendChild(sel);

  const tdD = document.createElement('td');
  tdD.innerHTML = `<input type="number" step="0.01" min="0" name="lines[${li}][debit]" value="0" class="form-control form-control-sm debit" oninput="sumTotals()">`;
  const tdC = document.createElement('td');
  tdC.innerHTML = `<input type="number" step="0.01" min="0" name="lines[${li}][credit]" value="0" class="form-control form-control-sm credit" oninput="sumTotals()">`;
  const tdX = document.createElement('td');
  tdX.innerHTML = `<button type="button" class="btn btn-sm btn-outline-danger"><i class="bi bi-x"></i></button>`;
  tdX.querySelector('button').addEventListener('click', () => { tr.remove(); sumTotals(); });

  tr.append(tdA, tdD, tdC, tdX);
  tb.appendChild(tr);
  li++;
}
function sumTotals() {
  let d = 0, c = 0;
  document.querySelectorAll('.debit').forEach(i => d += parseFloat(i.value) || 0);
  document.querySelectorAll('.credit').forEach(i => c += parseFloat(i.value) || 0);
  totalDebit.textContent = d.toFixed(2);
  totalCredit.textContent = c.toFixed(2);
  totalDebit.className = totalCredit.className = (d === c && d > 0) ? 'text-success' : 'text-danger';
}
addLine(); addLine();
</script>
@endpush