@php
    $appLogo = config('app.logo') ?: asset('images/sms.png');
@endphp
<!-- Custom Admin Header with Navigation Toggle -->
<div class="custom-admin-header">
    <div class="header-content">
        <div class="header-left">
            <!-- Navigation Toggle Button -->
            <button 
                type="button" 
                class="nav-toggle-btn" 
                id="nav-toggle-btn"
                onclick="toggleSidebar()"
                title="Toggle Navigation"
            >
                <svg class="nav-toggle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>

            <!-- Logo -->
            <div class="header-logo">
                <img src="{{ $appLogo }}" alt="SMS Admin Logo">
                <!-- <span class="header-logo-text">SMS Admin</span> -->
            </div>
        </div>

        <div class="header-right">
            <div class="user-info">
                <span class="welcome-text">Welcome, Admin</span>
                <button 
                    type="button" 
                    class="logout-btn"
                    onclick="logout()"
                >
                    Logout
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Custom Admin Header Styles */
.custom-admin-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    background: white !important;
    border-bottom: 1px solid #e5e7eb !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 1rem !important;
}

.header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
}

.header-left {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.nav-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: white !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}

.nav-toggle-btn:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

.nav-toggle-btn svg {
    width: 20px !important;
    height: 20px !important;
}

.header-logo {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.header-logo img {
    height: 2rem !important;
    width: auto !important;
}

.header-logo-text {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
}

.header-right {
    display: flex !important;
    align-items: center !important;
}

.user-info {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.welcome-text {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
}

.logout-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background: white !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}

.logout-btn:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
}

/* Adjust main content to account for fixed header */
.fi-main {
    margin-top: 64px !important;
    padding-top: 1rem !important;
}

/* Sidebar toggle functionality */
.fi-sidebar {
    transition: all 0.3s ease-in-out !important;
}

.fi-sidebar.collapsed {
    width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Ensure proper spacing */
.fi-main-content {
    margin-top: 64px !important;
}
</style>

<script>
// Global script to comment out/disable "This page has expired" alerts
(function() {
    // Store original functions
    const originalAlert = window.alert;
    const originalConfirm = window.confirm;
    
    // Override alert to filter out the page expired message
    window.alert = function(message) {
        // Check if the message contains "page has expired" or "refresh the page"
        if (message && (
            message.toLowerCase().includes('page has expired') ||
            message.toLowerCase().includes('refresh the page') ||
            message.toLowerCase().includes('this page has expired')
        )) {
            // Commented out - do not show the alert
            console.log('Page expired alert intercepted and disabled:', message);
            return;
        }
        
        // For other alerts, use the original function
        return originalAlert.apply(window, arguments);
    };
    
    // Override confirm to filter out the page expired message
    window.confirm = function(message) {
        // Check if the message contains "page has expired" or "refresh the page"
        if (message && (
            message.toLowerCase().includes('page has expired') ||
            message.toLowerCase().includes('refresh the page') ||
            message.toLowerCase().includes('this page has expired') ||
            message.toLowerCase().includes('would you like to refresh')
        )) {
            // Commented out - do not show the confirm dialog
            console.log('Page expired confirm dialog intercepted and disabled:', message);
            return false; // Return false to prevent refresh
        }
        
        // For other confirm dialogs, use the original function
        return originalConfirm.apply(window, arguments);
    };
    
    // Handle Livewire 419 errors (CSRF token expired) by redirecting to login
    if (window.Livewire) {
        document.addEventListener('livewire:init', () => {
            Livewire.hook('request', ({ fail }) => {
                fail(({ status, preventDefault, component }) => {
                    if (status === 419) {
                        // Prevent default error handling
                        preventDefault();
                        console.log('CSRF token expired (419). Redirecting to login...');
                        
                        // Show a brief notification if Filament notifications are available
                        if (window.$wire && window.$wire.$dispatch) {
                            try {
                                window.$wire.$dispatch('notify', {
                                    title: 'Session Expired',
                                    body: 'Please login again.',
                                    type: 'warning'
                                });
                            } catch (e) {
                                // Filament notifications not available, continue anyway
                            }
                        }
                        
                        // Redirect to login after a short delay
                        setTimeout(() => {
                            window.location.href = "{{ route('filament.admin.auth.login') }}";
                        }, 500);
                    }
                });
            });
        });
    }
})();

// Navigation toggle functionality
function toggleSidebar() {
    const sidebar = document.querySelector('.fi-sidebar');
    const toggleBtn = document.getElementById('nav-toggle-btn');
    const toggleIcon = toggleBtn.querySelector('.nav-toggle-icon');
    
    if (sidebar.classList.contains('collapsed')) {
        // Expand sidebar
        sidebar.classList.remove('collapsed');
        toggleIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
        toggleBtn.title = 'Collapse Navigation';
    } else {
        // Collapse sidebar
        sidebar.classList.add('collapsed');
        toggleIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
        toggleBtn.title = 'Expand Navigation';
    }
    
    // Save state to localStorage
    localStorage.setItem('sidebar-collapsed', sidebar.classList.contains('collapsed'));
}

// Logout functionality
function logout() {
    if (confirm('Are you sure you want to logout?')) {
        // Comment out/disable the "This page has expired" alert during logout
        const originalAlert = window.alert;
        const originalConfirm = window.confirm;
        
        // Temporarily override alert to prevent page expired alerts
        window.alert = function(message) {
            if (message && (
                message.toLowerCase().includes('page has expired') ||
                message.toLowerCase().includes('refresh the page') ||
                message.toLowerCase().includes('this page has expired')
            )) {
                console.log('Page expired alert intercepted and disabled during logout:', message);
                return;
            }
            return originalAlert.apply(window, arguments);
        };
        
        // Temporarily override confirm to prevent page expired confirm dialogs
        window.confirm = function(message) {
            if (message && (
                message.toLowerCase().includes('page has expired') ||
                message.toLowerCase().includes('refresh the page') ||
                message.toLowerCase().includes('this page has expired') ||
                message.toLowerCase().includes('would you like to refresh')
            )) {
                console.log('Page expired confirm dialog intercepted and disabled during logout:', message);
                return false;
            }
            return originalConfirm.apply(window, arguments);
        };
        
        window.location.href = '/admin/logout';
    }
}

// Initialize sidebar state from localStorage
document.addEventListener('DOMContentLoaded', function() {
    const sidebar = document.querySelector('.fi-sidebar');
    const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
    
    if (isCollapsed && sidebar) {
        sidebar.classList.add('collapsed');
        const toggleBtn = document.getElementById('nav-toggle-btn');
        if (toggleBtn) {
            const toggleIcon = toggleBtn.querySelector('.nav-toggle-icon');
            toggleIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
            toggleBtn.title = 'Expand Navigation';
        }
    }
});
</script>