@extends('adminlayout.dashadmin')

@section('content')
 
<style>
.custom-select-wrapper {
    position: relative;
    width: 150px;
}
.custom-select-input {
    width: 100%;
    padding: 6px;
}
.custom-select-dropdown {
    display: none;
    position: absolute;
    z-index: 9999;
    background: white;
    border: 1px solid #ccc;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
}
.custom-select-dropdown div {
    padding: 5px 10px;
    cursor: pointer;
}
.custom-select-dropdown div:hover {
    background-color: #f1f1f1;
}
</style>




<!-- 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 Charger</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_charger_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="Billing" 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>SERIAL</th>							
							<th>WARRANTY</th>
							<th>MODEL</th>
							<th>TYPE</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>
      <div class="custom-select-wrapper">
        <!-- visible input for searching -->
        <input type="text" 
               class="custom-select-input form-control input-sm text-center" 
               placeholder="Search battery..." 
               oninput="filterBatteryOptions(this)" 
               onclick="toggleBatteryDropdown(this)" 
               required>

        <!-- dropdown list -->
        <div class="custom-select-dropdown" style="display:none; max-height: 200px; overflow-y: auto;">
          @foreach($batteries as $battery)
            <div onclick="selectBattery(this, '{{ $battery->id }}')">
              {{ $battery->serial }}
            </div>
          @endforeach
        </div>

        <!-- hidden input to store selected battery ID -->
        <input type="hidden" name="battery_id[]" class="battery-hidden-id" required>
      </div>
    </td>

    <td><input class="form-control input-sm text-center warranty" type="text" name="warranty[]" required readonly></td>
    <td><input class="form-control input-sm text-center model" type="text" name="model[]" required readonly></td>
    <td><input class="form-control input-sm text-center type" type="text" name="type[]" required readonly></td>
    <td><input class="form-control input-sm text-center" type="number" name="qty[]" oninput="calculateTotal(this)" value="1" required ></td>
    <td><input class="form-control input-sm text-center mrp" type="number" name="mrp[]" oninput="calculateTotal(this)" readonly required></td>
    <td><input class="form-control input-sm text-center unitPrice" type="number" name="unitPrice[]"  oninput="calculateTotal(this)"></td>
    <td><input class="form-control input-sm text-center" type="number" name="taxableAmount[]" readonly></td>
    <td>
      <select class="form-control input-sm text-center" name="cgst[]" onchange="calculateTotal(this)" required>
        @foreach($GstTax as $data)
          <option value="{{ $data->value }}">{{ $data->name }}</option>
        @endforeach
      </select>
    </td>
    <td><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="10">
                  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="10">
                  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="10">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="10">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="10">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="10">
                  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="10">
                  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 battery_id = val;  
  
  
//   var party_role = $("#party_name option:selected").attr('data');
   
//   $.ajax({
//             type: "GET",
//             url: "{{url('admin/battery-detail')}}" +'/'+ battery_id,
//             dataType: 'json',
//             success: function(response) {              
//                 if (response.status == "Success") {         
//                     var item_details = response.item_details;  
//                     console.log('data:',item_details);
// 					$(ths).parent().parent().find('.warranty').val(item_details.warranty); 
//                      $(ths).parent().parent().find('.model').val(item_details.name); 
// 					 $(ths).parent().parent().find('.type').val(item_details.type); 
					 
//                      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 getItemDetail(batteryId, ths) {
//     var party_role = $("#party_name option:selected").attr('data');

//     $.ajax({
//         type: "GET",
//         url: "{{url('admin/battery-detail')}}" +'/'+ batteryId,
//         dataType: 'json',
//         success: function(response) {
//             if (response.status === "Success") {
//                 const item = response.item_details;

//                 console.log('Data received:', item); // debugging

//                 //  THIS IS THE CORRECT WAY
//                 const row = $(ths).closest('tr');

//                 row.find('.warranty').val(item.warranty);
//                 row.find('.model').val(item.name);
//                 row.find('.type').val(item.type);

//                 let price = 0;
//                 if (party_role === 'dealer') {
//                     price = item.dealer_price;
//                 } else if (party_role === 'sub_dealer') {
//                     price = item.subdealer_price;
//                 }

//                 row.find('.mrp').val(price);
//                 row.find('.unitPrice').val(price);

//                 calculateTotal(ths);
//             } else {
//                 alert('Battery details not found.');
//             }
//         }
//     });
// }

      


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>
function getItemDetail(batteryId, inputEl) {
const selectedOption = $("#party_name option:selected");
const party_type = selectedOption.data('user_type') || '';
console.log('party name:', party_type);
    const row = $(inputEl).closest('tr');

    $.ajax({
        type: "GET",
        url: "{{ asset('admin/charger-detail') }}/" + batteryId,
        dataType: 'json',
        success: function(response) {
            if (response.status === "Success") {
                const item = response.item_details;

                row.find('.warranty').val(item.warranty);
                row.find('.model').val(item.name);
                row.find('.type').val(item.type);

                let price = 0;
                if (party_type === 'dealer') {
                    price = item.dealer_price;
                } else if (party_type === 'sub_dealer') {
                    price = item.subdealer_price;
                }
               
                row.find('.mrp').val(price);
                row.find('.unitPrice').val(price);

                calculateTotal(row[0]); // DOM element
            } else {
                console.error("Battery data not found.");
            }
        },
        error: function() {
            console.error("AJAX error fetching battery details.");
        }
    });
}

