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

{{-- jQuery & Select2 CSS/JS --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div class="page-content">
  <div class="container-fluid">

    {{-- Breadcrumb & Title --}}
    <div class="page-breadcrumb d-flex flex-column flex-sm-row align-items-center justify-content-between mb-3 p-3 bg-primary text-white rounded shadow-sm">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0 p-0">
          <li class="breadcrumb-item">
            <a href="{{ route('journals.index') }}" class="text-white">
              <i class="bx bx-chevrons-left"></i> Back
            </a>
          </li>
          <li class="breadcrumb-item active text-white" aria-current="page">New Journal Entry</li>
        </ol>
      </nav>
      <h5 class="mb-0">New Journal Entry</h5>
    </div>

    <div class="card shadow border-0 rounded">
      <div class="card-body p-4">

        {{-- Validation Errors --}}
        @if($errors->any())
          <div class="alert alert-danger">
            <ul class="mb-0">
            @foreach($errors->all() as $err)
              <li>{{ $err }}</li>
            @endforeach
            </ul>
          </div>
        @endif

        <form method="POST" action="{{ route('journals.store') }}">
          @csrf

          {{-- Header --}}
          <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 datepicker" value="{{ old('entry_date') }}">
              @error('entry_date')<div class="text-danger small">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-4">
              <label class="form-label">Reference</label>
              <input type="text" name="reference" class="form-control" value="{{ old('reference') }}">
              @error('reference')<div class="text-danger small">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-4">
              <label class="form-label">Description</label>
              <input type="text" name="description" class="form-control" value="{{ old('description') }}">
              @error('description')<div class="text-danger small">{{ $message }}</div>@enderror
            </div>
          </div>

          <hr>

          {{-- Line Items --}}
          <h6 class="mb-3">Line Items</h6>
          @error('lines')<div class="alert alert-danger">{{ $message }}</div>@enderror

          <div class="table-responsive mb-3">
            <table class="table table-hover 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>Memo</th>
                  <th class="text-center" style="width:1%"></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <select name="lines[0][account_id]" class="form-select account-select">
                      <option value="">Select account</option>
                      @foreach($accounts as $ac)
                        <option value="{{ $ac->id }}">{{ $ac->full_name }}</option>
                      @endforeach
                    </select>
                  </td>
                  <td>
                    <input type="text" name="lines[0][debit]" class="form-control text-end debit-field" value="0.00">
                  </td>
                  <td>
                    <input type="text" name="lines[0][credit]" class="form-control text-end credit-field" value="0.00">
                  </td>
                  <td>
                    <input type="text" name="lines[0][memo]" class="form-control">
                  </td>
                  <td class="text-center">
                    <button type="button" class="btn btn-sm btn-danger remove-line-btn" disabled>&times;</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          {{-- Totals --}}
          <div class="row mb-3">
            <div class="col text-end">
              <strong>Total Debit: UGX <span id="totalDebit">0.00</span></strong>
              &nbsp; | &nbsp;
              <strong>Total Credit: UGX <span id="totalCredit">0.00</span></strong>
            </div>
          </div>

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

          <button type="button" class="btn btn-sm btn-primary mb-4" data-bs-toggle="modal" data-bs-target="#addAccountModal">
            <i class="bx bx-book-open me-1"></i> Add Ledger
          </button>

          <div class="text-end">
            <button type="submit" class="btn btn-success px-4">
              <i class="bx bx-save me-1"></i> Save Entry
            </button>
          </div>
        </form>

      </div>
    </div>

  </div>
</div>

{{-- Add Account Modal (unchanged) --}}
{{-- You can leave this part as in your version, no changes needed --}}

{{-- Dynamic JS --}}
<script>
$(function(){
  const accountOpts = { theme:'bootstrap-5', placeholder:'Select account', allowClear:true, width:'100%' };
  const $lines = $('#linesTable tbody');
  const baseRow = $lines.find('tr:first')[0].outerHTML;
  $lines.find('.account-select').select2(accountOpts);
  let idx = 1;

  function refreshRemove(){
    $lines.find('.remove-line-btn')
      .prop('disabled',$lines.children().length===1)
      .off('click')
      .on('click',function(){
        $(this).closest('tr').remove();
        refreshRemove();
        calcTotals();
      });
  }

  $('#addLineBtn').click(function(){
    const row = baseRow.replace(/\[0\]/g, `[${idx}]`);
    $lines.append(row);
    $lines.find('tr:last .account-select').select2(accountOpts);
    idx++;
    refreshRemove();
    calcTotals();
  });

  refreshRemove();

  // Comma formatting
  function formatWithCommas(str) {
    const parts = str.replace(/,/g,'').match(/^(\d*)(\.\d{0,2})?$/);
    if (!parts) return '';
    return parts[1].replace(/\B(?=(\d{3})+(?!\d))/g, ',') + (parts[2]||'');
  }

  $('#linesTable').on('input', '.debit-field, .credit-field', function(){
    let cursor = this.selectionStart;
    const oldVal = this.value;
    let cleaned = oldVal.replace(/[^0-9.]/g,'');
    const bits = cleaned.split('.');
    if (bits.length>2) cleaned = bits.shift() + '.' + bits.join('');
    const formatted = formatWithCommas(cleaned);
    this.value = formatted;
    const shift = formatted.length - oldVal.length;
    this.setSelectionRange(cursor+shift, cursor+shift);
    calcTotals();
  });

  function calcTotals() {
    let totalDebit = 0;
    let totalCredit = 0;

    $('.debit-field').each(function(){
      totalDebit += parseFloat(this.value.replace(/,/g,'')) || 0;
    });
    $('.credit-field').each(function(){
      totalCredit += parseFloat(this.value.replace(/,/g,'')) || 0;
    });

    $('#totalDebit').text(totalDebit.toLocaleString(undefined,{
      minimumFractionDigits:2, maximumFractionDigits:2
    }));
    $('#totalCredit').text(totalCredit.toLocaleString(undefined,{
      minimumFractionDigits:2, maximumFractionDigits:2
    }));

    checkBalanced(totalDebit, totalCredit);
  }

  function checkBalanced(totalDebit, totalCredit) {
    const balanced = (totalDebit.toFixed(2) === totalCredit.toFixed(2));
    const $submit = $('button[type=submit]');
    if (balanced) {
      $submit.prop('disabled', false).removeClass('btn-secondary').addClass('btn-success');
    } else {
      $submit.prop('disabled', true).removeClass('btn-success').addClass('btn-secondary');
    }
  }

  $('.debit-field, .credit-field').trigger('input');
  calcTotals();
});
</script>

@endsection