@extends('layouts.app')

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

@section('page-title', 'Add New 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-plus-circle me-2"></i>
                                Add New MikroTik Server
                            </h3>
                            <p class="mb-0 opacity-75">Configure and add a new MikroTik router to your network</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="addServerForm" method="POST" action="{{ route('mikrotik.store') }}">
                        @csrf
                        
                        <!-- 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') == $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') == $branch->id || (isset($preSelectedBranchId) && $preSelectedBranchId == $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') }}" 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') }}" 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', 8728) }}" 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') }}" 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 <span class="text-danger">*</span>
                                </label>
                                <small class="form-text text-muted">RouterOS admin 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" 
                                           required placeholder="Enter 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') == '1.0' ? 'selected' : '' }}>1.0 (Default)</option>
                                    <option value="1.1" {{ old('api_version') == '1.1' ? 'selected' : '' }}>1.1</option>
                                    <option value="1.2" {{ old('api_version') == '1.2' ? 'selected' : '' }}>1.2</option>
                                    <option value="1.3" {{ old('api_version') == '1.3' ? 'selected' : '' }}>1.3</option>
                                </select>
                            </div>
                        </div>
                        
                        <!-- Active 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') ? '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') ? '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') }}</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') }}</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>

                        <!-- 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>Save Server
                                    </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('addServerForm').addEventListener('submit', function(e) {
        e.preventDefault();
        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);
    formData.append('password', document.getElementById('password').value);
    
    // 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('addServerForm');
    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>Saving...';
    submitBtn.disabled = true;
    
    // Get form data
    const formData = new FormData(form);
    
    // Debug: Log form data
    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')
        },
        body: formData
    })
    .then(response => 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);
                
                // Also show in console for debugging
                console.log('Validation errors:', data.errors);
                
                // Show summary alert
                let errorMessages = [];
                Object.keys(data.errors).forEach(field => {
                    errorMessages.push(`${field}: ${data.errors[field][0]}`);
                });
                
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Failed!',
                    html: errorMessages.join('<br>'),
                    confirmButtonText: 'OK'
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: data.message,
                    confirmButtonText: 'OK'
                });
            }
        }
    })
    .catch(error => {
        console.error('Error:', error);
        Swal.fire({
            icon: 'error',
            title: 'Error!',
            text: 'An unexpected error occurred. Please try again.',
            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;
}
</script>
@endsection