@extends('layouts.app')

@section('title', 'Edit MikroTik Server - ISP ERP System')

@section('page-title', 'Edit MikroTik Server')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-edit me-2"></i>
                                Edit MikroTik Server
                            </h3>
                            <p class="mb-0 opacity-75">Update configuration for {{ $mikrotik->name }}</p>
                        </div>
                        <div>
                            <a href="{{ route('mikrotik.index') }}" class="btn btn-secondary btn-custom">
                                <i class="fas fa-arrow-left me-2"></i>Back to Servers
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-server me-2"></i>
                        Server Configuration
                    </h5>
                </div>
                <div class="custom-card-body">
                    <form id="editServerForm" method="POST" action="{{ route('mikrotik.update', $mikrotik->id) }}">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="_method" value="PUT">
                        
                        <!-- Basic Information -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-info-circle me-2"></i>
                                    Basic Information
                                </h6>
                            </div>
                        </div>
                        
                        <!-- Select ISP -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="isp_id" class="form-label">
                                    <i class="fas fa-network-wired me-1"></i>
                                    Select ISP <span class="text-danger">*</span>
                                </label>
                                <small class="form-text text-muted">Select ISP for this server</small>
                            </div>
                            <div class="col-md-8">
                                <select class="form-control custom-form-control" id="isp_id" name="isp_id" required>
                                    <option value="">Select ISP</option>
                                    @foreach($isps as $isp)
                                        <option value="{{ $isp->id }}" {{ old('isp_id', $mikrotik->isp_id) == $isp->id ? 'selected' : '' }}>
                                            {{ $isp->name }} ({{ $isp->code }})
                                        </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="isp_id-error"></div>
                            </div>
                        </div>
                        
                        <!-- Select Branch -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="branch_id" class="form-label">
                                    <i class="fas fa-building me-1"></i>
                                    Select Branch <span class="text-danger">*</span>
                                </label>
                                <small class="form-text text-muted">Select sub-branch for this server</small>
                            </div>
                            <div class="col-md-8">
                                <select class="form-control custom-form-control" id="branch_id" name="branch_id" required>
                                    <option value="">Select Sub-Branch</option>
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->id }}" 
                                                {{ old('branch_id', $mikrotik->branch_id) == $branch->id ? 'selected' : '' }}>
                                            <i class="fas fa-sitemap"></i> {{ $branch->name }} ({{ $branch->code }}) - Sub Branch
                                        </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="branch_id-error"></div>
                            </div>
                        </div>
                        
                        <!-- Server Name -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="name" class="form-label">
                                    <i class="fas fa-tag me-1"></i>
                                    Server Name <span class="text-danger">*</span>
                                </label>
                                <small class="form-text text-muted">Give your MikroTik server a descriptive name</small>
                            </div>
                            <div class="col-md-8">
                                <input type="text" class="form-control custom-form-control" id="name" name="name" 
                                       value="{{ old('name', $mikrotik->name) }}" required placeholder="e.g., Main Router, Branch Office">
                                <div class="invalid-feedback" id="name-error"></div>
                            </div>
                        </div>
                        
                        <!-- IP Address -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="host" class="form-label">
                                    <i class="fas fa-network-wired me-1"></i>
                                    IP Address/Hostname <span class="text-danger">*</span>
                                </label>
                                <small class="form-text text-muted">Enter the IP address or hostname of your MikroTik router</small>
                            </div>
                            <div class="col-md-8">
                                <input type="text" class="form-control custom-form-control" id="host" name="host" 
                                       value="{{ old('host', $mikrotik->host) }}" required placeholder="e.g., 192.168.1.1 or router.local">
                                <div class="invalid-feedback" id="host-error"></div>
                            </div>
                        </div>

                        <!-- Connection Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-plug me-2"></i>
                                    Connection Settings
                                </h6>
                            </div>
                        </div>
                        
                        <!-- Port -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="port" class="form-label">
                                    <i class="fas fa-plug me-1"></i>
                                    Port <span class="text-danger">*</span>
                                </label>
                                <small class="form-text text-muted">Default: 8728 (API), 8729 (SSL)</small>
                            </div>
                            <div class="col-md-8">
                                <input type="number" class="form-control custom-form-control" id="port" name="port" 
                                       value="{{ old('port', $mikrotik->port) }}" min="1" max="65535" required>
                                <div class="invalid-feedback" id="port-error"></div>
                            </div>
                        </div>
                        
                        <!-- Username -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="username" class="form-label">
                                    <i class="fas fa-user me-1"></i>
                                    Username <span class="text-danger">*</span>
                                </label>
                                <small class="form-text text-muted">RouterOS admin username</small>
                            </div>
                            <div class="col-md-8">
                                <input type="text" class="form-control custom-form-control" id="username" name="username" 
                                       value="{{ old('username', $mikrotik->username) }}" required placeholder="e.g., admin">
                                <div class="invalid-feedback" id="username-error"></div>
                            </div>
                        </div>
                        
                        <!-- Password -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="password" class="form-label">
                                    <i class="fas fa-lock me-1"></i>
                                    Password
                                </label>
                                <small class="form-text text-muted">Leave blank to keep current password</small>
                            </div>
                            <div class="col-md-8">
                                <div class="input-group">
                                    <input type="password" class="form-control custom-form-control" id="password" name="password" 
                                           placeholder="Leave blank to keep current password">
                                    <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                <div class="invalid-feedback" id="password-error"></div>
                            </div>
                        </div>

                        <!-- Advanced Settings -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-cogs me-2"></i>
                                    Advanced Settings
                                </h6>
                            </div>
                        </div>
                        
                        <!-- API Version -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="api_version" class="form-label">
                                    <i class="fas fa-code me-1"></i>
                                    API Version
                                </label>
                                <small class="form-text text-muted">RouterOS API version</small>
                            </div>
                            <div class="col-md-8">
                                <select class="form-select custom-form-control" id="api_version" name="api_version">
                                    <option value="1.0" {{ old('api_version', $mikrotik->api_version) == '1.0' ? 'selected' : '' }}>1.0 (Default)</option>
                                    <option value="1.1" {{ old('api_version', $mikrotik->api_version) == '1.1' ? 'selected' : '' }}>1.1</option>
                                    <option value="1.2" {{ old('api_version', $mikrotik->api_version) == '1.2' ? 'selected' : '' }}>1.2</option>
                                    <option value="1.3" {{ old('api_version', $mikrotik->api_version) == '1.3' ? 'selected' : '' }}>1.3</option>
                                </select>
                            </div>
                        </div>
                        
                        <!-- Status -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="is_active" class="form-label">
                                    <i class="fas fa-toggle-on me-1"></i>
                                    Active Status
                                </label>
                                <small class="form-text text-muted">Server monitoring status</small>
                            </div>
                            <div class="col-md-8">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="is_active" name="is_active" 
                                           {{ old('is_active', $mikrotik->is_active) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_active">
                                        Active (Server will be monitored)
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Enabled Status -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="is_enabled" class="form-label">
                                    <i class="fas fa-power-off me-1"></i>
                                    Enabled Status
                                </label>
                                <small class="form-text text-muted">Server sync and operations status</small>
                            </div>
                            <div class="col-md-8">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="is_enabled" name="is_enabled" 
                                           {{ old('is_enabled', $mikrotik->is_enabled) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="is_enabled">
                                        Enabled (Server will be used for sync operations)
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="description" class="form-label">
                                    <i class="fas fa-align-left me-1"></i>
                                    Description
                                </label>
                                <small class="form-text text-muted">Optional description about this server</small>
                            </div>
                            <div class="col-md-8">
                                <textarea class="form-control custom-form-control" id="description" name="description" 
                                          rows="3" placeholder="Enter server description">{{ old('description', $mikrotik->description) }}</textarea>
                            </div>
                        </div>
                        
                        <!-- Notes -->
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label for="notes" class="form-label">
                                    <i class="fas fa-sticky-note me-1"></i>
                                    Notes
                                </label>
                                <small class="form-text text-muted">Additional notes or comments</small>
                            </div>
                            <div class="col-md-8">
                                <textarea class="form-control custom-form-control" id="notes" name="notes" 
                                          rows="3" placeholder="Enter additional notes">{{ old('notes', $mikrotik->notes) }}</textarea>
                            </div>
                        </div>

                        <!-- Connection Test -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="alert alert-info">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <div>
                                            <strong>Connection Test:</strong> 
                                            Test your connection before saving to ensure the server is accessible.
                                        </div>
                                    </div>
                                </div>
                                
                                <button type="button" class="btn btn-outline-info btn-custom" id="testConnectionBtn">
                                    <i class="fas fa-plug me-2"></i>Test Connection
                                </button>
                                
                                <div id="connectionResult" class="mt-3" style="display: none;"></div>
                            </div>
                        </div>

                        <!-- Current Server Info -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="alert alert-light">
                                    <h6 class="mb-3">
                                        <i class="fas fa-info-circle me-2"></i>
                                        Current Server Information
                                    </h6>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <small class="text-muted">Created:</small><br>
                                            <strong>{{ $mikrotik->created_at->format('M d, Y H:i') }}</strong>
                                        </div>
                                        <div class="col-md-3">
                                            <small class="text-muted">Last Updated:</small><br>
                                            <strong>{{ $mikrotik->updated_at->format('M d, Y H:i') }}</strong>
                                        </div>
                                        <div class="col-md-3">
                                            <small class="text-muted">Active Status:</small><br>
                                            @if($mikrotik->is_active)
                                                <span class="badge bg-success">Active</span>
                                            @else
                                                <span class="badge bg-secondary">Inactive</span>
                                            @endif
                                        </div>
                                        <div class="col-md-3">
                                            <small class="text-muted">Enabled Status:</small><br>
                                            @if($mikrotik->is_enabled)
                                                <span class="badge bg-primary">Enabled</span>
                                            @else
                                                <span class="badge bg-warning">Disabled</span>
                                            @endif
                                        </div>
                                        <div class="col-md-3">
                                            <small class="text-muted">API Version:</small><br>
                                            <strong>{{ $mikrotik->api_version }}</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="row">
                            <div class="col-12">
                                <hr class="my-4">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('mikrotik.index') }}" class="btn btn-secondary btn-custom">
                                        <i class="fas fa-times me-2"></i>Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary btn-custom" id="submitBtn">
                                        <i class="fas fa-save me-2"></i>Update Server
                                    </button>
                                    <button type="button" class="btn btn-warning btn-custom ms-2" onclick="testSimpleSubmit()">
                                        <i class="fas fa-bug me-2"></i>Test Submit
                                    </button>
                                    <button type="button" class="btn btn-info btn-custom ms-2" onclick="testRoute()">
                                        <i class="fas fa-route me-2"></i>Test Route
                                    </button>
                                    <button type="button" class="btn btn-dark btn-custom ms-2" onclick="debugCSRF()">
                                        <i class="fas fa-key me-2"></i>Debug CSRF
                                    </button>
                                    <button type="button" class="btn btn-success btn-custom ms-2" onclick="testValidation()">
                                        <i class="fas fa-check me-2"></i>Test Validation
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    setupEventListeners();
    initializeFormValidation();
});

