@include('layouts.header')
@include('layouts.sidebar')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="add-item d-flex">
                <div class="page-title">
                    <h4>View Purchase </h4>
                
                </div>
            </div>
            <ul class="table-top-head">
                <li>
                    <div class="page-btn">
                         <a href="{{ url('inwards')}}" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back</a> 
                    </div>
                </li>
                <li>
                    <a data-bs-toggle="tooltip" data-bs-placement="top" title="Collapse" id="collapse-header"><i data-feather="chevron-up" class="feather-chevron-up"></i></a>
                </li>
            </ul>

        </div>
        	<!-- /Company list -->
					<div class="card table-list-card">
						<div class="card-body">
							<div class="table-top">
								<div class="search-set">
									<div class="search-input">
										<a href="javascript:void(0);" class="btn btn-searchset"><i data-feather="search" class="feather-search"></i></a>
									</div>
								</div>
								{{-- <div class="search-path">
									<a class="btn btn-filter" id="filter_search">
										<i data-feather="filter" class="filter-icon"></i>
										<span><img src="assets/img/icons/closes.svg" alt="img"></span>
									</a>
								</div>
								<div class="form-sort">
									<i data-feather="sliders" class="info-img"></i>
									<select class="select">
										<option>Sort by Date</option>
										<option>14 09 23</option>
										<option>11 09 23</option>
									</select>
								</div> --}}
							</div>
							<!-- /Filter -->
							<div class="card mb-0" id="filter_inputs">
								<div class="card-body pb-0">
									<div class="row">
										<div class="col-lg-12 col-sm-12">
											<div class="row">
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="input-blocks">
														<i data-feather="box" class="info-img"></i>
														<select class="select">
															<option>Choose Company</option>
															<option>
																Lenovo 3rd Generation</option>
															<option>Nike Jordan</option>
														</select>
													</div>
												</div>
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="input-blocks">
														<i data-feather="stop-circle" class="info-img"></i>
														<select class="select">
															<option>Choose Categroy</option>
															<option>Laptop</option>
															<option>Shoe</option>
														</select>
													</div>
												</div>
												
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="input-blocks">
														<i data-feather="git-merge" class="info-img"></i>
														<select class="select">
															<option>Choose Sub Category</option>
															<option>Computers</option>
															<option>Fruits</option>
														</select>
													</div>
												</div>
												
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="input-blocks">
														<i data-feather="stop-circle" class="info-img"></i>
														<select class="select">
															<option>All Brand</option>
															<option>Lenovo</option>
															<option>Nike</option>
														</select>
													</div>
												</div>
												
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="input-blocks">
														<i class="fas fa-money-bill info-img"></i>
														<select class="select">
															<option>Price</option>
															<option>$12500.00</option>
															<option>$12500.00</option>
														</select>
													</div>
												</div>
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="input-blocks">
														<a class="btn btn-filters ms-auto"> <i data-feather="search" class="feather-search"></i> Search </a>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</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
							<!-- /Filter -->
							<div class="table-responsive Company-list">
								<table class="table datanew">
									<thead>
										<tr>
                                            <th>Sr No</th>
                                             <th>PO Number</th>
                                             <th>Product</th>
											<th>Varient Name</th>
											<th>No of Rolls</th>
											<th>Quantity</th>
											<th>Rate</th>
											<th>Unit</th>
											<th>Amount</th>
											<th class="no-sort">Action</th>
										</tr>
									</thead>
									<tbody>
                                            @php $i = 1; @endphp
                                            @foreach($po_details['new_items'] as $item)
                                                @php
                                                    $received_qty = DB::table('inward_items')
                                                        ->where('purchase_order_item_id', $item->po_item_id)
                                                        ->sum('quantity');
                                                    $remaining_qty = $item->no_of_rolls - $received_qty;
                                                     $supplierinvno= DB::table('inventory')->where('po_item_id',$item->po_item_id)
                                                     ->first();
                                                @endphp

                                                <tr>
                                                    <td>{{ $i++ }}</td>
                                                    <td>{{ $item->purchase_order_number }}</td>
                                                      <td>{{ $item->product_name }}</td>
                                                    <td>
                                                        @if($received_qty > 0)
                                                            {{-- <a href="javascript:void(0);" class="expand-row" data-id="{{ $item->id }}"> --}}
                                                                {{ $item->varient_code }} - {{ $item->varient_name }}
                                                            {{-- </a> --}}
                                                        @else
                                                            {{ $item->varient_code }} - {{ $item->varient_name }}
                                                        @endif
                                                    </td>

                                                    <td>
                                                        Total: {{ $item->no_of_rolls }}<br>
                                                        <span class="text-success">Received: {{ $received_qty }}</span><br>
                                                        <span class="text-danger">Remaining: {{ $remaining_qty }}</span>
                                                    </td>

                                                    <td>{{ $item->quantity ?? '' }}</td>
                                                    <td>{{ $item->rate }}</td>
                                                    <td>{{ $item->uom }}</td>
                                                    <td>{{ $item->total }}</td>

                                                    <td class="action-table-data">
                                                        <div class="edit-delete-action" style="height:61px">
                                                            @if($remaining_qty > 0)
                                                              <a class="btn btn-info"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#add-warehouse"
                                                                    data-id="{{ $item->po_item_id }}"
                                                                    data-po_id="{{ $item->po_id }}"
                                                                    data-rolls="{{ $remaining_qty }}"
                                                                    data-received="{{ $received_qty }}"
                                                                    data-supplier_invoice_no="{{ $supplierinvno->supplier_invoice_no ?? '' }}"
                                                                    data-quantity="{{ $item->quantity }}"
                                                                    data-rate="{{ $item->rate }}"
                                                                    data-unit="{{ $item->unit_id }}"
                                                                   data-total="{{ $remaining_qty * $item->quantity *  $item->rate }}">
                                                                    Receive
                                                                    </a>

                                                            @else
                                                                <a class="me-2 p-2 btn btn-success" href="javascript:void(0);">Received</a>
                                                            @endif
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>

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

