<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'LexaScraper Dashboard') - Lead Automation Panel</title>
    <link rel="stylesheet" href="{{ asset('css/panel.css') }}">
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <!-- Prevent Theme Flash -->
    <script>
        const savedTheme = localStorage.getItem('theme');
        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
            document.documentElement.setAttribute('data-theme', 'dark');
        }
    </script>
</head>
<body>
    <!-- Faint World Map Background Layer -->
    <div class="map-bg"></div>
    <div class="app-container">
        <!-- Sidebar Navigation -->
        <aside class="sidebar">
            <div class="logo-container">
                <a href="/" style="display: flex; justify-content: center; align-items: center; width: 100%; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;">
                    <img src="{{ asset('images/logo.png') }}" alt="LexaScraper Logo">
                </a>
                @if(auth()->user()->role === 'admin')
                    <div class="role-console-badge admin-badge">ADMIN CONSOLE</div>
                @else
                    <div class="role-console-badge client-badge">CLIENT PORTAL</div>
                @endif
            </div>

            <ul class="nav-menu">
                <li class="nav-item {{ Route::is('dashboard') ? 'active' : '' }}">
                    <a href="{{ route('dashboard') }}">
                        <ion-icon name="grid-outline"></ion-icon>
                        Panel Kontrol
                    </a>
                </li>
                <li class="nav-item {{ Route::is('companies.index') ? 'active' : '' }}">
                    <a href="{{ route('companies.index') }}">
                        <ion-icon name="business-outline"></ion-icon>
                        İşletme Havuzu
                    </a>
                </li>
                
                @if(auth()->user()->role === 'admin')
                    <li class="nav-item {{ Route::is('admin.users') ? 'active' : '' }}">
                        <a href="{{ route('admin.users') }}">
                            <ion-icon name="people-outline"></ion-icon>
                            Kullanıcı Yönetimi
                        </a>
                    </li>
                    <li class="nav-item {{ Route::is('admin.organizations.index') ? 'active' : '' }}">
                        <a href="{{ route('admin.organizations.index') }}">
                            <ion-icon name="business-outline"></ion-icon>
                            Firma Yönetimi
                        </a>
                    </li>
                    <li class="nav-item {{ Route::is('admin.settings') ? 'active' : '' }}">
                        <a href="{{ route('admin.settings') }}">
                            <ion-icon name="settings-outline"></ion-icon>
                            Bağlantı & API
                        </a>
                    </li>
                @endif

                <li class="nav-item" style="margin-top: 1.5rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
                    <form action="{{ route('logout') }}" method="POST" id="logout-form" style="display: none;">
                        @csrf
                    </form>
                    <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" style="color: var(--danger);">
                        <ion-icon name="log-out-outline"></ion-icon>
                        Oturumu Kapat
                    </a>
                </li>
            </ul>

            <div class="sidebar-footer">
                <div style="background-color: rgba(255,255,255,0.02); border: 1px solid var(--border-color); padding: 0.75rem; border-radius: var(--radius-sm); margin-bottom: 1rem; text-align: left;">
                    <p style="font-weight: 600; color: var(--text-primary); font-size: 0.85rem;">{{ auth()->user()->name }}</p>
                    <p style="font-size: 0.75rem; color: var(--primary); margin-top: 2px; display: flex; align-items: center; gap: 6px;">
                        <span class="pulse-dot"></span>
                        {{ auth()->user()->role === 'admin' ? 'Yönetici (Admin)' : 'Müşteri (Customer)' }}
                    </p>
                </div>
                <p>Lexa Global Lead v1.0</p>
                <p style="opacity: 0.5; margin-top: 4px;">&copy; 2026 Lexa Bilişim</p>
            </div>
        </aside>

        <!-- Main Dashboard Workspace -->
        <main class="main-content" style="position: relative;">
            <div class="workspace-glow"></div>
            <header class="header-panel">
                <div class="header-title">
                    <h1>@yield('header_title')</h1>
                    <p>@yield('header_subtitle')</p>
                </div>
                <div class="header-actions" style="display: flex; align-items: center; gap: 1rem;">
                    @yield('header_actions')
                    
                    <!-- Theme Toggle Switch -->
                    <button id="theme-toggle" class="theme-btn" aria-label="Tema Değiştir" style="background: none; border: 1px solid var(--border-color); padding: 8px; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-primary); transition: var(--transition);">
                        <ion-icon name="moon-outline" class="theme-icon-light" style="font-size: 20px; display: none;"></ion-icon>
                        <ion-icon name="sunny-outline" class="theme-icon-dark" style="font-size: 20px; display: none;"></ion-icon>
                    </button>
                </div>
            </header>

            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            @yield('content')
        </main>
    </div>
    
    <!-- Theme Toggle Javascript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const themeToggle = document.getElementById('theme-toggle');
            const lightIcon = themeToggle.querySelector('.theme-icon-light');
            const darkIcon = themeToggle.querySelector('.theme-icon-dark');

            function updateToggleIcons(theme) {
                if (theme === 'dark') {
                    lightIcon.style.display = 'none';
                    darkIcon.style.display = 'block';
                    darkIcon.style.color = '#fbbf24'; // Amber Gold Sun
                } else {
                    lightIcon.style.display = 'block';
                    darkIcon.style.display = 'none';
                    lightIcon.style.color = 'var(--text-primary)';
                }
            }

            // Init icons
            const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
            updateToggleIcons(currentTheme);

            themeToggle.addEventListener('click', function() {
                const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
                document.documentElement.setAttribute('data-theme', theme);
                localStorage.setItem('theme', theme);
                updateToggleIcons(theme);
            });

            // Custom select dropdown implementation
            function initCustomSelects() {
                const selects = document.querySelectorAll('.form-select:not(.native-select)');
                
                selects.forEach(select => {
                    if (select.classList.contains('custom-hidden')) return;
                    
                    // Create wrapper
                    const wrapper = document.createElement('div');
                    wrapper.className = 'custom-select-wrapper';
                    select.parentNode.insertBefore(wrapper, select);
                    wrapper.appendChild(select);
                    
                    // Create trigger
                    const trigger = document.createElement('div');
                    trigger.className = 'custom-select-trigger';
                    trigger.innerHTML = `<span></span><ion-icon name="chevron-down-outline"></ion-icon>`;
                    wrapper.appendChild(trigger);
                    
                    // Create options container
                    const optionsContainer = document.createElement('div');
                    optionsContainer.className = 'custom-select-options';
                    wrapper.appendChild(optionsContainer);
                    
                    // Hide native select
                    select.classList.add('custom-hidden');
                    
                    // Rebuild function
                    function rebuildOptions() {
                        optionsContainer.innerHTML = '';
                        let selectedText = '';
                        
                        Array.from(select.options).forEach(opt => {
                            const customOpt = document.createElement('div');
                            customOpt.className = 'custom-option';
                            customOpt.textContent = opt.textContent;
                            customOpt.dataset.value = opt.value;
                            
                            if (opt.disabled) {
                                customOpt.classList.add('disabled-placeholder');
                            }
                            if (opt.selected) {
                                customOpt.classList.add('selected');
                                selectedText = opt.textContent;
                            }
                            
                            customOpt.addEventListener('click', function(e) {
                                e.stopPropagation();
                                if (opt.disabled) return;
                                
                                select.value = opt.value;
                                select.dispatchEvent(new Event('change'));
                                
                                // Close wrapper
                                wrapper.classList.remove('open');
                            });
                            
                            optionsContainer.appendChild(customOpt);
                        });
                        
                        trigger.querySelector('span').textContent = selectedText || 'Seçiniz';
                    }
                    
                    // Initial build
                    rebuildOptions();
                    
                    // Observe changes on native select options
                    const observer = new MutationObserver(() => {
                        rebuildOptions();
                    });
                    observer.observe(select, { childList: true });
                    
                    // Listen to change events to keep UI in sync
                    select.addEventListener('change', () => {
                        rebuildOptions();
                    });
                    
                    // Click to toggle dropdown
                    trigger.addEventListener('click', function(e) {
                        e.stopPropagation();
                        // Close all other open custom selects
                        document.querySelectorAll('.custom-select-wrapper').forEach(w => {
                            if (w !== wrapper) w.classList.remove('open');
                        });
                        wrapper.classList.toggle('open');
                    });
                });
                
                // Click outside to close dropdowns
                document.addEventListener('click', function() {
                    document.querySelectorAll('.custom-select-wrapper').forEach(w => {
                        w.classList.remove('open');
                    });
                });
            }

            initCustomSelects();
        });
    </script>

    @stack('scripts')
</body>
</html>
