@extends('layouts.dashboard.superadminapp')
@section('title', 'Purchase Order')

@section('styles')
    <!-- DataTables Bootstrap 5 styling for buttons -->
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <!-- Bootstrap Select CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">
    <style>
        #productTable th, #productTable td{
            min-width: 100px;
        }
        #productTable th:nth-child(2),
        #productTable td:nth-child(2) {
            min-width: 250px;
        }
        #productTable th:nth-child(3),
        #productTable td:nth-child(3) {
            min-width: 150px;
        }
        #productTable th:nth-child(4),
        #productTable td:nth-child(4) {
            min-width: 150px !important;
        }
        #productTable th:nth-child(5),
        #productTable td:nth-child(5) {
            min-width: 150px !important;
        }
    </style>
@endsection

@section('content')

    <!-- Page Heading -->
    <div class="bg-white p-2 d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h5 mb-0 text-gray-800">UEPL | Purchase Order </h1>
        <div class="display-date">
            <span id="day">day</span>,
            <span id="daynum">00</span>
            <span id="month">month</span>
            <span id="year">0000</span>
        </div>
        <div class="display-time"></div>
    </div>

    <!-- Content Row -->
    <div class="bg-white row">
        <div class="col-lg-12">
            <!-- Project Planning Start -->
            <div class="sales-form" id="soContent">
                <h1 class="pt-5 pb-2">Purchase Order</h1>
                <form id="soForm" class="bg-white p-4 rounded shadow-sm">
                  <div class="row mt-3">
                    <div class="col-md-6">
                      <label>Purchase Order No. <span class="required" title="required">*</span>
                        <input type="text" id="sOrderNo" required class="form-control" readonly>
                      </label>
                    </div>
                    <div class="col-md-6">
                      <label>Quotation ID
                        <select id="quotationSelect" name="quotationSelect" class="form-select">
                          <option value="">Select Quotation</option>
                        </select>
                      </label>
                    </div>
                  </div>
                  <div class="row mt-3">
                    <div class="col-md-6">
                      <label>Purchase Date <span class="required" title="required">*</span>
                        <input type="date" id="sOrderDate" required class="form-control">
                      </label>
                    </div>
                    <div class="col-md-6">
                      <label>Quotation Date
                        <input type="date" id="quotationDate" class="form-control">
                      </label>
                    </div>
                  </div>
                  <div class="row mt-3">
                    <div class="col-md-6">
                      <label>Vendor Company Name
                        <input type="text" id="soCompanyName" name="soCompanyName" class="form-control">
                        <input type="text" id="soCompanyId" name="soCompanyId" class="form-control hidden">
                      </label>
                    </div>
                    <div class="col-md-6">
                      <label>Vendor Reference No. <input type="text" id="custRefNo" name="custRefNo" class="form-control">
                      </label>
                    </div>
                  </div>
                  <div class="row mt-3">
                    <div class="col-md-6">
                      <label>Address
                        <input type="text" id="soCompanyAddress" class="form-control">
                      </label>
                    </div>
                    <div class="col-md-6">
                      <label>GSTN
                        <input type="text" id="soCompanyGSTN" class="form-control">
                      </label>
                    </div>
                  </div>
                  <div class="row mt-3">
                    <div class="col-md-6">
                      <label>Phone
                        <input type="tel" id="soCompanyPhone" class="form-control">
                      </label>
                    </div>
                    <div class="col-md-6">
                      <label>Email
                        <input type="email" id="soCompanyEmail"  class="form-control">
                      </label>
                    </div>
                  </div>
                  <div class="row mt-3">
                    <div class="col-md-6">
                      <label for="rfqNo">RFQ No</label>
                      <input type="text" id="rfqNo" class="form-control">
                    </div>
                    <div class="col-md-6">
                      <label for="rfqDate">RFQ Date</label>
                      <input type="date" id="rfqDate" class="form-control">
                    </div>
                  </div>
                  <div class="row mt-3">
                    <div class="col-md-6">
                      <label for="description">Note Ⅰ </label>
                      <input type="text" id="projectDescription" name="projectDescription" class="form-control" placeholder="Project Description">
                    </div>
                    <div class="col-md-6">
                      <label for="deliveryTerms">Delivery Terms</label>
                      <input type="text" id="deliveryTerms" name="deliveryTerms" class="form-control" placeholder="Delivery Terms">
                    </div>
                  </div>
                  <div class="row mt-3">
                    <div class="col-md-6">
                      <label for="additionalCharges">Additional Charges</label>
                      <input type="text" id="additionalCharges" name="additionalCharges" class="form-control" placeholder="Additional Charges">
                    </div>
                    <div class="col-md-6">
                      <label for="note">Note ⅠⅠ</label>
                      <textarea id="note" name="note" rows="2" placeholder="Note" class="form-control"></textarea>
                    </div>
                  </div>
                  <hr>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="Billing-info">
                        <label>Bill To <textarea name="billAddress" id="billAddress" class="form-control"></textarea>
                        </label>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="Shipping-info">
                        <label>Ship To <textarea name="shipAddress" id="shipAddress" class="form-control"></textarea>
                        </label>
                      </div>
                    </div>
                    <br>
                    <hr>
                    <div class="col-lg-12">
                      <div class="po-so">
                        <table id="productTable" class="table table-bordered product-table">
                          <thead>
                            <tr>
                              <th>Sl No.</th>
                              <th>Item</th>
                              <th>Description</th>
                              <th>Req By Date</th>
                              <th>Quantity</th>
                              <th>UOM</th>
                              <th>Unit Rate (INR)</th>
                              <th>TDS (%)</th>
                              <th>Discount (%)</th>
                              <th>Value (INR)</th>
                              <th>SGST (%)</th>
                              <th>CGST (%)</th>
                              <th>IGST (%)</th>
                              <th>Amount (INR)</th>
                              <th>Actions</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>1</td>
                              <td>
                                <select class="form-select item-select w-100" name="item[]" required>
                                  <option value="">Select Item</option>
                                  @foreach ($stock_items as $item)
                                    <option value="{{ $item->id }}">{{ $item->item_name }}</option>
                                  @endforeach
                                </select>
                              </td>
                              <td>
                                <input type="text" name="description" placeholder="Description" />
                              </td>
                              <td>
                                <input type="date" name="req_by_date" placeholder="Select date" />
                              </td>
                              <td>
                                <input type="number" name="quantity" step="1" min="0" placeholder="Qty" />
                              </td>
                              <td>
                                <input type="text" name="uom" placeholder="UOM" />
                              </td>
                              <td>
                                <input type="number" name="unit_rate" step="0.01" placeholder="Rate" />
                              </td>
                              <td>
                                <input type="number" name="tds" step="0.01" placeholder="TDS %" />
                              </td>
                              <td>
                                <input type="number" name="discount" step="0.01" placeholder="Discount %" />
                              </td>
                              <td>
                                <input type="number" name="value" step="0.01" placeholder="Value" readonly />
                              </td>
                              <td>
                                <input type="number" name="sgst" step="0.01" placeholder="SGST %" />
                              </td>
                              <td>
                                <input type="number" name="cgst" step="0.01" placeholder="CGST %" />
                              </td>
                              <td>
                                <input type="number" name="igst" step="0.01" placeholder="IGST %" />
                              </td>
                              <td>
                                <input type="number" name="amount" step="0.01" placeholder="Amount" readonly />
                              </td>
                              <td>
                                <button type="button" class="btn btn-danger" onclick="deleteRow(this)">
                                  <i class="fa fa-trash"></i>
                                </button>
                              </td>
                            </tr>
                          </tbody>
                        </table>

                      </div>
                      <div class="row mt-3">
                        <div class="col-md-2">
                          <button type="button" class="btn btn-primary" id="addRowBtn">Add Row</button>
                        </div>
                      </div>
                      <hr>
                      <div class="row mt-4">
                        <div class="col-md-6">
                          <label for="INR">Indian Rupees</label>
                          <input type="text" id="inr_in_words" name="inr_in_words" readonly class="form-control">
                        </div>
                        <div class="col-md-6 total-fields">
                          <div class="totals align-self-lg-end">
                            <div class="row mb-2">
                              <div class="col-md-3">
                                <label>SUB TOTAL</label>
                              </div>
                              <div class="col-md-9">
                                <input type="text" id="totalAmount" readonly class="form-control">
                              </div>
                            </div>
                            <div class="row mb-2">
                              <div class="col-md-3">
                                <label>SGST Amount</label>
                              </div>
                              <div class="col-md-9">
                                <input type="text" id="sgstA" readonly class="form-control">
                              </div>
                            </div>
                            <div class="row mb-2">
                              <div class="col-md-3">
                                <label>CGST Amount</label>
                              </div>
                              <div class="col-md-9">
                                <input type="text" id="cgstA" readonly class="form-control">
                              </div>
                            </div>
                            <div class="row mb-2">
                              <div class="col-md-3">
                                <label>IGST Amount</label>
                              </div>
                              <div class="col-md-9">
                                <input type="text" id="IgstA" readonly class="form-control">
                              </div>
                            </div>
                            <div class="row mb-2">
                              <div class="col-md-3">
                                <label>RoundUp Amount</label>
                              </div>
                              <div class="col-md-9">
                                <input type="text" id="roundUp" readonly class="form-control">
                              </div>
                            </div>
                            <div class="row mb-2">
                              <div class="col-md-3">
                                <label>Grand Total</label>
                              </div>
                              <div class="col-md-9">
                                <input type="text" id="grandTotal" readonly class="form-control">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <hr>
                      <div class="row p-3">
                        <!-- Submit Button -->
                        <div class="btn">
                          <button class="btn btn-success" type="submit" onclick="saveSO(event)">Save</button>
                        </div>
                        <div class="btn">
                          <button class="btn btn-danger" type="reset" onclick="resetForm()">Clear</button>
                        </div>
                      </div>
                </form>
            </div>
        </div>
    </div>
    @endsection
    @section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Load jQuery FIRST -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- Then Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    
    <!-- Bootstrap JS (required by Bootstrap Select) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Bootstrap Select JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

    <script>
    
        const stockItems = @json($stock_items);
        
        // Initialize existing selects on page load
        $(document).ready(function () {
            initializeSelect2();
            
            // Apply selected values explicitly from JSON (ensures correctness)
            rfqItems.forEach((item, index) => {
                const select = $(`select[name='item[]']`).eq(index);
                
                console.log(select.length, stockItems, item.item);
                if (select.length) {
                    select.val(String(item.item)).trigger('change.select2');
                }
            });
        });
        
        document.addEventListener("DOMContentLoaded", async function() {

            // ==== 1. Populate Quotation Dropdown ====
            try {
                const response = await fetch("{{ url('/superadmin/purchase/quotations') }}");
                const quotations = await response.json();
                const select = document.getElementById("quotationSelect");
                quotations.forEach(q => {
                    const opt = document.createElement("option");
                    opt.value = q.id;
                    opt.textContent = q.quotation_no;
                    select.appendChild(opt);
                });
            } catch (err) {
                console.error("Failed to load quotations:", err);
            }

            // ==== 2. On Quotation Select, Autofill All Fields ====
            document.getElementById("quotationSelect").addEventListener("change", async function() {
                const quotationId = this.value;
                if (!quotationId) return;
                try {
                    const response = await fetch(
                        `{{ url('/superadmin/purchase/quotation') }}/${quotationId}`);
                    const data = await response.json();
                    if (data.error) {
                        alert(data.error);
                        return;
                    }
                    // Autofill header fields
                    //document.getElementById("quotationDate").value = data.quotation_date || "";
                    document.getElementById("quotationDate").value = formatDate(data.quotation_date);
                    document.getElementById("soCompanyName").value = data.vendor_name || "";
                    document.getElementById("soCompanyId").value = data.vendor_id || "";
                    document.getElementById("soCompanyAddress").value = data.address || "";
                    document.getElementById("soCompanyGSTN").value = data.gst || "";
                    document.getElementById("soCompanyPhone").value = data.phone || "";
                    document.getElementById("soCompanyEmail").value = data.email || "";
                    document.getElementById("billAddress").value = data.address || "";
                    document.getElementById("shipAddress").value = data.address || "";
                    document.getElementById("custRefNo").value = data.vendor_reference_no || "";
                    document.getElementById("rfqNo").value = data.rfq_no || "";
                    //document.getElementById("rfqDate").value = data.rfq_date || "";
                    document.getElementById("rfqDate").value = formatDate(data.rfq_date);
                    document.getElementById("projectDescription").value = data.description || "";
                    document.getElementById("deliveryTerms").value = data.delivery_terms || "";
                    document.getElementById("additionalCharges").value = data.additional_charges || "";
                    document.getElementById("note").value = data.note || "";

                    // Fill product table using raw_materials array
                    fillProductTableFromQuotation(data.items);
                    // Totals and financials
                    document.getElementById("totalAmount").value = data.sub_total || "";
                    document.getElementById("grandTotal").value = data.grand_total || "";
                    document.getElementById("roundUp").value = data.round_up || "";
                    calculateAllTotals();
                } catch (err) {
                    console.error("Failed to load quotation data:", err);
                }
            });

            // ==== 3. On Page Load: Set Dates, Generate SO Number, Setup Initial Row ====
            try {
                const soResponse = await fetch("{{ url('superadmin/generate-po-id') }}");
                const soData = await soResponse.json();
                document.getElementById('sOrderNo').value = soData.so_id;
            } catch (error) {
                document.getElementById('sOrderNo').value = 'UEPL/PO/0001';
            }
            document.getElementById('sOrderDate').value = new Date().toISOString().split('T')[0];

            // Setup event listeners for initial row
            document.querySelectorAll("#productTable tbody tr").forEach(row => {
                addRowEventListeners(row);
            });

            // ==== 4. Add/Remove Product Rows, Calculation Logic ====
        
            window.addRow = function () {
                const table = document.getElementById("productTable").querySelector("tbody");
                const idx = table.rows.length + 1;
                const row = document.createElement("tr");
        
                row.innerHTML = `
                    <td>${idx}</td>
                    <td>
                        <select class="form-select item-select w-100" name="item[]" required>
                            <option value="">Select Item</option>
                            @foreach ($stock_items as $item)
                                <option value="{{ $item->id }}">{{ $item->item_name }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td><input type="text" name="description" class="form-control" placeholder="Description" /></td>
                    <td><input type="date" name="req_by_date" class="form-control" placeholder="Select date" /></td>
                    <td><input type="number" name="quantity" class="form-control" step="1" min="0" placeholder="Qty" /></td>
                    <td><input type="text" name="uom" class="form-control" placeholder="UOM" /></td>
                    <td><input type="number" name="unit_rate" class="form-control" step="0.01" placeholder="Rate" /></td>
                    <td><input type="number" name="tds" class="form-control" step="0.01" placeholder="TDS %" /></td>
                    <td><input type="number" name="discount" class="form-control" step="0.01" placeholder="Discount %" /></td>
                    <td><input type="number" name="value" class="form-control" readonly placeholder="Value" /></td>
                    <td><input type="number" name="sgst" class="form-control" step="0.01" placeholder="SGST %" /></td>
                    <td><input type="number" name="cgst" class="form-control" step="0.01" placeholder="CGST %" /></td>
                    <td><input type="number" name="igst" class="form-control" step="0.01" placeholder="IGST %" /></td>
                    <td><input type="number" name="amount" class="form-control" readonly placeholder="Amount" /></td>
                    <td>
                        <button type="button" class="btn btn-danger" onclick="deleteRow(this)">
                            <i class="fa fa-trash"></i>
                        </button>
                    </td>
                `;

        
                table.appendChild(row);
        
                addRowEventListeners(row); // attach input listeners
                const itemSelect = row.querySelector('.item-select');
                if (itemSelect) {
                    initializeSelect2OnElement(itemSelect);
                }
            };
            
            document.getElementById("addRowBtn").addEventListener("click", addRow);

            function initializeSelect2OnElement(element) {
                if (!$(element).hasClass("select2-hidden-accessible")) {
                    $(element).select2({
                        dropdownParent: $('#soForm'),
                        width: 'resolve',
                        placeholder: "Select Item",
                        allowClear: true
                    });
                }
            }
        
            window.deleteRow = function (btn) {
                btn.closest("tr").remove();
                updateRowNumbers();
                calculateAllTotals();
            };

            function updateRowNumbers() {
                const rows = document.querySelectorAll("#productTable tbody tr");
                rows.forEach((row, i) => row.cells[0].textContent = i + 1);
            }
            
            function addRowEventListeners(row) {    
                ["quantity", "unit_rate", "discount","tds", "sgst", "cgst", "igst"].forEach(name => {
                    row.querySelector(`[name="${name}"]`).addEventListener("input", () => calculateRowValue(row));
                });
            }

            function calculateRowValue(row) {
                const quantity = parseFloat(row.querySelector('[name="quantity"]').value) || 0;
                const rate = parseFloat(row.querySelector('[name="unit_rate"]').value) || 0;
                const discount = parseFloat(row.querySelector('[name="discount"]').value) || 0;
                const sgst = parseFloat(row.querySelector('[name="sgst"]').value) || 0;
                const cgst = parseFloat(row.querySelector('[name="cgst"]').value) || 0;
                const igst = parseFloat(row.querySelector('[name="igst"]').value) || 0;
                const tds = parseFloat(row.querySelector('[name="tds"]').value) || 0;
            
                // Base after discount
                const base = quantity * rate * (1 - discount / 100);
                const gstTotal = base * (sgst + cgst + igst) / 100;
                const tdsAmount = base * (tds / 100);
            
                const total = base + gstTotal - tdsAmount;
            
                row.querySelector('[name="value"]').value = base.toFixed(2);
                row.querySelector('[name="amount"]').value = total.toFixed(2);
            
                calculateAllTotals();
            }

        
            function calculateAllTotals() {
                let subtotal = 0, sgstTotal = 0, cgstTotal = 0, igstTotal = 0, tdsTotal = 0;
            
                document.querySelectorAll("#productTable tbody tr").forEach(row => {
                    const value = parseFloat(row.querySelector('[name="value"]').value) || 0;
                    const sgst = parseFloat(row.querySelector('[name="sgst"]').value) || 0;
                    const cgst = parseFloat(row.querySelector('[name="cgst"]').value) || 0;
                    const igst = parseFloat(row.querySelector('[name="igst"]').value) || 0;
                    const tds = parseFloat(row.querySelector('[name="tds"]').value) || 0;
            
                    subtotal += value;
                    sgstTotal += value * sgst / 100;
                    cgstTotal += value * cgst / 100;
                    igstTotal += value * igst / 100;
                    tdsTotal += value * tds / 100;
                });
            
                const rawGrand = subtotal + sgstTotal + cgstTotal + igstTotal - tdsTotal;
                const round = Math.ceil(rawGrand) - rawGrand;
                const grand = rawGrand + round;
            
                document.getElementById("totalAmount").value = subtotal.toFixed(2);
                document.getElementById("sgstA").value = sgstTotal.toFixed(2);
                document.getElementById("cgstA").value = cgstTotal.toFixed(2);
                document.getElementById("IgstA").value = igstTotal.toFixed(2);
                document.getElementById("roundUp").value = round.toFixed(2);
                document.getElementById("grandTotal").value = grand.toFixed(2);
                document.getElementById("inr_in_words").value = convertNumberToWords(grand.toFixed(0));
            }

        
            function convertNumberToWords(num) {
                const a = ['', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten',
                    'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen'];
                const b = ['', '', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'];
        
                if (num === 0) return 'Zero Only';
        
                function inWords(n) {
                    if (n < 20) return a[n];
                    if (n < 100) return b[Math.floor(n / 10)] + (n % 10 ? ' ' + a[n % 10] : '');
                    if (n < 1000) return a[Math.floor(n / 100)] + ' Hundred ' + (n % 100 ? 'and ' + inWords(n % 100) : '');
                    if (n < 100000) return inWords(Math.floor(n / 1000)) + ' Thousand ' + (n % 1000 ? inWords(n % 1000) : '');
                    if (n < 10000000) return inWords(Math.floor(n / 100000)) + ' Lakh ' + (n % 100000 ? inWords(n % 100000) : '');
                    return inWords(Math.floor(n / 10000000)) + ' Crore ' + (n % 10000000 ? inWords(n % 10000000) : '');
                }
        
                return inWords(Math.floor(num)) + " Only";
            }
        
            // ==== 5. Fill product table from quotation data ====
            function fillProductTableFromQuotation(items) {
                const tbody = document.querySelector("#productTable tbody");
                tbody.innerHTML = ""; // clear existing rows
                items.forEach((rm, i) => {
                    const row = document.createElement("tr");
                    row.innerHTML = `
                        <td>${i + 1}</td>
                        <td>
                            <select class="form-select item-select w-100" name="item[]" required>
                                <option value="">Select Item</option>
                                ${stockItems.map(si => `
                                    <option value="${si.id}" ${rm.stock_item == si.id ? 'selected' : ''}>${si.item_name}</option>
                                `).join('')}
                            </select>
                        </td>
                        <td><input type="text" name="description" class="form-control" value="${rm.description || ''}" /></td>
                        <td><input type="date" name="req_by_date" class="form-control" value="${rm.req_by_date || ''}" /></td>
                        <td><input type="number" name="quantity" class="form-control" step="1" min="0" value="${rm.quantity || 0}" /></td>
                        <td><input type="text" name="uom" class="form-control" value="${rm.uom || ''}" /></td>
                        <td><input type="number" name="unit_rate" class="form-control" step="0.01" value="${rm.unit_rate || 0}" /></td>
                        <td><input type="number" name="tds" class="form-control" step="0.01" value="${rm.tds || 0}" /></td>
                        <td><input type="number" name="discount" class="form-control" step="0.01" value="${rm.discount || 0}" /></td>
                        <td><input type="number" name="value" class="form-control" readonly value="0" /></td>
                        <td><input type="number" name="sgst" class="form-control" step="0.01" value="${rm.sgst || 0}" /></td>
                        <td><input type="number" name="cgst" class="form-control" step="0.01" value="${rm.cgst || 0}" /></td>
                        <td><input type="number" name="igst" class="form-control" step="0.01" value="${rm.igst || 0}" /></td>
                        <td><input type="number" name="amount" class="form-control" readonly value="0" /></td>
                        <td><button type="button" class="btn btn-danger" onclick="deleteRow(this)">
                            <i class="fa fa-trash"></i></button></td>
                    `;
                    tbody.appendChild(row);
                    addRowEventListeners(row);
                    calculateRowValue(row);
                });
                updateRowNumbers();
                
                initializeItemSelects();
            }

            window.printSO = function() {
                window.print();
            }

            // Function to convert numbers to words
            function convertNumberToWords(num) {
                var a = [
                    '', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten',
                    'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'
                ];
                var b = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
            
                if ((num = num.toString()).length > 9) return 'Overflow';
                if (parseInt(num) === 0) return 'Zero';
            
                num = ('000000000' + num).substr(-9);
                var n = [
                    parseInt(num.substr(0, 2), 10),  // crore
                    parseInt(num.substr(2, 2), 10),  // lakh
                    parseInt(num.substr(4, 2), 10),  // thousand
                    parseInt(num.substr(6, 1), 10),  // hundred
                    parseInt(num.substr(7, 2), 10)   // rest
                ];
            
                var str = '';
                if (n[0] !== 0) {
                    str += (n[0] < 20) ? a[n[0]] : b[Math.floor(n[0] / 10)] + ' ' + a[n[0] % 10];
                    str += ' crore ';
                }
                if (n[1] !== 0) {
                    str += (n[1] < 20) ? a[n[1]] : b[Math.floor(n[1] / 10)] + ' ' + a[n[1] % 10];
                    str += ' lakh ';
                }
                if (n[2] !== 0) {
                    str += (n[2] < 20) ? a[n[2]] : b[Math.floor(n[2] / 10)] + ' ' + a[n[2] % 10];
                    str += ' thousand ';
                }
                if (n[3] !== 0) {
                    str += a[n[3]] + ' hundred ';
                }
                if (n[4] !== 0) {
                    if (str !== '') str += 'and ';
                    str += (n[4] < 20) ? a[n[4]] : b[Math.floor(n[4] / 10)] + ' ' + a[n[4] % 10];
                    str += ' ';
                }
                str = str.replace(/\s+/g, ' ').trim();
                return str.charAt(0).toUpperCase() + str.slice(1);
            }
            
            function getTableData(tableId) {
                const table = document.getElementById(tableId);
                const rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
                const data = [];
                let slNo = 1;
            
                for (let row of rows) {
                    const itemSelect = row.cells[1].querySelector("select");
                    const rowData = {
                        sl_no: slNo++,
                        item: itemSelect ? itemSelect.value : "",
                        description: row.cells[2].querySelector("input")?.value || "",
                        req_by_date: row.cells[3].querySelector("input")?.value || "",
                        quantity: row.cells[4].querySelector("input")?.value || "",
                        uom: row.cells[5].querySelector("input")?.value || "",
                        unit_rate: row.cells[6].querySelector("input")?.value || "",
                        tds: row.cells[7].querySelector("input")?.value || "",
                        discount: row.cells[8].querySelector("input")?.value || "",
                        value: row.cells[9].querySelector("input")?.value || "",
                        sgst: row.cells[10].querySelector("input")?.value || "",
                        cgst: row.cells[11].querySelector("input")?.value || "",
                        igst: row.cells[12].querySelector("input")?.value || "",
                        amount: row.cells[13].querySelector("input")?.value || ""
                    };
                    data.push(rowData);
                }
            
                return data;
            }


            
            // --- Save SO function ---
            window.saveSO = async function(event) {
                event.preventDefault();
                Swal.fire({
                    title: 'Please wait...',
                    text: 'Saving Purchase Order...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                
                calculateAllTotals();
            
                // Collect form data
                const formData = {
                    
                    sOrderNo: document.getElementById('sOrderNo').value,
                    sOrderDate: document.getElementById('sOrderDate').value,
                    quotationNo2: document.getElementById('quotationSelect').selectedOptions[0].text === 'Select Quotation' 
                        ? null 
                        : document.getElementById('quotationSelect').selectedOptions[0].text,
                    quotationId: document.getElementById('quotationSelect').value,
                    quotationDate: document.getElementById('quotationDate').value,
                    billAddress: document.getElementById('billAddress').value,
                    shipAddress: document.getElementById('shipAddress').value,
                
                    soCompanyId: document.getElementById('soCompanyId').value,
                    soCompanyName: document.getElementById('soCompanyName').value,
                
                    soCompanyAddress: document.getElementById('soCompanyAddress').value,
                    soCompanyGSTN: document.getElementById('soCompanyGSTN').value,
                    soCompanyPhone: document.getElementById('soCompanyPhone').value,
                    soCompanyEmail: document.getElementById('soCompanyEmail').value,
                
                    custRefNo: document.getElementById('custRefNo').value,
                    
                    rfqNo: document.getElementById('rfqNo').value,
                    rfqDate: document.getElementById('rfqDate').value,
                    projectDescription: document.getElementById('projectDescription').value,
                    deliveryTerms: document.getElementById('deliveryTerms').value,
                    additionalCharges: document.getElementById('additionalCharges').value,
                    note: document.getElementById('note').value,
                
                    tableProducts: getTableData("productTable"),
                    inr_in_words: document.getElementById('inr_in_words').value,
                    totalAmount: document.getElementById('totalAmount').value,
                    sgstA: document.getElementById('sgstA').value,
                    cgstA: document.getElementById('cgstA').value,
                    IgstA: document.getElementById('IgstA').value,
                    roundUp: document.getElementById('roundUp').value,
                    grandTotal: document.getElementById('grandTotal').value
                };

            
                // Debug log
                console.log("[saveSO] FormData to send:", formData);
            
                try {
                    const response = await fetch("{{ route('superadmin.purchase.order.store') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')
                                .getAttribute('content')
                        },
                        body: JSON.stringify(formData)
                    });
                    
                    const data = await response.json();
                    console.log("[saveSO] Response:", data);
            
                    Swal.close();
            
                    if (data.message && data.message.includes('Purchase Order saved')) {
                        Swal.fire('Success!', data.message, 'success').then(() =>
                            window.location.href = "{{ url('superadmin/purchaseorder') }}"
                        );
                    } else {
                        Swal.fire('Error!', data.message || data.error ||
                            'Something went wrong.', 'error');
                    }
                } catch (err) {
                    Swal.close();
                    Swal.fire('Error!', 'Failed to save purchase order.', 'error');
                    console.error("[saveSO] Exception:", err);
                }
            }


            // --- Make the form submit use saveSO ---
            document.getElementById('soForm').addEventListener('submit', window.saveSO);

            // Calculate totals initially
            calculateAllTotals();

        });
        
        function initializeItemSelects() {
            $('.item-select').each(function () {
                const $this = $(this);
        
                // Initialize only if not already initialized
                if (!$this.hasClass("select2-hidden-accessible")) {
                    $this.select2({
                        dropdownParent: $('#soForm'),
                        width: 'resolve',
                        placeholder: "Select Item",
                        allowClear: true
                    });
                }
            });
        }


        $(document).ready(function () {
            initializeItemSelects();
        });
      
        function formatDate(dateString) {
            if (!dateString) return "";
            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // months are 0-indexed
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
    </script>

@endsection