@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1 class="h3 mb-4">
                <i class="bi bi-bug-fill me-2"></i>MyTax/eInvoicing Test Console
            </h1>
        </div>
    </div>

    <!-- Alert Messages -->
    <div id="alertContainer"></div>

    <!-- System Status Card -->
    <div class="row mb-4">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-gear me-2"></i>System Configuration Status</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <h6>API Credentials</h6>
                            <div class="mb-2">
                                <span class="badge {{ $systemSettings->client_id ? 'bg-success' : 'bg-danger' }}">
                                    Client ID: {{ $systemSettings->client_id ? 'Configured' : 'Missing' }}
                                </span>
                            </div>
                            <div class="mb-2">
                                <span class="badge {{ $systemSettings->client_secret_1 ? 'bg-success' : 'bg-danger' }}">
                                    Client Secret 1: {{ $systemSettings->client_secret_1 ? 'Configured' : 'Missing' }}
                                </span>
                            </div>
                            <div class="mb-2">
                                <span class="badge {{ $systemSettings->client_secret_2 ? 'bg-success' : 'bg-danger' }}">
                                    Client Secret 2: {{ $systemSettings->client_secret_2 ? 'Configured' : 'Missing' }}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h6>Environment</h6>
                            <div class="mb-2">
                                <span class="badge {{ $systemSettings->sandbox_mode ? 'bg-warning' : 'bg-success' }}">
                                    {{ $systemSettings->sandbox_mode ? 'Sandbox Mode' : 'Production Mode' }}
                                </span>
                            </div>
                            <div class="mb-2">
                                <span class="badge {{ $systemSettings->is_active ? 'bg-success' : 'bg-danger' }}">
                                    Status: {{ $systemSettings->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h6>Quick Actions</h6>
                            <button class="btn btn-sm btn-outline-primary" onclick="showSettingsModal()">
                                <i class="bi bi-gear"></i> Configure Settings
                            </button>
                            <button class="btn btn-sm btn-outline-success ms-2" onclick="testConnection()">
                                <i class="bi bi-wifi"></i> Test Connection
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Test Tools -->
    <div class="row mb-4">
        <!-- Create Test Order -->
        <div class="col-lg-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-plus-circle me-2"></i>Create Test Order</h5>
                </div>
                <div class="card-body">
                    <form id="createOrderForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Website</label>
                                    <select class="form-select" id="website_id" name="website_id" required>
                                        <option value="">Select Website</option>
                                        @foreach($companies as $company)
                                            @foreach($company->websites as $website)
                                                <option value="{{ $website->id }}" 
                                                    data-company="{{ $company->name }}"
                                                    data-tin="{{ optional($company->hrSettings)->tax_identification_number ?? '' }}">
                                                    {{ $website->name }} ({{ $company->name }})
                                                </option>
                                            @endforeach
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Customer Name</label>
                                    <input type="text" class="form-control" name="customer_name" 
                                           value="Test Customer Sdn Bhd" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Subtotal (RM)</label>
                                    <input type="number" class="form-control" name="subtotal" 
                                           value="100.00" step="0.01" min="0.01" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Tax Rate (%)</label>
                                    <input type="number" class="form-control" name="tax_rate" 
                                           value="6" step="0.01" min="0" max="100" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Customer TIN</label>
                                    <input type="text" class="form-control" name="customer_tin" 
                                           placeholder="C12345678901">
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-plus-circle"></i> Create Test Order
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Recent Orders -->
        <div class="col-lg-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-clock-history me-2"></i>Recent Orders</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Order #</th>
                                    <th>Website</th>
                                    <th>Total</th>
                                    <th>MyTax Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="ordersTable">
                                @foreach($recentOrders as $order)
                                <tr>
                                    <td>{{ $order->order_number }}</td>
                                    <td>{{ $order->website->name ?? 'N/A' }}</td>
                                    <td>RM {{ number_format($order->total, 2) }}</td>
                                    <td>
                                        @if($order->mytax_submission_uid)
                                            <span class="badge bg-success">Submitted</span>
                                        @else
                                            <span class="badge bg-secondary">Not Submitted</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-info" 
                                                onclick="previewInvoice({{ $order->id }})">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-success" 
                                                onclick="submitInvoice({{ $order->id }})">
                                            <i class="bi bi-send"></i>
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Test Results & Logs -->
    <div class="row">
        <!-- Invoice Preview -->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <h5 class="mb-0"><i class="bi bi-file-text me-2"></i>Invoice Preview</h5>
                    <button class="btn btn-sm btn-outline-secondary" onclick="clearPreview()">Clear</button>
                </div>
                <div class="card-body">
                    <div id="invoicePreview" style="height: 400px; overflow-y: auto;">
                        <p class="text-muted">Select an order to preview invoice data</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Real-time Logs -->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <h5 class="mb-0"><i class="bi bi-terminal me-2"></i>Real-time Logs</h5>
                    <div>
                        <button class="btn btn-sm btn-outline-primary" onclick="refreshLogs()">
                            <i class="bi bi-arrow-clockwise"></i> Refresh
                        </button>
                        <button class="btn btn-sm btn-outline-secondary ms-2" onclick="clearLogs()">Clear</button>
                    </div>
                </div>
                <div class="card-body">
                    <div id="logsContainer" style="height: 400px; overflow-y: auto; font-family: monospace; font-size: 12px; background: #f8f9fa; padding: 10px;">
                        @foreach($recentLogs as $log)
                        <div class="log-entry log-{{ strtolower($log['level']) }}">
                            <span class="text-muted">{{ $log['timestamp'] }}</span>
                            <span class="badge bg-{{ $log['level'] == 'ERROR' ? 'danger' : ($log['level'] == 'WARNING' ? 'warning' : 'info') }}">
                                {{ $log['level'] }}
                            </span>
                            {{ $log['message'] }}
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Settings Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Configure MyTax Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="settingsForm">
                    <div class="mb-3">
                        <label class="form-label">Client ID</label>
                        <input type="text" class="form-control" name="client_id" 
                               value="{{ $systemSettings->client_id }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Client Secret</label>
                        <input type="password" class="form-control" name="client_secret" 
                               placeholder="Enter new secret or leave empty to keep current">
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="sandbox_mode" 
                                   id="sandbox_mode" {{ $systemSettings->sandbox_mode ? 'checked' : '' }}>
                            <label class="form-check-label" for="sandbox_mode">
                                Sandbox Mode
                            </label>
                        </div>
                    </div>
                </form>
            </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" onclick="saveSettings()">Save Settings</button>
            </div>
        </div>
    </div>
</div>

<!-- Invoice Detail Modal -->
<div class="modal fade" id="invoiceModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Invoice Data Structure</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="invoiceModalContent"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="submitInvoiceBtn">
                    <i class="bi bi-send"></i> Submit to MyTax
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
let currentOrderId = null;
let autoRefreshLogs = false;

// Show alert message
function showAlert(message, type = 'info') {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    document.getElementById('alertContainer').insertAdjacentHTML('beforeend', alertHtml);
}

// Show settings modal
function showSettingsModal() {
    const modal = new bootstrap.Modal(document.getElementById('settingsModal'));
    modal.show();
}

// Save settings
function saveSettings() {
    const form = document.getElementById('settingsForm');
    const formData = new FormData(form);
    
    fetch('{{ route("admin.mytax-test.update-settings") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
        },
        body: JSON.stringify(Object.fromEntries(formData)),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('Settings updated successfully', 'success');
            bootstrap.Modal.getInstance(document.getElementById('settingsModal')).hide();
            setTimeout(() => location.reload(), 1000);
        } else {
            showAlert('Failed to update settings: ' + data.message, 'danger');
        }
    })
    .catch(error => {
        showAlert('Error: ' + error.message, 'danger');
    });
}

