@extends('backend.partials.master')
@section('title')
Sale Invoice
@endsection
@section('maincontent')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.min.css"/>
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
<main class="content">
   <div class="container-fluid p-0">
      <div class="mb-3">
         <h1 class="h3 d-inline align-middle">Sale Invoice</h1>
      </div>
      <div class="row">
         <div class="col-md-12">
            <div class="card">
               <div class="card-body">
                  <form action="@if(!empty($invoices)){{ route('saleinvoice.update') }}@else{{ route('saleinvoice.store') }}@endif" method="POST" enctype="multipart/form-data">
                     @csrf
                     @if(!empty($invoices))
                     @method('PUT')
                     <input type="hidden" name="id" id="id" value="{{ $invoices->id }}"/>
                     @endif
                     <div class="row">
                        <div class="mb-3 col-md-3">
                           <label class="form-label" for="date">Bill Date <small class="text-danger">*</small></label>
                           <input type="text" class="form-control @error('date') is-invalid @enderror"
                              name="date" id="date"
                              value="{{ old('date', $invoices->date ?? date('Y-m-d')) }}"
                              required>
                           @error('date')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-3">
                           <label class="form-label" for="invoice_no">Invoice Number <small class="text-danger">*</small></label>
                           <input type="text" class="form-control @error('invoice_no') is-invalid @enderror"
                              name="invoice_no" id="invoice_no"
                              value="{{ old('invoice_no', $invoices->invoice_no ?? $invoice_no) }}"
                              readonly required>
                           @error('invoice_no')
                           <small class="text-danger">{{ $message }}</small>
                           @enderror
                        </div>
                        <div class="mb-3 col-md-3">
                           <label class="form-label" for="customer_id">Customer <small class="text-danger">*</small></label>
                           <select id="customer_id" name="customer_id" class="form-control choices-single @error('customer_id') is-invalid @enderror" onchange="getCustomerLots()" >
                              <option disabled selected value="">Select Customer</option>
                              @foreach($customers as $customer)
                              <option value="{{ $customer->id }}"
                              {{ old('customer_id', $invoices->customer_id ?? '') == $customer->id ? 'selected' : '' }}>
                              {{ $customer->fname }}
                              </option>
                              @endforeach
                           </select>
                           @error('customer_id')
                        <small class="text-danger" >
                            {{ $message }}
                        </small>
                        @enderror

                        </div>
                     </div>
                     <div class="row">
                        <table class="table" id="mytable">
                           <thead>
                              <tr>
                                 <th>Lot No <small class="text-danger">*</small></th>
                                 <th>Product <small class="text-danger">*</small></th>
                                 <th>HSN <small class="text-danger"></small></th>
                                 <th>Stock <small class="text-danger">*</small></th>
                                 <th>Quantity <small class="text-danger">*</small></th>
                                 {{--
                                 <th style="width: 15%;">Serial No(s)</th>
                                 <th style="width: 15%;">MAC Id(s)</th>
                                 --}}
                                 <th>GST (%)</th>
                                 <th>Rate</th>
                                 <th>Total <small class="text-danger">*</small></th>
                                 <th></th>
                              </tr>
                           </thead>
                           <tbody>
                              @php $i = 0; @endphp
                              @if(!empty($invoicesdetails))
                              @foreach($invoicesdetails as $detail)
                              @php $i++; @endphp
                              @php
                              //   $productId = $detail->product_id;
                              //   $purchased = \App\Models\Backend\PurchaseDetail::where('product_id', $productId)->sum('quantity');
                              //   $totalSold = \App\Models\Backend\SaleInvoieDetail::where('product_id', $productId)->sum('quantity');
                              //   $currentInvoiceSold = \App\Models\Backend\SaleInvoieDetail::where('product_id', $productId)
                              //   ->where('parent_id', $invoices->id)
                              //   ->sum('quantity');
                              //   $stockForEdit = $purchased - ($totalSold - $currentInvoiceSold);
                              @endphp
                              <tr id="row_{{ $i }}">
                                 <td>
                                    <select name="lot_{{ $i }}" id="lot_{{ $i }}"
                                       class="form-control lot-select select2 "
                                       onchange="loadProductsByLot({{ $i }})" required>
                                       <option value="">Select Lot</option>
                                       @foreach($lots as $lot)
                                       <option value="{{ $lot->lot_no }}"
                                       {{ old('lot_'.$i, $detail->lot_no ?? '') == $lot->lot_no ? 'selected' : '' }}>
                                       {{ $lot->lot_no }}
                                       </option>
                                       @endforeach
                                    </select>
                                        @error('lot_'.$i)
                        <small class="text-danger" >
                            {{ $message }}
                        </small>
                        @enderror

                                 </td>
                                 <td>
                                    <select name="product_{{ $i }}" id="product_{{ $i }}"
                                       class="form-control product-select select2 {{ $errors->has('product_'.$i) ? 'is-invalid' : '' }}"
                                       data-selected="{{ $detail->product_id }}"
                                       onchange="loadProductStock({{ $i }}); loadProductDetails({{ $i }});">
                                       <option value="">Select Product</option>
                                       {{-- initial options will be loaded by loadProductsByLot --}}
                                    </select>
                                 </td>
                                 @if($errors->has('product_'.$i))
                                 <small class="text-danger">{{ $errors->first('lot_'.$i) }}</small>
                                 @endif
                                 <td>
                                    <input type="text" name="hsn_{{ $i }}" id="hsn_{{ $i }}" class="form-control" value="{{ $detail->hsn }}" readonly>
                                 </td>
                                 <td>
                                    <input type="text" name="stock_{{ $i }}" id="stock_{{ $i }}" class="form-control" required readonly>
                                 </td>
                                 <td>
                                    <input type="number"
                                       name="quantity_{{ $i }}"
                                       id="quantity_{{ $i }}"
                                       class="form-control quantity-input @error('quantity_'.$i) is-invalid @enderror"
                                       data-row="{{ $i }}"
                                        step="0.001"
                                       value="{{ old('quantity_'.$i, $detail->quantity) }}"
                                       required>
                                    @error('quantity_'.$i)
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                 </td>
                                 <td>
                                    <input type="text" name="gst_{{ $i }}" id="gst_{{ $i }}" class="form-control" value="{{ $detail->gst }}" readonly>
                                 </td>
                                 <td>
                                    <input type="text" name="rate_{{ $i }}" id="rate_{{ $i }}" class="form-control" value="{{ $detail->rate }}" readonly>
                                 </td>
                                 <td>
                                    <input type="text" name="total_rate_{{ $i }}" id="total_rate_{{ $i }}" class="form-control" value="{{ $detail->total_rate }}" readonly>
                                 </td>
                                 <td>
                                    <i class="fa fa-trash text-danger" style="cursor: pointer;" onclick="deleteRow('row_{{ $i }}')"></i>
                                 </td>
                              </tr>
                              @endforeach
                              @endif
                           </tbody>
                        </table>
                        <input type="hidden" name="cnt" id="cnt" value="{{ $i }}">
                     </div>
                     <div class="row">
                        <div class="col-md-6 text-right mt-2">
                           <button type="button" class="btn btn-primary" onclick="addRow();">+ Add Row</button>
                        </div>
                     </div>
                     <br>
                     <button type="submit" class="btn btn-primary">{{ !empty($saleinvoice) ? 'Update' : 'Create' }}</button>
                     <a href="{{ route('saleinvoice') }}" class="btn btn-secondary">Cancel</a>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>