function setupEventListeners() {
    // Toggle password visibility
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordField = document.getElementById('password');
        const icon = this.querySelector('i');
        
        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            passwordField.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    });

    // Test connection button
    document.getElementById('testConnectionBtn').addEventListener('click', function() {
        testConnection();
    });

    // Form submission
    document.getElementById('editServerForm').addEventListener('submit', function(e) {
        e.preventDefault();
        console.log('Form submission intercepted');
        submitForm();
    });
}

function testConnection() {
    const testBtn = document.getElementById('testConnectionBtn');
    const resultDiv = document.getElementById('connectionResult');
    const originalText = testBtn.innerHTML;
    
    // Show loading state
    testBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Testing Connection...';
    testBtn.disabled = true;
    resultDiv.style.display = 'none';
    
    // Get form data
    const formData = new FormData();
    formData.append('host', document.getElementById('host').value);
    formData.append('port', document.getElementById('port').value);
    formData.append('username', document.getElementById('username').value);
    
    // Use current password if new one is not provided
    const newPassword = document.getElementById('password').value;
    if (newPassword) {
        formData.append('password', newPassword);
    } else {
        // For testing, we'll use the current password from the server
        // In a real scenario, you might want to prompt the user
        formData.append('password', '{{ $mikrotik->password }}');
    }
    
    // Test connection
    fetch('{{ route("mikrotik.test-connection") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            resultDiv.innerHTML = `
                <div class="alert alert-success">
                    <i class="fas fa-check-circle me-2"></i>
                    <strong>Success!</strong> ${data.message}
                    <div class="mt-2">
                        <small class="text-muted">
                            Host: ${data.details.host}:${data.details.port}<br>
                            API Version: ${data.details.api_version}
                        </small>
                    </div>
                </div>
            `;
        } else {
            resultDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Connection Failed!</strong> ${data.message}
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        resultDiv.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>Error!</strong> Failed to test connection. Please try again.
            </div>
        `;
    })
    .finally(() => {
        testBtn.innerHTML = originalText;
        testBtn.disabled = false;
        resultDiv.style.display = 'block';
    });
}

