@extends('layouts.app')

@section('title', 'Offline Transactions')

@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Offline POS Transactions</h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-sm btn-primary" id="sync-all-btn">
                                <i class="fa fa-sync-alt"></i> Sync All
                            </button>
                            <button type="button" class="btn btn-sm btn-info" id="refresh-table-btn">
                                <i class="fa fa-refresh"></i> Refresh
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="offline-transactions-table">
                                <thead>
                                   
                                        <th>ID</th>
                                        <th>Offline Invoice #</th>
                                        <th>Customer</th>
                                        <th>Transaction Date</th>
                                        <th>Final Total</th>
                                        <th>Payment Status</th>
                                        <th>Sync Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="transactions-tbody">
                                    <tr>
                                        <td colspan="8" class="text-center">
                                            <i class="fa fa-spinner fa-spin"></i> Loading transactions...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal for Viewing Transaction Details -->
<div class="modal fade" id="transaction-details-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Transaction Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="transaction-details-body">
                <div class="text-center">
                    <i class="fa fa-spinner fa-spin"></i> Loading...
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="sync-single-btn" data-id="">
                    <i class="fa fa-cloud-upload-alt"></i> Sync Now
                </button>
                <button type="button" class="btn btn-danger" id="delete-single-btn" data-id="">
                    <i class="fa fa-trash"></i> Delete
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('javascript')
<script>
    // Initialize IndexedDB - Handles both OfflinePOSDB and POSOfflineDB
    class OfflinePOSDB {
        constructor() {
            this.dbName = 'OfflinePOSDB';
            this.dbVersion = 1;
            this.db = null;
            this.initialized = false;
            this.posOfflineDB = null; // Reference to POSOfflineDB
        }

        async init() {
            return new Promise((resolve, reject) => {
                if (this.db && this.initialized) {
                    resolve(this.db);
                    return;
                }

                const request = indexedDB.open(this.dbName, this.dbVersion);

                request.onerror = (event) => {
                    console.error('IndexedDB error:', event.target.error);
                    this.initialized = false;
                    reject(event.target.error);
                };

                request.onsuccess = (event) => {
                    this.db = event.target.result;
                    this.initialized = true;
                    console.log('✅ OfflinePOSDB initialized successfully');
                    
                    // Also connect to POSOfflineDB
                    this.initPOSOfflineDB();
                    
                    // Check if there are any transactions
                    try {
                        const transaction = this.db.transaction(['transactions'], 'readonly');
                        const store = transaction.objectStore('transactions');
                        const countRequest = store.count();
                        
                        countRequest.onsuccess = () => {
                            console.log(`📊 Found ${countRequest.result} transactions in OfflinePOSDB`);
                            resolve(this.db);
                        };
                        
                        countRequest.onerror = () => {
                            console.log('Could not count transactions');
                            resolve(this.db);
                        };
                    } catch (error) {
                        console.log('No transactions store yet');
                        resolve(this.db);
                    }
                };

                request.onupgradeneeded = (event) => {
                    const db = event.target.result;
                    
                    // Create transactions table if it doesn't exist
                    if (!db.objectStoreNames.contains('transactions')) {
                        const transactionStore = db.createObjectStore('transactions', { 
                            keyPath: 'id', 
                            autoIncrement: true 
                        });
                        transactionStore.createIndex('offline_invoice_no', 'offline_invoice_no', { unique: true });
                        transactionStore.createIndex('contact_id', 'contact_id', { unique: false });
                        transactionStore.createIndex('payment_status', 'payment_status', { unique: false });
                        transactionStore.createIndex('synced', 'synced', { unique: false });
                        console.log('✅ transactions table created in OfflinePOSDB');
                    }

                    // Create transaction_sell_lines table if it doesn't exist
                    if (!db.objectStoreNames.contains('transaction_sell_lines')) {
                        const sellLinesStore = db.createObjectStore('transaction_sell_lines', { 
                            keyPath: 'id', 
                            autoIncrement: true 
                        });
                        sellLinesStore.createIndex('transaction_id', 'transaction_id', { unique: false });
                        console.log('✅ transaction_sell_lines table created in OfflinePOSDB');
                    }

                    // Create transaction_payments table if it doesn't exist
                    if (!db.objectStoreNames.contains('transaction_payments')) {
                        const paymentsStore = db.createObjectStore('transaction_payments', { 
                            keyPath: 'id', 
                            autoIncrement: true 
                        });
                        paymentsStore.createIndex('transaction_id', 'transaction_id', { unique: false });
                        console.log('✅ transaction_payments table created in OfflinePOSDB');
                    }
                };
            });
        }

        async initPOSOfflineDB() {
            return new Promise((resolve) => {
                const request = indexedDB.open('POSOfflineDB', 1);
                
                request.onerror = (event) => {
                    console.warn('⚠️ Could not connect to POSOfflineDB:', event.target.error);
                    resolve(null);
                };
                
                request.onsuccess = (event) => {
                    this.posOfflineDB = event.target.result;
                    console.log('✅ Connected to POSOfflineDB successfully');
                    resolve(this.posOfflineDB);
                };
                
                request.onupgradeneeded = (event) => {
                    const db = event.target.result;
                    
                    // Create customers store if it doesn't exist
                    if (!db.objectStoreNames.contains('customers')) {
                        const customersStore = db.createObjectStore('customers', { keyPath: 'id' });
                        customersStore.createIndex('name', 'name', { unique: false });
                        customersStore.createIndex('supplier_business_name', 'supplier_business_name', { unique: false });
                        console.log('✅ customers table created in POSOfflineDB');
                    }
                    
                    // Create products store if it doesn't exist
                    if (!db.objectStoreNames.contains('products')) {
                        const productsStore = db.createObjectStore('products', { keyPath: 'id' });
                        productsStore.createIndex('name', 'name', { unique: false });
                        console.log('✅ products table created in POSOfflineDB');
                    }
                };
            });
        }

        async getAllTransactions() {
            if (!this.db) {
                console.error('Database not initialized');
                throw new Error('Database not initialized');
            }
            
            return new Promise((resolve, reject) => {
                try {
                    // Check if transactions store exists
                    if (!this.db.objectStoreNames.contains('transactions')) {
                        console.log('No transactions store found');
                        resolve([]);
                        return;
                    }
                    
                    const transaction = this.db.transaction(['transactions'], 'readonly');
                    const store = transaction.objectStore('transactions');
                    const request = store.getAll();
                    
                    request.onsuccess = () => {
                        const transactions = request.result || [];
                        console.log(`✅ Retrieved ${transactions.length} transactions from OfflinePOSDB`);
                        resolve(transactions);
                    };
                    
                    request.onerror = (event) => {
                        console.error('Failed to get transactions:', event.target.error);
                        reject(event.target.error);
                    };
                    
                    transaction.onerror = (event) => {
                        console.error('Transaction error:', event.target.error);
                        reject(event.target.error);
                    };
                    
                } catch (error) {
                    console.error('Error in getAllTransactions:', error);
                    reject(error);
                }
            });
        }

        async getTransactionWithDetails(transactionId) {
            return new Promise(async (resolve, reject) => {
                try {
                    // Get transaction
                    const transaction = this.db.transaction(['transactions', 'transaction_sell_lines', 'transaction_payments'], 'readonly');
                    const transactionStore = transaction.objectStore('transactions');
                    const transactionRequest = transactionStore.get(transactionId);
                    
                    transactionRequest.onsuccess = async () => {
                        const transactionData = transactionRequest.result;
                        if (!transactionData) {
                            reject(new Error('Transaction not found'));
                            return;
                        }
                        
                        // Get sell lines if store exists
                        let sellLines = [];
                        if (this.db.objectStoreNames.contains('transaction_sell_lines')) {
                            const sellLinesStore = transaction.objectStore('transaction_sell_lines');
                            const sellLinesIndex = sellLinesStore.index('transaction_id');
                            const sellLinesRequest = sellLinesIndex.getAll(transactionId);
                            
                            sellLinesRequest.onsuccess = () => {
                                sellLines = sellLinesRequest.result || [];
                                
                                // Get payments if store exists
                                let payments = [];
                                if (this.db.objectStoreNames.contains('transaction_payments')) {
                                    const paymentsStore = transaction.objectStore('transaction_payments');
                                    const paymentsIndex = paymentsStore.index('transaction_id');
                                    const paymentsRequest = paymentsIndex.getAll(transactionId);
                                    
                                    paymentsRequest.onsuccess = () => {
                                        payments = (paymentsRequest.result || []).map(payment => ({
                                            ...payment,
                                            details: payment.details ? (typeof payment.details === 'string' ? JSON.parse(payment.details) : payment.details) : {}
                                        }));
                                        
                                        resolve({
                                            transaction: transactionData,
                                            sell_lines: sellLines,
                                            payments: payments
                                        });
                                    };
                                    
                                    paymentsRequest.onerror = () => reject(paymentsRequest.error);
                                } else {
                                    resolve({
                                        transaction: transactionData,
                                        sell_lines: sellLines,
                                        payments: []
                                    });
                                }
                            };
                            
                            sellLinesRequest.onerror = () => reject(sellLinesRequest.error);
                        } else {
                            resolve({
                                transaction: transactionData,
                                sell_lines: [],
                                payments: []
                            });
                        }
                    };
                    
                    transactionRequest.onerror = () => reject(transactionRequest.error);
                } catch (error) {
                    reject(error);
                }
            });
        }

        async deleteTransaction(transactionId) {
            return new Promise((resolve, reject) => {
                const transaction = this.db.transaction(['transactions', 'transaction_sell_lines', 'transaction_payments'], 'readwrite');
                
                // Delete transaction
                const transactionStore = transaction.objectStore('transactions');
                const transactionRequest = transactionStore.delete(transactionId);
                
                // Delete sell lines if store exists
                if (this.db.objectStoreNames.contains('transaction_sell_lines')) {
                    const sellLinesStore = transaction.objectStore('transaction_sell_lines');
                    const sellLinesIndex = sellLinesStore.index('transaction_id');
                    const sellLinesRequest = sellLinesIndex.openCursor(transactionId);
                    
                    sellLinesRequest.onsuccess = (event) => {
                        const cursor = event.target.result;
                        if (cursor) {
                            cursor.delete();
                            cursor.continue();
                        }
                    };
                }
                
                // Delete payments if store exists
                if (this.db.objectStoreNames.contains('transaction_payments')) {
                    const paymentsStore = transaction.objectStore('transaction_payments');
                    const paymentsIndex = paymentsStore.index('transaction_id');
                    const paymentsRequest = paymentsIndex.openCursor(transactionId);
                    
                    paymentsRequest.onsuccess = (event) => {
                        const cursor = event.target.result;
                        if (cursor) {
                            cursor.delete();
                            cursor.continue();
                        }
                    };
                }
                
                transactionRequest.onsuccess = () => resolve(true);
                transactionRequest.onerror = () => reject(transactionRequest.error);
            });
        }

        async updateSyncStatus(transactionId, synced = true) {
            return new Promise((resolve, reject) => {
                const transaction = this.db.transaction(['transactions'], 'readwrite');
                const store = transaction.objectStore('transactions');
                const getRequest = store.get(transactionId);
                
                getRequest.onsuccess = () => {
                    const data = getRequest.result;
                    if (data) {
                        data.synced = synced ? 1 : 0;
                        const updateRequest = store.put(data);
                        updateRequest.onsuccess = () => resolve(true);
                        updateRequest.onerror = () => reject(updateRequest.error);
                    } else {
                        reject(new Error('Transaction not found'));
                    }
                };
                
                getRequest.onerror = () => reject(getRequest.error);
            });
        }

        // Method to get customer name from POSOfflineDB
        async getCustomerName(contactId) {
            if (!contactId) return 'Walk-in Customer';
            
            try {
                // Make sure POSOfflineDB is initialized
                if (!this.posOfflineDB) {
                    await this.initPOSOfflineDB();
                }
                
                if (!this.posOfflineDB || !this.posOfflineDB.objectStoreNames.contains('customers')) {
                    return `Customer #${contactId}`;
                }
                
                const transaction = this.posOfflineDB.transaction(['customers'], 'readonly');
                const store = transaction.objectStore('customers');
                
                return new Promise((resolve) => {
                    const request = store.get(parseInt(contactId));
                    request.onsuccess = () => {
                        const customer = request.result;
                        if (customer) {
                            // Use supplier_business_name if name is empty/null, otherwise use name
                            const name = customer.name && customer.name.trim() !== '' 
                                ? customer.name 
                                : (customer.supplier_business_name || '');
                            
                            if (name && name.trim() !== '') {
                                resolve(name);
                            } else {
                                resolve(`Customer #${contactId}`);
                            }
                        } else {
                            resolve(`Customer #${contactId}`);
                        }
                    };
                    request.onerror = () => {
                        console.error('Error fetching customer:', request.error);
                        resolve(`Customer #${contactId}`);
                    };
                });
            } catch (error) {
                console.error('Error in getCustomerName:', error);
                return `Customer #${contactId}`;
            }
        }

        // Method to get product name from POSOfflineDB
        async getProductName(productId, variationId = null) {
            if (!productId) return 'Unknown Product';
            
            try {
                // Make sure POSOfflineDB is initialized
                if (!this.posOfflineDB) {
                    await this.initPOSOfflineDB();
                }
                
                if (!this.posOfflineDB || !this.posOfflineDB.objectStoreNames.contains('products')) {
                    return variationId ? `Product #${productId} (Variation: ${variationId})` : `Product #${productId}`;
                }
                
                const transaction = this.posOfflineDB.transaction(['products'], 'readonly');
                const store = transaction.objectStore('products');
                
                return new Promise((resolve) => {
                    const request = store.get(parseInt(productId));
                    request.onsuccess = () => {
                        const product = request.result;
                        if (product && product.name) {
                            if (variationId) {
                                // If variation exists and variations array is available, try to get variation name
                                if (product.variations && Array.isArray(product.variations)) {
                                    const variation = product.variations.find(v => v.id == variationId);
                                    if (variation && variation.name) {
                                        resolve(`${product.name} - ${variation.name}`);
                                    } else {
                                        resolve(product.name);
                                    }
                                } else {
                                    resolve(product.name);
                                }
                            } else {
                                resolve(product.name);
                            }
                        } else {
                            resolve(variationId ? `Product #${productId} (Variation: ${variationId})` : `Product #${productId}`);
                        }
                    };
                    request.onerror = () => {
                        console.error('Error fetching product:', request.error);
                        resolve(variationId ? `Product #${productId} (Variation: ${variationId})` : `Product #${productId}`);
                    };
                });
            } catch (error) {
                console.error('Error in getProductName:', error);
                return variationId ? `Product #${productId} (Variation: ${variationId})` : `Product #${productId}`;
            }
        }
    }

    // Initialize database
    const offlineDB = new OfflinePOSDB();
    let dbReady = false;

    // Format currency
    function formatMoney(amount) {
        if (!amount && amount !== 0) return 'KSh 0.00';
        return 'KSh ' + parseFloat(amount).toLocaleString('en-KE', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }




// Format date (subtract 3 hours)
function formatDate(dateString) {
    if (!dateString) return 'N/A';
    try {
        let date;
        
        // If dateString is already a number (timestamp)
        if (typeof dateString === 'number') {
            date = new Date(dateString);
        } else {
            date = new Date(dateString);
        }
        
        if (isNaN(date.getTime())) return dateString;
        
        // Subtract 3 hours (3 * 60 * 60 * 1000 = 10800000 milliseconds)
        const adjustedDate = new Date(date.getTime() - (3 * 60 * 60 * 1000));
        
        // Format to readable string
        return adjustedDate.toLocaleString();
    } catch (error) {
        console.error('Error formatting date:', error);
        return dateString;
    }
}

    // Get payment status badge HTML
    function getPaymentStatusBadge(status) {
        switch(status) {
            case 'paid':
                return '<span class="badge badge-success">Paid</span>';
            case 'partial':
                return '<span class="badge badge-warning">Partial</span>';
            case 'due':
                return '<span class="badge badge-danger">Due</span>';
            default:
                return '<span class="badge badge-secondary">' + (status || 'Unknown') + '</span>';
        }
    }

    // Load and display transactions
    async function loadTransactions() {
        const tbody = document.getElementById('transactions-tbody');
        
        try {
            console.log('🔄 Loading transactions...');
            
            // Initialize database if not ready
            if (!dbReady) {
                try {
                    console.log('Initializing IndexedDB...');
                    await offlineDB.init();
                    dbReady = true;
                    console.log('✅ Database ready');
                } catch (error) {
                    console.error('Failed to initialize database:', error);
                    tbody.innerHTML = `
                        <tr>
                            <td colspan="8" class="text-center text-danger">
                                <strong>Database Error:</strong> ${error.message}<br>
                                <small>Please check if your browser supports IndexedDB and refresh the page</small>
                            </td>
                        </tr>
                    `;
                    return;
                }
            }

            // Verify database is accessible
            if (!offlineDB.db) {
                throw new Error('Database instance is not available');
            }

            // Get all transactions
            const transactions = await offlineDB.getAllTransactions();
            console.log(`📋 Received ${transactions.length} transactions`);
            
            if (transactions.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="8" class="text-center">
                            <i class="fa fa-inbox"></i> No offline transactions found.
                        </td>
                    </tr>
                `;
                return;
            }
            
            // Sort by ID descending (newest first)
            transactions.sort((a, b) => (b.id || 0) - (a.id || 0));
            
            // Show loading state while fetching customer names
            tbody.innerHTML = '<tr><td colspan="8" class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading customer details...</td></tr>';
            
            // Process each transaction to get customer names asynchronously
            const transactionPromises = transactions.map(async (transaction) => {
                const customerName = await offlineDB.getCustomerName(transaction.contact_id);
                return { transaction, customerName };
            });
            
            const enrichedTransactions = await Promise.all(transactionPromises);
            
            // Generate HTML
            tbody.innerHTML = enrichedTransactions.map(({ transaction, customerName }) => {
                return `
                    <tr>
                        <td>${escapeHtml(String(transaction.id || ''))}</td>
                        <td>
                            <strong>${escapeHtml(transaction.offline_invoice_no || 'N/A')}</strong>
                            ${transaction.synced ? '<br><small class="text-muted">Synced</small>' : ''}
                        </td>
                        <td>${escapeHtml(customerName)}</td>
                        <td>${formatDate(transaction.transaction_date)}</td>
                        <td class="text-right">${formatMoney(transaction.final_total)}</td>
                        <td>${getPaymentStatusBadge(transaction.payment_status)}</td>
                        <td>
                            ${transaction.synced ? 
                                '<span class="badge badge-success">Synced</span>' : 
                                '<span class="badge badge-warning">Pending</span>'}
                        </td>
                        <td>
                            <button class="btn btn-sm btn-info view-transaction" data-id="${transaction.id}">
                                <i class="fa fa-eye"></i> View
                            </button>
                            ${!transaction.synced ? `
                                <button class="btn btn-sm btn-primary sync-transaction" data-id="${transaction.id}">
                                    <i class="fa fa-cloud-upload-alt"></i> Sync
                                </button>
                            ` : ''}
                            <button class="btn btn-sm btn-danger delete-transaction" data-id="${transaction.id}">
                                <i class="fa fa-trash"></i> Delete
                            </button>
                        </td>
                    </tr>
                `;
            }).join('');
            
            // Attach event listeners
            attachEventListeners();
            
        } catch (error) {
            console.error('Failed to load transactions:', error);
            tbody.innerHTML = `
                <tr>
                    <td colspan="8" class="text-center text-danger">
                        <strong>Error loading transactions:</strong> ${error.message}<br>
                        <small>Please refresh the page and try again. If the problem persists, check the browser console for details.</small>
                    </td>
                </tr>
            `;
        }
    }

    // Show transaction details in modal
    async function showTransactionDetails(transactionId) {
        const modal = $('#transaction-details-modal');
        const body = document.getElementById('transaction-details-body');
        
        body.innerHTML = '<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading transaction details...</div>';
        modal.modal('show');
        
        try {
            const details = await offlineDB.getTransactionWithDetails(transactionId);
            
            // Get customer name
            const customerName = await offlineDB.getCustomerName(details.transaction.contact_id);
            
            // Get product names for sell lines
            const sellLinesWithNames = await Promise.all(details.sell_lines.map(async (line) => {
                const productName = await offlineDB.getProductName(line.product_id, line.variation_id);
                return {
                    ...line,
                    product_display_name: productName
                };
            }));
            
            // Build HTML content
            const transaction = details.transaction;
            const sellLines = sellLinesWithNames;
            const payments = details.payments;
            
            let html = `
                <div class="row">
                    <div class="col-md-6">
                        <h5>Transaction Information</h5>
                        <table class="table table-sm table-bordered">
                            <tr><th width="40%">Invoice No:</th><td>${escapeHtml(transaction.offline_invoice_no)}</td></tr>
                            <tr><th>Date:</th><td>${formatDate(transaction.transaction_date)}</td></tr>
                            <tr><th>Customer:</th><td>${escapeHtml(customerName)}</td></tr>
                            <tr><th>Payment Status:</th><td>${getPaymentStatusBadge(transaction.payment_status)}</td></tr>
                            <tr><th>Sync Status:</th><td>${transaction.synced ? '<span class="badge badge-success">Synced</span>' : '<span class="badge badge-warning">Pending Sync</span>'}</td></tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h5>Financial Summary</h5>
                        <table class="table table-sm table-bordered">
                            <tr><th width="40%">Subtotal:</th><td class="text-right">${formatMoney(transaction.total_before_tax || 0)}</td></tr>
                            <tr><th>Tax Amount:</th><td class="text-right">${formatMoney(transaction.tax_amount || 0)}</td></tr>
                            <tr><th class="text-bold">Final Total:</th><td class="text-right text-bold">${formatMoney(transaction.final_total)}</td></tr>
                        </table>
                    </div>
                </div>
            `;
            
            // Items table
            if (sellLines && sellLines.length > 0) {
                html += `
                    <h5 class="mt-3">Items</h5>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead class="thead-light">
                                <tr>
                                    <th>Product</th>
                                    <th class="text-right">Quantity</th>
                                    <th class="text-right">Price</th>
                                    
                                    <th class="text-right">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${sellLines.map(line => `
                                    <tr>
                                        <td>${escapeHtml(line.product_display_name)}</td>
                                        <td class="text-right">${line.quantity}</td>
                                        <td class="text-right">${formatMoney(line.unit_price_inc_tax)}</td>
                                       
                                        <td class="text-right">${formatMoney((line.quantity || 0) * (line.unit_price_inc_tax || 0))}</td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                `;
            }
            
            // Payments table
            if (payments && payments.length > 0) {
                html += `
                    <h5 class="mt-3">Payments</h5>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead class="thead-light">
                                <tr>
                                    <th style="width: 200px;">Method</th>
                                    <th class="text-left ml-5">Amount</th>
                                    
                                </tr>
                            </thead>
                            <tbody>
                                ${payments.map(payment => `
                                    <tr>
                                        <td><span class="badge badge-info">${escapeHtml(payment.method || 'Unknown').toUpperCase()}</span></td>
                                        <td class="text-left ml-5">${formatMoney(payment.amount)}</td>
                                        
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>
                `;
            }
            
            body.innerHTML = html;
            
            // Set buttons data attributes
            document.getElementById('sync-single-btn').setAttribute('data-id', transactionId);
            document.getElementById('delete-single-btn').setAttribute('data-id', transactionId);
            
        } catch (error) {
            console.error('Failed to load transaction details:', error);
            body.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fa fa-exclamation-triangle"></i> Failed to load transaction details: ${error.message}
                </div>
            `;
        }
    }

    // Sync a single transaction to server
    async function syncTransaction(transactionId) {
        if (!confirm('Are you sure you want to sync this transaction to the server?')) {
            return;
        }
        
        try {
            // Show loading state
            const button = document.querySelector(`button.sync-transaction[data-id="${transactionId}"]`);
            if (button) {
                button.disabled = true;
                button.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Syncing...';
            }
            
            const details = await offlineDB.getTransactionWithDetails(transactionId);
            
            // Prepare data for server
            const data = {
                offline_invoice_no: details.transaction.offline_invoice_no,
                contact_id: details.transaction.contact_id,
                transaction_date: details.transaction.transaction_date,
                final_total: details.transaction.final_total,
                tax_amount: details.transaction.tax_amount,
                total_before_tax: details.transaction.total_before_tax,
                sell_lines: details.sell_lines.map(line => ({
                    product_id: line.product_id,
                    variation_id: line.variation_id,
                    quantity: line.quantity,
                    unit_price: line.unit_price,
                    unit_price_inc_tax: line.unit_price_inc_tax,
                    tax_amount: line.tax_amount
                })),
                payments: details.payments.map(payment => ({
                    method: payment.method,
                    amount: payment.amount,
                    details: payment.details
                }))
            };
            
            // Get CSRF token
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            
            // Send to server
            const response = await fetch('/pos/sync-offline', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken || '',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(data)
            });
            
            const result = await response.json();
            
            if (result.success) {
                // Mark as synced in IndexedDB
                await offlineDB.updateSyncStatus(transactionId, true);
                
                showNotification('Transaction synced successfully!', 'success');
                
                // Refresh the table
                await loadTransactions();
                
                // Close modal if open
                $('#transaction-details-modal').modal('hide');
            } else {
                throw new Error(result.message || 'Sync failed');
            }
            
        } catch (error) {
            console.error('Sync failed:', error);
            showNotification(`Sync failed: ${error.message}`, 'error');
            
            // Reset button if it exists
            const button = document.querySelector(`button.sync-transaction[data-id="${transactionId}"]`);
            if (button) {
                button.disabled = false;
                button.innerHTML = '<i class="fa fa-cloud-upload-alt"></i> Sync';
            }
        }
    }

    // Delete a transaction
    async function deleteTransaction(transactionId) {
        if (!confirm('Are you sure you want to delete this transaction? This action cannot be undone.')) {
            return;
        }
        
        try {
            await offlineDB.deleteTransaction(transactionId);
            showNotification('Transaction deleted successfully', 'success');
            
            // Refresh the table
            await loadTransactions();
            
            // Close modal if open
            $('#transaction-details-modal').modal('hide');
            
        } catch (error) {
            console.error('Delete failed:', error);
            showNotification(`Delete failed: ${error.message}`, 'error');
        }
    }

    // Sync all pending transactions
    async function syncAllTransactions() {
        if (!confirm('Sync all pending transactions to the server?')) {
            return;
        }
        
        try {
            const syncBtn = document.getElementById('sync-all-btn');
            syncBtn.disabled = true;
            syncBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Syncing all...';
            
            const transactions = await offlineDB.getAllTransactions();
            const pendingTransactions = transactions.filter(t => !t.synced);
            
            if (pendingTransactions.length === 0) {
                showNotification('No pending transactions to sync', 'info');
                syncBtn.disabled = false;
                syncBtn.innerHTML = '<i class="fa fa-sync-alt"></i> Sync All';
                return;
            }
            
            let synced = 0;
            let failed = 0;
            
            // Get CSRF token
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            
            for (const transaction of pendingTransactions) {
                try {
                    const details = await offlineDB.getTransactionWithDetails(transaction.id);
                    
                    const data = {
                        offline_invoice_no: details.transaction.offline_invoice_no,
                        contact_id: details.transaction.contact_id,
                        transaction_date: details.transaction.transaction_date,
                        final_total: details.transaction.final_total,
                        tax_amount: details.transaction.tax_amount,
                        total_before_tax: details.transaction.total_before_tax,
                        sell_lines: details.sell_lines.map(line => ({
                            product_id: line.product_id,
                            variation_id: line.variation_id,
                            quantity: line.quantity,
                            unit_price: line.unit_price,
                            unit_price_inc_tax: line.unit_price_inc_tax,
                            tax_amount: line.tax_amount
                        })),
                        payments: details.payments.map(payment => ({
                            method: payment.method,
                            amount: payment.amount,
                            details: payment.details
                        }))
                    };
                    
                    const response = await fetch('/pos/sync-offline', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken || '',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(data)
                    });
                    
                    const result = await response.json();
                    
                    if (result.success) {
                        await offlineDB.updateSyncStatus(transaction.id, true);
                        synced++;
                    } else {
                        failed++;
                        console.error(`Failed to sync transaction ${transaction.id}:`, result.message);
                    }
                    
                    // Update progress
                    syncBtn.innerHTML = `<i class="fa fa-spinner fa-spin"></i> Syncing... ${synced + failed}/${pendingTransactions.length}`;
                    
                } catch (error) {
                    failed++;
                    console.error(`Error syncing transaction ${transaction.id}:`, error);
                }
            }
            
            showNotification(`Sync complete! ${synced} synced, ${failed} failed`, synced > 0 ? 'success' : 'error');
            
            // Refresh the table
            await loadTransactions();
            
        } catch (error) {
            console.error('Sync all failed:', error);
            showNotification(`Sync all failed: ${error.message}`, 'error');
        } finally {
            const syncBtn = document.getElementById('sync-all-btn');
            syncBtn.disabled = false;
            syncBtn.innerHTML = '<i class="fa fa-sync-alt"></i> Sync All';
        }
    }

    // Attach event listeners to dynamic buttons
    function attachEventListeners() {
        // View transaction buttons
        document.querySelectorAll('.view-transaction').forEach(btn => {
            btn.removeEventListener('click', viewHandler);
            btn.addEventListener('click', viewHandler);
        });
        
        // Sync transaction buttons
        document.querySelectorAll('.sync-transaction').forEach(btn => {
            btn.removeEventListener('click', syncHandler);
            btn.addEventListener('click', syncHandler);
        });
        
        // Delete transaction buttons
        document.querySelectorAll('.delete-transaction').forEach(btn => {
            btn.removeEventListener('click', deleteHandler);
            btn.addEventListener('click', deleteHandler);
        });
        
        function viewHandler(e) {
            const id = parseInt(e.currentTarget.getAttribute('data-id'));
            if (!isNaN(id)) {
                showTransactionDetails(id);
            }
        }
        
        function syncHandler(e) {
            const id = parseInt(e.currentTarget.getAttribute('data-id'));
            if (!isNaN(id)) {
                syncTransaction(id);
            }
        }
        
        function deleteHandler(e) {
            const id = parseInt(e.currentTarget.getAttribute('data-id'));
            if (!isNaN(id)) {
                deleteTransaction(id);
            }
        }
    }

    // Helper function to escape HTML
    function escapeHtml(text) {
        if (!text && text !== 0) return '';
        const div = document.createElement('div');
        div.textContent = String(text);
        return div.innerHTML;
    }

    // Helper function to show notification
    function showNotification(message, type) {
        // Remove existing notifications
        const existingNotifications = document.querySelectorAll('.custom-notification');
        existingNotifications.forEach(notif => notif.remove());
        
        const notification = document.createElement('div');
        notification.className = 'custom-notification';
        notification.textContent = message;
        
        let bgColor = '#3b82f6';
        let icon = 'ℹ️';
        
        switch(type) {
            case 'success':
                bgColor = '#10b981';
                icon = '✅';
                break;
            case 'error':
                bgColor = '#ef4444';
                icon = '❌';
                break;
            case 'warning':
                bgColor = '#f59e0b';
                icon = '⚠️';
                break;
            case 'info':
                bgColor = '#3b82f6';
                icon = 'ℹ️';
                break;
        }
        
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: ${bgColor};
            color: white;
            padding: 15px 20px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 99999;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            animation: slideIn 0.3s ease;
            max-width: 400px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
        `;
        
        notification.innerHTML = `${icon} ${message}`;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.style.animation = 'slideOut 0.3s ease';
            setTimeout(() => notification.remove(), 300);
        }, 4000);
    }

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', async function() {
        // Add CSS animations if not present
        if (!document.querySelector('#offline-sync-styles')) {
            const style = document.createElement('style');
            style.id = 'offline-sync-styles';
            style.textContent = `
                @keyframes slideIn {
                    from { transform: translateX(100%); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
                @keyframes slideOut {
                    from { transform: translateX(0); opacity: 1; }
                    to { transform: translateX(100%); opacity: 0; }
                }
                .badge {
                    font-size: 12px;
                    padding: 5px 8px;
                    border-radius: 4px;
                }
                .badge-success {
                    background-color: #28a745;
                    color: white;
                }
                .badge-warning {
                    background-color: #ffc107;
                    color: #212529;
                }
                .badge-danger {
                    background-color: #dc3545;
                    color: white;
                }
                .badge-info {
                    background-color: #17a2b8;
                    color: white;
                }
                .badge-secondary {
                    background-color: #6c757d;
                    color: white;
                }
                .text-bold {
                    font-weight: bold;
                }
                .table td {
                    vertical-align: middle;
                }
                .btn-sm {
                    margin: 2px;
                }
            `;
            document.head.appendChild(style);
        }
        
        // Check if CSRF token exists, if not, add it
        if (!document.querySelector('meta[name="csrf-token"]')) {
            console.warn('CSRF token meta tag not found. Please ensure it is added to your layout.');
            const meta = document.createElement('meta');
            meta.name = 'csrf-token';
            meta.content = '{{ csrf_token() }}';
            document.head.appendChild(meta);
        }
        
        // Load transactions
        console.log('Page loaded, initializing...');
        await loadTransactions();
        
        // Attach button event listeners
        const syncAllBtn = document.getElementById('sync-all-btn');
        const refreshBtn = document.getElementById('refresh-table-btn');
        
        if (syncAllBtn) {
            syncAllBtn.addEventListener('click', syncAllTransactions);
        }
        
        if (refreshBtn) {
            refreshBtn.addEventListener('click', loadTransactions);
        }
        
        // Modal button event listeners
        const syncSingleBtn = document.getElementById('sync-single-btn');
        const deleteSingleBtn = document.getElementById('delete-single-btn');
        
        if (syncSingleBtn) {
            syncSingleBtn.addEventListener('click', function() {
                const id = parseInt(this.getAttribute('data-id'));
                if (id && !isNaN(id)) {
                    syncTransaction(id);
                }
            });
        }
        
        if (deleteSingleBtn) {
            deleteSingleBtn.addEventListener('click', function() {
                const id = parseInt(this.getAttribute('data-id'));
                if (id && !isNaN(id)) {
                    deleteTransaction(id);
                }
            });
        }
        
        // Add window error handler for debugging
        window.addEventListener('unhandledrejection', function(event) {
            console.error('Unhandled Promise Rejection:', event.reason);
            showNotification(`Error: ${event.reason?.message || 'Unknown error'}`, 'error');
        });
    });
</script>
@endsection

@section('css')
<style>
    .table td {
        vertical-align: middle;
    }
    .badge {
        font-size: 12px;
        padding: 5px 8px;
    }
    .text-bold {
        font-weight: bold;
    }
    .btn-sm {
        margin: 2px;
    }
</style>
@endsection