<?php
$user_agent = $_SERVER['HTTP_USER_AGENT'];

// Function to extract browser version from user agent string
function get_browser_version($user_agent, $browser)
{
    $pattern = '/' . $browser . '\/([^\s]+)/';
    if (preg_match($pattern, $user_agent, $matches)) {
        return $matches[1];
    }
    return 'Unknown';
}

?>

<div class="container-zz mx-auto">
    <div style="padding: 10px;">
        <!-- <h2 style="font-size: 25px;">Your User Agent is:</h2> -->
        <p style="font-size: 20px;">You are Using</p>
        
        <?php
        // Additional description text based on common user agent patterns
        if (strpos($user_agent, 'Firefox') !== false) {
            echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/firefox.svg' alt='' /> <p> Mozilla Firefox " . get_browser_version($user_agent, 'Firefox') . ".</p></div>";
        } elseif (strpos($user_agent, 'Chrome') !== false) {
            echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/chrome.svg' alt='' /> <p> Google Chrome " . get_browser_version($user_agent, 'Chrome') . ".</p></div>";
        } elseif (strpos($user_agent, 'Safari') !== false) {
            echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/safari.svg' alt='' /> <p> Apple Safari " . get_browser_version($user_agent, 'Version') . ".</p></div>";
        } elseif (strpos($user_agent, 'Opera') !== false) {
            echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/opera.svg' alt='' /> <p> Opera " . get_browser_version($user_agent, 'OPR') . ".</p></div>";
        } elseif (strpos($user_agent, 'Edge') !== false) {
            echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/edge.svg' alt='' /> <p> Microsoft Edge " . get_browser_version($user_agent, 'Edge') . ".</p></div>";
        } elseif (strpos($user_agent, 'Trident') !== false) {
            echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/internet-exp.svg' alt='' /> <p> Internet Explorer " . get_browser_version($user_agent, 'rv') . ".</p></div>";
        } else {
            echo "<div style='display:flex; flex-direction: row; align-items:center; font-size: 25px;'><img src='/assets/no-br.svg' alt='' /> <p>We couldn't determine your browser from the user agent string.</p></div>";
        }
        ?>
    </div>
</div>

<style>
    .container-zz{width:100%}@media (min-width: 640px){.container-zz{max-width:640px}}@media (min-width: 768px){.container-zz{max-width:768px}}@media (min-width: 1024px){.container-zz{max-width:1024px}}@media (min-width: 1280px){.container-zz{max-width:1280px}}@media (min-width: 1536px){.container-zz{max-width:1536px}}
    .mx-auto{margin-left:auto;margin-right:auto}
    .my-20{margin-top:5rem;margin-bottom:5rem}
</style>
