<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ __('mall/main.title') }}</title>
    <link href="{{ asset('assets/mall/css/style.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/mall/css/start.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/mall/css/options.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/mall/css/discount.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/mall/css/tiptip.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/mall/css/fancybox.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/mall/css/jScrollPane.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/mall/css/promoted.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/mall/css/pending.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/mall/css/usermenu.css') }}" rel="stylesheet" type="text/css" />
    <!--[if IE]>
    <style type="text/css">@import url(https://gf1.geo.gfsrv.net/cdn9a/6ea1bf4927ebc189a9ad0a0e2d7140.css);</style>
    <style type="text/css">@import url(https://gf1.geo.gfsrv.net/cdn3e/8a0cdb2c5a2e9c5af58e1dcdee50e7.css);</style>
    <![endif]-->

    <style type="text/css">
        /* Language Switcher Styles - Modern Grid Design */
        #mallLanguageSwitcher {
            position: fixed;
            top: 30px;
            left: 314px;
            z-index: 9999;
        }

        /* Active Language Button - Square Flag Only */
        #mallLanguageSwitcher .langButton {
            width: 24px;
            height: 24px;
            cursor: pointer;
            border: 2px solid #751a0d;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            transition: all 0.2s ease;
            overflow: hidden;
            position: relative;
        }

        #mallLanguageSwitcher .langButton:hover {
            border-color: #7a5a3f;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
            transform: translateY(2px);
        }

        #mallLanguageSwitcher .langButton img {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* Dropdown Grid Container */
        #mallLanguageSwitcher .langOptions {
            display: none;
            position: absolute;
            top: 35px;
            left: 50%;
	    transform:translateX(-50%);
	    /*
            background: #2a1a0f;
            */
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
            width: 258px;
            box-sizing: border-box;
        }

        #mallLanguageSwitcher.open .langOptions {
            display: block;
        }

        /* 3-Column Grid Layout - 5 rows × 3 columns = 15 items */
        #mallLanguageSwitcher .langGrid {
            width: 228px;
            overflow: hidden;
        }

        /* Individual Language Item - Round Flag + Acronym */
        #mallLanguageSwitcher .langItem {
            text-align: center;
            cursor: pointer;
            text-decoration: none;
            float: left;
            width: 70px;
            height: 80px;
            margin: 0 3px 6px 3px;
        }

        /* Force new row after every 3rd item (creates exactly 5 rows) */
        #mallLanguageSwitcher .langItem:nth-child(3n+1) {
            clear: left;
        }