function calculateTotal(input) {
    const row = input.closest('tr');

    const qty = parseFloat(row.querySelector('input[name="qty[]"]').value) || 0;
    const mrp = parseFloat(row.querySelector('input[name="mrp[]"]').value) || 0;
    const unitPrice = parseFloat(row.querySelector('input[name="unitPrice[]"]').value) || 0;

    const taxableAmount = qty * unitPrice;
    const cgst = parseFloat(row.querySelector('select[name="cgst[]"]').value) || 0;

    const gstAmt = (taxableAmount * cgst) / 100;
    const totalValue = taxableAmount + gstAmt;

    row.querySelector('input[name="taxableAmount[]"]').value = taxableAmount.toFixed(2);
    row.querySelector('input[name="sgstUtgst[]"]').value = gstAmt.toFixed(2);
    row.querySelector('input[name="totalValue[]"]').value = totalValue.toFixed(2);

    updateOverallTotal();
}

function updateOverallTotal() {
    const totalInputs = document.querySelectorAll('input[name="totalValue[]"]');
    let grandTotal = 0;

    totalInputs.forEach(input => {
        grandTotal += parseFloat(input.value) || 0;
    });

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

function removeRow(button) {
    const row = button.closest('tr');
    const tbody = row.parentNode;

    if (tbody.children.length > 1) {
        tbody.removeChild(row);
        updateOverallTotal();
    }
}

function addNewProductRow() {
    const newRow = document.querySelector('#invoiceTable tbody tr').cloneNode(true);

    newRow.querySelectorAll('input').forEach(input => {
        if (input.type !== "hidden") {
            input.value = input.classList.contains('qty') ? "1" : "";
        }
    });

    newRow.querySelector('.battery-hidden-id').value = "";
    newRow.querySelector('.custom-select-input').value = "";

    document.querySelector('#invoiceTable tbody').appendChild(newRow);
}

// === Custom Select Functions ===

function selectBattery(option, batteryId) {
    const wrapper = option.closest('.custom-select-wrapper');
    const textInput = wrapper.querySelector('.custom-select-input');
    const hiddenInput = wrapper.querySelector('.battery-hidden-id');
    const row = option.closest('tr');

    textInput.value = option.innerText;
    hiddenInput.value = batteryId;

    wrapper.querySelector('.custom-select-dropdown').style.display = 'none';

    getItemDetail(batteryId, textInput);
}

function toggleBatteryDropdown(input) {
    const dropdown = input.closest('.custom-select-wrapper').querySelector('.custom-select-dropdown');
    dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}

function filterBatteryOptions(input) {
    const filterText = input.value.toLowerCase();
    const dropdown = input.closest('.custom-select-wrapper').querySelector('.custom-select-dropdown');
    const options = dropdown.querySelectorAll('div');
  
    options.forEach(option => {
        const text = option.innerText.toLowerCase();
        option.style.display = text.includes(filterText) ? 'block' : 'none';
    });
}
</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 party_type = selectedOption.data('user_type') || ''; 

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

<script>
function toggleBatteryDropdown(input) {
    closeAllDropdowns(); // close any other open dropdowns
    const dropdown = input.nextElementSibling;
    dropdown.style.display = 'block';
}

function filterBatteryOptions(input) {
    const filter = input.value.toUpperCase();
    const dropdown = input.nextElementSibling;
    const options = dropdown.querySelectorAll('div');

    options.forEach(option => {
        const text = option.textContent || option.innerText;
        option.style.display = text.toUpperCase().includes(filter) ? '' : 'none';
    });
}

function selectBattery(option, batteryId) {
    const wrapper = option.closest('.custom-select-wrapper');
    const textInput = wrapper.querySelector('.custom-select-input');
    const hiddenInput = wrapper.querySelector('.battery-hidden-id');

    // Set values
    textInput.value = option.innerText;
    hiddenInput.value = batteryId;

    // Hide dropdown
    wrapper.querySelector('.custom-select-dropdown').style.display = 'none';
   
   console.log('battery Id :',batteryId)
    //  Call getItemDetail using batteryId and input element
    getItemDetail(batteryId, textInput);
}


function closeAllDropdowns() {
    document.querySelectorAll('.custom-select-dropdown').forEach(drop => drop.style.display = 'none');
}

document.addEventListener('click', function(e) {
    if (!e.target.closest('.custom-select-wrapper')) {
        closeAllDropdowns();
    }
});
</script>




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

@endsection