@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