@extends('admin.admin_dashboard')
@section('admin')

{{-- Select2 & jQuery --}}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div class="page-content">
  <div class="container-fluid">
    <div class="page-breadcrumb bg-primary text-white rounded p-3 mb-4 d-flex justify-content-between align-items-center">
      <h5 class="mb-0">{{ isset($journal) ? 'Edit General Journal' : 'New General Journal' }}</h5>
      <a href="{{ route('general.journals.index') }}" class="btn btn-light">
        <i class="bx bx-chevron-left me-1"></i> Back
      </a>
    </div>

    <div class="card shadow-sm rounded-lg border-0">
      <div class="card-body p-4">
        @if($errors->any())
          <div class="alert alert-danger"><ul class="mb-0">
            @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
          </ul></div>
        @endif

        <form method="POST" action="{{ isset($journal) ? route('general.journals.update', $journal->id) : route('general.journals.store') }}" enctype="multipart/form-data">
          @csrf
          @if(isset($journal)) @method('PUT') @endif

          {{-- Date / Journal No. / Description --}}
          <div class="row g-3 mb-4">
            <div class="col-md-4">
              <label class="form-label">Date</label>
              <input type="date" name="entry_date" class="form-control" value="{{ old('entry_date', $journal->entry_date ?? now()->toDateString()) }}" required>
            </div>
            <div class="col-md-4">
              <label class="form-label">Journal No.</label>
              <input type="text" name="reference" class="form-control" value="{{ old('reference', $journal->reference ?? 'GJ-'.time()) }}" {{ isset($journal) ? 'readonly' : '' }}>
            </div>
            <div class="col-md-4">
              <label class="form-label">Description</label>
              <input type="text" name="description" class="form-control" value="{{ old('description', $journal->description ?? '') }}">
            </div>
          </div>

          <hr>

          {{-- Journal Lines --}}
          <h6 class="mb-3">Journal Lines</h6>
          <div class="table-responsive mb-2" style="overflow-x:auto;">
            <table class="table table-striped table-bordered align-middle" id="linesTable">
              <thead class="table-dark">
                <tr>
                  <th>Account</th>
                  <th class="text-end">Debit</th>
                  <th class="text-end">Credit</th>
                  <th>Description / Memo</th>
                  <th>Name</th>
                  <th>Attachments</th>
                  <th class="text-center" style="width:1%"></th>
                </tr>
              </thead>
              <tbody>
@php
<<<<<<< HEAD
$oldLines = old('lines') ?: ($journal ? $journal->lines->toArray() : [0]);
=======
$oldLines = old('lines') ?: ($journal ? $journal->lines->toArray() : [['account_id' => $selectedAccountId ?? null]]);
>>>>>>> origin/main
@endphp
@foreach($oldLines as $i => $line)
<tr class="line-row">
  <td>
    <select name="lines[{{ $i }}][account_id]" class="form-select js-account" required>
      <option value="">Select account</option>
      @foreach($accounts as $a)
        <option value="{{ $a->id }}" @selected(($line['account_id'] ?? '') == $a->id)>{{ $a->code }} — {{ $a->name }}</option>
      @endforeach
    </select>
  </td>
  <td><input type="text" name="lines[{{ $i }}][debit]" class="form-control text-end debit-field amount-field" value="{{ number_format($line['debit'] ?? 0, 0) }}"></td>
  <td><input type="text" name="lines[{{ $i }}][credit]" class="form-control text-end credit-field amount-field" value="{{ number_format($line['credit'] ?? 0, 0) }}"></td>
  <td><input type="text" name="lines[{{ $i }}][memo]" class="form-control" value="{{ $line['memo'] ?? '' }}"></td>
  <td>
    <select name="lines[{{ $i }}][entity_type]" class="form-select js-entity-type">
      <option value="">— Select —</option>
      @foreach($entityOptions as $type => $list)
        <option value="{{ $type }}" @selected(($line['entity_type'] ?? '') == $type)>{{ ucfirst($type) }}</option>
      @endforeach
    </select>
    <select name="lines[{{ $i }}][entity_id]" class="form-select js-entity-id">
      <option value="{{ $line['entity_id'] ?? '' }}">{{ $line['entity_name'] ?? '— Select —' }}</option>
    </select>
  </td>
  <td><input type="file" name="lines[{{ $i }}][attachments][]" multiple class="form-control"></td>
  <td class="text-center"><button type="button" class="btn btn-sm btn-danger js-remove" @if($i==0) disabled @endif>&times;</button></td>
