@extends('layouts.app')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />

    <div class="container mt-3">
        <div class="card shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                <h5 class="mb-0 fw-bold text-primary">{{ isset($sale) ? 'Edit Sale Invoice ' . $sale->invoice_no : 'New Sale (Batch-Wise)' }}</h5>
                <a href="{{ route('sales.index') }}" class="btn btn-outline-secondary btn-sm">List Sales</a>
            </div>

            <div class="card-body p-3">
                @if (session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif

                <form action="{{ isset($sale) ? route('sales.update', $sale) : route('sales.store') }}" method="POST" id="saleForm">
                    @csrf
                    @if (isset($sale)) @method('PUT') @endif

                    {{-- Invoice Header Information (Salesman Selection) --}}
                    <div class="row mb-4 p-3 bg-light rounded border align-items-center">
                        <div class="col-12 col-md-6">
                            <label for="salesman_id" class="form-label fw-bold text-dark">
                                Salesman / Representative <span class="text-danger">*</span>
                            </label>
                            <select name="salesman_id" id="salesman_id" class="form-select salesman-select" required>
                                <option value="">-- Select Salesman --</option>
                                @foreach ($salesmen as $salesman)
                                    <option value="{{ $salesman->id }}"
                                        {{ old('salesman_id', $sale->salesman_id ?? '') == $salesman->id ? 'selected' : '' }}>
                                        {{ $salesman->name }} {{ isset($salesman->phone) ? "({$salesman->phone})" : '' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6 mt-3 mt-md-0 text-md-end text-muted small">
                            <strong>Invoice Date:</strong> {{ isset($sale) ? $sale->created_at->format('d M, Y') : date('d M, Y') }}
                        </div>
                    </div>

                    {{-- Desktop Headers --}}
                    <div class="row d-none d-md-flex mb-2 fw-bold text-secondary text-uppercase" style="font-size: 0.8rem;">
                        <div class="col-md-3">Products</div>
                        <div class="col-md-3">Cartons / Boxes / Pieces</div>
                        <div class="col-md-1">Unit Price</div>
                        <div class="col-md-2 text-end">Total Price</div>
                        <div class="col-md-1">Commission (Tk)</div>
                        <div class="col-md-1">Free Item</div>
                        <div class="col-md-1 text-center">Action</div>
                    </div>

                    <div id="sale-rows">
                        {{-- Saved invoice rows or the blank create row --}}
                        @foreach (isset($sale) ? $sale->details : [null] as $detail)
                        @php
                            $medicine = $detail?->medicine;
                            $perBox = max(1, (int) ($medicine?->pieces_per_box ?? 1));
                            $perCarton = $perBox * max(1, (int) ($medicine?->boxes_per_carton ?? 1));
                            $usesBoxes = ($medicine?->package_type ?: 'carton_box_pcs') === 'carton_box_pcs';
                            $savedQty = (float) ($detail?->quantity ?? 0);
                            $isKg = ($medicine?->unit ?: 'pcs') === 'kg';
                            $cartonSize = $usesBoxes ? $perCarton : $perBox;
                            $cartons = !$isKg ? (int) floor($savedQty / $cartonSize) : 0;
                            $leftPieces = !$isKg ? (int) $savedQty % $cartonSize : 0;
                            $boxes = (!$isKg && $usesBoxes) ? (int) floor($leftPieces / $perBox) : 0;
                            $pieces = (!$isKg && $usesBoxes) ? $leftPieces % $perBox : $leftPieces;
                        @endphp
                        <div class="sale-item-row border rounded p-3 mb-3 bg-light shadow-sm">
                            <div class="row g-2 align-items-center">
                                {{-- Product Selection --}}
                                <div class="col-12 col-md-3">
                                    <label class="d-md-none fw-bold small mb-1">Product</label>
                                    <div class="position-relative product-search-wrapper">
                                    <input type="text" class="form-control medicine-search-input" value="{{ $medicine ? $medicine->name . ' (' . ($medicine->unit ?: 'pcs') . ')' : '' }}" placeholder="Type product name..."
                                        autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" required>
                                    <div class="product-suggestions list-group position-absolute w-100 shadow d-none"
                                        role="listbox" style="z-index: 1050; max-height: 240px; overflow-y: auto;"></div>
                                    <select name="medicine_id[]" class="medicine-select d-none" tabindex="-1" aria-hidden="true">
                                        <option value="">Search Product...</option>
                                        @foreach ($medicines as $medicine)
                                            <option value="{{ $medicine->id }}" @selected($detail && $detail->medicine_id == $medicine->id)
                                                data-batches="{{ json_encode($medicine->stocks) }}"
                                                data-fixed-price="{{ $medicine->unitPrice->unit_price ?? '' }}"
                                                data-unit="{{ $medicine->unit ?: 'pcs' }}"
                                                data-pieces-per-kg="{{ $medicine->pieces_per_kg }}"
                                                data-pieces-per-box="{{ $medicine->pieces_per_box }}"
                                                data-boxes-per-carton="{{ $medicine->boxes_per_carton }}"
                                                data-package-type="{{ $medicine->package_type ?: 'carton_box_pcs' }}">
                                                {{ $medicine->name }} ({{ $medicine->unit ?: 'pcs' }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @if (isset($sale) && $detail)<input type="hidden" name="detail_id[]" value="{{ $detail->id }}">@endif
                                    </div>
                                    <small class="text-muted product-unit-label d-block"></small>
                                </div>

                                {{-- Quantity --}}
                                <div class="col-12 col-md-3">
                                    <label class="d-md-none fw-bold small mb-1">Quantity</label>
                                    <input type="hidden" name="quantity[]" class="qty-input" value="{{ $detail?->quantity }}">
                                    <div class="row g-1 package-quantity-group d-none">
                                        <div class="col-4"><input type="number" name="carton_quantity[]"
                                                class="form-control form-control-sm carton-qty-input" min="0"
                                                value="{{ $cartons }}" aria-label="Cartons" placeholder="Ctn"></div>
                                        <div class="col-4 box-quantity-field"><input type="number" name="box_quantity[]"
                                                class="form-control form-control-sm box-qty-input" min="0"
                                                value="{{ $boxes }}" aria-label="Boxes" placeholder="Box"></div>
                                        <div class="col-4"><input type="number" name="piece_quantity[]"
                                                class="form-control form-control-sm piece-qty-input" min="0"
                                                value="{{ $pieces }}" aria-label="Pieces" placeholder="Pcs"></div>
                                    </div>
                                    <div class="row g-1 kg-quantity-group d-none">
                                        <div class="col-6"><input type="number" name="kg_quantity[]"
                                                class="form-control form-control-sm kg-qty-input" min="0"
                                                step="0.001" value="{{ $isKg ? number_format($savedQty, 2, '.', '') : '0' }}" aria-label="Kilograms" placeholder="Kg"></div>
                                        <div class="col-6"><input type="number" name="kg_piece_quantity[]"
                                                class="form-control form-control-sm kg-piece-qty-input" min="0"
                                                step="1" value="0" aria-label="Pieces" placeholder="Pieces">
                                        </div>
                                    </div>
                                    <small class="text-muted quantity-summary d-block"></small>
                                    <small class="text-primary stock-info fw-bold d-block mt-1"
                                        style="font-size: 0.65rem;"></small>
                                </div>

                                {{-- Fixed Unit Price (Readonly) --}}
                                <div class="col-6 col-md-1">
                                    <label class="d-md-none fw-bold small mb-1">Unit Price (Tk)</label>
                                    <input type="number" step="0.01" class="form-control form-control-sm unit-price-input bg-white"
                                        placeholder="0.00" value="{{ $detail?->selling_price }}" readonly>
                                </div>

                                {{-- Row Total Price --}}
                                <div class="col-6 col-md-2">
                                    <label class="d-md-none fw-bold small mb-1">Total Price</label>
                                    <input type="number" step="0.01" name="total_price[]"
                                        class="form-control form-control-sm row-total-input bg-white fw-bold text-success text-end"
                                        placeholder="0.00" value="{{ $detail?->total_price }}" readonly required>
                                </div>

                                {{-- Flat commission amount for this sale row --}}
                                <div class="col-6 col-md-1">
                                    <label class="d-md-none fw-bold small mb-1">Commission (Tk)</label>
                                    <input type="number" step="0.01" min="0" name="commission[]"
                                        class="form-control form-control-sm commission-input p-1" placeholder="0.00" value="{{ $detail?->commission ?? 0 }}">
                                </div>

                                {{-- Free Item Quantity --}}
                                <div class="col-6 col-md-1">
                                    <label class="d-md-none fw-bold small mb-1">Free Item</label>
                                    <input type="number" name="free_quantity[]"
                                        class="form-control form-control-sm free-qty-input" min="0" step="1"
                                        value="{{ $detail?->free_quantity ?? 0 }}" placeholder="0">
                                    <small class="text-success fw-bold d-block mt-1"
                                        style="font-size: 0.65rem;">Non-billed</small>
                                </div>

                                {{-- Action Button --}}
                                <div class="col-12 col-md-1 text-center mt-2 mt-md-0">
                                    <button type="button" class="btn btn-outline-danger btn-sm remove-row"
                                        aria-label="Remove product row" title="Remove product row">
                                        <i class="bi bi-trash3" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    <div class="row mt-4 align-items-center">
                        <div class="col-12 col-md-6 mb-3 mb-md-0">
                            <button type="button" class="btn btn-success px-4" id="addMore">
                                + Add Item
                            </button>
                        </div>
                        <div class="col-12 col-md-6 text-md-end text-center">
                            <div class="p-2 border rounded bg-white d-inline-block w-100 w-md-auto shadow-sm">
                                <span class="text-secondary small text-uppercase">Grand Total (after commission):</span>
                                <h3 class="mb-0 fw-bold text-success">৳<span id="grandTotalDisplay">0.00</span></h3>
                            </div>
                        </div>
                    </div>

                    <button type="submit" id="submitBtn" class="btn btn-primary btn-lg w-100 mt-4 py-3 fw-bold shadow">
                        {{ isset($sale) ? 'Save Sale Changes' : 'Confirm & Save Sale' }}
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- Scripts --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

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

            // 1. Initialize Select2
            function initSelect2(element, placeholder = 'Type to search products...') {
                $(element).select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: placeholder,
                    allowClear: true,
                    minimumResultsForSearch: 0
                });
            }

            initSelect2('.salesman-select', 'Type to search salesmen...');

            $('.sale-item-row').each(function() {
                const row = $(this);
                if (row.find('.medicine-select').val()) {
                    const option = row.find('.medicine-select option:selected');
                    const qty = parseFloat(row.find('.qty-input').val()) || 0;
                    row.find('.product-unit-label').text(`Saved unit: ${option.data('unit') === 'kg' ? 'Kilograms (kg)' : 'Pieces (pcs)'}`);
                    row.find('.package-quantity-group').toggleClass('d-none', option.data('unit') === 'kg');
                    row.find('.kg-quantity-group').toggleClass('d-none', option.data('unit') !== 'kg');
                    row.find('.box-quantity-field').toggleClass('d-none', option.data('package-type') === 'carton_pcs');
                    const unitPrice = parseFloat(row.find('.unit-price-input').val()) || 0;
                    row.find('.row-total-input').val((unitPrice * qty).toFixed(2));
                }
            });
            calculateGrandTotal();

            function hideSuggestions(row) {
                row.find('.product-suggestions').addClass('d-none').empty();
                row.find('.medicine-search-input').attr('aria-expanded', 'false');
            }

            function showProductSuggestions(input) {
                const row = $(input).closest('.sale-item-row');
                const suggestions = row.find('.product-suggestions').empty();
                const query = $(input).val().trim().toLocaleLowerCase();

                if (!query) {
                    hideSuggestions(row);
                    return;
                }

                row.find('.medicine-select option').each(function() {
                    const option = this;
                    const productLabel = option.textContent.trim().replace(/\s+/g, ' ');
                    if (!option.value || !productLabel.toLocaleLowerCase().includes(query)) return;

                    $('<button type="button" role="option" aria-selected="false" class="list-group-item list-group-item-action py-2"></button>')
                        .text(productLabel)
                        .attr('data-product-id', option.value)
                        .appendTo(suggestions);
                });

                if (suggestions.children().length) {
                    suggestions.removeClass('d-none');
                    $(input).attr('aria-expanded', 'true');
                } else {
                    $('<div class="list-group-item text-muted small">No matching products</div>').appendTo(suggestions);
                    suggestions.removeClass('d-none');
                    $(input).attr('aria-expanded', 'true');
                }
            }

            $(document).on('input', '.medicine-search-input', function() {
                const row = $(this).closest('.sale-item-row');
                const selectedProduct = row.find('.medicine-select');
                if (selectedProduct.val()) {
                    selectedProduct.val('').trigger('change');
                }
                showProductSuggestions(this);
            });

            $(document).on('click', '.product-suggestions [data-product-id]', function() {
                const row = $(this).closest('.sale-item-row');
                const productId = $(this).attr('data-product-id');
                const option = row.find('.medicine-select option').filter(function() {
                    return this.value === productId;
                });

                const productLabel = option[0].textContent.trim().replace(/\s+/g, ' ');
                row.find('.medicine-search-input').val(productLabel);
                row.find('.medicine-select').val(productId).trigger('change');
                hideSuggestions(row);
            });

            $(document).on('keydown', '.medicine-search-input', function(event) {
                const row = $(this).closest('.sale-item-row');
                const suggestionList = row.find('.product-suggestions');

                if (event.key === 'Escape') {
                    hideSuggestions(row);
                    return;
                }

                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
                    if (suggestionList.hasClass('d-none')) showProductSuggestions(this);

                    const suggestions = row.find('.product-suggestions [data-product-id]');
                    if (!suggestions.length) return;

                    event.preventDefault();
                    const activeIndex = suggestions.index(suggestions.filter('.active'));
                    const step = event.key === 'ArrowDown' ? 1 : -1;
                    const nextIndex = activeIndex === -1
                        ? (step > 0 ? 0 : suggestions.length - 1)
                        : Math.max(0, Math.min(suggestions.length - 1, activeIndex + step));

                    suggestions.removeClass('active').attr('aria-selected', 'false');
                    suggestions.eq(nextIndex).addClass('active').attr('aria-selected', 'true')[0]
                        .scrollIntoView({ block: 'nearest' });
                    return;
                }

                if (event.key === 'Enter' && !suggestionList.hasClass('d-none')) {
                    const suggestions = row.find('.product-suggestions [data-product-id]');
                    if (suggestions.length) {
                        event.preventDefault();
                        const activeSuggestion = suggestions.filter('.active').first();
                        (activeSuggestion.length ? activeSuggestion : suggestions.first()).trigger('click');
                    }
                }
            });

            $(document).on('click', function(event) {
                if (!$(event.target).closest('.product-search-wrapper').length) {
                    $('.sale-item-row').each(function() { hideSuggestions($(this)); });
                }
            });

            // 2. Line Item & Grand Total Dynamic Calculation
            function formatPieceQuantity(quantity, piecesPerBox, boxesPerCarton, packageType = 'carton_box_pcs') {
                if (packageType === 'carton_pcs') {
                    const cartons = Math.floor(quantity / piecesPerBox);
                    const pieces = quantity % piecesPerBox;
                    const parts = [];
                    if (cartons) parts.push(`${cartons} carton${cartons === 1 ? '' : 's'}`);
                    if (pieces || parts.length === 0) parts.push(`${pieces} pc${pieces === 1 ? '' : 's'}`);
                    return parts.join(', ');
                }
                const piecesPerCarton = piecesPerBox * boxesPerCarton;
                const cartons = Math.floor(quantity / piecesPerCarton);
                const remainingPieces = quantity % piecesPerCarton;
                const boxes = Math.floor(remainingPieces / piecesPerBox);
                const pieces = remainingPieces % piecesPerBox;
                const parts = [];

                if (cartons) parts.push(`${cartons} carton${cartons === 1 ? '' : 's'}`);
                if (boxes) parts.push(`${boxes} box${boxes === 1 ? '' : 'es'}`);
                if (pieces || parts.length === 0) parts.push(`${pieces} pc${pieces === 1 ? '' : 's'}`);

                return parts.join(', ');
            }

            function syncQuantity(row) {
                const selectedProduct = row.find('.medicine-select option:selected');
                if (!selectedProduct.val()) {
                    row.find('.product-unit-label, .quantity-summary, .stock-info').text('');
                    row.find('.qty-input').val('');
                    row.find('.package-quantity-group, .kg-quantity-group').addClass('d-none');
                    return 0;
                }
                const isKilogramProduct = selectedProduct.attr('data-unit') === 'kg';
                row.find('.product-unit-label').text(selectedProduct.val() ?
                    `Saved unit: ${isKilogramProduct ? 'Kilograms (kg)' : 'Pieces (pcs)'}` : '');
                const packageInputs = row.find('.package-quantity-group input');
                const kilogramInputs = row.find('.kg-quantity-group input');
                row.find('.package-quantity-group').toggleClass('d-none', isKilogramProduct);
                row.find('.kg-quantity-group').toggleClass('d-none', !isKilogramProduct);
                packageInputs.prop('readOnly', isKilogramProduct).toggleClass('bg-light', isKilogramProduct);
                kilogramInputs.prop('readOnly', !isKilogramProduct).toggleClass('bg-light', !isKilogramProduct);
                if (isKilogramProduct) packageInputs.val(0);
                else kilogramInputs.val(0);

                if (isKilogramProduct) {
                    const piecesPerKg = Math.max(0.000001, parseFloat(selectedProduct.attr('data-pieces-per-kg')) || 1);
                    const kilograms = parseFloat(row.find('.kg-qty-input').val()) || 0;
                    const loosePieces = parseInt(row.find('.kg-piece-qty-input').val(), 10) || 0;
                    const totalKilograms = kilograms + loosePieces / piecesPerKg;
                    const quantity = totalKilograms.toFixed(6).replace(/0+$/, '').replace(/\.$/, '');
                    row.find('.qty-input').val(quantity);
                    row.find('.quantity-summary').text(totalKilograms > 0 ? `${quantity} kg` : '');
                    return totalKilograms;
                }

                const piecesPerBox = parseInt(selectedProduct.attr('data-pieces-per-box'), 10) || 1;
                const boxesPerCarton = parseInt(selectedProduct.attr('data-boxes-per-carton'), 10) || 1;
                const packageType = selectedProduct.attr('data-package-type') || 'carton_box_pcs';
                const usesBoxes = packageType === 'carton_box_pcs';
                row.find('.box-quantity-field').toggleClass('d-none', !usesBoxes);
                const cartons = parseInt(row.find('.carton-qty-input').val(), 10) || 0;
                const boxes = parseInt(row.find('.box-qty-input').val(), 10) || 0;
                const pieces = parseInt(row.find('.piece-qty-input').val(), 10) || 0;
                const totalPieces = usesBoxes
                    ? cartons * boxesPerCarton * piecesPerBox + boxes * piecesPerBox + pieces
                    : cartons * piecesPerBox + pieces;

                row.find('.qty-input').val(totalPieces);
                row.find('.quantity-summary').text(
                    `${formatPieceQuantity(totalPieces, piecesPerBox, boxesPerCarton, packageType)} (${totalPieces} pcs)`);

                return totalPieces;
            }

            function calculateRowAndGrandTotal(row) {
                const unitPrice = parseFloat(row.find('.unit-price-input').val()) || 0;
                const qty = syncQuantity(row);
                // Commission is a fixed expense for the row, not a per-unit price adjustment.
                let rowTotal = unitPrice * qty;

                if (rowTotal < 0) rowTotal = 0; // Prevent negative total

                row.find('.row-total-input').val(rowTotal.toFixed(2));

                calculateGrandTotal();
            }

            function calculateGrandTotal() {
                let grandTotal = 0;
                $('.sale-item-row').each(function() {
                    const rowTotal = parseFloat($(this).find('.row-total-input').val()) || 0;
                    const commission = parseFloat($(this).find('.commission-input').val()) || 0;
                    grandTotal += Math.max(0, rowTotal - commission);
                });
                $('#grandTotalDisplay').text(grandTotal.toFixed(2));
            }

            // 3. Medicine Selection -> Auto Fill Fixed Unit Price & Show Aggregate Stock
            $(document).on('change', '.medicine-select', function() {
                const row = $(this).closest('.sale-item-row');
                const unitPriceInput = row.find('.unit-price-input');
                const selectedOption = $(this).find(':selected');

                row.find('.commission-input').val('0');
                row.find('.free-qty-input').val('0');
                row.find('.carton-qty-input, .box-qty-input').val('0');
                row.find('.piece-qty-input').val('');
                row.find('.kg-qty-input, .kg-piece-qty-input').val(0);
                row.find('.stock-info').text('');
                row.find('.row-total-input').val('');

                if (selectedOption.val()) {
                    // A. Auto-populate Fixed Unit Price from relation if available
                    const fixedPrice = parseFloat(selectedOption.data('fixed-price'));
                    if (!isNaN(fixedPrice) && fixedPrice > 0) {
                        unitPriceInput.val(fixedPrice.toFixed(2));
                    } else {
                        unitPriceInput.val('');
                    }

                    // B. Show total available stock across all batches.
                    const batches = selectedOption.data('batches') || [];
                    const piecesPerBox = parseInt(selectedOption.attr('data-pieces-per-box'), 10) || 1;
                    const boxesPerCarton = parseInt(selectedOption.attr('data-boxes-per-carton'), 10) || 1;
                    const available = batches.reduce((total, stock) => total + (parseFloat(stock
                        .quantity) || 0), 0);
                    const packageType = selectedOption.attr('data-package-type') || 'carton_box_pcs';
                    row.find('.stock-info').text(selectedOption.attr('data-unit') === 'kg' ?
                        `Available: ${available} kg` :
                        `Available: ${formatPieceQuantity(available, piecesPerBox, boxesPerCarton, packageType)} (${available} pcs)`
                        );

                    calculateRowAndGrandTotal(row);
                } else {
                    unitPriceInput.val('');
                    row.find('.stock-info, .product-unit-label').text('');
                    syncQuantity(row);
                    row.find('.row-total-input').val('');
                    calculateGrandTotal();
                }
            });

            // 4. Quantity & Commission Event Listeners
            $(document).on('input change',
                '.carton-qty-input, .box-qty-input, .piece-qty-input, .kg-qty-input, .kg-piece-qty-input, .commission-input',
                function() {
                    const row = $(this).closest('.sale-item-row');
                    calculateRowAndGrandTotal(row);
                });

            // 5. Add More Rows
            $('#addMore').click(function() {
                const $firstRow = $('.sale-item-row:first');
                const $newRow = $firstRow.clone();

                $newRow.find('.medicine-select').val('');
                $newRow.find('.medicine-search-input').val('').removeAttr('aria-expanded');
                $newRow.find('.product-suggestions').empty().addClass('d-none');

                // Reset inputs & hidden values
                $newRow.find('input').val('');
                $newRow.find('.qty-input').val('');
                $newRow.find('.carton-qty-input, .box-qty-input').val(0);
                $newRow.find('.piece-qty-input').val('');
                $newRow.find('.kg-qty-input, .kg-piece-qty-input').val(0);
                $newRow.find('.quantity-summary').text('');
                $newRow.find('.free-qty-input').val(0);
                $newRow.find('.commission-input').val(0);
                $newRow.find('.stock-info').text('');
                $('#sale-rows').append($newRow);
                syncQuantity($newRow);
            });

            // 6. Remove Row
            $(document).on('click', '.remove-row', function() {
                if ($('.sale-item-row').length > 1) {
                    $(this).closest('.sale-item-row').remove();
                    calculateGrandTotal();
                }
            });

            // 7. Form Submit Guard
            $('#saleForm').on('submit', function(event) {
                const unselectedRow = $('.sale-item-row').filter(function() {
                    return !$(this).find('.medicine-select').val();
                }).first();

                if (unselectedRow.length) {
                    event.preventDefault();
                    const productInput = unselectedRow.find('.medicine-search-input');
                    productInput.trigger('focus');
                    showProductSuggestions(productInput);
                    return;
                }

                $('.sale-item-row').each(function() {
                    syncQuantity($(this));
                });
                $('#submitBtn').prop('disabled', true).html('Processing...');
            });
        });

        // -------------------


        // ------------------
    </script>

    <style>
        .medicine-search-input {
            text-align: left;
            direction: ltr;
        }

        @media (max-width: 767.98px) {
            .sale-item-row {
                border-left: 5px solid #0d6efd !important;
            }
        }

        .select2-selection--single {
            height: 38px !important;
            padding-top: 4px !important;
        }
    </style>
@endsection