@extends('adminlayout.dashadmin')

@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">
@if(Session::has('message'))
	  <div class="col-sm-12 col-md-12">  
        <p class="alertmsg alert-{{ Session::get('alert-class', 'alert-info') }}" style="text-align: center;font-size: 20px;margin-top: 13px;">
	     {{ Session::get('message') }}
	    </p>
		</div>		
		
	    @endif
  <br><br>
  

  <div class="row">
    <div class="col-xs-12">
      <div class="box box-success">
        <div class="box-header">
          <h3 class="box-title"><b>Contra  Vouchure </b></h3>
        </div>
        <div class="box-body">
          <div class="col-md-10">
		  <form id="vouchure-form" class="form-horizontal" action="{{route('save_purchase_voucher')}}" method="post" enctype="multipart/form-data">
                    @csrf
            <div class="panel panel-info mb-0">
			
              <div class="panel-heading">
                <table class="table table-condensed">
                  <tr>
                    <td class="w-20 bg-blue">Contra</td>
                    <td class="w-50">No. 1<input type="hidden" name="purchase_no" value="{{$purchase_no}}"></td>
                    <td class="w-30 text-right"><input type="date" class="datefield" name="date" required></td>
                  </tr>
				   
                  <tr>
                    <td class="w-20">Account:</td>
                    <td class="w-50"><input type="text" name="party_account_name" class="purchase-input" id="party_account_name" required >
					   <input type="hidden" name="party_account" class="purchase-input" id="party_account" required ></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">
                  
                    <table id="ledger-table" class="table table-bordered table-striped table-condensed">
                      <thead>
                        <tr class="bg-gray">                          
                          <th class="w-10 text-left" colspan="4">Particulars</th>
                          				  
                          <th class="w-5 text-right">Amount</th>
						  
                        </tr>
                      </thead>

                      <tbody id="ledger-body">
                        <!-- Static rows from the database -->
                         
                        <tr>         
                          <td class="text-left" colspan="4"><input type="text" id="item_name" name="item_name[]" class="namefield" required></td>
                         
                         
                          <td class="text-right"><input type="number" id="amount" name="amount[]" oninput="calculateTotal(this)" required> </td>
						 
                         
                        </tr>
                        
                       
                      </tbody>
                      <tfoot>
                       
                         
                        <tr class="bg-gray">
                          <th class="text-left" colspan="4">Narration</th>
                          
						  
                           <td class="text-right" id="totalamount">0</td>
                           
                        </tr>
                         
                      </tfoot>
                    </table>
					<input type="hidden" id="grand_total"  name="grand_total" value="0">
                  
                </div>
              </div>
            </div>

            <!-- Add new row button -->
            <!--<button id="addRowBtn" type="button" 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>
			</form>
            <br><br>
          </div>
		  
		   <div class="col-md-2">
                                    <div class="panel panel-info mb-0 r-0 partylist" style="display:none;">
                                      <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 class="accountlist">
                                         <tr><td class="text-right"><a data-toggle="modal" data-target="#new_accounting_vourchure_creation" href="#" >Create</a></td>
                                                </tr>
												@foreach($ledgerAccounts as $ledgerAccount)
                                                <tr>
                                                  <td class="text-center lgaccount" id="{{$ledgerAccount->id}}" data="{{$ledgerAccount->name}}"><a href="javascript:void(0)"  >{{$ledgerAccount->name}}</a></td>
                                                </tr>
												@endforeach
                                                <!--  <tr>
                                                  <td class="text-center bg-green" ><a href="#" style="color:#fff!important;">Bank Of Boroda</a></td>
                                                </tr>-->                                            
                                                 
                                             </tbody>
                                          </table>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
		  
		  
		  
        </div>
      </div>
    </div>
  </div>
