webproxyscan/resources/views/proxy-checker/index.blade.php

@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Proxy Checker</h5>
                </div>
                <div class="card-body">
                    <form id="proxyCheckForm">
                        <div class="mb-3">
                            <label for="ip" class="form-label">Proxy IP Address</label>
                            <input type="text" class="form-control" id="ip" name="ip" required placeholder="e.g., 192.168.1.1">
                        </div>

                        <div class="mb-3">
                            <label for="port" class="form-label">Port</label>
                            <input type="number" class="form-control" id="port" name="port" required placeholder="e.g., 8080" min="1" max="65535">
                        </div>

                        <div class="mb-3">
                            <label for="type" class="form-label">Proxy Type</label>
                            <select class="form-select" id="type" name="type" required>
                                <option value="http">HTTP</option>
                                <option value="https">HTTPS</option>
                                <option value="socks4">SOCKS4</option>
                                <option value="socks5">SOCKS5</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="test_url" class="form-label">Test URL</label>
                            <input type="url" class="form-control" id="test_url" name="test_url" required placeholder="e.g., https://example.com" value="https://example.com">
                        </div>

                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-search me-2"></i>Check Proxy
                        </button>
                    </form>

                    <div id="results" class="mt-4" style="display: none;">
                        <h6 class="mb-3">Test Results</h6>
                        <div class="card">
                            <div class="card-body">
                                <div id="resultContent"></div>
                            </div>
                        </div>
                    </div>

                    <div id="loading" class="mt-4 text-center" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2">Checking proxy...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('proxyCheckForm');
    const results = document.getElementById('results');
    const resultContent = document.getElementById('resultContent');
    const loading = document.getElementById('loading');

    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        // Show loading, hide results
        loading.style.display = 'block';
        results.style.display = 'none';
        
        try {
            const response = await fetch('{{ route("proxy-checker.check") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    ip: form.ip.value,
                    port: form.port.value,
                    type: form.type.value,
                    test_url: form.test_url.value
                })
            });

            const data = await response.json();
            
            // Hide loading
            loading.style.display = 'none';
            
            // Show results
            results.style.display = 'block';
            
            if (data.success) {
                resultContent.innerHTML = `
                    <div class="alert alert-success">
                        <i class="bi bi-check-circle-fill me-2"></i>${data.message}
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <tbody>
                                <tr>
                                    <th>Status Code:</th>
                                    <td>${data.data.status_code}</td>
                                </tr>
                                <tr>
                                    <th>Response Time:</th>
                                    <td>${data.data.speed} ms</td>
                                </tr>
                                <tr>
                                    <th>Content Type:</th>
                                    <td>${data.data.content_type}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                `;
            } else {
                resultContent.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="bi bi-x-circle-fill me-2"></i>${data.message}
                    </div>
                `;
            }
        } catch (error) {
            loading.style.display = 'none';
            results.style.display = 'block';
            resultContent.innerHTML = `
                <div class="alert alert-danger">
                    <i class="bi bi-x-circle-fill me-2"></i>An error occurred while checking the proxy.
                </div>
            `;
        }
    });
});
</script>
@endpush
@endsection