@extends('layouts.app')

@section('title', 'Preview: ' . $article->title)

@section('content')
<div class="container-fluid px-4">
    {{-- Page Header --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.knowledge.index') }}">Knowledge Base</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.knowledge.show', $article) }}">{{ Str::limit($article->title, 30) }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Preview</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 fw-700">Preview: {{ $article->title }}</h1>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ $previewUrl }}" class="btn btn-sm btn-info" target="_blank">
                <i class="fas fa-external-link-alt me-1"></i> Open Live Article
            </a>
            <a href="{{ route('admin.knowledge.edit', $article) }}" class="btn btn-sm btn-primary">
                <i class="fas fa-edit me-1"></i> Edit
            </a>
            <a href="{{ route('admin.knowledge.show', $article) }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Back
            </a>
        </div>
    </div>

    {{-- Preview Alert --}}
    <div class="alert alert-info border-0 shadow-sm mb-4">
        <i class="fas fa-info-circle me-2"></i>
        This is a preview. The article will be accessible at:
        <a href="{{ $previewUrl }}" target="_blank" class="fw-600">{{ $previewUrl }}</a>
    </div>

    {{-- Preview Frame --}}
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
            <h6 class="fw-700 mb-0"><i class="fas fa-desktop me-2 text-primary"></i>Article Preview</h6>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-sm btn-outline-secondary active" onclick="setPreviewMode('desktop', this)">
                    <i class="fas fa-desktop"></i>
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="setPreviewMode('tablet', this)">
                    <i class="fas fa-tablet-alt"></i>
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="setPreviewMode('mobile', this)">
                    <i class="fas fa-mobile-alt"></i>
                </button>
            </div>
        </div>
        <div class="card-body bg-light p-4">
            <div id="previewContainer" class="mx-auto bg-white shadow-sm" style="max-width:100%; transition:max-width 0.3s ease;">
                <div class="p-4 border-bottom">
                    <span class="badge bg-primary mb-2">{{ $article->category?->name ?? 'Uncategorized' }}</span>
                    <h1 class="h2 fw-700 mb-0">{{ $article->title }}</h1>
                </div>

                <div class="p-4">
                    @if($article->content)
                        <div class="article-content">
                            {!! $article->content !!}
                        </div>
                    @else
                        <div class="text-center text-muted py-5">
                            <i class="fas fa-file-alt fa-3x mb-3 d-block opacity-25"></i>
                            <p>No content to preview</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .article-content {
        line-height: 1.7;
    }
    .article-content img {
        max-width: 100%;
        height: auto;
        border-radius: 0.5rem;
    }
    .article-content h1, .article-content h2, .article-content h3 {
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }
    .article-content p {
        margin-bottom: 1rem;
    }
    .article-content blockquote {
        border-left: 4px solid #0d6efd;
        padding-left: 1rem;
        margin: 1rem 0;
        color: #6c757d;
    }
    #previewContainer {
        min-height: 400px;
    }
</style>
@endpush

@push('scripts')
<script>
function setPreviewMode(mode, button) {
    var container = document.getElementById('previewContainer');
    var width = '100%';

    switch (mode) {
        case 'mobile':
            width = '375px';
            break;
        case 'tablet':
            width = '768px';
            break;
        case 'desktop':
        default:
            width = '100%';
            break;
    }

    container.style.maxWidth = width;

    button.parentElement.querySelectorAll('.btn').forEach(function(btn) {
        btn.classList.remove('active');
    });
    button.classList.add('active');
}
</script>
@endpush