/*
        #mallLanguageSwitcher .langItem:hover {
            opacity: 0.8;
        }

         Round Flag Container */
        #mallLanguageSwitcher .langItem .flagCircle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid #751a0d;
            background: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            margin: 0 auto 6px auto;
        }

        #mallLanguageSwitcher .langItem:hover .flagCircle {
            border-color: #d4a76a;
            box-shadow: 0 4px 8px rgba(212, 167, 106, 0.3);
        }

        #mallLanguageSwitcher .langItem.active .flagCircle {
            border-color: #000;
            border-width: 3px;
            box-shadow: 0 0 12px rgba(244, 196, 122, 0.5);
        }

        #mallLanguageSwitcher .langItem .flagCircle img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Acronym Label */
        #mallLanguageSwitcher .langItem .langAcronym {
            color: #751a0d;
            font-size: 11px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            display: block;
        }

        #mallLanguageSwitcher .langItem:hover .langAcronym {
            color: #f4c47a;
        }

        #mallLanguageSwitcher .langItem.active .langAcronym {
            color: #000;
        }

        /* Fix mall category menu text wrapping */
        #mainMenu li a {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>

    <!--[if lte IE 6]>
    <style type="text/css">@import url(https://gf1.geo.gfsrv.net/cdn9b/5338b6f852df99e7b508f046cc25ad.css);</style>
    <style type="text/css">@import url(https://gf3.geo.gfsrv.net/cdnb6/f0c4e2637ede70860c1a273ed38241.css);</style>
    <style type="text/css">@import url(https://gf3.geo.gfsrv.net/cdn58/97c61e083f066422a1ccf00b7e6a02.css);</style>
    <![endif]-->

    <script type="text/javascript">
        // Global error suppressor for IE11 - prevents error popups without breaking functionality
        window.onerror = function(msg, url, line, col, error) {
            // Silently suppress errors - they don't affect functionality
            return true;
        };
    </script>
    <script type="text/javascript" src="{{ asset('assets/mall/js/0517dbc738ea24aa73b64a25b30f8d.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/mall/js/521e7b8821399457f8d2c96bd4d764.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/mall/js/7ef645db9fe9c2161d57e2a9684f8c.js') }}"></script>
    {{-- TEST: Using nolock version - no busy flag check on clicks --}}
    <script type="text/javascript" src="{{ asset('assets/mall/js/74a2472b07741e6900b40d529efc36-nolock.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/mall/js/c121d2d644f8b6d54b747e69dc319c.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/mall/js/b1ad0ec9073e2ae4eefbd6ad628e13.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/mall/js/497adc02ec310555ca02b97c5e5b8a.js') }}"></script>
    {{-- Using fixed version - replaces page reload with balance refresh --}}
    <script type="text/javascript" src="{{ asset('assets/mall/js/44fc21806fac16fd1145ef90d1994a-fixed.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/mall/js/c7786e501306d6ec52c7a2487bc9c3.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/mall/js/87fc5271982cfc5ae878af40ce5f22.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/mall/js/daea90828cdbc4b0974c1328fee2d4.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/mall/js/ae1c0d191bffe28d878d7ec7062da2.js') }}"></script>

    <script type="text/javascript">
        /* <![CDATA[ */

        // Notify parent window (main site) of balance change
        window.notifyParentBalance = function(cash) {
            if (window.parent && window.parent !== window) {
                try {
                    window.parent.postMessage({
                        type: 'balanceUpdate',
                        cash: cash
                    }, window.location.origin);
                } catch(e) {}
            }
        };

        // Balance refresh function (called instead of page reload)
        window.refreshMallBalance = function() {
            $.ajax({
                url: '{{ route("mall") }}',
                cache: false,
                dataType: 'html',
                success: function(html) {
                    try {
                        var temp = $('<div>').html(html);
                        var newCoins = temp.find('.coinsValue').text();
                        var newMileage = temp.find('.marksValue').text();

                        if (newCoins && newCoins.length > 0) {
                            $('.coinsValue').text(newCoins);
                            // Notify parent of new balance
                            window.notifyParentBalance(newCoins);
                        }
                        if (newMileage && newMileage.length > 0) {
                            $('.marksValue').text(newMileage);
                        }
                    } catch(e) {
                        // Silently fail - don't show script errors
                    }
                },
                error: function() {
                    // Silently fail - don't show script errors
                }
            });
        };

        $(document).ready(function() {
            $('#breadcrumbInfoText').fadeIn(1000);

            // Language switcher
            $('#mallLanguageSwitcher .langButton').click(function(e) {
                e.stopPropagation();
                $('#mallLanguageSwitcher').toggleClass('open');
            });

            $(document).click(function() {
                $('#mallLanguageSwitcher').removeClass('open');
            });

            $('#mallLanguageSwitcher .langOptions').click(function(e) {
                e.stopPropagation();
            });

            $('.groupItem').find('h2').click(function() {
                $(this).closest('.groupItem').toggleClass('opened closed');
            });
            {{--
                $('#serverlist').change(function() {
                    $.ajax({
                        'url': 'http://ro.shop.metin2.de/ajax/callback/characters/?__token=e8e9d2bd2e3e80ecf201e882766b8405&caid=3171938' + '&csid=' + $('#serverlist').val(),
                        'success': function(data, request, status) { $('#characterlist').html(data); }
                    });
                });
            --}}
            $('#characterpick').show();

            $('#optionsBar').mouseenter(function() {
                $(this).addClass('optionsBarOv').removeClass('optionsBarNorm');
            }).mouseleave(function(){
                $(this).addClass('optionsBarNorm').removeClass('optionsBarOv');
            }).click(function(){
                $('#optionsSlider').fadeToggle('slow');
            });

            $('#optionsSlider').mouseleave(function() {
                $(this).fadeOut('slow');
            });
        });
        /* ]]> */
    </script>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="twoColFixLtHdr" scroll="no" ondblclick="return false;">
    <!-- Language Switcher for IE11 Game Users (hidden by default, shown only for IE11) -->
    <div id="mallLanguageSwitcher" style="display: none;">
        <!-- Active Language Button - Square Flag Only -->
        <div class="langButton">
            <img src="{{ asset('assets/mall/img/flags/' . app()->getLocale() . '.svg') }}" alt="{{ strtoupper(app()->getLocale()) }}">
        </div>

        <!-- Dropdown Grid with Round Flags -->
        <div class="langOptions">
            <div class="langGrid">
                @foreach (\App\Http\Controllers\LanguageController::$supportedLanguages as $language)
                    <a href="{{ route('set-language', ['language' => $language]) }}"
                       class="langItem {{ app()->getLocale() == $language ? 'active' : '' }}">
                        <div class="flagCircle">
                            <img src="{{ asset('assets/mall/img/flags/' . $language . '.svg') }}" alt="{{ strtoupper($language) }}">
                        </div>
                        <span class="langAcronym">{{ strtoupper($language) }}</span>
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <script type="text/javascript">
        // Detect IE11 and show language switcher only for IE11 users (game users)
        // IE11 detection: IE11 has "Trident" in user agent but not "MSIE"
        var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
        if (isIE11) {
            document.getElementById('mallLanguageSwitcher').style.display = 'block';
        }
    </script>

    <div id="container">
        <div id="header">
            <div class="boxSigns">
                <span class="heading">{{ __('mall/main.currency.mileage_long') }} ({{ __('mall/main.currency.mileage') }}):</span>
                <span class="marksValue">{{ Auth::user()->mileage }}</span>
                <a href="{{ url('mall/faq', ['section' => 'mileage']) }}" class="tip helpSmallIcon" title="{{ __('mall/main.nav.help_tooltip') }}" style="right: 23px;">
                    <img src="{{ asset('assets/mall/img/helpSmallIcon.png') }}" />
                </a>
            </div>

            <div class="boxCoins">
                <span class="heading">{{ __('mall/main.currency.cash_long') }} ({{ __('mall/main.currency.cash') }}):</span>
                <span class="coinsValue">{{ Auth::user()->cash  }}</span>
                <a href="{{ url('mall/faq', ['section' => 'cash']) }}" class="tip helpSmallIcon" title="{{ __('mall/main.nav.help_tooltip') }}" style="right: 7px;">
                    <img src="{{ asset('assets/mall/img/helpSmallIcon.png') }}" />
                </a>
                <a href="#" class="purchaseButton" title="{{ __('mall/main.nav.buy_coins_tooltip') }}">
                    {!! nl2br(__('mall/main.nav.buy_coins_btn')) !!}
                </a>
            </div>
        </div>

        @if ($discountDesc)
            <span id="discountLong">{{ $discountDesc }}</span>
        @endif

        <div class="userdataDiv">
            @if ($storageCount > 0)
                <a title="{{ __('mall/main.nav.user_data_tooltip') }}" href="{{ url('mall/userdata') }}" class="tip userdataInfoIcon"></a>
            @else
                <a title="{{ __('mall/main.nav.user_data_tooltip') }}" href="{{ url('mall/userdata') }}" class="tip userdataIcon"></a>
            @endif
        </div>

        @if ($storageCount > 0)
            <div id="breadcrumbInfoText">
                <div id="arrowDiv">
                    <div id="arrowRight"></div>
                    <div id="arrowBorderRight"></div>
                </div>

                <span id="discountLong">{{ __('mall/main.nav.stored_items', ['storageCount' => $storageCount]) }}</span>
            </div>
        @endif

        <ul id="breadcrumb">
            <li><a href="{{ route('mall') }}">{{ __('mall/main.nav.home') }}</a></li>
        </ul>

        <div id="sidebar1">
            <div id="search">
                <form action="#" onsubmit="return false;">
                    <input type="text" value="{{ __('mall/main.nav.search_placeholder') }}" class="type" name="searchString" maxlength="42" />
                    <input type="submit" value="" class="send" />
                </form>
            </div>
            <ul id="mainMenu">
                @foreach ($categories as $category)
                    <li><a href="{{ url('mall/category', ['id' => $category->id]) }}" title="{{ $category->translated_name }}">{{ $category->translated_name }}</a></li>
                @endforeach
            </ul>
        </div>

        @yield('content')
    </div>
</body>
</html>
