@props(['target' => null])

<div class="space-y-6">
    <!-- Repository and Branch -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <label for="repository" class="block text-sm font-medium text-gray-700">{{ __('Repository (owner/repo)') }}</label>
            <div class="mt-1 relative rounded-md shadow-sm">
                <input id="repository" 
                       name="repository" 
                       type="text" 
                       class="block w-full rounded-md shadow-sm border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                       value="{{ old('repository', $target->repository ?? '') }}" 
                       required 
                       autofocus 
                       placeholder="owner/repository" />
            </div>
            @error('repository')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label for="branch" class="block text-sm font-medium text-gray-700">{{ __('Branch') }}</label>
            <div class="mt-1 flex rounded-md shadow-sm">
                <input id="branch" 
                       name="branch" 
                       type="text" 
                       class="block w-full rounded-l-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                       value="{{ old('branch', $target->branch ?? 'main') }}" 
                       required 
                       placeholder="main" />
                <button type="button" 
                        class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 text-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                        id="fetch-branches-btn">
                    Fetch Branches
                </button>
            </div>
            <div id="branches-dropdown" class="hidden mt-1 w-full rounded-md bg-white shadow-lg max-h-60 overflow-auto">
                <!-- Branches will be populated here -->
            </div>
            @error('branch')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
    </div>

    <!-- Server Configuration -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div>
            <label for="server_host" class="block text-sm font-medium text-gray-700">{{ __('Server Host') }}</label>
            <div class="mt-1">
                <input id="server_host" 
                       name="server_host" 
                       type="text" 
                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                       value="{{ old('server_host', $target->server_host ?? '') }}" 
                       required />
            </div>
            @error('server_host')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label for="server_port" class="block text-sm font-medium text-gray-700">{{ __('Port') }}</label>
            <div class="mt-1">
                <input id="server_port" 
                       name="server_port" 
                       type="number" 
                       min="1" 
                       max="65535" 
                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                       value="{{ old('server_port', $target->server_port ?? 22) }}" 
                       required />
            </div>
            @error('server_port')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label for="server_user" class="block text-sm font-medium text-gray-700">{{ __('SSH User') }}</label>
            <div class="mt-1">
                <input id="server_user" 
                       name="server_user" 
                       type="text" 
                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                       value="{{ old('server_user', $target->server_user ?? '') }}" 
                       required />
            </div>
            @error('server_user')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <div>
            <label for="deploy_path" class="block text-sm font-medium text-gray-700">{{ __('Deployment Path') }}</label>
            <div class="mt-1">
                <input id="deploy_path" 
                       name="deploy_path" 
                       type="text" 
                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                       value="{{ old('deploy_path', $target->deploy_path ?? '') }}" 
                       required 
                       placeholder="/var/www/your-project" />
            </div>
            @error('deploy_path')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>
    </div>

    <!-- Authentication -->
    <div class="bg-gray-50 p-4 rounded-lg">
        <h3 class="text-sm font-medium text-gray-700 mb-3">Authentication Settings</h3>
        
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Authentication Method</label>
                <div class="flex space-x-4">
                    <div class="flex items-center">
                        <input id="auth_type_password" name="auth_type" type="radio" value="password" 
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
                               {{ old('auth_type', $target->auth_type ?? 'password') === 'password' ? 'checked' : '' }}>
                        <label for="auth_type_password" class="ml-2 block text-sm text-gray-700">Password</label>
                    </div>
                    <div class="flex items-center">
                        <input id="auth_type_key" name="auth_type" type="radio" value="key" 
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
                               {{ old('auth_type', $target->auth_type ?? '') === 'key' ? 'checked' : '' }}>
                        <label for="auth_type_key" class="ml-2 block text-sm text-gray-700">SSH Key</label>
                    </div>
                </div>
                @error('auth_type')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Password Authentication -->
            <div id="password_auth" class="space-y-4 {{ old('auth_type', $target->auth_type ?? 'password') === 'password' ? '' : 'hidden' }}">
                <div>
                    <label for="server_password" class="block text-sm font-medium text-gray-700">SSH Password</label>
                    <div class="mt-1 relative">
                        <input id="server_password" 
                               name="server_password" 
                               type="password" 
                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                               value="" 
                               autocomplete="new-password"
                               placeholder="Leave empty to keep current password">
                    </div>
                    @error('server_password')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- SSH Key Authentication -->
            <div id="key_auth" class="space-y-4 {{ old('auth_type', $target->auth_type ?? '') === 'key' ? '' : 'hidden' }}">
                <div>
                    <label for="private_key" class="block text-sm font-medium text-gray-700">Private Key</label>
                    <div class="mt-1">
                        <textarea id="private_key" 
                                 name="private_key" 
                                 rows="6" 
                                 class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm font-mono text-xs"
                                 placeholder="-----BEGIN RSA PRIVATE KEY-----
