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

@section('content')
 


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

  <!-- Content Header Start -->
 {{-- <section class="content-header" style="float:right;">
     <a  class="btn btn-lg btn-info" href="{{('party-transaction')}}">
          <i class="fa fa-fw fa-plus"></i>
          PURCHASE LIST
          </a>
          <a  class="btn btn-lg btn-info" href="{{('party-sale-list')}}">
          <i class="fa fa-fw fa-plus"></i>
          SELL LIST
          </a>
    </section>--}}
  <br>
  <br>
  <!-- Content Header end -->

  <!-- Content Start -->
  <!-- Content Start -->
  <section class="content">
     <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title">
            <span class="fa fa-fw fa-plus"></span>Sale Accessories</h3>
          <button type="button" class="btn btn-box-tool add-new-btn" data-widget="collapse" data-collapse="true">
            <i class="fa fa-minus"></i>
          </button>
        </div>
        <form  action="{{ route('save_sell_accessories_order') }}" method="post">
     @csrf
        <!-- Add Sale Create Form -->
        <div  class="form-horizontal" >
		<div class="col-sm-12 col-md-4">               
              <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-4">               
              <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-4">
                 <label for="party_name" class="control-label">
                  Party<i class="required">*</i>
              </label>              
           <!-- <input list="party_name"  autocomplete="off" placeholder="Search Party Name Or phone Number" required />-->
         <select id="party_name" class="form-control" name="party_name" onchange="partyHandler(this.value)">
			 <option value="">Select</option>
			
        </select>
        
        </div>
             
              <div class="col-sm-12 col-md-4">
                
                <label for="date" class="control-label">
                   Bill Date<i class="required">*</i>
                </label>
                <input type="text" class="form-control" name="bill_date" value="{{ date('Y-m-d H:i:s') }}" autocomplete="off"  readonly>
                 
              </div>
        <div class="col-sm-12 col-md-4">
           <label for="Billing" class="control-label">
            Billing Address*<i class="required">*</i>
            </label>
            <textarea class="form-control" id="billing" name="Billing" type="text" placeholder="Enter Full Address.."></textarea>
            <br>
        </div>
        <div class="col-sm-12 col-md-4">
            <label for="Shipping" class="control-label">
            Shipping Address*<i class="required">*</i>
            </label>
            <textarea class="form-control"  name="Shipping" type="text" placeholder="Enter Full Address.."></textarea>
            <br>
        </div>
              <div class="well well-sm" id="vehiclelist">
			  <div class="row">
				<div class="col-lg-12">
				  <div class="table-responsive"> <!-- table table-striped table-editable table-bordered --> 
					<table id="invoiceTable" class="table-bordered mb-0">
					  <thead>
						<tr class="bg-info">
							<th>ACCESSORY NAME</th>
							<th>HSN NUMBER</th>
							<!-- <th>VEHICLE NAME</th> -->
							<th>WARRANTY</th>
							<th>COLOR</th>
							<th>PRICE</th>
							<th>QTY</th>
							<th>MRP</th>
							<th>UNIT PRICE</th>
							<th>TAXABLE AMOUNT</th>
							<th>GST(%)</th>
							<th>GST(AMT.)</th>
							<th>TOTAL VALUE</th>
							<th class="w-5 text-center">
							  <i class="fa fa-trash-o"></i>
							</th>
						</tr>
          </thead>
          <tbody>
           <tr>
            
        <td>
        
         <select id="itemName" onchange="getItemDetail(this.value, this)" name="itemName[]" class="form-control input-sm text-center" required>
		 <option value="">select</option>
         @foreach($accessories as $data)
          <option value="{{$data->id}}">{{$data->name}}</option>
         @endforeach
        </select>
        
        </td>
        <td><input class="form-control input-sm text-center hsnCode" type="text" readonly name="hsnCode[]" required></td>

         <td>
       
            <input class="form-control input-sm text-center warranty" type="text"  name="warranty[]" required>
         
         </td>


        <td>
        <select name="color" class="form-control">
              <option disabled="" selected="">Select Color...</option>
              <option value="Red">Red</option>
              <option value="Blue">Blue</option>
              <option value="Yellow">Yellow</option>
              <option value="Magenta">Magenta </option>
            </select>
        </td>
                <td><input class="form-control input-sm text-center hsnCode" type="text" readonly name="hsnCode[]" required></td>
                <td><input class="form-control input-sm text-center" type="number" name="qty[]" oninput="calculateTotal(this)"  required></td>
                <td><input class="form-control input-sm text-center mrp" type="number" name="mrp[]" oninput="calculateTotal(this)" required></td>
                <td><input class="form-control input-sm text-center unitPrice" type="number" name="unitPrice[]" readonly oninput="calculateTotal(this)"></td>
                <td><input class="form-control input-sm text-center" type="number" name="taxableAmount[]" readonly></td>
                <td>
                  <!-- <input class=" input-sm text-center" type="number" name="cgst[]" oninput="calculateTotal(this)" required> -->
                   <select class="form-control input-sm text-center"  list="itemName" name="cgst[]" onchange ="calculateTotal(this)" required> 
                    @foreach($GstTax as $data)
                    
                    <option value="{{$data->value}}">{{$data->name}}</option>

                    @endforeach
                    <!-- <input class="itemid" type="hidden"  name="itemid[]" value="">
                     -->
                   </select>

                </td>
                <td><!-- <input class=" input-sm text-center" type="number" name="sgstUtgst[]" oninput="calculateTotal(this)" required> -->
                   <input class="form-control input-sm text-center" type="number" name="sgstUtgst[]" readonly>
                </td>
                <td><input class="form-control input-sm text-center" type="number" name="totalValue[]" readonly></td>
              
                <td class="text-center"><a onclick="removeRow(this)" ><i class="fa fa-close text-red pointer " ></i></a></td>
            </tr>


              </tbody>
              <tfoot>
                <tr>
                  <td colspan="5">
                    <!-- <div id="total"> 0</div> -->
                    <button class="btn btn-primary btn-sm" id="addRowBtn" onclick="addNewProductRow();">Add Product</button>
                  </td>
                </tr>
                
                <tr class="bg-yellow">
                  <th class="text-right" colspan="11">
                  Payable Amount                  </th>
                  <th class="col-sm-2 text-right">
                    <input type="hidden" name="payable-amount" value="">
                    <h4 class="text-center"><b></b></h4>
                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>
                <tr class="bg-blue">
                  <th class="text-right" colspan="11">
                  Payment Method                  </th>
                  <th class="col-sm-2 text-center">
                    <select id="pmethod-id" class="form-control select2" name="payment_method">
                      <option value="Cash">Direct Cash</option>
                      <option value="UPI">UPI PAYMENT</option>
                      <option value="BANK transfer">BANK transfer  </option>
                      <option value="NEFT">NEFT PAYMENT</option>
                    </select>
                  </th>
                 <th class="w-25p">&nbsp;</th>
                </tr>
				
				 <tr class="bg-blue">
                  <th class="text-right" colspan="11">Transportation Modes </th>
                  <th class="col-sm-2 text-center">
                    <select id="transportation_mode" class="form-control select2" name="transportation_mode" >
                      <option value="Road">Road</option>
                      <option value="Rail">Rail</option>
                      <option value="Air">Air</option>
                      
                    </select>
                  </th>
                 <th class="w-25p">&nbsp;</th>
                </tr>
				<tr class="bg-blue">
                  <th class="text-right" colspan="11">Transportation Vehicle No. </th>
                  <th class="col-sm-2 text-right">
                     <input style="background:#fff; color: #000; font-size: 22px;text-align:center; width: 100%;"  type="text" id="transport_vehicle_no" name="transport_vehicle_no" value="">
                  </th>
                 <th class="w-25p">&nbsp;</th>
                </tr>
				<tr class="bg-blue ewaybill_no" style="display:none;">
                  <th class="text-right" colspan="11">E - Waybill Number</th>
                  <th class="col-sm-2 text-right">
                     <input style="color: #000; font-size: 22px;text-align:center; width: 100%;"  type="text" id="ewaybill_no" name="ewaybill_no" value="">
                  </th>
                 <th class="w-25p">&nbsp;</th>
                </tr>
				
                <tr class="bg-blue">
                  <th class="text-right" colspan="11">
                  Total Amount                  </th>
                  <th class="col-sm-2 text-right" >
                    <div style="background-color: #fff;" id="total" class="text-center paidAmount" >0</div>
                   <input type="hidden" id="total_amount" name="total_amount" value="">
                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>

                <tr class="bg-blue">
                  <th class="text-right" colspan="11">
                  Paid Amount                  </th>
                  <th class="col-sm-2 text-right" >
                     <input style="color: #000; font-size: 22px;text-align: center;"  type="text" id="paid_amount" name="paid_amount" value="0" required>
                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>
               <!--<tr class="bg-blue">
                  <th class="text-right" colspan="11">
                  UnPaid Amount                  </th>
                  <th class="col-sm-2 text-right" >
                    
                  <input style="color: #000; font-size: 22px"  type="number" id="unpaid" name="unpaid_amount" value="">
                  </th>
                  <th class="w-25p">&nbsp;</th>
                </tr>-->
               
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
              <div class="form-group">
                <div class="col-sm-4 col-sm-offset-3 text-center">            
                  <button id="create-purchase-submit" class="btn btn-block btn-lg btn-info" data-form="#form-purchase" data-datatable="#purchase-purchase-list" name="submit" data-loading-text="Processing...">
                    <i class="fa fa-fw fa-save"></i>
                      Submit        </button>
                </div>
                <div class="col-sm-2 text-center">            
                  <button type="reset" class="btn btn-block btn-lg btn-danger" id="reset" name="reset">
                    <span class="fa fa-fw fa-circle-o"></span>
                      Reset        </button>
                </div>
              </div>
            </div>

          </form>
         

