@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">New Transaction</h2>
            <p class="card-section-subtitle">Create a new transaction.</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.store') }}" enctype="multipart/form-data">
        @csrf

        <!-- 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" 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" selected>Customer</option>
                                <option value="shopkeeper">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" selected>Cash</option>
                                <option value="credit">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">Customer Details</h4>
                <button type="button" class="btn btn-xs btn-outline-primary" id="edit-customer-btn" style="display: none;"><i class="fa fa-edit"></i> Edit</button>
            </div>
            <div class="card-body">
                <input type="hidden" id="customer_id" name="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" placeholder="Enter contact number">
                            <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">Customer Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control customer-field" id="customer_name_display" name="party_name">
                            <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">
                        </div>
                    </div>
                </div>
                <div class="row mt-3" id="id-card-images-container" style="display: none;">
                    <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" style="display: none;">
                                    <img src="" id="front-thumbnail" class="id-card-thumb" alt="Front">
                                    <button type="button" class="btn btn-xs btn-danger remove-img-btn" data-target="front"><i class="fa fa-times"></i></button>
                                </div>
                                <input type="file" class="form-control id-card-input mt-2" id="id_card_front" name="id_card_front" accept="image/*">
                            </div>
                        </div>
                    </div>
                    <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" style="display: none;">
                                    <img src="" id="back-thumbnail" class="id-card-thumb" alt="Back">
                                    <button type="button" class="btn btn-xs btn-danger remove-img-btn" data-target="back"><i class="fa fa-times"></i></button>
                                </div>
                                <input type="file" class="form-control id-card-input mt-2" id="id_card_back" name="id_card_back" accept="image/*">
                            </div>
                        </div>
                    </div>
                </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">
                    <!-- First item row 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" placeholder="Enter Cash Amount" value="0">
                            <input type="hidden" id="cash_amount" name="cash_amount" value="0.00">
                            <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">
                            <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="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 }}">{{ $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" placeholder="Enter Bank Amount" value="0">
                                <input type="hidden" id="bank_amount" name="bank_amount" value="0.00">
                                <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">0</div>
                            <input type="hidden" id="total_sales_amount" name="sale_amount" value="0.00">
                        </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">0</div>
                            <input type="hidden" id="total_purchase_amount" name="purchase_amount" value="0.00">
                        </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">0</div>
                            <input type="hidden" id="total_amount" name="total_amount" value="0.00">
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                            <span class="fw-bold text-muted">Total amount paid:</span>
                            <div id="total_collected_display" class="h5 mb-0 fw-bold">0</div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-2 pb-2">
                            <span class="fw-bold text-muted text-uppercase">Difference:</span>
                            <div id="difference_display" class="h5 mb-0 fw-bold">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;Save 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>

<!-- Item Info Modal (for adding new items from purchase) -->
<div class="modal fade" id="ItemInfo" tabindex="-1" aria-labelledby="ItemInfoLabel" aria-hidden="true">
    <style>
        #ItemInfo .select2-dropdown {
            z-index: 10000 !important;
        }
        #ItemInfo .select2-container {
            z-index: 9999 !important;
        }
        #ItemInfo .form-control.select2-hidden-accessible {
            display: none !important;
        }
        #ItemInfo .select2-container--default .select2-selection--multiple {
            min-height: 38px;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }
    </style>
    <form id="item" method="POST" action="{{ route('items.store') }}">
        @csrf
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header d-flex justify-content-between align-items-center">
                    <h5 class="modal-title mb-0" id="ItemInfoLabel">Add New Item</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="brands-loader" class="text-center py-3" style="display: none;">
                        <i class="fa fa-spinner fa-spin fa-2x text-primary"></i>
                        <p class="mt-2 mb-0 text-muted">Loading brands...</p>
                    </div>
                    <div id="success-message" class="alert alert-success" style="display: none;">
                        <span></span>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Category <span class="text-danger">*</span></label>
                                <select class="form-select" id="item_cat_id" name="cat_id">
                                    <option value="">Select Category</option>
                                    @foreach($categories ?? [] as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="error-cat_id" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Brand <span class="text-danger">*</span></label>
                                <select class="form-select" id="item_brand_id" name="brand_id" disabled>
                                    <option value="">Select Category First</option>
                                </select>
                                <div class="invalid-feedback" id="error-brand_id" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Title <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="item_title" name="title" maxlength="250">
                        <div class="invalid-feedback" id="error-title" style="display: none;">Title is required</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Colors</label>
                                <select class="form-control" id="item_colors" name="colors[]" multiple style="width: 100%;">
                                    @foreach($colors ?? [] as $color)
                                        <option value="{{ $color->id }}">{{ $color->name }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="error-colors" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Memory (RAM)</label>
                                <select class="form-control" id="item_memories" name="memories[]" multiple style="width: 100%;">
                                    @foreach($memories ?? [] as $memory)
                                        <option value="{{ $memory->id }}">{{ $memory->name }} GB</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="error-memories" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Storage (ROM)</label>
                                <select class="form-control" id="item_storages" name="storages[]" multiple style="width: 100%;">
                                    @foreach($storages ?? [] as $storage)
                                        <option value="{{ $storage->id }}">{{ $storage->name }} {{ $storage->type }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="error-storages" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="item_description" name="description" rows="3"></textarea>
                        <div class="invalid-feedback" id="error-description" style="display: none;"></div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-label">Status <span class="text-danger">*</span></label>
                                <select class="form-select" id="item_status" name="status">
                                    <option value="Active" selected>Active</option>
                                    <option value="Inactive">Inactive</option>
                                </select>
                                <div class="invalid-feedback" id="error-status" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveItem">
                        <i class="fa fa-check"></i>&nbsp;Save Item
                    </button>
                </div>
            </div>
        </div>
    </form>
</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;
    }

    /* Make Select2 dropdown match height of other form controls */
    .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-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 colors = @json($colors);
    const memories = @json($memories);
    const storages = @json($storages);

    // Update hidden field when display field changes
    function syncAmountFields(displaySelector, hiddenSelector) {
        $(document).on('input', displaySelector, function() {
            let displayValue = $(this).val();
            let numValue = unformatAmount(displayValue);
            $(hiddenSelector).val(numValue.toFixed(2));
        });
    }

    $(document).ready(function() {
        // Setup amount field synchronization
        syncAmountFields('#cash_amount_display', '#cash_amount');
        syncAmountFields('#bank_amount_display', '#bank_amount');

        // Add first item row
        addItemRow();

        // Initialize payment summary displays
        calculateTotalAmount();

        // 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();
                $('#id_card_front, #id_card_back').val(''); // Clear files
            }
        });

        // 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 initially and show edit button
                        lockCustomerFields(true);
                        $('#edit-customer-btn').show();
                    },
                    error: function(xhr) {
                        $('#customer-search-spinner').hide();
                        if (xhr.status === 404) {
                            $('#customer_name_display').val('');
                            $('#customer_id_card_display').val('');
                            $('#customer_id').val('');
                            Swal.fire({
                                title: 'Not Found',
                                text: 'Customer with this contact number not found.',
                                icon: 'warning',
                                confirmButtonText: 'OK'
                            });
                        }
                    }
                });
            } else {
                $('#customer-search-spinner').hide();
            }
        });

        // 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();
            }
            // Button state
            if (lock) {
                $('#edit-customer-btn').html('<i class="fa fa-edit"></i> Edit').removeClass('btn-primary').addClass('btn-outline-primary');
            } else {
                $('#edit-customer-btn').html('<i class="fa fa-times"></i> Done').removeClass('btn-outline-primary').addClass('btn-primary');
            }
        }

        $('#edit-customer-btn').on('click', function() {
            let isLocked = $('#customer_name_display').prop('readonly');
            lockCustomerFields(!isLocked);
        });

        // 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));
            }

            // Recalculate collected and difference
            calculateCollectedAndDifference();
            validatePaymentAmounts();
        });

        function validatePaymentAmounts() {
            const totalRaw = parseFloat($('#total_amount').val()) || 0;
            const total = Math.abs(totalRaw);
            const cash = parseFloat($('#cash_amount').val()) || 0;
            const bank = parseFloat($('#bank_amount').val()) || 0;
            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');

            // Clear previous errors
            cashField.removeClass('is-invalid');
            bankField.removeClass('is-invalid');
            errorDiv.hide();
            bankErrorDiv.hide();

            // 1. Check if cash exceeds total
            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) {
                // 2. Check if bank exceeds total
                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();
                }

                // 3. Check if sum matches total
                if (Math.abs(total - (cash + bank)) > 0.01) {
                    cashField.addClass('is-invalid');
                    errorDiv.text(`Sum of Cash and Bank must equal Total Net Amount (${total.toFixed(2)})`).show();
                }
            } else {
                // If not split, cash must equal total
                if (cash > 0 && Math.abs(total - cash) > 0.01) {
                    cashField.addClass('is-invalid');
                    errorDiv.text(`Cash amount must equal Total Net Amount (${total.toFixed(2)})`).show();
                }
            }
        }

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

            // Reset item Select2 if it exists
            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').html('<option value="">Select Item First</option>').prop('disabled', true);
            row.find('.item-memory').html('<option value="">Select Item First</option>').prop('disabled', true);
            row.find('.item-storage').html('<option value="">Select Item First</option>').prop('disabled', true);

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

        // Category and 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');

            // Destroy existing Select2 if it exists
            if (itemSelect.hasClass('select2-hidden-accessible')) {
                itemSelect.select2('destroy');
            }

            if (categoryId && brandId) {
                // Initialize Select2 with AJAX
                itemSelect.prop('disabled', false);
                itemSelect.html('<option value="">Type to search items...</option>');

                itemSelect.select2({
                    placeholder: 'Type to search items...',
                    allowClear: true,
                    minimumInputLength: 1,
                    ajax: {
                        url: "{{ route('transactions.search-items') }}",
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term, // search term
                                category_id: categoryId,
                                brand_id: brandId,
                                page: params.page || 1
                            };
                        },
                        processResults: function(data, params) {
                            params.page = params.page || 1;
                            let results = data.results || [];
                            return {
                                results: results,
                                pagination: {
                                    more: data.pagination && data.pagination.more
                                }
                            };
                        },
                        cache: true
                    },
                    templateSelection: function(item) {
                        return item.text || item.id;
                    }
                });

                // Show "Add New Item" button when Select2 opens
                itemSelect.on('select2:open', function(e) {
                    let currentRow = row;
                    let currentSelect = itemSelect;
                    
                    setTimeout(function() {
                        let $dropdownList = $('.select2-dropdown.select2-dropdown--below, .select2-dropdown.select2-dropdown--above').last();
                        
                        // Create button if it doesn't exist
                        let $addNewBtn = $dropdownList.find('.add-new-item-btn');
                        if ($addNewBtn.length === 0) {
                            let buttonHtml = '<div style="padding: 8px; border-bottom: 1px solid #ddd; text-align: center;">' +
                                '<button type="button" class="add-new-item-btn btn btn-sm btn-primary" style="width: 100%;"><i class="fa fa-plus"></i> Add New Item</button>' +
                                '</div>';
                            $dropdownList.find('.select2-results').prepend(buttonHtml);
                        }
                        
                        // Handle Add New Item button click
                        $(document).on('click', '.add-new-item-btn', function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            
                            window.currentItemRow = {
                                row: currentRow,
                                selectElement: currentSelect
                            };
                            
                            // Close Select2
                            currentSelect.select2('close');
                            
                            // Open ItemInfo modal
                            $('#ItemInfo').modal('show');
                        });
                    }, 100);
                });

                // Handle item selection
                itemSelect.on('select2:select', function(e) {
                    let selectedItem = e.params.data;
                    let row = $(this).closest('.item-row');

                    // Load attributes for this item
                    loadItemAttributes(row, selectedItem.id);
                });

                // Clear memory/storage when item is cleared
                itemSelect.on('select2:clear', function() {
                    let row = $(this).closest('.item-row');
                    row.find('.item-color').html('<option value="">Select Item First</option>').prop('disabled', true);
                    row.find('.item-memory').html('<option value="">Select Item First</option>').prop('disabled', true);
                    row.find('.item-storage').html('<option value="">Select Item First</option>').prop('disabled', true);
                });
            } else {
                itemSelect.html('<option value="">Select Category and Brand First</option>').prop('disabled', true);
            }
        });

        // Function to load item attributes
        function loadItemAttributes(row, itemId) {
            let colorSelect = row.find('.item-color');
            let colorLoader = row.find('.color-loader');
            let memorySelect = row.find('.item-memory');
            let memoryLoader = row.find('.memory-loader');
            let storageSelect = row.find('.item-storage');
            let storageLoader = row.find('.storage-loader');

            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);
                colorLoader.hide();
                memoryLoader.hide();
                storageLoader.hide();
                return;
            }

            colorLoader.show();
            memoryLoader.show();
            storageLoader.show();
            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);
                    colorLoader.hide();

                    // 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);
                    memoryLoader.hide();

                    // 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);
                    storageLoader.hide();
                },
                error: function() {
                    // Fallback to all
                    let colorOptions = '<option value="">Select Color</option>';
                    colors.forEach(function(color) {
                        colorOptions += `<option value="${color.id}">${color.name}</option>`;
                    });
                    colorSelect.html(colorOptions).prop('disabled', false);
                    colorLoader.hide();

                    let memoryOptions = '<option value="">Select Memory</option>';
                    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);
                    memoryLoader.hide();

                    let storageOptions = '<option value="">Select Storage</option>';
                    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);
                    storageLoader.hide();
                }
            });
        }

        // Calculate amount when rate or quantity changes
        $(document).on('input', '.item-rate, .item-quantity', function() {
            let row = $(this).closest('.item-row');

            // Get rate value from display field (formatted input) or hidden field
            let rateDisplay = row.find('.item-rate').val();
            let rate = unformatAmount(rateDisplay);

            let quantity = parseFloat(row.find('.item-quantity').val()) || 1;
            let amount = rate * quantity;

            // Update hidden fields with actual values
            row.find('.item-rate-value').val(rate.toFixed(2));
            row.find('.item-amount-value').val(amount.toFixed(2));

            // Update display fields with formatted values
            row.find('.item-rate').val(formatAmount(rate));
            row.find('.item-amount').val(formatAmount(amount));

            calculateTotalAmount();
        });

        const saveButton = $('#saveTransaction');

        function resetButtonState(button, text, disabled = false) {
            button.html(text).prop('disabled', disabled);
        }

        // Clear invalid status on input
        $(document).on('input change', '.form-control, .form-select', function() {
            $(this).removeClass('is-invalid');
            const errorId = 'error-' + $(this).attr('name');
            $('#' + errorId).hide();
            // Also handle the special search fields
            if ($(this).attr('id') === 'customer_contact_search') $('#error-contact_number').hide();
            if ($(this).attr('id') === 'customer_name_display') $('#error-party_name').hide();
        });

        function resetForm() {
            $('#transaction-form')[0].reset();
            $('#party_type').val('customer');
            $('#transaction_mode').val('cash');
            $('#total_amount').val('0.00');
            $('#party-details-title').text('Customer Details');
            $('#party-name-label').text('Customer Name');
            $('#customer_name_display, #customer_id_card_display, #customer_contact_search').val('');
            $('#customer_id_card_display').trigger('change');
            $('#items-container').empty();
            itemRowCounter = 0;
            addItemRow();
            $('.invalid-feedback').hide();
            $('.form-control, .form-select').removeClass('is-invalid');
        }

        saveButton.on('click', function(e) {
            e.preventDefault();

            let formElement = document.getElementById('transaction-form');
            let formData = new FormData(formElement);

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

            // Client-side validation for required fields
            let hasError = false;

            // Validate Top-level fields
            const requiredFields = [{
                    id: 'customer_contact_search',
                    errorId: 'error-contact_number',
                    msg: 'Contact number is required'
                },
                {
                    id: 'customer_name_display',
                    errorId: 'error-party_name',
                    msg: 'Name is required'
                }
            ];

            requiredFields.forEach(field => {
                const el = $('#' + field.id);
                if (!el.val().trim()) {
                    el.addClass('is-invalid');
                    $('#' + field.errorId).text(field.msg).show();
                    hasError = true;
                }
            });

            // Validate Item rows
            $('.item-row').each(function() {
                const row = $(this);
                const itemRequired = [{
                        sel: '.item-category',
                        msg: 'Category is required'
                    },
                    {
                        sel: '.item-brand',
                        msg: 'Brand is required'
                    },
                    {
                        sel: '.item-title',
                        msg: 'Product is required'
                    },
                    {
                        sel: '.item-color',
                        msg: 'Color is required'
                    },
                    {
                        sel: '.item-memory',
                        msg: 'Memory is required'
                    },
                    {
                        sel: '.item-storage',
                        msg: 'Storage is required'
                    },
                    {
                        sel: 'select[name*="[condition]"]',
                        msg: 'Condition is required'
                    },
                    {
                        sel: 'input[name*="[serial_number]"]',
                        msg: 'Serial is required'
                    },
                    {
                        sel: '.item-rate',
                        msg: 'Rate is required'
                    }
                ];

                itemRequired.forEach(spec => {
                    const el = row.find(spec.sel);
                    // For rate field, check hidden field value
                    if (spec.sel === '.item-rate') {
                        const hiddenRateValue = parseFloat(row.find('.item-rate-value').val()) || 0;
                        if (hiddenRateValue === 0 || hiddenRateValue === 0.00) {
                            el.addClass('is-invalid');
                            hasError = true;
                        }
                    } else {
                        if (!el.val() || !el.val().trim() || el.val() == "0.00") {
                            el.addClass('is-invalid');
                            hasError = true;
                        }
                    }
                });
            });

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

                if (Math.abs(Math.abs(totalAmount) - (cashAmount + bankAmount)) > 0.01) {
                    $('#cash_amount').addClass('is-invalid');
                    $('#error-cash_amount').text('Sum of Cash and Bank amounts must equal Total Net Amount (' + Math.abs(totalAmount).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;
                    // }
                }
            }

            if (hasError) {
                resetButtonState(saveButton, '<i class="fa fa-check"></i> Save Transaction');
                Swal.fire({
                    title: 'Validation Error',
                    text: 'Please fill all required fields highlighted in red.',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
                return;
            }

            $.ajax({
                url: "{{ route('transactions.store') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        $('#success-message span').text(response.message);
                        $('#success-message').fadeIn();
                        setTimeout(function() {
                            window.location.href = response.redirect;
                        }, 2000);
                    }
                },
                complete: function() {
                    if (saveButton && saveButton.length) {
                        resetButtonState(saveButton, '<i class="fa fa-check"></i> Save Transaction');
                    }
                },
                error: function(errorResponse) {
                    resetButtonState(saveButton, '<i class="fa fa-check"></i> Save Transaction');

                    if (errorResponse.status === 422) {
                        let errors = errorResponse.responseJSON.errors;
                        Object.keys(errors).forEach(function(key) {
                            $('#' + key).addClass('is-invalid');
                            $('#error-' + key).text(errors[key][0]).show();
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: 'An error occurred. Please try again.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                }
            });
        });
    });

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

        let categoryOptions = '<option value="">Select Category</option>';
        categories.forEach(function(category) {
            categoryOptions += `<option value="${category.id}">${category.name}</option>`;
        });

        let colorOptions = '<option value="">Select Color</option>';
        colors.forEach(function(color) {
            colorOptions += `<option value="${color.id}">${color.name}</option>`;
        });

        let html = `
            <div class="item-row" id="${rowId}">
                <button type="button" class="btn btn-sm btn-danger delete-item-btn" style="display: none;"><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]">
                                ${categoryOptions}
                            </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]" disabled>
                                <option value="">Select Category First</option>
                            </select>
                            <div class="dropdown-loader brand-loader">
                                <i class="fa fa-spinner fa-spin"></i> Loading brands...
                            </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%;" disabled>
                                <option value="">Select Category and Brand First</option>
                            </select>
                            <div class="dropdown-loader item-title-loader">
                                <i class="fa fa-spinner fa-spin"></i> Loading items...
                        </div>
                    </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]" disabled>
                                <option value="">Select Item First</option>
                            </select>
                            <div class="dropdown-loader color-loader">
                                <i class="fa fa-spinner fa-spin"></i> Loading colors...
                            </div>
                        </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]" disabled>
                                <option value="">Select Item First</option>
                            </select>
                            <div class="dropdown-loader memory-loader">
                                <i class="fa fa-spinner fa-spin"></i> Loading...
                            </div>
                        </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]" disabled>
                                <option value="">Select Item First</option>
                            </select>
                            <div class="dropdown-loader storage-loader">
                                <i class="fa fa-spinner fa-spin"></i> Loading...
                            </div>
                        </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 Registration Type</option>
                                <option value="Non PTA">Non PTA</option>
                                <option value="PTA">PTA</option>
                                <option value="CPID">CPID</option>
                                <option value="JV">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 Status</option>
                                <option value="Single">Single</option>
                                <option value="Dual Physical">Dual Physical</option>
                                <option value="Physical + eSim">Physical + eSim</option>
                                <option value="Dual eSim">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]">
                        </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]">
                        </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]">
                        </div>
                    </div>
                    
                </div>
                <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">New</option>
                                <option value="Used">Used</option>
                                <option value="Used Rough">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="0">
                            <input type="hidden" class="item-rate-value" name="items[${itemRowCounter}][rate]" value="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="1" readonly>
                        </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="0" readonly>
                            <input type="hidden" class="item-amount-value" name="items[${itemRowCounter}][amount]" value="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="Sale" class="item-transaction-type">
                            <input class="form-check-input type-switch" type="checkbox" id="typeSwitch_${itemRowCounter}">
                            <label class="form-check-label fw-bold" for="typeSwitch_${itemRowCounter}">
                                Purchase
                            </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;

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

    // 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);
        }
    });

    // The type switch logic is now handled by the separate sections and addItemRow('type')

    $(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);
        }
    }

    function updateDeleteButtons() {
        let itemCount = $('.item-row').length;
        if (itemCount > 1) {
            $('.delete-item-btn').show();
        } else {
            $('.delete-item-btn').hide();
        }
    }

    // ItemInfo Modal Handlers
    function loadBrandsByCategory(categoryId, brandSelectId, selectedBrandId = null) {
        if (!categoryId) {
            $(brandSelectId).html('<option value="">Select Category First</option>').prop('disabled', true);
            return;
        }

        let loaderId = brandSelectId === '#item_brand_id' ? '#brands-loader' : '#edit-brands-loader';
        $(loaderId).fadeIn();

        $.ajax({
            url: "{{ route('items.brands-by-category', ':id') }}".replace(':id', categoryId),
            type: 'GET',
            success: function(brands) {
                let options = '<option value="">Select Brand</option>';
                brands.forEach(function(brand) {
                    let selected = (selectedBrandId && brand.id == selectedBrandId) ? 'selected' : '';
                    options += `<option value="${brand.id}" ${selected}>${brand.name}</option>`;
                });
                $(brandSelectId).html(options).prop('disabled', false);
            },
            error: function() {
                $(brandSelectId).html('<option value="">Error loading brands</option>').prop('disabled', true);
            },
            complete: function() {
                $(loaderId).fadeOut();
            }
        });
    }

    // Handle category change in ItemInfo modal
    $(document).on('change', '#item_cat_id', function() {
        let categoryId = $(this).val();
        loadBrandsByCategory(categoryId, '#item_brand_id');
    });

    // Initialize Select2 for ItemInfo modal
    function initializeItemModalSelect2() {
        // Colors
        const $colors = $('#item_colors');
        if ($colors.length) {
            if ($colors.data('select2')) {
                $colors.select2('destroy');
            }
            $colors.select2({
                placeholder: 'Select Colors',
                allowClear: true,
                width: '100%',
                dropdownParent: $('#ItemInfo .modal-content'),
                tags: false
            });
        }

        // Memories
        const $memories = $('#item_memories');
        if ($memories.length) {
            if ($memories.data('select2')) {
                $memories.select2('destroy');
            }
            $memories.select2({
                placeholder: 'Select RAM',
                allowClear: true,
                width: '100%',
                dropdownParent: $('#ItemInfo .modal-content'),
                tags: false
            });
        }

        // Storages
        const $storages = $('#item_storages');
        if ($storages.length) {
            if ($storages.data('select2')) {
                $storages.select2('destroy');
            }
            $storages.select2({
                placeholder: 'Select Storage',
                allowClear: true,
                width: '100%',
                dropdownParent: $('#ItemInfo .modal-content'),
                tags: false
            });
        }
    }

    // Initialize when modal is shown
    $('#ItemInfo').on('shown.bs.modal', function() {
        initializeItemModalSelect2();
    });

    // Also initialize on show event
    $('#ItemInfo').on('show.bs.modal', function() {
        setTimeout(() => initializeItemModalSelect2(), 50);
    });

    // Save new item from ItemInfo modal
    $(document).on('click', '#saveItem', function(e) {
        e.preventDefault();

        let formData = new FormData(document.getElementById('item'));
        let saveBtn = $(this);
        saveBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Saving...');

        $.ajax({
            url: "{{ route('items.store') }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success || response.id) {
                    let newItemId = response.id;
                    
                    // Close modal
                    let modal = bootstrap.Modal.getInstance(document.getElementById('ItemInfo'));
                    if (modal) modal.hide();

                    // Reset form
                    $('#item')[0].reset();
                    $('#item_colors').val(null);
                    $('#item_memories').val(null);
                    $('#item_storages').val(null);
                    
                    // Add the new item to the dropdown
                    if (window.currentItemRow && window.currentItemRow.selectElement) {
                        let selectElement = window.currentItemRow.selectElement;
                        let itemTitle = $('#item_title').val() || 'New Item';
                        
                        // Add as a new option and select it
                        let newOption = new Option(itemTitle, newItemId, false, true);
                        selectElement.append(newOption).trigger('change');
                        
                        // Load item attributes
                        let row = window.currentItemRow.row;
                        loadItemAttributes(row, newItemId);
                    }

                    Swal.fire({
                        title: 'Success',
                        text: 'Item created successfully!',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    });
                }
            },
            error: function(xhr) {
                let message = 'Error creating item';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                Swal.fire({
                    title: 'Error',
                    text: message,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            },
            complete: function() {
                saveBtn.prop('disabled', false).html('<i class="fa fa-check"></i>&nbsp;Save Item');
            }
        });
    });
</script>
<script src="{{ asset('js/plugins/select2/select2.full.min.js') }}"></script>
@endpush
@endsection