function submitForm() {
    const form = document.getElementById('editServerForm');
    const submitBtn = document.getElementById('submitBtn');
    const originalText = submitBtn.innerHTML;
    
    // Clear previous errors
    clearValidationErrors();
    
    // Show loading state
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Updating...';
    submitBtn.disabled = true;
    
    // Get form data
    const formData = new FormData(form);
    
    // Debug: Log form data and action
    console.log('Form action:', form.action);
    console.log('Form data being sent:');
    for (let [key, value] of formData.entries()) {
        console.log(key + ':', value);
    }
    
    // Submit form
    fetch(form.action, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: formData
    })
    .then(response => {
        console.log('Response status:', response.status);
        console.log('Response headers:', response.headers);
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Show success message
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: data.message,
                confirmButtonText: 'OK'
            }).then(() => {
                window.location.href = '{{ route("mikrotik.index") }}';
            });
        } else {
            // Show validation errors
            if (data.errors) {
                displayValidationErrors(data.errors);
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: data.message,
                    confirmButtonText: 'OK'
                });
            }
        }
    })
    .catch(error => {
        console.error('Error:', error);
        console.error('Error details:', error.message);
        
        // Try to get more detailed error information
        if (error.response) {
            error.response.text().then(text => {
                console.error('Response text:', text);
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: 'Server error: ' + text,
                    confirmButtonText: 'OK'
                });
            }).catch(() => {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: 'An unexpected error occurred. Please try again.',
                    confirmButtonText: 'OK'
                });
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: 'Network error: ' + error.message,
                confirmButtonText: 'OK'
            });
        }
    })
    .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
}