</main>
@endsection
<!-- Flatpickr CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<!-- Flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
   document.addEventListener('DOMContentLoaded', function() {
       flatpickr("#date", {
           dateFormat: "Y-m-d", // yyyy-mm-dd
           defaultDate: "{{ old('date', $invoices->date ?? date('Y-m-d')) }}"
       });
   });
</script>
<script>
   document.addEventListener('DOMContentLoaded', function () {
       new Choices('#customer_id', {
           searchEnabled: true,
           itemSelectText: '',
       });
   });
</script>
<script>
   let rowCount = 0;

   document.addEventListener("DOMContentLoaded", function() {
       rowCount = document.querySelectorAll("#mytable tbody tr").length;

       if (rowCount === 0) {
           addRow();
       }

       //document.getElementById('cnt').value = rowCount;

   });



   window.addRow = function () {
       rowCount++;

       const tbody = document.querySelector("#mytable tbody");
       const newRow = document.createElement('tr');
       newRow.id = `row_${rowCount}`;

       newRow.innerHTML = `
           <td>
               <select name="lot_${rowCount}" id="lot_${rowCount}" required class="form-control lot-select select2"
                   onchange="loadProductsByLot(${rowCount})">
                   <option value="">Select Lot</option>
               </select>
              @error('lot_'.$i)
<small class="text-danger">{{ $message }}</small>
@enderror
           </td>
           <td>
               <select name="product_${rowCount}" id="product_${rowCount}" required class="form-control product-select select2"
                   onchange="loadProductStock(${rowCount});loadProductDetails(${rowCount})">
                   <option value="">Select Product</option>
               </select>
           </td>
           <td><input type="text" name="hsn_${rowCount}" id="hsn_${rowCount}" class="form-control" readonly></td>
           <td><input type="text" name="stock_${rowCount}" id="stock_${rowCount}" class="form-control" readonly></td>
           <td><input type="number"  step="0.001" name="quantity_${rowCount}" id="quantity_${rowCount}"  required class="form-control quantity-input" data-row="${rowCount}"></td>

           <td><input type="text" name="gst_${rowCount}" class="form-control" readonly></td>

           <td><input type="text" name="rate_${rowCount}" id="rate_${rowCount}" class="form-control" readonly></td>
           <td><input type="text" name="total_rate_${rowCount}" id="total_rate_${rowCount}" class="form-control" readonly>
           </td>
           <td><i class="fa fa-trash text-danger" onclick="deleteRow('row_${rowCount}')"></i></td>
       `;
       tbody.appendChild(newRow);

        // ✅ Populate only this row's lot dropdown
       getCustomerLots(rowCount);
     document.getElementById('cnt').value = rowCount;

   };


   function getCustomerLots(rowId = null) {
     //  console.log('getCustomerLots called for rowId:', rowId);
       let customerEl = document.getElementById('customer_id');
       if (!customerEl) return;
       let customerId = customerEl.value;
       if (!customerId) return;

       let lotSelects = rowId ? [document.getElementById(`lot_${rowId}`)] : document.querySelectorAll('.lot-select');

       lotSelects.forEach(lotSelect => {
           if (!lotSelect) return;
           let currentValue = lotSelect.value;

           lotSelect.innerHTML = '<option disabled selected value="">Select Lot</option>';

           fetch(`{{ url('get-lots') }}/${customerId}`)
               .then(res => res.json())
               .then(data => {
                   data.forEach(lot => {
                       const option = document.createElement('option');
                       option.value = lot.lot_no;
                       option.text = lot.lot_no;
                       lotSelect.appendChild(option);
                   });

                   if (currentValue) lotSelect.value = currentValue;
               })
               .catch(err => console.error(err));
       });
   }


   // Automatically calculate total_rate = quantity * rate with stock check
   document.addEventListener('input', function(e) {
       if (e.target.classList.contains('quantity-input')) {
           const rowId = e.target.dataset.row; // row number
           const quantity = parseFloat(e.target.value) || 0;
           const rate = parseFloat(document.getElementById(`rate_${rowId}`).value) || 0;
           const stock = parseFloat(document.getElementById(`stock_${rowId}`).value) || 0;
            if (quantity <= 0) {
                    alert("Quantity must be greater than 0");
                    e.target.value = '';
                    return;
                }
           // Check stock
           if (quantity > stock) {
               alert("Quantity exceeds stock"); // simple alert
               e.target.value = ''; // reset to max available stock

               return;
           }

           // Calculate total_rate
           const total = quantity * rate;
           document.getElementById(`total_rate_${rowId}`).value = total.toFixed(2); // 2 decimals
       }
   });




       // 4️⃣ Delete Row function (तुझा existing code copy)
     window.deleteRow = function (rowId) {
       const tbody = document.querySelector("#mytable tbody");
       const row = document.getElementById(rowId);

       // Check if there is more than 1 row
       if (tbody.rows.length > 1) {
           if (row) row.remove();
       } else {
           alert("At least one row must remain!");
       }
   };


   function loadProductStock(rowId) {
       let productId  = $(`#product_${rowId}`).val();
       let lotNo      = $(`#lot_${rowId}`).val();
       let invoiceId  = $('#id').val(); // 👈 important

       if (!productId || !lotNo) return;

       $.ajax({
           url: "{{ url('get-product-stock') }}",
           type: "POST",
           data: {
               _token: "{{ csrf_token() }}",
               product_id: productId,
               lot_no: lotNo,
               invoice_id: invoiceId
           },
           success: function (res) {
               $(`#stock_${rowId}`).val(res.stock);
           }
       });
   }



   function loadProductDetails(rowId) {
       let customerId = $(`#customer_id`).val();
       let productId = $(`#product_${rowId}`).val();

       if (!customerId) {
           alert("Please select customer first");
           $(`#product_${rowId}`).val('');
           return;
       }

       $.ajax({
           url: "{{ url('/get-product-sale-price') }}",
           type: 'POST',
           data: {
               _token: "{{ csrf_token() }}", // CSRF token for POST
               customer_id: customerId,
               product_id: productId
           },
           success: function(response) {
       if(response.success) {
           // Convert sale price to 2 decimals
           let formattedPrice = parseFloat(response.sale_price).toFixed(2);
           $(`#rate_${rowId}`).val(formattedPrice);
       } else {
           alert(response.message);
           $(`#rate_${rowId}`).val('');
       }
   },
           error: function(xhr) {
               console.error('AJAX Error:', xhr.status, xhr.responseText);
           }
       });
   }




