161 lines
6.5 KiB
PHP
161 lines
6.5 KiB
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">IP Geolocation Lookup</h5>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<form id="ipLookupForm">
|
||
|
|
@csrf
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="ip" class="form-label">IP Address</label>
|
||
|
|
<div class="input-group">
|
||
|
|
<input type="text" class="form-control" id="ip" name="ip" required placeholder="e.g., 8.8.8.8">
|
||
|
|
<button type="submit" class="btn btn-primary">
|
||
|
|
<i class="bi bi-search me-2"></i>Lookup
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div id="results" class="mt-4" style="display: none;">
|
||
|
|
<h6 class="mb-3">Location Information</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">Looking up IP address...</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@push('scripts')
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const form = document.getElementById('ipLookupForm');
|
||
|
|
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 {
|
||
|
|
console.log('Submitting form with IP:', form.ip.value);
|
||
|
|
|
||
|
|
const response = await fetch('{{ route("ip-geolocation.lookup") }}', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json',
|
||
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
|
||
|
|
},
|
||
|
|
body: JSON.stringify({
|
||
|
|
ip: form.ip.value
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('Response status:', response.status);
|
||
|
|
const data = await response.json();
|
||
|
|
console.log('Response data:', data);
|
||
|
|
|
||
|
|
// 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>Location information found
|
||
|
|
</div>
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table table-sm">
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<th>Country:</th>
|
||
|
|
<td>${data.data.country}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>City:</th>
|
||
|
|
<td>${data.data.city}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>Region:</th>
|
||
|
|
<td>${data.data.region}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>Timezone:</th>
|
||
|
|
<td>${data.data.timezone}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>ISP:</th>
|
||
|
|
<td>${data.data.isp}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>Organization:</th>
|
||
|
|
<td>${data.data.org}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>AS:</th>
|
||
|
|
<td>${data.data.as}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>Coordinates:</th>
|
||
|
|
<td>${data.data.latitude}, ${data.data.longitude}</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th>ZIP Code:</th>
|
||
|
|
<td>${data.data.zip}</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3">
|
||
|
|
<a href="https://www.google.com/maps?q=${data.data.latitude},${data.data.longitude}"
|
||
|
|
target="_blank"
|
||
|
|
class="btn btn-outline-primary btn-sm">
|
||
|
|
<i class="bi bi-geo-alt me-2"></i>View on Google Maps
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
} else {
|
||
|
|
resultContent.innerHTML = `
|
||
|
|
<div class="alert alert-danger">
|
||
|
|
<i class="bi bi-x-circle-fill me-2"></i>${data.message}
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error:', 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 looking up the IP address: ${error.message}
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
@endpush
|
||
|
|
@endsection
|