@extends('layouts.master')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/sales-create.css') }}">
@endpush

@section('content')
    <div class="sl-create-page">
        <!-- Breadcrumb & Header -->
        <div class="az-content-breadcrumb mb-2">
            <span><i class="fa-solid fa-house-chimney text-muted me-1"></i> Dashboard</span>
            <span>Sales</span>
            <span>Create Sale</span>
        </div>

        <div class="sl-page-header">
            <div class="sl-header-title">
                <div class="sl-header-icon">
                    <i class="fa-solid fa-cart-shopping"></i>
                </div>
                <div class="sl-header-text">
                    <h2>Create New Sale</h2>
                    <div class="sl-subtitle">
                        <span>سیل بل کا نیا اندراج</span>
                        <span class="text-muted">•</span>
                        <span class="text-muted">Enter customer, vehicle, items and billing details</span>
                    </div>
                </div>
            </div>

            <div>
                <a href="{{ route('sales.list') }}" class="btn border shadow-sm px-3 py-2 bg-white text-dark rounded-8">
                    <i class="fa-solid fa-list-ul text-primary me-1"></i> Back to List (لسٹ پر واپس جائیں)
                </a>
            </div>
        </div>

        <!-- Main Form Card -->
        <div class="sl-main-card">
            <form action="{{ route('sales.store') }}" method="POST" id="salesForm" autocomplete="off">
                @csrf
                <input type="hidden" name="getGoodsDetailId" id="setGoodsDetailId">
                <input type="hidden" name="getItemsMarka" id="setItemsMarka">
                <input type="hidden" name="getMainCateName" id="setMainCateName">
                <input type="hidden" name="getParentCateName" id="setParentCateName">
                <input type="hidden" name="getChildCateName" id="setChildCateName">

                <!-- Error Display -->
                @if (count($errors) > 0)
                    <div class="p-3">
                        @foreach ($errors->all() as $error)
                            <div class="alert alert-danger alert-dismissible fade show mb-2 shadow-sm" role="alert">
                                <i class="fa-solid fa-circle-exclamation me-2"></i> {{ $error }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endforeach
                    </div>
                @endif

                <!-- SECTION 1: Vehicle & Customer Information -->
                <div class="sl-section-header">
                    <div class="sl-section-title">
                        <i class="fa-solid fa-truck-moving"></i>
                        <span>Customer & Vehicle Information</span>
                        <span class="section-urdu">گاہک اور گاڑی کی تفصیلات</span>
                    </div>
                    <span class="badge badge-light border text-muted">Step 1 of 3</span>
                </div>

                <div class="p-4 bg-white">
                    <div class="row">
                        <!-- Date -->
                        <div class="col-lg-3 col-md-6">
                            <div class="sl-field-group">
                                <label class="sl-label" for="sales_date">
                                    <span class="label-left">
                                        <i class="fa-regular fa-calendar-days text-primary"></i> Date
                                    </span>
                                    <span class="label-urdu">تاریخ</span>
                                </label>
                                <div class="sl-input-icon-wrap">
                                    <i class="fa-regular fa-calendar sl-input-icon"></i>
                                    <input type="text" name="sales_date" id="sales_date" class="sl-input sl-input-with-icon"
                                        placeholder="YYYY-MM-DD" readonly />
                                </div>
                            </div>
                        </div>

                        <!-- Truck Selector -->
                        <div class="col-lg-9 col-md-6">
                            <div class="sl-field-group">
                                <label class="sl-label" for="truck">
                                    <span class="label-left">
                                        <i class="fa-solid fa-truck text-primary"></i> Truck Number <span class="text-danger">*</span>
                                    </span>
                                    <span class="label-urdu">ٹرک نمبر منتخب کریں</span>
                                </label>

                                <!-- Hidden native select element -->
                                <select class="form-control d-none" name="good_receipts_truck_id" id="truck" required>
                                    <option value="">- Select -</option>
                                    @foreach ($trucks as $truck)
                                        @foreach ($truck->goodReceiptDetails as $details)
                                            <option value="{{ $truck->id_truck }}" data-bori="{{ $details->bori }}"
                                                data-grd-id="{{ $details->id_grd }}">
                                                {{ $truck->truck_no }} (Bori: {{ $details->bori }})
                                            </option>
                                        @endforeach
                                    @endforeach
                                </select>

                                <!-- Selected Truck Labels -->
                                <div id="truck_labels"></div>

                                <!-- Visible custom dropdown -->
                                <div class="custom-dropdown">
                                    <div class="dropdown-toggle" id="truck-toggle">
                                        <span id="truck-toggle-text"><i class="fa-solid fa-truck me-2 text-muted"></i> - Click to select incoming truck / ٹرک منتخب کریں -</span>
                                        <i class="fa-solid fa-chevron-down text-muted" style="font-size: 12px;"></i>
                                    </div>

                                    <div class="dropdown-content">
                                        <div class="sl-input-icon-wrap mb-2">
                                            <i class="fa-solid fa-magnifying-glass sl-input-icon"></i>
                                            <input type="text" id="truck-search" class="form-control sl-input-with-icon"
                                                placeholder="Search truck number, marka, or category..."
                                                onkeyup="showOnlyThisTruckDetails(this.value)">
                                        </div>

                                        <div class="table-responsive" style="max-height: 280px;">
                                            <table class="table table-bordered table-hover">
                                                <thead>
                                                    <tr>
                                                        <th style="width: 70px;">Action</th>
                                                        <th>Truck No</th>
                                                        <th>Main Category</th>
                                                        <th>Parent Category</th>
                                                        <th>Child Category</th>
                                                        <th>Marka</th>
                                                        <th>Bori</th>
                                                        <th>Weight</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="truck-table-body">
                                                    @foreach ($trucks as $truck)
                                                        @foreach ($truck->goodReceipts as $receipt)
                                                            @foreach ($receipt->goodReceiptDetails as $detail)
                                                                <tr class="truck-details select-truck"
                                                                    data-truck-id="{{ $truck->id_truck }}"
                                                                    data-details-id="{{ $detail->id_grd }}"
                                                                    data-bori="{{ $detail->bori }}"
                                                                    data-weight="{{ $detail->weight }}"
                                                                    data-marka="{{ $detail->marka }}"
                                                                    data-main-cate="{{ $detail->productMainCate->products_category_name ?? '' }}"
                                                                    data-parent-cate="{{ $detail->productParentCate->name ?? '' }}"
                                                                    data-child-cate="{{ $detail->productChildCate->name ?? '' }}">
                                                                    <td class="text-center">
                                                                        <button type="button" class="btn btn-sm btn-outline-success py-1 px-2">
                                                                            <i class="fa fa-check"></i>
                                                                        </button>
                                                                        <button type="button" class="btn btn-sm btn-outline-danger py-1 px-2 d-none">
                                                                            <i class="fa fa-times"></i>
                                                                        </button>
                                                                    </td>
                                                                    <td><strong class="text-dark">{{ $truck->truck_no }}</strong></td>
                                                                    <td>{{ $detail->productMainCate->products_category_name ?? '-' }}</td>
                                                                    <td>{{ $detail->productParentCate->name ?? '-' }}</td>
                                                                    <td>{{ $detail->productChildCate->name ?? '-' }}</td>
                                                                    <td><span class="badge bg-light text-dark border">{{ $detail->marka ?? '-' }}</span></td>
                                                                    <td><span class="badge bg-success-subtle text-success font-weight-bold">{{ $detail->bori }}</span></td>
                                                                    <td>{{ $detail->weight }}</td>
                                                                </tr>
                                                            @endforeach
                                                        @endforeach
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Customer Selection -->
                        <div class="col-lg-6 col-md-12">
                            <div class="sl-field-group">
                                <label class="sl-label" for="customers">
                                    <span class="label-left">
                                        <i class="fa-solid fa-user-tag text-primary"></i> Customer <span class="text-danger">*</span>
                                    </span>
                                    <span class="label-urdu">گاہک نام</span>
                                </label>
                                <div class="sl-customer-combo">
                                    <select class="form-control select2" name="customer_id" id="customers" required style="width: 100%;">
                                        <option value="">- Select Customer / گاہک منتخب کریں -</option>
                                        @foreach ($customers as $customer)
                                            <option value="{{ $customer->id_customers }}">
                                                {{ $customer->customer_name }} | {{ $customer->customer_name_urdu }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <button type="button" class="sl-btn-add-customer" data-toggle="modal" data-target="#addCustomerModal" data-bs-toggle="modal" data-bs-target="#addCustomerModal" title="Add Customer">
                                        <i class="fa-solid fa-plus-circle"></i> + Add New
                                    </button>
                                </div>
                                @error('customer_id')
                                    <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <!-- Status -->
                        <div class="col-lg-3 col-md-6">
                            <div class="sl-field-group">
                                <label class="sl-label" for="sales_status">
                                    <span class="label-left">
                                        <i class="fa-solid fa-toggle-on text-primary"></i> Status
                                    </span>
                                    <span class="label-urdu">حیثیت</span>
                                </label>
                                <select id="sales_status" name="sales_status" class="sl-select">
                                    <option value="1" selected>🟢 Active (فعال)</option>
                                    <option value="0" {{ old('sales_status') == '0' ? 'selected' : '' }}>🔴 In-Active (غیر فعال)</option>
                                </select>
                                @error('sales_status')
                                    <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <!-- Details / Notes -->
                        <div class="col-lg-3 col-md-6">
                            <div class="sl-field-group">
                                <label class="sl-label" for="details">
                                    <span class="label-left">
                                        <i class="fa-regular fa-comment-dots text-primary"></i> Details / Notes
                                    </span>
                                    <span class="label-urdu">تفصیلات</span>
                                </label>
                                <textarea class="sl-input" style="height: 42px; resize: none;" name="details" id="details"
                                    placeholder="سیل بل سے متعلق نوٹس درج کریں..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 2: Item Details Table -->
                <div class="sl-section-header">
                    <div class="sl-section-title">
                        <i class="fa-solid fa-boxes-stacked"></i>
                        <span>Sale Items & Rates</span>
                        <span class="section-urdu">آئٹمز، وزن اور ریٹ کی تفصیلات</span>
                    </div>
                    <span class="badge badge-light border text-muted">Step 2 of 3</span>
                </div>

                <div class="sl-table-container">
                    <div class="sl-table-card">
                        <div class="sl-table-card-header">
                            <h4>
                                <i class="fa-solid fa-list-check text-primary"></i>
                                <span>Item Details</span>
                                <span class="urdu-badge">سیل آئٹمز کی فہرست</span>
                            </h4>
                            <span class="text-muted small">Select truck, items, bags, weight & rate</span>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered align-middle" id="item-table">
                                <thead>
                                    <tr>
                                        <th style="min-width: 140px;">Select Truck (ٹرک)</th>
                                        <th style="min-width: 130px;">Main Category</th>
                                        <th style="min-width: 130px;">Parent Category</th>
                                        <th style="min-width: 130px;">Child Category</th>
                                        <th style="min-width: 110px;">Marka (مارکہ)</th>
                                        <th style="min-width: 110px;">Bori (بوری)</th>
                                        <th style="min-width: 110px;">Weight (وزن)</th>
                                        <th style="min-width: 100px;">Rate (ریٹ)</th>
                                        <th style="min-width: 120px;">Amount (رقم)</th>
                                        <th style="width: 50px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- Dynamically populated by JS --}}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Add More Button -->
                    <button type="button" class="sl-btn-add-row" id="add-more-btn" onclick="addRow()">
                        <i class="fa-solid fa-circle-plus"></i>
                        <span>Add Another Item Row (مزید مال شامل کریں)</span>
                    </button>

                    <!-- SECTION 3: Additional Bori Details (Active when 1 row) -->
                    <div class="mt-4" id="dismyDiv">
                        <div class="sl-table-card">
                            <div class="sl-table-card-header">
                                <h4>
                                    <i class="fa-solid fa-scale-balanced text-primary"></i>
                                    <span>Individual Bag Weight Details</span>
                                    <span class="urdu-badge">ہر بوری کا الگ وزن</span>
                                </h4>
                                <span class="badge bg-info-subtle text-info border">Active for Single Item Sale</span>
                            </div>

                            <div class="table-responsive" style="max-height: 250px;">
                                <table class="table table-bordered align-middle" id="bori-table">
                                    <thead>
                                        <tr>
                                            <th style="width: 25%;">Bori Number (بوری نمبر)</th>
                                            <th style="width: 55%;">Weight (وزن)</th>
                                            <th style="width: 20%;" class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input type="text" class="form-control" name="bori_number[]" value="1" readonly></td>
                                            <td><input type="text" class="form-control n-amount2" name="per_bori_weight[]" placeholder="0"></td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-sm btn-outline-danger remove-bori-btn" onclick="removeBoriRow(this)">
                                                    <i class="fa-regular fa-trash-can"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <button type="button" id="addPlusbori" class="sl-btn-add-row" onclick="addBoriRow()">
                            <i class="fa-solid fa-plus"></i>
                            <span>Add Bag Weight (مزید بوری کا وزن درج کریں)</span>
                        </button>
                    </div>
                </div>

                <!-- SECTION 4: Financial Summary & Totals -->
                <div class="sl-section-header">
                    <div class="sl-section-title">
                        <i class="fa-solid fa-calculator"></i>
                        <span>Bill Summary & Payment</span>
                        <span class="section-urdu">بل کا خلاصہ اور ادائیگی</span>
                    </div>
                    <span class="badge badge-light border text-muted">Step 3 of 3</span>
                </div>

                <div class="sl-totals-section">
                    <div class="sl-totals-grid">
                        <!-- Total Bori -->
                        <div class="sl-stat-card bori">
                            <div class="sl-stat-header">
                                <span class="sl-stat-label">
                                    <i class="fa-solid fa-boxes-stacked"></i> Total Bori
                                </span>
                                <span class="sl-stat-badge-urdu">کل بوریاں</span>
                                <div class="sl-stat-icon-wrap">
                                    <i class="fa-solid fa-sack-dollar"></i>
                                </div>
                            </div>
                            <input type="text" class="sl-stat-input n-amount2" id="total_bori" name="total_bori"
                                value="{{ old('total_bori', '0') }}" readonly>
                        </div>

                        <!-- Total Amount -->
                        <div class="sl-stat-card total">
                            <div class="sl-stat-header">
                                <span class="sl-stat-label">
                                    <i class="fa-solid fa-file-invoice-dollar"></i> Total Amount
                                </span>
                                <span class="sl-stat-badge-urdu">کل رقم</span>
                                <div class="sl-stat-icon-wrap">
                                    <i class="fa-solid fa-receipt"></i>
                                </div>
                            </div>
                            <input type="text" class="sl-stat-input n-amount2" id="total_amount" name="total_amount"
                                value="0" readonly>
                        </div>

                        <!-- Cash Received -->
                        <div class="sl-stat-card received">
                            <div class="sl-stat-header">
                                <span class="sl-stat-label">
                                    <i class="fa-solid fa-hand-holding-dollar"></i> Cash Received
                                </span>
                                <span class="sl-stat-badge-urdu">وصول شدہ رقم</span>
                                <div class="sl-stat-icon-wrap">
                                    <i class="fa-solid fa-money-bill-wave"></i>
                                </div>
                            </div>
                            <input type="text" class="sl-stat-input n-amount2" id="cash_received" name="cash_received"
                                value="{{ old('cash_received', '0') }}" placeholder="0">
                        </div>

                        <!-- Remaining Amount -->
                        <div class="sl-stat-card remaining">
                            <div class="sl-stat-header">
                                <span class="sl-stat-label">
                                    <i class="fa-solid fa-scale-unbalanced"></i> Remaining Balance
                                </span>
                                <span class="sl-stat-badge-urdu">بقایا رقم</span>
                                <div class="sl-stat-icon-wrap">
                                    <i class="fa-solid fa-wallet"></i>
                                </div>
                            </div>
                            <input type="text" class="sl-stat-input n-amount2" id="remaining_amount" name="remaining_amount"
                                value="0" readonly>
                        </div>
                    </div>
                </div>

                <!-- Footer Action Buttons -->
                <div class="sl-form-footer">
                    <div></div>

                    <div class="sl-footer-actions">
                        <a href="{{ route('sales.list') }}" class="sl-btn-cancel">
                            <i class="fa-solid fa-xmark"></i> Cancel (منسوخ کریں)
                        </a>
                        <button type="submit" class="sl-btn-save" id="submitData">
                            <i class="fa-solid fa-floppy-disk"></i>
                            <span>Save Sale (سیل بل محفوظ کریں)</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Error Toast Notification -->
    <div id="errorNotification" class="alert alert-danger position-fixed shadow-lg"
        style="display: none; top: 20px; right: 20px; z-index: 99999; max-width: 360px; border-left: 5px solid #ef4444; border-radius: 12px;">
        <div class="d-flex align-items-start">
            <i class="fa-solid fa-triangle-exclamation fs-4 me-2 mt-1"></i>
            <div>
                <strong class="d-block mb-1">Attention Required!</strong>
                <span id="errorMessage">Please select the row you want to delete.</span>
            </div>
        </div>
    </div>

    <!-- Quick Add Customer Modal -->
    <div class="modal fade" id="addCustomerModal" tabindex="-1" role="dialog" aria-labelledby="addCustomerModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content sl-modal">
                <form id="addCustomerForm" method="POST">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addCustomerModalLabel">
                            <i class="fa-solid fa-user-plus text-primary me-2"></i>
                            <span>Add New Customer (نیا گاہک درج کریں)</span>
                        </h5>
                        <button type="button" class="close text-white" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="sl-field-group mb-3">
                            <label class="sl-label" for="customer_name">
                                <span>Customer Name (English) <span class="text-danger">*</span></span>
                            </label>
                            <div class="sl-input-icon-wrap">
                                <i class="fa-solid fa-user sl-input-icon"></i>
                                <input type="text" name="customer_name" id="customer_name" class="sl-input sl-input-with-icon"
                                    placeholder="Enter customer full name" required>
                            </div>
                        </div>
                        <div class="sl-field-group mb-2">
                            <label class="sl-label" for="customer_name_urdu">
                                <span>گاہک کا نام (اردو) <span class="text-danger">*</span></span>
                            </label>
                            <div class="sl-input-icon-wrap">
                                <i class="fa-solid fa-pen-nib sl-input-icon"></i>
                                <input type="text" name="customer_name_urdu" id="customer_name_urdu"
                                    class="sl-input sl-input-with-icon urdu-font text-end" placeholder="گاہک کا نام اردو میں" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="mdcancelBtn" class="sl-btn-cancel py-1 px-3" data-dismiss="modal" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="sl-btn-save py-1 px-4" id="btnSaveCustomerModal">
                            <i class="fa-solid fa-check me-1"></i> Save Customer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- Instant Add Customer Modal Script  --}}
    <script>
        var trucks = @json($trucks);
        let selectedTrucks = [];
        let selectedMarka = [];
    </script>

    <script>
        $(document).ready(function() {

            document.querySelectorAll('.n-amount2').forEach(function(el) {
                new AutoNumeric(el, {
                    digitGroupSeparator: ',',
                    decimalPlaces: 0,
                    unformatOnSubmit: true
                });
            });

            // Attach submit event
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $(document).on('submit', '#addCustomerForm', function(e) {
                e.preventDefault();

                let form = $(this);
                let submitBtn = $('#btnSaveCustomerModal');
                let origHtml = submitBtn.html();
                submitBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-1"></i> Saving...');

                $.ajax({
                    url: "{{ route('customers.store') }}",
                    method: "POST",
                    data: form.serialize(),
                    success: function(response) {
                        submitBtn.prop('disabled', false).html(origHtml);
                        if (response.success) {
                            $('#mdcancelBtn').click();

                            if (response.customers && Array.isArray(response.customers)) {
                                $('#customers').empty().append('<option value="">- Select Customer / گاہک منتخب کریں -</option>');
                                let lastCustId = null;
                                response.customers.forEach(function(customer) {
                                    const option = `<option value="${customer.id_customers}">
                                        ${customer.customer_name} | ${customer.customer_name_urdu}
                                    </option>`;
                                    $('#customers').append(option);
                                    lastCustId = customer.id_customers;
                                });
                                if (lastCustId) {
                                    $('#customers').val(lastCustId).trigger('change');
                                }
                            }
                            $('#customer_name').val('');
                            $('#customer_name_urdu').val('');
                            if (typeof toastr !== 'undefined') {
                                toastr.success('Customer added successfully!');
                            }
                        }
                    },
                    error: function(response) {
                        submitBtn.prop('disabled', false).html(origHtml);
                        if (!response.success && response.responseJSON) {
                            let errors = response.responseJSON.errors;

                            if (errors) {
                                Object.keys(errors).forEach(function(key) {
                                    errors[key].forEach(function(msg) {
                                        if (typeof toastr !== 'undefined') {
                                            toastr.error(msg);
                                        } else {
                                            alert(msg);
                                        }
                                    });
                                });
                            } else {
                                let msg = response.responseJSON.message || 'Error saving customer';
                                if (typeof toastr !== 'undefined') {
                                    toastr.error(msg);
                                } else {
                                    alert(msg);
                                }
                            }
                        }
                    }
                });
            });
        });
    </script>
    <script type="text/javascript">
        // For Bori
        function checkBoriQty(inputElement) {
            let el = (typeof inputElement === "object" && inputElement !== null) ? inputElement : document.activeElement;
            const $input = $(el);
            const maxBori = parseFloat($input.data("max-bori")) || 0;

            const value = (typeof AutoNumeric !== "undefined" && AutoNumeric.getAutoNumericElement($input[0]))
                ? (AutoNumeric.getNumber($input[0]) || 0)
                : (parseFloat($input.val()) || 0);

            const $errorSpan = $input.siblings(".bori-error");

            if (maxBori > 0 && value > maxBori) {
                $input.addClass("border border-danger");
                $errorSpan.show().text("Exceeded available Bori! Max: " + maxBori);
                $("#submitData").prop("disabled", true);
            } else {
                $input.removeClass("border border-danger");
                $errorSpan.hide().text("");
                const anyError = $(".bori-error:visible").length > 0;
                $("#submitData").prop("disabled", anyError);
            }
            calculateAmount(el);
        }

        // For Weight
        function checkWeightQty(inputWeight) {
            var availableWeight = $('#setWeight').val();
            var outofstockSpanWeight = document.getElementById('outofstockWeight');
            var weightSpan = document.getElementById('available-weight');
            var submitBtn = document.getElementById('submitData');
            var weightInput = document.querySelector('.weight-input');

            inputWeight = parseFloat(inputWeight);
            availableWeight = parseFloat(availableWeight);

            if (inputWeight > availableWeight) {
                $(weightInput).addClass('border-danger').removeClass('border-none');
                if (weightSpan) weightSpan.style.display = 'none';
                if (outofstockSpanWeight) outofstockSpanWeight.textContent = 'Weight must be under! ' + availableWeight;
                if (submitBtn) submitBtn.disabled = true;
            } else {
                $(weightInput).removeClass('border-danger');
                if (weightSpan) weightSpan.style.display = 'inline';
                if (outofstockSpanWeight) outofstockSpanWeight.textContent = '';
                if (submitBtn) submitBtn.disabled = false;
            }
        }

        document.addEventListener('keydown', function(event) {
            if ((event.ctrlKey || event.metaKey) && (event.key === 's' || event.key === 'S')) {
                event.preventDefault();
                let form = document.getElementById('salesForm');
                if (form) {
                    let btn = document.getElementById('submitData');
                    if (btn) {
                        btn.innerHTML = '<i class="fa fa-spinner fa-spin me-2"></i> Saving Sale...';
                        btn.disabled = true;
                    }
                    form.submit();
                }
            }

            if (event.key === 'Enter') {
                if (event.target.tagName !== 'TEXTAREA') {
                    event.preventDefault();
                }
            }
        });

        function calculateAmount(element) {
            let el = (typeof element === "object" && element !== null) ? element : document.activeElement;
            if (!el || typeof el.closest !== "function") return;
            let row = el.closest('tr');
            if (!row) return;

            let boriInput = row.querySelector('.bori-check');
            let weightInput = row.querySelector('.weight-input');
            let rateInput = row.querySelector('.rate-input');

            let bori = boriInput ? parseFloat(AutoNumeric.getNumber(boriInput)) || 0 : 0;
            let weight = weightInput ? parseFloat(AutoNumeric.getNumber(weightInput)) || 0 : 0;
            let rate = rateInput ? parseFloat(AutoNumeric.getNumber(rateInput)) || 0 : 0;
          
            if (weight === 0 && rate === 0) {
                updateTotals();
                return;
            }
          
            let amount;
            if (weight == null || weight == 0) {
                amount = (rate * bori);
            } else {
                amount = (rate * weight) / 40;
            }

            let amountInput = row.querySelector('.amount-input');
            if (amountInput) {
                if (AutoNumeric.getAutoNumericElement(amountInput)) {
                    AutoNumeric.getAutoNumericElement(amountInput).set(amount);
                } else {
                    amountInput.value = amount.toFixed(2);
                }
            }
            updateTotals();
        }

        function getTruckOptions(selectedId = '') {
            if (selectedTrucks.length === 0) {
                return `<option value="">Select Truck</option>`;
            }
            let options = `<option value="">Select Truck</option>`;
            trucks.forEach(truck => {
                if (selectedTrucks.includes(truck.id_truck)) {
                    let selected = truck.id_truck == selectedId ? 'selected' : '';
                    options += `<option value="${truck.id_truck}" >${truck.truck_no}</option>`;
                }
            });

            return options;
        }

        $(document).ready(function() {
            refreshTruckSelects();
        });

        function updateSubmitButton() {
            const rowCount = $("#item-table tbody tr").length;
            if (rowCount === 1) {
                $("#addPlusbori").prop("disabled", false);
                $('#dismyDiv').removeClass('disabled-div');
            } else {
                $("#addPlusbori").prop("disabled", true);
                $('#dismyDiv').addClass('disabled-div');
            }
        }

        function addRow() {
            let itemIndex = $('#item-table tbody tr').length;
            let truckId = 1;
            let detailsId = 1;

            var row = `<tr data-truck-id="${truckId}" data-details-id="${detailsId}">
            <td>
                <select class="form-control select-truck-good" name="good_receipts_truck_ids[]">
                    ${getTruckOptions(truckId)}
                </select>
            </td>

            <td>
                <select class="form-control main-cate" name="main_category[]"></select>
            </td>

            <td>
                <select class="form-control parent-cate" name="parent_category[]"></select>
            </td>

            <td>
                <select class="form-control child-cate" name="child_category[]"></select>
            </td>

            <td>
                <select class="form-control marka marka-select" name="marka[]"></select>
            </td>

            <td>
                <input type="hidden" id="setBori_${detailsId}">
                <input type="text" class="form-control bori-check n-amount" value="1" name="bori[]" data-max-bori="" onkeyup="checkBoriQty(this)">
                <small class="text-muted d-block mt-1">Available Bori: </small>
                <span class="bori-error text-danger" style="display:none;">Exceeded available Bori!</span>
            </td>

            <td>
                <input type="hidden" id="setWeight_${detailsId}">
                <input type="text" class="form-control n-amount weight-input" name="weight[]" oninput="calculateAmount(this)">
                <span class="available-weight" style="display:none;">
                    Available Weight: <span class="weight-quantity"></span>
                </span>
                <span class="outofstockWeight text-danger"></span>
            </td>
            <input type="hidden" class="good_receipt_detail_id" name='good_receipt_detail_id[]' value="${detailsId}">
            <td><input type="text" class="form-control n-amount rate-input" name="rate[]" oninput="calculateAmount(this)"></td>
            <td><input type="text" class="form-control n-amount amount-input" name="amount[]" oninput="updateTotals()"></td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-outline-danger remove-row" title="Remove Item">
                    <i class="fa fa-trash"></i>
                </button>
            </td>
        </tr>`;

            $('#item-table tbody').append(row);
            updateSubmitButton();

            $("#item-table tbody tr:last .n-amount").each(function() {
                new AutoNumeric(this, {
                    digitGroupSeparator: ',',
                    decimalPlaces: 0,
                    unformatOnSubmit: true
                });
            });

            $(document).on("input", ".bori-check", function() {
                const $input = $(this);
                const maxBori = parseFloat($input.data("max-bori")) || 0;
                const value = AutoNumeric.getNumber($input[0]) || 0;
                if (value > maxBori) {
                    $input.addClass("border border-danger");
                    $input.siblings(".bori-error").show();
                    $("#submitData").prop("disabled", true);
                } else {
                    $input.removeClass("border border-danger");
                    $input.siblings(".bori-error").hide();
                    $("#submitData").prop("disabled", false);
                }
                updateBoriDetails();
                updateTotals();
            });

            updateSubmitButton();
        }

        function getUsedBori(currentRow) {
            let total = 0;

            let truckId = currentRow.find("input[name='good_receipts_truck_ids[]']").val();
            let mainId = currentRow.find('.main-cate').val();
            let parentId = currentRow.find('.parent-cate').val();
            let childId = currentRow.find('.child-cate').val();
            let markaId = currentRow.find('.marka-select').val();

            $('#item-table tbody tr').each(function() {
                let row = $(this);

                if (row.is(currentRow)) return;

                if (
                    row.find("input[name='good_receipts_truck_ids[]']").val() == truckId &&
                    row.find('.main-cate').val() == mainId &&
                    row.find('.parent-cate').val() == parentId &&
                    row.find('.child-cate').val() == childId &&
                    row.find('.marka-select').val() == markaId
                ) {
                    let input = row.find('.bori-check')[0];
                    let an = AutoNumeric.getAutoNumericElement(input);

                    if (an) {
                        total += Number(an.getNumber());
                    }
                }
            });

            return total;
        }

        $(document).on('keyup change', '.bori-check', function() {
            validateBori(this);
            updateTotals();
        });

        function getUsedBoriForSameDetails(row) {
            let total = 0;

            let truckId = row.find("input[name='good_receipts_truck_ids[]']").val();
            let mainId = row.find('.main-cate').val();
            let parentId = row.find('.parent-cate').val();
            let childId = row.find('.child-cate').val();
            let markaId = row.find('.marka').val();

            $('#item-table tbody tr').each(function() {
                let r = $(this);

                if (r.is(row)) return;

                if (
                    r.find("input[name='good_receipts_truck_ids[]']").val() == truckId &&
                    r.find('.main-cate').val() == mainId &&
                    r.find('.parent-cate').val() == parentId &&
                    r.find('.child-cate').val() == childId &&
                    r.find('.marka').val() == markaId
                ) {
                    let input = r.find('.bori-check')[0];
                    let an = AutoNumeric.getAutoNumericElement(input);

                    if (an) {
                        total += Number(an.getNumber());
                    }
                }
            });

            return total;
        }

        function validateBori(input) {
            let row = $(input).closest('tr');
            let an = AutoNumeric.getAutoNumericElement(input);

            if (!an) return;

            let enteredBori = Number(an.getNumber());
            let maxBori = Number($(input).data('max-bori'));

            let usedBori = getUsedBori(row);
            let remainingBori = maxBori - usedBori;

            if (enteredBori > remainingBori) {
                alert(`Remaining Bori is ${remainingBori}`);
                an.set(remainingBori > 0 ? remainingBori : 0);
                return false;
            }
            updateTotals();
            return true;
        }

        function getSelectedTruckMarka(truckId = null) {
            let markaList = [];

            $('.truck-details.selected').each(function() {
                let row = $(this);

                if (truckId && row.data('truck-id') != truckId) {
                    return;
                }

                let marka = row.data('marka');
                if (marka) {
                    markaList.push(String(marka));
                }
            });

            return markaList;
        }

        function checkAndUpdateBori(row) {
            let truckId = row.find('.select-truck-good').val() || row.find("input[name='good_receipts_truck_ids[]']").val();
            let mainId = row.find('.main-cate').val();
            let parentId = row.find('.parent-cate').val();
            let childId = row.find('.child-cate').val();
            let marka = row.find('.marka').val();

            if (!truckId) return;

            let url = '{{ route('get.goods-receipt.truck', ':truckId') }}'.replace(':truckId', truckId);

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    truck_id: truckId,
                    main_id: mainId,
                    parent_id: parentId,
                    child_id: childId,
                    marka: marka,
                    type_for: 'checkBori'
                },
                success: function(res) {
                    if (!res.data || res.data.length === 0) return;
                    let data = res.data[0];

                    let boriInput = row.find('.bori-check')[0];
                    let an = AutoNumeric.getAutoNumericElement(boriInput);

                    let totalBori = Number(data.bori) || 0;

                    let usedBori = 0;
                    $('#item-table tbody tr').each(function() {
                        let r = $(this);
                        if (r.is(row)) return;

                        let rTruck = r.find('.select-truck-good').val() || r.find("input[name='good_receipts_truck_ids[]']").val();
                        let rMain = r.find('.main-cate').val();
                        let rParent = r.find('.parent-cate').val();
                        let rChild = r.find('.child-cate').val();
                        let rMarka = r.find('.marka').val();

                        let match = (rTruck == truckId);
                        if (mainId && rMain) match = match && (rMain == mainId);
                        if (parentId && rParent) match = match && (rParent == parentId);
                        if (childId && rChild) match = match && (rChild == childId);
                        if (marka && rMarka) match = match && (rMarka == marka);

                        if (match) {
                            let otherInput = r.find('.bori-check')[0];
                            let otherAn = AutoNumeric.getAutoNumericElement(otherInput);
                            if (otherAn) {
                                usedBori += Number(otherAn.getNumber()) || 0;
                            }
                        }
                    });

                    let remainingBori = totalBori - usedBori;
                    if (remainingBori < 0) remainingBori = 0;

                    if (an) {
                        an.update({
                            maximumValue: remainingBori.toString()
                        });
                    }

                    $(boriInput).attr('data-max-bori', remainingBori).data('max-bori', remainingBori);
                    row.find('.text-muted').text('Available Bori: ' + remainingBori);
                    if (data.good_receipt_detail_id) {
                        row.find('.good_receipt_detail_id').val(data.good_receipt_detail_id);
                    }
                },
                error: function(err) {
                    console.error('AJAX error:', err);
                }
            });
        }

        $(document).on('change', '.main-cate', function() {
            let row = $(this).closest('tr');
            checkAndUpdateBori(row);
        });

        $(document).on('change', '.parent-cate', function() {
            let row = $(this).closest('tr');
            checkAndUpdateBori(row);
        });

        $(document).on('change', '.child-cate', function() {
            let row = $(this).closest('tr');
            let childId = row.find('.child-cate').val();
            let mainId = row.find('.main-cate').val();
            let parentId = row.find('.parent-cate').val();
            let truckId = row.find('.select-truck-good').val() || row.find("input[name='good_receipts_truck_ids[]']").val();

            checkAndUpdateBori(row);

            if (!childId || !truckId) return;

            let url = '{{ route('get.goods-receipt.truck', ':truckId') }}'.replace(':truckId', truckId);

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    truck_id: truckId,
                    main_id: mainId,
                    parent_id: parentId,
                    child_id: childId,
                    type_for: 'getMarka'
                },
                success: function(res) {
                    if (!res.data || res.data.length === 0) return;
                    let data = res.data[0];

                    let markaSelect = row.find('.marka');
                    markaSelect.empty().append('<option value="">Select Marka</option>');

                    if (Array.isArray(data.marka_list)) {
                        let selectedTruckMarka = getSelectedTruckMarka(truckId);
                        let listToUse = data.marka_list;
                        if (selectedTruckMarka.length > 0) {
                            let filtered = data.marka_list.filter(marka => marka && selectedTruckMarka.includes(String(marka)));
                            if (filtered.length > 0) listToUse = filtered;
                        }

                        listToUse.forEach(function(marka) {
                            if (marka) {
                                markaSelect.append(`<option value="${marka}">${marka}</option>`);
                            }
                        });
                    }
                    if (data.good_receipt_detail_id) {
                        row.find('.good_receipt_detail_id').val(data.good_receipt_detail_id);
                    }
                },
                error: function(err) {
                    console.error('AJAX error:', err);
                }
            });
        });

        $(document).on('change', '.marka', function() {
            let row = $(this).closest('tr');
            checkAndUpdateBori(row);
        });

        $(document).on('change', '.select-truck-good', function() {
            let truckId = $(this).val();
            let row = $(this).closest('tr');
            let url = '{{ route('get.goods-receipt.truck', ':truckId') }}'.replace(':truckId', truckId);

            if (!truckId) return;

            $.ajax({
                url: url,
                type: 'GET',
                success: function(res) {
                    let mainSelect = row.find('.main-cate').empty();
                    let parentSelect = row.find('.parent-cate').empty();
                    let childSelect = row.find('.child-cate').empty();

                    if (mainSelect.find('option[value=""]').length === 0) {
                        mainSelect.prepend(`<option value="">Select Main</option>`);
                    }

                    if (parentSelect.find('option[value=""]').length === 0) {
                        parentSelect.prepend(`<option value="">Select Parent</option>`);
                    }

                    if (childSelect.find('option[value=""]').length === 0) {
                        childSelect.prepend(`<option value="">Select Child</option>`);
                    }

                    checkAndUpdateBori(row);

                    res.data.forEach(function(item) {
                        if (mainSelect.find(`option[value='${item.main.id}']`).length === 0) {
                            mainSelect.append(`<option value="${item.main.id}">${item.main.name}</option>`);
                        }

                        if (parentSelect.find(`option[value='${item.parent.id}']`).length === 0) {
                            parentSelect.append(`<option value="${item.parent.id}">${item.parent.name}</option>`);
                        }

                        if (childSelect.find(`option[value='${item.child.id}']`).length === 0) {
                            childSelect.append(`<option value="${item.child.id}">${item.child.name}</option>`);
                        }
                    });
                }
            });
        });

        function removeRow(button) {
            $(button).closest('tr').remove();
            updateSubmitButton();
            updateTotals();
        }

        let serialNumber = 2;

        function addBoriRow() {
            const currentSerialNumber = serialNumber++;

            var row = `
                <tr>
                    <td><input type="text" class="form-control" name="bori_number[]" value="${currentSerialNumber}" readonly></td>
                    <td><input type="text" class="form-control n-amount" oninput="calculateAmount(this)" name="per_bori_weight[]" placeholder="0"></td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-outline-danger remove-bori-btn" onclick="removeBoriRow(this)">
                            <i class="fa-regular fa-trash-can"></i>
                        </button>
                    </td>
                </tr>`;

            $('#bori-table tbody').append(row);
            let newInput = $('#bori-table tbody tr:last').find('input[name="per_bori_weight[]"]')[0];
            new AutoNumeric(newInput, {
                digitGroupSeparator: ',',
                decimalPlaces: 0,
                unformatOnSubmit: true
            });

            let boriInput = $('.bori-check')[0];
            let boriAutoNumeric = AutoNumeric.getAutoNumericElement(boriInput);

            if (boriAutoNumeric) {
                let bori = boriAutoNumeric.getNumber() || 0;
                bori++;
                boriAutoNumeric.set(bori);
            }

            setTimeout(() => {
                if (newInput) newInput.focus();
            }, 50);

            updateBoriDetails();
            updateTotals();
        }

        function removeBoriRow(button) {
            $(button).closest('tr').remove();
            let boriInput = $('.bori-check')[0];
            let boriAutoNumeric = AutoNumeric.getAutoNumericElement(boriInput);

            let bori = 0;
            if (boriAutoNumeric) {
                bori = boriAutoNumeric.getNumber() || 0;
                bori--;
                if (bori < 0) bori = 0;
                boriAutoNumeric.set(bori);
            }
            $('.bori-check').val(bori);
            updateBoriDetails();
            updateTotals();
        }

        function updateBoriDetails() {
            let totalBori = 0;
            let totalWeight = 0;

            $('#bori-table tbody tr').each(function(index) {
                $(this).find('td:first input').val(index + 1);

                let weightEl = $(this).find('input[name="per_bori_weight[]"]')[0];
                let weight = weightEl ? AutoNumeric.getNumber(weightEl) || 0 : 0;
                totalWeight += weight;

                totalBori += 1;

                let boriEl = $(this).find('input[name="bori[]"]')[0];
                let bori = boriEl ? AutoNumeric.getNumber(boriEl) || 0 : 0;
                totalBori += bori;
            });

            let rowCount = $('#item-table tbody tr').length;

            if (rowCount == 1) {
                $('#item-table tbody tr').each(function() {
                    let weightEl = $(this).find('input[name="weight[]"]')[0];
                    if (weightEl) AutoNumeric.set(weightEl, totalWeight);

                    let weightInput = $(this).find('.weight-input')[0];
                    if (weightInput) calculateAmount(weightInput);
                });
            }

            let totalBoriInput = $('#total_bori')[0];
            let totalWeightInput = $('#total_weight')[0];

            if (totalBoriInput && AutoNumeric.getAutoNumericElement(totalBoriInput)) {
                AutoNumeric.set(totalBoriInput, totalBori);
            }
            if (totalWeightInput && AutoNumeric.getAutoNumericElement(totalWeightInput)) {
                AutoNumeric.set(totalWeightInput, totalWeight);
            }
        }

        $('#bori-table').on('input', 'input[name="bori_number[]"], input[name="per_bori_weight[]"]', function() {
            updateBoriDetails();
        });

        function populateMarkaAndItems(newRow) {
            var truckId = $('#truck').val();
            if (truckId) {
                $.ajax({
                    url: '{{ route('get.truck.items', '__TRUCK_ID__') }}'.replace('__TRUCK_ID__', truckId),
                    type: 'GET',
                    success: function(data) {
                        newRow.find('.item-select').empty().append('<option value="">- Select -</option>');
                    }
                });
            }
        }

        $('#truck').on('change', function() {
            var truckId = $(this).val();
            if (truckId) {
                $('#item-table tbody tr').each(function() {
                    populateMarkaAndItems($(this));
                });
            }
        });

        $('#item-table').on('change', 'select[name="marka[]"]', function() {
            var marka = $(this).val();
            var truckId = $('#truck').val();
            if (marka && truckId) {
                $.ajax({
                    url: '{{ route('get.items.by.marka', ['truckId' => '__TRUCK_ID__', 'marka' => '__MARKA__']) }}'
                        .replace('__TRUCK_ID__', truckId).replace('__MARKA__', marka),
                    type: 'GET',
                    success: function(data) {
                        var itemSelect = $(this).closest('tr').find('.item-select');
                        itemSelect.empty().append('<option value="">- Select -</option>');
                        $.each(data, function(id, name) {
                            itemSelect.append(`<option value="${name}">${name}</option>`);
                        });
                    }.bind(this)
                });
            }
        });

        function updateTotals() {
            let totalBori = 0;
            let totalAmount = 0;

            $('#item-table tbody tr').each(function() {
                const boriInput = this.querySelector('input[name="bori[]"]');
                const amountInput = this.querySelector('input[name="amount[]"]');

                let bori = boriInput ? (AutoNumeric.getNumber(boriInput) || 0) : 0;
                let amount = amountInput ? (AutoNumeric.getNumber(amountInput) || 0) : 0;

                totalBori += bori;
                totalAmount += amount;
            });

            const totalBoriEl = document.querySelector('#total_bori');
            if (totalBoriEl && AutoNumeric.getAutoNumericElement(totalBoriEl)) {
                AutoNumeric.getAutoNumericElement(totalBoriEl).set(totalBori);
            }

            const totalAmountEl = document.querySelector('#total_amount');
            if (totalAmountEl && AutoNumeric.getAutoNumericElement(totalAmountEl)) {
                AutoNumeric.getAutoNumericElement(totalAmountEl).set(totalAmount);
            }

            const cashReceivedEl = document.querySelector('#cash_received');
            const customerEl = document.querySelector('#customers');

            if (customerEl && customerEl.value === '54') {
                if (cashReceivedEl && AutoNumeric.getAutoNumericElement(cashReceivedEl)) {
                    AutoNumeric.getAutoNumericElement(cashReceivedEl).set(totalAmount);
                }
            }
            const cashReceived = cashReceivedEl ? (AutoNumeric.getNumber(cashReceivedEl) || 0) : 0;

            const remainingAmount = totalAmount - cashReceived;

            const remainingEl = document.querySelector('#remaining_amount');
            if (remainingEl && AutoNumeric.getAutoNumericElement(remainingEl)) {
                AutoNumeric.getAutoNumericElement(remainingEl).set(remainingAmount);
            }
        }

        function handleInputChange() {
            $('#item-table').on('input', 'input[name="bori"], input[name="amount"]', updateTotals);

            $('#cash_received').on('input', function() {
                let cash = AutoNumeric.getAutoNumericElement('#cash_received');
                let total = AutoNumeric.getAutoNumericElement('#total_amount');
                let cashReceived = cash ? parseFloat(cash.getNumber()) : parseFloat($('#cash_received').val().replace(/,/g, '')) || 0;
                let totalAmount = total ? parseFloat(total.getNumber()) : parseFloat($('#total_amount').val().replace(/,/g, '')) || 0;
                let remainingAmount = totalAmount - cashReceived;
                let reman = AutoNumeric.getAutoNumericElement('#remaining_amount');

                if (reman) {
                    reman.set(remainingAmount);
                } else {
                    $('#remaining_amount').val(remainingAmount);
                }
            });
        }

        $(document).ready(function() {
            var today = new Date();
            var formattedDate = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);

            if (!$('#sales_date').val()) {
                $("#sales_date").val(formattedDate);
            }

            if ($.fn.datepicker) {
                $("#sales_date").datepicker({
                    dateFormat: "yy-mm-dd"
                });
            }

            $('#customers').select2({
                placeholder: "- Select Customer / گاہک منتخب کریں -",
                allowClear: true,
                width: '100%'
            });

            $('#marka').select2({
                placeholder: "Select Marka",
                allowClear: true
            });

            handleInputChange();
            $('#item-table').on('DOMSubtreeModified', updateTotals);

            $('#truck-toggle').click(function() {
                $('.dropdown-content').toggle();
            });

            $('.truck-details').click(function() {
                var truckId = $(this).data('truck-id');
                $('#truck').val(truckId);

                if (truckId) {
                    $('#item-table tbody tr').each(function() {
                        populateMarkaAndItems($(this));
                    });
                }
                $('.dropdown-content').hide();
            });

            $(document).click(function(event) {
                if (!$(event.target).closest('.custom-dropdown').length) {
                    $('.dropdown-content').hide();
                }
            });
        });

        function showOnlyThisTruckDetails(searchKeys) {
            var filter = searchKeys.toLowerCase();

            $('#truck-table-body tr').each(function() {
                var rowText = $(this).text().toLowerCase();
                if (rowText.includes(filter)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }

        document.querySelectorAll('#truck-table-body .truck-details').forEach(function(row) {
            row.addEventListener('click', function() {
                var truckId = row.getAttribute('data-truck-id');
                var detailID = row.getAttribute('data-details-id');
                var itemsMarka = row.getAttribute('data-items-marka');
                var mainCateName = row.getAttribute('data-main-cate');
                var parentCateName = row.getAttribute('data-parent-cate');
                var childCateName = row.getAttribute('data-child-cate');

                document.getElementById('setGoodsDetailId').value = detailID;
                document.getElementById('setItemsMarka').value = itemsMarka;
                document.getElementById('setMainCateName').value = mainCateName;
                document.getElementById('setParentCateName').value = parentCateName;
                document.getElementById('setChildCateName').value = childCateName;

                var submitBtn = document.getElementById('submitData');

                var bori = row.cells[6].textContent;
                var weight = row.cells[7].textContent;
                var marka = row.cells[5].textContent;
                var mainCate = row.cells[2].textContent;
                var parentCate = row.cells[3].textContent;
                var childCate = row.cells[4].textContent;

                var boriSpan = document.getElementById('available-bori');
                var boriQuantitySpan = document.getElementById('bori-quantity');
                var outofstockSpan = document.getElementById('outofstock');

                $('#setBori').val(bori);
                if (bori > 0) {
                    if (submitBtn) submitBtn.disabled = false;
                    if (boriQuantitySpan) boriQuantitySpan.textContent = bori;
                    if (boriSpan) boriSpan.style.display = 'inline';
                    let boriCheck = document.querySelector('.bori-check');
                    if (boriCheck) boriCheck.removeAttribute('readonly');
                    if (outofstockSpan) outofstockSpan.textContent = '';
                } else {
                    if (outofstockSpan) outofstockSpan.textContent = 'Out of stock!';
                    let boriCheck = document.querySelector('.bori-check');
                    if (boriCheck) boriCheck.setAttribute('readonly', true);
                    if (boriSpan) boriSpan.style.display = 'none';
                }

                var weightSpan = document.getElementById('available-weight');
                var weightQuantitySpan = document.getElementById('weight-quantity');
                var outofstockSpanWeight = document.getElementById('outofstockWeight');

                $('#setWeight').val(weight);

                var hiddenSelect = document.getElementById('truck');
                if (hiddenSelect) {
                    hiddenSelect.value = truckId;
                    hiddenSelect.setAttribute('data-bori', bori);
                }

                let toggleText = document.getElementById('truck-toggle-text');
                if (toggleText) {
                    toggleText.innerHTML = `<strong>Truck: ${row.cells[1].textContent}</strong> | Marka: ${marka} | Bori: ${bori} | Weight: ${weight}`;
                }
            });
        });

        document.addEventListener('keydown', function(event) {
            if (event.key !== "Enter" && event.key !== "Tab") return;

            const target = event.target;

            if (target.classList.contains('amount-input')) {
                const lastInput = document.querySelector('#item-table tbody tr:last .amount-input');
                if (target === lastInput) {
                    event.preventDefault();
                    addRow();

                    setTimeout(() => {
                        const newRow = document.querySelector('#item-table tbody tr:last');
                        if (newRow) {
                            const weightInput = newRow.querySelector('.weight-input');
                            if (weightInput) weightInput.focus();
                        }
                    }, 50);
                }
            }

            if (target.name === 'per_bori_weight[]') {
                const allBoriInputs = document.querySelectorAll('input[name="per_bori_weight[]"]');
                const lastInput = allBoriInputs[allBoriInputs.length - 1];
                if (target === lastInput) {
                    event.preventDefault();
                    addBoriRow();

                    setTimeout(() => {
                        const newRow = document.querySelector('#bori-table tbody tr:last');
                        if (newRow) {
                            const weightInput = newRow.querySelector('input[name="per_bori_weight[]"]');
                            if (weightInput) weightInput.focus();
                        }
                    }, 50);
                }
            }

            if (event.altKey && (event.key === 'd' || event.key === 'D')) {
                event.preventDefault();
                const focusedRow = target.closest('tr');
                if (focusedRow) {
                    focusedRow.remove();
                    updateSubmitButton();
                    updateBoriDetails();
                    updateTotals();
                } else {
                    showErrorNotification('Please select the row you want to delete.');
                }
            }
        });

        function showErrorNotification(message) {
            const notification = document.getElementById('errorNotification');
            const errorMessage = document.getElementById('errorMessage');

            if (notification && errorMessage) {
                errorMessage.innerText = message;
                notification.style.display = 'block';

                setTimeout(() => {
                    notification.style.display = 'none';
                }, 4000);
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('salesForm').addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    if (e.target.tagName !== 'TEXTAREA') {
                        e.preventDefault();
                    }
                }
            });
        });

        $(window).on('load', function() {
            setTimeout(function() {
                var $input = $('#truck-search');
                if ($input.length) {
                    $input[0].focus({ preventScroll: true });
                }
            }, 600);
        });

        $(function() {
            $('select.select2').select2({
                placeholder: '- Select -',
                allowClear: true,
                width: '100%'
            });

            $(document).on('select2:open', function() {
                setTimeout(() => {
                    const search = document.querySelector('.select2-search__field');
                    if (search) search.focus();
                }, 0);
            });

            function isActuallyVisible(el) {
                if (!el || el.disabled) return false;
                const style = window.getComputedStyle(el);
                if (style.visibility === 'hidden' || style.display === 'none') return false;
                if (el.offsetParent === null && !el.classList.contains('select2-hidden-accessible')) return false;
                return true;
            }

            function getFocusables() {
                return Array.from(document.querySelectorAll(
                    'input, textarea, select, button, [tabindex]:not([tabindex="-1"])'
                )).filter(el => {
                    if (el.disabled) return false;
                    const isSelect2Hidden = el.classList.contains('select2-hidden-accessible');
                    return isActuallyVisible(el) || isSelect2Hidden;
                });
            }

            function focusNextField(current) {
                const focusables = getFocusables();
                const idx = focusables.indexOf(current);
                if (idx === -1) return;
                for (let i = idx + 1; i < focusables.length; i++) {
                    const next = focusables[i];
                    if (!next) break;

                    if (next.tagName === 'SELECT' && next.classList.contains('select2-hidden-accessible')) {
                        $(next).select2('open');
                        return;
                    }

                    if (isActuallyVisible(next)) {
                        next.focus();
                        return;
                    }
                }
            }

            function focusPrevField(current) {
                const focusables = getFocusables();
                const idx = focusables.indexOf(current);
                if (idx === -1) return;
                for (let i = idx - 1; i >= 0; i--) {
                    const prev = focusables[i];
                    if (!prev) break;

                    if (prev.tagName === 'SELECT' && prev.classList.contains('select2-hidden-accessible')) {
                        $(prev).select2('open');
                        return;
                    }

                    if (isActuallyVisible(prev)) {
                        prev.focus();
                        return;
                    }
                }
            }

            $(document).on('keydown', 'input, textarea, select, button, [tabindex]:not([tabindex="-1"])', function(e) {
                if (e.key === 'Tab') {
                    if (e.target.classList.contains('amount-input') || e.target.name === 'per_bori_weight[]') {
                        return;
                    }
                    e.preventDefault();
                    if (e.shiftKey) {
                        focusPrevField(this);
                    } else {
                        focusNextField(this);
                    }
                }
            });

            $(document).on('keydown', '.select2-search__field', function(e) {
                if (e.key === 'Tab') {
                    e.preventDefault();
                    const enterEvent = new KeyboardEvent('keydown', {
                        key: 'Enter',
                        code: 'Enter',
                        keyCode: 13,
                        which: 13,
                        bubbles: true
                    });
                    this.dispatchEvent(enterEvent);

                    const $select = $('.select2-container--open').prev('select');
                    if ($select.length) {
                        $select.select2('close');
                        const rawSelect = $select[0];
                        setTimeout(() => {
                            if (e.shiftKey) {
                                focusPrevField(rawSelect);
                            } else {
                                focusNextField(rawSelect);
                            }
                        }, 10);
                    }
                }
            });
        });

        function refreshTruckSelects() {
            $('.select-truck-good').each(function() {
                let currentId = $(this).val();
                $(this).html(getTruckOptions(currentId));
            });
        }

        $(document).ready(function() {
            updateSubmitButton();

            // Select truck from dropdown
            $(document).on("click", ".select-truck", function() {
                let row = $(this).closest("tr");
                let truckId = row.data("truck-id");
                let detailId = row.data("details-id");
                let grdId = row.data("details-id");
                let bori = row.data("bori");
                let marka = row.data("marka");

                if (!truckId) return;
                if (!selectedTrucks.includes(truckId)) {
                    selectedTrucks.push(truckId);
                }
                if (!selectedMarka.includes(marka)) {
                    selectedMarka.push(marka);
                }

                $("#truck option[value='" + truckId + "']").prop("selected", true);
                refreshTruckSelects();

                let label = $("#truck option[value='" + truckId + "'][data-bori='" + bori + "']").text();

                $("#truck_labels").append(`
                    <span class="badge bg-success me-1" data-id="${truckId}-${bori}-${grdId}">
                        <i class="fa-solid fa-truck me-1"></i> ${label}
                    </span>
                `);

                row.find(".select-truck").addClass("d-none");
                row.find(".deselect-truck").removeClass("d-none");
                row.addClass("selected");

                updateToggleText();
            });

            // Deselect truck
            $(document).on("click", ".deselect-truck", function() {
                let row = $(this).closest("tr");
                let truckId = row.data("truck-id");
                let marka = row.data("marka");
                let grdId = row.data("details-id");
                let bori = row.data("bori");

                selectedTrucks = selectedTrucks.filter(id => id !== truckId);
                selectedMarka = selectedMarka.filter(id => id !== marka);
                refreshTruckSelects();

                $("#truck option[value='" + truckId + "']").prop("selected", false);
                $("#truck_labels span[data-id='" + truckId + "-" + bori + "-" + grdId + "']").remove();

                row.find(".deselect-truck").addClass("d-none");
                row.find(".select-truck").removeClass("d-none");
                row.removeClass("selected");

                updateToggleText();
            });

            function updateToggleText() {
                let selected = $("#truck option:selected").map(function() {
                    return $(this).text();
                }).get();

                let toggleText = document.getElementById('truck-toggle-text');
                if (toggleText) {
                    if (selected.length) {
                        toggleText.innerHTML = `<strong>Selected Trucks (${selected.length}):</strong> ${selected.join(", ")}`;
                    } else {
                        toggleText.innerHTML = `<i class="fa-solid fa-truck me-2 text-muted"></i> - Click to select incoming truck / ٹرک منتخب کریں -`;
                    }
                }
            }

            // Remove row button click inside item-table
            $(document).on("click", ".remove-row", function() {
                let row = $(this).closest("tr");
                let truckId = row.data("truck-id");
                let detailId = row.data("details-id");

                $("#truck option[value='" + truckId + "']").prop("selected", false);

                $(".truck-details[data-details-id='" + detailId + "']")
                    .find(".deselect-truck").addClass("d-none")
                    .end().find(".select-truck").removeClass("d-none");

                row.remove();
                updateSubmitButton();
                updateTotals();
            });
        });

        // Initialize with 1 row on page load
        $(document).ready(function() {
            addRow();
        });
    </script>
@endpush