function displayValidationErrors(errors) {
    Object.keys(errors).forEach(field => {
        const input = document.getElementById(field);
        const errorDiv = document.getElementById(field + '-error');
        
        if (input && errorDiv) {
            input.classList.add('is-invalid');
            errorDiv.textContent = errors[field][0];
        }
    });
}

function clearValidationErrors() {
    const inputs = document.querySelectorAll('.is-invalid');
    inputs.forEach(input => {
        input.classList.remove('is-invalid');
    });
    
    const errorDivs = document.querySelectorAll('.invalid-feedback');
    errorDivs.forEach(div => {
        div.textContent = '';
    });
}

function initializeFormValidation() {
    // Real-time validation
    const inputs = document.querySelectorAll('input[required], select[required]');
    inputs.forEach(input => {
        input.addEventListener('blur', function() {
            validateField(this);
        });
    });
}

function validateField(field) {
    const value = field.value.trim();
    const errorDiv = document.getElementById(field.id + '-error');
    
    if (!value) {
        field.classList.add('is-invalid');
        if (errorDiv) {
            errorDiv.textContent = 'This field is required.';
        }
        return false;
    }
    
    // Specific validations
    if (field.id === 'host') {
        const ipRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
        const hostnameRegex = /^[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?)*$/;
        
        if (!ipRegex.test(value) && !hostnameRegex.test(value)) {
            field.classList.add('is-invalid');
            if (errorDiv) {
                errorDiv.textContent = 'Please enter a valid IP address or hostname.';
            }
            return false;
        }
    }
    
    if (field.id === 'port') {
        const port = parseInt(value);
        if (port < 1 || port > 65535) {
            field.classList.add('is-invalid');
            if (errorDiv) {
                errorDiv.textContent = 'Port must be between 1 and 65535.';
            }
            return false;
        }
    }
    
    // Clear error if validation passes
    field.classList.remove('is-invalid');
    if (errorDiv) {
        errorDiv.textContent = '';
    }
    
    return true;
}

function testSimpleSubmit() {
    console.log('Testing simple submit...');
    
    // Create a simple form data
    const formData = new FormData();
    formData.append('name', document.getElementById('name').value);
    formData.append('host', document.getElementById('host').value);
    formData.append('port', document.getElementById('port').value);
    formData.append('username', document.getElementById('username').value);
    formData.append('api_version', document.getElementById('api_version').value);
    formData.append('description', document.getElementById('description').value);
    // Handle checkbox values properly
    if (document.getElementById('is_active').checked) {
        formData.append('is_active', 'on');
    }
    if (document.getElementById('is_enabled').checked) {
        formData.append('is_enabled', 'on');
    }
    
    console.log('Form data for test:');
    for (let [key, value] of formData.entries()) {
        console.log(key + ':', value);
    }
    
    // Submit to the same endpoint
    fetch('{{ route("mikrotik.update", $mikrotik->id) }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: formData
    })
    .then(response => {
        console.log('Response status:', response.status);
        console.log('Response headers:', response.headers);
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('Response data:', data);
        if (data.success) {
            Swal.fire({
                icon: 'success',
                title: 'Test Success!',
                text: data.message,
                confirmButtonText: 'OK'
            }).then(() => {
                window.location.reload();
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Test Failed!',
                text: data.message,
                confirmButtonText: 'OK'
            });
        }
    })
    .catch(error => {
        console.error('Test error:', error);
        Swal.fire({
            icon: 'error',
            title: 'Test Error!',
            text: 'Error: ' + error.message,
            confirmButtonText: 'OK'
        });
    });
}

