<?php
// Get IP Address
$ip = $_SERVER['REMOTE_ADDR'] ?? 'Unknown';

// Use API to fetch location info
$geoData = @json_decode(file_get_contents("https://ipapi.co/{$ip}/json/"), true);

$country = $geoData['country_name'] ?? 'Unknown';
$city = $geoData['city'] ?? 'Unknown';
$region = $geoData['region'] ?? 'Unknown';
$latitude = $geoData['latitude'] ?? 23.8103;
$longitude = $geoData['longitude'] ?? 90.4125;
$timezone = $geoData['timezone'] ?? 'Asia/Dhaka';

// Get local time
date_default_timezone_set($timezone);
$localTime = date("Y-m-d H:i:s");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Info Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
    body {
        background: radial-gradient(circle at 10% 20%, #0f172a 0%, #1e293b 90%);
        color: #f1f5f9;
        overflow-x: hidden;
    }
    .glass {
        backdrop-filter: blur(15px);
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 1rem;
        box-shadow: 0 8px 32px rgba(0,0,0,0.4);
        transition: transform 0.2s ease-in-out;
    }
    .glass:hover {
        transform: translateY(-4px);
    }
    /* Mouse shine effect */
    .shine {
        position: relative;
        overflow: hidden;
    }
    .shine::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at var(--x) var(--y), rgba(255,255,255,0.25), transparent 40%);
        pointer-events: none;
        transition: background 0.1s;
    }
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-6">

<div id="info-card" class="glass shine p-8 max-w-lg w-full text-center relative">
    <h1 class="text-3xl font-bold mb-4">🌍 User Information</h1>

    <div class="text-lg mb-2">💻 <strong>IP Address:</strong> <?= htmlspecialchars($ip) ?></div>
    <div class="text-lg mb-2">📍 <strong>Country:</strong> <?= htmlspecialchars($country) ?></div>
    <div class="text-lg mb-2">🏙️ <strong>City:</strong> <?= htmlspecialchars($city) ?>, <?= htmlspecialchars($region) ?></div>
    <div class="text-lg mb-2">🕒 <strong>Local Time:</strong> <?= htmlspecialchars($localTime) ?></div>
    
    <div id="map" class="mt-6 h-64 w-full rounded-xl shadow-lg"></div>
</div>

<script>
// Interactive glow effect
document.addEventListener('mousemove', e => {
    const card = document.getElementById('info-card');
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    card.style.setProperty('--x', `${x}px`);
    card.style.setProperty('--y', `${y}px`);
});

// Map
const map = L.map('map').setView([<?= $latitude ?>, <?= $longitude ?>], 8);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);
L.marker([<?= $latitude ?>, <?= $longitude ?>]).addTo(map)
    .bindPopup("<?= htmlspecialchars($city . ', ' . $country) ?>")
    .openPopup();
</script>

</body>
</html>