@extends('layouts.dashboard.superadminapp')

@section('title', 'Quotation')

@section('styles')
<link rel="stylesheet" href="{{ asset('css/modern-form-pattern.css') }}">
<style>
    /* Toast Notification */
    #toastContainer {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
    }

    .toast {
        background: white;
        border-radius: 8px;
        padding: 1rem 1.25rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-width: 300px;
        animation: slideIn 0.3s ease;
    }

    .toast.success {
        border-left: 4px solid #10b981;
    }

    .toast.error {
        border-left: 4px solid #ef4444;
    }

    .toast i {
        font-size: 1.25rem;
    }

    .toast.success i {
        color: #10b981;
    }

    .toast.error i {
        color: #ef4444;
    }

    @keyframes slideIn {
        from {
            transform: translateX(400px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    input[type="text"], input[type="number"] {
        min-width: 80px;
    }
    select {
        min-width: 180px;
    }
</style>
@endsection

@section('content')
<div class="container-fluid theme-teal">

    <!-- Toast Container -->
    <div id="toastContainer"></div>

    <!-- Modern Page Header -->
    <div class="modern-page-header">
        <div class="header-left">
            <div class="icon-wrapper">
                <i class="fas fa-file-invoice"></i>
            </div>
            <div class="header-title">
                <h1>Create Purchase Quotation</h1>
                <div class="header-subtitle">Purchase Quotation Registration Form</div>
            </div>
        </div>
        <div class="datetime-display">
            <div class="date-box">
                <i class="far fa-calendar-alt"></i>
                <span id="day">{{ now()->format('l') }}</span>,
                <span id="daynum">{{ now()->format('d') }}</span>
                <span id="month">{{ now()->format('F') }}</span>
                <span id="year">{{ now()->format('Y') }}</span>
            </div>
            <div class="time-box">
                <i class="far fa-clock"></i>
                <span class="display-time"></span>
            </div>
        </div>
    </div>

<form class="quotation-page-content" id="quotationContent" method="POST"
    action="{{ route('superadmin.purchasebom.quotations.store') }}" enctype="multipart/form-data">
    @csrf

    <!-- Vendor Information Section -->
    <div class="section-card">
        <div class="section-header">
            <i class="fas fa-truck"></i>
            <h2>Vendor Information</h2>
        </div>

        <div class="section-body">

            <!-- RFQ + Vendor -->
            <div class="row form-row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">RFQ No</label>

                    @if(isset($quotation))
                        <input type="text" class="form-control" value="{{ $quotation->rfq_no }}" readonly>
                        <input type="hidden" name="rfq_no" value="{{ $quotation->rfq_no }}">
                    @else
                        <select name="rfq_no" id="rfqNo" class="form-control" >
                            <option value="">Select RFQ</option>
                            @foreach ($unassignedRfqs as $rfq)
                                <option value="{{ $rfq->id }}"
                                    data-rfq='@json($rfq)'>
                                    {{ $rfq->rfq_no }}
                                </option>
                            @endforeach
                        </select>
                    @endif
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Vendor Name <span class="required-star">*</span></label>
                    <input type="text" id="vendorName" name="vendor_name" class="form-control"
                        value="{{ old('vendor_name', $quotation->vendor_name ?? '') }}" required>

                    <input type="hidden" id="vendorId" name="vendor_id"
                        value="{{ old('vendor_id', $quotation->vendor_id ?? '') }}">
                </div>
            </div>

            <!-- Address + RFQ Date -->
            <div class="row form-row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Address</label>
                    <textarea name="address" id="address" rows="2" class="form-control">{{ old('address', $quotation->address ?? '') }}</textarea>
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">RFQ Date</label>
                    <input type="date" name="rfq_date" id="rfqDate" class="form-control"
                        value="{{ old('rfq_date', $quotation->rfq_date ?? '') }}">
                </div>
            </div>

            <!-- GST + Quotation No -->
            <div class="row form-row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">GST</label>
                    <input type="text" name="gst" id="gst" class="form-control"
                        value="{{ old('gst', $quotation->gst ?? '') }}">
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Quotation ID <span class="required-star">*</span></label>
                    <input type="text" name="quotation_no" id="quotationNo" class="form-control"
                        value="{{ old('quotation_no', $quotation->quotation_no ?? $newQuotationNo ?? '') }}" readonly required>
                </div>
            </div>

            <!-- Vendor Ref + File Upload -->
            <div class="row form-row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Vendor Reference No</label>
                    <input type="text" name="vendor_reference_no" id="vendorReferenceNo" class="form-control"
                        value="{{ old('vendor_reference_no', $quotation->vendor_reference_no ?? '') }}">
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Vendor Quotations</label>
                    <input type="file" name="vendorqtFiles[]" multiple class="form-control" accept=".pdf,image/*">
                </div>
            </div>

            <!-- Phone + Quotation Date -->
            <div class="row form-row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Contact Number</label>
                    <input type="tel" name="phone" id="phone" class="form-control"
                        value="{{ old('phone', $quotation->phone ?? '') }}">
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Quotation Date <span class="required-star">*</span></label>
                    <input type="date" name="quotation_date" id="quotationDate" class="form-control"
                        value="{{ old('quotation_date', $quotation->quotation_date ?? date('Y-m-d')) }}" required>
                </div>
            </div>

            <!-- Email + Delivery Terms -->
            <div class="row form-row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" id="email" class="form-control"
                        value="{{ old('email', $quotation->email ?? '') }}">
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Delivery Terms</label>
                    <input type="text" name="delivery_terms" id="deliveryTerms" class="form-control"
                        value="{{ old('delivery_terms', $quotation->delivery_terms ?? '') }}">
                </div>
            </div>

            <!-- Hidden Quantity -->
            <div class="row form-row d-none">
                <div class="col-md-6">
                    <input type="number" name="quantity" value="{{ old('quantity', $quotation->quantity ?? '') }}">
                </div>
                <div class="col-md-6">
                    <input type="text" name="quantity_uom" value="{{ old('quantity_uom', $quotation->quantity_uom ?? '') }}">
                </div>
            </div>

            <!-- Notes + Description -->
            <div class="row form-row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Note</label>
                    <textarea name="note" id="note" class="form-control">{{ old('note', $quotation->note ?? '') }}</textarea>
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Description</label>
                    <textarea name="description"  id="description" class="form-control">{{ old('description', $quotation->description ?? '') }}</textarea>
                </div>
            </div>

            <!-- Additional Charges -->
            <div class="row form-row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Additional Charges</label>
                    <input type="number" step="0.01" name="additional_charges" id="additionalCharges"
                        class="form-control"
                        value="{{ old('additional_charges', $quotation->additional_charges ?? '0.00') }}">
                </div>
            </div>

        </div>
    </div>
    <!-- Section: Quotation Items -->
<div class="section-card">
    <div class="section-header success">
        <i class="fas fa-boxes"></i>
        <h2>Quotation Items</h2>
    </div>

    <div class="section-body">
        <div class="table-responsive">
            <table id="quotationItemsTable" class="table table-bordered table-sm">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Item</th>
                        <th>Description</th>
                        <th>Qty</th>
                        <th>UOM</th>
                        <th width="120">Lead Time</th>
                        <th width="120">Unit Rate</th>
                        <th width="90">Discount %</th>
                        <th width="90">TDS %</th>
                        <th width="90">SGST %</th>
                        <th width="90">CGST %</th>
                        <th width="90">IGST %</th>
                        <th width="120">Amount</th>
                        <th width="120">Total</th>
                        <th width="50"></th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td class="text-center">1</td>

                        <!-- Item -->
                        <td>
                            <select name="stock_item_id[]" class="form-control item-select">
                                <option value="">Select Item</option>
                                @foreach ($stock_items as $item)
                                    <option value="{{ $item->id }}">{{ $item->item_name }}</option>
                                @endforeach
                            </select>
                        </td>

                        <!-- Description -->
                        <td>
                            <input type="text" name="description[]" class="form-control" placeholder="Description">
                        </td>

                        <!-- Quantity -->
                        <td>
                            <input type="number" name="quantity[]" class="form-control qty" min="1">
                        </td>

                        <!-- UOM -->
                        <td>
                            <input type="text" name="uom[]" class="form-control">
                        </td>

                        <!-- Lead Time -->
                        <td>
                            <input type="text" name="supply_lead_time[]" class="form-control" placeholder="Days">
                        </td>

                        <!-- Unit Rate -->
                        <td>
                            <input type="number" step="0.01" name="unit_rate[]" class="form-control rate">
                        </td>

                        <!-- Discount -->
                        <td>
                            <input type="number" step="0.01" name="discount[]" class="form-control discount">
                        </td>

                        <!-- TDS -->
                        <td>
                            <input type="number" step="0.01" name="tds[]" class="form-control tds">
                        </td>

                        <!-- SGST -->
                        <td>
                            <input type="number" step="0.01" name="sgst[]" class="form-control sgst">
                        </td>

                        <!-- CGST -->
                        <td>
                            <input type="number" step="0.01" name="cgst[]" class="form-control cgst">
                        </td>

                        <!-- IGST -->
                        <td>
                            <input type="number" step="0.01" name="igst[]" class="form-control igst">
                        </td>

                        <!-- Amount -->
                        <td>
                            <input type="number" step="0.01" name="amount[]" class="form-control amount" readonly>
                        </td>

                        <!-- Total -->
                        <td>
                            <input type="number" step="0.01" name="value[]" class="form-control total" readonly>
                        </td>

                        <!-- Delete -->
                        <td class="text-center">
                            <button type="button" class="btn btn-danger btn-sm" onclick="deleteRow(this)">
                                <i class="fa fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <button type="button" class="btn btn-primary mt-3" onclick="addQuotationRow()">
            <i class="fa fa-plus"></i> Add Row
        </button>
    </div>
</div>

<!-- Section: File Attachments -->
<div class="section-card">
    <div class="section-header danger">
        <i class="fas fa-paperclip"></i>
        <h2>File Attachments</h2>
    </div>

    <div class="section-body">
        <div class="row form-row">
            <div class="col-md-12 mb-3">
                <label class="form-label">Annexure Files</label>

                <!-- File Input -->
                <input 
                    type="file" 
                    id="annexureFiles" 
                    name="annexureFiles[]" 
                    class="form-control" 
                    multiple 
                    accept=".pdf,image/*"
                >

                <small class="text-muted">
                    Accepted formats: PDF, JPG, PNG
                </small>

                <!-- Preview (New Uploads) -->
                <div id="annexureFiles_preview" class="mt-2"></div>

                <!-- Existing Files (Edit Mode) -->
                @if(isset($quotation) && $quotation->files->count())
                    <div class="mt-3">
                        <label class="form-label">Uploaded Files</label>

                        <div class="row">
                            @foreach($quotation->files as $file)
                                <div class="col-md-4 mb-3" id="file-{{ $file->id }}">
                                    
                                    <div class="card p-2">

                                        {{-- Image Preview --}}
                                        @if(Str::endsWith($file->file_path, ['.jpg', '.jpeg', '.png']))
                                            <img 
                                                src="{{ asset('storage/'.$file->file_path) }}" 
                                                class="img-thumbnail mb-2"
                                                style="max-height:120px;"
                                            >
                                        @else
                                            {{-- PDF / Other --}}
                                            <a 
                                                href="{{ asset('storage/'.$file->file_path) }}" 
                                                target="_blank"
                                                class="d-block mb-2 text-primary"
                                            >
                                                📄 {{ $file->file_name }}
                                            </a>
                                        @endif

                                        <!-- Delete Button -->
                                        <button 
                                            type="button" 
                                            class="btn btn-sm btn-danger"
                                            onclick="deleteFile({{ $file->id }})"
                                        >
                                            <i class="fa fa-trash"></i> Delete
                                        </button>

                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

            </div>
        </div>
    </div>
</div>
    <!-- Submit -->
    <div class="text-end mt-3">
        <button type="submit" class="btn btn-primary">Save Quotation</button>
    </div>
</form>






</div>
@endsection

@push('scripts')
<script>

function addQuotationRow() {
    const tableBody = document.querySelector("#quotationItemsTable tbody");
    const firstRow = tableBody.querySelector("tr");

    if (!firstRow) return;

    const newRow = firstRow.cloneNode(true);

    newRow.querySelectorAll('input, select').forEach(input => {
        input.value = "";
    });

    tableBody.appendChild(newRow);

    updateSerialNumbers();
    initializeItemSelects();
}

document.addEventListener('input', function (e) {
    if (e.target.closest('#quotationItemsTable')) {
        calculateRow(e.target.closest('tr'));
    }
});

function calculateRow(row) {
    let qty = parseFloat(row.querySelector('.qty')?.value) || 0;
    let rate = parseFloat(row.querySelector('.rate')?.value) || 0;
    let discount = parseFloat(row.querySelector('.discount')?.value) || 0;
    let tds = parseFloat(row.querySelector('.tds')?.value) || 0;
    let sgst = parseFloat(row.querySelector('.sgst')?.value) || 0;
    let cgst = parseFloat(row.querySelector('.cgst')?.value) || 0;
    let igst = parseFloat(row.querySelector('.igst')?.value) || 0;

    let amount = qty * rate;

    // Discount
    let discountAmount = amount * (discount / 100);
    let afterDiscount = amount - discountAmount;

    // Tax
    let taxPercent = sgst + cgst + igst;
    let taxAmount = afterDiscount * (taxPercent / 100);

    // TDS
    let tdsAmount = afterDiscount * (tds / 100);

    let total = afterDiscount + taxAmount - tdsAmount;

    row.querySelector('.amount').value = amount.toFixed(2);
    row.querySelector('.total').value = total.toFixed(2);
}


document.getElementById('annexureFiles').addEventListener('change', function (e) {
    const preview = document.getElementById('annexureFiles_preview');
    preview.innerHTML = "";

    Array.from(e.target.files).forEach(file => {

        let col = document.createElement('div');
        col.classList.add('col-md-3', 'mb-2');

        let card = document.createElement('div');
        card.classList.add('card', 'p-2');

        if (file.type.startsWith('image/')) {
            let img = document.createElement('img');
            img.src = URL.createObjectURL(file);
            img.style.maxHeight = "100px";
            img.classList.add('img-thumbnail');
            card.appendChild(img);
        } else {
            let link = document.createElement('div');
            link.innerHTML = "📄 " + file.name;
            card.appendChild(link);
        }

        col.appendChild(card);
        preview.appendChild(col);
    });
});






function updateSerialNumbers() {
    document.querySelectorAll("#quotationItemsTable tbody tr").forEach((row, index) => {
        row.cells[0].innerText = index + 1;
    });
}


    // Dynamic Date/Time Update
    function updateDateTime() {
        const now = new Date();
        const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

        document.getElementById('day').textContent = days[now.getDay()];
        document.getElementById('daynum').textContent = now.getDate();
        document.getElementById('month').textContent = months[now.getMonth()];
        document.getElementById('year').textContent = now.getFullYear();

        const timeStr = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
        document.querySelector('.display-time').textContent = timeStr;
    }
    updateDateTime();
    setInterval(updateDateTime, 1000);

    // Toast Notification Function
    function showToast(message, type = 'success') {
        const container = document.getElementById('toastContainer');
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;

        const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
        toast.innerHTML = `
            <i class="fas ${icon}"></i>
            <span>${message}</span>
        `;

        container.appendChild(toast);

        setTimeout(() => {
            toast.style.animation = 'slideOut 0.3s ease';
            setTimeout(() => toast.remove(), 300);
        }, 5000);
    }

    // Show session messages as toasts
    @if (session('success'))
        showToast("{{ session('success') }}", 'success');
    @endif

    @if (session('error'))
        showToast("{{ session('error') }}", 'error');
    @endif

    @if ($errors->any())
        @foreach ($errors->all() as $error)
            showToast("{{ $error }}", 'error');
        @endforeach
    @endif

    $(function() {
        // Autofill Quotation Date with today's date
        let today = new Date();
        let yyyy = today.getFullYear();
        let mm = String(today.getMonth() + 1).padStart(2, '0');
        let dd = String(today.getDate()).padStart(2, '0');
        let todayStr = `${yyyy}-${mm}-${dd}`;
        $('#quotationDate').val(todayStr);

        // 1. Auto-fill Quotation No
        $.get("{{ url('superadmin/purchase/max-quotation-id') }}", function(data) {
            $('#quotationNo').val(data.newQuotationNo);
        });

        // 2. Phone validation
        $('#phone').on('input', function() {
            this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);
        });

        // 3. Toggle Dynamic Tables
        window.toggleTable = function(num) {
            $("#table" + num).toggleClass('hidden');
            $("#add-row-" + num).toggle();
        };

        // 4. Add/Remove Row and Calculation for RM Table
        let rmRow = 1,
            ccRow = 1,
            pcRow = 1;

        $('#addRowRM').click(function() {
            let idx = rmRow++;
            let options = `<option value="">Select Raw Material</option>`;
            @foreach($allRawMaterials as $rawMaterial)
            options += `<option value="{{ $rawMaterial->id }}" data-density="{{ $rawMaterial->density }}">{{ $rawMaterial->rm_grade }}</option>`;
            @endforeach
            $('#rm-tbody').append(`
        <tr>
            <td>${idx+1}</td>
            <td><select name="raw_material[${idx}][material_id]" class="rm-material form-control">
                    ${options}
                </select>
                <input type="hidden" name="raw_material[${idx}][density]"></td>
            <td><input type="number" name="raw_material[${idx}][rate]" class="rm-rate" placeholder="Rate" step="0.01"></td>
            <td><input type="number" name="raw_material[${idx}][scrap_rate]" class="rm-scrap-rate" placeholder="Scrap Rate" step="0.01"></td>
            <td><input type="number" name="raw_material[${idx}][finish_weight]" class="rm-finish-weight" placeholder="Finish Weight" step="0.01"></td>
            <td>
                <select name="raw_material[${idx}][type]">
                    <option value="" disabled selected>Type</option>
                    <option value="Rod">Rod</option>
                    <option value="Plate">Plate</option>
                    <option value="Pipe">Pipe</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td><input type="number" name="raw_material[${idx}][quantity]" class="rm-quantity" placeholder="Quantity" min="1"></td>
            <td><input type="number" name="raw_material[${idx}][size1]" placeholder="Size 1"></td>
            <td><input type="number" name="raw_material[${idx}][size2]" placeholder="Size 2"></td>
            <td><input type="number" name="raw_material[${idx}][size3]" placeholder="Size 3"></td>
            <td><input type="text" name="raw_material[${idx}][rm_weight]" class="rm-weight" placeholder="RM Weight" readonly></td>
            <td><input type="number" name="raw_material[${idx}][rm_cost]" class="rm-cost" placeholder="RM Cost" step="0.01"></td>
            <td><input type="text" name="raw_material[${idx}][value]" class="rm-value" placeholder="Value" readonly></td>
            <td><button type="button" class="btn btn-danger btn-sm" onclick="deleteRow(this)"><i class="fa fa-trash"></i></button></td>
        </tr>`);
        });

        $('#addRowCC').click(function() {
            let idx = ccRow++;
            $('#cc-tbody').append(`
        <tr>
            <td>${idx+1}</td>
            <td>
                <input list="conversionCost-options" name="conversion_cost[${idx}][desc]" placeholder="Select an option">
            </td>
            <td><input type="number" name="conversion_cost[${idx}][quantity]" class="cc-quantity" placeholder="Quantity" min="1"></td>
            <td><input type="text" name="conversion_cost[${idx}][unit]" placeholder="Unit"></td>
            <td><input type="number" name="conversion_cost[${idx}][rate]" class="cc-rate" placeholder="Rate" min="0" step="0.01"></td>
            <td><input type="text" name="conversion_cost[${idx}][value]" class="cc-value" placeholder="Value" readonly></td>
            <td><button type="button" class="btn btn-danger btn-sm" onclick="deleteRow(this)"><i class="fa fa-trash"></i></button></td>
        </tr>`);
        });

        $('#addRowPC').click(function() {
            let idx = pcRow++;
            $('#pc-tbody').append(`
        <tr>
            <td>${idx+1}</td>
            <td><input type="text" name="packing[${idx}][desc]" placeholder="Description"></td>
            <td><input type="number" name="packing[${idx}][quantity]" class="pc-quantity" placeholder="Quantity" min="1"></td>
            <td><input type="text" name="packing[${idx}][unit]" placeholder="Unit"></td>
            <td><input type="number" name="packing[${idx}][rate]" class="pc-rate" placeholder="Rate" min="0" step="0.01"></td>
            <td><input type="text" name="packing[${idx}][value]" class="pc-value" placeholder="Value" readonly></td>
            <td><button type="button" class="btn btn-danger btn-sm" onclick="deleteRow(this)"><i class="fa fa-trash"></i></button></td>
        </tr>`);
        });

        // 5. Remove Row
        window.deleteRow = function(btn) {
            $(btn).closest('tr').remove();
            calculateTotals();
        };

        // 6. Auto-value calculation for tables
        $(document).on('input', '.rm-rate, .rm-quantity, .rm-cost', function() {
            $(this).closest('tr').find('.rm-value').val(
                (
                    (parseFloat($(this).closest('tr').find('.rm-quantity').val()) || 0) *
                    (parseFloat($(this).closest('tr').find('.rm-cost').val()) || 0)
                ).toFixed(2)
            );
            calculateTotals();
        });

        $(document).on('input', '.cc-rate, .cc-quantity', function() {
            $(this).closest('tr').find('.cc-value').val(
                ((parseFloat($(this).closest('tr').find('.cc-rate').val()) || 0) *
                    (parseFloat($(this).closest('tr').find('.cc-quantity').val()) || 0)).toFixed(2)
            );
            calculateTotals();
        });

        $(document).on('input', '.pc-rate, .pc-quantity', function() {
            $(this).closest('tr').find('.pc-value').val(
                ((parseFloat($(this).closest('tr').find('.pc-rate').val()) || 0) *
                    (parseFloat($(this).closest('tr').find('.pc-quantity').val()) || 0)).toFixed(2)
            );
            calculateTotals();
        });

        // 7. Totals calculation (including discount)
        window.calculateTotals = function() {
            let subtotal = 0;
            $('.rm-value, .cc-value, .pc-value').each(function() {
                subtotal += parseFloat($(this).val()) || 0;
            });
            $('#totalAmount').val(subtotal.toFixed(2));
            let discount = parseFloat($('#qt-discount').val()) || 0;
            let afterDiscount = subtotal - (subtotal * discount / 100);
            let roundUp = Math.round(afterDiscount) - afterDiscount;
            $('#roundUp').val(roundUp.toFixed(2));
            let grandTotal = afterDiscount + roundUp;
            $('#grandTotal').val(grandTotal.toFixed(2));
            $('#GT-in-letters').val(convertNumberToWords(Math.round(grandTotal)) + ' Rupees');
        };

        // Number to words (Indian system)
        function convertNumberToWords(amount) {
            var words = new Array();
            words[0] = '';
            words[1] = 'One';
            words[2] = 'Two';
            words[3] = 'Three';
            words[4] = 'Four';
            words[5] = 'Five';
            words[6] = 'Six';
            words[7] = 'Seven';
            words[8] = 'Eight';
            words[9] = 'Nine';
            words[10] = 'Ten';
            words[11] = 'Eleven';
            words[12] = 'Twelve';
            words[13] = 'Thirteen';
            words[14] = 'Fourteen';
            words[15] = 'Fifteen';
            words[16] = 'Sixteen';
            words[17] = 'Seventeen';
            words[18] = 'Eighteen';
            words[19] = 'Nineteen';
            words[20] = 'Twenty';
            words[30] = 'Thirty';
            words[40] = 'Forty';
            words[50] = 'Fifty';
            words[60] = 'Sixty';
            words[70] = 'Seventy';
            words[80] = 'Eighty';
            words[90] = 'Ninety';
            if (amount == 0) return 'Zero';
            if (amount > 999999999) return 'Overflow';
            var crore = Math.floor(amount / 10000000);
            amount -= crore * 10000000;
            var lakh = Math.floor(amount / 100000);
            amount -= lakh * 100000;
            var thousand = Math.floor(amount / 1000);
            amount -= thousand * 1000;
            var hundred = Math.floor(amount / 100);
            amount -= hundred * 100;
            var ten = Math.floor(amount / 10);
            var one = amount % 10;
            var str = '';
            if (crore > 0) str += convertNumberToWords(crore) + ' Crore ';
            if (lakh > 0) str += convertNumberToWords(lakh) + ' Lakh ';
            if (thousand > 0) str += convertNumberToWords(thousand) + ' Thousand ';
            if (hundred > 0) str += convertNumberToWords(hundred) + ' Hundred ';
            if (ten > 1) str += words[ten * 10] + ' ';
            if (ten == 1) str += words[ten * 10 + one] + ' ';
            else if (one > 0) str += words[one] + ' ';
            return str.trim();
        }

        // Re-calc totals on any relevant input change
        $(document).on('input', '.rm-value, .cc-value, .pc-value, #qt-discount', calculateTotals);
    });

    // RFQ selection auto-fill
    $('#rfqNo').on('change', function() {
        let rfqNo = $(this).val();
        //alert("inside ref");
        if (!rfqNo) {
            $('#vendorName, #address, #rfqDate, #gst, #vendorReferenceNo, #phone, #email, #deliveryTerms, #note, #description').val('');
            return;
        }
        $.get("{{ url('superadmin/purchase/getrfqdetails') }}/" + rfqNo, function(resp) {
            console.log('RFQ AJAX response:', resp);
            if (resp.success) {
                let rfq = resp.rfq;
                let customer = resp.vendor || {};
                $('#vendorName').val(customer.company || '');
                $('#address').val(customer.billing_address || '');
                if (rfq.rfq_date) {
                    let d = new Date(rfq.rfq_date);
                    let formattedDate = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
                    $('#rfqDate').val(formattedDate);
                }
                $('#gst').val(customer.gstno || '');
                $('#vendorReferenceNo').val(rfq.drawing_no || '');
                $('#phone').val(customer.mobile || '');
                $('#email').val(customer.email || '');
                $('#deliveryTerms').val(rfq.delivery_terms || '');
                $('#note').val(note.drawing_no || '');
                $('#description').val(rfq.description || '');
            } else {
                console.log('AJAX call failed or returned no success.');
                $('#vendorName, #address, #rfqDate, #gst, #vendorReferenceNo, #phone,  #email, #deliveryTerms, #note, #description').val('');
            }
        }).fail(function(xhr, status, error) {
            console.log('AJAX ERROR:', error, xhr.responseText);
        });
    });

    function populateRawMaterialTable(rawMaterials) {
        console.log('populateRawMaterialTable called with:', rawMaterials);
        const tbody = $('#rm-tbody');
        tbody.empty();
        let options = `<option value="">Select Raw Material</option>`;
        @foreach($allRawMaterials as $rawMaterial)
        options += `<option value="{{ $rawMaterial->id }}" data-density="{{ $rawMaterial->density }}">{{ $rawMaterial->rm_grade }}</option>`;
        @endforeach

        if (!rawMaterials.length) {
            $('#checkbox1').prop('checked', false);
            $('#table1').addClass('hidden');
            $('#add-row-1').hide();
            return;
        }

        $('#checkbox1').prop('checked', true);
        $('#table1').removeClass('hidden');
        $('#add-row-1').show();

        rawMaterials.forEach(function(mat, idx) {
            console.log('Adding RM row:', mat);
            let dropdown = `<select name="raw_material[${idx}][material_id]" class="rm-material form-control">`;
            dropdown += options.replace(
                `value="${mat.material_id || mat.id || ''}"`,
                `value="${mat.material_id || mat.id || ''}" selected`
            );
            dropdown += `</select>`;
            tbody.append(`
        <tr>
            <td>${idx + 1}</td>
            <td>
                ${dropdown}
                <input type="hidden" name="raw_material[${idx}][density]" value="${mat.density || ''}">
            </td>
            <td><input type="number" name="raw_material[${idx}][rate]" class="rm-rate" placeholder="Rate" step="0.01"></td>
            <td><input type="number" name="raw_material[${idx}][scrap_rate]" class="rm-scrap-rate" placeholder="Scrap Rate" step="0.01"></td>
            <td><input type="number" name="raw_material[${idx}][finish_weight]" class="rm-finish-weight" placeholder="Finish Weight" step="0.01"></td>
            <td>
                <select name="raw_material[${idx}][type]" class="rm-type">
                    <option value="" disabled selected>Type</option>
                    <option value="Rod">Rod</option>
                    <option value="Plate">Plate</option>
                    <option value="Pipe">Pipe</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td><input type="number" name="raw_material[${idx}][quantity]" class="rm-quantity" placeholder="Quantity" min="1"></td>
            <td><input type="number" name="raw_material[${idx}][size1]" placeholder="Size 1"></td>
            <td><input type="number" name="raw_material[${idx}][size2]" placeholder="Size 2"></td>
            <td><input type="number" name="raw_material[${idx}][size3]" placeholder="Size 3"></td>
            <td><input type="text" name="raw_material[${idx}][rm_weight]" class="rm-weight" placeholder="RM Weight" readonly></td>
            <td><input type="number" name="raw_material[${idx}][rm_cost]" class="rm-cost" placeholder="RM Cost" step="0.01" readonly></td>
            <td><input type="text" name="raw_material[${idx}][value]" class="rm-value" placeholder="Value" readonly></td>
            <td><button type="button" class="btn btn-danger btn-sm" onclick="deleteRow(this)"><i class="fa fa-trash"></i></button></td>
        </tr>
        `);
        });
        console.log('RM Table rows after populate:', $('#rm-tbody').children().length);
        tbody.find('select.rm-type').each(function() {
            updateSizePlaceholders(this);
        });
    }

    // Placeholder Update for RM Type
    function updateSizePlaceholders(selectElement) {
        const row = $(selectElement).closest('tr');
        const size1Input = row.find('input[name$="[size1]"]')[0];
        const size2Input = row.find('input[name$="[size2]"]')[0];
        const size3Input = row.find('input[name$="[size3]"]')[0];
        const rmCostInput = row.find('input[name$="[rm_cost]"]')[0];

        const selectedType = $(selectElement).val();

        if (selectedType === 'Rod') {
            size1Input.placeholder = 'Rod Diameter';
            size2Input.placeholder = 'Rod Length';
            size3Input.placeholder = '';
            size1Input.readOnly = false;
            size2Input.readOnly = false;
            size3Input.readOnly = true;
            rmCostInput.readOnly = true;
        } else if (selectedType === 'Plate') {
            size1Input.placeholder = 'Plate Thickness';
            size2Input.placeholder = 'Plate Length';
            size3Input.placeholder = 'Plate Width';
            size1Input.readOnly = false;
            size2Input.readOnly = false;
            size3Input.readOnly = false;
            rmCostInput.readOnly = true;
        } else if (selectedType === 'Pipe') {
            size1Input.placeholder = 'Outer Diameter';
            size2Input.placeholder = 'Inner Diameter';
            size3Input.placeholder = 'Pipe Length';
            size1Input.readOnly = false;
            size2Input.readOnly = false;
            size3Input.readOnly = false;
            rmCostInput.readOnly = true;
        } else {
            size1Input.placeholder = 'Size 1';
            size2Input.placeholder = 'Size 2';
            size3Input.placeholder = 'Size 3';
            size1Input.readOnly = true;
            size2Input.readOnly = true;
            size3Input.readOnly = true;
            rmCostInput.readOnly = false;
        }
    }

    // Calculate RM Cost based on geometry
    function calculateRMCost(row) {
        row = $(row);
        const rawMaterial = row.find('input[name$="[material]"]').val() || '';
        const materialName = rawMaterial.split('-')[0].trim();
        const rmRate = parseFloat(row.find('input[name$="[rate]"]').val()) || 0;
        const scrapRate = parseFloat(row.find('input[name$="[scrap_rate]"]').val()) || 0;
        const finishWeight = parseFloat(row.find('input[name$="[finish_weight]"]').val()) || 0;
        const size1 = (parseFloat(row.find('input[name$="[size1]"]').val()) || 0);
        const size2 = (parseFloat(row.find('input[name$="[size2]"]').val()) || 0);
        const size3 = (parseFloat(row.find('input[name$="[size3]"]').val()) || 0);
        const rmType = row.find('select[name$="[type]"]').val();
        const rmCostInput = row.find('input[name$="[rm_cost]"]')[0];
        const rmWeightInput = row.find('input[name$="[rm_weight]"]')[0];
        const density = parseFloat(row.find('input[name$="[density]"]').val()) || 0;

        let rmWeight = 0,
            scrapWeight = 0,
            rmCost = 0;

        if (rmType === 'Rod') {
            rmWeight = 3.142 * Math.pow(size1 / 2, 2) * size2 * density;
            console.log(density,size2,size1,rmWeight);
            scrapWeight = rmWeight - finishWeight;
            if (rmWeight > 0) {
                rmCost = (rmWeight * rmRate) - (0.8 * (scrapWeight * scrapRate));
            }
            rmCostInput.value = isNaN(rmCost) ? "" : rmCost.toFixed(2);
            rmWeightInput.value = Number(rmWeight).toFixed(2);
        } else if (rmType === 'Plate') {
            rmWeight = size1 * size2 * size3 * density;
            scrapWeight = rmWeight - finishWeight;
            if (rmWeight > 0) {
                rmCost = (rmWeight * rmRate) - (0.8 * (scrapWeight * scrapRate));
            }
            rmCostInput.value = isNaN(rmCost) ? "" : rmCost.toFixed(2);
            rmWeightInput.value = Number(rmWeight).toFixed(2);
        } else if (rmType === 'Pipe') {
            rmWeight = (3.142 * Math.pow(size1 / 2, 2) * size3 -
                3.142 * Math.pow(size2 / 2, 2) * size3) * density;
            scrapWeight = rmWeight - finishWeight;
            if (rmWeight > 0) {
                rmCost = (rmWeight * rmRate) - (0.8 * (scrapWeight * scrapRate));
            }
            rmCostInput.value = isNaN(rmCost) ? "" : rmCost.toFixed(2);
            rmWeightInput.value = Number(rmWeight).toFixed(2);
        } else {
            rmCostInput.value = '';
            rmWeightInput.value = "";
        }
    }

    // Bind Events for RM calculations
    $(document).on('change', 'select[name^="raw_material"][name$="[type]"]', function() {
        updateSizePlaceholders(this);
    });

    $(document).on('input', `
        input[name^="raw_material"][name$="[rate]"],
        input[name^="raw_material"][name$="[scrap_rate]"],
        input[name^="raw_material"][name$="[finish_weight]"],
        input[name^="raw_material"][name$="[size1]"],
        input[name^="raw_material"][name$="[size2]"],
        input[name^="raw_material"][name$="[size3]"],
        select[name^="raw_material"][name$="[type]"],
        input[name^="raw_material"][name$="[material]"]
    `, function() {
        calculateRMCost($(this).closest('tr')[0]);
    });

    $(document).on('change', '.rm-material', function() {
        let density = $(this).find(':selected').data('density');
        console.log(density);
        $(this).closest('tr').find('input[name$="[density]"]').val(density);
        calculateRMCost($(this).closest('tr')[0]);
    });
</script>
@endpush