<script>

function getItemDetail(val , ths)
{
    var item_code = val;  
  
  
  var party_role = $("#party_name option:selected").attr('data');
   
  $.ajax({
            type: "GET",
            url: "{{url('admin/accessory-item-detail')}}" +'/'+ item_code,
            dataType: 'json',
            success: function(response) {              
                if (response.status == "Success") {         
                    var item_details = response.item_details;   
                    $(ths).parent().parent().find('.hsnCode').val(item_details.hsn);  
					$(ths).parent().parent().find('.warranty').val(item_details.warranty);  
                     var price =0;
                     if(party_role=='dealer')
					 {
						 price=item_details.dealer_price;
					 }
					 if(party_role=='sub_dealer')
					 {
						 price=item_details.subdealer_price;
					 }
					
                    $(ths).parent().parent().find('.mrp').val(price);
                    $(ths).parent().parent().find('.unitPrice').val(price);
                    calculateTotal(ths);
          
                } else {
                    $('#pin_error').html(response[0].Message);
                    $('#post_office').html("");
                }
            }
        });
  
  
}
        function addNewProductRow() {
            // Clone the template row
            var newRow = document.querySelector('#invoiceTable tbody tr').cloneNode(true);

            // Clear the input values in the new row
            var inputs = newRow.querySelectorAll('input');
            inputs.forEach(input => {
                input.value = '';
                if (input.name === 'totalValue[]' || input.name === 'taxableAmount[]') {
                    input.value = 0;
                }
            });

            // Append the new row to the table
            document.querySelector('#invoiceTable tbody').appendChild(newRow);
        }

        function calculateTotal(input) {
            var row = input.closest('tr');
            var qty = parseFloat(row.querySelector('input[name="qty[]"]').value) || 0;
            var mrp = parseFloat(row.querySelector('input[name="mrp[]"]').value) || 0;
            var unitPrice = parseFloat(row.querySelector('input[name="unitPrice[]"]').value) || 0;

            var taxableAmount = qty * mrp;
             var cgst = parseFloat(row.querySelector('select[name="cgst[]"]').value) || 0;
             var gstamtValue = (taxableAmount * cgst/100) || 0;
             row.querySelector('input[name="sgstUtgst[]"]').value = gstamtValue.toFixed(2);
            //var cgst = parseFloat(row.querySelector('input[name="cgst[]"]').value) || 0;
            //var sgstUtgst = parseFloat(row.querySelector('input[name="sgstUtgst[]"]').value) || 0;
            var discount=0;
           // var totalValue = (taxableAmount + cgst + sgstUtgst) || 0;
            var totalValue = (taxableAmount + gstamtValue - discount) || 0;
            // Update the Taxable Amount and TOTAL Value fields
            row.querySelector('input[name="taxableAmount[]"]').value = taxableAmount.toFixed(2);
            row.querySelector('input[name="totalValue[]"]').value = totalValue.toFixed(2);

            // Update the overall TOTAL Value
            updateOverallTotal();
        }

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

            totalValues.forEach(input => {
                overallTotal += parseFloat(input.value) || 0;
            });

            document.getElementById('total').textContent =  overallTotal.toFixed(2);
      document.getElementById('total_amount').value =  overallTotal.toFixed(2);
      
      
        }

        function removeRow(button) {
            // Only remove rows after the first row
            var row = button.closest('tr');
            if (row.rowIndex !== 1) {
                row.parentNode.removeChild(row);

                // Update the overall TOTAL Value after removing the row
                updateOverallTotal();
            }
        }
		
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) {
                console.log('customer Details', response);
                var option = '';
            
                if (response.status) {
                    option += '<option value="" selected disabled> -- Select Option -- </option>';
                    for (let index = 0; index < response.dealers.length; index++) {
                        let dealer = response.dealers[index];
                        let userTypeLabel = dealer.user_type === 'dealer' ? 'Distributor' : 'Dealer';
            
                        // Use data attributes to store extra info like billing address
                        option += "<option value='" + dealer.id + "' " +
                                  "data-user_type='" + dealer.user_type + "' " +
                                  "data-billing='" + dealer.address + "'>" +
                                  dealer.name + ' (' + userTypeLabel + ')' +
                                  "</option>";
                    }
                    $('#party_name').html(option);
                } else {
                    $('#party_name').html('<option value="">No dealers found</option>');
                }
            }
			});
	}
		
    </script>

          