function testRoute() {
    console.log('Testing route...');
    
    fetch('{{ route("mikrotik.test-update", $mikrotik->id) }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => {
        console.log('Route test response status:', response.status);
        console.log('Route test response headers:', response.headers);
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('Route test response data:', data);
        Swal.fire({
            icon: 'success',
            title: 'Route Test Success!',
            text: data.message + ' - Server: ' + data.server_name,
            confirmButtonText: 'OK'
        });
    })
    .catch(error => {
        console.error('Route test error:', error);
        Swal.fire({
            icon: 'error',
            title: 'Route Test Error!',
            text: 'Error: ' + error.message,
            confirmButtonText: 'OK'
        });
    });
}

function debugCSRF() {
    console.log('=== CSRF Debug ===');
    
    // Check meta tag
    const metaToken = document.querySelector('meta[name="csrf-token"]');
    if (metaToken) {
        console.log('Meta CSRF token:', metaToken.getAttribute('content'));
    } else {
        console.log('❌ Meta CSRF token not found');
    }
    
    // Check form token
    const formToken = document.querySelector('input[name="_token"]');
    if (formToken) {
        console.log('Form CSRF token:', formToken.value);
    } else {
        console.log('❌ Form CSRF token not found');
    }
    
    // Check if tokens match
    if (metaToken && formToken) {
        if (metaToken.getAttribute('content') === formToken.value) {
            console.log('✅ CSRF tokens match');
        } else {
            console.log('❌ CSRF tokens do not match');
        }
    }
    
    // Test a simple request
    fetch('{{ route("mikrotik.test-update", $mikrotik->id) }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': metaToken ? metaToken.getAttribute('content') : '',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => {
        console.log('Response status:', response.status);
        console.log('Response headers:', response.headers);
        return response.text();
    })
    .then(text => {
        console.log('Response text:', text);
        try {
            const json = JSON.parse(text);
            console.log('Parsed JSON:', json);
        } catch (e) {
            console.log('❌ Response is not valid JSON');
            console.log('Response starts with:', text.substring(0, 100));
        }
    })
    .catch(error => {
        console.error('Debug request error:', error);
    });
}

function testValidation() {
    console.log('=== Validation Test ===');
    
    // Get form data
    const formData = new FormData();
    formData.append('name', document.getElementById('name').value);
    formData.append('host', document.getElementById('host').value);
    formData.append('port', document.getElementById('port').value);
    formData.append('username', document.getElementById('username').value);
    formData.append('api_version', document.getElementById('api_version').value);
    formData.append('description', document.getElementById('description').value);
    // Handle checkbox values properly
    if (document.getElementById('is_active').checked) {
        formData.append('is_active', 'on');
    }
    if (document.getElementById('is_enabled').checked) {
        formData.append('is_enabled', 'on');
    }
    
    console.log('Form data for validation test:');
    for (let [key, value] of formData.entries()) {
        console.log(key + ':', value);
    }
    
    // Test validation endpoint
    fetch('{{ route("mikrotik.update", $mikrotik->id) }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: formData
    })
    .then(response => {
        console.log('Validation test response status:', response.status);
        console.log('Validation test response headers:', response.headers);
        return response.text();
    })
    .then(text => {
        console.log('Validation test response text:', text);
        try {
            const json = JSON.parse(text);
            console.log('Validation test parsed JSON:', json);
            
            if (json.errors) {
                console.log('❌ Validation errors:');
                Object.keys(json.errors).forEach(field => {
                    console.log(`- ${field}: ${json.errors[field].join(', ')}`);
                });
            } else if (json.success) {
                console.log('✅ Validation passed!');
            }
        } catch (e) {
            console.log('❌ Response is not valid JSON');
            console.log('Response starts with:', text.substring(0, 200));
        }
    })
    .catch(error => {
        console.error('Validation test error:', error);
    });
}
</script>
@endsection