@include('layouts.footer')




<div class="modal fade" id="add-warehouse">
    <div class="modal-dialog modal-dialog-centered modal-md 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>Select Warehouse</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 action="{{ route('store_warehouse_ajax') }}" enctype="multipart/form-data" method="POST">
                            @csrf
                            <input type="hidden" id="itemId"      name="item_id" value="">
                            <input type="hidden" id="po_id"       name="po_id" value="">
							<input type="hidden" id="roll_no"     name="roll_no" value="{{ $inwards['roll_no']}}">
							<input type="hidden" id="inward_no"   name="inward_no" value="{{ $inwards['inward_no'] }}">
							<input type="hidden" id="inward_date" name="inward_date" value="{{ $inwards['inward_date'] }}">
                            <div class="mb-3">
                                <label class="form-label">Warehouse</label>
                                <select name="warehouse" class="form-control" required>
                                    <option value="">Select</option>
                                    @foreach($warehouses as $row)
                                        <option value="{{ $row->id }}">{{ $row->warehouse_name }}</option>
                                    @endforeach
                                </select>
                            </div>

                             <div class="mb-3">
                                <label class="form-label">Supplier Invoice No</label>
                                <input type="text" class="form-control" id="supplier_invoice_no" name="supplier_invoice_no"  required>
                                
                            </div>

                            <div class="mb-3">
                                <label class="form-label d-block">Rolls Summary</label>
                                <p>
                                    <strong>Total Rolls:</strong> <span id="total-rolls">0</span><br>
                                    <strong>Received Rolls:</strong> <span id="received-rolls">0</span><br>
                                    <strong>Remaining Rolls:</strong> <span id="remaining-rolls">0</span>
                                </p>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">No of Rolls to Inward</label>
                                <input type="text" class="form-control" id="rolls" name="no_of_rolls" min="1" required>
                                <small id="rolls-error" class="text-danger" style="display: none;"></small>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Quantity</label>
                                <input type="text"  class="form-control" id="quantity" name="quantity">

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Rate</label>
                                <input type="text"  class="form-control" id="rate" name="rate">

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Unit</label>
                               
                                <select id="unit" name="unit" class="form-control uom" required>
                                    <option value="">Select</option>
                                    @foreach($units as $row)
                                        <option value="{{ $row->id }}">{{ $row->unit_name }}</option>
                                    @endforeach
                                </select>

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Amount</label>
                                <input type="text"  class="form-control" id="amount" name="amount" readonly>

                            </div>
                            <div class="modal-footer-btn">
                                <button type="button" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</button>
                               <button type="submit" class="btn btn-submit confirm" id="submit-btn">
                                    <span class="submit-text">Save</span>
                                    <span class="submit-loading" style="display: none;">Saving...</span>
                                </button>

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