<script type="text/javascript">

function partyHandler(val = '') {
    var party_name = $('#party_name').val();
    var selectedOption = $('#party_name').find('option:selected');
    var billingAddress = selectedOption.data('billing') || ''; // fallback if undefined

    var supply_state = $('#supply_state').val();
    var city = $('#city').val();

    $('#reset').click();
    $('#total').html('0');
    
    $('#party_name').val(party_name);
    $('#supply_state').val(supply_state);
    $('#city').val(city);
    $('#billing').val(billingAddress); // SET BILLING ADDRESS HERE ✅

    if (val) {
        $(".vehicleform :input").attr("disabled", false);
    } else {
        $(".vehicleform :input").attr("disabled", true);
    }
}
partyHandler();
</script>            
      
  
  </section>
  <!-- Content End -->
</div>
<!-- Content Wrapper End -->

        </div>
      </div>
      </section>
  <!-- Content End -->

</div>
<!-- Content Wrapper End -->
    
   
    <div class="scrolling-sidebar-bg"></div>
    <div class="scrolling-sidebar-mask"></div>
    <!-- Scrolling Sidebar End -->
 
</div>
<!-- End Wrapper -->





<style>
.profitWrap
{
  padding: 5px;
}
</style>

@endsection



<script> 
  //   function getRefDetail(refid)
  // {
  //   if(refid !='')
  //   {
  //    var url = "{{ url('get-referral') }}"+'/'+refid;    
  //    $.ajax({
  //           type: "GET",
  //           url: url,
  //           dataType: 'json',
  //           success: function(response) {
  //               console.log(response);
              
  //               if (response.status == "1") {
  //                  $('#refname').html('<span style="color: #f5f6fa;">'+response.name+'</span>');
                             
  //                   $('#user_type').val(response.slug);
  //         $('#select2-user_type-container').html(response.rolename);  
  //                   defaultid(response.slug);         

  //               } else {
  //                   $('#refname').html('<span style="color: #ef1806;">'+response.message+'</span>');
  //               }
  //           }
  //       });
  //   }else{
  //      $('#refname').html('');
  //   }
    
  // }
  
    function getPostOffice(m_pincode) {
        //var pin_select = ('#pinaddress').val();
        $.ajax({
            type: "GET",
            url: "https://api.postalpincode.in/pincode/" + m_pincode,
            dataType: 'json',
            success: function(response) {
                console.log(response);
                var option = '';
                if (response[0].Status == "Success") {
                    var PostOffice = response[0].PostOffice;
                    var len = PostOffice.length;
                    option += '<option value="" selected disabled> -- Select Option -- </option>';
                    for (let index = 0; index < PostOffice.length; index++) {
                        option += "<option value='" + PostOffice[index].Name + "'>" + PostOffice[index].Name + ", " + PostOffice[index].District + ", " + PostOffice[index].State + "</option>";
                    }
                    $('#pin_error').html("");
                    $('#post_office').html(option);

                    $("#post_office").on("click", function() {

                    });
                    document.getElementById('post_office').click();

                } else {
                    $('#pin_error').html(response[0].Message);
                    $('#post_office').html("");
                }
            }
        });
    }

    function changeAddress() {
        var pin             = $('#pin').val();
        var post_office     = $('#post_office').val();
        $.ajax({
            type: "GET",
            url: "https://api.postalpincode.in/pincode/" + pin,
            dataType: 'json',
            success: function(response) {
                console.log(response);
                var pin_select_status = 0;
                var option = '';
                if (response[0].Status == "Success") {
                    var PostOffice = response[0].PostOffice;
                    option += '<option value="" selected disabled> -- Select Option -- </option>';
                    for (let index = 0; index < PostOffice.length; index++) {
                        if (post_office == PostOffice[index].Name) {
                            pin_select_status   = 1;
                            $('#city').val(PostOffice[index].District);
                            $('#state').val(PostOffice[index].State);
                            $('#country').val(PostOffice[index].Country);
                        }
                        option += "<option value='" + PostOffice[index].Name + "'>"  + PostOffice[index].District + ", " + PostOffice[index].State + "</option>";
                    }
                    if (pin_select_status == 0) {
                        $('#pin_error').html("Error Please re-select address.");
                        $('#post_office').html(option);
                    } else {
                        $('#pin_error').html('');
                    }
                } else {
                    $('#pin_error').html(response[0].Message);
                    $('#post_office').html('');
                }
            }
        });
    }

    // function PanValidate(panVal) {
    //     var regpan = /^([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}?$/;

    //     if(regpan.test(panVal)){
    //         // valid pan card number
    //         $('#pan_error').html('');
    //         var url = "{{ url('pan_validate') }}";

    //         $.ajax({
    //             url: url,
    //             headers: {
    //                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
    //             },
    //             type: "POST",
    //             data: {
    //                 'pan': panVal
    //             },
    //             dataType: 'json',
    //             context: this,
    //             success: function(result) {
    //                 if(result.message=="PAN verified successfully"){
    //                     $('#name').val(result.registered_name);
    //                     $('#father_name').val(result.father_name);
    //                 } else {
    //                     $('#name').val('');
    //                     $('#father_name').val('');
    //                     $('#pan_error').html(result.message);
    //                 }
    //                 console.log(result);
    //             },
    //             error: function(error) {
    //                 console.log(error.responseText);
    //             }
    //         });
    //     } else {
    //         $('#pan_error').html('invalid pan card number');
    //     }
    // }



    // NioApp.Toast('This is a note for top right toast message.', 'info', {
    //   position: 'top-right'
    // });
    
    // NioApp.Toast('<h5>Update Successfully</h5><p>Your profile has been successfully updated.</p>', 'success');

    // var url = "";
    // Swal.fire({
    //     title: "Registration Successfull!",
    //     html: "Your User Id is <h4>user->user_id</h4> and Password is <h4>password</h4> <h5><a href='"+url+"'> Click here to Login </a></h5>",
    //     icon: "success",
    //     showCancelButton: true,
    //     showCloseButton: true,
    // });
</script>
<script>
    // alert(document.cookie);
    getLocation();
    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else { 
        alert("Geolocation is not supported by this browser.");
      }
    }
    
    function showPosition(position) {
        
      document.getElementById("latitude").value=position.coords.latitude;
      document.getElementById("longitude").value=position.coords.longitude;
      sessionStorage.setItem("latitude", position.coords.latitude);
      sessionStorage.setItem("longitude", position.coords.longitude);
    }
    </script>