@php
    $curLang = lang();
    $languageSupportList = \Config::getAppConfig()['lang'];
@endphp

@if($this->option['type'] == 'combobox')
    <select id="{{$this->option['name']}}" onchange="onChangeLanguage(this)">
        @foreach($languageSupportList as $code => $lang)
            @if($code == $curLang)
                <option selected value="{{$code}}">{{$lang}}</option>
            @else
                <option value="{{$code}}">{{$lang}}</option>
            @endif
        @endforeach
    </select>

    <script>
        if(typeof onChangeLanguage == 'undefined') {
            function onChangeLanguage(el) {
                window.location.href = "{{full_url()}}?lang=" + el.value;
            }
        }
    </script>
    
@elseif($this->option['type'] == 'flag')
<ul class="flags">
    <li>
        <a href="javascript: void(0)">
            @foreach($languageSupportList as $code => $lang)
                @if($code == $curLang)
                    <span class="flag {{$code}}" style="float:left"></span>
                    {{$lang}}

                    @break
                @endif
            @endforeach
        </a>
        
        <ul>
            @foreach($languageSupportList as $code => $lang)
            <li>
                <a href="{{full_url() . '?lang=' . $code}}">
                    <span class="flag {{$code}}"></span>
                    {{$lang}}
                </a>
            </li>
            @endforeach
           
        </ul>
    </li>
</ul>

<style>
.flags {
    margin: 0px;
    margin-top: -6px;
    list-style: none;
    padding: 0px;
}

.flags > li {
    position: relative;
    padding-bottom: 5px;
    padding-top: 6px;
}

.flags li a {
    color: #333;
}

.flags li a:hover {
    text-decoration: none
}

.flags > li a span {
    margin-top: 4px;
    margin-right: 7px;
}

.flags li ul {
    display: none;
    position: absolute;
    top: 30px;
    left: -2px;
    z-index: 10;
    background-color: white;
    box-shadow: 0px 0px 3px #999;
    width: 130px;
    color: #333;
    padding: 0px;
}

.flags > li:hover ul {
    display: block;
}

.flags li {
    list-style: none;
}

.flags li .flag,
.flags li ul .flag {
    display: block;
    width: 16px;
    height: 12px;
    background-image: url({{asset("/images/flags/flag-sprite.png")}});
    background-repeat: no-repeat;
}

.flags li ul li {
    padding: 2px 10px;
}

.flags li ul li:hover {
    background-color: #ccc;
    cursor: pointer;
}

.flags li ul li .flag {
    float: left;
    margin-right: 10px;
    margin-top: 5px;
}

.flags .flag.vi {
    background-position: center bottom;   
}

.flags .flag.en {
    background-position: center top;   
}

.flags .flag.ja {
    background-position: center center;   
}
</style>
@endif