@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="box box-info collapsed-box">
    <div class="box-header with-border">
      
      <div style="float:right;">
        <a class="btn btn-lg btn-info" data-toggle="modal" data-target="#add_Particulars">New Vouchure Particulars</a>
      </div>
    </div>
  </div>

  <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>
        </div>
        <div class="box-body">
          <div class="col-md-12">
            <div class="panel panel-info mb-0">
              <div class="panel-heading bg-blue">
                <h2 class="panel-title">Last five Transactions</h2>
              </div>
              <div class="panel-body" style="padding:0;">
                <div class="table-responsive">
                  <form id="vouchure-form" class="form-horizontal" action="{{ route('saveVouchureParticulars') }}" 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 -->
                        @foreach($balances as $balance)
                        <tr>         
                          <td class="text-left">{{$balance->trans_type}}</td>
                          <td class="text-left">{{$balance->particular}}</td>
                          <td class="text-center">-                              
                            </td>
                          <td class="text-center">
                            -                            </td>
                          
                          <td class="text-center">{{$balance->balance}}</td>
                          <td class="text-center">{{$balance->created_at}}</td>
                        </tr>
                        
                        @endforeach
                        <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>
                            @foreach($particulars as $particular)
                                <option value="{{ $particular->name }}">{{ $particular->name }}</option>
                            @endforeach
                        </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="1" readonly>
                        <button type="button" class="btn btn-danger removeRow">Remove</button>
                    </td>
                </tr>
                      </tbody>
                      <tfoot>
                        
                    
                        @if($trans)
                        <tr class="bg-gray">
                          <th class="text-center">Narration</th>
                          <th class="text-center"></th>
                           <td class="text-center">All debits: {{ number_format($trans->debit_amt, 2) }}</td>
                           <td class="text-center">All credits: {{ number_format($trans->credit_amt, 2) }}</td>
                          <th class="text-center" colspan="2"></th>
                        </tr>
                        @else
                        <p>No transaction data available.</p>
                        @endif
                      </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>
                            @foreach($particulars as $particular)
                                <option value="{{ $particular->name }}">{{ $particular->name }}</option>
                            @endforeach
                        </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);
    });
});



//   $(document).ready(function() {
//     let rowCount = 1;

//     $('#addRowBtn').click(function(e) {
//       e.preventDefault(); // Prevent form submission on button click
//       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>
//               @foreach($particulars as $particular)
//                 <option value="{{ $particular->name }}">{{ $particular->name }}</option>
//               @endforeach
//             </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
//     });

//     // Enable debit/credit input fields based on DR/CR selection
//     // $('#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);
//     //     row.find('input[name="credit[]"]').prop('disabled', true).val('');
//     //   } else if (selectedType === 'CR') {
//     //     row.find('input[name="credit[]"]').prop('disabled', false);
//     //     row.find('input[name="debit[]"]').prop('disabled', true).val('');
//     //   } else {
//     //     row.find('input[name="debit[]"], input[name="credit[]"]').prop('disabled', true).val('');
//     //   }
//     // });


// $('#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();
//     });
//   });
 

</script>

<!-- Modal for Adding New Particulars -->
<div class="modal fade" id="add_Particulars" tabindex="-1" role="dialog" aria-labelledby="add_productLabel" aria-hidden="true">
  
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="add_productLabel">New Particular</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <form id="particulars-form" class="form-horizontal" action="{{ route('save_vouchure_particulars') }}" method="post" enctype="multipart/form-data">
    @csrf
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-6">
              <label for="name" class="control-label">Particular Name<i class="required">*</i></label>
              <input type="text" class="form-control" id="name" name="name" placeholder="Type name" required>
              <span class="text-danger"></span>
            </div>
            <div class="col-sm-6">
              <label for="slug" class="control-label">Particular Slug (use underscore(_))<i class="required">*</i></label>
              <input type="text" class="form-control" id="slug" name="slug" placeholder="Slug name" required>
              <span class="text-danger"></span>
            </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>
        </form>
            <div style="padding: 5px;">
                <table id="supplier-supplier-list" class="table table-bordered table-striped table-hover dataTable" role="grid" aria-describedby="supplier-supplier-list_info" style="width: 100%;">
                    <thead>
                        <tr class="bg-gray">
                            <th class="text-center">S.N.</th>
                            <th class="text-center">Product Category</th>
                            <th class="text-right">slug</th>
                           
                            <th class="text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                      @php 
                            $i=1;
                            @endphp

                      @foreach($particulars as $ptr_list )
                      <tr>
                        <td>{{$i}}</td>
                        <td>{{$ptr_list->name}}</td>
                        <td>{{$ptr_list->slug}}</td>
                      <td>
                        <a href="{{ route('edit_vouchure_articular',[$ptr_list->id] ) }}" class="btn btn-primary"> Edit</a>
                     <a href="{{ route('delete_vouchure_articular',[$ptr_list->id] ) }}" class="btn btn-danger delete-list" onclick="return confirm('Are you sure you want to delete this item?');"> Delete</a>
                      </td>
                    </tr>
                    @php $i++; @endphp
                    @endforeach
                     </tbody>
                </table>
               
                     
                          </div>

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

@endsection