@extends('layouts.app')
@section('content')
<h3>Create Journal</h3>
<form method="POST" action="{{ route('journals.store') }}" id="journalForm">
  @csrf
  <div class="row">
    <div class="col-md-3"><label>Date</label><input type="date" name="date" value="{{ old('date', now()->format('Y-m-d')) }}" class="form-control"></div>
    <div class="col-md-3"><label>Ref</label><input name="ref" class="form-control" value="{{ old('ref') }}"></div>
    <div class="col-md-6"><label>Description</label><input name="description" class="form-control" value="{{ old('description') }}"></div>
  </div>

  <h5 class="mt-3">Entries</h5>
  <table class="table" id="entriesTable">
    <thead><tr><th>Account</th><th>Type</th><th>Amount</th><th>Memo</th><th></th></tr></thead>
    <tbody>
      <tr class="entryRow">
        <td>
          <select name="entries[0][account_id]" class="form-control">
            @foreach($accounts as $acc)
              <option value="{{ $acc->id }}">{{ $acc->code }} - {{ $acc->name }}</option>
            @endforeach
          </select>
          
        </td>
        <td>
          <select name="entries[0][type]" class="form-control">
            <option value="debit">Debit</option><option value="credit">Credit</option>
          </select>
        </td>
        <td><input name="entries[0][amount]" class="form-control amount" value="0.00"></td>
        <td><input name="entries[0][memo]" class="form-control"></td>
        <td><button type="button" class="btn btn-sm btn-danger removeRow">-</button></td>
      </tr>
      <tr class="entryRow">
        <td>
          <select name="entries[1][account_id]" class="form-control">
            @foreach($accounts as $acc)
              <option value="{{ $acc->id }}">{{ $acc->code }} - {{ $acc->name }}</option>
            @endforeach
          </select>
        </td>
        <td>
          <select name="entries[1][type]" class="form-control">
            <option value="debit">Debit</option><option value="credit">Credit</option>
          </select>
        </td>
        <td><input name="entries[1][amount]" class="form-control amount" value="0.00"></td>
        <td><input name="entries[1][memo]" class="form-control"></td>
        <td><button type="button" class="btn btn-sm btn-danger removeRow">-</button></td>
      </tr>
    </tbody>
  </table>
  <div class="mb-3">
    <button type="button" id="addRow" class="btn btn-secondary">Add line</button>
    <button type="submit" class="btn btn-primary">Post Journal</button>
  </div>
</form>

@push('scripts')
<script>
$(function(){
  function renumber(){
    $('#entriesTable tbody tr').each(function(i, tr){
      $(tr).find('select, input').each(function(){
        var name = $(this).attr('name');
        if(!name) return;
        var newName = name.replace(/entries\[\d+\]/, 'entries['+i+']');
        $(this).attr('name', newName);
      });
    });
  }

  $('#addRow').on('click', function(){
    var $last = $('#entriesTable tbody tr:last');
    var $clone = $last.clone();
    $clone.find('input').val('0.00');
    $('#entriesTable tbody').append($clone);
    renumber();
  });

  $(document).on('click', '.removeRow', function(){
    if($('#entriesTable tbody tr').length <= 2){
      alert('A journal must have at least 2 entries.');
      return;
    }
    $(this).closest('tr').remove();
    renumber();
  });

  $('#journalForm').on('submit', function(){
    // optional: balance check on client
    var debit = 0, credit = 0;
    $('#entriesTable tbody tr').each(function(){
      var type = $(this).find('select[name$="[type]"]').val();
      var amt = parseFloat($(this).find('input[name$="[amount]"]').val() || 0);
      if(type == 'debit') debit += amt; else credit += amt;
    });
    if(Math.abs(debit - credit) > 0.005){
      if(!confirm('Debits and Credits do not balance. Post anyway?')) return false;
    }
    return true;
  });
});
</script>
@endpush
@endsection