@extends('layouts.admin-simple')

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

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.pages.index') }}">Pages</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.pages.show', $page) }}">{{ $page->title }}</a></li>
    <li class="breadcrumb-item active" aria-current="page">Preview</li>
@endsection

@section('page-actions')
    <div class="ml-auto d-flex gap-2">
        @if($page->is_enabled)
            <a href="{{ $page->url }}" class="btn btn-outline-success" target="_blank">
                <i class="material-icons">open_in_new</i> View Live
            </a>
        @endif
        <a href="{{ route('admin.pages.edit', $page) }}" class="btn btn-primary">
            <i class="material-icons">edit</i> Edit
        </a>
    </div>
@endsection

@section('content')
    <!-- Page Preview -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <h5 class="card-title">Page Preview</h5>
                <div class="card-subtitle text-muted">Template: {{ ucfirst($page->template) }}</div>
            </div>
            <div class="d-flex gap-2">
                @if(!$page->is_enabled)
                    <span class="badge badge-warning">Page Disabled</span>
                @endif
                @if(!$page->show_in_nav)
                    <span class="badge badge-secondary">Hidden from Navigation</span>
                @endif
            </div>
        </div>
        <div class="card-body p-0">
            <!-- Meta Information -->
            <div class="border-bottom p-4 bg-light">
                <div class="row">
                    <div class="col-md-6">
                        <h1 class="h3 mb-2">{{ $page->title }}</h1>
                        @if($page->meta_description)
                            <p class="text-muted mb-0">{{ $page->meta_description }}</p>
                        @endif
                    </div>
                    <div class="col-md-6">
                        <div class="text-md-end">
                            <small class="text-muted d-block">URL: <code>{{ $page->slug }}</code></small>
                            <small class="text-muted d-block">Route: <code>{{ $page->route_name }}</code></small>
                            @if($page->meta_keywords)
                                <div class="mt-2">
                                    @foreach(explode(',', $page->meta_keywords) as $keyword)
                                        <span class="badge badge-light me-1">{{ trim($keyword) }}</span>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Content Sections Preview -->
            @if($page->content_sections && count($page->content_sections) > 0)
                <div class="p-4">
                    <h6 class="text-muted mb-3">Content Sections</h6>
                    
                    @php
                        $sections = collect($page->content_sections)
                            ->filter(fn($section) => $section['is_enabled'] ?? true)
                            ->sortBy('order');
                    @endphp
                    
                    @foreach($sections as $key => $section)
                        <div class="content-section-preview mb-4 pb-4 {{ !$loop->last ? 'border-bottom' : '' }}">
                            @if(!empty($section['title']))
                                <h4 class="mb-3">{{ $section['title'] }}</h4>
                            @endif
                            
                            @if(!empty($section['content']))
                                <div class="content-body">
                                    @switch($section['type'] ?? 'text')
                                        @case('hero')
                                            <div class="hero-preview bg-primary text-white p-4 rounded">
                                                <div class="text-center">
                                                    @if(!empty($section['title']))
                                                        <h1 class="display-4 mb-3">{{ $section['title'] }}</h1>
                                                    @endif
                                                    <p class="lead">{{ $section['content'] }}</p>
                                                </div>
                                            </div>
                                            @break
                                            
                                        @case('cta')
                                            <div class="cta-preview bg-warning p-4 rounded text-center">
                                                @if(!empty($section['title']))
                                                    <h3 class="mb-3">{{ $section['title'] }}</h3>
                                                @endif
                                                <p class="mb-3">{{ $section['content'] }}</p>
                                                <button class="btn btn-dark">Call to Action</button>
                                            </div>
                                            @break
                                            
                                        @case('html')
                                            <div class="html-preview">
                                                <div class="alert alert-info">
                                                    <strong>HTML Content:</strong> This section contains custom HTML code.
                                                </div>
                                                <pre class="bg-light p-3 rounded"><code>{{ $section['content'] }}</code></pre>
                                            </div>
                                            @break
                                            
                                        @case('image')
                                            <div class="image-preview">
                                                <div class="alert alert-info">
                                                    <strong>Image Section:</strong> {{ $section['content'] }}
                                                </div>
                                                <div class="bg-light border rounded p-4 text-center">
                                                    <i class="material-icons" style="font-size: 48px; color: #ccc;">image</i>
                                                    <p class="text-muted mt-2">Image placeholder</p>
                                                </div>
                                            </div>
                                            @break
                                            
                                        @default
                                            <div class="text-preview">
                                                {!! nl2br(e($section['content'])) !!}
                                            </div>
                                    @endswitch
                                </div>
                            @endif
                            
                            <div class="section-meta mt-3">
                                <small class="text-muted">
                                    Type: <span class="badge badge-info">{{ ucfirst($section['type'] ?? 'text') }}</span>
                                    Order: {{ $section['order'] ?? 0 }}
                                </small>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="p-4 text-center text-muted">
                    <i class="material-icons" style="font-size: 48px;">description</i>
                    <p class="mt-2">No content sections defined for this page.</p>
                </div>
            @endif

            <!-- Custom CSS/JS Preview -->
            @if($page->custom_css || $page->custom_js)
                <div class="border-top p-4 bg-light">
                    <h6 class="text-muted mb-3">Custom Styling</h6>
                    
                    @if($page->custom_css)
                        <div class="mb-3">
                            <strong>Custom CSS:</strong>
                            <div class="alert alert-warning mt-2">
                                <small>Custom CSS is present and will be applied to the live page.</small>
                            </div>
                        </div>
                    @endif
                    
                    @if($page->custom_js)
                        <div class="mb-3">
                            <strong>Custom JavaScript:</strong>
                            <div class="alert alert-warning mt-2">
                                <small>Custom JavaScript is present and will be executed on the live page.</small>
                            </div>
                        </div>
                    @endif
                </div>
            @endif
        </div>
    </div>

    <!-- Page Settings Summary -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Page Settings</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-4"><strong>Status:</strong></div>
                        <div class="col-8">
                            <span class="badge {{ $page->is_enabled ? 'badge-success' : 'badge-danger' }}">
                                {{ $page->is_enabled ? 'Enabled' : 'Disabled' }}
                            </span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-4"><strong>Navigation:</strong></div>
                        <div class="col-8">
                            <span class="badge {{ $page->show_in_nav ? 'badge-info' : 'badge-secondary' }}">
                                {{ $page->show_in_nav ? 'Visible' : 'Hidden' }}
                            </span>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-4"><strong>Sort Order:</strong></div>
                        <div class="col-8">{{ $page->sort_order }}</div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-4"><strong>Template:</strong></div>
                        <div class="col-8">{{ ucfirst($page->template) }}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">SEO Information</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-4"><strong>Title Length:</strong></div>
                        <div class="col-8">{{ strlen($page->title) }} characters</div>
                    </div>
                    @if($page->meta_description)
                    <div class="row mb-2">
                        <div class="col-4"><strong>Description:</strong></div>
                        <div class="col-8">
                            {{ strlen($page->meta_description) }}/160 characters
                            @if(strlen($page->meta_description) > 160)
                                <span class="text-danger">⚠️ Too long</span>
                            @elseif(strlen($page->meta_description) < 120)
                                <span class="text-warning">⚠️ Too short</span>
                            @else
                                <span class="text-success">✓ Good</span>
                            @endif
                        </div>
                    </div>
                    @endif
                    @if($page->meta_keywords)
                    <div class="row mb-2">
                        <div class="col-4"><strong>Keywords:</strong></div>
                        <div class="col-8">{{ count(explode(',', $page->meta_keywords)) }} keywords</div>
                    </div>
                    @endif
                    <div class="row">
                        <div class="col-4"><strong>URL:</strong></div>
                        <div class="col-8"><code>/{{ $page->slug }}</code></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
.content-section-preview {
    position: relative;
}

.hero-preview {
    min-height: 200px;
    display: flex;
    align-items: center;
}

.cta-preview {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.html-preview pre {
    max-height: 200px;
    overflow-y: auto;
}

.image-preview .bg-light {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-meta {
    border-top: 1px solid #e9ecef;
    padding-top: 0.75rem;
}
</style>
@endpush