{{-- Journal Modal --}}
    <div class="modal fade" id="journalModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-xl">
        <div class="modal-content rounded-lg shadow">
          <div class="modal-header bg-secondary text-white">
            <h5 class="modal-title">Journal Entry</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>

          <form method="POST" id="journalForm">
            @csrf
            <input type="hidden" name="_method" value="PUT">
            <input type="hidden" id="entry_id" name="id">

            <div class="modal-body">
              <div class="row g-3 mb-3">
                <div class="col-md-4"><label class="form-label">Date</label><input type="date" class="form-control" id="entry_date" name="entry_date" readonly></div>
                <div class="col-md-4"><label class="form-label">Reference</label><input type="text" class="form-control" id="reference" name="reference" readonly></div>
                <div class="col-md-4"><label class="form-label">Description</label><input type="text" class="form-control" id="description" name="description" readonly></div>
              
              </div>

              <div class="card border">
                <div class="card-header d-flex justify-content-between align-items-center">
                  <h6 class="mb-0">Line Items</h6>
                  <button type="button" id="addLineBtn" class="btn btn-sm btn-light"><i class="bx bx-plus-circle me-1"></i> Add Line</button>
                </div>
                <div class="card-body p-0">
                  <table class="table table-bordered align-middle mb-0" 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></th></tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot class="table-secondary fw-bold">
                      <tr>
                        <td colspan="1" class="text-end">Totals:</td>
                        <td id="totalDebit" class="text-end">0</td>
                        <td id="totalCredit" class="text-end">0</td>
                        <td colspan="2" class="text-danger fw-semibold d-none" id="balanceWarning">⚠ Debit and Credit must balance</td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-warning" id="enableEdit">Edit</button>
              <button type="submit" class="btn btn-success d-none" id="saveChanges" disabled>Save Changes</button>
              @can('journals.delete')
              <button type="button" class="btn btn-danger" id="deleteEntry">Delete</button>
              @endcan

            </div>
          </form>
        </div>
      </div>
    </div>

    {{-- Line Template --}}
    <template id="line-template">
      <tr>
        <td>
          <select name="lines[__INDEX__][account_id]" class="form-select account-select">
            <option value="">Select account</option>
            @foreach($accounts2 as $accountOption)
              <option value="{{ $accountOption->id }}">{{ $accountOption->full_name }}</option>
            @endforeach
          </select>
        </td>
        <td><input type="text" name="lines[__INDEX__][debit]" value="0" class="form-control text-end debit"></td>
        <td><input type="text" name="lines[__INDEX__][credit]" value="0" class="form-control text-end credit"></td>
        <td><input type="text" name="lines[__INDEX__][memo]" class="form-control"></td>
        <td class="text-center"><button type="button" class="btn btn-sm btn-danger remove-line-btn">&times;</button></td>
      </tr>
    </template>