</section>
</div>

 <div class="modal fade" id="new_accounting_vourchure_creation" tabindex="-1" role="dialog" aria-labelledby="add_productLabel" aria-hidden="true">
       <form  action="#" method="post" id="ledgeraccount" onsubmit="return saveLedgerAccount(); ">
         @csrf
         <div class="modal-dialog modal-fullscreen" role="document" style="width: 85%;">
          <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-10 col-md-10 ">
			  <div class=" col-sm-12 col-md-12 ">
                <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-12 col-md-12 " style="margin-bottom: 29px;">  <hr></div>
			 <div class="col-sm-12 col-md-12">
			  <div class=" col-sm-6 col-md-6 ">
				  <div class=" col-sm-12 col-md-12 ">
					<label for="group_id" class="control-label">
					 Under<i class="required">*</i>
				   </label>
				   <input type="text" class="form-control" id="group_name" name="group_name"  required>
				   <input type="hidden" class="form-control" id="group_id" name="group_id"  required>
					
				 </div>
				 <!-- <div class=" col-sm-12 col-md-12 ">
					<label for="maintain_balences_bill_by_bill" class="control-label">
					 Maintain Balences Bill By Bill<i class="required">*</i>
				   </label>
					<select class="form-control" name="maintain_balences_bill_by_bill">
					  <option value="">--Select--</option>
					  <option value="no">No</option>
					  <option value="yes">Yes</option>
					</select>
				 </div>

				 <div class=" col-sm-12 col-md-12 ">
					<label for="interest_calculation" class="control-label">
					 Activate Interest Calculation<i class="required">*</i>
				   </label>
					<select class="form-control" name="interest_calculation">                  
					  <option value="no">No</option>
					  <option value="yes">Yes</option>
					</select>
				 </div>
			 
				  <div class=" col-sm-12 col-md-12 ">
					<label for="check_credit_days" class="control-label">
					 Check for credit days during voucher entry<i class="required">*</i>
				   </label>
					<select class="form-control" name="check_credit_days" >                  
					  <option value="no">No</option>
					  <option value="yes">Yes</option>
					</select>
				 </div>-->
				 
				 <div class="col-sm-12 col-md-12" style="margin-top: 30px;"> <label  class="control-label labelhead">Mailling Details:</label></div>
			  <div class=" col-sm-12 col-md-12 ">
                <label for="mailling_name" class="control-label">
                  Name
                </label>
                <input type="text" class="form-control" id="mailling_name" name="mailling_name" autocomplete="off"  required>
                <span class="text-danger"></span>
              </div>
			  
			  <div class=" col-sm-12 col-md-12 ">
                <label for="mailling_name" class="control-label">
                  Address
                </label>
                <textarea  class="form-control" id="mailling_address " name="mailling_address"></textarea>
                <span class="text-danger"></span>
              </div>
			  
			   <div class="col-sm-12 col-md-12">               
				<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-12 col-md-12">               
			  <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 class=" col-sm-12 col-md-12 ">
					<label for="cat_name" class="control-label">
					  Pin Code<i class="required">*</i>
					</label>
					<input type="text" class="form-control" id="pin_code" name="pin_code"  placeholder="Pin Code" required>
					<span class="text-danger"></span>
			</div> 
			 
           </div> 
		   <div class="col-sm-6 col-md-6">  
		    
			<div class="col-sm-12 col-md-12"> <label  class="control-label labelhead">Bank Details:</label></div>
			<div class=" col-sm-12 col-md-12 ">
					<label for="check_credit_days" class="control-label">
					 Provide Bank Detail
				   </label>
					<select class="form-control" name="check_credit_days" >                  
					  <option value="no">No</option>
					  <option value="yes">Yes</option>
					</select>
			</div>
			
			<div class="col-sm-12 col-md-12" style="margin-top: 35px;"> <label  class="control-label labelhead">Tax Registration Details:</label></div>
			<div class=" col-sm-12 col-md-12 ">
					<label for="pan" class="control-label">
					  PAN/IT No
					</label>
					<input type="text" class="form-control" id="pan" name="pan" >
					<span class="text-danger"></span>
			</div> 
			<div class=" col-sm-12 col-md-12 ">
					<label for="registration_type" class="control-label">
					 Registration Type
				   </label>
					<select class="form-control" name="registration_type" id="registration_type">                  
					  <option value="regular">Regular</option>Copotation customer/unregisterd
					  
					</select>
			</div>
			<div class=" col-sm-12 col-md-12 ">
					<label for="gstn" class="control-label">
					  GSTIN/ UIN
					</label>
					<input type="text" class="form-control" id="gstn" name="gstn" >
					<span class="text-danger"></span>
			</div>
			<div class=" col-sm-12 col-md-12 ">
					<label for="additional_gst_detail" class="control-label">
					 Set/Alert additional GST details
				   </label>
					<select class="form-control" name="additional_gst_detail" >                  
					  <option value="no">No</option>
					  <option value="yes">Yes</option>
					</select>
			</div>
			
        </div>
        </div>		
   
         </div>
		 <div class=" col-sm-2 col-md-2">
		 
		          <div class="panel panel-info mb-0 r-0 listofgroups" style="display:none;">
                                      <div class="panel-heading bg-blue r-0">
                                        <h2 class="panel-title">List Of Groups</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">
                                            
                                            <tbody class="accountgrouplist">
                                         <tr><td class="text-right"><a data-toggle="modal" data-target="#listofgroupmodel" href="#" >Create</a></td>
                                                </tr>
												@foreach($ledgerAccountGroups as $ledgerAccount)
                                                <tr>
                                                  <td class="text-center lgaccountgroup" id="{{$ledgerAccount->id}}" data="{{$ledgerAccount->name}}"><a href="javascript:void(0)"  >{{$ledgerAccount->name}}</a></td>
                                                </tr>
												@endforeach
                                                                                           
                                                 
                                             </tbody>
                                          </table>
                                        </div>
                                      </div>
                  </div>
		 
		 </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>

