@extends('layouts.app')

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

@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 Transceiver
        </h1>
        <a href="{{ route('api-transceivers.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>Transceiver Configuration
                    </h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('api-transceivers.store') }}" method="POST" id="transceiverForm">
                        @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>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mb-3">
                                    <label for="api_client_id" class="form-label">API Client <span class="text-danger">*</span></label>
                                    <select class="form-control @error('api_client_id') is-invalid @enderror" 
                                            id="api_client_id" name="api_client_id" required>
                                        <option value="">Select API Client</option>
                                        @foreach($apiClients as $client)
                                            <option value="{{ $client->id }}" {{ old('api_client_id') == $client->id ? 'selected' : '' }}>
                                                {{ $client->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('api_client_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mb-3">
                                    <label for="api_receiver_id" class="form-label">Source (Receiver) <span class="text-danger">*</span></label>
                                    <select class="form-control @error('api_receiver_id') is-invalid @enderror" 
                                            id="api_receiver_id" name="api_receiver_id" required>
                                        <option value="">Select Source</option>
                                        @foreach($apiReceivers as $receiver)
                                            <option value="{{ $receiver->id }}" {{ old('api_receiver_id') == $receiver->id ? 'selected' : '' }}>
                                                {{ $receiver->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('api_receiver_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mb-3">
                                    <label for="api_target_id" class="form-label">Target <span class="text-danger">*</span></label>
                                    <select class="form-control @error('api_target_id') is-invalid @enderror" 
                                            id="api_target_id" name="api_target_id" required>
                                        <option value="">Select Target</option>
                                        @foreach($apiTargets as $target)
                                            <option value="{{ $target->id }}" {{ old('api_target_id') == $target->id ? 'selected' : '' }}>
                                                {{ $target->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('api_target_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="direction" class="form-label">Direction <span class="text-danger">*</span></label>
                                    <select class="form-control @error('direction') is-invalid @enderror" 
                                            id="direction" name="direction" required>
                                        <option value="unidirectional" {{ old('direction') == 'unidirectional' ? 'selected' : '' }}>Unidirectional</option>
                                        <option value="bidirectional" {{ old('direction') == 'bidirectional' ? 'selected' : '' }}>Bidirectional</option>
                                    </select>
                                    @error('direction')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mb-3">
                                    <label for="schedule_type" class="form-label">Schedule Type <span class="text-danger">*</span></label>
                                    <select class="form-control @error('schedule_type') is-invalid @enderror" 
                                            id="schedule_type" name="schedule_type" required onchange="toggleScheduleFields()">
                                        <option value="manual" {{ old('schedule_type') == 'manual' ? 'selected' : '' }}>Manual</option>
                                        <option value="interval" {{ old('schedule_type') == 'interval' ? 'selected' : '' }}>Interval</option>
                                        <option value="cron" {{ old('schedule_type') == 'cron' ? 'selected' : '' }}>Cron</option>
                                    </select>
                                    @error('schedule_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Interval Fields -->
                                <div id="intervalFields" class="form-group mb-3" style="display: none;">
                                    <label for="sync_interval" class="form-label">Sync Interval (minutes) <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('sync_interval') is-invalid @enderror" 
                                           id="sync_interval" name="sync_interval" value="{{ old('sync_interval', 60) }}" 
                                           min="1" max="1440">
                                    @error('sync_interval')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Enter interval in minutes (1-1440)</small>
                                </div>

                                <!-- Cron Fields -->
                                <div id="cronFields" class="form-group mb-3" style="display: none;">
                                    <label for="cron_expression" class="form-label">Cron Expression <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('cron_expression') is-invalid @enderror" 
                                           id="cron_expression" name="cron_expression" value="{{ old('cron_expression', '* * * * *') }}" 
                                           placeholder="* * * * *">
                                    @error('cron_expression')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Standard cron expression format</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 transceiver to start processing data</small>
                                </div>

                                <div class="form-check mb-3">
                                    <input type="hidden" name="auto_sync" value="0">
                                    <input type="checkbox" class="form-check-input" id="auto_sync" name="auto_sync" value="1"
                                           {{ old('auto_sync', false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="auto_sync">
                                        <strong>Auto Sync</strong>
                                    </label>
                                    <small class="form-text text-muted d-block">Enable automatic synchronization</small>
                                </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') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </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 TRANSCEIVER
                                    </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-transceivers.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="testTransceiver()">
                                        <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">Configuration:</label>
                        <div class="bg-light p-2 rounded">
                            <div id="preview_name">Name: <span class="text-primary">Not set</span></div>
                            <div id="preview_client">Client: <span class="text-primary">Not selected</span></div>
                            <div id="preview_source">Source: <span class="text-primary">Not selected</span></div>
                            <div id="preview_target">Target: <span class="text-primary">Not selected</span></div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="font-weight-bold">Schedule:</label>
                        <div id="preview_schedule" class="bg-light p-2 rounded">
                            <span class="badge bg-secondary">Manual</span>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="font-weight-bold">Status:</label>
                        <div id="preview_status">
                            <span class="badge bg-success">Active</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Tips -->
            <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>Configure schedule based on data frequency</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Test the connection before activating</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Start with manual mode for testing</li>
                        <li class="mb-0"><i class="fas fa-check text-success me-2"></i>Monitor logs after activation</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function toggleScheduleFields() {
    const scheduleType = document.getElementById('schedule_type').value;
    const intervalFields = document.getElementById('intervalFields');
    const cronFields = document.getElementById('cronFields');
    
    // Hide all fields first
    intervalFields.style.display = 'none';
    cronFields.style.display = 'none';
    
    // Show relevant field based on schedule type
    if (scheduleType === 'interval') {
        intervalFields.style.display = 'block';
    } else if (scheduleType === 'cron') {
        cronFields.style.display = 'block';
    }
    
    updatePreview();
}

function updatePreview() {
    // Update name preview
    const name = document.getElementById('name').value || 'Not set';
    document.getElementById('preview_name').innerHTML = `Name: <span class="text-primary">${name}</span>`;
    
    // Update client preview
    const clientSelect = document.getElementById('api_client_id');
    const clientName = clientSelect.options[clientSelect.selectedIndex].text;
    document.getElementById('preview_client').innerHTML = `Client: <span class="text-primary">${clientName}</span>`;
    
    // Update source preview
    const sourceSelect = document.getElementById('api_receiver_id');
    const sourceName = sourceSelect.options[sourceSelect.selectedIndex].text;
    document.getElementById('preview_source').innerHTML = `Source: <span class="text-primary">${sourceName}</span>`;
    
    // Update target preview
    const targetSelect = document.getElementById('api_target_id');
    const targetName = targetSelect.options[targetSelect.selectedIndex].text;
    document.getElementById('preview_target').innerHTML = `Target: <span class="text-primary">${targetName}</span>`;
    
    // Update schedule preview
    const scheduleType = document.getElementById('schedule_type').value;
    let scheduleText = 'Manual';
    let scheduleClass = 'secondary';
    
    if (scheduleType === 'interval') {
        const interval = document.getElementById('sync_interval').value;
        scheduleText = `Every ${interval} minutes`;
        scheduleClass = 'info';
    } else if (scheduleType === 'cron') {
        const cron = document.getElementById('cron_expression').value;
        scheduleText = `Cron: ${cron}`;
        scheduleClass = 'primary';
    }
    
    document.getElementById('preview_schedule').innerHTML = `<span class="badge bg-${scheduleClass}">${scheduleText}</span>`;
    
    // Update status preview
    const isActive = document.getElementById('is_active').checked;
    document.getElementById('preview_status').innerHTML = `<span class="badge bg-${isActive ? 'success' : 'secondary'}">${isActive ? 'Active' : 'Inactive'}</span>`;
}

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('transceiverForm');
    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 transceiver data...', 'info');
    
    // Submit using fetch API
    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('Transceiver created successfully! Redirecting...', 'success');
            setTimeout(() => {
                window.location.href = '{{ route("api-transceivers.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('transceiverForm');
    if (!form) return;
    
    // Simple validation check
    const name = document.getElementById('name')?.value;
    const apiClientId = document.getElementById('api_client_id')?.value;
    const apiReceiverId = document.getElementById('api_receiver_id')?.value;
    const apiTargetId = document.getElementById('api_target_id')?.value;
    
    if (!name || !apiClientId || !apiReceiverId || !apiTargetId) {
        alert('Please fill in all required fields!');
        return;
    }
    
    // Show confirmation
    const confirmed = confirm(`Ready to save this API Transceiver?\n\nName: ${name}\nClient: ${document.getElementById('api_client_id').options[document.getElementById('api_client_id').selectedIndex].text}\nSource: ${document.getElementById('api_receiver_id').options[document.getElementById('api_receiver_id').selectedIndex].text}\nTarget: ${document.getElementById('api_target_id').options[document.getElementById('api_target_id').selectedIndex].text}\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 testTransceiver() {
    const name = document.getElementById('name')?.value;
    const apiClientId = document.getElementById('api_client_id')?.value;
    const apiReceiverId = document.getElementById('api_receiver_id')?.value;
    const apiTargetId = document.getElementById('api_target_id')?.value;
    
    if (!name || !apiClientId || !apiReceiverId || !apiTargetId) {
        showAlert('Please fill in all required fields before testing!', 'warning');
        return;
    }
    
    let testInfo = `Test Configuration:\n\n`;
    testInfo += `Name: ${name}\n`;
    testInfo += `Client: ${document.getElementById('api_client_id').options[document.getElementById('api_client_id').selectedIndex].text}\n`;
    testInfo += `Source: ${document.getElementById('api_receiver_id').options[document.getElementById('api_receiver_id').selectedIndex].text}\n`;
    testInfo += `Target: ${document.getElementById('api_target_id').options[document.getElementById('api_target_id').selectedIndex].text}\n`;
    testInfo += `\nNote: Transceiver must be saved first before testing!`;
    
    alert(testInfo);
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleScheduleFields();
    
    // Add event listeners for real-time preview updates
    ['name', 'api_client_id', 'api_receiver_id', 'api_target_id', 'schedule_type', 'sync_interval', 'cron_expression', 'is_active'].forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            element.addEventListener('change', updatePreview);
            element.addEventListener('input', updatePreview);
        }
    });
    
    // 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.getElementById('transceiverForm');
    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 TRANSCEIVER';
                }
            }, 15000);
        });
    }
    
    // Initial preview update
    updatePreview();
});
</script>

@section('styles')
<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;
}

.badge {
    font-size: 0.75em;
}

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

.text-gray-700 {
    color: #6e707e !important;
}

.bg-light {
    background-color: #f8f9fc !important;
}
</style>
@endsection