@include('layouts.header')
<!-- /Header -->
@include('layouts.sidebar')
<style>
    .select2-container--default .select2-selection--single {
        
        border: 1px solid #e9edf6 !important;
        height:40px !important; 
       
    }
    .select2-container .select2-selection--single .select2-selection__arrow {
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 20px !important; 
        background-color: transparent !important;
        border-left: 1px solid #aaa !important; 
    }
    
    .select2-container .select2-selection__arrow b {
      
        border-width: 5px 5px 0 5px !important; 
        border-style: solid !important;
        display: inline-block !important;
        margin-top: 5px !important;
        vertical-align: middle !important;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow 
    {
        display: none !important;
    }
    .select2-selection__clear{
        display: none !important;
        /* color:#aaa; */
    }
    #product_select{
        width: auto;
    }
    
    </style>
    
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="add-item d-flex">
                <div class="page-title">
                    <h4>ADD PURCHASE ORDER</h4>
                    <h6>CREATE NEW PURCHASE ORDER</h6>
                </div>
            </div>
            <ul class="table-top-head">
                <li>
                    <div class="page-btn">
                        <a href="{{ route('purchase_orders') }}" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back to Purchases</a>
                    </div>
                </li>
            </ul>
        </div>

        @if(session()->has('success'))
            <div class="alert alert-success">{{ session()->get('success') }}</div>
        @endif
        @if(session()->has('error'))
            <div class="alert alert-danger">{{ session()->get('error') }}</div>
        @endif

        <form id="myForm" action="{{ route('save_purchase_order')}}" method="post">
            @csrf
            <div class="card">
                <div class="card-body add-product pb-0">
                    <div class="accordion-card-one accordion" id="accordionExample">
                        <div class="accordion-item">
                            <div class="accordion-header" id="headingOne">
                                <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-controls="collapseOne">
                                    {{-- <h5><i data-feather="info"></i><span>Add Purchase</span></h5> --}}
                                </div>
                            </div>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    <div class="row">
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label class="form-label">PO Number</label>
                                                <input type="text" name="po_number" class="form-control" value="{{ $newPOId }}" readonly>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label class="form-label">PO Date</label>
                                                <input type="date" name="po_date" value="{{ date('Y-m-d') }}" class="form-control" >
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label class="form-label">Company</label>
                                                <select class="form-control" name="company" id="company_id" required="required">
                                                    <option value="">Select</option>
                                                    @foreach($companies as $row)
                                                        <option value="{{ $row->id }}">{{ $row->company_name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="row">
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label class="form-label">Supplier</label>
                                                <select class="form-control" name="supplier" id="supplier_select" >
                                                    <option value="">Select</option>
                                                    @foreach($suppliers as $row)
                                                        <option value="{{ $row->id }}" data-top="{{ $row->top }}">{{ $row->supplier_name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                         <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                              <div class="add-newplus">
                                                <label class="form-label">Staff</label>
                                                <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add-staff"><i data-feather="plus-circle" class="plus-down-add"></i><span>Add New</span></a>
                                                </div> 
                                                <select class="form-control" name="staff_id" id="staff_id" required >
                                                    <option value="">Select</option>
                                                    @foreach($staffs as $row)
                                                        <option value="{{ $row->id }}" >{{ $row->full_name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        
                                        <div class="col-lg-4 col-sm-6 col-12">
                                            <div class="mb-3 add-product">
                                                <label class="form-label">Transporter</label>
                                                <select class="form-control" name="transporter" id="transporter_id">
                                                    <option value="">Select</option>
                                                    @foreach($transporters as $row)
                                                        <option value="{{ $row->id }}" >{{ $row->transporter_name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-12">
                                            <h5>Order Items</h5>
                                            <div class="table-responsive">
                                                <table class="table table-bordered" id="order-items">
                                                    <thead>
                                                        <tr>
                                                            <th>Action</th>
                                                            <th>Product Name</th>
                                                            <th>Design/Varient No</th>
                                                            <th>No Of Rolls</th>
                                                            <th>Rate /Unit</th>
                                                            <th>Quantity /Roll</th>
                                                            <th style="width: 30%">UOM</th>
                                                            <th>% GST</th>.
                                                            <th style="width: 60%">Amount</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr class="order-row">
                                                           <td>
                                                            <a href="#" class="btn btn-danger remove-item" style="color:white;background:red"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle minus"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
                                                           </td>
                                                              
                                                            <td>
                                                                <select name="product_id[]" class="form-control product-select" id="product_select" required>
                                                                <option value="">Select Product</option>
                                                               <!--  {{-- @foreach($varients as $row)
                                                                <option value="{{ $row->id }}">{{ $row->varient_code}}-{{ $row->varient_name}}</option>
                                                                @endforeach     --}} -->
                                                                </select>
                                                            </td> 
                                                            
                                                            <td>
                                                                <select name="varient_id[]" class="form-control variant-select"  required>
                                                                <option value="">Select Varient</option>
                                                                {{-- @foreach($varients as $row)
                                                                <option value="{{ $row->id }}">{{ $row->varient_code}}-{{ $row->varient_name}}</option>
                                                                @endforeach     --}}
                                                                </select>
                                                            </td>
                                                            <td><input type="text" name="no_of_rolls[]" class="form-control no_of_rolls" oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       pattern="^\d*\.?\d*$"></td>
                                                            <td><input type="text" name="rate[]" oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       pattern="^\d*\.?\d*$" class="form-control rate" required></td>
                                                            <td><input type="text" name="quantity[]" oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       pattern="^\d*\.?\d*$" class="form-control quantity" required></td>
                                                            <td>


                                                                <input type="hidden" name="hsn_code[]" class="form-control hsn_code" >
                                                                 <input type="hidden"  class="form-control top" >
                                                                <select name="uom[]" class="form-control uom"  required>
                                                                    <option value="">Select Units</option>
                                                                    @foreach($units as $row)
                                                                    <option value="{{ $row->id }}">{{ $row->unit_name}}</option>
                                                                    @endforeach    
                                                                    </select>

                                                            </td>
                                                            <td><input type="text" name="gst_percent[]" class="form-control gst_percent" readonly onkeypress="return event.charCode >= 48 && event.charCode <= 57" ></td>
                                                            <td><input type="text" name="total[]" class="form-control total" readonly></td>

                                                        </tr>
                                                        <tr>
                                                        <td>
                                                                        
                                                            <a href="#" class="btn btn-success add-item" style="color:white;background:green"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle plus">
                                                                <circle cx="12" cy="12" r="10"></circle>
                                                                <line x1="12" y1="8" x2="12" y2="16"></line>
                                                                <line x1="8" y1="12" x2="16" y2="12"></line>
                                                            </svg></a>
                                                        </td></tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <!-- Gross Total -->
                                        <div class="col-lg-4 offset-lg-8">
                                            <div class="d-flex align-items-center mb-3">
                                                <label class="form-label me-2 mb-0" style="white-space: nowrap;">Sub Total:</label>
                                                <input type="number" name="subtotal" class="form-control grosstotal" readonly>
                                            </div>
                                        </div>


                                          <!--New calulation of forwarding-->

                                                <div class="col-lg-4 offset-lg-8">
                                                    <div class="d-flex align-items-center mb-3">
                                                        <label class="form-label me-2 mb-0" style="white-space: nowrap;">Forwarding:</label>
                                                        
                                                        <!-- Forwarding Type -->
                                                        <select class="form-select forwarding_type" style="width: 30%; margin-right: 10px;" name="forwarding_type">
                                                            <option value="percentage">%</option>
                                                            <option value="fixed">Amount</option>
                                                        </select>


                                                        <!-- Percentage Input -->
                                                        <div class="input-group forwarding-percent-box" style="width: 50%;">
                                                            <input type="text" class="form-control forwarding_percent" name="f_percent"
                                                                oninput="this.value = this.value.replace(/[^0-9.]/g, '')" pattern="^\d*\.?\d*$">
                                                            <span class="input-group-text">%</span>
                                                        </div>

                                                        <!-- Amount Input (Hidden by Default) -->
                                                        <input type="text" class="form-control forwarding_amount_box ms-3" name="f_amount_input"
                                                            style="width: 50%; display: none;" oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                                    </div>
                                                </div>

                                                <div class="col-lg-4 offset-lg-8">
                                                    <div class="d-flex align-items-center mb-3">
                                                        <label class="form-label me-2 mb-0" style="white-space: nowrap;">Forwarding Amount:</label>
                                                        <input type="text" name="f_amount" class="form-control f_amount" readonly>
                                                      <input type="hidden" name="forwarding_gst" class="forwarding_gst">

                                                    </div>
                                                </div>
                                                        
                                        
                                        <div class="col-lg-4 offset-lg-8">
                                            <div class="d-flex align-items-center mb-3">
                                                <label class="form-label me-2 mb-0" style="white-space: nowrap;">GST Amount (Item+Forwarding):</label>
                                                <input type="number" id="gst_total_input" name="gst_amount_data" class="form-control " readonly>
                                            </div>
                                        </div>

                                        <!-- Final Amount -->
                                        <div class="col-lg-4 offset-lg-8">
                                            <div class="d-flex align-items-center">
                                                <label class="form-label me-2 mb-0" style="white-space: nowrap;margin-left:-12px">Grand  Total</label>
                                                <input type="number" name="grand_total" class="form-control" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <hr>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="d-flex align-items-center mb-2">
                                                <label class="form-label me-2">Note:</label>
                                                <input type="text" name="note" class="form-control"  >
                                            </div>
                                        </div>
                                    </div>

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

             <div class="mt-4">
                    <h5><strong>GST Summary</strong></h5><br>
                    <table class="table table-bordered" id="gst-summary-table">
                        <thead>
                            <tr>
                                <th>HSN Code</th>
                                <th>GST %</th>
                                <th>CGST %</th>
                                <th>SGST %</th>
                                <th>IGST %</th>
                                <th>Total GST Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                           
                        </tbody>
                    </table>
                </div> <br>

            <div class="col-lg-12">
                <div class="btn-addproduct mb-4">
                    <button type="button" class="btn btn-cancel me-2">Cancel</button>
                    <button type="submit" id="submitBtn" class="btn btn-primary">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>


<!--add staff modal -->
<div class="modal fade" id="add-staff">
    <div class="modal-dialog modal-dialog-centered custom-modal-two">
        <div class="modal-content">
            <div class="page-wrapper-new p-0">
                <div class="content">
                    <div class="modal-header border-0 custom-modal-header">
                        <div class="page-title">
                            <h4>Add New Staff</h4>
                        </div>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body custom-modal-body">
                        <form id="addStaffForm">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">Staff Name</label>
                            <input type="text" name="sstaff_name" id="sstaff_name" class="form-control" required> 
                        </div>
                       
                    <div class="mb-3">
                        <div class="mb-3 add-product">
                            <label class="form-label">Phone1</label>
                            <input type="text" name="sphone1"  class="form-control" id="sphone1" placeholder="Enter Phone" onkeypress="return event.charCode >= 48 && event.charCode <= 57 && this.value.length < 10">
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="mb-3 add-product">
                            <label class="form-label">Phone2</label>
                            <input type="text" name="sphone2" class="form-control" id="sphone2" placeholder="Enter Phone2" onkeypress="return event.charCode >= 48 && event.charCode <= 57 && this.value.length < 10">

                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="mb-3 add-product">
                            <label class="form-label">Payment</label>
                            <input type="text" name="spayment" class="form-control"  id="spayment" placeholder="Enter Payment" onkeypress="return event.charCode >= 48 && event.charCode <= 57 && this.value.length < 10">

                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="mb-3 add-product">
                            <label class="form-label">Payment Date</label>
                            <input type="date" name="spayment_date" id="spayment_date" class="form-control" placeholder="Enter Payment Date">

                        </div>
                    </div>
      
                    <div class="mb-3">
                        <div class="input-blocks summer-description-box transfer mb-3">
                            <label>Address</label>
                            <textarea class="form-control h-100" rows="5" id="saddress" name="saddress" placeholder="Enter Address"></textarea>
                            
                        </div>
                    </div>
                 
                     <div class="mb-3">
                        <div class="mb-3 add-product">
                            <label class="form-label">City</label>
                            <input type="text" name="scity" id="scity"  class="form-control" placeholder="Enter City">

                        </div>
                    </div>
                     <div class="mb-3">
                        <div class="mb-3 add-product">
                            <label class="form-label">State</label>
                            <input type="text" name="sstate" id="sstate"  class="form-control" placeholder="Enter State">

                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="mb-3 add-product">
                            <label class="form-label">PIN Code</label>
                            <input type="text" name="spincode" id="spincode" onkeypress="return event.charCode >= 48 && event.charCode <= 57" class="form-control" placeholder="Enter PIN Code">

                        </div>
                    </div>
                        <div class="modal-footer-btn">
                            <a href="javascript:void(0);" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</a>
                            <input type="submit" class="btn btn-submit" name="submit" value="Submit">
                        </div>
                    </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
     </div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

{{-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>  --}}


@include('layouts.footer')

<script>
$(document).ready(function () {

 let previousSupplier = $('#supplier_select').data('previous') || '';

    $('#supplier_select').on('change', function() {
        let supplierId = $(this).val();

        // Check if there are any existing filled rows
        let hasItems = false;
        $('#order-items tbody tr').each(function() {
            if ($(this).find('.product-select').val() || $(this).find('.variant-select').val()) {
                hasItems = true;
                return false;
            }
        });

        if (hasItems) {
            if (!confirm('Are you sure you want to change the supplier ?')) {
                
                $(this).val(previousSupplier);
                return;
            }

            // Clear all rows except one
            $('#order-items tbody').html(`
                <tr class="order-row">
                    <td>
                        <a href="#" class="btn btn-danger remove-item" style="color:white;background:red">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle minus">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="8" y1="12" x2="16" y2="12"></line>
                            </svg>
                        </a>
                    </td>
                    <td>
                        <select name="product_id[]" class="form-control product-select" required>
                            <option value="">Select Product</option>
                        </select>
                    </td>
                    <td>
                        <select name="varient_id[]" class="form-control variant-select" disabled>
                            <option value="">Select Variant</option>
                        </select>
                    </td>
                    <td><input type="text" name="no_of_rolls[]" class="form-control no_of_rolls"></td>
                    <td><input type="text" name="rate[]" class="form-control rate"></td>
                    <td><input type="text" name="quantity[]" class="form-control quantity"></td>
                    <td>
                    <input type="hidden"  class="form-control hsn_code" >
                    <input type="hidden"  class="form-control top" >
                        <select name="uom[]" class="form-control uom">
                            <option value="">Select Units</option>
                            @foreach($units as $row)
                                <option value="{{ $row->id }}">{{ $row->unit_name}}</option>
                            @endforeach    
                        </select>
                    </td>
                    <td><input type="text" name="gst_percent[]" class="form-control gst_percent" readonly></td>
                    <td><input type="text" name="total[]" class="form-control total" readonly></td>
                </tr>
                <tr>
                    <td>
                        <a href="#" class="btn btn-success add-item" style="color:white;background:green">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle plus">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="8" x2="12" y2="16"></line>
                                <line x1="8" y1="12" x2="16" y2="12"></line>
                            </svg>
                        </a>
                    </td>
                </tr>
            `);
            const gstTableBody = document.querySelector('#gst-summary-table tbody');
            gstTableBody.innerHTML = '';

            // Reset totals
            $('input[name="subtotal"], input[name="f_amount"],input[name="f_percent"], input[name="gst_amount"],input[name="gst_amount_data"],input[name="grand_total"]').val('');
        }

        // Save current supplier as previous for next time
        $('#supplier_select').data('previous', supplierId);

        // Now proceed with your existing AJAX call
        if (supplierId) {
            $.ajax({
                url: '/get-products-by-supplier/' + supplierId,
                type: 'GET',
                success: function(response) {
                

                    let firstProductDropdown = $('#order-items tbody').find('.product-select').first();
                    firstProductDropdown.empty().append('<option value="">Select Product</option>');
                    $.each(response.products, function(index, product) {
                        firstProductDropdown.append('<option value="' + product.id + '">' + product.product_name + '</option>');
                    });

                }
            });
        } else {
            $('#product_select').html('<option value="">Select</option>');
        }
    });

      $('#addStaffForm').submit(function(e) {
			e.preventDefault(); 
			    var name = $('#sstaff_name').val();
			    var payment = $('#spayment').val();
			    var paymentdate = $('#spayment_date').val();
			    var address = $('#saddress').val();
			    var city = $('#scity').val();
			    var state = $('#sstate').val();
			    var pincode = $('#spincode').val();
			    var phone1 = $('#sphone1').val();
			    var phone2=$('#sphone2').val();
             
			$.ajax({
				url: "{{ route('add_staff_dynamic') }}", 
				method: 'POST',
				data: {
					    _token: '{{ csrf_token() }}',
					    name: name,
                        payment:payment,
                        paymentdate:paymentdate,
					    address:address,
					    city:city,
					    state:state,
					    phone1:phone1,
					    phone2:phone2,
					    pincode:pincode
				},
				success: function(response) {
					if (response.success) {
						
						$('#add-staff').modal('hide');

						$('#addStaffForm')[0].reset();

						$('select[name="staff_id"]').append('<option value="' + response.staff.id + '" selected>' + response.staff.full_name + '</option>');

						//alert('Customer added successfully!');
						Swal.fire({
						    icon: 'success',
						    title: 'Staff added successfully!',
						    showConfirmButton: false,
						    timer: 2000
						});
						
					} else {
						alert('Failed to add staff!');
					}
				},
				error: function() {
					alert('An error occurred while adding the staff.');
				}
			});
	   });

    
    document.getElementById("myForm").addEventListener("submit", function(event) {
        let submitBtn = document.getElementById("submitBtn");
        
        if (submitBtn.disabled) {
            event.preventDefault(); // Prevent form resubmission
            alert("Please wait, your info is submitted.");
        } else {
            submitBtn.disabled = true;
            submitBtn.innerText = "Submitting...";
        }
    });
    

    const productSelect = $('#product_select');

   // Initialize existing variant-select dropdowns as disabled
    $('.variant-select').prop('disabled', true);

    // Enable/Disable variant-select based on supplier selection
    $(document).on('change', '.product-select', function () {
        const row = $(this).closest('tr'); // Scope to the current row
        const product_id = $(this).val();
        const variantDropdown = row.find('.variant-select'); // Only the dropdown in this row

        if (product_id) {
            $.ajax({
                url: '/get-variants-by-product-po',
                method: 'GET',
                data: { product_id: product_id },
                success: function (response) {
                    variantDropdown.empty(); // Clear options
                    variantDropdown.append('<option value="">Select Variant</option>');

                    if (response.length > 0) {
                        response.forEach(variant => {
                            variantDropdown.append(
                                `<option value="${variant.id}">${variant.varient_code} - ${variant.varient_name}</option>`
                            );
                        });
                    } else {
                        alert('No variants found for this product.');
                    }
                },
                error: function () {
                    alert('Failed to fetch variants. Please try again.');
                }
            });
        }

        // Enable or disable the variant dropdown in the current row
        const isProductSelected = !!product_id;
        variantDropdown.prop('disabled', !isProductSelected);

        const selectedSupplier = $(this).find(':selected').data('top'); 
        toggleGstFields(selectedSupplier); // If still needed
    });

  // let firstRow = $('#order-items tbody tr:first');
  // firstRow.find('.add-item').replaceWith('<a href="#" class="btn btn-danger remove-item" style="color:white;background:red"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle minus"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>');
    // Add Item Event
    $(document).on('click', '.add-item', function (e) {
        e.preventDefault();

        // Get the current row and update its button to 'Remove'
       // let currentRow = $(this).closest('tr');
      
        //currentRow.find('.add-item').replaceWith('<a href="#" class="btn btn-danger remove-item" style="color:white;background:red"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle minus"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>');

        // Clone the first row for a new entry
         // Find the last filled row (any row with at least one non-empty input)
    let lastFilledRow = $('#order-items tbody tr').filter(function() {
        return $(this).find('input').filter(function() {
            return $(this).val().trim() !== ''; // Check if any input has value
        }).length > 0; // If there is at least one non-empty input, it's filled
    }).last(); // Get the last filled row

    let newRow = lastFilledRow.length ? lastFilledRow.clone() : $('#order-items tbody tr:first').clone();
    newRow.find('input').val(''); // Clear input fields
    newRow.find('.variant-select').prop('disabled', !productSelect.val());

    // Append the new row **after the last filled row**
    lastFilledRow.length ? lastFilledRow.after(newRow) : $('#order-items tbody').prepend(newRow);
       
    });

    // Remove Item Event
    $(document).on('click', '.remove-item', function (e) {
        e.preventDefault();
        if ($('.remove-item').length > 1) {
            $(this).closest('tr').remove();
            calculateForwarding();
             updateGstSummary();
           // recalculateGstAmount();
            calculateTotal();
        }else {
            alert("You must keep at least one item in the list.");
        }
    });


    // Rate and Quantity Input Event
    $(document).on('input', '.no_of_rolls,.rate, .quantity', function () {
    let row = $(this).closest('tr');

    let no_of_rolls = parseFloat(row.find('.no_of_rolls').val()) || 0;
    let rate = parseFloat(row.find('.rate').val()) || 0;
    let quantity = parseFloat(row.find('.quantity').val()) || 0;
    let total = rate * quantity * no_of_rolls;
    row.find('.total').val(total.toFixed(2));

    let gst_percent = parseFloat(row.find('.gst_percent').val()) || 0;
    let net_total = total + (total * gst_percent/100 );
    row.find('.nettotal').val(net_total.toFixed(2));

    calculateTotal();
    updateGstSummary();
     calculateForwarding();
});

$('input[name="f_percent"]').on('input', calculateForwarding);


   function calculateForwarding() {
    let gst_percent_single = parseFloat($('#order-items tbody tr:first').find('.gst_percent').val()) || 0;
    let forwarding_percent = parseFloat($('input[name="f_percent"]').val()) || 0; 
    let grosstotal = parseFloat($('input[name="subtotal"]').val()) || 0; 
    let forwarding = grosstotal * forwarding_percent / 100;

    $('input[name="f_amount"]').val(forwarding.toFixed(2)); 

    // ✅ FIX: Forwarding GST separate
    let itemGstAmount = (grosstotal * gst_percent_single) / 100;
    let fwdGstAmount = (forwarding * gst_percent_single) / 100;
    let gstnewAmount = itemGstAmount + fwdGstAmount;

    let halfamount = gstnewAmount / 2;

    $('input[name="gst_amount"]').val(gstnewAmount.toFixed(2));
    $('input[name="cgst_amount"]').val(halfamount.toFixed(2));
    $('input[name="sgst_amount"]').val(halfamount.toFixed(2));
    $('input[name="igst_amount"]').val(gstnewAmount.toFixed(2));

    calculateTotal();
}
  
  

    function calculateTotal() {
    let subtotal = 0;
    $('#order-items tbody tr').each(function () {
        let total = parseFloat($(this).find('.total').val()) || 0;
        subtotal += total;
    });

    $('input[name="subtotal"]').val(subtotal.toFixed(2));

    var fper = parseFloat($('input[name="f_percent"]').val()) || 0;
    var fsub = parseFloat($('input[name="subtotal"]').val())|| 0;
    var newforwarding = fsub * fper / 100;
    $('input[name="f_amount"]').val(newforwarding.toFixed(2));

    let gst_percent_new = parseFloat($('#order-items tbody tr:first').find('.gst_percent').val()) || 0;

    // ✅ FIX: Forwarding GST separate
    let itemGstAmount = (fsub * gst_percent_new) / 100;
    let fwdGstAmount = (newforwarding * gst_percent_new) / 100;
    let gstnewAmountdata = itemGstAmount + fwdGstAmount;

    let halfamountnew = gstnewAmountdata / 2;
    $('input[name="gst_amount"]').val(gstnewAmountdata.toFixed(2));
    $('input[name="cgst_amount"]').val(halfamountnew.toFixed(2));
    $('input[name="sgst_amount"]').val(halfamountnew.toFixed(2));
    $('input[name="igst_amount"]').val(gstnewAmountdata.toFixed(2));

    let forwarding = parseFloat($('input[name="f_amount"]').val()) || 0;
    let gst_amount = parseFloat($('input[name="gst_amount_data"]').val()) || 0;

    let grandTotal = subtotal + forwarding + gst_amount;
    $('input[name="grand_total"]').val(grandTotal.toFixed(2));
}



 

   $(document).on('change', '.variant-select', function () {
    var variantId = $(this).val(); 
    var row = $(this).closest('tr'); 

    if (variantId) {
        $.ajax({
            url: '{{ route("getVariantDetails") }}', 
            type: 'GET',
            data: { id: variantId },
            success: function (response) {
                row.find('.rate').val(response.rate);
                row.find('.quantity').val(response.quantity);
                row.find('.uom').val(response.uom_id);
                row.find('.gst_percent').val(response.gst_rate);
                row.find('.hsn_code').val(response.hsn_code);
                row.find('.top').val(response.top);
            }
        });
    }
});

   
   
   $(document).on('change', '.uom', function () {
    var unitId = $(this).val(); 
  
    var row = $(this).closest('tr'); 
    var rate = parseFloat(row.find('.rate').val()) || 0;
    var quantity = parseFloat(row.find('.quantity').val()) || 0;
    var no_of_rolls = parseFloat(row.find('.no_of_rolls').val()) || 1;
    let gst_percent_data = parseFloat($('#order-items tbody tr:first').find('.gst_percent').val()) || 0;
    
    // Store previous values in data attributes
    if (!row.data('originalRate')) {
        row.data('originalRate', rate);
        row.data('originalQuantity', quantity);
    }

    if (unitId) {
        $.ajax({
            url: '{{ route("convertunit") }}', 
            type: 'GET',
            data: { id: unitId, rate: rate, quantity: quantity, no_of_rolls: no_of_rolls },
            success: function (response) {
                console.log(response);

                if ( response.unit_name === 'sqft' ||
			    response.unit_name === 'Sqft' ||
			    response.unit_name === 'SQFT' ||
			    response.unit_name === 'sq.feet') {
                    // Restore previous values
                    row.find('.rate').val(row.data('originalRate').toFixed(2));
                    row.find('.quantity').val(row.data('originalQuantity'));
                    
                } else {
                    // Convert and update values
                    row.find('.rate').val(response.rate.toFixed(2));
                    row.find('.quantity').val(response.quantity);
                }

                row.find('.uom').val(response.uom_id);
                row.find('.no_of_rolls').val(response.no_of_roll);

                

                // Update total
                row.find('.total').val(parseFloat(row.find('.rate').val()) * parseFloat(row.find('.quantity').val()) * no_of_rolls);

                // Calculate gross total
                var grossTotal = 0;
                $('.total').each(function() {
                    grossTotal += parseFloat($(this).val()) || 0;
                });

                $('.grosstotal').val(grossTotal.toFixed(2));
                
                 var fper=parseFloat($('input[name="f_percent"]').val()) || 0;
                 var fsub=parseFloat($('input[name="subtotal"]').val()) || 0;
                  var newforwarding = fsub * fper / 100;
                 $('input[name="f_amount"]').val(newforwarding.toFixed(2));
               
                
                 let forwarding = parseFloat($('input[name="f_amount"]').val());
               //  let newamt=forwarding + grossTotal;
                   let newamt= grossTotal;
                

                let gstnewAmount = (newamt * gst_percent_data) / 100;
               
                let halfamountnew=gstnewAmount/2;
                $('input[name="gst_amount_data"]').val(gstnewAmount.toFixed(2));
                $('input[name="cgst_amount"]').val(halfamountnew.toFixed(2));
                $('input[name="sgst_amount"]').val(halfamountnew.toFixed(2));
                $('input[name="igst_amount"]').val(gstnewAmount.toFixed(2));
                
                console.log("Sub b Total Total: ", grossTotal.toFixed(2));
                var finaltotal=gstnewAmount + grossTotal + forwarding;
              
                $('input[name="grand_total"]').val(finaltotal.toFixed(2));
                
                   updateGstSummary();
            },
            error: function (xhr) {
                console.error("Error fetching unit details: ", xhr.responseText);
            }
        });
    }
});


      

        function toggleGstFields(supplierTop) {
        const cgstField = $('#cgst_div');
        const sgstField = $('#sgst_div');
        const igstField = $('#igst_div');

        if (supplierTop === 'OMS') {
            cgstField.hide();
            sgstField.hide();
            igstField.show();
        } else if (supplierTop === 'MSP') {
            cgstField.show();
            sgstField.show();
            igstField.hide();
        }
    }




    function getLatestSubtotal() {
    return parseFloat($('.grosstotal').val()) || 0; 

}

  $('#company_id').select2({
        placeholder: "Select Company",   
        allowClear: true,
		search:true,
		          
    });
    
      $('#supplier_select').select2({
        placeholder: "Select Supplier",   
        allowClear: true,
		search:true,
		          
    });
    
      $('#transporter_id').select2({
        placeholder: "Select Transporter",   
        allowClear: true,
		search:true,
		          
    });
    
    
  
        
});

</script>


<!-- gst summary -->

<script>
  $(document).ready(function () {
    let f_amount = 0;
    $('.forwarding_percent').on('input', function () {
        const percent = parseFloat($(this).val()) || 0;
        const subtotal = parseFloat($('.grosstotal').val()) || 0;

        f_amount = (subtotal * percent) / 100;
         //console.log(f_amount);
        $('.f_amount').val(f_amount.toFixed(2)); // Set value in input
        updateGstSummary();
    });
});




function updateGstSummary() {
    let gstGroups = {};
    const subtotal = parseFloat($('.grosstotal').val()) || 0;
    const forwardingTotal = parseFloat($('.f_amount').val()) || 0;

    // Global Forwarding GST details
    const forwardingHSN = "5245";
    const forwardingGST = 18;

    let items = [];
    let totalTaxable = 0;

    // Step 1: Collect all items
    document.querySelectorAll('#order-items tbody tr').forEach(row => {
        let qty = parseFloat(row.querySelector('.quantity')?.value || 0);
        let rate = parseFloat(row.querySelector('.rate')?.value || 0);
        let no_of_rolls = parseFloat(row.querySelector('.no_of_rolls')?.value || 0);
        let gst = parseFloat(row.querySelector('.gst_percent')?.value || 0);
        let hsncode = row.querySelector('.hsn_code')?.value || '';
        let top = row.querySelector('.top')?.value || '';

        if (qty === 0 || rate === 0 || !hsncode.trim()) return;

        let amount = no_of_rolls * qty * rate;
        totalTaxable += amount;

        items.push({ amount, gst, hsncode, top });
    });

    // Step 2: Normal items GST calculation
    items.forEach(item => {
        let itemGstAmount = (item.amount * item.gst) / 100;

        let key = item.hsncode + '_' + item.gst;
        if (!gstGroups[key]) {
            gstGroups[key] = {
                hsn: item.hsncode,
                gst: item.gst,
                taxable: 0,
                forwarding: 0,
                cgst: 0,
                sgst: 0,
                igst: 0,
                total: 0
            };
        }

        gstGroups[key].taxable += item.amount;
        let supplierTop = $('#supplier_select option:selected').data('top');
        console.log("Supplier TOP:", supplierTop);

        if (supplierTop === 'OMS') {
            gstGroups[key].igst += itemGstAmount;
        } else {
            gstGroups[key].cgst += itemGstAmount / 2;
            gstGroups[key].sgst += itemGstAmount / 2;
        }

        gstGroups[key].total += itemGstAmount;
    });

    // Step 3: Forwarding cost GST calculation
    if (forwardingTotal > 0) {
        let fwdGstAmount = (forwardingTotal * forwardingGST) / 100;
        $('.forwarding_gst').val(fwdGstAmount.toFixed(2));
        let fwdKey = forwardingHSN + '_' + forwardingGST;
        if (!gstGroups[fwdKey]) {
            gstGroups[fwdKey] = {
                hsn: forwardingHSN,
                gst: forwardingGST,
                taxable: 0,
                forwarding: 0,
                cgst: 0,
                sgst: 0,
                igst: 0,
                total: 0
            };
        }

        gstGroups[fwdKey].forwarding += forwardingTotal;
       // ✅ Supplier TOP condition
     let supplierState = $('#supplier_select option:selected').data('top');


     
    if (supplierState === "MSP") {
        // Supplier from Maharashtra → CGST + SGST
        gstGroups[fwdKey].cgst += fwdGstAmount / 2;
        gstGroups[fwdKey].sgst += fwdGstAmount / 2;
    } else {
        // Supplier outside Maharashtra → IGST
        gstGroups[fwdKey].igst += fwdGstAmount;
    }

    gstGroups[fwdKey].total += fwdGstAmount;
    }

    // Step 4: Render GST Summary
    const gstTableBody = document.querySelector('#gst-summary-table tbody');
    gstTableBody.innerHTML = '';
    let totalGstSum = 0;
    let totalForwarding = 0;
    let totalCgst = 0, totalSgst = 0, totalIgst = 0;

    for (let key in gstGroups) {
        let data = gstGroups[key];
        if (data.total > 0 || data.forwarding > 0) {
            totalGstSum += data.total;
            totalForwarding += data.forwarding;
            totalCgst += data.cgst;
            totalSgst += data.sgst;
            totalIgst += data.igst;

            // Show HSN + Forwarding amount if present
            let hsnDisplay = data.hsn;
            if (data.forwarding > 0) {
               // hsnDisplay = `${data.hsn} (${data.forwarding.toFixed(2)})`;
                hsnDisplay = `${data.hsn} (Forwarding)`;
            }

            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${hsnDisplay}</td>
                <td>${data.gst}%</td>
                <td>₹ ${data.cgst.toFixed(2)}</td>
                <td>₹ ${data.sgst.toFixed(2)}</td>
                <td>₹ ${data.igst.toFixed(2)}</td>
                <td>₹ ${data.total.toFixed(2)}</td>
            `;
            gstTableBody.appendChild(row);
        }
    }

    // Step 5: Add Total Row
    const totalRow = document.createElement('tr');
    totalRow.style.fontWeight = "bold";
    totalRow.innerHTML = `
        <td>Total</td>
        <td></td>
        <td>₹ ${totalCgst.toFixed(2)}</td>
        <td>₹ ${totalSgst.toFixed(2)}</td>
        <td>₹ ${totalIgst.toFixed(2)}</td>
        <td>₹ ${totalGstSum.toFixed(2)}</td>
    `;
    gstTableBody.appendChild(totalRow);

    // Step 6: Update total GST input
    document.getElementById('gst_total_input').value = totalGstSum.toFixed(2);
}






// Trigger calculation on page load and when items change

function bindGstEvents() {
    updateGstSummary();

    document.querySelectorAll('#order-items').forEach(table => {
        table.addEventListener('input', function () {
            updateGstSummary();
        });
    });
}

document.addEventListener('DOMContentLoaded', bindGstEvents);


//new script

$(document).ready(function () {

    $(document).on('input change', '.f_amount', function () {
        updateGstSummary();
    });

    function calculateForwarding() {
        let forwardingType = $('.forwarding_type').val();
        let subtotal = parseFloat($('.grosstotal').val()) || 0;
        let f_amount = 0;

        if (forwardingType === 'percentage') {
            let f_percent = parseFloat($('.forwarding_percent').val()) || 0;
            f_amount = (subtotal * f_percent) / 100;
        } else {
            f_amount = parseFloat($('.forwarding_amount_box').val()) || 0;
        }

        $('.f_amount').val(f_amount.toFixed(2));
        $('.forwarding').val(f_amount.toFixed(2)); // Hidden forwarding input
        updateGrandTotal();
        
    }   

    function updateGrandTotal() {
        let subtotal = parseFloat($('.grosstotal').val()) || 0;
        let forwarding = parseFloat($('.f_amount').val()) || 0;
        let gst = parseFloat($('#gst_total_input').val()) || 0;
        let grandTotal = subtotal + forwarding + gst;
        $('input[name="grand_total"]').val(grandTotal.toFixed(2));
    }

    // Toggle input fields on dropdown change
    $('.forwarding_type').change(function () {
        if ($(this).val() === 'percentage') {
            $('.forwarding-percent-box').show();
            $('.forwarding_amount_box').hide().val('');
        } else {
            $('.forwarding-percent-box').hide().find('input').val('');
            $('.forwarding_amount_box').show();
          
        }
        calculateForwarding();
        updateGstSummary();
    });

    // Calculate forwarding when input changes
  $('.forwarding_percent, .forwarding_amount_box').on('input', function() {
    calculateForwarding();
    updateGstSummary();
   });

});


//end script
</script>