@include('layouts.header')
<!-- /Header -->
@include('layouts.sidebar')
<style>
           .summary-container {
            max-width: 520px;
            margin-left: auto;
            
        }

        .summary-row {
            display: flex;
            align-items: center;
            margin-bottom: 18px;
        }

        .summary-row label {
            width: 250px;
            font-weight: 500;
            color: #555;
            margin-bottom: 0;
        }



        .summary-row .form-control[readonly] {
            /* background-color: #f1f3f5;
            border: 1px solid #e0e0e0; */
        }

        .input-group-text {
            border-radius: 0 8px 8px 0;
        }



        /* Forwarding layout */
        .forwarding-group {
            display: flex;
            gap: 10px;
            width: 100%;
        }

        .forwarding_type {
            width: 30%;
        }

        .forwarding-percent-box {
            width: 70%;
        }

        .forwarding_amount_box {
            width: 70%;
            display: none;
        }
        
</style>
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="d-flex">
                <div class="page-title">
                    <h4>Edit Purchase Order</h4>
                    <h6>Edit 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 action="{{ route('update_purchase_order')}}" method="post" id="myForm">
            @csrf
            <input type="hidden" name="id" value="{{ $po_details['id']}}">
            <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="{{ $po_details['po_number']}}" 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="text" name="po_date" class="form-control" value="{{ $po_details['po_date']}}" >
                                            </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">
                                                    <option value="">Select</option>
                                                    @foreach($companies as $row)
                                                        <option value="{{ $row->id }}" data-com-top="{{ $row->top }}" {{ $po_details['company_id'] == $row->id ? 'selected' : '' }}>{{ $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 }}" {{ $po_details['supplier_id'] == $row->id ? 'selected' : '' }}  data-supplier-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">
                                                <label class="form-label">Staff</label>
                                                <select class="form-control" name="staff_id" id="staff_id" required >
                                                    <option value="">Select</option>
                                                    @foreach($staffs as $row)
                                                        <option value="{{ $row->id }}" {{ $po_details['staff_id'] == $row->id ? 'selected' : '' }}>{{ $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 }}" {{ $po_details['transporter_id'] == $row->id ? 'selected' : '' }}> {{ $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</th>
                                                            <th>Design/Varient No</th>
                                                            <th>No Of Rolls</th>
                                                            <th>Rate /Unit</th>
                                                            <th>Quantity /Roll</th>
                                                            <th >UOM</th>
                                                            <th>% GST</th>.
                                                            <th >Amount</th>
                                                            
                                                        </tr>
                                                    </thead>
                                                    <tbody>

                                                        @foreach($po_details['items'] as $item)
                                                    
                                                        <tr class="order-row">
                                                           
                                                                <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>
                                                                <td>
                                                                <select name="product_id[]" class="form-control product-select"  required>
                                                                <option value="">Select Product</option>
                                                                @foreach($products as $product)
                                                                  
                                                                <option value="{{ $product->id }}" {{ $item->product_id == $product->id ? 'selected' : '' }}>
                                                                        {{ $product->product_name }}
                                                                    </option>
                                                                @endforeach
                                                              
                                                                </select>
                                                            </td> 
                                                            
                                                               <td>
                                                                  <select name="varient_id[]" class="form-control varient-select" required>
                                                                    <option value="">Select Varient</option>
                                                                    @php
                                                                        $product_id = $item->product_id;
                                                                        $variants = $variants_by_product[$product_id] ?? collect();
                                                                    @endphp
                                                                    @foreach($variants as $row)
                                                                        <option value="{{ $row->id }}" {{ $item->varient_id == $row->id ? 'selected' : '' }}>
                                                                            {{ $row->varient_name }} - {{ $row->varient_code }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>

                                                                </td>

                                                                <td>
                                                                    <input type="text" name="no_of_rolls[]" class="form-control no_of_rolls" value="{{ $item->no_of_rolls}}" required>
                                                                </td>
                                                                <td>
                                                                    <input type="text" name="rate[]" oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       pattern="^\d*\.?\d*$" class="form-control rate" step="0.01" value="{{ $item->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 " value="{{ $item->quantity}}" required>
                                                                </td>

                                                               

                                                                <td>
                                                                     <input type="hidden"  class="form-control hsn_code" name="hsn_code[]" value="{{ $item->hsn_code ?? '' }}" >
                                                                 <input type="hidden"  class="form-control top" >
                                                                    {{-- <input type="text" name="uom[]" onkeypress="return event.charCode >= 48 && event.charCode <= 57" class="form-control" step="0.01" value="{{ $item->uom}}" required> --}}
                                                                    <select name="uom[]" class="form-control uom"  required>
                                                                        <option value="">Select Unit</option>
                                                                        @foreach($units as $row)
                                                                        <option value="{{ $row->id }}" {{ $item->uom == $row->id ? 'selected' : '' }} >{{ $row->unit_name}}</option>
                                                                        @endforeach    
                                                                    </select>
                                                                </td>

                                                                <td>
                                                                    <input type="text" name="gst_percent[]" onkeypress="return event.charCode >= 48 && event.charCode <= 57" class="form-control gst_percent" step="0.01" value="{{ $item->gst_percent}}" required readonly>
                                                                </td>
                                                               
                                                                <td>
                                                                    <input type="text" class="form-control total" name="total[]" value="{{ $item->quantity * $item->rate * $item->no_of_rolls}}" readonly>
                                                                </td>
                                                                
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="summary-container">

    <!-- Gross Total -->
    <div class="summary-row">
        <label>Gross Total:</label>
        <input type="number"
               name="subtotal"
               value="{{ $po_details['subtotal']}}"
               class="form-control grosstotal"
               readonly style="padding: 0;text-align: end;">
    </div>

    <!-- Forwarding -->
    <div class="summary-row">
        <label>Forwarding:</label>

        <div class="forwarding-group">

            <!-- Type -->
            <select class="form-select forwarding_type" name="forwarding_type">
                <option value="percentage" {{ $po_details['forwarding_type'] == 'percentage' ? 'selected' : '' }}>%</option>
                <option value="fixed" {{ $po_details['forwarding_type'] == 'fixed' ? 'selected' : '' }}>Amount</option>
            </select>

            <!-- Percentage -->
            <div class="input-group forwarding-percent-box"
                 style="{{ $po_details['forwarding_type'] == 'percentage' ? 'display:flex;' : 'display:none;' }}">
                <input type="text"
                       class="form-control forwarding_percent"
                       name="f_percent"
                       value="{{ $po_details['f_percent'] }}"
                       oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
                       pattern="^\d*\.?\d*$" style="padding-left: 0;text-align: end;">
            </div>

            <!-- Fixed Amount -->
            <input type="text"
                   class="form-control forwarding_amount_box"
                   name="f_amount_input"
                   value="{{ $po_details['f_amount'] ?? '' }}"
                   style="{{ $po_details['forwarding_type'] == 'fixed' ? 'display:block;' : 'display:none;' }}"
                   oninput="this.value = this.value.replace(/[^0-9.]/g, '')" style="padding-left: 0;text-align: end;">

        </div>
    </div>

    <!-- Forwarding Amount -->
    <div class="summary-row">
        <label>Forwarding Amount:</label>
        <input type="number"
               name="f_amount"
               class="form-control f_amount text-end-input"
               value="{{ $po_details['f_amount'] }}"
               readonly style="padding: 0;text-align: end;">

        <input type="hidden"
               name="forwarding_gst"
               class="forwarding_gst"
               value="{{ $po_details['forwarding_gst'] }}">
    </div>

    <!-- GST -->
    <div class="summary-row">
        <label>GST Amount (Item+Forwarding):</label>
        <input type="number"
               id="gst_total_input"
               class="form-control text-end-input"
               readonly style="padding: 0;text-align: end;">
    </div>

    <!-- Grand Total -->
    <div class="summary-row total-row">
        <label>Grand Total:</label>
        <input type="number"
               name="grand_total"
               value="{{ $po_details['grand_total']}}"
               class="form-control text-end-input"
               readonly style="padding: 0;text-align: end;">
    </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" value="{{ $po_details['note']}}" >
                                        </div>
                                    </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" class="btn btn-primary">Update</button>
                </div>
            </div>
        </form>
    </div>
</div>

@include('layouts.footer')
<script>
let supplierSelectd = document.getElementById('supplier_select');


let selectedOptiond = supplierSelectd.options[supplierSelectd.selectedIndex];
let selectedValued = selectedOptiond.value; 

let dataTopd = selectedOptiond.getAttribute('data-top'); 

const cgstField = document.getElementById('cgst_div');
const sgstField = document.getElementById('sgst_div');
const igstField = document.getElementById('igst_div');

var gstamt=$('input[name="gst_amount"]').val();

               
            if (dataTopd === 'OMS') {
                
                cgstField.style.display = 'none';
                sgstField.style.display = 'none';
                igstField.style.display = 'block';
                $('input[name="igst_amount"]').val(gstamt);
            } else if (dataTopd === 'MSP') {
                var cgstamt=gstamt/2;
                var sgstamt=gstamt/2;
                $('input[name="cgst_amount"]').val(cgstamt);
                $('input[name="sgst_amount"]').val(sgstamt);
               

                cgstField.style.display = 'block';
                sgstField.style.display = 'block';
                igstField.style.display = 'none';
            }



    $('input[name="f_percent"]').on('input', function () {
      
      let gst_percent_single = parseFloat($('#order-items tbody').find('.gst_percent').val()) || 0;
      var forwarding_percent = parseFloat($('input[name="f_percent"]').val()) || 0; 
      var grosstotal = parseFloat($('input[name="subtotal"]').val()) || 0; 
      var f_amount = parseFloat($('input[name="f_amount"]').val()) || 0;
      var forwarding_gst = parseFloat($('input[name="forwarding_gst"]').val()) || 0;
      console.log(forwarding_gst);
       var forwarding = grosstotal * forwarding_percent / 100;
       console.log(forwarding);

       $('input[name="f_amount"]').val(forwarding.toFixed(2)); 
        let fmat=grosstotal+forwarding;
       let gstnewAmount = (fmat * gst_percent_single) / 100;
    
       let grandTotal = grosstotal + gstnewAmount + forwarding;
      $('input[name="grand_total"]').val(grandTotal.toFixed(2));
      
        updateGrandTotals();
          updateGstSummary();  
    });

</script>

<script>


//  function updateGrandTotals() {
//    // alert(1);
//         let subtotal = 0, totalGSTAmount = 0;

//         $('#order-items tbody tr').each(function () {

//             //let total = parseFloat($(this).find('input[name="total[]"]').val()) || 0;
//             //let gstPercent = parseFloat($(this).find('input[name="gst_percent[]"]').val()) || 0;
//             let total = parseFloat($(this).find('.total').val()) || 0;

//             subtotal += total;
//           //  totalGSTAmount += total * gstPercent / 100;

            
//         });

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


//          //new code forwarding & gst
//          var fper=parseFloat($('input[name="f_percent"]').val()) || 0;
//         var fsub=parseFloat($('input[name="subtotal"]').val()) || 0;
//         var newforwarding = fsub * fper / 100;
        
//        // let forwarding = parseFloat($('input[name="forwarding"]').val()) || 0;
//        $('input[name="f_amount"]').val(newforwarding.toFixed(2));
//         let gst_percent_new = parseFloat($('#order-items tbody').find('.gst_percent').val()) || 0;
//         let fcmt=newforwarding+fsub;    
//         let gstnewAmountdata = (fcmt * gst_percent_new) / 100;
    

//        let gst_amount = parseFloat($('input[name="gst_amount"]').val()) || 0;
      
//         let forwarding = parseFloat($('input[name="f_amount"]').val()) || 0;
        
//         let forwarding_gst = parseFloat($('input[name="forwarding_gst"]').val()) || 0;
//         let gst_total_input = parseFloat($('#gst_total_input').val()) || 0;
        
//         let grandTotal = subtotal + forwarding + gst_total_input ;

      

//         $('input[name="grand_total"]').val(grandTotal.toFixed(2));
//         updateGstSummary();

// }

function updateGrandTotals() {
    let subtotal = 0;

    // Loop through all rows and calculate subtotal
    $('#order-items tbody tr').each(function () {
        let total = parseFloat($(this).find('.total').val()) || 0;
        subtotal += total;
    });

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

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

    // GST % (use first row for now)
    let gst_percent = parseFloat($('#order-items tbody').find('.gst_percent').val()) || 0;

    // GST on subtotal + forwarding
    let fmat = subtotal + forwarding;
    let gst_amount = (fmat * gst_percent) / 100;

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

    // Optional: store gst_amount in input if needed
    $('input[name="gst_amount"]').val(gst_amount.toFixed(2));

    updateGstSummary();
}



$(document).ready(function () {
    $('#myForm').on('submit', function(e) {
        e.preventDefault();
        let form = this;
        let formData = new FormData(form); 
        $('#global-loader').show();
        $.ajax({
            url: form.action,
            method: form.method,
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#global-loader').hide();
                successMessage("Purchase Order Updated Successfully.","{{ route('purchase_orders') }}");
            },
            error: function(xhr) {
                $('#global-loader').hide();
                errorMessage();
            }
        });
    });
    // Initially replace "add" icon with "remove" icon for existing rows
    $('#order-items tbody tr').each(function () {
        $(this).find('.add-item').replaceWith('<a href="#" class="btn btn-danger remove-item" style="color: white;"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" 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>');
    });
    
    const initialRow = '<tr class="add-row">' +
        '<td>' +
        '<a href="#" class="btn btn-success add-item" style="color: white;">' +
        '<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>';

    // Append the initial row with only the Add button
    $('#order-items tbody').append(initialRow);

    // Function to create the new row with input fields
    const addItemRow = function () {
        return '<tr class="order-row">' +
            '<td>' +
            '<a href="#" class="btn btn-danger remove-item" style="color: white;"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" 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>@foreach($products as $row)<option value="{{ $row->id }}">{{ $row->product_name }}</option>@endforeach</select></td>' +
            '<td><select name="varient_id[]" class="form-control varient-select" required><option value="">Select Varient</option></select></td>' +
            '<td><input type="text" name="no_of_rolls[]" class="form-control no_of_rolls"></td>' +
            '<td><input type="text" name="rate[]" oninput="this.value = this.value.replace(/[^0-9.]/g, \'\')" class="form-control rate" step="0.01" required></td>' +
            '<td><input type="text" name="quantity[]" oninput="this.value = this.value.replace(/[^0-9.]/g, \'\')" class="form-control quantity" required></td>' +
            '<td><input type="hidden" name="hsn_code[]" class="form-control hsn_code">' +
            '<select name="uom[]" class="form-control uom" required><option value="">Select Unit</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" onkeypress="return event.charCode >= 48 && event.charCode <= 57" readonly></td>' +
            '<td><input type="text" class="form-control total" name="total[]" readonly></td>' +
            '</tr>';
    };



 

    // Add Item Event
    $(document).on('click', '.add-item', function (e) {
        e.preventDefault();

        let newRow = addItemRow(); 
     
      $('.add-row').before(newRow);
       
       
    });

    // Remove Item Event
    $(document).on('click', '.remove-item', function (e) {
        e.preventDefault();
        $(this).closest('tr').remove(); // Remove the row

        updateGrandTotals();
    });

    // GST Percent Change
    $(document).on('input', '.gst_percent', function () {
     // Get the current row
     let row = $(this).closest('tr');
        
        // Fetch amount and GST percentage values
        let amount = parseFloat(row.find('input[name="total[]"]').val()) || 0;
        let gstPercent = parseFloat($(this).val()) || 0;

        // Calculate net amount
        let netAmount = amount + (amount * gstPercent / 100);

        // Update the Net Amount field
        row.find('input[name="net_total[]"]').val(netAmount.toFixed(2));

        let totalGSTAmount = 0;
     $('.gst_percent').each(function () {
        let row = $(this).closest('tr');
        let rowAmount = parseFloat(row.find('input[name="total[]"]').val()) || 0;
        let rowGstPercent = parseFloat($(this).val()) || 0;
        totalGSTAmount += rowAmount * rowGstPercent / 100;
     });

     // Update the GST Amount field
     $('input[name="gst_amount"]').val(totalGSTAmount.toFixed(2));
        updateGrandTotals();
    });

    // Quantity or Rate Input
    $(document).on('input', 'input[name="quantity[]"],input[name="no_of_rolls[]"], input[name="rate[]"]', function () {
        let row = $(this).closest('tr');
        calculateRowTotal(row);
        updateGrandTotals();
        
        
    });

    // Calculate the total for a specific row
    function calculateRowTotal(row) {
        let no_of_rolls = parseFloat(row.find('input[name="no_of_rolls[]"]').val()) || 0;
        let quantity = parseFloat(row.find('input[name="quantity[]"]').val()) || 0;
        let rate = parseFloat(row.find('input[name="rate[]"]').val()) || 0;
        let total = no_of_rolls* quantity * rate;
        row.find('input[name="total[]"]').val(total.toFixed(2));

        let gstPercent = parseFloat(row.find('input[name="gst_percent[]"]').val()) || 0;
        let netAmount = total + (total * gstPercent / 100);
        row.find('input[name="net_total[]"]').val(netAmount.toFixed(2));

        let halfGst = gstPercent / 2; 

        let totalformsp= total * halfGst/100;

        let totalforoms= total * gstPercent/100;


        // Add the totalformsp and totalforoms for each row
        let total_cgst = 0;
        let total_sgst = 0;
        let total_igst = 0;

        // Accumulate CGST and SGST for all rows
        $('#order-items tbody tr').each(function() {
        let gst_percent_row = parseFloat($(this).find('.gst_percent').val()) || 0;
        let total_row = parseFloat($(this).find('.total').val()) || 0;
        let halfGst_row = gst_percent_row / 2;

        // For MSP, accumulate CGST and SGST
        if (gst_percent_row > 0) {
        total_cgst += total_row * halfGst_row / 100;
        total_sgst += total_row * halfGst_row / 100;
        }

        // For OMS, accumulate IGST
        total_igst += total_row * gst_percent_row / 100;
        });

        // Update the CGST, SGST, and IGST fields
        $('#cgst_div .cgst').val(total_cgst.toFixed(2));
        $('#sgst_div .sgst').val(total_sgst.toFixed(2));
        $('#igst_div .igst').val(total_igst.toFixed(2));

        // Append the totalformsp to cgst_amount and sgst_amount input fields
        $('input[name="cgst_amount"]').val(total_cgst.toFixed(2));
        $('input[name="sgst_amount"]').val(total_sgst.toFixed(2));
        $('input[name="igst_amount"]').val(total_igst.toFixed(2));

    }

    // Update Grand Totals
   

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

      if (variantId) {
        $.ajax({
            url: '{{ route("getVariantDetails") }}', 
            type: 'GET',
            data: { id: variantId },
            success: function (response) {
                console.log(response);
                // Update the fields in the same row
                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);

            },
            error: function (xhr) {
                console.error("Error fetching variant details: ", xhr.responseText);
            }
        });
     }
   });
   
   
   $(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') {
                   
                     row.find('.rate').val(response.rate.toFixed(2));
                    row.find('.quantity').val(response.quantity);
                    
                } else if (response.unit_name === 'Sqm' || response.unit_name === 'sqm' || response.unit_name === 'SQMT'){
                    
                    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).toFixed(2));

                // 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 gstnewAmount = (newamt * gst_percent_data) / 100;
               
                let halfamountnew=gstnewAmount/2;
                $('input[name="gst_amount"]').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("Gross Total: ", grossTotal.toFixed(2));
                var finaltotal=gstnewAmount + grossTotal + forwarding;
              
                $('input[name="grand_total"]').val(finaltotal.toFixed(2));


            },
            error: function (xhr) {
                console.error("Error fetching unit details: ", xhr.responseText);
            }
        });
    }
});



   const supplierSelect = document.getElementById('supplier_select');


             supplierSelect.addEventListener('change', function() {
       
            const selectedSupplier = supplierSelect.options[supplierSelect.selectedIndex];
            
            const supplierTop = selectedSupplier.getAttribute('data-top'); 
           
          
            const cgstField = document.getElementById('cgst_div');
            const sgstField = document.getElementById('sgst_div');
            const igstField = document.getElementById('igst_div');

           
            if (supplierTop === 'OMS') {
                cgstField.style.display = 'none';
                sgstField.style.display = 'none';
                igstField.style.display = 'block';
            } else if (supplierTop === 'MSP') {
                cgstField.style.display = 'block';
                sgstField.style.display = 'block';
                igstField.style.display = 'none';
            }



product_id=$(this).val();


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

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

        });




});

 $(document).ready(function () {
    $("body").addClass('mini-sidebar');
    const selectedProductId = "{{ $selectedProductId ?? '' }}"; // From Blade

    function loadProducts(supplierId, selectedId = null) {
        $('#product_select').empty().append('<option value="">Select</option>');

        $.ajax({
            url: '/get-products-by-supplier/' + supplierId,
            type: 'GET',
            success: function (response) {
                //console.log(response.products);
                $.each(response.products, function (index, product) {
                    //const selected = selectedId && selectedId == product.id ? 'selected' : '';
                    let isSelected = selectedId == product.id ? 'selected' : '';
                  // console.log(isSelected);
                    console.log(isSelected);
                    $('#product_select').append(
                        `<option value="${product.id}" ${isSelected}>${product.product_name}</option>`
                    );
                    
                    if (product.id) {
                       $('#product_select').val(product.id);
                     }
                });
            }
        });
    }
    $("#company_id").on('change', function(){
        updateGstSummary();
    });
    // On supplier change
    $('#supplier_select').on('change', function () {
        let supplierId = $(this).val();
        $('.variant-select').prop('disabled', false);
        loadProducts(supplierId); // No selectedProductId on manual change
    });

    // On edit page load
    const currentSupplierId = $('#supplier_select').val();
    if (currentSupplierId) {
        loadProducts(currentSupplierId, selectedProductId);
    }
    });

