<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>

<div id="header_top">
    <table class="header" style="margin:0 auto">
        <tr class="header">
            <td class="header" style="width:5;">
                <table class="header">
                    <tr class="header">
                        <td class="header">
                            <img src="{{ $dpath }}planets/small/s_{{ $image }}.jpg" height="50" width="50" alt="Planeta actual">
                        </td>
                        <td class="header">
                            <h1 class="sr-only">Planeta actual</h1>
                            <table class="header">
                                <select size="1" aria-label="Seleccionar planeta" onchange="location = this.options[this.selectedIndex].value;">
                                {!! $planetlist !!}
                                </select>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
            <td class="header">
                <table class="header" id="resources" cellspacing="0" cellpadding="0" padding-right="30">
                    <tr class="header" style="text-align:center">
                        <td width="85" class="header">
                            <img src="{{ $dpath }}resources/metal.gif" width="42" height="22" alt="Metal">
                        </td>
                        <td width="85" class="header">
                            <img src="{{ $dpath }}resources/crystal.gif" width="42" height="22" alt="Cristal">
                        </td>
                        <td width="85" class="header">
                            <img src="{{ $dpath }}resources/deuterium.gif" width="42" height="22" alt="Deuterio">
                        </td>
                        <td width="85" class="header">
                            <img src="{{ $dpath }}resources/darkmatter.jpg" width="42" height="22" title="Dark Matter" alt="Materia Oscura">
                        </td>
                        <td width="85" class="header">
                            <img src="{{ $dpath }}resources/energy.gif" width="42" height="22" alt="Energía">
                        </td>
                    </tr>

                    <tr class="header" style="text-align:center">
                        <td class="header" width="90"><span id="current_metal">{!! $re_metal !!}</span></td>
                        <td class="header" width="90"><span id="current_crystal">{!! $re_crystal !!}</span></td>
                        <td class="header" width="90"><span id="current_deuterium">{!! $re_deuterium !!}</span></td>
                        <td class="header" width="90">{!! $re_darkmatter !!}</td>
                        <td class="header" width="90">{!! $re_energy !!}</td>
                    </tr>
                </table>
            </td>
            <td class="header">
                <h1 class="sr-only">Contratar Oficiales</h1>
                <table class="header">
                    <tr class="header">
                        <td style="margin: 0 auto;" width="35px" class='header'>
                            <a href="game.php?page=officier">
                                <img style="border:0;" src="{{ $dpath }}premium/commander_ikon{{ $img_premium_officier_commander }}.gif" width="32" height="32" alt="{{ $of_hire_commander }}" onmouseover="return overlib('<table width=390px><tr><td class=c>{{ $of_hire_commander }}</td></tr><tr><th style=text-align:left>{{ $add_premium_officier_commander }}</th></tr></table>');" onmouseout="return nd();">
                            </a>
                        </td>
                        <td style="margin: 0 auto;" width="35" class="header">
                            <a href="game.php?page=officier">
                                <img style="border:0;" src="{{ $dpath }}premium/admiral_ikon{{ $img_premium_officier_admiral }}.gif" width="32" height="32" alt="{{ $of_hire_admiral }}" onmouseover="return overlib('<table width=390px><tr><td class=c>{{ $of_hire_admiral }}</td></tr><tr><th style=text-align:left>{{ $add_premium_officier_admiral }}</th></tr></table>');" onmouseout="return nd();">
                            </a>
                        </td>
                        <td style="margin: 0 auto;" width="35" class="header">
                            <a href="game.php?page=officier">
                                <img style="border:0;" src="{{ $dpath }}premium/ingenieur_ikon{{ $img_premium_officier_engineer }}.gif" width="32" height="32" alt="{{ $of_hire_engineer }}" onmouseover="return overlib('<table width=310px><tr><td class=c>{{ $of_hire_engineer }}</td></tr><tr><th style=text-align:left>{{ $add_premium_officier_engineer }}</th></tr></table>');" onmouseout="return nd();">
                            </a>
                        </td>
                        <td style="margin: 0 auto;" width="35" class="header">
                            <a href="game.php?page=officier">
                                <img style="border:0;" src="{{ $dpath }}premium/geologe_ikon{{ $img_premium_officier_geologist }}.gif" width="32" height="32" alt="{{ $of_hire_geologist }}" onmouseover="return overlib('<table width=200px><tr><td class=c>{{ $of_hire_geologist }}</td></tr><tr><th style=text-align:left>{{ $add_premium_officier_geologist }}</th></tr></table>');" onmouseout="return nd();">
                            </a>
                        </td>
                        <td style="margin: 0 auto;" width="35" class="header">
                            <a href="game.php?page=officier">
                                <img style="border:0;" src="{{ $dpath }}premium/technokrat_ikon{{ $img_premium_officier_technocrat }}.gif" width="32" height="32" alt="{{ $of_hire_technocrat }}" onmouseover="return overlib('<table width=275px><tr><td class=c>{{ $of_hire_technocrat }}</td></tr><tr><th style=text-align:left>{{ $add_premium_officier_technocrat }}</th></tr></table>');" onmouseout="return nd();">
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    {!! $show_umod_notice !!}
</div>

<script type="text/javascript">
(function() {
    var resourceTicker = {
        lastUpdate: Date.now(),
        timeDiff: {{ time() }} - (Date.now() / 1000),
        serverOffset: {{ date('Z') }},
        metal: {
            current: {{ $raw_metal }},
            production: {{ $metal_per_second }},
            max: {{ $max_metal }},
            elementId: 'current_metal'
        },
        crystal: {
            current: {{ $raw_crystal }},
            production: {{ $crystal_per_second }},
            max: {{ $max_crystal }},
            elementId: 'current_crystal'
        },
        deuterium: {
            current: {{ $raw_deuterium }},
            production: {{ $deuterium_per_second }},
            max: {{ $max_deuterium }},
            elementId: 'current_deuterium'
        }
    };

    function formatNumber(number) {
        return Math.floor(number).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }

    function formatTime(timestamp) {
        var date = new Date(timestamp * 1000);
        var d = ("0" + date.getUTCDate()).slice(-2);
        var m = ("0" + (date.getUTCMonth() + 1)).slice(-2);
        var y = date.getUTCFullYear();
        var h = ("0" + date.getUTCHours()).slice(-2);
        var min = ("0" + date.getUTCMinutes()).slice(-2);
        var s = ("0" + date.getUTCSeconds()).slice(-2);
        return d + "." + m + "." + y + " " + h + ":" + min + ":" + s;
    }

    function tick() {
        var now = Date.now();
        var delta = (now - resourceTicker.lastUpdate) / 1000;
        resourceTicker.lastUpdate = now;

        // Update resources
        ['metal', 'crystal', 'deuterium'].forEach(function(res) {
            var data = resourceTicker[res];
            if (data.current < data.max) {
                data.current += data.production * delta;
                if (data.current > data.max) {
                    data.current = data.max;
                }
            }
            var el = document.getElementById(data.elementId);
            if (el) {
                el.innerText = formatNumber(data.current);
                if (data.current >= data.max) {
                    el.style.color = '#ff0000';
                }
            }
        });

        // Update server clock if it exists on page
        var clockEl = document.getElementById('server-time');
        if (clockEl) {
            var currentServerTime = (now / 1000) + resourceTicker.timeDiff;
            var adjustedTime = currentServerTime + resourceTicker.serverOffset;
            clockEl.innerText = formatTime(adjustedTime);
        }
        
        window.setTimeout(tick, 1000);
    }

    // Start the ticker
    window.setTimeout(tick, 1000);
})();
</script>