MIIEowIBAAKCAQEA...
-----END RSA PRIVATE KEY-----">{{ old('private_key', $target->private_key ?? '') }}</textarea>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">Paste your private SSH key (RSA format)</p>
                    @error('private_key')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label for="private_key_password" class="block text-sm font-medium text-gray-700">Key Passphrase (optional)</label>
                    <div class="mt-1">
                        <input id="private_key_password" 
                               name="private_key_password" 
                               type="password" 
                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                               value="" 
                               autocomplete="new-password"
                               placeholder="Leave empty if key has no passphrase">
                    </div>
                    @error('private_key_password')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            
            <!-- Test Connection Button -->
            <div class="mt-4">
                <button type="button" 
                        id="test-connection-btn" 
                        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Test Connection
                </button>
                <div id="connection-result" class="mt-2 text-sm"></div>
            </div>
        </div>
    </div>

    <!-- Post-Deployment Commands -->
    <div>
        <label for="post_deploy_commands" class="block text-sm font-medium text-gray-700">{{ __('Post-Deployment Commands') }}</label>
        <div class="mt-1">
            <textarea id="post_deploy_commands" 
                     name="post_deploy_commands" 
                     rows="3" 
                     class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm font-mono text-xs"
                     placeholder="composer install
php artisan migrate --force
php artisan optimize:clear">{{ old('post_deploy_commands', $target->post_deploy_commands ? implode("\n", json_decode($target->post_deploy_commands, true)) : '') }}</textarea>
        </div>
        <p class="mt-1 text-sm text-gray-500">
            One command per line. These commands will run after deployment.
        </p>
        @error('post_deploy_commands')
            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    console.log('Document ready - initializing...'); // Debug log
    
    // Utility functions for error handling
    function showError(message, element = null) {
        console.log('Showing error:', message); // Debug log
        // Remove any existing error messages
        clearMessages();
        
        const errorDiv = $('<div>', {
            class: 'mt-2 p-2 text-sm text-red-700 bg-red-100 rounded-md error-message',
            html: `
                <div class="flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                    </svg>
                    ${message}
                </div>
            `
        });
        
        if (element && element.length) {
            errorDiv.insertAfter(element);
        } else {
            const form = $('form').length ? $('form') : $('.space-y-6');
            errorDiv.prependTo(form);
        }
        
        // Scroll to the error message
        errorDiv[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
    
    function showSuccess(message, element = null) {
        console.log('Showing success:', message); // Debug log
        clearMessages();
        
        const successDiv = $('<div>', {
            class: 'mt-2 p-2 text-sm text-green-700 bg-green-100 rounded-md success-message',
            html: `
                <div class="flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                    </svg>
                    ${message}
                </div>
            `
        });
        
        if (element && element.length) {
            successDiv.insertAfter(element);
        } else {
            const form = $('form').length ? $('form') : $('.space-y-6');
            successDiv.prependTo(form);
        }
        
        // Auto-hide after 5 seconds
        setTimeout(() => successDiv.remove(), 5000);
    }
    
    function clearMessages() {
        $('.error-message, .success-message').remove();
    }
    
    // Fetch branches function
    function fetchBranches() {
        console.log('Fetch branches clicked'); // Debug log
        
        let repo = $('#repository').val().trim();
        const $branchInput = $('#branch');
        const $branchesDropdown = $('#branches-dropdown');
        const $fetchBtn = $('#fetch-branches-btn');
        
        console.log('Repository input:', repo); // Debug log
        
        if (!repo) {
            showError('Please enter a repository name');
            return;
        }
        
        // If no slash, assume it's just the repo name and use the authenticated user's name
        if (!repo.includes('/')) {
            // Try to get username from the authenticated user's email or other source
            const username = $('meta[name="user-name"]').attr('content') || 'default-owner';
            repo = `${username}/${repo}`;
            console.log('Auto-formatting repository to:', repo);
        }
        
        // Show loading state
        const originalBtnText = $fetchBtn.html();
        $fetchBtn.prop('disabled', true).html(`
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-gray-500 inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Fetching...
        `);
        
        // Clear previous branches and errors
        $branchesDropdown.empty().hide();
        clearMessages();
        
        console.log('Making AJAX request for branches...'); // Debug log
        
        // Make AJAX request using jQuery with form data for proper CSRF handling
        const formData = new FormData();
        formData.append('repository', repo);
        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
        
        $.ajax({
            url: '/branches',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                console.log('Branches response:', response); // Debug log
                
                if (response.branches && response.branches.length > 0) {
                    // Clear previous branches
                    $branchesDropdown.empty();
                    
                    // Add branches to dropdown
                    response.branches.forEach(function(branch) {
                        const branchEl = $('<div>', {
                            class: `px-4 py-2 text-sm cursor-pointer hover:bg-gray-100 ${branch.is_default ? 'bg-blue-50 font-medium' : ''}`,
                            text: branch.name,
                            click: function() {
                                $branchInput.val(branch.name);
                                $branchesDropdown.hide();
                            }
                        });
                        $branchesDropdown.append(branchEl);
                    });
                    
                    // Show dropdown
                    $branchesDropdown.show();
                    
                    // Auto-select the default branch if available
                    if (response.default_branch) {
                        $branchInput.val(response.default_branch);
                    }
                } else {
                    showError('No branches found for this repository');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', xhr, status, error); // Debug log
                let errorMessage = 'Failed to fetch branches';
                
                if (xhr.responseJSON) {
                    if (xhr.responseJSON.error === 'GitHub token not found') {
                        // Special handling for missing GitHub token
                        errorMessage = `
                            <div class="space-y-2">
                                <p>${xhr.responseJSON.message}</p>
                                <a href="${xhr.responseJSON.action?.url || '#'}" 
                                   class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                    ${xhr.responseJSON.action?.text || 'Connect GitHub Account'}
                                </a>
                            </div>
                        `;
                    } else {
                        errorMessage = xhr.responseJSON.error || 'An error occurred';
                        if (xhr.responseJSON.message) {
                            errorMessage += `: ${xhr.responseJSON.message}`;
                        }
                    }
                } else if (xhr.status === 401) {
                    errorMessage = 'Authentication required. Please log in again.';
                } else if (xhr.status === 404) {
                    errorMessage = 'Repository not found or access denied. Check the repository name and your permissions.';
                } else if (xhr.status === 500) {
                    errorMessage = 'Server error. Please check your server logs.';
                } else if (xhr.status === 0) {
                    errorMessage = 'Network error. Please check your internet connection.';
                }
                
                showError(errorMessage);
            },
            complete: function() {
                // Restore button state
                $fetchBtn.prop('disabled', false).html(originalBtnText);
                console.log('Fetch branches request completed'); // Debug log
            }
        });
    }
    
    // Toggle between password and key authentication
    function toggleAuthFields() {
        console.log('Toggling auth fields'); // Debug log
        const authType = $('input[name="auth_type"]:checked').val();
        console.log('Auth type changed to:', authType); // Debug log
        
        if (authType === 'key') {
            $('#key_auth').removeClass('hidden');
            $('#password_auth').addClass('hidden');
            // Clear password field when switching to key auth
            $('#server_password').val('');
        } else {
            $('#password_auth').removeClass('hidden');
            $('#key_auth').addClass('hidden');
            // Clear key fields when switching to password auth
            $('#private_key').val('');
            $('#private_key_password').val('');
        }
    }
    
    // Test SSH connection
    function testConnection() {
        console.log('Test connection clicked'); // Debug log
        
        const $btn = $('#test-connection-btn');
        const $resultDiv = $('#connection-result');
        
        // Get form values
        const authType = $('input[name="auth_type"]:checked').val();
        const formData = {
            server_host: $('#server_host').val().trim(),
            server_port: $('#server_port').val().trim() || '22',
            server_user: $('#server_user').val().trim(),
            auth_type: authType,
            deploy_path: $('#deploy_path').val().trim()
        };
        
        // Add authentication data based on type
        if (authType === 'key') {
            formData.private_key = $('#private_key').val().trim();
            if (!formData.private_key) {
                showError('Please provide a private SSH key');
                return;
            }
        } else {
            formData.server_password = $('#server_password').val();
        }
        
        console.log('Form data:', { ...formData, private_key: authType === 'key' ? '***' : 'N/A' }); // Debug log (don't log actual key)
        
        // Validate required fields
        if (!formData.server_host || !formData.server_user || !formData.deploy_path) {
            showError('Please fill in all required fields (host, username, deployment path)');
            return;
        }
        
        // Show loading state
        const originalBtnText = $btn.html();
        $btn.prop('disabled', true).html(`
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Testing...
        `);
        
        // Clear previous results and errors
        $resultDiv.empty().removeClass('hidden');
        clearMessages();
        
        console.log('Making AJAX request for connection test...'); // Debug log
        
        // Make AJAX request
        $.ajax({
            url: '/deploy-targets/test-connection',
            method: 'POST',
            data: JSON.stringify(formData),
            contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'Accept': 'application/json'
            },
            success: function(data) {
                console.log('Connection test response:', data); // Debug log
                
                let html = `
                    <div class="flex items-start">
                        <svg class="h-5 w-5 text-green-500 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                        <div>
                            <p class="font-medium">Connection successful!</p>
                `;
                
                if (data.server_info) {
                    html += `
                        <div class="mt-1 text-xs space-y-1">
                            <p>• Connected as: <span class="font-mono">${data.server_info.user || 'N/A'}</span></p>
                            <p>• Current directory: <span class="font-mono">${data.server_info.current_dir || 'N/A'}</span></p>
                            <p>• Git version: <span class="font-mono">${data.server_info.git_version || 'N/A'}</span></p>
                            <p>• Deployment path: <span class="font-mono">${data.server_info.deploy_path || 'N/A'}</span> 
                                <span class="ml-1 px-1.5 py-0.5 text-xs rounded ${data.server_info.path_exists ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}">
                                    ${data.server_info.path_exists ? 'Exists' : 'Does not exist'}
                                </span>
                            </p>
                        </div>
                    `;
                } else {
                    html += `<p class="text-sm mt-1">${data.message || 'Successfully connected to the server.'}</p>`;
                }
                
                html += `</div></div>`;
                
                $resultDiv.removeClass('bg-red-100 text-red-800')
                    .addClass('bg-green-100 text-green-800 p-3 rounded-md')
                    .html(html);
            },
            error: function(xhr, status, error) {
                console.error('Connection test error:', xhr, status, error); // Debug log
                
                let errorMessage = 'Could not connect to the server. Please check your credentials and try again.';
                
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.status === 404) {
                    errorMessage = 'API endpoint not found. Please check your routes.';
                } else if (xhr.status === 500) {
                    errorMessage = 'Server error. Please check your server logs.';
                } else if (xhr.status === 0) {
                    errorMessage = 'Network error. Please check your internet connection.';
                }
                
                const errorHtml = `
                    <div class="flex items-start">
                        <svg class="h-5 w-5 text-red-500 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                        </svg>
                        <div>
                            <p class="font-medium">Connection failed</p>
                            <p class="text-sm mt-1">${errorMessage}</p>
                        </div>
                    </div>
                `;
                
                $resultDiv.removeClass('bg-green-100 text-green-800')
                    .addClass('bg-red-100 text-red-800 p-3 rounded-md')
                    .html(errorHtml);
            },
            complete: function() {
                // Restore button state
                $btn.prop('disabled', false).html(originalBtnText);
                console.log('Connection test request completed'); // Debug log
            }
        });
    }
    
    // Initialize any required components
    $(document).ready(function() {
        // Initialize auth fields visibility
        toggleAuthFields();
        
        // Initialize tooltips
        $('[data-tooltip]').tooltip();
        
        // Initialize test connection button
        $('#test-connection-btn').on('click', function(e) {
            e.preventDefault();
            testConnection();
        });
        
        console.log('Initialization complete');
    });
    
    // Event handlers
    $('#fetch-branches-btn').on('click', function(e) {
        e.preventDefault();
        fetchBranches();
    });
    
    // Test connection button
    $('#test-connection-btn').on('click', function(e) {
        e.preventDefault();
        testConnection();
    });
    
    // Auto-fetch branches when repository changes
    $('#repository').on('change', function() {
        if ($(this).val().trim()) {
            fetchBranches();
        }
    });
    
    // Form validation
    $('form').on('submit', function(e) {
        const repo = $('#repository').val().trim();
        if (!repo) {
            e.preventDefault();
            showError('Please enter a repository name in the format owner/repo');
            return false;
        }
        
        if (!/^[^\/]+\/[^\/]+$/.test(repo)) {
            e.preventDefault();
            showError('Please enter a valid repository name in the format owner/repo');
            return false;
        }
        
        return true;
    });
    
    // Close dropdown when clicking outside
    $(document).on('click', function(e) {
        const $target = $(e.target);
        const $dropdown = $('#branches-dropdown');
        const $branchInput = $('#branch');
        const $fetchBtn = $('#fetch-branches-btn');
        
        if (!$target.is($branchInput) && !$target.is($fetchBtn) && !$dropdown.has($target).length) {
            $dropdown.hide();
        }
    });
    
    console.log('Initialization complete'); // Debug log
});
</script>
@endpush