</script>
{{---------------------------------------- my new code--------------------- --}}
<script>
//    document.addEventListener("DOMContentLoaded", function () {
//    console.log('=== EDIT PAGE LOADED ===');

//    $("#mytable tbody tr").each(function () {
//        let rowId = this.id.split('_')[1];
//        console.log('Calling loadProductsByLot for row:', rowId);
//        loadProductsByLot(rowId);
//    });
//    });

   function loadProductsByLot(rowId) {
   let lot = $(`#lot_${rowId}`).val();
   if (!lot) return;

   let productSelect = $(`#product_${rowId}`);
   let selectedProduct = productSelect.attr('data-selected');

   // 🔹 convert to string to match option value type
   if(selectedProduct) selectedProduct = selectedProduct.toString();

   $.ajax({
       url: "{{ url('/get-products-by-lot') }}/" + lot,
       type: 'GET',
       success: function(products) {
           console.log('Products from API:', products);

           productSelect.empty();
           productSelect.append('<option value="">Select Product</option>');

           products.forEach(function(product) {
               productSelect.append(
                   `<option value="${product.id}">${product.name}</option>`
               );
           });

           // 🔥 now selected works
           if (selectedProduct) {
               productSelect.val(selectedProduct).trigger('change');
               console.log('Selected product set to:', productSelect.val());
           }
       }
   });
   }

   document.addEventListener("DOMContentLoaded", function () {
   console.log('=== EDIT PAGE LOADED ===');

   $("#mytable tbody tr").each(function () {
       let rowId = this.id.split('_')[1];
       console.log('Calling loadProductsByLot for row:', rowId);
       loadProductsByLot(rowId);
   });
   });
