@php
    $currentType = session('course_type', 'school');
@endphp
<div class="site-mode-switcher" id="site_mode_switcher">
    <button type="button" class="site-mode-switcher-btn" id="site_mode_switcher_btn" aria-label="{{ __('website.site_mode.SwitchTitle') }}">
        @if($currentType === 'training')
            <i class="icon-pencil-book"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></i>
        @else
            <i class="icon-book"><span class="path1"></span><span class="path2"></span></i>
        @endif
        <span class="site-mode-switcher-label">{{ $currentType === 'training' ? __('website.header.CoursesTraining') : __('website.header.CoursesSchool') }}</span>
    </button>
    <div class="site-mode-switcher-panel" id="site_mode_switcher_panel" style="display: none;">
        <p class="site-mode-switcher-title">{{ __('website.site_mode.SwitchTitle') }}</p>
        <a href="{{ route('switch_course_type', 'school') }}" class="site-mode-switcher-option {{ $currentType === 'school' ? 'active' : '' }}">
            <span class="option-icon"><i class="icon-book"><span class="path1"></span><span class="path2"></span></i></span>
            <span>{{ __('website.site_mode.OptionSchoolTitle') }}</span>
        </a>
        <a href="{{ route('switch_course_type', 'training') }}" class="site-mode-switcher-option {{ $currentType === 'training' ? 'active' : '' }}">
            <span class="option-icon"><i class="icon-pencil-book"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></i></span>
            <span>{{ __('website.site_mode.OptionTrainingTitle') }}</span>
        </a>
    </div>
</div>

<style>
.site-mode-switcher {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9998;
    font-family: inherit;
}
[dir="rtl"] .site-mode-switcher { right: auto; left: 1.5rem; }
.site-mode-switcher-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, #7bbbfb 0%, #5aa3f0 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(123, 187, 251, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.site-mode-switcher-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(123, 187, 251, 0.5);
}
.site-mode-switcher-btn .icon-pencil-book,
.site-mode-switcher-btn .icon-book { font-size: 1.1rem; }
.site-mode-switcher-panel {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    right: 0;
    [dir="rtl"] & { right: auto; left: 0; }
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    padding: 0.75rem;
    min-width: 200px;
}
.site-mode-switcher-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 0.5rem 0;
    padding: 0 0.5rem;
}
.site-mode-switcher-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    color: #334155;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.2s;
}
.site-mode-switcher-option:hover { background: #f1f5f9; }
.site-mode-switcher-option.active {
    background: rgba(123, 187, 251, 0.15);
    color: #5aa3f0;
    font-weight: 600;
}
.site-mode-switcher-option .option-icon { font-size: 1.25rem; display: inline-flex; color: #64748b; }
.site-mode-switcher-option.active .option-icon { color: #5aa3f0; }
</style>

<script>
(function() {
    var btn = document.getElementById('site_mode_switcher_btn');
    var panel = document.getElementById('site_mode_switcher_panel');
    if (!btn || !panel) return;
    btn.addEventListener('click', function() {
        var isOpen = panel.style.display === 'block';
        panel.style.display = isOpen ? 'none' : 'block';
    });
    document.addEventListener('click', function(e) {
        if (!document.getElementById('site_mode_switcher').contains(e.target)) {
            panel.style.display = 'none';
        }
    });
})();
</script>