@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <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-edit me-2"></i>Edit API Receiver
        </h1>
        <a href="{{ route('api-receivers.show', $apiReceiver) }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to Details
        </a>
    </div>

    <!-- Edit Form -->
    <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-form me-2"></i>Receiver Information
            </h6>
        </div>
        <div class="card-body">
            <form action="{{ route('api-receivers.update', $apiReceiver) }}" method="POST">
                @csrf
                @method('PUT')
                
                <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', $apiReceiver->name) }}" required>
                            @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', $apiReceiver->endpoint) }}" required>
                                @error('endpoint')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <small class="form-text text-muted">Unique endpoint identifier</small>
                        </div>

                        <div class="form-group mb-3">
                            <label for="target_table" class="form-label">Target Table <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('target_table') is-invalid @enderror" 
                                   id="target_table" name="target_table" value="{{ old('target_table', $apiReceiver->target_table) }}" required>
                            @error('target_table')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <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="GET" {{ $apiReceiver->allowed_methods == 'GET' ? 'selected' : '' }}>GET</option>
                                <option value="POST" {{ $apiReceiver->allowed_methods == 'POST' ? 'selected' : '' }}>POST</option>
                                <option value="GET,POST" {{ $apiReceiver->allowed_methods == 'GET,POST' ? 'selected' : '' }}>GET, POST</option>
                                <option value="PUT" {{ $apiReceiver->allowed_methods == 'PUT' ? 'selected' : '' }}>PUT</option>
                                <option value="DELETE" {{ $apiReceiver->allowed_methods == 'DELETE' ? 'selected' : '' }}>DELETE</option>
                            </select>
                            @error('allowed_methods')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-6">
                        <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" {{ $apiReceiver->auth_type == 'none' ? 'selected' : '' }}>None</option>
                                <option value="api_key" {{ $apiReceiver->auth_type == 'api_key' ? 'selected' : '' }}>API Key</option>
                                <option value="bearer_token" {{ $apiReceiver->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" id="auth_token_field">
                            <label for="auth_token" class="form-label">Authentication Token</label>
                            <input type="text" class="form-control @error('auth_token') is-invalid @enderror" 
                                   id="auth_token" name="auth_token" value="{{ old('auth_token', $apiReceiver->auth_token) }}">
                            @error('auth_token')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group mb-3">
                            <label for="rate_limit" class="form-label">Rate Limit (per hour)</label>
                            <input type="number" class="form-control @error('rate_limit') is-invalid @enderror" 
                                   id="rate_limit" name="rate_limit" value="{{ old('rate_limit', $apiReceiver->rate_limit) }}" min="1">
                            @error('rate_limit')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </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', $apiReceiver->is_active) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                Active
                            </label>
                        </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', $apiReceiver->auto_create_table) ? 'checked' : '' }}>
                            <label class="form-check-label" for="auto_create_table">
                                Auto Create Table
                            </label>
                        </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', $apiReceiver->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 -->
                        <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', $apiReceiver->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', $apiReceiver->callback_method) == 'POST' ? 'selected' : '' }}>POST</option>
                                    <option value="PUT" {{ old('callback_method', $apiReceiver->callback_method) == 'PUT' ? 'selected' : '' }}>PUT</option>
                                    <option value="PATCH" {{ old('callback_method', $apiReceiver->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', $apiReceiver->response_format ?? 'json') == 'json' ? 'selected' : '' }}>JSON</option>
                                    <option value="xml" {{ old('response_format', $apiReceiver->response_format) == 'xml' ? 'selected' : '' }}>XML</option>
                                    <option value="plain" {{ old('response_format', $apiReceiver->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', $apiReceiver->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', $apiReceiver->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', $apiReceiver->auto_acknowledge) ? '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>

                <div class="form-group mb-3">
                    <label for="description" class="form-label">Description</label>
                    <textarea class="form-control @error('description') is-invalid @enderror" 
                              id="description" name="description" rows="3">{{ old('description', $apiReceiver->description) }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Update Receiver
                    </button>
                    <a href="{{ route('api-receivers.show', $apiReceiver) }}" class="btn btn-secondary">
                        <i class="fas fa-times me-2"></i>Cancel
                    </a>
                </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.show', $apiReceiver) }}" 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>

<script>
function toggleAuthFields() {
    const authType = document.getElementById('auth_type').value;
    const authTokenField = document.getElementById('auth_token_field');
    
    if (authType === 'none') {
        authTokenField.style.display = 'none';
    } else {
        authTokenField.style.display = 'block';
    }
}

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';
    }
}

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.querySelector('form');
    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
    const formData = new FormData(form);
    formData.append('_method', 'PUT'); // For Laravel PUT method
    
    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 updated successfully! Redirecting...', 'success');
            setTimeout(() => {
                window.location.href = '{{ route("api-receivers.show", $apiReceiver) }}';
            }, 1500);
        } else {
            return response.text().then(text => {
                showAlert('Update 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.querySelector('form');
    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 update 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: Changes must be saved before testing!`;
    
    alert(testInfo);
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleAuthFields();
    toggleBidirectionalFields();
    
    // Add event listeners for enhanced submit buttons
    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.querySelector('form');
    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);
        });
    }
});
</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;
}

.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;
}

.alert {
    margin-top: 1rem;
}

.badge {
    font-size: 0.75em;
}

.text-gray-600 {
    color: #858796 !important;
}

.text-gray-700 {
    color: #6e707e !important;
}
</style>
@endsection