@extends('layouts.default')

@section('content')

<link href="{{ asset('css/plugins/select2/select2.min.css') }}" rel="stylesheet">
<style>
    /* Hide number arrows */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance: textfield;
        /* Firefox */
    }
</style>
<div class="card-section-header">
    <div class="d-flex justify-content-between align-items-start w-100">
        <div>
            <h2 class="card-section-title">Edit Transaction</h2>
            <p class="card-section-subtitle">Update transaction #{{ $transaction->transaction_no ?? $transaction->trans_id }}</p>
        </div>
        <a href="{{ route('transactions.index') }}" class="btn btn-secondary">
            <i class="fa fa-arrow-left"></i>&nbsp;Back to List
        </a>
    </div>
</div>
<div class="wrapper wrapper-content">
    <div id="success-message" class="alert alert-success" style="display: none;">
        <span></span>
    </div>

    <form id="transaction-form" method="POST" action="{{ route('transactions.update', $transaction->trans_id) }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <!-- Transaction Details Card -->
        <div class="card mb-4">
            <div class="card-header">
                <h4 class="card-title mb-0">Transaction Details</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Document Ref No</label>
                            <input type="text" class="form-control" id="transaction_no" name="transaction_no" value="{{ $transaction->transaction_no }}" maxlength="150">
                            <div class="invalid-feedback" id="error-transaction_no" style="display: none;"></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Source <span class="text-danger">*</span></label>
                            <select class="form-select" id="party_type" name="party_type">
                                <option value="customer" {{ $transaction->customer && $transaction->customer->type != 'shop' ? 'selected' : '' }}>Customer</option>
                                <option value="shopkeeper" {{ $transaction->customer && $transaction->customer->type == 'shop' ? 'selected' : '' }}>Shopkeeper</option>
                            </select>
                            <div class="invalid-feedback" id="error-party_type" style="display: none;"></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Transaction Mode <span class="text-danger">*</span></label>
                            <select class="form-select" id="transaction_mode" name="transaction_mode">
                                <option value="cash" {{ $transaction->transaction_mode == 'cash' ? 'selected' : '' }}>Cash</option>
                                <option value="credit" {{ $transaction->transaction_mode == 'credit' ? 'selected' : '' }}>Credit</option>
                            </select>
                            <div class="invalid-feedback" id="error-transaction_mode" style="display: none;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Party Information Card -->
        <div class="card mb-4" id="party-details-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0" id="party-details-title">{{ $transaction->customer && $transaction->customer->type == 'shop' ? 'Shop Details' : 'Customer Details' }}</h4>
            </div>
            <div class="card-body">
                <input type="hidden" id="customer_id" name="customer_id" value="{{ $transaction->customer_id }}">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">Contact No <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="customer_contact_search" name="contact_number" value="{{ $transaction->customer->contact_number ?? '' }}" placeholder="Enter contact number" readonly>
                            <div class="invalid-feedback" id="error-contact_number" style="display: none;"></div>
                            <div id="customer-search-spinner" class="mt-2" style="display: none;">
                                <i class="fa fa-spinner fa-spin text-primary"></i> <span class="text-muted">Searching...</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label" id="party-name-label">{{ $transaction->customer && $transaction->customer->type == 'shop' ? 'Shop Name' : 'Customer Name' }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control customer-field" id="customer_name_display" name="party_name" value="{{ $transaction->customer->name ?? '' }}" readonly>
                            <div class="invalid-feedback" id="error-party_name" style="display: none;"></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="form-label">ID Card</label>
                            <input type="text" class="form-control customer-field" id="customer_id_card_display" name="id_card" value="{{ $transaction->customer->id_card ?? '' }}" readonly>
                        </div>
                    </div>
                </div>
                <div class="row mt-3" id="id-card-images-container" style="{{ ($transaction->customer && ($transaction->customer->id_card_front || $transaction->customer->id_card_back)) ? '' : 'display: none;' }}">
                    @if($transaction->customer && $transaction->customer->id_card_front)
                    <div class="col-md-6 mb-3">
                        <div class="id-card-image-card">
                            <div class="id-card-image-label">
                                <i class="fa fa-id-card"></i>&nbsp; ID Card Front
                            </div>
                            <div class="id-card-image-body">
                                <div id="front-preview-container" class="id-card-preview-wrapper">
                                    <img src="{{ asset('storage/' . $transaction->customer->id_card_front) }}" id="front-thumbnail" class="id-card-thumb" alt="Front">
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @if($transaction->customer && $transaction->customer->id_card_back)
                    <div class="col-md-6 mb-3">
                        <div class="id-card-image-card">
                            <div class="id-card-image-label">
                                <i class="fa fa-id-card"></i>&nbsp; ID Card Back
                            </div>
                            <div class="id-card-image-body">
                                <div id="back-preview-container" class="id-card-preview-wrapper">
                                    <img src="{{ asset('storage/' . $transaction->customer->id_card_back) }}" id="back-thumbnail" class="id-card-thumb" alt="Back">
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Item/Product Details Card -->
        <div class="card mb-4">
            <div class="card-header">
                <h4 class="card-title mb-0">Item/Product Details</h4>
            </div>
            <div class="card-body">
                <div id="items-container">
                    <!-- Item rows will be added here by JavaScript -->
                </div>
            </div>
            <div class="card-footer">
                <button type="button" class="btn btn-sm btn-success" id="add-more-item">
                    <i class="fa fa-plus"></i> Add More
                </button>
            </div>
        </div>

        <!-- Payment Information & Total Card -->
        <div class="card mb-4">
            <div class="card-header">
                <h4 class="card-title mb-0">Payment Information</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- Left Side: Cash Amount, Split Payment, Bank Payment Fields -->
                    <div class="col-md-6 pe-3">
                        <!-- Cash Amount -->
                        <div class="form-group mb-3">
                            <label class="form-label fw-bold">Cash Amount <span class="text-danger">*</span></label>
                            <input type="text" class="form-control fw-bold form-control-lg amount-display amount-format" id="cash_amount_display" name="cash_amount_display" value="{{ format_amount($transaction->cash_amount) }}" placeholder="Enter Cash Amount">
                            <input type="hidden" id="cash_amount" name="cash_amount" value="{{ $transaction->cash_amount }}">
                            <div class="invalid-feedback" id="error-cash_amount" style="display: none;"></div>
                        </div>

                        <!-- Split Payment Toggle -->
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="has_bank_payment" {{ $transaction->bank_amount > 0 ? 'checked' : '' }}>
                            <label class="form-check-label fw-bold text-muted" for="has_bank_payment">
                                Split Payment (Bank / Online)
                            </label>
                        </div>

                        <!-- Bank Payment Fields -->
                        <div class="bank-payment-fields bg-light p-3 rounded-3" style="{{ $transaction->bank_amount > 0 ? '' : 'display: none;' }}">
                            <div class="form-group mb-3">
                                <label class="form-label fw-bold text-dark">Select Bank Account <span class="text-danger">*</span></label>
                                <select class="form-select mb-2" id="bank_account_id" name="bank_account_id">
                                    <option value="">Select Bank Account</option>
                                    @foreach($bankAccounts as $account)
                                    <option value="{{ $account->id }}" {{ $transaction->bank_account_id == $account->id ? 'selected' : '' }}>{{ $account->title }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="error-bank_account_id" style="display: none;"></div>
                            </div>

                            <div class="form-group">
                                <label class="form-label fw-bold mb-1 text-dark">Bank Amount <span class="text-danger">*</span></label>
                                <input type="text" class="form-control fw-bold amount-display amount-format" id="bank_amount_display" name="bank_amount_display" value="{{ format_amount($transaction->bank_amount) }}" placeholder="Enter Bank Amount">
                                <input type="hidden" id="bank_amount" name="bank_amount" value="{{ $transaction->bank_amount }}">
                                <div class="invalid-feedback" id="error-bank_amount" style="display: none;"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Right Side: Payment Information -->
                    <div class="col-md-6 border-start ps-4">
                        <!-- Summary Rows -->
                        <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                            <span class="fw-bold text-muted">Total sales:</span>
                            <div id="total_sales_display" class="h5 mb-0 fw-bold text-success">{{ format_amount($transaction->sale_amount) }}</div>
                            <input type="hidden" id="total_sales_amount" name="sale_amount" value="{{ $transaction->sale_amount }}">
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                            <span class="fw-bold text-muted">Total purchase:</span>
                            <div id="total_purchase_display" class="h5 mb-0 fw-bold text-danger">{{ format_amount($transaction->purchase_amount) }}</div>
                            <input type="hidden" id="total_purchase_amount" name="purchase_amount" value="{{ $transaction->purchase_amount }}">
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-3 pb-2 border-bottom">
                            <h4 class="mb-0 fw-bold" id="total_due_label">Total Net Amount:</h4>
                            <div id="total_amount_display" class="h3 mb-0 fw-bold">{{ format_amount($transaction->total_amount) }}</div>
                            <input type="hidden" id="total_amount" name="total_amount" value="{{ $transaction->total_amount }}">
                        </div>

                        <!-- Total Paid Amount (Cash + Bank) -->
                        <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                            <span class="fw-bold text-muted">Total paid amount:</span>
                            <div id="total_collected_display" class="h5 mb-0 fw-bold text-success">0</div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-2 pb-2">
                            <span class="fw-bold text-muted">Difference:</span>
                            <div id="difference_display" class="h5 mb-0 fw-bold text-warning">0</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="form-group mb-3 d-flex justify-content-end">
            <button type="button" class="btn btn-primary" id="saveTransaction">
                <i class="fa fa-check"></i>&nbsp;Update Transaction
            </button>
        </div>
    </form>
</div>

<!-- ID Card Image Zoom Modal -->
<div class="modal fade" id="imageZoomModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title fw-bold"><i class="fa fa-id-card me-2 text-primary"></i>ID Card Image</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center p-3">
                <img id="zoomedImage" src="" style="max-width:100%; height:auto; border-radius:8px; box-shadow: 0 4px 16px rgba(0,0,0,0.18);">
            </div>
        </div>
    </div>
</div>

<style>
    .item-row {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        background-color: #f9fafb;
        position: relative;
    }

    .item-row .delete-item-btn {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .dropdown-loader {
        display: none;
        margin-top: 5px;
        font-size: 0.875em;
        color: #6c757d;
    }

    .dropdown-loader i {
        margin-right: 5px;
    }

    .item-title+.select2-container .select2-selection--single {
        height: 38px !important;
    }

    .item-title+.select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 38px !important;
        padding-left: 12px;
        padding-right: 20px;
    }

    .item-title+.select2-container .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
        right: 10px;
    }

    .item-title+.select2-container .select2-selection--single .select2-selection__arrow b {
        border-color: #6c757d transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        height: 0;
        left: 50%;
        margin-left: -4px;
        margin-top: -2px;
        position: absolute;
        top: 50%;
        width: 0;
    }

    /* ID Card Image Card */
    .id-card-image-card {
        border: 1px solid #dee2e6;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    }

    .id-card-image-label {
        background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
        color: #fff;
        padding: 8px 14px;
        font-size: 0.80rem;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
    }

    .id-card-image-body {
        padding: 12px;
    }

    /* ID Card Preview Styles */
    .id-card-preview-wrapper {
        position: relative;
        display: inline-block;
        margin-bottom: 5px;
    }

    .id-card-thumb {
        width: 180px;
        height: 110px;
        object-fit: cover;
        border: 2px solid #dee2e6;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        display: block;
    }

    .id-card-thumb:hover {
        transform: scale(1.04);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    }

    .remove-img-btn {
        position: absolute;
        top: -8px;
        right: -8px;
        padding: 0 5px;
        font-size: 11px;
        border-radius: 50%;
        line-height: 1.7;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }
</style>

@push('scripts')
<script>
    let itemRowCounter = 0;
    const categories = @json($categories);
    const brands = @json($brands);
    const colors = @json($colors);
    const memories = @json($memories);
    const storages = @json($storages);
    const existingReferences = @json($references);

    // Format number with commas (e.g., 50000 -> 50,000)
    function formatAmount(value) {
        let num = parseFloat(value) || 0;
        return Math.floor(num).toLocaleString('en-US');
    }

    // Remove formatting and get plain number
    function unformatAmount(value) {
        return parseFloat(String(value).replace(/,/g, '')) || 0;
    }

    $(document).ready(function() {
        // Hide cross buttons initially — fields start in readonly/locked state
        $('.remove-img-btn').hide();

        // Lock customer fields - customer data cannot be edited
        lockCustomerFields(true);

        // Populating existing references
        if (existingReferences && existingReferences.length > 0) {
            existingReferences.forEach(function(ref) {
                addItemRow(ref);
            });
            calculateTotalAmount();
        } else {
            // Default to one sale row if no references
            addItemRow();
            calculateTotalAmount();
        }

        // Initialize payment summary displays
        calculateCollectedAndDifference();

        // Toggle customer/shopkeeper fields based on transaction type
        $('#party_type').on('change', function() {
            if ($(this).val() === 'customer') {
                $('#party-details-title').text('Customer Details');
                $('#party-name-label').text('Customer Name');
            } else {
                $('#party-details-title').text('Shop Details');
                $('#party-name-label').text('Shop Name');
            }
        });

        // Show/hide ID card picture field based on ID card input
        $('#customer_id_card_display').on('input change', function() {
            if ($(this).val().trim() !== '') {
                $('#id-card-images-container').show();
            } else {
                $('#id-card-images-container').hide();
            }
        });

        // Search customer by contact number
        $('#customer_contact_search').on('blur', function() {
            let contactNumber = $(this).val().trim();
            if (contactNumber) {
                $('#customer-search-spinner').show();
                $.ajax({
                    url: "{{ route('transactions.customer-by-contact') }}",
                    type: 'GET',
                    data: {
                        contact_number: contactNumber
                    },
                    success: function(response) {
                        $('#customer_name_display').val(response.name);
                        $('#customer_id_card_display').val(response.id_card).trigger('change');

                        // Handle ID Card Previews
                        if (response.id_card_front) {
                            showThumbnail('front', response.id_card_front);
                        } else {
                            resetThumbnail('front');
                        }

                        if (response.id_card_back) {
                            showThumbnail('back', response.id_card_back);
                        } else {
                            resetThumbnail('back');
                        }

                        $('#customer_id').val(response.id);
                        $('#customer-search-spinner').hide();

                        // Lock fields - customer data is read-only in edit mode
                        lockCustomerFields(true);
                    },
                    error: function(xhr) {
                        $('#customer-search-spinner').hide();
                        if (xhr.status === 404) {
                            $('#customer_id').val('');
                        }
                    }
                });
            }
        });

        // Function to show thumbnail and hide input
        function showThumbnail(target, path) {
            let container = $(`#${target}-preview-container`);
            let thumb = $(`#${target}-thumbnail`);
            let input = $(`#id_card_${target}`);
            let isLocked = $('.customer-field').prop('readonly');

            thumb.attr('src', `{{ asset('storage') }}/${path}`).attr('data-type', 'server');
            container.show();

            if (isLocked) {
                input.hide();
                container.find('.remove-img-btn').hide();
            } else {
                input.show();
                container.find('.remove-img-btn').show();
            }
        }

        // Function to reset thumbnail and show input
        function resetThumbnail(target) {
            let container = $(`#${target}-preview-container`);
            let thumb = $(`#${target}-thumbnail`);
            let input = $(`#id_card_${target}`);
            let isLocked = $('.customer-field').prop('readonly');

            container.hide();
            thumb.attr('src', '');
            if (!isLocked) {
                input.show();
            }
        }

        // Handle remove image click
        $(document).on('click', '.remove-img-btn', function() {
            let target = $(this).data('target');
            resetThumbnail(target);
            $(`#id_card_${target}`).val(''); // Clear file selection
        });

        // Click thumbnail to zoom
        $(document).on('click', '.id-card-thumb', function() {
            let src = $(this).attr('src');
            if (src) {
                $('#zoomedImage').attr('src', src);
                $('#imageZoomModal').modal('show');
            }
        });

        // Toggle Customer Fields
        function lockCustomerFields(lock) {
            $('.customer-field').prop('readonly', lock);
            if (lock) {
                $('.id-card-input').hide();
                $('.remove-img-btn').hide();
            } else {
                $('.id-card-input').show();
                $('.remove-img-btn').show();
            }
        }

        // Real-time Preview Logic
        $('.id-card-input').on('change', function(e) {
            let target = $(this).attr('id').replace('id_card_', '');
            let file = e.target.files[0];

            if (file) {
                let reader = new FileReader();
                reader.onload = function(event) {
                    $(`#${target}-thumbnail`).attr('src', event.target.result).attr('data-type', 'local');
                    $(`#${target}-preview-container`).show();
                }
                reader.readAsDataURL(file);
            }
        });

        // Add more item button
        $(document).on('click', '#add-more-item', function() {
            addItemRow();
        });

        // Delete item row
        $(document).on('click', '.delete-item-btn', function() {
            $(this).closest('.item-row').remove();
            calculateTotalAmount();
            updateDeleteButtons();
        });

        // Toggle Bank Payment
        $('#has_bank_payment').on('change', function() {
            const total = parseFloat($('#total_amount').val()) || 0;
            const cash = parseFloat($('#cash_amount').val()) || 0;

            if ($(this).is(':checked')) {
                // Auto-calculate bank amount (using absolute of total for split reconciliation)
                const bankAmount = Math.max(0, Math.abs(total) - cash);
                $('#bank_amount').val(bankAmount.toFixed(2));
                $('#bank_amount_display').val(formatAmount(bankAmount, 0));
                $('.bank-payment-fields').slideDown();
            } else {
                $('.bank-payment-fields').slideUp();
                $('#bank_account_id').val('');
                $('#bank_amount').val('0.00');
                $('#bank_amount_display').val('0');
            }
            calculateCollectedAndDifference();
            validatePaymentAmounts();
        });

        // Validation for cash and bank amounts
        $(document).on('input', '#cash_amount_display, #bank_amount_display', function() {
            // Update hidden fields
            if (this.id === 'cash_amount_display') {
                const cash = unformatAmount($(this).val());
                $('#cash_amount').val(cash.toFixed(2));
                
                // If cash changes and split is ON, sync bank
                if ($('#has_bank_payment').is(':checked')) {
                    const total = parseFloat($('#total_amount').val()) || 0;
                    const bankAmount = Math.max(0, Math.abs(total) - cash);
                    $('#bank_amount').val(bankAmount.toFixed(2));
                    $('#bank_amount_display').val(formatAmount(bankAmount, 0));
                }
            } else if (this.id === 'bank_amount_display') {
                const bank = unformatAmount($(this).val());
                $('#bank_amount').val(bank.toFixed(2));
            }

            calculateCollectedAndDifference();
            validatePaymentAmounts();
        });

        // Category change - load brands via AJAX (matches create view)
        $(document).on('change', '.item-category', function() {
            let categoryId = $(this).val();
            let row = $(this).closest('.item-row');
            let brandSelect = row.find('.item-brand');
            let itemSelect = row.find('.item-title');

            if (itemSelect.hasClass('select2-hidden-accessible')) {
                itemSelect.select2('destroy');
            }
            itemSelect.html('<option value="">Select Category and Brand First</option>').prop('disabled', true);
            row.find('.item-color, .item-memory, .item-storage').html('<option value="">Select Item First</option>').prop('disabled', true);

            if (categoryId) {
                brandSelect.prop('disabled', true).html('<option value="">Loading brands...</option>');
                $.ajax({
                    url: "{{ route('items.brands-by-category', ':id') }}".replace(':id', categoryId),
                    type: 'GET',
                    success: function(brandsData) {
                        let options = '<option value="">Select Brand</option>';
                        brandsData.forEach(function(brand) {
                            options += `<option value="${brand.id}">${brand.name}</option>`;
                        });
                        brandSelect.html(options).prop('disabled', false);
                    },
                    error: function() {
                        brandSelect.html('<option value="">Error loading brands</option>').prop('disabled', true);
                    }
                });
            } else {
                brandSelect.html('<option value="">Select Category First</option>').prop('disabled', true);
            }
        });

        // Brand change - initialize Select2 for items
        $(document).on('change', '.item-brand', function() {
            let row = $(this).closest('.item-row');
            let categoryId = row.find('.item-category').val();
            let brandId = $(this).val();
            let itemSelect = row.find('.item-title');

            if (itemSelect.hasClass('select2-hidden-accessible')) {
                itemSelect.select2('destroy');
            }

            if (categoryId && brandId) {
                initItemSelect2(itemSelect, categoryId, brandId);
            } else {
                itemSelect.html('<option value="">Select Category and Brand First</option>').prop('disabled', true);
            }
        });

        // Shared Select2 Initialization (inside ready, for brand-change event)
        function initItemSelect2(el, categoryId, brandId) {
            initSelect2Fn(el, categoryId, brandId);
        }

        // Calculate amount
        $(document).on('input', '.item-rate, .item-quantity', function() {
            let row = $(this).closest('.item-row');
            
            // Sync hidden rate field if display field changed
            if ($(this).hasClass('item-rate')) {
                const rawRate = unformatAmount($(this).val());
                row.find('.item-rate-value').val(rawRate.toFixed(2));
            }

            let rate = parseFloat(row.find('.item-rate-value').val()) || 0;
            let quantity = parseFloat(row.find('.item-quantity').val()) || 1;
            let amount = rate * quantity;
            
            // Update amount display and values
            row.find('.item-amount-value').val(amount.toFixed(2));
            row.find('.item-amount').val(formatAmount(amount, 0));
            
            calculateTotalAmount();
        });

        // Save Button Click
        $('#saveTransaction').on('click', function(e) {
            e.preventDefault();
            const saveBtn = $(this);
            let formData = new FormData(document.getElementById('transaction-form'));

            resetButtonState(saveBtn, '<i class="fa fa-spinner fa-spin"></i> Updating...', true);
            $('.invalid-feedback').hide();
            $('.form-control, .form-select').removeClass('is-invalid');

            // Client-side validation
            let hasError = false;

            // Validate Payment Amounts (comparing against absolute value for refunds)
            if ($('#transaction_mode').val() === 'cash') {
                const totalRaw = parseFloat($('#total_amount').val()) || 0;
                const total = Math.abs(totalRaw);
                const cashAmount = parseFloat($('#cash_amount').val()) || 0;
                const bankAmount = parseFloat($('#bank_amount').val()) || 0;

                if (cashAmount > total + 0.01) {
                    $('#cash_amount_display').addClass('is-invalid');
                    $('#error-cash_amount').text(`Cash amount (${cashAmount.toFixed(2)}) cannot exceed Total Net Amount (${total.toFixed(2)})`).show();
                    hasError = true;
                } else if (Math.abs(total - (cashAmount + bankAmount)) > 0.01) {
                    $('#cash_amount_display').addClass('is-invalid');
                    $('#error-cash_amount').text(`Sum of Cash and Bank amounts must equal Total Net Amount (${total.toFixed(2)})`).show();
                    hasError = true;
                }

                if ($('#has_bank_payment').is(':checked')) {
                    if (!$('#bank_account_id').val()) {
                        $('#bank_account_id').addClass('is-invalid');
                        $('#error-bank_account_id').text('Bank account is required').show();
                        hasError = true;
                    }
                    // if (bankAmount <= 0) {
                    //     $('#bank_amount').addClass('is-invalid');
                    //     $('#error-bank_amount').text('Bank amount must be greater than 0').show();
                    //     hasError = true;
                    // }
                }
            }
            // ... (validation logic same as before) ...
            if (hasError) {
                resetButtonState(saveBtn, '<i class="fa fa-check"></i> Update Transaction');
                return;
            }

            $.ajax({
                url: $('#transaction-form').attr('action'),
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    if (res.success) {
                        $('#success-message span').text(res.message);
                        $('#success-message').fadeIn();
                        setTimeout(() => window.location.href = res.redirect, 2000);
                    }
                },
                error: function(xhr) {
                    resetButtonState(saveBtn, '<i class="fa fa-check"></i> Update Transaction');
                    Swal.fire({
                        title: 'Error',
                        text: 'An error occurred.',
                        icon: 'error'
                    });
                }
            });
        });

        $(document).on('input change', '.form-control, .form-select', function() {
            $(this).removeClass('is-invalid');
        });
    });

    function addItemRow(data = null) {
        itemRowCounter++;
        let rowId = 'item-row-' + itemRowCounter;

        let catOpts = '<option value="">Select Category</option>';
        categories.forEach(c => catOpts += `<option value="${c.id}" ${data && data.item_data && data.item_data.cat_id == c.id ? 'selected' : ''}>${c.name}</option>`);

        // Brand options pre-populated if data exists
        let brandOpts = '<option value="">Select Category First</option>';
        if (data && data.item_data) {
            let catBrands = brands.filter(b => b.category_id == data.item_data.cat_id || !b.category_id);
            brandOpts = '<option value="">Select Brand</option>';
            catBrands.forEach(b => brandOpts += `<option value="${b.id}" ${data.item_data.brand_id == b.id ? 'selected' : ''}>${b.name}</option>`);
        }

        // Color Options
        let colorOpts = '<option value="">Select Color</option>';
        colors.forEach(c => colorOpts += `<option value="${c.id}" ${data && data.color_id == c.id ? 'selected' : ''}>${c.name}</option>`);

        // Memory Options
        let memOpts = '<option value="">Select Memory</option>';
        memories.forEach(m => {
            let lbl = m.name + (m.name.toString().toUpperCase().includes('GB') ? '' : ' GB');
            memOpts += `<option value="${m.id}" ${data && data.memory_id == m.id ? 'selected' : ''}>${lbl}</option>`;
        });

        // Storage Options
        let storOpts = '<option value="">Select Storage</option>';
        storages.forEach(s => {
            let lbl = s.name + (s.type ? ' ' + s.type : '');
            storOpts += `<option value="${s.id}" ${data && data.storage_id == s.id ? 'selected' : ''}>${lbl}</option>`;
        });

        let html = `
            <div class="item-row" id="${rowId}">
                <button type="button" class="btn btn-sm btn-danger delete-item-btn"><i class="fa fa-times"></i></button>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">Category <span class="text-danger">*</span></label>
                            <select class="form-select item-category" name="items[${itemRowCounter}][category_id]">
                                ${catOpts}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">Brand <span class="text-danger">*</span></label>
                            <select class="form-select item-brand" name="items[${itemRowCounter}][brand_id]" ${data ? '' : 'disabled'}>
                                ${brandOpts}
                            </select>
                            <div class="dropdown-loader brand-loader">
                                <i class="fa fa-spinner fa-spin"></i> Loading...
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">Item Title <span class="text-danger">*</span></label>
                            <select class="form-control item-title" name="items[${itemRowCounter}][item_id]" style="width: 100%;" ${data ? '' : 'disabled'}>
                                ${data ? `<option value="${data.prod_id}" selected>${data.item_data.title}</option>` : '<option value="">Select Brand First</option>'}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">Color <span class="text-danger">*</span></label>
                            <select class="form-select item-color" name="items[${itemRowCounter}][color_id]" ${data ? '' : 'disabled'}>
                                ${colorOpts}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">Memory <span class="text-danger">*</span></label>
                            <select class="form-select item-memory" name="items[${itemRowCounter}][memory_id]" ${data ? '' : 'disabled'}>
                                ${memOpts}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">Storage <span class="text-danger">*</span></label>
                            <select class="form-select item-storage" name="items[${itemRowCounter}][storage_id]" ${data ? '' : 'disabled'}>
                                ${storOpts}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">Registration Type</label>
                            <select class="form-select" name="items[${itemRowCounter}][registration_type]">
                                <option value="">Select Type</option>
                                <option value="Non PTA" ${data && data.registration_type == 'Non PTA' ? 'selected' : ''}>Non PTA</option>
                                <option value="PTA" ${data && data.registration_type == 'PTA' ? 'selected' : ''}>PTA</option>
                                <option value="CPID" ${data && data.registration_type == 'CPID' ? 'selected' : ''}>CPID</option>
                                <option value="JV" ${data && data.registration_type == 'JV' ? 'selected' : ''}>JV</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">SIM Details</label>
                            <select class="form-select item-sim-status" name="items[${itemRowCounter}][sim_status]">
                                <option value="">Select Sim</option>
                                <option value="Single" ${data && data.sim_details == 'Single' ? 'selected' : ''}>Single</option>
                                <option value="Dual Physical" ${data && data.sim_details == 'Dual Physical' ? 'selected' : ''}>Dual Physical</option>
                                <option value="Physical + eSim" ${data && data.sim_details == 'Physical + eSim' ? 'selected' : ''}>Physical + eSim</option>
                                <option value="Dual eSim" ${data && data.sim_details == 'Dual eSim' ? 'selected' : ''}>Dual eSim</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">IMEI 1</label>
                            <input type="text" class="form-control" name="items[${itemRowCounter}][imei_1]" value="${data ? data.imei_1 || '' : ''}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">IMEI 2</label>
                            <input type="text" class="form-control item-imei2" name="items[${itemRowCounter}][imei_2]" value="${data ? data.imei_2 || '' : ''}" ${data && data.sim_details == 'Single' ? 'disabled' : ''}>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">Serial Number <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="items[${itemRowCounter}][serial_number]" value="${data ? data.serial_no || '' : ''}">
                        </div>
                    </div>
                </div>
                <div class="row">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">Condition <span class="text-danger">*</span></label>
                            <select class="form-select" name="items[${itemRowCounter}][condition]">
                                <option value="">Select Condition</option>
                                <option value="New" ${data && data.condition == 'New' ? 'selected' : ''}>New</option>
                                <option value="Used" ${data && data.condition == 'Used' ? 'selected' : ''}>Used</option>
                                <option value="Used Rough" ${data && data.condition == 'Used Rough' ? 'selected' : ''}>Used Rough</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">Rate <span class="text-danger">*</span></label>
                            <input type="text" class="form-control item-rate amount-display amount-format" name="items[${itemRowCounter}][rate_display]" value="${data ? formatAmount(data.rate) : '0'}">
                            <input type="hidden" class="item-rate-value" name="items[${itemRowCounter}][rate]" value="${data ? data.rate : '0.00'}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">Quantity</label>
                            <input type="number" step="1" class="form-control item-quantity" name="items[${itemRowCounter}][quantity]" value="${data ? data.quantity : '1'}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-label">Amount</label>
                            <input type="text" class="form-control item-amount amount-display amount-format" name="items[${itemRowCounter}][amount_display]" value="${data ? formatAmount(data.amount) : '0'}" readonly>
                            <input type="hidden" class="item-amount-value" name="items[${itemRowCounter}][amount]" value="${data ? data.amount : '0.00'}">
                        </div>
                    </div>
                </div>
                <div class="row justify-content-start mt-2">
                    <div class="col-md-2">
                        <div class="form-group">
                        <div class="form-check">
                                <input type="hidden" name="items[${itemRowCounter}][transaction_type]" value="${data && data.transaction_type == 'Purchase' ? 'Purchase' : 'Sale'}" class="item-transaction-type">
                            <input class="form-check-input type-switch" type="checkbox" id="typeSwitch_${itemRowCounter}" ${data && data.transaction_type == 'Purchase' ? 'checked' : ''}>
                            <label class="form-check-label fw-bold" for="typeSwitch_${itemRowCounter}">
                                Purchase
                            </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;

        $('#items-container').append(html);

        if (data) {
            let row = $('#' + rowId);
            // Re-initialize Select2 for this row
            initSelect2(row.find('.item-title'), data.item_data.cat_id, data.item_data.brand_id);
        }

        updateDeleteButtons();
        calculateTotalAmount();
    }

    $(document).on('change', '.type-switch', function() {
        let row = $(this).closest('.item-row');
        let hiddenInput = row.find('.item-transaction-type');
        
        if($(this).is(':checked')) {
            hiddenInput.val('Purchase');
        } else {
            hiddenInput.val('Sale');
        }
        calculateTotalAmount();
    });

    function calculateTotalAmount() {
        let saleTotal = 0;
        let purchaseTotal = 0;

        $('.item-row').each(function() {
            const row = $(this);
            const amount = parseFloat(row.find('.item-amount-value').val()) || 0;
            const type = row.find('.item-transaction-type').val();

            if (type === 'Sale') {
                saleTotal += amount;
            } else {
                purchaseTotal += amount;
            }
        });

        const totalDue = saleTotal - purchaseTotal;

        // Update hidden fields
        $('#total_sales_amount').val(saleTotal.toFixed(2));
        $('#total_purchase_amount').val(purchaseTotal.toFixed(2));
        $('#total_amount').val(totalDue.toFixed(2));

        // Update displays
        $('#total_sales_display').text(formatAmount(saleTotal));
        $('#total_purchase_display').text(formatAmount(purchaseTotal));
        
        // Handle negative sign for Total Due Display
        let totalDueText = formatAmount(Math.abs(totalDue));
        if (totalDue < 0) {
            $('#total_amount_display').html('-' + totalDueText);
        } else {
            $('#total_amount_display').text(totalDueText);
        }

        calculateCollectedAndDifference();
    }

    function calculateCollectedAndDifference() {
        const totalDue = parseFloat($('#total_amount').val()) || 0;
        const cash = unformatAmount($('#cash_amount_display').val());
        const bank = unformatAmount($('#bank_amount_display').val());
        const collected = cash + bank;

        // Difference is calculated against the ABSOLUTE value of totalDue
        const difference = Math.abs(totalDue) - collected;

        // Update displays
        $('#total_collected_display').text(formatAmount(collected));
        
        let diffDisplay = $('#difference_display');
        let diffText = formatAmount(Math.abs(difference));
        
        if (difference < -0.01) {
            // Overpaid (collected > abs(totalDue))
            diffDisplay.html('-' + diffText).addClass('text-danger').removeClass('text-success');
        } else if (difference > 0.01) {
            // Underpaid (collected < abs(totalDue))
            diffDisplay.text(diffText).addClass('text-danger').removeClass('text-success');
        } else {
            // Balanced
            diffDisplay.text('0').removeClass('text-danger').addClass('text-success');
        }

        // Disable payment fields if totalDue is 0
        if (Math.abs(totalDue) < 0.01) {
            $('#cash_amount_display, #has_bank_payment, #bank_amount_display, #bank_account_id').prop('disabled', true);
            $('#cash_amount_display').val('0');
            $('#bank_amount_display').val('0');
        } else {
            $('#cash_amount_display, #has_bank_payment, #bank_amount_display, #bank_account_id').prop('disabled', false);
        }
    }

    // SIM Status change logic
    $(document).on('change', '.item-sim-status', function() {
        let row = $(this).closest('.item-row');
        let imei2 = row.find('.item-imei2');
        if ($(this).val() === 'Single') {
            imei2.val('').prop('disabled', true);
        } else {
            imei2.prop('disabled', false);
        }
    });

    // Single global Select2 initializer used by both existing rows and new ones
    function initSelect2Fn(el, catId, brandId) {
        el.prop('disabled', false).select2({
            placeholder: 'Type to search items...',
            allowClear: true,
            minimumInputLength: 1,
            ajax: {
                url: "{{ route('transactions.search-items') }}",
                dataType: 'json',
                delay: 250,
                data: (params) => ({
                    q: params.term,
                    category_id: catId,
                    brand_id: brandId,
                    page: params.page || 1
                }),
                processResults: (data) => ({
                    results: data.results,
                    pagination: {
                        more: data.pagination && data.pagination.more
                    }
                }),
                cache: true
            }
        }).on('select2:select', function(e) {
            loadItemAttributes($(this).closest('.item-row'), e.params.data.id);
        });
    }

    $(document).on('change', '.type-switch', function() {
        let row = $(this).closest('.item-row');
        let hiddenInput = row.find('.item-transaction-type');
        
        if($(this).is(':checked')) {
            hiddenInput.val('Purchase');
        } else {
            hiddenInput.val('Sale');
        }
    });

    // Legacy alias used by addItemRow for existing data rows
    function initSelect2(el, catId, brandId) {
        initSelect2Fn(el, catId, brandId);
    }

    function loadItemAttributes(row, itemId) {
        let colorSelect = row.find('.item-color');
        let memorySelect = row.find('.item-memory');
        let storageSelect = row.find('.item-storage');

        if (!itemId) {
            colorSelect.html('<option value="">Select Item First</option>').prop('disabled', true);
            memorySelect.html('<option value="">Select Item First</option>').prop('disabled', true);
            storageSelect.html('<option value="">Select Item First</option>').prop('disabled', true);
            return;
        }

        colorSelect.prop('disabled', true);
        memorySelect.prop('disabled', true);
        storageSelect.prop('disabled', true);

        $.ajax({
            url: "{{ url('items') }}/" + itemId,
            type: 'GET',
            success: function(item) {
                // Colors
                let colorOptions = '<option value="">Select Color</option>';
                if (item.colors && item.colors.length > 0) {
                    item.colors.forEach(function(colorId) {
                        let colorObj = colors.find(c => c.id == colorId);
                        if (colorObj) {
                            colorOptions += `<option value="${colorObj.id}">${colorObj.name}</option>`;
                        }
                    });
                } else {
                    colors.forEach(function(color) {
                        colorOptions += `<option value="${color.id}">${color.name}</option>`;
                    });
                }
                colorSelect.html(colorOptions).prop('disabled', false);

                // Memories
                let memoryOptions = '<option value="">Select Memory</option>';
                if (item.memories && item.memories.length > 0) {
                    item.memories.forEach(function(memoryId) {
                        let memoryObj = memories.find(m => m.id == memoryId);
                        if (memoryObj) {
                            let displayLabel = memoryObj.name + (memoryObj.name.toString().toUpperCase().includes('GB') ? '' : ' GB');
                            memoryOptions += `<option value="${memoryObj.id}">${displayLabel}</option>`;
                        }
                    });
                } else {
                    memories.forEach(function(memory) {
                        let displayLabel = memory.name + (memory.name.toString().toUpperCase().includes('GB') ? '' : ' GB');
                        memoryOptions += `<option value="${memory.id}">${displayLabel}</option>`;
                    });
                }
                memorySelect.html(memoryOptions).prop('disabled', false);

                // Storages
                let storageOptions = '<option value="">Select Storage</option>';
                if (item.storages && item.storages.length > 0) {
                    item.storages.forEach(function(storageId) {
                        let storageObj = storages.find(s => s.id == storageId);
                        if (storageObj) {
                            let displayLabel = storageObj.name + (storageObj.type ? ' ' + storageObj.type : '');
                            storageOptions += `<option value="${storageObj.id}">${displayLabel}</option>`;
                        }
                    });
                } else {
                    storages.forEach(function(storage) {
                        let displayLabel = storage.name + (storage.type ? ' ' + storage.type : '');
                        storageOptions += `<option value="${storage.id}">${displayLabel}</option>`;
                    });
                }
                storageSelect.html(storageOptions).prop('disabled', false);
            },
            error: function() {
                colorSelect.prop('disabled', false);
                memorySelect.prop('disabled', false);
                storageSelect.prop('disabled', false);
            }
        });
    }

    function validatePaymentAmounts() {
        const totalRaw = parseFloat($('#total_amount').val()) || 0;
        const total = Math.abs(totalRaw);
        const cash = unformatAmount($('#cash_amount_display').val());
        const bank = unformatAmount($('#bank_amount_display').val());
        const hasBank = $('#has_bank_payment').is(':checked');

        const cashField = $('#cash_amount_display');
        const bankField = $('#bank_amount_display');
        const errorDiv = $('#error-cash_amount');
        const bankErrorDiv = $('#error-bank_amount');

        cashField.removeClass('is-invalid');
        bankField.removeClass('is-invalid');
        errorDiv.hide();
        bankErrorDiv.hide();

        if (cash > total + 0.01) {
            cashField.addClass('is-invalid');
            errorDiv.text(`Cash amount (${cash.toFixed(2)}) cannot exceed Total Net Amount (${total.toFixed(2)})`).show();
            return;
        }

        if (hasBank) {
            if (bank > total + 0.01) {
                bankField.addClass('is-invalid');
                bankErrorDiv.text(`Bank amount (${bank.toFixed(2)}) cannot exceed Total Net Amount (${total.toFixed(2)})`).show();
            }
            if (Math.abs(total - (cash + bank)) > 0.01) {
                cashField.addClass('is-invalid');
                $('#error-cash_amount').text(`Sum of Cash and Bank amounts must equal Total Net Amount (${total.toFixed(2)})`).show();
            }
        } else {
            if (cash > 0 && Math.abs(total - cash) > 0.01) {
                cashField.addClass('is-invalid');
                errorDiv.text(`Cash amount must equal Total Amount`).show();
            }
        }
    }

    function updateDeleteButtons() {
        $('.delete-item-btn').toggle($('.item-row').length > 1);
    }

    function resetButtonState(btn, txt, dis) {
        btn.html(txt).prop('disabled', dis);
    }
</script>
<script src="{{ asset('js/plugins/select2/select2.full.min.js') }}"></script>
@endpush
@endsection