</script>


<script>
   // document.addEventListener('DOMContentLoaded', function() {
   //     document.querySelectorAll('.quantity-input').forEach(function(input) {
   //         input.addEventListener('input', function() {
   //             const row = this.dataset.row;
   //             console.log("Quantity changed in row:", row); // test
   //             const quantity = parseFloat(this.value) || 0;
   //             const rateInput = document.getElementById('rate_' + row);
   //             const totalRateInput = document.getElementById('total_rate_' + row);
   //             if (!rateInput || !totalRateInput) return;

   //             const rate = parseFloat(rateInput.value) || 0;
   //             const total = quantity * rate;
   //             totalRateInput.value = total.toFixed(2);

   //             alert("Total: " + total); // test alert
   //         });
   //     });
   // });


</script>
<script>
   //    document.addEventListener("DOMContentLoaded", () => {

   //        if (window.Choices) {
   //            document.querySelectorAll('.serial-dropdown').forEach(el => {
   //                new Choices(el, { removeItemButton: true });
   //            });
   //            document.querySelectorAll('.mac-dropdown').forEach(el => {
   //                new Choices(el, { removeItemButton: true });
   //            });
   //        }

   //        let rowCount = parseInt(document.getElementById('cnt').value || '0');
   //        const supplierSelect = document.getElementById('customer_id');
   //        let allProducts = [];

   //        // 🔸 1. Load all products once (No customer filtering)
   //        fetch(`{{ url('/all-products') }}`)
   //            .then(res => res.json())
   //            .then(products => {
   //                allProducts = products;

   //                // Populate existing rows if any
   //                // Populate existing rows if any
   //                for (let i = 1; i <= rowCount; i++) {
   //                    const productSelect = document.getElementById(`product_${i}`);
   //                    if (!productSelect) continue;
   //                    productSelect.innerHTML = `<option value="">Select Product</option>`;
   //                    allProducts.forEach(p => {
   //                        const option = document.createElement('option');
   //                        option.value = p.id;
   //                        option.text = p.name;
   //                        productSelect.appendChild(option);
   //                    });

   //                    // ✅ Re-select product if old value exists (editing mode)
   //                    const selectedProductId = productSelect.getAttribute('data-selected'); // Add this attribute from Blade
   //                    if (selectedProductId) {
   //                        productSelect.value = selectedProductId;
   //                    }
   //                }

   //            });

   //        // 🔸 2. When product is selected
   //      document.addEventListener('change', function (event) {
   //        if (event.target.classList.contains('product-select')) {
   //            const row = event.target.dataset.row;
   //            const productId = event.target.value;
   //            const customerId = document.getElementById('customer_id').value;

   //            if (!productId) return;

   //            // ✅ Step 1: First fetch product details from product table
   //            fetch(`{{ url('/product-details') }}/${productId}`)
   //                .then(res => res.json())
   //                .then(productData => {
   //                    const hsnField = document.getElementById(`hsn_${row}`);
   //                    const gstField = document.getElementById(`gst_${row}`);
   //                    const rateField = document.getElementById(`rate_${row}`);
   //                    const qtyInput = document.getElementById(`quantity_${row}`);

   //                    // Set HSN & GST
   //                    hsnField.value = productData.hsn;
   //                    gstField.value = productData.gst;

   //                    // Default rate from product table
   //                    let finalRate = productData.rate;

   //                    // ✅ Step 2: Check if customer rate exists
   //                    if (customerId) {
   //                        fetch(`{{ url('/customer-product-rate') }}/${customerId}/${productId}`)
   //                            .then(r => r.json())
   //                            .then(rateData => {
   //                                if (rateData && rateData.rate !== null) {
   //                                    // Customer rate found
   //                                    finalRate = rateData.rate;
   //                                } else {
   //                                    // ❌ Customer rate not found — use product rate
   //                                    finalRate = productData.rate;
   //                                }
   //                                rateField.value = finalRate;
   //                            })
   //                            .catch(() => {
   //                                // On error fallback to product rate
   //                                rateField.value = finalRate;
   //                            });
   //                    } else {
   //                        // No customer selected — use product rate
   //                        rateField.value = finalRate;
   //                    }

   //                    // Set serial flag
   //                    qtyInput.dataset.hasSerial = productData.has_serial ? '1' : '0';
   //                })
   //                .catch(err => console.error('Product details fetch error:', err));

              // ✅ Step 3: Fetch stock and serial/mac info
           //   fetch(`{{ url('/product-stock') }}/${productId}`)
           //    .then(res => res.json())
           //    .then(data => {
           //        document.getElementById(`stock_${row}`).value = data.stock;

           //        const serialContainer = document.getElementById(`serial_no_container_${row}`);
           //        const macContainer = document.getElementById(`mac_id_container_${row}`);
           //        serialContainer.innerHTML = '';
           //        macContainer.innerHTML = '';

           //        if (data.serials && data.serials.length > 0) {
           //            // 🔸 Multi-select for Serial Numbers
           //            let serialSelect = `<select name="serial_no_${row}[]" id="serial_no_${row}"
           //                                        class="form-control serial-dropdown choices-multiple"
           //                                        data-row="${row}" multiple>`;
           //            data.serials.forEach(s => {
           //                serialSelect += `<option value="${s}">${s}</option>`;
           //            });
           //            serialSelect += `</select>`;
           //            serialContainer.innerHTML = serialSelect;
           //        }

           //        if (data.mac_ids && data.mac_ids.length > 0) {
           //            // 🔸 Multi-select for MAC IDs
           //            let macSelect = `<select name="mac_id_${row}[]" id="mac_id_${row}"
           //                                    class="form-control mac-dropdown choices-multiple"
           //                                    data-row="${row}" multiple>`;
           //            data.mac_ids.forEach(m => {
           //                macSelect += `<option value="${m}">${m}</option>`;
           //            });
           //            macSelect += `</select>`;
           //            macContainer.innerHTML = macSelect;
           //        }

           //        // Optional: re-initialize Choices.js for nice UI
           //        if (window.Choices) {
           //            new Choices(`#serial_no_${row}`, { removeItemButton: true });
           //            new Choices(`#mac_id_${row}`, { removeItemButton: true });
           //        }
           //    });

   //        }
   //    });



          // 🔸 5. Serial number selection updates MAC ID
       //    document.addEventListener('change', function(event) {
       //        if (event.target.classList.contains('serial-dropdown')) {
       //            const serialSelect = event.target;
       //            const row = serialSelect.dataset.row;
       //            const selectedSerial = serialSelect.value;
       //            const macSelect = document.querySelector(`#mac_id_container_${row} .mac-dropdown`);

       //            if (!selectedSerial || !macSelect) {
       //                macSelect.innerHTML = `<option value="">Select MAC ID</option>`;
       //                return;
       //            }

       //            const index = serialSelect.serials.indexOf(selectedSerial);
       //            const macId = (index !== -1) ? serialSelect.macIds[index] : '';

       //            macSelect.innerHTML = '';
       //            if (macId) {
       //                macSelect.innerHTML = `<option value="${macId}" selected>${macId}</option>`;
       //            } else {
       //                macSelect.innerHTML = `<option value="">Select MAC ID</option>`;
       //            }
       //        }
       //    });

          // 🔸 6. Quantity input: total calculation + validation


     // });



</script>