// Test connection
function testConnection() {
    const websiteId = document.getElementById('website_id').value;
    if (!websiteId) {
        showAlert('Please select a website first', 'warning');
        return;
    }
    
    showAlert('Testing connection...', 'info');
    
    fetch('{{ route("admin.mytax-test.test-connection") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ website_id: websiteId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('✅ ' + data.message, 'success');
            addLogEntry('INFO', data.message);
        } else {
            showAlert('❌ ' + data.message, 'danger');
            addLogEntry('ERROR', data.message);
        }
    })
    .catch(error => {
        showAlert('Connection test failed: ' + error.message, 'danger');
        addLogEntry('ERROR', 'Connection test failed: ' + error.message);
    });
}

// Create test order
document.getElementById('createOrderForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch('{{ route("admin.mytax-test.create-order") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify(Object.fromEntries(formData))
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('Test order created: ' + data.order.order_number, 'success');
            addLogEntry('INFO', 'Created order: ' + data.order.order_number);
            
            // Add to orders table
            const row = `
                <tr>
                    <td>${data.order.order_number}</td>
                    <td>${document.querySelector('#website_id option:checked').text}</td>
                    <td>RM ${(data.order.total_amount || data.order.total || 0).toFixed(2)}</td>
                    <td><span class="badge bg-secondary">Not Submitted</span></td>
                    <td>
                        <button class="btn btn-sm btn-outline-info" onclick="previewInvoice(${data.order.id})">
                            <i class="bi bi-eye"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-success" onclick="submitInvoice(${data.order.id})">
                            <i class="bi bi-send"></i>
                        </button>
                    </td>
                </tr>
            `;
            document.getElementById('ordersTable').insertAdjacentHTML('afterbegin', row);
        } else {
            showAlert('Failed to create order: ' + data.message, 'danger');
            addLogEntry('ERROR', 'Failed to create order: ' + data.message);
        }
    })
    .catch(error => {
        showAlert('Error creating order: ' + error.message, 'danger');
        addLogEntry('ERROR', 'Error creating order: ' + error.message);
    });
});