</script>

<script>
  $(document).ready(function () {
    let f_amount = 0;
    $('.forwarding_percent').on('input', function () {
       // alert(1);
        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();
        updateGrandTotals();
        
    });
});

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

$(document).on('input', '.forwarding_amount_box', function () {
   // alert(1);
       updateGrandTotals();
        updateGstSummary();
});

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



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

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

    // 🔹 Forwarding calculation
    let forwardingTotal = 0;
    const forwardingType = $('.forwarding_type').val();

    if (forwardingType === 'percentage') {
        const forwardingPercent = parseFloat($('.forwarding_percent').val()) || 0;
        forwardingTotal = (subtotal * forwardingPercent) / 100;
    } else if (forwardingType === 'fixed') {
        forwardingTotal = parseFloat($('.forwarding_amount_box').val()) || 0;
    }

    // Always update UI
    $('.f_amount').val(forwardingTotal.toFixed(2));

    let totalTaxable = 0;

    // Step 1: Collect all item rows
    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 || 'N/A';
        let top = row.querySelector('.top')?.value || 'MSP';

        let amount = no_of_rolls * qty * rate;
        if (amount === 0) return; // Skip empty rows

        let itemGstAmount = (amount * gst) / 100;
        totalTaxable += amount;

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

        gstGroups[key].taxable += amount;

        let supplierTop = $('#supplier_select option:selected').data('supplier-top');
        let companyTop = $('#company_id option:selected').data('com-top');
        console.log("companyTop TOP:", companyTop);
        console.log("Supplier TOP:", supplierTop);
        
       if ((supplierTop === 'oms' && companyTop === 'oms') || (supplierTop === 'ms' && companyTop === 'oms') || (supplierTop === 'oms' && companyTop === 'ms')) {
            gstGroups[key].igst += itemGstAmount;
        } else {
            gstGroups[key].cgst += itemGstAmount / 2;
            gstGroups[key].sgst += itemGstAmount / 2;
        }

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

    // Step 2: Forwarding 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;

    // ✅ check supplier state (using data-top attribute)
    let supplierTop = $('#supplier_select option:selected').data('supplier-top');
        let companyTop = $('#company_id option:selected').data('com-top');
        console.log("companyTop TOP:", companyTop);
        console.log("Supplier TOP:", supplierTop);
        
       if ((supplierTop === 'oms' && companyTop === 'oms') || (supplierTop === 'ms' && companyTop === 'oms') || (supplierTop === 'oms' && companyTop === 'ms')) {
           // Outside state → IGST
           gstGroups[fwdKey].igst += fwdGstAmount;
        } else {
            // Same state → split CGST + SGST
            gstGroups[fwdKey].cgst += fwdGstAmount / 2;
            gstGroups[fwdKey].sgst += fwdGstAmount / 2;
        }

    gstGroups[fwdKey].total += fwdGstAmount;
}


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

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

            let hsnDisplay = data.hsn;
            if (data.forwarding > 0) {
                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 4: 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 5: Update hidden GST total field
    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);



$(document).on('change', '.product-select', function () {
    const productSelect = $(this);
    const varientSelect = productSelect.closest('tr').find('.varient-select');
    const productId = productSelect.val();

    varientSelect.empty().append('<option value="">Loading...</option>');

    if (productId) {
        $.ajax({
            url: `/get-variants/${productId}`,
            type: 'GET',
            success: function (data) {
                varientSelect.empty().append('<option value="">Select Varient</option>');
                data.forEach(function (variant) {
                    varientSelect.append(`<option value="${variant.id}">${variant.varient_name} - ${variant.varient_code}</option>`);
                });
            }
        });
    } else {
        varientSelect.empty().append('<option value="">Select Varient</option>');
    }
});

</script>