@if (Route::is(['order-list']))
    <!--Add Quotation -->
    <div class="modal fade" id="add-units">
        <div class="modal-dialog purchase modal-dialog-centered stock-adjust-modal">
            <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 Order</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 class="product-form" action="{{ route('save-orders') }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                <div class="row">
                                    <div class="col-lg-4 col-md-6 col-sm-12">
                                        <div class="input-blocks add-product">
                                            <label>Customer Name</label>
                                            <div class="row">
                                                <div class="col-lg-10 col-sm-10 col-10">
                                                    <select name="customerid[]" class="select">
                                                        <option value="1">Choose</option>
                                                        <option value="2">Benjamin</option>
                                                        <option  value="3">mcheni</option>
                                                    </select>
                                                </div>
                                           
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-sm-12">
                                        <div class="input-blocks">
                                            <label>Date</label>

                                            <div class="input-groupicon calender-input">
                                                <i data-feather="calendar" class="info-img"></i>
                                                <input type="text" class="datetimepicker[]" placeholder="Choose">
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <div class="col-lg-4 col-md-6 col-sm-12">
                                        <div class="input-blocks">
                                            <label>Reference Number</label>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div> --}}
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="input-blocks">
                                            <label>Product Name</label>
                                            <div class="input-groupicon select-code">
                                            

                                             <input type="text" class="form-control" id="searchItem" placeholder="Search by code, model, category">
                                                <div class="addonset">
                                                    <img src="{{ URL::asset('/build/img/icons/qrcode-scan.svg')}}" alt="img">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

 <!-- Search Results -->
 <div id="display-search-product" class="mt-3">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Product Name</th>
          <th>Qty</th>
          <th>Model no</th>
          <th>Batch No</th>
          <th>Price</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody id="searchResults">
        <!-- Dynamic search results will be appended here -->
      </tbody>
    </table>
  </div>
                                    <div class="col-lg-12">
                                        <center><h4>Ordered Data</h4></center>

                                        <div class="modal-body-table">
                                            <div class="table-responsive">
                                                <table class="table  datane">
                                                    <thead>
                                                        <tr>
                                                            <th>Product</th>
                                                            <th>Qty</th>
                                                            <th>Required Price($)</th>
                                                            <th>Discount($)</th>
                                                           
                                                            <th>Total Cost</th>
                                                        </tr>
                                                    </thead>
                                                   
                                                        <tbody id="orderTable">
                                                            <!-- Selected products will be added here -->
                                                          
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>

                                    </div>
                                   
                                </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">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Add Quotation -->
  


@endif
{{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<script>
    $(document).ready(function () { --}}
  // AJAX Search
  // $('#searchItem').on('keyup', function () {
  //   const query = $(this).val(); // Get the search input value

  //   if (query.length >= 2) {
  //     $.ajax({
  //       url: "{{ route('filter-products') }}", // Use Laravel's route helper
  //       method: 'GET',
  //       data: { query: query }, // Pass the search term as 'query'
  //       success: function (response) {
  //         // Clear previous results
  //         $('#searchResults').empty();

  //         // Append new results
  //         response.products.forEach(function (product) {
  //           $('#searchResults').append(`
  //             <tr>
  //               <td>${product.product_name}</td>
  //               <td>${product.stock_qty}</td>
  //               <td>${product.model_no}</td>
  //               <td>${product.batch_no}</td>
  //               <td>${product.selling_price}</td>
  //               <td>
  //                 <button type="button" class="btn btn-primary btn-sm add-to-order" 
  //                         data-name="${product.product_name}" 
  //                         data-price="${product.selling_price}"
  //                         data-productid="${product.product_id}"
  //                         data-stcokbatchid="${product.stcokbatch_id}">
  //                   Select
  //                 </button>
  //               </td>
  //             </tr>
  //           `);
  //         });
  //       },
  //       error: function () {
  //         alert('Failed to fetch products.');
  //       },
  //     });
  //   } else {
  //     $('#searchResults').empty();
  //   }
  // });

  // Add Product to Order Table
//   $(document).on('click', '.add-to-order', function (event) {
//     event.preventDefault(); // Prevent default form submission

//     const name = $(this).data('name');
//     const price = $(this).data('price');
//     const productid = $(this).data('productid'); // Correct attribute name
//     const stcokbatchid = $(this).data('stcokbatchid'); // Correct attribute name
 

//     // Append product details to the order table
//     $('#orderTable').append(`
//       <tr>
//         <td>${name}
           
//          <input type="hidden" class="form-control product-id" name="productid[]" value="${productid}"> <!-- Hidden field for product ID -->
//           <input type="hidden" class="form-control stockbatch-id" name="stcokbatchid[]" value="${stcokbatchid}"> <!-- Hidden field for stock batch ID -->
//             </td>
        
//         <td><input type="number" class="form-control qty" name="qty[]" value="1"></td>
//         <td><input type="number" class="form-control required-price" name="required-price[]" value="${price}"></td>
//         <td><input type="number" class="form-control discount" name="discount[]" value="0"></td>
//         <td>
//             <input type="number" class="form-control total-cost" name="total-cost[]" value="${price}">
//             </td>
    
//       </tr>
//     `);

//     // Update Total Cost on Qty or Discount Change
//     updateTotalCost();
//   });

//   // Update Total Cost
//   function updateTotalCost() {
//     $(document).on('input', '.qty, .required-price, .discount', function () {
//     const row = $(this).closest('tr');
//     const qty = parseFloat(row.find('.qty').val()) || 0;
//     const price = parseFloat(row.find('.required-price').val()) || 0;
//     const discount = parseFloat(row.find('.discount').val()) || 0;

//     const totalCost = qty * (price - discount);
//     row.find('.total-cost').val(totalCost.toFixed(2)); // Use .val() instead of .text()
//   });
//   }
// });

//   </script>