@extends('layouts.dashboard.superadminapp')

@section('title', 'Create Sales Quotation')

@section('styles')
<style>
    .section-card {
        border: none;
        border-radius: 0.5rem;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
        margin-bottom: 1.5rem;
    }
    .section-card .card-header {
        background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
        color: #fff;
        font-weight: 600;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem 0.5rem 0 0 !important;
        font-size: 0.9rem;
    }
    .section-card .card-header.bg-success-gradient {
        background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%);
    }
    .section-card .card-header.bg-info-gradient {
        background: linear-gradient(135deg, #36b9cc 0%, #258391 100%);
    }
    .section-card .card-header.bg-warning-gradient {
        background: linear-gradient(135deg, #f6c23e 0%, #dda20a 100%);
    }
    .form-group label {
        font-weight: 600;
        font-size: 0.85rem;
        color: #5a5c69;
        margin-bottom: 0.25rem;
    }
    .form-control, .form-control-sm {
        font-size: 0.85rem;
    }
    .required {
        color: #e74a3b;
    }
    .product-table {
        width: 100%;
        font-size: 0.8rem;
    }
    .product-table th {
        background-color: #f8f9fc;
        font-weight: 600;
        font-size: 0.75rem;
        text-align: center;
        padding: 0.5rem;
        white-space: nowrap;
    }
    .product-table td {
        padding: 0.35rem;
        vertical-align: middle;
    }
    .product-table input, .product-table select {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    .product-table .btn-sm {
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
    }
    .hidden {
        display: none;
    }
    .totals-section {
        background: #f8f9fc;
        border-radius: 0.5rem;
        padding: 1rem;
    }
    .totals-section .form-group {
        margin-bottom: 0.5rem;
    }
    .totals-section label {
        font-size: 0.8rem;
    }
    .totals-section input {
        text-align: right;
        font-weight: 600;
    }
    .checkbox-section {
        background: #f8f9fc;
        padding: 0.75rem 1rem;
        border-radius: 0.35rem;
        margin-bottom: 1rem;
    }
    .checkbox-section label {
        margin-bottom: 0;
        cursor: pointer;
    }
    .add-row-btn {
        margin-top: 0.5rem;
    }
</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 | Create Sales Quotation</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>

    <!-- Alerts -->
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            <strong>Please fix the following errors:</strong>
            <ul class="mb-0 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <form id="quotationForm" method="POST" action="{{ route('superadmin.salesbom.quotations.store') }}">
        @csrf

        <!-- Quotation & RFQ Information -->
        <div class="card section-card">
            <div class="card-header">
                <i class="fas fa-file-invoice mr-2"></i> Quotation & RFQ Information
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="quotationNo">Quotation No <span class="required">*</span></label>
                            <input type="text" class="form-control" id="quotationNo" name="quotation_no" readonly required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="quotationDate">Quotation Date <span class="required">*</span></label>
                            <input type="date" class="form-control" id="quotationDate" name="quotation_date" required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="rfqNo">RFQ No</label>
                            <select class="form-control selectpicker" id="rfqNo" name="rfq_no" data-live-search="true">
                                <option value="">Select RFQ No</option>
                                @foreach ($unassignedRfqs as $rfq)
                                    <option value="{{ $rfq->id }}">{{ $rfq->rfq_no }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="rfqDate">RFQ Date</label>
                            <input type="date" class="form-control" id="rfqDate" name="rfq_date">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Customer Information -->
        <div class="card section-card">
            <div class="card-header bg-success-gradient">
                <i class="fas fa-user mr-2"></i> Customer Information
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="customerName">Customer Name</label>
                            <input type="text" class="form-control" id="customerName" name="customer_name" placeholder="Customer Name">
                            <input type="hidden" id="customerId" name="customer_id">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="custRefNo">Customer Reference No</label>
                            <input type="text" class="form-control" id="custRefNo" name="cust_ref_no" placeholder="Reference No">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="address">Address</label>
                            <textarea class="form-control" id="address" name="address" rows="2" placeholder="Customer Address"></textarea>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="gst">GST No</label>
                            <input type="text" class="form-control" id="gst" name="gst" placeholder="GST Number">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="phone">Contact Number</label>
                            <input type="tel" class="form-control" id="phone" name="phone" placeholder="10-digit number" maxlength="10">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Product Information -->
        <div class="card section-card">
            <div class="card-header bg-info-gradient">
                <i class="fas fa-box mr-2"></i> Product Information
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="productType">Product Type <span class="required">*</span></label>
                            <select class="form-control selectpicker" id="productType" name="product_type" data-live-search="true" required>
                                <option value="">Select Product</option>
                                @foreach($productTypes as $type)
                                    <option value="{{ $type->name }}">{{ $type->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="partNo">Part No</label>
                            <input type="text" class="form-control" id="partNo" name="part_no" placeholder="Part No">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="project-materialNo">Project/Material No</label>
                            <input type="text" class="form-control" id="project-materialNo" name="project_material_no" placeholder="Project Material No">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="drawingNo">Drawing No</label>
                            <input type="text" class="form-control" id="drawingNo" name="drawing_no" placeholder="Drawing No">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="drawingRev">Drawing Revision</label>
                            <input type="text" class="form-control" id="drawingRev" name="drawing_rev" placeholder="Revision">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="quantity">Quantity</label>
                            <input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="quantityUOM">Unit of Measurement</label>
                            <input type="text" class="form-control" id="quantityUOM" name="quantity_uom" placeholder="UOM">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="2" placeholder="Product Description"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cost Tables Section -->
        <div class="card section-card">
            <div class="card-header bg-warning-gradient">
                <i class="fas fa-calculator mr-2"></i> Cost Breakdown
            </div>
            <div class="card-body">
                <!-- Raw Material Charges -->
                <div class="checkbox-section">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="checkbox1" onclick="toggleTable(1)">
                        <label class="custom-control-label font-weight-bold" for="checkbox1">
                            <i class="fas fa-cubes mr-1"></i> Raw Material Charges
                        </label>
                    </div>
                </div>
                <div class="table-responsive mb-3">
                    <table id="table1" class="table table-bordered product-table hidden">
                        <thead>
                            <tr>
                                <th style="width:3%">#</th>
                                <th style="width:12%">Raw Material</th>
                                <th style="width:7%">Rate(₹/kg)</th>
                                <th style="width:7%">Scrap Rate</th>
                                <th style="width:7%">Finish Wt</th>
                                <th style="width:7%">RM Type</th>
                                <th style="width:5%">Qty</th>
                                <th style="width:7%">Size 1</th>
                                <th style="width:7%">Size 2</th>
                                <th style="width:7%">Size 3</th>
                                <th style="width:7%">RM Weight</th>
                                <th style="width:8%">RM Cost(₹)</th>
                                <th style="width:8%">Value(₹)</th>
                                <th style="width:4%"></th>
                            </tr>
                        </thead>
                        <tbody id="rm-tbody">
                            <tr>
                                <td class="text-center">1</td>
                                <td>
                                    <select name="raw_material[0][material_id]" class="form-control form-control-sm rm-material">
                                        <option value="">Select</option>
                                        @foreach ($allRawMaterials as $rawMaterial)
                                            <option value="{{ $rawMaterial->id }}" data-density="{{ $rawMaterial->density }}">{{ $rawMaterial->rm_grade }}</option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" name="raw_material[0][density]">
                                </td>
                                <td><input type="number" name="raw_material[0][rate]" class="form-control form-control-sm rm-rate" step="0.01"></td>
                                <td><input type="number" name="raw_material[0][scrap_rate]" class="form-control form-control-sm rm-scrap-rate" step="0.01"></td>
                                <td><input type="number" name="raw_material[0][finish_weight]" class="form-control form-control-sm rm-finish-weight" step="0.01"></td>
                                <td>
                                    <select name="raw_material[0][type]" class="form-control form-control-sm rm-type">
                                        <option value="">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[0][quantity]" class="form-control form-control-sm rm-quantity" min="1"></td>
                                <td><input type="number" name="raw_material[0][size1]" class="form-control form-control-sm rm-size1"></td>
                                <td><input type="number" name="raw_material[0][size2]" class="form-control form-control-sm rm-size2"></td>
                                <td><input type="number" name="raw_material[0][size3]" class="form-control form-control-sm rm-size3"></td>
                                <td><input type="text" name="raw_material[0][rm_weight]" class="form-control form-control-sm rm-weight" readonly></td>
                                <td><input type="number" name="raw_material[0][rm_cost]" class="form-control form-control-sm rm-cost" step="0.01"></td>
                                <td><input type="text" name="raw_material[0][value]" class="form-control form-control-sm rm-value" readonly></td>
                                <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>
                <div id="add-row-1" class="add-row-btn" style="display: none;">
                    <button type="button" class="btn btn-outline-primary btn-sm" id="addRowRM">
                        <i class="fas fa-plus mr-1"></i> Add Raw Material Row
                    </button>
                </div>

                <hr class="my-4">

                <!-- Conversion Cost -->
                <div class="checkbox-section">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="checkbox2" onclick="toggleTable(2)">
                        <label class="custom-control-label font-weight-bold" for="checkbox2">
                            <i class="fas fa-cogs mr-1"></i> Conversion Cost
                        </label>
                    </div>
                </div>
                <div class="table-responsive mb-3">
                    <table id="table2" class="table table-bordered product-table hidden">
                        <thead>
                            <tr>
                                <th style="width:5%">#</th>
                                <th style="width:30%">Description</th>
                                <th style="width:15%">Quantity</th>
                                <th style="width:15%">Unit</th>
                                <th style="width:15%">Rate(INR)</th>
                                <th style="width:15%">Value</th>
                                <th style="width:5%"></th>
                            </tr>
                        </thead>
                        <tbody id="cc-tbody">
                            <tr>
                                <td class="text-center">1</td>
                                <td>
                                    <input list="conversionCost-options" name="conversion_cost[0][desc]" class="form-control form-control-sm" placeholder="Select process">
                                    <datalist id="conversionCost-options">
                                        @foreach ($conversionCosts as $cost)
                                            <option value="{{ $cost }}"></option>
                                        @endforeach
                                    </datalist>
                                </td>
                                <td><input type="number" name="conversion_cost[0][quantity]" class="form-control form-control-sm cc-quantity" min="1"></td>
                                <td><input type="text" name="conversion_cost[0][unit]" class="form-control form-control-sm" placeholder="Unit"></td>
                                <td><input type="number" name="conversion_cost[0][rate]" class="form-control form-control-sm cc-rate" min="0" step="0.01"></td>
                                <td><input type="text" name="conversion_cost[0][value]" class="form-control form-control-sm cc-value" readonly></td>
                                <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>
                <div id="add-row-2" class="add-row-btn" style="display: none;">
                    <button type="button" class="btn btn-outline-primary btn-sm" id="addRowCC">
                        <i class="fas fa-plus mr-1"></i> Add Conversion Cost Row
                    </button>
                </div>

                <hr class="my-4">

                <!-- Packing Charges -->
                <div class="checkbox-section">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="checkbox3" onclick="toggleTable(3)">
                        <label class="custom-control-label font-weight-bold" for="checkbox3">
                            <i class="fas fa-box-open mr-1"></i> Packing Charges
                        </label>
                    </div>
                </div>
                <div class="table-responsive mb-3">
                    <table id="table3" class="table table-bordered product-table hidden">
                        <thead>
                            <tr>
                                <th style="width:5%">#</th>
                                <th style="width:30%">Description</th>
                                <th style="width:15%">Quantity</th>
                                <th style="width:15%">Unit</th>
                                <th style="width:15%">Rate(INR)</th>
                                <th style="width:15%">Value</th>
                                <th style="width:5%"></th>
                            </tr>
                        </thead>
                        <tbody id="pc-tbody">
                            <tr>
                                <td class="text-center">1</td>
                                <td><input type="text" name="packing[0][desc]" class="form-control form-control-sm" value="Packing cost"></td>
                                <td><input type="number" name="packing[0][quantity]" class="form-control form-control-sm pc-quantity" min="1"></td>
                                <td><input type="text" name="packing[0][unit]" class="form-control form-control-sm" placeholder="Unit"></td>
                                <td><input type="number" name="packing[0][rate]" class="form-control form-control-sm pc-rate" min="0" step="0.01"></td>
                                <td><input type="text" name="packing[0][value]" class="form-control form-control-sm pc-value" readonly></td>
                                <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>
                <div id="add-row-3" class="add-row-btn" style="display: none;">
                    <button type="button" class="btn btn-outline-primary btn-sm" id="addRowPC">
                        <i class="fas fa-plus mr-1"></i> Add Packing Charge Row
                    </button>
                </div>
            </div>
        </div>

        <!-- Totals & Note Section -->
        <div class="card section-card">
            <div class="card-header">
                <i class="fas fa-rupee-sign mr-2"></i> Summary & Totals
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="quoteNote">Note / Remarks</label>
                            <textarea name="note" id="quoteNote" class="form-control" rows="4" placeholder="Additional notes or remarks"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="GT-in-letters">Grand Total in Words (INR)</label>
                            <input type="text" class="form-control" id="GT-in-letters" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="totals-section">
                            <div class="form-group row align-items-center">
                                <label class="col-md-4 col-form-label">Sub Total</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" name="sub_total" id="totalAmount" readonly>
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="col-md-4 col-form-label">Discount (%)</label>
                                <div class="col-md-8">
                                    <input type="number" class="form-control" id="qt-discount" name="discount" step="0.01" oninput="calculateTotals()">
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="col-md-4 col-form-label">Round Up</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" id="roundUp" name="round_up" readonly>
                                </div>
                            </div>
                            <hr>
                            <div class="form-group row align-items-center mb-0">
                                <label class="col-md-4 col-form-label font-weight-bold text-primary">Grand Total</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control form-control-lg font-weight-bold text-primary" id="grandTotal" name="grand_total" readonly>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="card section-card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <a href="{{ route('superadmin.salesbom.quotation.quotationdetails') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left mr-1"></i> Back to List
                    </a>
                    <div>
                        <button type="reset" class="btn btn-outline-danger mr-2" onclick="resetForm()">
                            <i class="fas fa-undo mr-1"></i> Clear
                        </button>
                        <button type="submit" class="btn btn-success" id="submitBtn">
                            <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                            <span class="btn-text"><i class="fas fa-save mr-1"></i> Save Quotation</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Initialize selectpicker
    $('.selectpicker').selectpicker();

    // Set today's date for quotation date
    let today = new Date();
    let todayStr = today.toISOString().split('T')[0];
    $('#quotationDate').val(todayStr);

    // Fetch next quotation number
    $.get("{{ url('superadmin/sales/max-quotation-id') }}", function(data) {
        $('#quotationNo').val(data.newQuotationNo);
    });

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

    // Form submit with loading spinner
    $('#quotationForm').on('submit', function(e) {
        var $btn = $('#submitBtn');
        var $spinner = $btn.find('.spinner-border');
        var $text = $btn.find('.btn-text');

        $btn.prop('disabled', true);
        $spinner.removeClass('d-none');
        $text.html('Saving...');
    });

    // Row counters
    let rmRow = 1, ccRow = 1, pcRow = 1;

    // Add Row - Raw Material
    $('#addRowRM').click(function() {
        let idx = rmRow++;
        let options = '<option value="">Select</option>';
        @foreach($allRawMaterials as $rawMaterial)
        options += '<option value="{{ $rawMaterial->id }}" data-density="{{ $rawMaterial->density }}">{{ $rawMaterial->rm_grade }}</option>';
        @endforeach

        $('#rm-tbody').append(`
            <tr>
                <td class="text-center">${idx+1}</td>
                <td>
                    <select name="raw_material[${idx}][material_id]" class="form-control form-control-sm rm-material">
                        ${options}
                    </select>
                    <input type="hidden" name="raw_material[${idx}][density]">
                </td>
                <td><input type="number" name="raw_material[${idx}][rate]" class="form-control form-control-sm rm-rate" step="0.01"></td>
                <td><input type="number" name="raw_material[${idx}][scrap_rate]" class="form-control form-control-sm rm-scrap-rate" step="0.01"></td>
                <td><input type="number" name="raw_material[${idx}][finish_weight]" class="form-control form-control-sm rm-finish-weight" step="0.01"></td>
                <td>
                    <select name="raw_material[${idx}][type]" class="form-control form-control-sm rm-type">
                        <option value="">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="form-control form-control-sm rm-quantity" min="1"></td>
                <td><input type="number" name="raw_material[${idx}][size1]" class="form-control form-control-sm rm-size1"></td>
                <td><input type="number" name="raw_material[${idx}][size2]" class="form-control form-control-sm rm-size2"></td>
                <td><input type="number" name="raw_material[${idx}][size3]" class="form-control form-control-sm rm-size3"></td>
                <td><input type="text" name="raw_material[${idx}][rm_weight]" class="form-control form-control-sm rm-weight" readonly></td>
                <td><input type="number" name="raw_material[${idx}][rm_cost]" class="form-control form-control-sm rm-cost" step="0.01"></td>
                <td><input type="text" name="raw_material[${idx}][value]" class="form-control form-control-sm rm-value" readonly></td>
                <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>
        `);
    });

    // Add Row - Conversion Cost
    $('#addRowCC').click(function() {
        let idx = ccRow++;
        $('#cc-tbody').append(`
            <tr>
                <td class="text-center">${idx+1}</td>
                <td><input list="conversionCost-options" name="conversion_cost[${idx}][desc]" class="form-control form-control-sm" placeholder="Select process"></td>
                <td><input type="number" name="conversion_cost[${idx}][quantity]" class="form-control form-control-sm cc-quantity" min="1"></td>
                <td><input type="text" name="conversion_cost[${idx}][unit]" class="form-control form-control-sm" placeholder="Unit"></td>
                <td><input type="number" name="conversion_cost[${idx}][rate]" class="form-control form-control-sm cc-rate" min="0" step="0.01"></td>
                <td><input type="text" name="conversion_cost[${idx}][value]" class="form-control form-control-sm cc-value" readonly></td>
                <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>
        `);
    });

    // Add Row - Packing Charges
    $('#addRowPC').click(function() {
        let idx = pcRow++;
        $('#pc-tbody').append(`
            <tr>
                <td class="text-center">${idx+1}</td>
                <td><input type="text" name="packing[${idx}][desc]" class="form-control form-control-sm" placeholder="Description"></td>
                <td><input type="number" name="packing[${idx}][quantity]" class="form-control form-control-sm pc-quantity" min="1"></td>
                <td><input type="text" name="packing[${idx}][unit]" class="form-control form-control-sm" placeholder="Unit"></td>
                <td><input type="number" name="packing[${idx}][rate]" class="form-control form-control-sm pc-rate" min="0" step="0.01"></td>
                <td><input type="text" name="packing[${idx}][value]" class="form-control form-control-sm pc-value" readonly></td>
                <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>
        `);
    });

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

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

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

    // Raw Material type change - update placeholders
    $(document).on('change', '.rm-type', function() {
        updateSizePlaceholders(this);
    });

    // Raw Material selection - get density
    $(document).on('change', '.rm-material', function() {
        let density = $(this).find(':selected').data('density');
        $(this).closest('tr').find('input[name$="[density]"]').val(density);
        calculateRMCost($(this).closest('tr')[0]);
    });

    // Calculate RM cost on relevant input changes
    $(document).on('input', '.rm-rate, .rm-scrap-rate, .rm-finish-weight, .rm-size1, .rm-size2, .rm-size3', function() {
        calculateRMCost($(this).closest('tr')[0]);
    });

    $(document).on('change', '.rm-type', function() {
        calculateRMCost($(this).closest('tr')[0]);
    });

    // RFQ selection - populate fields
    $('#rfqNo').on('change', function() {
        let rfqNo = $(this).val();
        if (!rfqNo) {
            clearCustomerFields();
            return;
        }

        $.get("{{ url('superadmin/sales/rfq-details') }}/" + rfqNo, function(resp) {
            if (resp.success) {
                let rfq = resp.rfq;
                let customer = resp.customer || {};

                // Populate customer fields
                $('#customerName').val(customer.company || '');
                $('#customerId').val(customer.id || '');
                $('#address').val(customer.billing_address || customer.address || '');
                $('#gst').val(customer.gstno || '');
                $('#email').val(customer.email || '');
                $('#phone').val(customer.mobile || '');

                // Populate RFQ fields
                $('#rfqDate').val(rfq.rfq_date || '');
                $('#custRefNo').val(rfq.cus_ref_no || '');
                $('#partNo').val(rfq.part_no || '');
                $('#project-materialNo').val(rfq.project_material_no || '');
                $('#drawingNo').val(rfq.drawing_no || '');
                $('#drawingRev').val(rfq.drawing_rev || '');
                $('#quantity').val(rfq.quantity || '');
                $('#quantityUOM').val(rfq.uom || '');
                $('#description').val(rfq.description || '');
                $('#quoteNote').val(rfq.note || '');
                $('#productType').val(rfq.product_type || '').selectpicker('refresh');

                // Populate raw materials if available
                if (resp.raw_materials && resp.raw_materials.length > 0) {
                    populateRawMaterialTable(resp.raw_materials);
                }
            } else {
                clearCustomerFields();
            }
        }).fail(function() {
            clearCustomerFields();
        });
    });
});

// Toggle table visibility
function toggleTable(num) {
    $("#table" + num).toggleClass('hidden');
    $("#add-row-" + num).toggle();
}

// Delete row
function deleteRow(btn) {
    $(btn).closest('tr').remove();
    calculateTotals();
}

// Clear customer fields
function clearCustomerFields() {
    $('#customerName, #customerId, #address, #gst, #email, #phone').val('');
    $('#rfqDate, #custRefNo, #partNo, #project-materialNo, #drawingNo, #drawingRev, #quantity, #quantityUOM, #description, #quoteNote').val('');
}

// Calculate totals
function calculateTotals() {
    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(numberToWords(Math.round(grandTotal)) + ' Rupees Only');
}

// Update size placeholders based on RM type
function updateSizePlaceholders(selectElement) {
    let row = $(selectElement).closest('tr');
    let size1 = row.find('.rm-size1')[0];
    let size2 = row.find('.rm-size2')[0];
    let size3 = row.find('.rm-size3')[0];
    let rmCost = row.find('.rm-cost')[0];
    let type = $(selectElement).val();

    if (type === 'Rod') {
        size1.placeholder = 'Diameter';
        size2.placeholder = 'Length';
        size3.placeholder = '';
        size1.readOnly = false;
        size2.readOnly = false;
        size3.readOnly = true;
        rmCost.readOnly = true;
    } else if (type === 'Plate') {
        size1.placeholder = 'Thickness';
        size2.placeholder = 'Length';
        size3.placeholder = 'Width';
        size1.readOnly = false;
        size2.readOnly = false;
        size3.readOnly = false;
        rmCost.readOnly = true;
    } else if (type === 'Pipe') {
        size1.placeholder = 'Outer Dia';
        size2.placeholder = 'Inner Dia';
        size3.placeholder = 'Length';
        size1.readOnly = false;
        size2.readOnly = false;
        size3.readOnly = false;
        rmCost.readOnly = true;
    } else {
        size1.placeholder = 'Size 1';
        size2.placeholder = 'Size 2';
        size3.placeholder = 'Size 3';
        size1.readOnly = true;
        size2.readOnly = true;
        size3.readOnly = true;
        rmCost.readOnly = false;
    }
}

// Calculate RM Cost
function calculateRMCost(rowElement) {
    let row = $(rowElement);
    let rmRate = parseFloat(row.find('.rm-rate').val()) || 0;
    let scrapRate = parseFloat(row.find('.rm-scrap-rate').val()) || 0;
    let finishWeight = parseFloat(row.find('.rm-finish-weight').val()) || 0;
    let size1 = parseFloat(row.find('.rm-size1').val()) || 0;
    let size2 = parseFloat(row.find('.rm-size2').val()) || 0;
    let size3 = parseFloat(row.find('.rm-size3').val()) || 0;
    let rmType = row.find('.rm-type').val();
    let density = parseFloat(row.find('input[name$="[density]"]').val()) || 0;

    let rmWeight = 0, rmCost = 0;

    if (rmType === 'Rod') {
        rmWeight = 3.142 * Math.pow(size1 / 2, 2) * size2 * density;
    } else if (rmType === 'Plate') {
        rmWeight = size1 * size2 * size3 * density;
    } else if (rmType === 'Pipe') {
        rmWeight = (3.142 * Math.pow(size1 / 2, 2) * size3 - 3.142 * Math.pow(size2 / 2, 2) * size3) * density;
    }

    if (rmWeight > 0) {
        let scrapWeight = rmWeight - finishWeight;
        rmCost = (rmWeight * rmRate) - (0.8 * (scrapWeight * scrapRate));
    }

    row.find('.rm-weight').val(rmWeight > 0 ? rmWeight.toFixed(2) : '');
    row.find('.rm-cost').val(rmCost > 0 ? rmCost.toFixed(2) : '');

    // Trigger value calculation
    let quantity = parseFloat(row.find('.rm-quantity').val()) || 0;
    row.find('.rm-value').val((quantity * rmCost).toFixed(2));
    calculateTotals();
}

// Populate Raw Material Table from RFQ
function populateRawMaterialTable(rawMaterials) {
    let tbody = $('#rm-tbody');
    tbody.empty();

    let options = '<option value="">Select</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;
    }

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

    rawMaterials.forEach(function(mat, idx) {
        let selectedOption = options.replace(
            'value="' + (mat.material_id || mat.id || '') + '"',
            'value="' + (mat.material_id || mat.id || '') + '" selected'
        );

        tbody.append(`
            <tr>
                <td class="text-center">${idx + 1}</td>
                <td>
                    <select name="raw_material[${idx}][material_id]" class="form-control form-control-sm rm-material">
                        ${selectedOption}
                    </select>
                    <input type="hidden" name="raw_material[${idx}][density]" value="${mat.density || ''}">
                </td>
                <td><input type="number" name="raw_material[${idx}][rate]" class="form-control form-control-sm rm-rate" step="0.01"></td>
                <td><input type="number" name="raw_material[${idx}][scrap_rate]" class="form-control form-control-sm rm-scrap-rate" step="0.01"></td>
                <td><input type="number" name="raw_material[${idx}][finish_weight]" class="form-control form-control-sm rm-finish-weight" step="0.01"></td>
                <td>
                    <select name="raw_material[${idx}][type]" class="form-control form-control-sm rm-type">
                        <option value="">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="form-control form-control-sm rm-quantity" min="1"></td>
                <td><input type="number" name="raw_material[${idx}][size1]" class="form-control form-control-sm rm-size1"></td>
                <td><input type="number" name="raw_material[${idx}][size2]" class="form-control form-control-sm rm-size2"></td>
                <td><input type="number" name="raw_material[${idx}][size3]" class="form-control form-control-sm rm-size3"></td>
                <td><input type="text" name="raw_material[${idx}][rm_weight]" class="form-control form-control-sm rm-weight" readonly></td>
                <td><input type="number" name="raw_material[${idx}][rm_cost]" class="form-control form-control-sm rm-cost" step="0.01"></td>
                <td><input type="text" name="raw_material[${idx}][value]" class="form-control form-control-sm rm-value" readonly></td>
                <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>
        `);
    });
}

// Reset form
function resetForm() {
    setTimeout(function() {
        $.get("{{ url('superadmin/sales/max-quotation-id') }}", function(data) {
            $('#quotationNo').val(data.newQuotationNo);
        });
        let today = new Date().toISOString().split('T')[0];
        $('#quotationDate').val(today);
        $('#totalAmount, #roundUp, #grandTotal, #GT-in-letters').val('');
        $('.selectpicker').selectpicker('refresh');
    }, 100);
}
</script>
@endsection