@extends('adminlayout.dashadmin')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

@section('content')

<style>
  section .due_sec {
    margin: 10px 0px 10px 15px;
  }
  div .due_content {
    display: inline-block;
    border-radius: 10px;
    padding: 10px 15px 10px 15px;
  }
  div .due_warning {
    background-color: #bcfbaf;
  }
  div .due_success {
    background-color: #f9e1c0;
  }
  div .due_primary {
    background-color: #b9e5f0;
  }
</style>

<!-- Content Wrapper Start -->
<div class="content-wrapper" ng-controller="PurchaseController">
<section class="content">
  <br><br>
  

  <div class="row">
    <div class="col-xs-12">
      <div class="box box-success">
        <div class="box-header">
          <h3 class="box-title"><b>Journal Vouchure </b></h3>
        </div>
        <div class="box-body">
          <div class="col-md-12">
            <div class="panel panel-info mb-0">
              <div class="panel-heading">
                <table class="table table-condensed">
                  <tr>
                    <td class="w-20 bg-blue">Journal</td>
                    <td class="w-50">No.123</td>
                    <td class="w-30 text-right"><input type="date" name="date"></td>
                  </tr>
                  <tr>
                    <td class="w-20">Account:</td>
                    <td class="w-50">UBI Saving Acc.</td>
                    <td class="w-30 text-right"> </td>
                  </tr>
                  <tr>
                    <td class="w-20"><span>Current Balance:</span></td>
                    <td class="w-50" style="color:red">450000</td>
                    <td class="w-30 text-right"> </td>
                  </tr>
                </table>
              </div>
              <div class="panel-body" style="padding:0;">
                <div class="table-responsive">
                  <form id="vouchure-form" class="form-horizontal" action="#" method="post" enctype="multipart/form-data">
                    @csrf
                    <table id="ledger-table" class="table table-bordered table-striped table-condensed">
                      <thead>
                        <tr class="bg-gray">
                          <th class="w-10 text-left">#</th>
                          <th class="w-20 text-left">Particulars</th>
                          <th class="w-20 text-center">Debit</th>
                          <th class="w-20 text-center">Credit</th>
                          <th class="w-10 text-center">Balance</th>
                          <th class="w-10 text-center">Date</th>
                        </tr>
                      </thead>

                      <tbody id="ledger-body">
                        <!-- Static rows from the database -->
                         
                        <tr>         
                          <td class="text-left">dr</td>
                          <td class="text-left">sbi bank</td>
                          <td class="text-center"> - </td>
                          <td class="text-center"> - </td>
                          
                          <td class="text-center">1234</td>
                          <td class="text-center">2024-10-08 09:48:40</td>
                        </tr>
                        
                       
                      </tbody>
                      <tfoot>
                        
                    
                         
                        <tr class="bg-gray">
                          <th class="text-center">Narration</th>
                          <th class="text-center"></th>
                           <td class="text-center">All debits:  1234</td>
                           <td class="text-center">All credits: 50000</td>
                          <th class="text-center" colspan="2"></th>
                        </tr>
                         
                      </tfoot>
                    </table>
                  </form>
                </div>
              </div>
            </div>

            <!-- Add new row button -->
            <button id="addRowBtn" class="btn btn-primary mt-3">Add New Row</button>
            <div class="col-xs-12 text-center">
              <button form="vouchure-form" class="btn btn-primary mt-3">Save</button>
            </div>
            <br><br>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
  
$(document).ready(function() {
    let rowCount = 1;

    $('#addRowBtn').click(function(e) {
        e.preventDefault(); // Prevent form submission on button click
        
        // Check if the button is already disabled
        if (!$(this).prop('disabled')) {
            let newRow = `
                <tr>
                    <td class="text-left">
                        <select class="form-control type-select" name="trans_type[]">
                            <option value="">--Select--</option>
                            <option value="DR">DR</option>
                            <option value="CR">CR</option>
                        </select>
                    </td>
                    <td class="text-left">
                        <select class="form-control" name="particulars[]" required>
                            <option value="">--Select--</option>
                            
                                <option value=""></option>
                           
                        </select>
                    </td>
                    <td class="text-center"><input type="text" name="debit[]" disabled></td>
                    <td class="text-center"><input type="text" name="credit[]" disabled></td>
                    <td class="text-center">
                        <input type="hidden" class="form-control input-sm text-center" name="incrementalField[]" value="${rowCount}" readonly>
                        <button type="button" class="btn btn-danger removeRow">Remove</button>
                    </td>
                </tr>
            `;
            $('#ledger-body').append(newRow);
            rowCount++; // Increment the rowCount after adding a new row

            // Disable the button after adding a row
            $(this).prop('disabled', true);
        }
    });

    $('#ledger-body').on('change', '.type-select', function() {
        var selectedType = $(this).val();
        var row = $(this).closest('tr');

        if (selectedType === 'DR') {
            row.find('input[name="debit[]"]').prop('disabled', false).attr('required', true);
            row.find('input[name="credit[]"]').prop('disabled', true).val(0).removeAttr('required');
        } else if (selectedType === 'CR') {
            row.find('input[name="credit[]"]').prop('disabled', false).attr('required', true);
            row.find('input[name="debit[]"]').prop('disabled', true).val(0).removeAttr('required');
        } else {
            row.find('input[name="debit[]"], input[name="credit[]"]')
               .prop('disabled', true).val('').removeAttr('required');
        }
    });

    // Remove row functionality
    $('#ledger-body').on('click', '.removeRow', function() {
        $(this).closest('tr').remove();
        // Optionally, enable the button again if desired
        $('#addRowBtn').prop('disabled', false);
    });
});



 

</script>

<!-- Modal for Adding New Particulars -->


@endsection