@extends('layouts.app')

@section('title', 'Create API Receiver')

@section('content')
<div class="container-fluid px-4">
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-plus-circle me-2"></i>Create API Receiver
        </h1>
        <a href="{{ route('api-receivers.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to List
        </a>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-cog me-2"></i>Receiver Configuration
                    </h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('api-receivers.store') }}" method="POST" id="receiverForm">
                        @csrf
                        
                        <!-- Basic Information -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                           id="name" name="name" value="{{ old('name') }}" required 
                                           placeholder="e.g., Customer Data Receiver">
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mb-3">
                                    <label for="endpoint" class="form-label">Endpoint <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text">/api/in/</span>
                                        <input type="text" class="form-control @error('endpoint') is-invalid @enderror" 
                                               id="endpoint" name="endpoint" value="{{ old('endpoint') }}" required
                                               placeholder="customer-data">
                                        <button type="button" class="btn btn-outline-secondary" onclick="generateEndpoint()">
                                            <i class="fas fa-magic"></i>
                                        </button>
                                    </div>
                                    @error('endpoint')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Unique identifier for this receiver</small>
                                </div>

                                <div class="form-group mb-3">
                                    <label for="target_table" class="form-label">Target Table <span class="text-danger">*</span></label>
                                    <select class="form-control @error('target_table') is-invalid @enderror" 
                                            id="target_table" name="target_table" required>
                                        <option value="">Select Target Table</option>
                                        <option value="customers" {{ old('target_table') == 'customers' ? 'selected' : '' }}>customers</option>
                                        <option value="orders" {{ old('target_table') == 'orders' ? 'selected' : '' }}>orders</option>
                                        <option value="products" {{ old('target_table') == 'products' ? 'selected' : '' }}>products</option>
                                        <option value="transactions" {{ old('target_table') == 'transactions' ? 'selected' : '' }}>transactions</option>
                                        <option value="users" {{ old('target_table') == 'users' ? 'selected' : '' }}>users</option>
                                        <option value="logs" {{ old('target_table') == 'logs' ? 'selected' : '' }}>logs</option>
                                    </select>
                                    @error('target_table')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="allowed_methods" class="form-label">Allowed Methods <span class="text-danger">*</span></label>
                                    <select class="form-control @error('allowed_methods') is-invalid @enderror" 
                                            id="allowed_methods" name="allowed_methods" required>
                                        <option value="">Select Methods</option>
                                        <option value="GET" {{ old('allowed_methods') == 'GET' ? 'selected' : '' }}>GET Only</option>
                                        <option value="POST" {{ old('allowed_methods') == 'POST' ? 'selected' : '' }}>POST Only</option>
                                        <option value="GET,POST" {{ old('allowed_methods', 'GET,POST') == 'GET,POST' ? 'selected' : '' }}>GET + POST</option>
                                        <option value="PUT" {{ old('allowed_methods') == 'PUT' ? 'selected' : '' }}>PUT Only</option>
                                        <option value="DELETE" {{ old('allowed_methods') == 'DELETE' ? 'selected' : '' }}>DELETE Only</option>
                                        <option value="GET,POST,PUT,DELETE" {{ old('allowed_methods') == 'GET,POST,PUT,DELETE' ? 'selected' : '' }}>All Methods</option>
                                    </select>
                                    @error('allowed_methods')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mb-3">
                                    <label for="auth_type" class="form-label">Authentication Type</label>
                                    <select class="form-control @error('auth_type') is-invalid @enderror" 
                                            id="auth_type" name="auth_type" onchange="toggleAuthFields()">
                                        <option value="none" {{ old('auth_type', 'none') == 'none' ? 'selected' : '' }}>No Authentication</option>
                                        <option value="api_key" {{ old('auth_type') == 'api_key' ? 'selected' : '' }}>API Key</option>
                                        <option value="bearer_token" {{ old('auth_type') == 'bearer_token' ? 'selected' : '' }}>Bearer Token</option>
                                    </select>
                                    @error('auth_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mb-3 d-none" id="auth_token_field">
                                    <label for="auth_token" class="form-label">Authentication Token</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control @error('auth_token') is-invalid @enderror" 
                                               id="auth_token" name="auth_token" value="{{ old('auth_token') }}">
                                        <button type="button" class="btn btn-outline-secondary" onclick="generateToken()" title="Generate Token">
                                            <i class="fas fa-key"></i>
                                        </button>
                                    </div>
                                    @error('auth_token')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Data Processing Settings -->
                        <hr class="my-4">
                        <h5 class="mb-3"><i class="fas fa-database me-2"></i>Data Processing</h5>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="duplicate_handling" class="form-label">Duplicate Handling</label>
                                    <select class="form-control" id="duplicate_handling" name="duplicate_handling">
                                        <option value="allow" {{ old('duplicate_handling') == 'allow' ? 'selected' : '' }}>Allow Duplicates</option>
                                        <option value="skip" {{ old('duplicate_handling', 'skip') == 'skip' ? 'selected' : '' }}>Skip Duplicates</option>
                                        <option value="update" {{ old('duplicate_handling') == 'update' ? 'selected' : '' }}>Update Existing</option>
                                        <option value="reject" {{ old('duplicate_handling') == 'reject' ? 'selected' : '' }}>Reject Duplicates</option>
                                    </select>
                                </div>

                                <div class="form-group mb-3">
                                    <label for="unique_fields" class="form-label">Unique Fields</label>
                                    <input type="text" class="form-control" id="unique_fields" name="unique_fields" 
                                           placeholder="id,email,phone" value="{{ old('unique_fields', 'id') }}">
                                    <small class="form-text text-muted">Fields to check for duplicates (comma-separated)</small>
                                </div>

                                <div class="form-group mb-3">
                                    <label for="max_records_per_request" class="form-label">Max Records Per Request</label>
                                    <select class="form-control" id="max_records_per_request" name="max_records_per_request">
                                        <option value="10" {{ old('max_records_per_request') == '10' ? 'selected' : '' }}>10 Records</option>
                                        <option value="25" {{ old('max_records_per_request') == '25' ? 'selected' : '' }}>25 Records</option>
                                        <option value="50" {{ old('max_records_per_request', '50') == '50' ? 'selected' : '' }}>50 Records</option>
                                        <option value="100" {{ old('max_records_per_request') == '100' ? 'selected' : '' }}>100 Records</option>
                                        <option value="500" {{ old('max_records_per_request') == '500' ? 'selected' : '' }}>500 Records</option>
                                        <option value="unlimited" {{ old('max_records_per_request') == 'unlimited' ? 'selected' : '' }}>Unlimited</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="rate_limit" class="form-label">Rate Limit (requests/hour)</label>
                                    <select class="form-control" id="rate_limit" name="rate_limit">
                                        <option value="" {{ old('rate_limit') == '' ? 'selected' : '' }}>No Limit</option>
                                        <option value="10" {{ old('rate_limit') == '10' ? 'selected' : '' }}>10 requests/hour</option>
                                        <option value="60" {{ old('rate_limit', '60') == '60' ? 'selected' : '' }}>60 requests/hour</option>
                                        <option value="100" {{ old('rate_limit') == '100' ? 'selected' : '' }}>100 requests/hour</option>
                                        <option value="500" {{ old('rate_limit') == '500' ? 'selected' : '' }}>500 requests/hour</option>
                                        <option value="1000" {{ old('rate_limit') == '1000' ? 'selected' : '' }}>1000 requests/hour</option>
                                    </select>
                                </div>

                                <div class="form-check mb-3">
                                    <input type="hidden" name="auto_create_table" value="0">
                                    <input type="checkbox" class="form-check-input" id="auto_create_table" name="auto_create_table" value="1"
                                           {{ old('auto_create_table') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="auto_create_table">
                                        Auto Create Table
                                    </label>
                                    <small class="form-text text-muted d-block">Automatically create table if it doesn't exist</small>
                                </div>

                                <div class="form-check mb-3">
                                    <input type="hidden" name="is_active" value="0">
                                    <input type="checkbox" class="form-check-input" id="is_active" name="is_active" value="1"
                                           {{ old('is_active', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        <strong>Active</strong>
                                    </label>
                                    <small class="form-text text-muted d-block">Enable this receiver to accept incoming data</small>
                                </div>

                                <!-- Bidirectional Support -->
                                <div class="form-check mb-3">
                                    <input type="hidden" name="is_bidirectional" value="0">
                                    <input type="checkbox" class="form-check-input" id="is_bidirectional" name="is_bidirectional" value="1"
                                           {{ old('is_bidirectional') ? 'checked' : '' }} onchange="toggleBidirectionalFields()">
                                    <label class="form-check-label" for="is_bidirectional">
                                        <strong>Enable Bidirectional</strong>
                                    </label>
                                    <small class="form-text text-muted d-block">Enable two-way communication support</small>
                                </div>

                                <!-- Bidirectional Settings (initially hidden) -->
                                <div id="bidirectionalSettings" style="display: none;">
                                    <div class="form-group mb-3">
                                        <label for="callback_url" class="form-label">Callback URL</label>
                                        <input type="url" class="form-control" id="callback_url" name="callback_url" 
                                               value="{{ old('callback_url') }}" placeholder="https://example.com/callback">
                                        <small class="form-text text-muted">URL to send callbacks to</small>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="callback_method" class="form-label">Callback Method</label>
                                        <select class="form-control" id="callback_method" name="callback_method">
                                            <option value="POST" {{ old('callback_method') == 'POST' ? 'selected' : '' }}>POST</option>
                                            <option value="PUT" {{ old('callback_method') == 'PUT' ? 'selected' : '' }}>PUT</option>
                                            <option value="PATCH" {{ old('callback_method') == 'PATCH' ? 'selected' : '' }}>PATCH</option>
                                        </select>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="response_format" class="form-label">Response Format</label>
                                        <select class="form-control" id="response_format" name="response_format">
                                            <option value="json" {{ old('response_format', 'json') == 'json' ? 'selected' : '' }}>JSON</option>
                                            <option value="xml" {{ old('response_format') == 'xml' ? 'selected' : '' }}>XML</option>
                                            <option value="plain" {{ old('response_format') == 'plain' ? 'selected' : '' }}>Plain Text</option>
                                        </select>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="retry_attempts" class="form-label">Retry Attempts</label>
                                        <input type="number" class="form-control" id="retry_attempts" name="retry_attempts" 
                                               value="{{ old('retry_attempts', 3) }}" min="0" max="10">
                                        <small class="form-text text-muted">Number of retry attempts for failed callbacks (0-10)</small>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="retry_delay" class="form-label">Retry Delay (seconds)</label>
                                        <input type="number" class="form-control" id="retry_delay" name="retry_delay" 
                                               value="{{ old('retry_delay', 60) }}" min="5" max="3600">
                                        <small class="form-text text-muted">Delay between retry attempts (5-3600 seconds)</small>
                                    </div>

                                    <div class="form-check mb-3">
                                        <input type="hidden" name="auto_acknowledge" value="0">
                                        <input type="checkbox" class="form-check-input" id="auto_acknowledge" name="auto_acknowledge" value="1"
                                               {{ old('auto_acknowledge', true) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="auto_acknowledge">
                                            Auto Acknowledge
                                        </label>
                                        <small class="form-text text-muted d-block">Automatically acknowledge received data</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group mb-4">
                                    <label for="description" class="form-label">Description</label>
                                    <textarea class="form-control" id="description" name="description" rows="3" 
                                             placeholder="Optional description for this receiver">{{ old('description') }}</textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Alert Messages -->
                        <div id="alert-container">
                            @if(session('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif
                            
                            @if(session('error'))
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif
                            
                            @if($errors->any())
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    <strong>Please fix the following errors:</strong>
                                    <ul class="mb-0 mt-2">
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif
                        </div>

                        <!-- Enhanced Submit Buttons -->
                        <div class="text-center mb-4">
                            <div class="row justify-content-center">
                                <div class="col-12 mb-3">
                                    <button type="submit" class="btn btn-success btn-lg me-2" id="saveBtn">
                                        <i class="fas fa-save me-2"></i>Save API Receiver
                                    </button>
                                    <button type="button" class="btn btn-primary btn-lg me-2" id="altSubmitBtn">
                                        <i class="fas fa-rocket me-2"></i>Submit Now
                                    </button>
                                </div>
                                <div class="col-12 mb-3">
                                    <button type="button" class="btn btn-info me-2" id="simpleSubmitBtn">
                                        <i class="fas fa-paper-plane me-2"></i>Simple Submit
                                    </button>
                                    <a href="{{ route('api-receivers.index') }}" class="btn btn-secondary me-2">
                                        <i class="fas fa-times me-2"></i>Cancel
                                    </a>
                                    <button type="button" class="btn btn-warning me-2" onclick="testReceiver()">
                                        <i class="fas fa-vial me-2"></i>Test
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Preview Panel -->
        <div class="col-lg-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-success">
                        <i class="fas fa-eye me-2"></i>Live Preview
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="font-weight-bold">Endpoint URL:</label>
                        <div class="bg-light p-2 rounded">
                            <code id="preview_url">{{ url('/api/in/') }}/[endpoint]</code>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="font-weight-bold">Allowed Methods:</label>
                        <div id="preview_methods">
                            <span class="badge bg-primary">GET + POST</span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="font-weight-bold">Authentication:</label>
                        <div id="preview_auth">
                            <span class="badge bg-warning">None</span>
                        </div>
                    </div>

                    <div class="mt-4">
                        <label class="font-weight-bold">Example Usage:</label>
                        <div class="bg-light p-3 rounded">
                            <small>
                                <div class="text-success">GET Request:</div>
                                <code class="text-dark">curl -X GET "<span id="example_get_url">{{ url('/api/in/') }}/[endpoint]</span>?param=value"</code>
                                <br><br>
                                <div class="text-info">POST Request:</div>
                                <code class="text-dark">curl -X POST "<span id="example_post_url">{{ url('/api/in/') }}/[endpoint]</span>" \<br>
                                -H "Content-Type: application/json" \<br>
                                -d "{\"key\": \"value\"}"</code>
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tips Card -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-info">
                        <i class="fas fa-lightbulb me-2"></i>Quick Tips
                    </h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Use descriptive names for easy identification</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Enable duplicate handling to avoid data redundancy</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Set appropriate rate limits to prevent abuse</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Test your endpoint after creation</li>
                        <li class="mb-0"><i class="fas fa-check text-success me-2"></i>Keep authentication tokens secure</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Auto-generate endpoint from name
document.getElementById('name').addEventListener('input', function() {
    const name = this.value;
    const endpoint = document.getElementById('endpoint');
    if (name && !endpoint.value) {
        endpoint.value = name.toLowerCase()
            .replace(/[^a-z0-9\s]/g, '')
            .replace(/\s+/g, '-')
            .substring(0, 50);
        updatePreview();
    }
});

// Generate random endpoint
function generateEndpoint() {
    const adjectives = ['quick', 'smart', 'fast', 'secure', 'reliable', 'efficient', 'modern', 'advanced'];
    const nouns = ['data', 'receiver', 'endpoint', 'collector', 'handler', 'processor'];
    const adj = adjectives[Math.floor(Math.random() * adjectives.length)];
    const noun = nouns[Math.floor(Math.random() * nouns.length)];
    const num = Math.floor(Math.random() * 1000);
    
    document.getElementById('endpoint').value = `${adj}-${noun}-${num}`;
    updatePreview();
}

// Generate random token
function generateToken() {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let token = '';
    for (let i = 0; i < 32; i++) {
        token += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    document.getElementById('auth_token').value = token;
}

// Toggle authentication fields
function toggleAuthFields() {
    const authType = document.getElementById('auth_type').value;
    const authTokenField = document.getElementById('auth_token_field');
    
    if (authType === 'none') {
        authTokenField.classList.add('d-none');
    } else {
        authTokenField.classList.remove('d-none');
    }
    updatePreview();
}

// Update preview
function updatePreview() {
    const endpoint = document.getElementById('endpoint').value || '[endpoint]';
    const methods = document.getElementById('allowed_methods').value;
    const authType = document.getElementById('auth_type').value;
    const baseUrl = '{{ url('/api/in/') }}';
    
    // Update endpoint preview
    document.getElementById('preview_url').textContent = baseUrl + '/' + endpoint;
    document.getElementById('example_get_url').textContent = baseUrl + '/' + endpoint;
    document.getElementById('example_post_url').textContent = baseUrl + '/' + endpoint;
    
    // Update methods preview
    const methodsContainer = document.getElementById('preview_methods');
    if (methods) {
        const methodArray = methods.split(',');
        let badgesHtml = '';
        methodArray.forEach(function(method) {
            const methodTrimmed = method.trim();
            let badgeClass = 'secondary';
            if (methodTrimmed === 'GET') badgeClass = 'success';
            else if (methodTrimmed === 'POST') badgeClass = 'primary';
            else if (methodTrimmed === 'PUT') badgeClass = 'warning';
            else if (methodTrimmed === 'DELETE') badgeClass = 'danger';
            
            badgesHtml += '<span class="badge bg-' + badgeClass + ' me-1">' + methodTrimmed + '</span>';
        });
        methodsContainer.innerHTML = badgesHtml;
    } else {
        methodsContainer.innerHTML = '<span class="badge bg-secondary">Not selected</span>';
    }
    
    // Update auth preview
    const authContainer = document.getElementById('preview_auth');
    let authBadge = '<span class="badge bg-secondary">Unknown</span>';
    if (authType === 'none') {
        authBadge = '<span class="badge bg-warning">None</span>';
    } else if (authType === 'api_key') {
        authBadge = '<span class="badge bg-info">API Key</span>';
    } else if (authType === 'bearer_token') {
        authBadge = '<span class="badge bg-success">Bearer Token</span>';
    }
    authContainer.innerHTML = authBadge;
}

// ============================================================================
// ENHANCED SUBMIT FUNCTIONS - MATCHING API SOURCES STYLE
// ============================================================================

function showAlert(message, type = 'info') {
    const alertContainer = document.getElementById('alert-container');
    if (!alertContainer) return;
    
    const alert = document.createElement('div');
    alert.className = `alert alert-${type} alert-dismissible fade show`;
    alert.innerHTML = `
        <strong>${type === 'success' ? 'Success!' : type === 'danger' ? 'Error!' : 'Info:'}</strong> ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    alertContainer.appendChild(alert);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        if (alert.parentNode) {
            alert.remove();
        }
    }, 5000);
}

function submitFormDirectly() {
    console.log('Alternative submit triggered');
    
    const form = document.getElementById('receiverForm');
    const saveBtn = document.getElementById('saveBtn');
    const altSubmitBtn = document.getElementById('altSubmitBtn');
    
    if (!form) return;
    
    // Validate required fields manually
    const requiredFields = form.querySelectorAll('[required]');
    let isValid = true;
    let firstInvalidField = null;
    
    requiredFields.forEach(field => {
        if (!field.value.trim()) {
            isValid = false;
            field.classList.add('is-invalid');
            if (!firstInvalidField) {
                firstInvalidField = field;
            }
        } else {
            field.classList.remove('is-invalid');
        }
    });
    
    if (!isValid) {
        showAlert('Please fill in all required fields!', 'danger');
        if (firstInvalidField) {
            firstInvalidField.focus();
        }
        return;
    }
    
    // Show loading state
    if (altSubmitBtn) {
        altSubmitBtn.disabled = true;
        altSubmitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>SUBMITTING...';
    }
    if (saveBtn) {
        saveBtn.disabled = true;
    }
    
    showAlert('Submitting receiver data...', 'info');
    
    // Submit using fetch API with direct POST
    const formData = new FormData(form);
    
    fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json, text/html',
        }
    })
    .then(response => {
        console.log('Response received:', response.status);
        
        if (response.ok) {
            showAlert('Receiver created successfully! Redirecting...', 'success');
            setTimeout(() => {
                window.location.href = '{{ route("api-receivers.index") }}';
            }, 1500);
        } else {
            return response.text().then(text => {
                showAlert('Submission failed: ' + response.statusText, 'danger');
                console.error('Error response:', text);
            });
        }
    })
    .catch(error => {
        console.error('Submit error:', error);
        showAlert('Network error: ' + error.message, 'danger');
    })
    .finally(() => {
        // Re-enable buttons
        if (altSubmitBtn) {
            altSubmitBtn.disabled = false;
            altSubmitBtn.innerHTML = '<i class="fas fa-rocket me-2"></i>SUBMIT NOW';
        }
        if (saveBtn) {
            saveBtn.disabled = false;
        }
    });
}

function submitSimple() {
    console.log('Simple submit triggered');
    
    const form = document.getElementById('receiverForm');
    if (!form) return;
    
    // Simple validation check
    const name = document.getElementById('name')?.value;
    const endpoint = document.getElementById('endpoint')?.value;
    const targetTable = document.getElementById('target_table')?.value;
    const allowedMethods = document.getElementById('allowed_methods')?.value;
    
    if (!name || !endpoint || !targetTable || !allowedMethods) {
        alert('Please fill in all required fields!');
        return;
    }
    
    // Show confirmation
    const confirmed = confirm(`Ready to save this API Receiver?\n\nName: ${name}\nEndpoint: ${endpoint}\nTarget Table: ${targetTable}\nMethods: ${allowedMethods}\n\nClick OK to proceed.`);
    
    if (confirmed) {
        // Create a simple loading message
        const simpleBtn = document.getElementById('simpleSubmitBtn');
        if (simpleBtn) {
            simpleBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>SUBMITTING...';
            simpleBtn.disabled = true;
        }
        
        // Add a hidden field to identify this submission method
        const hiddenField = document.createElement('input');
        hiddenField.type = 'hidden';
        hiddenField.name = 'submit_method';
        hiddenField.value = 'simple';
        form.appendChild(hiddenField);
        
        // Submit the form normally
        form.submit();
    }
}

function testReceiver() {
    const endpoint = document.getElementById('endpoint')?.value;
    const allowedMethods = document.getElementById('allowed_methods')?.value;
    const authType = document.getElementById('auth_type')?.value;
    const authToken = document.getElementById('auth_token')?.value;
    
    if (!endpoint) {
        showAlert('Please enter an endpoint first!', 'warning');
        return;
    }
    
    const testUrl = '{{ url("/api/in/") }}/' + endpoint;
    const methods = allowedMethods ? allowedMethods.split(',') : ['GET'];
    
    let testInfo = `Endpoint Test Information:\n\n`;
    testInfo += `URL: ${testUrl}\n`;
    testInfo += `Allowed Methods: ${methods.join(', ')}\n`;
    testInfo += `Authentication: ${authType || 'none'}\n`;
    
    if (authType !== 'none' && authToken) {
        testInfo += `Token: ${authToken.substring(0, 8)}...\n`;
    }
    
    testInfo += `\nNote: Receiver must be saved first before testing!`;
    
    alert(testInfo);
}

function toggleBidirectionalFields() {
    const isBidirectional = document.getElementById('is_bidirectional').checked;
    const bidirectionalSettings = document.getElementById('bidirectionalSettings');
    
    if (isBidirectional) {
        bidirectionalSettings.style.display = 'block';
    } else {
        bidirectionalSettings.style.display = 'none';
    }
}

// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    updatePreview();
    toggleAuthFields();
    
    // Add event listeners for real-time preview updates
    ['endpoint', 'allowed_methods', 'auth_type'].forEach(id => {
        document.getElementById(id).addEventListener('change', updatePreview);
    });
    
    // Enhanced submit button event listeners
    const altSubmitBtn = document.getElementById('altSubmitBtn');
    if (altSubmitBtn) {
        altSubmitBtn.addEventListener('click', submitFormDirectly);
    }
    
    const simpleSubmitBtn = document.getElementById('simpleSubmitBtn');
    if (simpleSubmitBtn) {
        simpleSubmitBtn.addEventListener('click', submitSimple);
    }
    
    // Primary form submit handler
    const form = document.getElementById('receiverForm');
    const saveBtn = document.getElementById('saveBtn');
    
    if (form) {
        form.addEventListener('submit', function(e) {
            console.log('Form submitted via primary button');
            
            // Disable buttons during submission
            if (saveBtn) {
                saveBtn.disabled = true;
                saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>SAVING...';
            }
            
            // Re-enable buttons after delay if submission fails
            setTimeout(() => {
                if (saveBtn && saveBtn.disabled) {
                    saveBtn.disabled = false;
                    saveBtn.innerHTML = '<i class="fas fa-save me-2"></i>SAVE API RECEIVER';
                }
            }, 15000);
        });
    }
    
    // Initialize bidirectional fields on page load
    toggleBidirectionalFields();
    
    console.log('API Receiver form initialized with enhanced submit options!');
});
</script>

<style>
.card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.form-group label {
    font-weight: 600;
    color: #5a5c69;
}

#preview_url {
    font-size: 0.9em;
    color: #e83e8c;
}

.badge {
    font-size: 0.75em;
}

.text-success {
    color: #1cc88a !important;
}

.text-info {
    color: #17a2b8 !important;
}

.form-check-label {
    font-weight: 500;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}

/* Button Text Colors */
.btn-success {
    color: #2b4a34 !important;
    background-color: #9de3bf;
    border-color: #9de3bf;
}

.btn-primary {
    color: #1a365d !important;
    background-color: #9ec5fe;
    border-color: #9ec5fe;
}

.btn-info {
    color: #1e4e8c !important;
    background-color: #a5d7f7;
    border-color: #a5d7f7;
}

.btn-warning {
    color: #603b00 !important;
    background-color: #ffd699;
    border-color: #ffd699;
}

.btn-secondary {
    color: #383d41 !important;
    background-color: #e2e6ea;
    border-color: #e2e6ea;
}

/* Hover States */
.btn-success:hover {
    color: #2b4a34 !important;
    background-color: #8ed1af;
    border-color: #8ed1af;
}

.btn-primary:hover {
    color: #1a365d !important;
    background-color: #8eb5ee;
    border-color: #8eb5ee;
}

.btn-info:hover {
    color: #1e4e8c !important;
    background-color: #95c7e7;
    border-color: #95c7e7;
}

.btn-warning:hover {
    color: #603b00 !important;
    background-color: #efc689;
    border-color: #efc689;
}

.btn-secondary:hover {
    color: #383d41 !important;
    background-color: #d2d6da;
    border-color: #d2d6da;
}

.bg-light {
    background-color: #f8f9fc !important;
}

.bg-dark {
    background-color: #343a40 !important;
}
</style>
@endsection