<!----------------------- Group model ------------------------>


 <div class="modal fade" id="listofgroupmodel" tabindex="-1" role="dialog" aria-labelledby="add_productLabel" aria-hidden="true">
       <form  action="#" method="post" id="ledgeraccountgroup" onsubmit="return saveLedgerAccountGroup(); ">
         @csrf
         <div class="modal-dialog modal-fullscreen" role="document">
          <div class="modal-content" >
            <div class="modal-header">
              <h5 class="modal-title" id="add_productLabel">Add Group</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-12 col-md-12 ">
                <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>

    </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>

</div>

<style>
.labelhead{
	font-size: 17px;
}
.bg-green a {
    color: white;
}
</style>
<script>
  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 saveLedgerAccount()
 {
	 $.ajax({
		type: "POST",
		url: "{{url('admin/save-ledger-account')}}/",
		 data: $('#ledgeraccount').serialize(),
		dataType: 'json',
		success: function(response) {
			
		  $('#new_accounting_vourchure_creation').modal('hide');

		  var option = '';
		  if (response.status) {
		   option += '<tr><td class="text-right"><a data-toggle="modal" data-target="#new_accounting_vourchure_creation" href="#" >Create</a></td></tr>';
		   for (let index = 0; index < response.ledgerAccounts.length; index++) {
			option += '<tr><td class="text-center lgaccount" id="'+ response.ledgerAccounts[index].id +'" data="'+response.ledgerAccounts[index].name+'" ><a href="javascript:void(0)" >'+ response.ledgerAccounts[index].name +'</a></td></tr>';
		  }
		  $('.accountlist').html(option);
		} else {
		  $('#error-message').html(response.message);
		}
	  }
	  });
	return false;
 }
 
 function saveLedgerAccountGroup()
 {
	 $.ajax({
		type: "POST",
		url: "{{url('admin/save-ledger-account-group')}}/",
		 data: $('#ledgeraccountgroup').serialize(),
		dataType: 'json',
		success: function(response) {
			
		  $('#listofgroupmodel').modal('hide');

		  var option = '';
		  if (response.status) {
		   option += '<tr><td class="text-right"><a data-toggle="modal" data-target="#listofgroupmodel" href="#" >Create</a></td></tr>';
		   for (let index = 0; index < response.ledgerAccountGroups.length; index++) {
			option += '<tr><td class="text-center lgaccountgroup" id="'+ response.ledgerAccountGroups[index].id +'" data="'+response.ledgerAccountGroups[index].name+'" ><a href="javascript:void(0)" >'+ response.ledgerAccountGroups[index].name +'</a></td></tr>';
		  }
		  $('.accountgrouplist').html(option);
		} else {
		  $('#error-message').html(response.message);
		}
	  }
	  });
	return false;
 }
 
 function calculateTotal(input) {
            
            updateOverallTotal();
        }

    function updateOverallTotal() {
           
			
			var totalValues = document.querySelectorAll('input[name="amount[]"]');
            var overallTotal = 0;

            totalValues.forEach(input => {
                overallTotal += parseFloat(input.value) || 0;
            });
		
            document.getElementById('totalamount').textContent =  overallTotal.toFixed(2);
			
            document.getElementById('grand_total').value =  overallTotal.toFixed(2);
			
      
        }
$(document).ready(function() {
	
	jQuery("body").on("focus","#party_account_name", function(event){
			$('.partylist').show();
		 });
		 
		
		 
	 jQuery("body").on("focus","#invoice_no, .datefield, .namefield, .qtyfield", function(event){
		$('.partylist').hide();
	 });
	  
	 
    jQuery("body").on("click",".lgaccount", function(event){
		 var id = $(this).attr('id');
		 var name = $(this).attr('data');
		 $('#party_account').val(id);
		 $('#party_account_name').val(name);
		 
		 $('.lgaccount').removeClass("bg-green");
		 $(this).addClass("bg-green");
		
	 });
	 
	  jQuery("body").on("click",".lgaccountgroup", function(event){
		 var id = $(this).attr('id');
		 var name = $(this).attr('data');
		 $('#group_id').val(id);
		 $('#group_name').val(name);
		 
		 $('.lgaccountgroup').removeClass("bg-green");
		 $(this).addClass("bg-green");
		
	 });
	 
	 jQuery("body").on("focus","#group_name", function(event){
		$('.listofgroups').show();
	 });
		 
	
		 	 
    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"><input type="text" id="item_name" name="item_name[]" class="namefield" required></td>\
                    <td class="text-left"><input type="number"  name="qty[]" oninput="calculateTotal(this)" class="qtyfield"  required ></td>\
                    <td class="text-center"><input type="text" name="rate[]" oninput="calculateTotal(this)"  required ></td>\
                    <td class="text-center"><input type="text" name="amount[]" required></td>\
					<td class="text-center">\
						   <select class="form-control input-sm text-center"  list="itemName" name="gstrate[]" onchange ="calculateTotal(this)" required >\
								</select> <input type="hidden" name="gstrateamount[]" value="">\
						  </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

           
        }
    });

    $('#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