</tr>
@endforeach
              </tbody>
            </table>
          </div>

          <div class="d-flex justify-content-between mb-4">
            <strong>Total Debit: UGX <span id="totalDebit">0</span></strong>
            <strong>Total Credit: UGX <span id="totalCredit">0</span></strong>
            <strong id="balanceIndicator" class="ms-3"></strong>
          </div>

          <button type="button" id="addLineBtn" class="btn btn-sm btn-secondary mb-4 me-2">
            <i class="bx bx-plus me-1"></i> Add Line
          </button>

          <div class="text-end">
            <button type="submit" class="btn btn-success px-4">
              <i class="bx bx-save me-1"></i> {{ isset($journal) ? 'Update Journal' : 'Save Journal' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
$(function(){
  const entityOptions = @json($entityOptions);
  const $tbody = $('#linesTable tbody');
  const $template = $tbody.find('tr.line-row').first().clone();
  let rowIndex = $tbody.children('tr').length;

  function initSelect2($row){
    $row.find('.js-account, .js-entity-type, .js-entity-id').select2({ theme:'bootstrap-5', width:'100%' });
  }

  function renderRemove(){
    const $rows = $tbody.children('tr');
    $rows.find('.js-remove').prop('disabled', $rows.length === 1);
  }

  function parseNumber(v){
    return Number(v.replace(/,/g,'')) || 0;
  }

  function formatNumber(v){
    v = v.toString().replace(/\D/g,'');
    return v.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }

  function updateTotals(){
    let totalDebit = 0, totalCredit = 0;
    $('.debit-field').each(function(){ totalDebit += parseNumber($(this).val()); });
    $('.credit-field').each(function(){ totalCredit += parseNumber($(this).val()); });
    $('#totalDebit').text(formatNumber(totalDebit));
    $('#totalCredit').text(formatNumber(totalCredit));
    const balanced = totalDebit === totalCredit;
    $('#balanceIndicator').text(balanced ? 'Balanced' : 'Not Balanced')
      .toggleClass('text-success', balanced)
      .toggleClass('text-danger', !balanced);
  }

  // Format input & update totals
  $tbody.on('input', '.amount-field', function(){
    let raw = $(this).val().replace(/,/g, '');
    if(!/^\d*$/.test(raw)) return;
    $(this).val(formatNumber(raw));
    updateTotals();
  });

  // Prevent both debit & credit in the same row
  $tbody.on('input', '.debit-field', function(){
    if ($(this).val()) $(this).closest('tr').find('.credit-field').val('');
  });
  $tbody.on('input', '.credit-field', function(){
    if ($(this).val()) $(this).closest('tr').find('.debit-field').val('');
  });

  // Auto-balance entry
  $tbody.on('blur', '.debit-field, .credit-field', function(){
    const $row = $(this).closest('tr');
    const debitVal = parseNumber($row.find('.debit-field').val());
    const creditVal = parseNumber($row.find('.credit-field').val());
    const desc = $row.find('input[name*="[memo]"]').val() || 'Balancing Entry';

    if(debitVal > 0 || creditVal > 0){
      const amount = debitVal || creditVal;
      const oppositeType = debitVal > 0 ? 'credit' : 'debit';
      let hasBal = false;

      $tbody.find('tr').each(function(){
        const d = parseNumber($(this).find('.debit-field').val());
        const c = parseNumber($(this).find('.credit-field').val());
        if((oppositeType === 'debit' && d === amount) || (oppositeType === 'credit' && c === amount)){
          hasBal = true;
        }
      });

      if(!hasBal){
        const $new = $template.clone();
        $new.find('input, select').each(function(){
          const name = $(this).attr('name');
          if(name) $(this).attr('name', name.replace(/\[\d+\]/, `[${rowIndex}]`));
        });
        if(oppositeType === 'debit'){
          $new.find('.debit-field').val(formatNumber(amount));
          $new.find('.credit-field').val('');
        } else {
          $new.find('.credit-field').val(formatNumber(amount));
          $new.find('.debit-field').val('');
        }
        $new.find('input[name*="[memo]"]').val(desc);
        $new.find('input[type=file]').val('');
        $tbody.append($new);
        initSelect2($new);
        rowIndex++;
        renderRemove();
        updateTotals();
      }
    }
  });

  // Add new line
  $('#addLineBtn').click(function(){
    const $row = $template.clone();
    $row.find('input, select').each(function(){
      const name = $(this).attr('name');
      if(name) $(this).attr('name', name.replace(/\[\d+\]/, `[${rowIndex}]`));
      if($(this).is('input[type=text]')) $(this).val('');
      if($(this).is('input[type=file]')) $(this).val('');
      if($(this).is('select')) $(this).val(null);
    });
    $tbody.append($row);
    initSelect2($row);
    rowIndex++;
    renderRemove();
    updateTotals();
  });

  // Remove line
  $tbody.on('click', '.js-remove', function(){
    $(this).closest('tr').remove();
    renderRemove();
    updateTotals();
  });

  // Populate entity IDs when type changes
  $tbody.on('change', '.js-entity-type', function(){
    const $row = $(this).closest('tr');
    const type = $(this).val();
    const $entitySelect = $row.find('.js-entity-id');
    $entitySelect.empty().append('<option value="">— Select —</option>');
    if(entityOptions[type]){
      entityOptions[type].forEach(e=>{
        $entitySelect.append(`<option value="${e.id}">${e.text}</option>`);
      });
    }
    $entitySelect.val(null).trigger('change');
  });

  initSelect2($tbody);
  renderRemove();
  updateTotals();
});
</script>

@endsection