// Preview invoice
function previewInvoice(orderId) {
    currentOrderId = orderId;
    
    fetch('{{ route("admin.mytax-test.preview-invoice") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ order_id: orderId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Display in preview area
            let validationHtml = '<div class="mb-3">';
            
            // Show validation results
            if (data.validation.errors.length > 0) {
                validationHtml += '<div class="alert alert-danger"><strong>Errors:</strong><ul class="mb-0">';
                data.validation.errors.forEach(error => {
                    validationHtml += `<li>${error}</li>`;
                });
                validationHtml += '</ul></div>';
            }
            
            if (data.validation.warnings.length > 0) {
                validationHtml += '<div class="alert alert-warning"><strong>Warnings:</strong><ul class="mb-0">';
                data.validation.warnings.forEach(warning => {
                    validationHtml += `<li>${warning}</li>`;
                });
                validationHtml += '</ul></div>';
            }
            
            if (data.validation.info.length > 0) {
                validationHtml += '<div class="alert alert-info"><strong>Info:</strong><ul class="mb-0">';
                data.validation.info.forEach(info => {
                    validationHtml += `<li>${info}</li>`;
                });
                validationHtml += '</ul></div>';
            }
            
            validationHtml += '</div>';
            
            // Show invoice data
            const invoiceHtml = validationHtml + '<pre>' + JSON.stringify(data.invoice, null, 2) + '</pre>';
            document.getElementById('invoicePreview').innerHTML = invoiceHtml;
            
            // Show in modal for detailed view
            document.getElementById('invoiceModalContent').innerHTML = invoiceHtml;
            document.getElementById('submitInvoiceBtn').onclick = () => submitInvoice(orderId);
            
            const modal = new bootstrap.Modal(document.getElementById('invoiceModal'));
            modal.show();
            
            addLogEntry('INFO', 'Invoice preview generated for order ' + orderId);
        } else {
            showAlert('Failed to preview invoice: ' + data.message, 'danger');
            addLogEntry('ERROR', 'Failed to preview invoice: ' + data.message);
        }
    })
    .catch(error => {
        showAlert('Error previewing invoice: ' + error.message, 'danger');
        addLogEntry('ERROR', 'Error previewing invoice: ' + error.message);
    });
}

