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

@section('content')



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

 <div class="row">
  <div class="col-xs-12">
    <div class="box box-success">
      <div class="box-header">
        <h3 class="box-title">
        <b>Accounting Vouchure Creation </b></h3><b>
      </b></div><b>
      <div class="box-body">
         
         <div class="col-md-8">
      <div class="box">
        
        <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">Panyment</td>
                    <td class="w-50">No.123</td>
                    
                  </tr>
                  <tr>
                    <td class="w-20">Account:</td>
                    <td class="w-50">Bank Of Boroda</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 class="col-md-4">
                                    <div class="panel panel-info mb-0 r-0">
                                      <div class="panel-heading bg-blue r-0">
                                        <h2 class="panel-title">List Of Ledger Accounts</h2>
                                      </div>
                                      <div class="panel-body" style="padding:0;max-height: 450px;overflow-y:scroll;">
                                        <div class="table-responsive">
                                          <table class="table table-bordered table-striped table-condensed">
                                            <thead>
                                              <tr class="bg-gray">
                                                <td class="w-35 text-center">A/C Name</td>
                                                
                                              </tr>
                                            </thead>
                                            <tbody>
                                              <tr>
                                                  <td class="text-right"><a data-toggle="modal" data-target="#new_accounting_vourchure_creation" href="#" >Create</a></td>
                                                </tr>
                                                <tr>
                                                  <td class="text-center"><a href="#" >Axis</a></td>
                                                </tr>
                                                  <tr>
                                                  <td class="text-center bg-green" ><a href="#" style="color:#fff!important;">Bank Of Boroda</a></td>
                                                </tr>
                                                 <tr>
                                                  <td class="text-center"><a href="#" >Post Office SB /acc</a></td>
                                                </tr>
                                                 <tr>
                                                  <td class="text-center"><a href="#" >UBI PERSONAL LOAN</a></td>
                                                </tr>
                                                 <tr>
                                                  <td class="text-center"><a href="#" >UBI Saving A/C</a></td>
                                                </tr>
                                                 <tr>
                                                  <td class="text-center"><a href="#" >Union Bank of india</a></td>
                                                </tr>
                                                 
                                             </tbody>
                                          </table>
                                        </div>
                                      </div>
                                    </div>
                                  </div>


                          </div>
</b></div><b>
</b><div></div></div><b>
</b></div><b>


</b></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);
    });
});



function getCity(state_id)
  {
   $.ajax({
    type: "GET",
    url: "{{url('admin/city-list')}}/" + state_id,
    dataType: 'json',
    success: function(response) {
      console.log(response.cities);
      var option = '';
      if (response.status) {
       option += '<option value="" selected disabled> -- Select Option -- </option>';
       for (let index = 0; index < response.cities.length; index++) {
        option += "<option value='" + response.cities[index].id + "'>" + response.cities[index].name + "</option>";
      }
      $('#city').html(option);
    } else {
      $('#city').html(option);
    }
  }
});
 }

 function getDealers(city_id)
 {
   $.ajax({
    type: "GET",
    url: "{{url('admin/dealerlist-by-city')}}/" + city_id,
    dataType: 'json',
    success: function(response) {

     var option = '';
     if (response.status) {
       option += '<option value="" selected disabled> -- Select Option -- </option>';
       for (let index = 0; index < response.dealers.length; index++) {
        option += "<option value='" + response.dealers[index].id + "' data='"+response.dealers[index].user_type+"'>" + response.dealers[index].name + "</option>";
      }
      $('#party_name').html(option);
    } else {
      $('#party_name').html(option);
    }
  }
});
 }

 

</script>
@endsection
<!-- product add model -->
      <div class="modal fade" id="new_accounting_vourchure_creation" tabindex="-1" role="dialog" aria-labelledby="add_productLabel" aria-hidden="true">
       <form  action="#" method="post">
         @csrf
         <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="add_productLabel">Add New Accounts</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">

             <div class="row">
              <div class=" col-sm-6 col-md-6 ">
                <label for="cat_name" class="control-label">
                  Name<i class="required">*</i>
                </label>
                <input type="text" class="form-control" id="name" name="name" autocomplete="off" placeholder="Type name" required>
                <span class="text-danger"></span>
              </div>

              <div class=" col-sm-6 col-md-6 ">
                <label for="pan" class="control-label">
                 Maintain Balences Bill By Bill<i class="required">*</i>
               </label>
                <select class="form-control">
                  <option value="">--Select--</option>
                  <option value="no">No</option>
                  <option value="yes">Yes</option>
                </select>
             </div>

             <div class=" col-sm-6 col-md-6 ">
                <label for="pan" class="control-label">
                 Activate Interest Calculation<i class="required">*</i>
               </label>
                <select class="form-control" >
                  <option value="">--Select--</option>
                  <option value="no">No</option>
                  <option value="yes">Yes</option>
                </select>
             </div>

           <div class="col-sm-6 col-md-6">               
            <label for="date" class="control-label">
             State<i class="required">*</i>
           </label>

           <select id="supply_state" class="form-control" name="state" onchange="getCity(this.value)" required>
            <option value="">--Select--</option>

            @foreach($states as $state)

            <option value="{{$state->id}}">{{$state->name}}</option>
            @endforeach  

          </select>
        </div>
        <div class="col-sm-6 col-md-6">               
          <label for="date" class="control-label">
            City<i class="required">*</i>
          </label>
          <select id="city" class="form-control" name="city" required onchange="getDealers(this.value)">

          </select>
        </div> 

         

      </div>

    </div>
    <div class="modal-footer" style="text-align: center;">
      <button  class="btn btn-lg btn-info" name="submit" data-loading-text="Processing...">
        <i class="fa fa-fw fa-save"></i>
      Submit        </button>
    </div>
  </div>
</div>
</form>
<br>
</div>
<!-- party add model -->