<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"/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(function(){
  const $tbody = $('#linesTable tbody');
  let idx = 0;

  const opts = {
    theme: 'bootstrap-5',
    width: '100%',
    allowClear: true,
    placeholder: 'Select account',
    dropdownParent: $('#journalModal')
  };

  function fmt(n){ 
    if(n === '' || n === null || isNaN(n)) return '0';
    n = parseFloat(n.toString().replace(/,/g,''));
    return (n % 1 === 0) 
      ? n.toLocaleString('en-US') 
      : n.toLocaleString('en-US',{minimumFractionDigits:2, maximumFractionDigits:2});
  }

  function num(n){ return parseFloat(n.toString().replace(/,/g,''))||0; }

  function calcTotals(){
    let td=0, tc=0;
    $tbody.find('.debit').each(function(){ td+=num($(this).val()); });
    $tbody.find('.credit').each(function(){ tc+=num($(this).val()); });

    $('#totalDebit').text(fmt(td)); 
    $('#totalCredit').text(fmt(tc));

    if(td===tc && td>0){ 
      $('#balanceWarning').addClass('d-none'); 
      $('#saveChanges').prop('disabled', false); 
    } else { 
      $('#balanceWarning').removeClass('d-none'); 
      $('#saveChanges').prop('disabled', true); 
    }
  }

  function bindEvents(){
    $tbody.find('.debit,.credit').off('input').on('input', function(){
      let val = $(this).val().replace(/,/g,'');
      if(!isNaN(val)&&val!=='') $(this).val(fmt(val));
      calcTotals();
    });
    $tbody.find('.remove-line-btn').off('click').on('click', function(){ 
      $(this).closest('tr').remove(); 
      calcTotals(); 
    });
  }

  function renderLine(line = {}, editable = false){
    const tpl = $('#line-template').html().replace(/__INDEX__/g, idx++);
    const $row = $(tpl);

    $row.find('select.account-select')
        .val(line.account_id || '')
        .prop('disabled', !editable)
        .select2(opts);

    $row.find('.debit').val(fmt(line.debit || 0)).prop('readonly', !editable);
    $row.find('.credit').val(fmt(line.credit || 0)).prop('readonly', !editable);
    $row.find('input[name$="[memo]"]').val(line.memo || '').prop('readonly', !editable);
    $row.find('.remove-line-btn').prop('disabled', !editable);

    $tbody.append($row);
    bindEvents();
    return $row;
  }

  let currentRow = null;

  $('.journal-row').click(function(){
    currentRow = $(this);
    const d = currentRow.data(); 
    idx=0; 
    $tbody.empty(); // clear old rows

    // Reset totals for new modal
    $('#totalDebit').text('0');
    $('#totalCredit').text('0');
    $('#balanceWarning').addClass('d-none');
    $('#saveChanges').prop('disabled', false);

    $('#entry_id').val(d.id);
    $('#entry_date').val(d.date);
    $('#reference').val(d.reference);
    $('#description').val(d.description);

    $('#enableEdit').removeClass('d-none'); 
    $('#saveChanges').addClass('d-none');
    $('#addLineBtn').prop('disabled', true);

    $('#entry_date,#description,#reference').prop('readonly', true);
    $('#journalForm select.account-select').prop('disabled', true);
    $tbody.find('.debit,.credit,input[name$="[memo]"]').prop('readonly', true);
    $tbody.find('.remove-line-btn').prop('disabled', true);

    let lines = [];
    try { lines = JSON.parse(currentRow.attr('data-lines') || '[]'); } 
    catch(e){ console.error(e); }

    lines.length ? lines.forEach(l=>renderLine(l)) : renderLine({});

    // Recalculate totals for the current transaction
    calcTotals();

    $('#journalModal').modal('show');
  });

  $('#enableEdit').click(function(){
    $('#entry_date,#description').prop('readonly', false);
    $('#reference').prop('readonly', true);
    $tbody.find('select.account-select').prop('disabled', false).select2(opts);
    $tbody.find('.debit,.credit,input[name$="[description]"]').prop('readonly', false);
    $tbody.find('.remove-line-btn').prop('disabled', false);
    $('#addLineBtn').prop('disabled', false);
    $(this).addClass('d-none'); 
    $('#saveChanges').removeClass('d-none');
  });

  $('#addLineBtn').click(function(){ 
    const $newRow = renderLine({}, true);
    $newRow.find('.account-select').select2(opts);
    bindEvents();
  });

  // ✅ Save Changes (partial update, only memo & reference)
  $('#journalForm').submit(function(e){
    e.preventDefault();

    $tbody.find('.debit, .credit').each(function(){
      $(this).val($(this).val().replace(/,/g, ''));
    });

    let valid = true;
    $tbody.find('tr').each(function(){
      const account = $(this).find('select.account-select').val();
      const debit = parseFloat($(this).find('.debit').val()) || 0;
      const credit = parseFloat($(this).find('.credit').val()) || 0;

      if(!account){ Swal.fire('Error','Each line must have an account selected','error'); valid=false; return false; }
      if(debit===0 && credit===0){ Swal.fire('Error','Each line must have debit or credit','error'); valid=false; return false; }
    });
    if(!valid) return;

    const id = $('#entry_id').val();
    const url = "{{ route('journals.update', ':id') }}".replace(':id', id);

    Swal.fire({title:'Saving...',allowOutsideClick:false,didOpen:()=>Swal.showLoading()});

    $.ajax({
      url: url,
      type: 'POST',
      data: $(this).serialize() + '&_method=PUT', // ensure PUT if your route uses PUT/PATCH
      success: function(res){
        Swal.close();

        // Update only the main table fields we care about
        const updatedLines = $tbody.find('tr').map(function(){
          return {
            account_id: $(this).find('select.account-select').val(),
            debit: parseFloat($(this).find('.debit').val())||0,
            credit: parseFloat($(this).find('.credit').val())||0,
            memo: $(this).find('input[name$="[memo]"]').val()
          };
        }).get();

        currentRow.data('lines', updatedLines);
        currentRow.attr('data-lines', JSON.stringify(updatedLines));
        currentRow.attr('data-memo', $('#memo').val());
        currentRow.attr('data-date', $('#entry_date').val());

        // Only update memo & reference in main table
        currentRow.find('td:nth-child(2)').text($('#reference').val());
        currentRow.find('td:nth-child(3)').text($('#description').val());

        Swal.fire('Saved','Journal updated successfully','success');
        $('#journalModal').modal('hide');
      },
      error: function(xhr){
        Swal.fire('Error','Failed to update entry','error');
        console.error(xhr.responseText);
      }
    });
  });

  // Delete
  $('#deleteEntry').click(function(){
    Swal.fire({
      title:'Are you sure?',
      text:'This will delete the journal entry!',
      icon:'warning',
      showCancelButton:true,
      confirmButtonText:'Yes, delete!',
      cancelButtonText:'Cancel'
    }).then((result)=>{
      if(result.isConfirmed){
        const id = $('#entry_id').val();
        const url = "{{ route('journals.destroy', ':id') }}".replace(':id', id);

        Swal.fire({title:'Deleting...',allowOutsideClick:false,didOpen:()=>Swal.showLoading()});

        $.ajax({
          url: url,
          method: 'POST',
          data:{_method:'DELETE',_token:"{{ csrf_token() }}"},
          success:function(res){
            Swal.close();
            currentRow.remove();
            $('#journalModal').modal('hide');
            calcTotals();
            Swal.fire('Deleted','Journal deleted successfully','success');
          },
          error:function(xhr){
            Swal.fire('Error','Failed to delete entry','error');
            console.error(xhr.responseText);
          }
        });
      }
    });
  });

});
</script>