@extends('layouts.app')

@section('content')
<div class="container-fluid px-0">
    <div class="row g-0">
        
        <!-- Sidebar -->
        <div class="col-md-3 col-lg-2 bg-light border-end" style="min-height: calc(100vh - 56px); position: sticky; top: 56px; overflow-y: auto; max-height: calc(100vh - 56px);">
            <div class="p-3">
                
                <!-- Back to Index -->
                <div class="mb-3">
                    <a href="{{ route('documentation.index') }}" class="btn btn-sm btn-outline-primary w-100">
                        <i class="bi bi-arrow-left"></i> All Documentation
                    </a>
                </div>

                <!-- Search -->
                <div class="mb-3">
                    <form action="{{ route('documentation.search') }}" method="GET">
                        <div class="input-group input-group-sm">
                            <input 
                                type="text" 
                                name="q" 
                                class="form-control" 
                                placeholder="Search..." 
                                value="{{ request('q') }}"
                            >
                            <button class="btn btn-primary" type="submit">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Documentation List by Category -->
                @foreach ($categories as $category => $categoryDocs)
                    <div class="mb-3">
                        <h6 class="text-muted text-uppercase small fw-bold mb-2">{{ $category }}</h6>
                        <div class="list-group list-group-flush">
                            @foreach ($categoryDocs as $doc)
                                <a 
                                    href="{{ route('documentation.show', $doc['slug']) }}" 
                                    class="list-group-item list-group-item-action border-0 py-2 px-2 {{ $currentSlug == $doc['slug'] ? 'active' : '' }}"
                                >
                                    <i class="bi {{ $doc['icon'] }} me-1"></i>
                                    <small>{{ str_replace(['🏠', '📚', '🔧', '⚙️', '🏫', '👨‍🎓', '⬆️', '💰', '👨‍🏫', '👔', '📅', '📝', '🕐', '📚', '📢', '📆'], '', $doc['title']) }}</small>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-md-9 col-lg-10">
            <div class="row g-0">
                
                <!-- Documentation Content -->
                <div class="col-lg-9 p-4">
                    
                    <!-- Breadcrumb -->
                    <nav aria-label="breadcrumb" class="mb-3">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('documentation.index') }}">Documentation</a></li>
                            <li class="breadcrumb-item active">{{ $title }}</li>
                        </ol>
                    </nav>

                    <!-- Documentation Title -->
                    <div class="mb-4">
                        <h1 class="display-5 fw-bold">{{ $title }}</h1>
                        <hr>
                    </div>

                    <!-- Documentation Content -->
                    <div class="documentation-content">
                        {!! $content !!}
                    </div>

                    <!-- Footer Navigation -->
                    <div class="mt-5 pt-4 border-top">
                        <div class="row">
                            <div class="col-6">
                                <a href="{{ route('documentation.index') }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-arrow-left"></i> Back to Index
                                </a>
                            </div>
                            <div class="col-6 text-end">
                                <button onclick="window.print()" class="btn btn-outline-primary">
                                    <i class="bi bi-printer"></i> Print
                                </button>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- Table of Contents (Right Sidebar) -->
                <div class="col-lg-3 bg-light p-4 d-none d-lg-block" style="position: sticky; top: 56px; max-height: calc(100vh - 56px); overflow-y: auto;">
                    <h6 class="fw-bold mb-3">
                        <i class="bi bi-list-nested"></i> On This Page
                    </h6>
                    
                    @if(count($toc) > 0)
                        <nav class="toc-nav">
                            <ul class="list-unstyled">
                                @foreach ($toc as $item)
                                    <li class="mb-2" style="padding-left: {{ ($item['level'] - 1) * 15 }}px;">
                                        <a href="#{{ $item['anchor'] }}" class="text-decoration-none text-muted small toc-link">
                                            {{ $item['title'] }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </nav>
                    @else
                        <p class="text-muted small">No sections available</p>
                    @endif

                    <!-- Quick Actions -->
                    <div class="mt-4 pt-3 border-top">
                        <h6 class="fw-bold mb-3"><i class="bi bi-lightning"></i> Quick Actions</h6>
                        <div class="d-grid gap-2">
                            <a href="{{ route('documentation.search') }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-search"></i> Search
                            </a>
                            <button onclick="window.print()" class="btn btn-sm btn-outline-secondary">
                                <i class="bi bi-printer"></i> Print
                            </button>
                            <a href="{{ route('documentation.index') }}" class="btn btn-sm btn-outline-info">
                                <i class="bi bi-house"></i> Home
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<style>
.documentation-content {
    font-size: 1.05rem;
    line-height: 1.8;
}

.documentation-content h1,
.documentation-content h2,
.documentation-content h3,
.documentation-content h4,
.documentation-content h5,
.documentation-content h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.documentation-content h2 {
    font-size: 2rem;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
}

.documentation-content h3 {
    font-size: 1.5rem;
    color: #495057;
}

.documentation-content h4 {
    font-size: 1.25rem;
    color: #6c757d;
}

.documentation-content code {
    background-color: #f8f9fa;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
    color: #e83e8c;
}

.documentation-content pre {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 1rem;
    overflow-x: auto;
}

.documentation-content pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
}

.documentation-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.documentation-content table th,
.documentation-content table td {
    padding: 0.75rem;
    border: 1px solid #dee2e6;
}

.documentation-content table thead th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.documentation-content blockquote {
    border-left: 4px solid #007bff;
    padding-left: 1rem;
    margin-left: 0;
    color: #6c757d;
    font-style: italic;
}

.documentation-content ul,
.documentation-content ol {
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.documentation-content li {
    margin-bottom: 0.5rem;
}

.documentation-content img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.documentation-content a {
    color: #007bff;
    text-decoration: none;
}

.documentation-content a:hover {
    text-decoration: underline;
}

.toc-link {
    transition: all 0.2s;
}

.toc-link:hover {
    color: #007bff !important;
    padding-left: 5px;
}

.list-group-item.active {
    background-color: #007bff;
    border-color: #007bff;
}

@media print {
    .col-md-3, .col-lg-2, .col-lg-3 {
        display: none !important;
    }
    
    .col-lg-9 {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    nav, .btn, .border-top {
        display: none !important;
    }
}
</style>

<script>
// Smooth scrolling for TOC links
document.querySelectorAll('.toc-link').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href').substring(1);
        const targetElement = document.getElementById(targetId);
        
        if (targetElement) {
            targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
            
            // Highlight the section briefly
            targetElement.style.backgroundColor = '#fffbcc';
            setTimeout(() => {
                targetElement.style.backgroundColor = '';
            }, 2000);
        }
    });
});

// Active TOC item on scroll
window.addEventListener('scroll', function() {
    const tocLinks = document.querySelectorAll('.toc-link');
    const sections = [];
    
    tocLinks.forEach(link => {
        const targetId = link.getAttribute('href').substring(1);
        const section = document.getElementById(targetId);
        if (section) {
            sections.push({ link, section });
        }
    });
    
    let current = '';
    sections.forEach(({ link, section }) => {
        const sectionTop = section.offsetTop;
        if (window.pageYOffset >= sectionTop - 100) {
            current = link.getAttribute('href');
        }
    });
    
    tocLinks.forEach(link => {
        link.classList.remove('fw-bold', 'text-primary');
        link.classList.add('text-muted');
        if (link.getAttribute('href') === current) {
            link.classList.add('fw-bold', 'text-primary');
            link.classList.remove('text-muted');
        }
    });
});
</script>

@endsection