@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>Edit Sale</span>
        </div>

        <div class="sl-page-header">
            <div class="sl-header-title">
                <div class="sl-header-icon">
                    <i class="fa-solid fa-pen-to-square"></i>
                </div>
                <div class="sl-header-text">
                    <h2>Edit Sale</h2>
                    <div class="sl-subtitle">
                        <span>سیل بل کی تفصیلات میں ترمیم</span>
                        <span class="text-muted">•</span>
                        <span class="text-muted">Update 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.update', Crypt::encrypt($sale->id_sales)) }}" method="POST" id="salesForm" autocomplete="off">
                @method('put')
                @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" value="{{ $sale->sales_date ?? '' }}" 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">
                                    <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-select btn-outline-success py-1 px-2">
                                                                            <i class="fa fa-check"></i>
                                                                        </button>
                                                                        <button type="button" class="btn btn-sm btn-deselect 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 @if ($customer->id_customers == $sale->customer_id) selected @endif
                                                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" {{ ($sale->status ?? 1) == 1 ? 'selected' : '' }}>🟢 Active (فعال)</option>
                                    <option value="0" {{ ($sale->status ?? 1) == 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="سیل بل سے متعلق نوٹس درج کریں...">{{ $sale->details ?? '' }}</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 autoFillTrucks() --}}
                                </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>
                                        @if(isset($sale->salesPerBoriWeight) && count($sale->salesPerBoriWeight) > 0)
                                            @foreach($sale->salesPerBoriWeight as $index => $spb)
                                                <tr>
                                                    <td><input type="text" class="form-control" name="bori_number[]" value="{{ $spb->bori_no ?? ($index + 1) }}" readonly></td>
                                                    <td><input type="text" class="form-control n-amount" name="per_bori_weight[]" value="{{ $spb->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>
                                            @endforeach
                                        @else
                                            <tr>
                                                <td><input type="text" class="form-control" name="bori_number[]" value="1" readonly></td>
                                                <td><input type="text" class="form-control n-amount" 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>
                                        @endif
                                    </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-amount" id="total_bori" name="total_bori"
                                value="{{ old('total_bori', $sale->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-amount" id="total_amount" name="total_amount"
                                value="{{ old('total_amount', $sale->total_amount ?? '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-amount" id="cash_received" name="cash_received"
                                value="{{ $sale->paid ?? 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-amount" id="remaining_amount" name="remaining_amount"
                                value="{{ old('remaining_amount', $sale->remaining_amount ?? '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>Update 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-amount').forEach(function(el) {
                new AutoNumeric(el, {
                    digitGroupSeparator: ',',
                    decimalPlaces: 0,
                    decimalCharacter: '.',
                    minimumValue: '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);

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

                            response.customers.forEach(function(customer) {
                                const option = `<option value="${customer.id_customers}">
                                    ${customer.customer_name} | ${customer.customer_name_urdu}
                                </option>`;
                                $('#customers').append(option);
                            });
                            $('#customer_name').val('');
                            $('#customer_name_urdu').val('');
                            toastr.success('Customer added successfully!');
                        }
                    },
                    error: function(response) {
                        if (!response.success) {
                            let errors = response.responseJSON.errors;

                            if (errors) {
                                Object.keys(errors).forEach(function(key) {
                                    errors[key].forEach(function(msg) {
                                        toastr.error(msg);
                                    });
                                });
                            } else {
                                toastr.error(response.responseJSON.message);
                            }
                        }
                    }
                });
            });
        });
    </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);
        }

        document.addEventListener('keydown', function(event) {
            if ((event.ctrlKey || event.metaKey) && event.key === 's') {
                event.preventDefault();
                document.getElementById('salesForm').submit();
            }

            if (event.key === 'Enter' && 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');
            let weight = parseFloat(AutoNumeric.getNumber(row.querySelector('.weight-input'))) || 0;
            let bori = parseFloat(AutoNumeric.getNumber(row.querySelector('.bori-check'))) || 0;
            let rate = parseFloat(AutoNumeric.getNumber(row.querySelector('.rate-input'))) || 0;
            
            if (weight === 0 && rate === 0) {
                updateTotals();
                return;
            }
            
            let amount;
            if (weight == null || weight == 0) {
                amount = (rate * bori);
            } else {
                amount = (rate * weight) / 40;
            }

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

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

        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">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 in stock: <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">
                        <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,
                    decimalCharacter: '.',
                    minimumValue: '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-select').val();

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

                if (
                    otherRow.find("input[name='good_receipts_truck_ids[]']").val() == truckId &&
                    otherRow.find('.main-cate').val() == mainId &&
                    otherRow.find('.parent-cate').val() == parentId &&
                    otherRow.find('.child-cate').val() == childId &&
                    otherRow.find('.marka-select').val() == markaId
                ) {
                    let input = otherRow.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 availableBori = Number(row.find('.bori-check').data('max-bori')) || 0;
            let usedBori = getUsedBori(row);
            let remainingBori = availableBori - usedBori;

            let enteredBori = Number(AutoNumeric.getAutoNumericElement(input).getNumber()) || 0;
            let errorSpan = row.find('.bori-error');

            if (enteredBori > remainingBori) {
                errorSpan.show();
                errorSpan.text('Remaining bori: ' + remainingBori);
                $(input).addClass('is-invalid');
                $('#submitData').prop('disabled', true);
            } else {
                errorSpan.hide();
                $(input).removeClass('is-invalid');
                $('#submitData').prop('disabled', false);
            }
        }

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

            $('#item-table tbody tr').each(function() {
                let row = $(this);
                let bori = parseFloat(AutoNumeric.getNumber(row.find('.bori-check')[0])) || 0;
                let amount = parseFloat(AutoNumeric.getNumber(row.find('.amount-input')[0])) || 0;

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

            if (AutoNumeric.getAutoNumericElement('#total_bori')) {
                AutoNumeric.getAutoNumericElement('#total_bori').set(totalBori);
            } else {
                $('#total_bori').val(totalBori);
            }

            if (AutoNumeric.getAutoNumericElement('#total_amount')) {
                AutoNumeric.getAutoNumericElement('#total_amount').set(totalAmount);
            } else {
                $('#total_amount').val(totalAmount);
            }

            let cashReceived = parseFloat(AutoNumeric.getNumber($('#cash_received')[0])) || 0;
            let remainingAmount = totalAmount - cashReceived;

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

        $(document).on('input', '#cash_received', function() {
            updateTotals();
        });

        function populateMarkaAndItems(row) {
            let truckId = row.find('.select-truck-good').val();
            if (!truckId) return;

            let mainSelect = row.find('.main-cate');
            let parentSelect = row.find('.parent-cate');
            let childSelect = row.find('.child-cate');
            let markaSelect = row.find('.marka');

            let truck = trucks.find(t => String(t.id_truck) === String(truckId));
            if (!truck) return;

            let details = [];
            if (truck.good_receipts) {
                truck.good_receipts.forEach(gr => {
                    if (gr.good_receipt_details) {
                        details = details.concat(gr.good_receipt_details);
                    }
                });
            } else if (truck.goodReceipts) {
                truck.goodReceipts.forEach(gr => {
                    if (gr.goodReceiptDetails) {
                        details = details.concat(gr.goodReceiptDetails);
                    }
                });
            }

            let mainCategories = [];
            let markas = [];

            details.forEach(d => {
                if (d.product_main_cate && !mainCategories.some(m => m.id === d.product_main_cate.id_products_category)) {
                    mainCategories.push({
                        id: d.product_main_cate.id_products_category,
                        name: d.product_main_cate.products_category_name
                    });
                } else if (d.productMainCate && !mainCategories.some(m => m.id === d.productMainCate.id_products_category)) {
                    mainCategories.push({
                        id: d.productMainCate.id_products_category,
                        name: d.productMainCate.products_category_name
                    });
                }

                if (d.marka && !markas.includes(d.marka)) {
                    markas.push(d.marka);
                }
            });

            mainSelect.empty().append('<option value="">Select Main Category</option>');
            mainCategories.forEach(m => {
                mainSelect.append(`<option value="${m.id}">${m.name}</option>`);
            });

            markaSelect.empty().append('<option value="">Select Marka</option>');
            markas.forEach(mk => {
                markaSelect.append(`<option value="${mk}">${mk}</option>`);
            });
        }

        $(document).on('change', '.select-truck-good', function() {
            let row = $(this).closest('tr');
            populateMarkaAndItems(row);
        });

        $(document).on('click', '.remove-row', function() {
            let tbody = $('#item-table tbody');
            if (tbody.find('tr').length > 1) {
                $(this).closest('tr').remove();
                updateTotals();
                updateSubmitButton();
            } else {
                $('#errorMessage').text('At least one item row is required.');
                $('#errorNotification').fadeIn().delay(3000).fadeOut();
            }
        });

        function addBoriRow() {
            let count = $('#bori-table tbody tr').length + 1;
            let row = `<tr>
                <td><input type="text" class="form-control" name="bori_number[]" value="${count}" readonly></td>
                <td><input type="text" class="form-control n-amount" 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 newEl = $('#bori-table tbody tr:last .n-amount')[0];
            new AutoNumeric(newEl, {
                digitGroupSeparator: ',',
                decimalPlaces: 0,
                unformatOnSubmit: true
            });
        }

        function removeBoriRow(button) {
            let tbody = $('#bori-table tbody');
            if (tbody.find('tr').length > 1) {
                $(button).closest('tr').remove();
                tbody.find('tr').each(function(index) {
                    $(this).find('input[name="bori_number[]"]').val(index + 1);
                });
            }
        }

        function checkAndUpdateBori(row) {
            // Recalculate bori bounds
        }

        function handleInputChange() {
            // Additional listeners
        }
    </script>

    @php
        $truckDataArray = $sale->salesItemsDetails
            ->map(function ($item) {
                return [
                    'good_detail_id' => $item->good_detail_id,
                    'id' => $item->id_sid,
                    'bori' => $item->bori,
                    'weight' => $item->weight,
                    'marka' => $item->marka,
                    'rate' => $item->rate,
                    'amount' => $item->amount,
                    'mainCate' => $item->items_main_cate ?? '',
                    'parentCate' => $item->items_parent_cate ?? '',
                    'childCate' => $item->items_child_cate ?? '',
                    'mainCateName' =>
                        $item->productMainCate?->products_category_name_urdu ?? ($item->items_main_cate_name ?? ''),
                    'parentCateName' => $item->productParentCate?->name_urdu ?? ($item->items_parent_cate_name ?? ''),
                    'childCateName' => $item->productChildCate?->name_urdu ?? ($item->items_child_cate_name ?? ''),
                ];
            })
            ->values()
            ->toArray();
    @endphp

    <script>
        const truckData = @json($truckDataArray);

        function ensureSelectOption($select, value, text) {
            value = value == null ? '' : String(value);
            text = text == null ? String(value) : String(text);
            if ($select.find("option[value='" + value + "']").length === 0) {
                $select.append(`<option value="${value}">${text}</option>`);
            }
            $select.val(value);
        }

        function refreshTruckSelects() {
            $('.select-truck-good').each(function() {
                const $sel = $(this);
                const currentVal = $sel.val() == null ? '' : String($sel.val());
                $sel.html(getTruckOptions(currentVal));
                if (currentVal !== '') $sel.val(currentVal);
            });
        }

        function forceSelectTruckRow(row) {
            if (row.hasClass('is-selected')) return;

            row.removeClass('select-truck')
                .addClass('deselect-truck is-selected');

            row.find('.btn-select').addClass('d-none');
            row.find('.btn-deselect').removeClass('d-none');
        }

        function toggleTruckRow(row) {
            $('.dropdown-content').css('display', 'block');
            let isSelected = row.hasClass('is-selected');

            if (isSelected) {
                row.removeClass('deselect-truck is-selected').addClass('select-truck');
                row.find('.btn-deselect').addClass('d-none');
                row.find('.btn-select').removeClass('d-none');
            } else {
                row.removeClass('select-truck').addClass('deselect-truck is-selected');
                row.find('.btn-select').addClass('d-none');
                row.find('.btn-deselect').removeClass('d-none');
            }
        }

        $(document).on('click', '.truck-details', function(e) {
            e.stopPropagation();
            toggleTruckRow($(this));
        });

        function syncTruckRows() {
            $('.truck-details').each(function() {
                const row = $(this);
                if (row.hasClass('is-selected')) {
                    row.removeClass('select-truck').addClass('deselect-truck');
                } else {
                    row.removeClass('deselect-truck').addClass('select-truck');
                }
            });
        }

        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).ready(function() {
            var saleDate = "{{ $sale->sales_date ?? '' }}";
            if (!$("#sales_date").val()) {
                if (saleDate) {
                    $("#sales_date").val(saleDate);
                } else {
                    var today = new Date();
                    var formattedDate = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
                    $("#sales_date").val(formattedDate);
                }
            }

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

            $('#customers').select2({
                theme: 'default',
                width: '100%'
            });

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

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

            function autoFillTrucks() {
                Object.keys(truckData).forEach(goodDetailId => {
                    const detail = truckData[goodDetailId];

                    $("#truck option[value='" + detail.good_detail_id + "']").prop("selected", true);
                    let $option = $("#truck option[data-grd-id='" + detail.good_detail_id + "']");

                    if (!$option.length) return;

                    $option.prop('selected', true);
                    const truckId = String($option.val() || '');
                    const bori = $option.data('bori') || detail.bori || '';
                    const label = $option.text() || truckId;

                    let badgeKey = `${truckId}-${detail.mainCate}-${detail.parentCate}-${detail.childCate}-${detail.marka}`;
                    let badgeExists = $("#truck_labels span.badge[data-badge-key='" + badgeKey + "']").length > 0;

                    if (!badgeExists) {
                        $("#truck_labels").append(`
                            <span class="badge bg-success me-1 mb-1 p-2 shadow-sm text-white"
                                  data-id="${truckId}-${bori}-${detail.good_detail_id}"
                                  data-badge-key="${badgeKey}"
                                  data-truck-id="${truckId}"
                                  data-main-cate="${detail.mainCate}"
                                  data-parent-cate="${detail.parentCate}"
                                  data-child-cate="${detail.childCate}"
                                  data-marka="${detail.marka}">
                               <i class="fa-solid fa-truck me-1"></i> ${label}
                            </span>
                        `);
                    }

                    $("#truck-toggle-text").html(`<i class="fa-solid fa-truck me-2 text-primary"></i> <strong>${label}</strong>`);

                    const rowDropdown = $("tr.truck-details[data-details-id='" + detail.good_detail_id + "']");
                    let marka = rowDropdown.data('marka');
                    if (rowDropdown.length) {
                        rowDropdown.addClass('is-selected deselect-truck');
                        rowDropdown.find(".btn-select").addClass("d-none");
                        rowDropdown.find(".btn-deselect").removeClass("d-none");
                        forceSelectTruckRow(rowDropdown);
                    }

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

                    refreshTruckSelects();

                    const rowHtml = `<tr data-truck-id="${truckId}" data-details-id="${detail.good_detail_id}" data-is-edit="true">
                        <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_${detail.good_detail_id}">
                            <input type="text" class="form-control bori-check n-amount" name="bori[]" value="${detail.bori || ''}" data-max-bori="${detail.bori || ''}" onkeyup="checkBoriQty(this)">
                            <small class="text-muted d-block mt-1">Available: <strong>${detail.bori || ''}</strong></small>
                            <span class="bori-error text-danger small font-weight-bold" style="display:none;">Exceeded available Bori!</span>
                        </td>
                        <td>
                            <input type="hidden" id="setWeight_${detail.good_detail_id}">
                            <input type="text" class="form-control n-amount weight-input" name="weight[]" value="${detail.weight || ''}" oninput="calculateAmount(this)">
                            <span class="available-weight text-muted small" style="display:none;">
                                Stock: <span class="weight-quantity"></span>
                            </span>
                            <span class="outofstockWeight text-danger small font-weight-bold"></span>
                        </td>
                        <input type="hidden" class="good_receipt_detail_id" name="good_receipt_detail_id[]" value="${detail.good_detail_id}">
                        <td><input type="text" class="form-control n-amount rate-input font-weight-bold text-end" name="rate[]" value="${detail.rate || ''}" oninput="calculateAmount(this)"></td>
                        <td><input type="text" class="form-control n-amount amount-input font-weight-bold text-end text-primary" name="amount[]" value="${detail.amount || ''}" oninput="updateTotals()"></td>
                        <td class="text-center">
                            <button type="button" class="btn btn-sm btn-outline-danger remove-row" title="Delete Row">
                                <i class="fa fa-trash"></i>
                            </button>
                        </td>
                    </tr>`;

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

                    const $lastRow = $('#item-table tbody tr:last');
                    const $main = $lastRow.find('.main-cate');
                    const $parent = $lastRow.find('.parent-cate');
                    const $child = $lastRow.find('.child-cate');
                    const $marka = $lastRow.find('.marka');

                    $lastRow.data('original-detail', detail);

                    $lastRow.find('.n-amount').each(function() {
                        new AutoNumeric(this, {
                            digitGroupSeparator: ',',
                            decimalPlaces: 0,
                            decimalCharacter: '.',
                            minimumValue: '0',
                            unformatOnSubmit: true
                        });
                    });

                    let boriEl = $lastRow.find('.bori-check')[0];
                    let weightEl = $lastRow.find('.weight-input')[0];
                    let rateEl = $lastRow.find('.rate-input')[0];
                    let amountEl = $lastRow.find('.amount-input')[0];

                    if (boriEl && detail.bori != null && detail.bori !== '') {
                        let anBori = AutoNumeric.getAutoNumericElement(boriEl);
                        if (anBori) anBori.set(detail.bori);
                    }
                    if (weightEl && detail.weight != null && detail.weight !== '') {
                        let anWeight = AutoNumeric.getAutoNumericElement(weightEl);
                        if (anWeight) anWeight.set(detail.weight);
                    }
                    if (rateEl && detail.rate != null && detail.rate !== '') {
                        let anRate = AutoNumeric.getAutoNumericElement(rateEl);
                        if (anRate) anRate.set(detail.rate);
                    }
                    if (amountEl && detail.amount != null && detail.amount !== '') {
                        let anAmount = AutoNumeric.getAutoNumericElement(amountEl);
                        if (anAmount) anAmount.set(detail.amount);
                    }

                    ensureSelectOption($main, detail.mainCate, detail.mainCateName || detail.mainCate);
                    ensureSelectOption($parent, detail.parentCate, detail.parentCateName || detail.parentCate);
                    ensureSelectOption($child, detail.childCate, detail.childCateName || detail.childCate);
                    if (detail.marka) {
                        ensureSelectOption($marka, detail.marka, detail.marka);
                    }

                    checkAndUpdateBori($lastRow);
                    refreshTruckSelects();
                });
            }

            autoFillTrucks();
            updateTotals();
            updateSubmitButton();
            syncTruckRows();
        });
    </script>
@endpush