@extends('layouts.admin')

@section('title', 'Dark Mode Test')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Dark Mode Test Page</h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h5><i class="mdi mdi-information-outline me-2"></i>Dark Mode Test</h5>
                        <p class="mb-0">This page is designed to test the dark mode functionality. Click the toggle button in the top navigation to switch between light and dark themes.</p>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <h5 class="card-title">Primary Card</h5>
                                    <p class="card-text">This card should change appearance in dark mode.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <h5 class="card-title">Success Card</h5>
                                    <p class="card-text">This card should also change appearance in dark mode.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-12">
                            <h5>Test Elements</h5>
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Element</th>
                                            <th>Description</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Theme Toggle</td>
                                            <td>Button in top navigation should switch themes</td>
                                            <td><span class="badge bg-success">✓ Working</span></td>
                                        </tr>
                                        <tr>
                                            <td>Theme Persistence</td>
                                            <td>Theme should persist across page reloads</td>
                                            <td><span class="badge bg-info">Testing</span></td>
                                        </tr>
                                        <tr>
                                            <td>System Preference</td>
                                            <td>Should detect system dark mode preference</td>
                                            <td><span class="badge bg-info">Testing</span></td>
                                        </tr>
                                        <tr>
                                            <td>Visual Changes</td>
                                            <td>Cards, tables, and text should change appearance</td>
                                            <td><span class="badge bg-info">Testing</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="alert alert-warning">
                                <h6><i class="mdi mdi-lightbulb-on-outline me-2"></i>Testing Instructions</h6>
                                <ol class="mb-0">
                                    <li>Click the sun/moon icon in the top navigation to toggle themes</li>
                                    <li>Refresh the page to test persistence</li>
                                    <li>Change your system theme preference and reload to test detection</li>
                                    <li>Navigate to other pages and return to verify persistence</li>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-12">
                            <button type="button" class="btn btn-primary me-2" onclick="testThemePersistence()">Test Persistence</button>
                            <button type="button" class="btn btn-secondary me-2" onclick="showCurrentTheme()">Show Current Theme</button>
                            <button type="button" class="btn btn-info" onclick="clearThemePreference()">Clear Preference</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function testThemePersistence() {
    const currentTheme = BP.DarkModeController.getCurrentTheme();
    const isDark = BP.DarkModeController.isDarkMode();

    alert(`Current Theme: ${currentTheme}\nIs Dark Mode: ${isDark}\n\nRefresh the page to test persistence.`);
}

function showCurrentTheme() {
    const currentTheme = BP.DarkModeController.getCurrentTheme();
    const htmlTheme = document.documentElement.getAttribute('data-bs-theme');
    const localStorageTheme = localStorage.getItem('theme');

    alert(`Current Theme: ${currentTheme}\nHTML Attribute: ${htmlTheme}\nLocalStorage: ${localStorageTheme}`);
}

function clearThemePreference() {
    localStorage.removeItem('theme');
    alert('Theme preference cleared. Page will reload to apply system preference.');
    location.reload();
}
</script>
@endsection