@extends('layouts.layoutapp')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card me-2">
                <div class="card-header pb-0">
                    <div class="d-flex flex-row justify-content-between">
                        <div>
                            <h5 class="mb-0">Add New Invoice</h5>
                        </div>
                        <div>
                            <p class="badge bg-secondary due_amount">Due Amount:</p>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <form action="{{ route('invoice-store') }}" method="POST" id="invoiceForm" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-3 mb-3">
                                <label for="client_name" class="form-label">Client Name:</label>
                                <input type="text" name="client_name" id="client_name" class="form-control"
                                    value="{{ old('client_name') }}">
                                <span class="text-danger d-block mt-1" id="client_name_error"></span>
                                @error('client_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-lg-3 mb-3">
                                <label for="client_num" class="form-label">Client Number:</label>
                                <select name="client_num" id="client_num_select" class="select2 form-select" multiple>
                                    @foreach ($clients as $client)
                                        <option value="{{ $client->user->phone }}" data-clientID={{ $client->id }} data-clientName="{{ $client->user->name }} {{ $client->user->last_name }}"
                                            {{ in_array($client->user->phone, (array) old('client_num', [])) ? 'selected' : '' }}>
                                            {{ $client->user->phone }}
                                        </option>
                                    @endforeach
                                </select>
                                <div id="client_num_error" class="text-danger small" style="display: none;"></div>
                                @error('client_num')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-lg-3 mb-3">
                                <label for="invoice_id" class="form-label">Invoice number:</label>
                                <input type="text" id="invoice_id" class="form-control" value="" readonly>
                            </div>
                            <div class="col-lg-3 mb-3">
                                <label for="invoice_date" class="form-label">Invoice Date:</label>
                                <input type="date" id="invoice_date" class="form-control" name="invoice_date"
                                    value="{{ old('invoice_date', \Carbon\Carbon::now()->format('Y-m-d')) }}" required>
                                @error('invoice_date')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-lg-3 mb-3">
                                <label for="due_date" class="form-label">Due Date:</label>
                                <input type="date" id="due_date" class="form-control" name="due_date"
                                    value="{{ old('due_date', \Carbon\Carbon::now()->format('Y-m-d')) }}" required>
                                @error('due_date')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            @if ($branch->non_gst == 'A')
                                <div class="col-lg-3 mb-3">
                                    <label for="gst" class="form-label">GST/Non-GST:</label>
                                    <select name="gst" id="gst" class="form-select" onchange="toggleTaxes()">
                                        <option value="">Select</option>
                                        <option value="Y" {{ old('gst') == 'Y' ? 'selected' : '' }}>GST</option>
                                        <option value="N" {{ old('gst') == 'N' ? 'selected' : '' }}selected>Non-GST
                                        </option>
                                    </select>
                                    @error('gst')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            @else
                                <div class="col-lg-3 mb-3">
                                    <label for="gst" class="form-label">GST/Non-GST:</label>
                                    <select name="gst" id="gst" class="form-select" onchange="toggleTaxes()">
                                        <option value="">Select</option>
                                        <option value="Y" {{ old('gst') == 'Y' ? 'selected' : '' }} selected>GST
                                        </option>
                                        <option value="N" {{ old('gst') == 'N' ? 'selected' : '' }}>Non-GST</option>
                                    </select>
                                    @error('gst')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endif
                            @if(isPrintingEnabled())
                            <div class="col-lg-3 mb-3">
                                <div class="form-check mt-4">
                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        name="printing_required"
                                        id="printing_required"
                                        value="1"
                                        {{ old('printing_required') ? 'checked' : '' }}>

                                    <label class="form-check-label" for="printing_required">
                                        Printing Required
                                    </label>
                                </div>
                            </div>
                            @endif
                        </div>
                        <hr>
                        <div>
                            <h5>Product Details:</h5>
                            <div class="row align-items-center">
                                <div class="col-lg-4 d-flex align-items-center mb-3">
                                    <i class="fa-solid fa-qrcode"
                                        style="width: 30px; height: 30px; margin-right: 10px;"></i>
                                    <input class="form-control" type="text" id="product-code-input"
                                        onkeydown="preventFormSubmit(event)">
                                </div>
                                <div class="col-lg-4">
                                    <button type="button" onclick="addRow(event)" class="btn btn-primary addRow">
                                        <i class="fas fa-plus"></i> Add Row
                                    </button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-bordered table-striped text-sm" id="productsTable">
                                    <thead class="thead-dark">
                                        <tr>
                                            {{-- <th>#</th> --}}
                                            <th>Product</th>
                                            <th>Avl. Qty</th>
                                            <th>Qty</th>
                                            <th>Unit Price</th>
                                            <th>Tax</th>
                                            <th>Amount</th>
                                            <th class="text-center align-middle w-0"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="productRows">
                                        <!-- Dynamic rows will be added here -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @if(isPrintingEnabled())
                        <div id="printingSection" style="display:none">

    <hr>

    <h5>Printing Details</h5>

    <div class="row">

        {{-- <div class="col-md-3 mb-3">
            <label>Printing Area</label>

            <select
                name="printing_area_id"
                id="printing_area_id"
                class="form-select select2">

                <option value="">Select</option>

                @foreach(printingAreas() as $area)
                    <option value="{{$area->id}}">
                        {{$area->name}}
                    </option>
                @endforeach

            </select>
        </div> --}}
        <input type="hidden" name="printing_area_id" value="{{ \App\Models\PrintingArea::where('name', 'Both')->first()->id ?? '' }}">

        <!-- <div class="col-md-3 mb-3">
            <label>Quantity</label>

            <input
                type="number"
                class="form-control"
                name="printing_qty"
                id="printing_qty"
                value="5"
                min="5">
        </div> -->

        <div class="col-md-4 mb-3">

    <label class="form-label">Color</label>

    <div class="input-group">

        <input
            type="color"
            class="form-control form-control-color p-1"
            id="printing_color"
            name="printing_color"
            value="#A695E4"
            style="width:70px;max-width:70px;">

        <input
            type="text"
            class="form-control"
            id="printing_color_code"
            value="#A695E4"
            readonly>

    </div>

</div>

    </div>

    <div class="row">

        <div class="col-md-4">

            <label>Design</label>

            <input
                type="file"
                class="form-control"
                name="front_design">

        </div>

        {{-- <div class="col-md-4">

            <label>Back Design</label>

            <input
                type="file"
                class="form-control"
                name="back_design">

        </div>

        <div class="col-md-4">

            <label>Logo</label>

            <input
                type="file"
                class="form-control"
                name="logo_design">

        </div> --}}

    </div>

    <hr>

    <div class="table-responsive mt-3">
    <table class="table table-bordered table-striped align-middle" id="printingItemsTable">
        <thead>
            <tr>
                <th width="60">#</th>
                <th>Name</th>
                <th>Number</th>
                <th>Size</th>
                {{-- <th>Sleeve Type</th> --}}
                <th width="50" class="text-center">Action</th>
            </tr>
        </thead>

        <tbody id="printingItems">

        </tbody>

    </table>
</div>

</div>
@endif
                        <div class="row mt-5">
                            <div class="col-lg-6 mb-3 d-flex">
                                <div class="col-lg-6">
                                    <label for="discount_type" class="form-label">Discount type:</label>
                                    <select name="discount_type" id="discount_type" class="form-select"
                                        onchange="calculateTotal()">
                                        <option value="">Select discount type</option>
                                        @foreach ($discount_types as $type)
                                            <option value="{{ $type->id }}"
                                                {{ old('discount_type') == $type->id ? 'selected' : '' }}>
                                                {{ $type->type }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('discount_type')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-lg-6">
                                    <label for="discount" class="form-label">Discount:</label>
                                    <input type="number" id="discount" name="discount" class="form-control"
                                        value="{{ old('discount') }}" onchange="calculateTotal()"
                                        {{ empty(old('discount_type')) ? 'readonly' : '' }}>
                                    @error('discount')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-5 mb-3">
                                <div class="card shadow-lg">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between pl-5">
                                            <span>Sub Total:</span>
                                            <span id="subTotalDisplay">0 ₹</span>
                                        </div>
                                        <div class="d-flex justify-content-between pl-5">
                                            <span>Discount:</span>
                                            <span id="discountDisplay">0 ₹</span>
                                        </div>
                                        <div class="d-flex justify-content-between pl-5">
                                            <span>Tax:</span>
                                            <span id="taxDisplay">0 ₹</span>
                                        </div>
                                        <div class="d-flex justify-content-between pl-5">
                                            <span>Total:</span>
                                            <span id="totalDisplay">0 ₹</span>
                                        </div>
                                        <input type="hidden" id="sub_total" name="sub_total" value="0">
                                        <input type="hidden" id="discount_amt" name="discount_amt" value="0">
                                        <input type="hidden" id="tax" name="tax" value="0">
                                        <input type="hidden" id="total_amt" name="total_amt" value="0">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr>
                        <div>
                            <div class="d-flex justify-content-between align-items-center flex-wrap mb-3">

                                <!-- Left Section -->
                                <div class="d-flex align-items-center flex-wrap gap-3">

                                    <h5 class="mb-0">Payment Details:</h5>

                                    @if (isWalletEnabled())
                                        <span class="badge bg-info wallet_balance">
                                            Wallet Balance: ₹ 0.00
                                        </span>
                                    @endif

                                    <div>
                                        <input type="number" step="0.01" name="tendered_amount" id="tendered_amount"
                                            class="form-control" style="width:200px;"
                                            value="{{ old('tendered_amount') }}" placeholder="Enter tendered amount">

                                        @error('tendered_amount')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    @if (isWalletEnabled())
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="checkbox" id="use_wallet"
                                                name="use_wallet" value="1"
                                                {{ old('use_wallet') ? 'checked' : '' }}>

                                            <label class="form-check-label" for="use_wallet">
                                                Debit from wallet
                                            </label>
                                        </div>
                                    @endif

                                </div>

                                <!-- Right Section -->
                                <span class="badge bg-primary extra_amount">
                                    Extra Amount: ₹ 0.00
                                </span>

                            </div>

                            <div class="row g-3">
                                @if (isWalletEnabled())
                                    {{-- <div class="col-md-4">
                                        <label class="form-label d-block">&nbsp;</label>
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="checkbox" value="1"
                                                id="use_wallet" name="use_wallet"
                                                {{ old('use_wallet') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="use_wallet">
                                                Debit from wallet
                                            </label>
                                        </div>
                                        @error('use_wallet')
                                            <span class="text-danger d-block ms-2">{{ $message }}</span>
                                        @enderror
                                    </div> --}}

                                    <div class="col-md-4" id="walletAmountContainer" style="display: none;">
                                        <label for="wallet_amount" class="form-label">Wallet Amount:</label>
                                        <input type="number" step="0.01" name="wallet_amount" id="wallet_amount"
                                            class="form-control" value="{{ old('wallet_amount') }}"
                                            placeholder="Enter wallet amount">
                                        @error('wallet_amount')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                @endif

                                <!-- UPI -->
                                <div class="col-md-4">
                                    <label for="upi" class="form-label">UPI:</label>
                                    <input type="text" name="upi" id="upi" class="form-control"
                                        value="{{ old('upi') }}">
                                    @error('upi')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>


                                <!-- Cash -->
                                <div class="col-md-4">
                                    <label for="cash" class="form-label">Cash:</label>
                                    <input type="text" name="cash" id="cash" class="form-control"
                                        value="{{ old('cash') }}">
                                    @error('cash')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <!-- Online -->
                                <div class="col-md-4">
                                    <label for="online" class="form-label">Online:</label>
                                    <input type="text" name="online" id="online" class="form-control"
                                        value="{{ old('online') }}">
                                    @error('online')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <!-- Payment total errors -->
                                @if ($errors->has('payment_total'))
                                    <div class="col-12 text-danger">
                                        {{ $errors->first('payment_total') }}
                                    </div>
                                @endif
                            </div>

                            @if ($branch->loyalty_config == 'A')
                                <!-- Loyalty Points Section -->
                                <div class="col-lg-12 mt-3 d-flex justify-content-between">
                                    <div class="col-md-3 mb-3 redeem_points current_point me-3" style="display: none">
                                        <label for="redeem_points" class="form-label">Redeem Points:</label>
                                        <input type="number" name="redeem_points" id="redeem_points"
                                            class="form-control" value="{{ old('redeem_points') }}">
                                        @error('redeem_points')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="card shadow-lg h-100 col-md-3 redeem_points" style="display: none">
                                        <div class="card-body d-flex flex-column justify-content-center">
                                            <div class="d-flex justify-content-between mb-2">
                                                <span>Earned Points:</span>
                                                <span id="earnPoints">0 <i
                                                        class="fa-solid fa-coins text-warning"></i></span>
                                            </div>
                                            <div class="d-flex justify-content-between mb-2">
                                                <span>Redeemed Points:</span>
                                                <span id="redeemPoints">0 <i
                                                        class="fa-solid fa-coins text-warning"></i></span>
                                            </div>
                                            <div class="d-flex justify-content-between">
                                                <span>Available Points:</span>
                                                <span id="availablePoints">0 <i
                                                        class="fa-solid fa-coins text-warning"></i></span>
                                            </div>
                                        </div>
                                    </div>

                                    <input type="hidden" id="earn_point" name="earn_point" value="0">
                                    <input type="hidden" id="redeem_point" name="redeem_point" value="0">
                                    <input type="hidden" id="available_point" name="available_point" value="0">
                                </div>
                            @endif
                        </div>

                        <hr>
                        <div>
                            @php
                                $showNote = $branch->note_flag === 'A';
                                $showTerm = $branch->terms_flag === 'A';
                                $buttonLabel = 'Add ';
                                if ($showNote && $showTerm) {
                                    $buttonLabel .= 'Note & Term';
                                } elseif ($showNote) {
                                    $buttonLabel .= 'Note';
                                } elseif ($showTerm) {
                                    $buttonLabel .= 'Terms';
                                }
                            @endphp

                            @if ($showNote || $showTerm)
                                <button type="button" onclick="toggleNotesAndTerms('{{ $buttonLabel }}')"
                                    class="btn btn-primary" id="notesTermsBtn">
                                    <i class="fas fa-plus"></i> {{ $buttonLabel }}
                                </button>
                            @endif

                            <div class="row mt-3" id="notesTermsSection" style="display: none;">
                                @if ($showNote)
                                    <div class="col-lg-6">
                                        <label for="note" class="form-label">Note:</label>
                                        <textarea class="form-control" data-label='Note' name="note" id="note">{{ old('note') }}</textarea>
                                    </div>
                                @endif

                                @if ($showTerm)
                                    <div class="col-lg-6">
                                        <label for="term" class="form-label">Term:</label>
                                        <textarea class="form-control" data-label='Term' name="term" id="term">{{ old('term') }}</textarea>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="modal-footer d-flex justify-content-between">
                            <div>
                                <div class="d-flex justify-content-end align-items-center">
                                    <span class="me-3 fw-bold">Total Purchased Products Qty:</span>
                                    <span id="totalQuantity" class="badge bg-primary" style="font-size: 1.1rem;">0</span>
                                </div>
                            </div>
                            <div>
                                <button type="submit" id="submit" class="btn btn-primary">Save</button>
                                <a href="{{ route('invoice-index') }}" class="btn btn-secondary">Cancel</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Product data from backend
        const products = @json($products);
        const taxes = @json($all_taxes);
        const defaultTaxIds = @json($default_taxes);
        const pointValue = @json($point_value);
        const isDescription = @json($branch->inv_desc_flag);
        const isLoyalty = @json($branch->loyalty_config);
        const isAvl = @json($branch->avl_qty_flag);
        const isNavite = @json($branch->native_name_flag);


        let avlPoint = 0;
        let redeemPoints = 0;
        let total = 0;
        let rowCount = 0;
        let hasQuantityError = false;
        @if(isPrintingEnabled())
        $('#printing_required').change(function(){

            if($(this).is(':checked')){
                $('#printingSection').slideDown();
            }else{
                $('#printingSection').slideUp();
                $('#printingItems').html('');
            }

        });
        $(document).ready(function () {
            // loadPrintingItems();
            syncPrintingRows(getPrintingProductQty());
        });

        // $('#printing_qty').on('keyup change', loadPrintingItems);
        $('#printing_color').on('input', function () {
            $('#printing_color_code').val($(this).val().toUpperCase());
        });
        @endif
        function preventFormSubmit(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                addProductRow();
                setTimeout(() => {
                    document.getElementById('product-code-input').focus();
                }, 1000);
            }
        }

        function addRow(event) {
            event.preventDefault();
            addProductRow();
            setTimeout(() => {
                document.getElementById('product-code-input').focus();
            }, 1000);
        }

        function addProductRow() {
            const productCode = document.getElementById('product-code-input').value;
            if (!productCode) {
                addEmptyRow();
                return;
            }

            const product = products.find(p => p.code === productCode);
            if (product) {
                const existingRow = findProductRow(product.id);

                if (existingRow) {
                    const qtyInput = existingRow.querySelector('.qty');
                    const currentQty = parseFloat(qtyInput.value) || 0;
                    qtyInput.value = currentQty + 1;
                    calculateRowAmount(existingRow.id.split('-')[1]);
                    checkQuantity(existingRow.id.split('-')[1]);
                    updatePrintingRows();
                } else {
                    addProductToTable(product);
                }

                document.getElementById('product-code-input').value = '';
            } else {
                alert('Product not found!');
            }
        }

        function findProductRow(productId) {
            const rows = document.querySelectorAll('#productRows tr');
            for (const row of rows) {
                const select = row.querySelector('.product-select');
                if (select && select.value == productId) {
                    return row;
                }
            }
            return null;
        }

        function addEmptyRow() {
            rowCount++;
            const row = `
                                                                            <tr id="row-${rowCount}">
                                                                            {{-- <td>${rowCount}</td> --}}
                                                                            <td>
                                                                            <div class="d-flex flex-column">
                                                                                <select name="dynamicFields[${rowCount}][product]" class="form-select product-select mb-2"
                                                                                    onchange="updateProductDetails(${rowCount})">
                                                                                    <option value="">Select Product</option>
                                                                                    ${products.map(p => {
                const name = p.branch.native_name_flag == 'A' ? (p.native_name ?? p.name) : p.name;
                return `<option value="${p.id}">${p.code} - ${name}</option>`;
            }).join('')}
                                                                                </select>
                                                                            ${isDescription === 'A' ? `
                                                                                                        <input type="text" name="dynamicFields[${rowCount}][description]"
                                                                                                            style="padding-left:10px !important;" class="form-control mt-1"
                                                                                                            id="description-${rowCount}" placeholder="Enter a Description">
                                                                                                    ` : ''}
                                                                            </div>
                                                                                </td>
                                                                                <td style="width:120px;">
                                                                                <input type="text" name="dynamicFields[${rowCount}][avl_qty]" class="form-control avl-qty" readonly />
                                                                                </td>
                                                                                <td style="width:120px;">
                                                                                <input type="text" name="dynamicFields[${rowCount}][qty]" class="form-control qty"
                                                                                onchange="calculateRowAmount(${rowCount}); updatePrintingRows();"
                                                                                oninput="checkQuantity(${rowCount})" />
                                                                                <div class="invalid-feedback quantity-error" style="display: none;">
                                                                                Quantity exceeds available stock!
                                                                                </div>
                                                                                </td>
                                                                                <td style="width:120px;">
                                                                                <input type="text" name="dynamicFields[${rowCount}][unit_price]" class="form-control unit-price"
                                                                                onchange="calculateRowAmount(${rowCount})" />
                                                                                </td>
                                                                                <td style="min-width: 150px;">
                                                                                <select name="dynamicFields[${rowCount}][tax][]" class="form-select tax-select" multiple
                                                                                style="height: 50px;"
                                                                                onchange="calculateRowAmount(${rowCount})">
                                                                                ${taxes.map(t => {
                const taxId = t.id; // No need to convert to string if IDs are numbers
                const isDefault = defaultTaxIds.includes(taxId);

                return `<option value="${t.id}" ${isDefault ? 'selected' : ''}>${t.name} - ${t.value}%</option>`;
            }).join('')}
                                                                                </select>
                                                                                </td>
                                                                                <td style="width:150px;">
                                                                                <input type="text" name="dynamicFields[${rowCount}][amount]" class="form-control amount" readonly />
                                                                                </td>
                                                                                <td class="text-center align-middle">
                                                                                <a href="javascript:void(0);" onclick="removeRow(${rowCount})" class="text-danger fs-5" title="Remove Row">
                                                                                    <i class="fas fa-trash"></i>
                                                                                </a>
                                                                            </td>

                                                                            </tr>
                                                                            `;
            document.getElementById('productRows').insertAdjacentHTML('beforeend', row);
            $(`#row-${rowCount} .product-select`).select2({
                placeholder: "Select Product",
                width: '100%'
            });

            // If GST is selected, enable taxes, otherwise disable
            const gstValue = document.getElementById('gst').value;
            if (gstValue === 'N') {
                const taxSelect = document.querySelector(`#row-${rowCount} .tax-select`);
                taxSelect.innerHTML = '<option value="no-tax" selected>No Tax</option>';
                taxSelect.disabled = true;
            }
        }

        function addProductToTable(product) {
            rowCount++;
            const row = `
                                                                            <tr id="row-${rowCount}">
                                                                                {{-- <td>${rowCount}</td> --}}
                                                                            <td>
                                                                                <div class="d-flex flex-column">
                                                                            <select name="dynamicFields[${rowCount}][product]" class="form-select product-select"
                                                                            onchange="updateProductDetails(${rowCount})">
                                                                            <option value="">Select Product</option>
                                                                            ${products.map(p => `<option value="${p.id}" ${p.id == product.id ? 'selected' : ''}>${p.code} - ${p.branch.native_name_flag == 'A' ? (p.native_name ?? p.name) : p.name}</option>`).join('')}
                                                                            </select>
                                                                                ${isDescription === 'A' ? `
                                                                                                <input type="text" name="dynamicFields[${rowCount}][description]"
                                                                                                    style="padding-left:10px !important;" class="form-control mt-1"
                                                                                                    id="description-${rowCount}" placeholder="Enter a Description">
                                                                                            ` : ''}
                                                                            </div>
                                                                                </td>
                                                                                <td style="width:120px;">
                                                                                <input type="text" name="dynamicFields[${rowCount}][avl_qty]" class="form-control avl-qty"
                                                                                value="${product.qty}" readonly />
                                                                                </td>
                                                                                <td style="width:120px;">
                                                                                <input type="text" name="dynamicFields[${rowCount}][qty]" class="form-control qty"
                                                                                value="1" onchange="calculateRowAmount(${rowCount}); updatePrintingRows();"
                                                                                oninput="checkQuantity(${rowCount})" />
                                                                                <div class="invalid-feedback quantity-error" style="display: none;">
                                                                                Quantity exceeds available stock!
                                                                                </div>
                                                                                </td>
                                                                                <td style="width:120px;">
                                                                                <input type="text" name="dynamicFields[${rowCount}][unit_price]" class="form-control unit-price"
                                                                                value="${product.unit_price}" onchange="calculateRowAmount(${rowCount})" />
                                                                                </td>
                                                                                <td style="min-width: 150px;">
                                                                                <select name="dynamicFields[${rowCount}][tax][]" class="form-select tax-select" multiple
                                                                                style="height: 50px;"
                                                                                onchange="calculateRowAmount(${rowCount})">
                                                                                ${taxes.map(t => {
                const isDefault = defaultTaxIds.includes(t.id);
                const isProductTax = product.taxes ? product.taxes.includes(t.id) : false;
                const shouldSelect = isDefault || isProductTax;
                return `<option value="${t.id}" ${shouldSelect ? 'selected' : ''}>${t.name} - ${t.value}%</option>`;
            }).join('')}
                                                                                </select>
                                                                                </td>
                                                                                <td style="width:150px;">
                                                                                <input type="text" name="dynamicFields[${rowCount}][amount]" class="form-control amount"
                                                                                value="${product.unit_price}" readonly  />
                                                                                </td>
                                                                                <td class="text-center align-middle">
                                                                                <a href="javascript:void(0);" onclick="removeRow(${rowCount})" class="text-danger fs-5" title="Remove Row">
                                                                                    <i class="fas fa-trash"></i>
                                                                                </a>
                                                                            </td>

                                                                            </tr>
                                                                            `;
            document.getElementById('productRows').insertAdjacentHTML('beforeend', row);
            $(`#row-${rowCount} .product-select`).select2({
                placeholder: "Select Product",
                width: '100%'
            });

            calculateRowAmount(rowCount);
            checkQuantity(rowCount);
            updatePrintingRows();

            // If GST is selected, enable taxes, otherwise disable
            const gstValue = document.getElementById('gst').value;
            if (gstValue === 'N') {
                const taxSelect = document.querySelector(`#row-${rowCount} .tax-select`);
                Array.from(taxSelect.options).forEach(option => option.selected = false);
                taxSelect.disabled = true;
                calculateRowAmount(rowCount);
            }
        }

        function updateProductDetails(rowId) {
            const row = document.getElementById(`row-${rowId}`);
            const productSelect = row.querySelector('.product-select');
            const productId = productSelect.value;
            const product = products.find(p => p.id == productId);

            // First remove any existing duplicate warnings and highlighting
            removeDuplicateWarnings();
            document.querySelectorAll('.duplicate-row').forEach(row => {
                row.classList.remove('duplicate-row');
            });

            if (product) {
                // Update product details regardless of duplicates
                row.querySelector('.avl-qty').value = product.qty;
                row.querySelector('.qty').value = 1;
                row.querySelector('.unit-price').value = product.unit_price;
                calculateRowAmount(rowId);
                checkQuantity(rowId);
                updatePrintingRows();
                // Check for duplicates after updating
                checkForDuplicates(rowId);
            }
        }

        function checkForDuplicates(rowId) {
            const row = document.getElementById(`row-${rowId}`);
            const productId = row.querySelector('.product-select').value;

            if (!productId) return;

            const allRows = document.querySelectorAll('#productRows tr');
            let duplicateFound = false;

            allRows.forEach(existingRow => {
                const existingRowId = existingRow.id.split('-')[1];
                if (existingRowId != rowId) {
                    const existingProductId = existingRow.querySelector('.product-select').value;
                    if (existingProductId == productId) {
                        duplicateFound = true;
                        row.classList.add('duplicate-row');
                        existingRow.classList.add('duplicate-row');
                        showDuplicateWarning(row, existingRow);
                    }
                }
            });
            if (duplicateFound) {
                $('.addRow').prop('disabled', true);
                document.getElementById('submit').disabled = true;
            } else {
                $('.addRow').prop('disabled', false);
                document.getElementById('submit').disabled = false;
            }
        }

        // Add event listener to remove warnings when product selection changes
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.product-select').forEach(select => {
                select.addEventListener('change', function() {
                    const rowId = this.closest('tr').id.split('-')[1];
                    // Remove warnings when changing selection
                    removeDuplicateWarnings();
                    document.querySelectorAll('.duplicate-row').forEach(row => {
                        row.classList.remove('duplicate-row');
                    });
                    // Check again if the new selection is a duplicate
                    setTimeout(() => checkForDuplicates(rowId), 10);
                });
            });
        });

        function showDuplicateWarning(row1, row2) {
            // Only add if not already present
            if (!row1.querySelector('.duplicate-warning')) {
                const warning1 = document.createElement('div');
                warning1.className = 'duplicate-warning text-danger small mt-1';
                warning1.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Duplicate product';
                row1.querySelector('td').appendChild(warning1);
            }

            if (!row2.querySelector('.duplicate-warning')) {
                const warning2 = document.createElement('div');
                warning2.className = 'duplicate-warning text-danger small mt-1';
                warning2.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Duplicate product';
                row2.querySelector('td').appendChild(warning2);
            }
        }

        function removeDuplicateWarnings() {
            document.querySelectorAll('.duplicate-warning').forEach(warning => {
                warning.remove();
            });
        }

        function checkQuantity(rowId) {

            const row = document.getElementById(`row-${rowId}`);
            const qtyInput = row.querySelector('.qty');
            const avlQty = parseFloat(row.querySelector('.avl-qty').value) || 0;
            const qty = parseFloat(qtyInput.value) || 0;
            const errorElement = row.querySelector('.quantity-error');
            if (isAvl != 'A') {
                if (qty > avlQty) {
                    qtyInput.classList.add('is-invalid');
                    errorElement.style.display = 'block';
                    hasQuantityError = true;
                    return false;
                } else {
                    qtyInput.classList.remove('is-invalid');
                    errorElement.style.display = 'none';

                    // Check if all other rows are also valid
                    hasQuantityError = false;
                    document.querySelectorAll('#productRows tr').forEach(r => {
                        const rQtyInput = r.querySelector('.qty');
                        const rAvlQty = parseFloat(r.querySelector('.avl-qty').value) || 0;
                        const rQty = parseFloat(rQtyInput?.value) || 0;

                        if (rQty > rAvlQty) {
                            hasQuantityError = true;
                        }
                    });

                    return true;
                }
            }
        }

        function calculateRowAmount(rowId) {
            const row = document.getElementById(`row-${rowId}`);
            const qty = parseFloat(row.querySelector('.qty').value) || 0;
            const unitPrice = parseFloat(row.querySelector('.unit-price').value) || 0;
            const amount = qty * unitPrice;

            // Calculate tax
            const taxSelect = row.querySelector('.tax-select');
            const selectedTaxes = Array.from(taxSelect.selectedOptions).map(opt => parseInt(opt.value));
            let taxRate = 0;

            selectedTaxes.forEach(taxId => {
                const tax = taxes.find(t => t.id == taxId);
                if (tax) taxRate += tax.value;
            });

            const taxAmount = amount * (taxRate / 100);
            const totalWithTax = amount + taxAmount;

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

        function calculateTotal() {
            let subTotal = 0;
            let totalTax = 0;
            let totalQuantity = 0;
            const redeem = parseFloat($('#redeem_points').val()) * pointValue || 0;


            document.querySelectorAll('#productRows tr').forEach(row => {
                const amount = parseFloat(row.querySelector('.amount').value) || 0;
                const qty = parseFloat(row.querySelector('.qty').value) || 0;
                const unitPrice = parseFloat(row.querySelector('.unit-price').value) || 0;
                const rowAmount = qty * unitPrice;

                totalQuantity += qty;
                subTotal += rowAmount;

                // Calculate tax for this row
                const taxSelect = row.querySelector('.tax-select');
                const selectedTaxes = Array.from(taxSelect.selectedOptions).map(opt => parseInt(opt.value));
                let taxRate = 0;

                selectedTaxes.forEach(taxId => {
                    const tax = taxes.find(t => t.id == taxId);
                    if (tax) taxRate += tax.value;
                });

                totalTax += rowAmount * (taxRate / 100);
            });

            // Calculate discount
            const discountType = document.getElementById('discount_type').value;
            const discountValue = parseFloat(document.getElementById('discount').value) || 0;
            let discountAmount = 0;

            var subtotalWithTax = subTotal + totalTax;

            if (discountType == 1) {
                discountAmount = discountValue;
            } else if (discountType == 2) {
                discountAmount = subtotalWithTax * (discountValue / 100);
            }

            let totals = subtotalWithTax - discountAmount;
            total = totals - redeem;

            // Update display
            document.getElementById('subTotalDisplay').textContent = subTotal.toFixed(2) + ' ₹';
            document.getElementById('discountDisplay').textContent = discountAmount.toFixed(2) + ' ₹';
            document.getElementById('taxDisplay').textContent = totalTax.toFixed(2) + ' ₹';
            document.getElementById('totalDisplay').textContent = Math.floor(total).toFixed(2) + ' ₹';
            document.getElementById('totalQuantity').textContent = totalQuantity;

            // Update hidden fields
            document.getElementById('sub_total').value = subTotal.toFixed(2);
            document.getElementById('discount_amt').value = discountAmount.toFixed(2);
            document.getElementById('tax').value = totalTax.toFixed(2);
            document.getElementById('total_amt').value = Math.floor(total).toFixed(2);
        }

        function toggleTaxes() {
            const gstValue = document.getElementById('gst').value;
            const taxSelects = document.querySelectorAll('.tax-select');

            taxSelects.forEach(select => {
                if (gstValue === 'N') {
                    select.innerHTML = '<option value="no-tax" selected>No Tax</option>';
                    select.disabled = true;
                } else {
                    select.disabled = false;
                    select.innerHTML = taxes.map(t => {
                        const isDefault = defaultTaxIds.includes(t.id);
                        return `<option value="${t.id}" ${isDefault ? 'selected' : ''}>${t.name} - ${t.value}%</option>`;
                    }).join('');
                }
            });

            calculateTotal();
        }

        function toggleNotesAndTerms(baseLabel) {
            const section = document.getElementById('notesTermsSection');
            const btn = document.getElementById('notesTermsBtn');

            const isVisible = section.style.display === 'flex' || section.style.display === 'block';

            section.style.display = isVisible ? 'none' : 'flex';

            if (!isVisible) {
                btn.innerHTML = `<i class="fas fa-minus"></i> Remove ${baseLabel}`;
            } else {
                btn.innerHTML = `<i class="fas fa-plus"></i> ${baseLabel}`;
            }
        }

        function removeRow(rowId) {
            document.getElementById(`row-${rowId}`).remove();
            calculateTotal();
updatePrintingRows();
            // After removing a row, check if we still have quantity errors
            hasQuantityError = false;
            document.querySelectorAll('#productRows tr').forEach(r => {
                const rQtyInput = r.querySelector('.qty');
                const rAvlQty = parseFloat(r.querySelector('.avl-qty').value) || 0;
                const rQty = parseFloat(rQtyInput?.value) || 0;

                if (rQty > rAvlQty) {
                    hasQuantityError = true;
                }
            });
        }

        // Form submission validation
        function validateForm(event) {
            // First check all quantities
            document.querySelectorAll('#productRows tr').forEach(row => {
                const rowId = row.id.split('-')[1];
                checkQuantity(rowId);
            });

            if (hasQuantityError) {
                event.preventDefault();
                Swal.fire({
                    icon: 'error',
                    title: 'Quantity Error',
                    text: 'Please fix quantity errors before submitting. Some items have quantity greater than available stock.',
                    confirmButtonText: 'OK',
                });
                return false;
            }

            return true;
        }
        @if(isPrintingEnabled())
        function loadPrintingItems()
        {
            const qty = parseInt($('#printing_qty').val()) || 0;
            syncPrintingRows(qty);
        }
function getPrintingProductQty() {

    let qty = 0;

    $('#productRows tr').each(function () {

        const productId = $(this).find('.product-select').val();

        if (!productId) return;

        const product = products.find(p => p.id == productId);

        if (!product) return;

        // If this product is a printing product
        // if (product.is_printing == 1) {

            qty += parseInt($(this).find('.qty').val()) || 0;
        // }
    });

    return qty;
}
        function generatePrintingRowHtml(index, name = '', number = '', sizeId = '', sleeveTypeId = '') {
            let sizeOptions = '';
            const sizesData = [
                @foreach(sizes() as $size)
                    { id: "{{$size->id}}", name: "{{$size->name}}" },
                @endforeach
            ];
            sizesData.forEach(function(size) {
                let selected = (size.id == sizeId) ? 'selected' : '';
                sizeOptions += `<option value="${size.id}" ${selected}>${size.name}</option>`;
            });

            let sleeveOptions = '';
            const sleevesData = [
                @foreach(sleeveTypes() as $type)
                    { id: "{{$type->id}}", name: "{{$type->name}}" },
                @endforeach
            ];
            sleevesData.forEach(function(type) {
                let selected = (type.id == sleeveTypeId) ? 'selected' : '';
                sleeveOptions += `<option value="${type.id}" ${selected}>${type.name}</option>`;
            });

            return `
                <tr class="printing-row" data-row-id="${index}">
                    <td class="text-center fw-bold row-index">${index}</td>
                    <td>
                        <input type="text" class="form-control print-name" name="items[${index}][name]" value="${name}" placeholder="Name">
                    </td>
                    <td>
                        <input type="text" class="form-control print-number" name="items[${index}][number]" value="${number}" placeholder="Number">
                    </td>
                    <td>
                        <select class="form-select printing-size" name="items[${index}][size_id]">
                            ${sizeOptions}
                        </select>
                    </td>
                    {{-- <td>
                        <select class="form-select printing-sleeve" name="items[${index}][sleeve_type_id]">
                            ${sleeveOptions}
                        </select>
                    </td> --}}
                    <input type="hidden" name="items[${index}][sleeve_type_id]" value="1">
                    <td class="text-center">
                        <button type="button" class="btn btn-link text-danger p-0 m-0 remove-print-row">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </td>
                </tr>
            `;
        }
function updatePrintingRows() {

    if (!$('#printing_required').is(':checked')) {
        return;
    }

    syncPrintingRows(getPrintingProductQty());
}
        function syncPrintingRows(targetQty) {
            let currentRows = $('#printingItems tr.printing-row');
            let currentQty = currentRows.length;

            if (targetQty > currentQty) {
                for (let i = currentQty + 1; i <= targetQty; i++) {
                    let rowHtml = generatePrintingRowHtml(i);
                    $('#printingItems').append(rowHtml);
                    let newRow = $('#printingItems tr.printing-row').last();
                    newRow.find('.printing-size').select2({ width: '100%', placeholder: 'Select Size' });
                    {{-- newRow.find('.printing-sleeve').select2({ width: '100%', placeholder: 'Select Sleeve' }); --}}
                }
            } else if (targetQty < currentQty) {
                for (let i = currentQty; i > targetQty; i--) {
                    currentRows.eq(i - 1).remove();
                }
            }

            reindexPrintingRows();
        }

        function reindexPrintingRows() {
            let rows = $('#printingItems tr.printing-row');
            rows.each(function(index) {
                let i = index + 1;
                $(this).attr('data-row-id', i);
                $(this).find('.row-index').text(i);
                $(this).find('.print-name').attr('name', `items[${i}][name]`);
                $(this).find('.print-number').attr('name', `items[${i}][number]`);
                $(this).find('.printing-size').attr('name', `items[${i}][size_id]`);
                {{-- $(this).find('.printing-sleeve').attr('name', `items[${i}][sleeve_type_id]`); --}}
            });

            // $('#printing_qty').val(rows.length);
        }

        $(document).on('click', '.remove-print-row', function() {
            $(this).closest('tr.printing-row').remove();
            reindexPrintingRows();
        });
        @endif
        // Initialize on page load
        $(document).ready(function() {
            $('#client_num_select').select2({
                placeholder: "Search or type a number",
                allowClear: true,
                tags: true,
                tokenSeparators: [',', ' '],
                width: '100%',
                createTag: function(params) {
                    if (params.term.trim() === '') {
                        return null;
                    }

                    return {
                        id: params.term,
                        text: params.term
                    };
                }
            });

            document.getElementById('invoice_date').valueAsDate = new Date();
            document.getElementById('due_date').valueAsDate = new Date();

            document.getElementById('discount_type').addEventListener('change', function() {
                document.getElementById('discount').readOnly = !this.value;
                calculateTotal();
            });

            // Add form submission handler
            document.querySelector('form').addEventListener('submit', validateForm);
        });

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

            $('#gst').on('change', function() {
                toggleTaxes();
            });
        });

        $(document).ready(function() {
            let existingClientNumbers = $("#client_num_select option").map(function() {
                return $(this).val();
            }).get();

            $(document).ready(function() {
                let existingClientNumbers = $("#client_num_select option").map(function() {
                    return $(this).val();
                }).get();

                $("#client_num_select").on("change", function() {
                    let selectedNumbers = $(this).val() || [];
                    let errorElement = $("#client_num_error");

                    let selectedOption = $(this).find('option:selected').first();
                    let clientName = selectedOption.data('clientname');
                     if (clientName) {
                            $('#client_name').val(clientName);
                        }
                    let clientID = selectedOption.data('clientid');
                    $('.redeem_points').hide();

                    if (isLoyalty == 'A') {
                        if (clientID) {
                            $.ajax({
                                url: '{{ route('single-client') }}',
                                type: 'GET',
                                data: {
                                    clientID: clientID
                                },
                                success: function(data) {
                                    $('.redeem_points').hide();

                                    let earnPoints = data.earnPoints;
                                    redeemPoints = data.redeemPoints;
                                    avlPoint = data.availablePoints;

                                    $('#earnPoints').text(earnPoints + ' ');
                                    $('#redeemPoints').text(redeemPoints + ' ');
                                    $('#availablePoints').text(avlPoint + ' ');
                                    $('#earnPoints, #redeemPoints, #availablePoints')
                                        .append(
                                            '<i class="fa-solid fa-coins text-warning"></i>'
                                        );

                                    document.getElementById('earn_point').value =
                                        earnPoints;
                                    document.getElementById('redeem_point').value =
                                        redeemPoints;
                                    document.getElementById('available_point').value =
                                        avlPoint;

                                    $('.redeem_points').show();
                                    @if (isWalletEnabled())
                                        $('.wallet_balance').text('Wallet Balance: ₹ ' +
                                            parseFloat(data.walletBalance ?? 0)
                                            .toFixed(2));
                                    @endif


                                },
                                error: function(xhr) {
                                    console.log(xhr);
                                }
                            });
                        }
                    } else {
                        if (clientID) {
                            $.ajax({
                                url: '{{ route('single-client') }}',
                                type: 'GET',
                                data: {
                                    clientID: clientID
                                },
                                success: function(data) {
                                    console.log(data);

                                    $('.due_amount').html('Due Amount: <strong>₹ ' +
                                        data.dueAmount.toFixed(2) + '</strong>');
                                    @if (isWalletEnabled())
                                        $('.wallet_balance').text('Wallet Balance: ₹ ' +
                                            parseFloat(data.walletBalance ?? 0)
                                            .toFixed(2));
                                    @endif

                                    // Optional: Add warning class if due amount > 0
                                    if (data.dueAmount > 0) {
                                        $('.due_amount').removeClass('bg-secondary')
                                            .addClass('bg-warning text-dark');
                                    }
                                },
                                error: function(xhr) {
                                    console.log(xhr);
                                }
                            });
                        }
                    }
                    // Check if empty
                    if (selectedNumbers.length === 0) {
                        errorElement.text("Please select or enter a client number").show();
                        return;
                    } else {
                        errorElement.hide();
                    }

                    let hasNewNumber = selectedNumbers.some(num => !existingClientNumbers.includes(
                        num));

                    if (hasNewNumber) {
                        $('.redeem_points').hide();
                        $("#client_name").prop("required", true);
                        $("#client_name_error").text("Please enter Client Name").show();
                    }
                    $('#client_name').on('input', function() {
                        let name = $(this).val().trim();
                        if (name !== '') {
                            $("#client_name_error").text('').hide();
                            $(this).removeClass('is-invalid');
                        } else {
                            $("#client_name_error").text("Please enter Client Name").show();
                            $(this).addClass('is-invalid');
                        }
                    });
                });

                $('form').on('submit', function(e) {
                    let selectedNumbers = $("#client_num_select").val() || [];
                    let errorElement = $("#client_num_error");

                    if (selectedNumbers.length === 0) {
                        errorElement.text("Please select or enter a client number").show();
                        e.preventDefault();

                        // Scroll to the error
                        $('html, body').animate({
                            scrollTop: errorElement.offset().top - 100
                        }, 500);

                        return false;
                    }
                    return true;
                });

                $("#client_name").on("input", function() {
                    if ($(this).val().trim() !== "") {
                        $("#client_name_error").hide();
                    }
                });
            });
            $('#redeem_points').on('change input', function() {
                let entered_points = parseFloat($(this).val()) || 0;


                let container = $(this).closest('.current_point');
                let errorElement = container.find('.error-feedback');

                errorElement.text('').hide();
                $(this).removeClass('is-invalid');

                if (entered_points > avlPoint) {
                    errorElement.text('Redeem points cannot exceed available points').show();
                    $(this).addClass('is-invalid');
                    $(this).val(avlPoint);
                    return false;
                }
                currentPoint = avlPoint - entered_points;
                redeemedPoints = redeemPoints + entered_points;
                $('#availablePoints').text(currentPoint + ' ');
                $('#redeemPoints').text(redeemedPoints + ' ');
                $('#availablePoints,#redeemPoints').append(
                    '<i class="fa-solid fa-coins text-warning"></i>');
                calculateTotal();
            });
        });
        $(document).ready(function() {
            function calculatePaymentBreakdown() {
                let total_amount = parseFloat($('#total_amt').val()) || 0;
                let tendered_amount = parseFloat($('#tendered_amount').val()) || 0;
                let upi_amount = parseFloat($('#upi').val()) || 0;
                let online_amount = parseFloat($('#online').val()) || 0;
                let cash_amount = parseFloat($('#cash').val()) || 0;
                let wallet_amount = $('#use_wallet').is(':checked') ? (parseFloat($('#wallet_amount').val()) || 0) :
                    0;

                let digital_payments = upi_amount + online_amount;

                let remaining_after_digital = total_amount - digital_payments - wallet_amount;
                if (remaining_after_digital < 0) remaining_after_digital = 0;

                let extra_amount = 0;

                if (tendered_amount > 0) {
                    let cash_to_take = Math.min(tendered_amount, remaining_after_digital);
                    $('#cash').val(cash_to_take.toFixed(2));
                    cash_amount = cash_to_take;

                    extra_amount = tendered_amount - cash_amount;

                } else {
                    let total_paid = digital_payments + cash_amount + wallet_amount;
                    extra_amount = total_paid - total_amount;
                }

                if (extra_amount < 0) extra_amount = 0;

                $('.extra_amount').text('Extra Amount: ₹ ' + extra_amount.toFixed(2));
            }

            $(document).on('input', '#tendered_amount, #upi, #online, #cash', function() {
                calculatePaymentBreakdown();
            });

            $(document).on('input change', '#wallet_amount, #use_wallet', function() {
                if (!$('#use_wallet').is(':checked')) {
                    $('#wallet_amount').val('');
                    $('#walletAmountContainer').hide();
                } else {
                    $('#walletAmountContainer').show();
                }
                calculatePaymentBreakdown();
            });

            $(document).on('change', function() {
                calculatePaymentBreakdown();
            });

            if ($('#use_wallet').length) {
                if ($('#use_wallet').is(':checked')) {
                    $('#walletAmountContainer').show();
                }
            }
        });
    </script>
@endpush