// Submit invoice
function submitInvoice(orderId) {
    if (!confirm('Are you sure you want to submit this invoice to MyTax?')) {
        return;
    }
    
    showAlert('Submitting invoice to MyTax...', 'info');
    addLogEntry('INFO', 'Starting invoice submission for order ' + orderId);
    
    fetch('{{ route("admin.mytax-test.submit-invoice") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ order_id: orderId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('✅ Invoice submitted successfully!', 'success');
            addLogEntry('SUCCESS', 'Invoice submitted! Submission UID: ' + data.submission_uid);
            
            if (data.document_uuid) {
                addLogEntry('INFO', 'Document UUID: ' + data.document_uuid);
            }
            
            // Update order status in table
            const rows = document.querySelectorAll('#ordersTable tr');
            rows.forEach(row => {
                if (row.innerHTML.includes('order_' + orderId)) {
                    row.querySelector('.badge').className = 'badge bg-success';
                    row.querySelector('.badge').textContent = 'Submitted';
                }
            });
            
            // Close modal if open
            const modal = bootstrap.Modal.getInstance(document.getElementById('invoiceModal'));
            if (modal) modal.hide();
            
            // Refresh logs after submission
            setTimeout(refreshLogs, 2000);
        } else {
            showAlert('❌ Submission failed: ' + data.message, 'danger');
            addLogEntry('ERROR', 'Submission failed: ' + data.message);
        }
    })
    .catch(error => {
        showAlert('Error submitting invoice: ' + error.message, 'danger');
        addLogEntry('ERROR', 'Error submitting invoice: ' + error.message);
    });
}

// Clear preview
function clearPreview() {
    document.getElementById('invoicePreview').innerHTML = '<p class="text-muted">Select an order to preview invoice data</p>';
}

// Add log entry
function addLogEntry(level, message) {
    const timestamp = new Date().toISOString();
    const levelClass = level === 'ERROR' ? 'danger' : (level === 'WARNING' ? 'warning' : 'info');
    
    const logHtml = `
        <div class="log-entry log-${level.toLowerCase()}">
            <span class="text-muted">${timestamp}</span>
            <span class="badge bg-${levelClass}">${level}</span>
            ${message}
        </div>
    `;
    
    const container = document.getElementById('logsContainer');
    container.insertAdjacentHTML('afterbegin', logHtml);
    
    // Keep only last 100 entries
    const entries = container.querySelectorAll('.log-entry');
    if (entries.length > 100) {
        entries[entries.length - 1].remove();
    }
}

// Refresh logs
function refreshLogs() {
    fetch('{{ route("admin.mytax-test.get-logs") }}')
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const container = document.getElementById('logsContainer');
            container.innerHTML = '';
            
            data.logs.forEach(log => {
                const levelClass = log.level === 'ERROR' ? 'danger' : (log.level === 'WARNING' ? 'warning' : 'info');
                const logHtml = `
                    <div class="log-entry log-${log.level.toLowerCase()}">
                        <span class="text-muted">${log.timestamp}</span>
                        <span class="badge bg-${levelClass}">${log.level}</span>
                        ${log.message}
                    </div>
                `;
                container.insertAdjacentHTML('beforeend', logHtml);
            });
        }
    })
    .catch(error => {
        console.error('Failed to refresh logs:', error);
    });
}

// Clear logs
function clearLogs() {
    document.getElementById('logsContainer').innerHTML = '';
}

// Auto-refresh logs every 5 seconds
setInterval(() => {
    if (autoRefreshLogs) {
        refreshLogs();
    }
}, 5000);
</script>

<style>
.log-entry {
    padding: 5px;
    border-bottom: 1px solid #dee2e6;
    word-wrap: break-word;
}
.log-entry:hover {
    background-color: #f1f3f5;
}
.log-error {
    background-color: #fff5f5;
}
.log-warning {
    background-color: #fffaf0;
}
.log-info {
    background-color: #f0f9ff;
}
</style>
@endpush