<div class="modal fade" id="show-warehouse">
    <div class="modal-dialog modal-dialog-centered modal-md 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>Selected Data</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">
                            <div class="mb-3">
                                <label class="form-label">Warehouse</label>
                                <select name="warehouse" id="warehouse_id" class="form-control" disabled>
                                    @foreach($warehouses as $row)
                                        <option value="{{ $row->id }}">{{ $row->warehouse_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">No of rolls</label>
                                <input type="text"  class="form-control" id="show_rolls" name="no_of_rolls" readonly>

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Quantity</label>
                                <input type="text"  class="form-control" id="show_quantity" name="quantity" readonly>

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Rate</label>
                                <input type="text"  class="form-control" id="show_rate" name="rate" readonly>

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Unit</label>
                               
                                <select id="show_unit" name="unit" class="form-control uom" disabled>
                                  
                                    @foreach($units as $row)
                                        <option value="{{ $row->id }}">{{ $row->unit_name }}</option>
                                    @endforeach
                                </select>

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Amount</label>
                                <input type="text"  class="form-control" id="show_amount" name="amount" readonly>

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


<div class="modal fade" id="change-status">
    <div class="modal-dialog modal-dialog-centered modal-sm 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>Do you want to make this item Defective ? </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="change-roll-status-form" enctype="multipart/form-data" >
                            @csrf

                            <input type="hidden"  name="roll_id" id="roll-id">
							

                            <div class="modal-footer-btn">
                                <button type="button" class="btn btn-cancel me-2" data-bs-dismiss="modal">No</button>
                                <button type="submit" class="btn btn-submit" id="save-status-btn">Yes</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

// $(document).on('click', '[data-bs-target="#add-warehouse"]', function () {
//     const itemId = $(this).data('id'); 
//     const po_id = $(this).data('po_id'); 
//     const rolls = $(this).data('rolls');
//     const quantity = $(this).data('quantity');
//     const rate = $(this).data('rate');
//     const unit = $(this).data('unit');
//     const total = $(this).data('total');

//    // alert(total);

//       // Calculate total and received rolls (from total & remaining)
//         let totalRolls = remaining + parseInt($(this).data('received') || 0);
//         let receivedRolls = totalRolls - remaining;

//         // Fill hidden and form fields
//         $('#itemId').val(itemId);
//         $('#po_id').val(po_id);
//         $('#rolls').val(remaining);
//         $('#quantity').val(quantity);
//         $('#rate').val(rate);
//         $('#unit').val(unit);
//         $('#amount').val(total);


        

//         // Rolls input control
//         $('#rolls').attr('max', remaining);
//         $('#rolls').attr('min', 1);

//         // Summary display
//         $('#total-rolls').text(totalRolls);
//         $('#received-rolls').text(receivedRolls);
//         $('#remaining-rolls').text(remaining);



   
// });

// $(document).on('click', '[data-bs-target="#show-warehouse"]', function () {
    
//     const warehouse_id = $(this).data('warehouse_id'); 
//     const po_id = $(this).data('po_id'); 
//     const rolls = $(this).data('rolls');
//     const quantity = $(this).data('quantity');
//     const rate = $(this).data('rate');
//     const unit = $(this).data('unit');
//     const total = $(this).data('total');
   
    
//     $('#warehouse_id').val(warehouse_id);
//     $('#show_rolls').val(rolls);
//     $('#show_quantity').val(quantity);
//     $('#show_rate').val(rate);
//     $('#show_unit').val(unit);
//     $('#show_amount').val(total);
    
    
// });

$(document).on('click', '[data-bs-target="#add-warehouse"]', function () {
    const itemId   = $(this).data('id'); 
    const po_id    = $(this).data('po_id'); 
    const supplier_invoice_no = $(this).data('supplier_invoice_no')
    const remaining = parseInt($(this).data('rolls'));   // ✅ FIXED
    const quantity = $(this).data('quantity');
    const rate     = $(this).data('rate');
    const unit     = $(this).data('unit');
    const total    = $(this).data('total');
    const received = parseInt($(this).data('received') || 0);

    // Calculate total rolls
    const totalRolls    = remaining + received;
    const receivedRolls = totalRolls - remaining;

    // Fill form fields
    $('#itemId').val(itemId);
    $('#po_id').val(po_id);
    $('#rolls').val(remaining);
    $('#quantity').val(quantity);
    $('#rate').val(rate);
    $('#unit').val(unit);
    $('#amount').val(total);

    // Rolls input control
    $('#rolls').attr('max', remaining);
    $('#rolls').attr('min', 1);
    $('#supplier_invoice_no').val(supplier_invoice_no);
    // Summary display
    $('#total-rolls').text(totalRolls);
    $('#received-rolls').text(receivedRolls);
    $('#remaining-rolls').text(remaining);
});


$(document).on('click', '.expand-row', function () {
    const parentRow = $(this).closest('tr'); 
    const itemId = $(this).data('id'); 
   // alert(itemId);
    
    const isExpanded = parentRow.next().hasClass('expanded-row');

    // Remove existing expanded row if already present
    $('.expanded-row').remove();

    // If not expanded, add the expanded row
    if (!isExpanded) {
        const loadingContent = `
            <tr class="expanded-row">
                <td colspan="8">
                    <div class="nested-table">
                        <table class="table datanew table-bordered" id="roll_table">
                            <thead>
                                <tr>
                                    <th>Company</th>
                                    <th>Roll No</th>
                                    <th>Total Quantity</th>
                                     <th>Used Qty</th>
                                    <th>Availability</th>
                                    <th>Inward On</th>
                                    <th>Status</th>
									<th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="7" class="text-center">Loading data...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        `;

        // Insert loading row
        parentRow.after(loadingContent);

        // Fetch data from the server
        $.ajax({
            url: `/get-rolls-data/${itemId}`, // Replace with your actual API route
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                if (Array.isArray(data) && data.length > 0) {
                    const rows = data.map(item => `
                        <tr>
                            <td class="expand" data-id="${item.id}"  data-varient="${item.varient_id}"><a href="javascript:void(0);">${item.company_name || 'N/A'}</a></td>
                            <td class="expand" data-id="${item.id}"><a href="javascript:void(0);">${item.id || 'N/A'}</a></td>
                            <td>${item.quantity || 'N/A'}</td>
                            <td>${item.used_quantity || 'N/A'}</td>
                            <td>${item.availability || 'N/A'}</td>
                            <td>${item.inward_on || 'N/A'}</td>
                            <td>${item.remark || 'N/A'}</td>
							<td>
            ${item.defective_status == 1 
                ? '<a class="me-2 p-2 btn btn-danger" href="javascript:void(0);" data-bs-toggle="modal"> Defective</a>' 
                : `<a class="me-2 p-2 btn btn-warning change-status-btn" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#change-status" data-id="${item.id}" > Make Defective</a>`}
        </td>
                        </tr>
                    `).join('');

                    // Update the table body with fetched rows
                    parentRow.next().find('tbody').html(rows);
                } else {
                    // Display message if no data found
                    parentRow.next().find('tbody').html(`
                        <tr>
                            <td colspan="7" class="text-center">No data available</td>
                        </tr>
                    `);
                }
            },
            error: function () {
                // Display error message
                parentRow.next().find('tbody').html(`
                    <tr>
                        <td colspan="7" class="text-center">Error fetching data</td>
                    </tr>
                `);
            }
        });
    }
});




$(document).on('click', '.expand', function () {
    const parentRow = $(this).closest('tr'); 
    const itemId = $(this).data('id');
     const varient = $(this).data('varient');
    const isExpanded = parentRow.next().hasClass('nested-company-row');

    // Remove existing expanded rows
    $('.nested-company-row').remove();

    if (!isExpanded) {
        // Add a new row for nested table
        const nestedTableRow = `
            <tr class="nested-company-row">
                <td colspan="7">
                    <div class="nested-company-table">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Order Id</th>
                                    <th>Customer</th>
                                    <th>Quantity</th>
                                    <th>Rate</th>
                                    <th>Order Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="5" class="text-center">Loading...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        `;

        // Insert after the clicked row
        parentRow.after(nestedTableRow);

        // Fetch nested data
       $.ajax({
            url: `/get-order-data/${itemId}/${varient}`, 
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                console.log(data.data.length);
                if (Array.isArray(data.data) && data.data.length > 0) {
                   
                    const rows = data.data.map(item => `
                        <tr>
                            <td>${item.order_code || 'N/A'}</td>
                            <td>${item.customer_name || 'N/A'}</td>
                            <td>${item.quantity || 'N/A'}</td>
                            <td>${item.price || 'N/A'}</td>
                            <td>${item.status || 'N/A'}</td>
                        </tr>
                    `).join('');
                    parentRow.next().find('tbody').html(rows);
                } else {
                   
                    parentRow.next().find('tbody').html(`
                        <tr>
                            <td colspan="5" class="text-center">No data available</td>
                        </tr>
                    `);
                }
            },
            error: function () {
                parentRow.next().find('tbody').html(`
                    <tr>
                        <td colspan="5" class="text-center">Error fetching data</td>
                    </tr>
                `);
            }
        });
    }
});





$('#change-status').on('shown.bs.modal', function (e) {
    const button = $(e.relatedTarget); 
    const rollId = button.data('id'); 
    $(this).find('input[name="roll_id"]').val(rollId); 
});


// Open modal and populate data
$(document).on('click', '.change-status-btn', function () {
    const rollId = $(this).data('id');
    const currentStatus = $(this).data('current-status');

    // Populate the modal fields
    $('#roll-id').val(rollId);
    $('#status').val(currentStatus);
});

// Save status and update table

$('#change-roll-status-form').on('submit', function (event) {
    event.preventDefault(); 
    const rollId = $('#roll-id').val();
   
    $.ajax({
        url: '/change-roll-status', 
        method: 'POST',
        data: {
            roll_id: rollId,
            _token: $('meta[name="csrf-token"]').attr('content')

        },
        success: function (response) {
          
            // Check if response is successful
            if (response && response.success) {
               // alert('roll'+ response.data.id);
                // Find the row corresponding to the rollId
                const row = $(`a[data-id="${response.data.id}"]`).closest('tr');
               
                // Update the status column (7th column in this example)
                row.find('td:nth-child(6)').text(response.data.remark); // Assuming 'remark' is the status column
                 row.find('td:nth-child(7)').html(
                    response.data.defective_status == 1
                        ? '<a class="me-2 p-2 btn btn-danger" href="javascript:void(0);" data-bs-toggle="modal"> Defective</a>'
                        : `<a class="me-2 p-2 btn btn-warning change-status-btn" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#change-status" data-id="${itemId}"> Make Defective</a>`
                );
               
                $('#change-status').modal('hide');
               // $('#roll_table').load(location.href + ' #roll_table');
               // alert('Status updated successfully!');
               
            } else {
                alert(2);
                // Handle error case
                alert('Error updating the status');
            }
        },
        error: function (xhr, status, error) {
          
                alert('An error occurred while updating the status.');
            
        }
    });
});

function calculateAmount() {
        let rolls = parseFloat($('#rolls').val()) || 0;
        let quantity = parseFloat($('#quantity').val()) || 0;
        let rate = parseFloat($('#rate').val()) || 0;
        let amount = 0;

        // Calculation based on conditions
        if (rolls === 0) {
            amount = quantity * rate;
        } else if (quantity === 0) {
            amount = rolls * rate;
        } else if (rate === 0) {
            amount = rolls * quantity;
        } else {
            amount = rolls * quantity * rate;
        }

        // Set amount with 2 decimal places
        $('#amount').val(amount.toFixed(2));
    }

    // Trigger calculation on input change
    $('#rolls, #quantity, #rate').on('input', function() {
        calculateAmount();
    });


    $(document).on('change', '.uom', function () {
    var unitId = $(this).val(); 
    
    var row = $(this).closest('tr'); 
    var rate =$('#rate').val()  || 0;
    var quantity = $('#quantity').val() || 0;
    var rolls = $('#rolls').val() || 0;
    
   
        $.ajax({
            url: '{{ route("convertunit_inward") }}', 
            type: 'GET',
            data: { id: unitId, rate: rate, quantity: quantity, rolls: rolls },
            success: function (response) {
                console.log(response);
               //exit();
                if (response.unit_name === 'sqft') {
                    // Restore previous values
                    $('#rate').val(response.rate.toFixed(2));
                    $('#quantity').val(response.quantity);
                } else {
                    // Convert and update values
                    $('#rate').val(response.rate.toFixed(2));
                    $('#quantity').val(response.quantity);
                }

                $('#rolls').val(response.no_of_roll);
                var grossTotal = response.quantity * response.rate * response.no_of_roll;
                $('#amount').val(grossTotal.toFixed(2));

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




document.getElementById('rolls').addEventListener('input', function () {
    const enteredRolls = parseInt(this.value) || 0;
    const remainingRolls = parseInt(document.getElementById('remaining-rolls').innerText);

    const errorEl = document.getElementById('rolls-error');
    const submitBtn = document.getElementById('submit-btn');

    if (enteredRolls > remainingRolls) {
        errorEl.innerText = `⚠️ You have only ${remainingRolls} rolls remaining.`;
        errorEl.style.display = 'block';
        submitBtn.disabled = true;
    } else {
        errorEl.innerText = '';
        errorEl.style.display = 'none';
        submitBtn.disabled = false;
    }
});


</script>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.querySelector('#add-warehouse');
        const submitBtn = form.querySelector('.confirm');
        const submitText = submitBtn.querySelector('.submit-text');
        const submitLoading = submitBtn.querySelector('.submit-loading');

        form.addEventListener('submit', function () {
            submitBtn.disabled = true;
            submitText.style.display = 'none';
            submitLoading.style.display = 'inline-block';
        });
    });
</script>