@extends('layouts.admin-simple')

@section('title', $page->title)
@section('page-title', $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 active" aria-current="page">{{ $page->title }}</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.preview', $page) }}" class="btn btn-outline-info" target="_blank">
            <i class="material-icons">preview</i> Preview
        </a>
        <a href="{{ route('admin.pages.edit', $page) }}" class="btn btn-primary">
            <i class="material-icons">edit</i> Edit
        </a>
    </div>
@endsection

@section('content')
    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Page Information -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Page Information</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-sm-3"><strong>Title:</strong></div>
                        <div class="col-sm-9">{{ $page->title }}</div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-sm-3"><strong>Slug:</strong></div>
                        <div class="col-sm-9"><code>{{ $page->slug }}</code></div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-sm-3"><strong>Route Name:</strong></div>
                        <div class="col-sm-9"><code>{{ $page->route_name }}</code></div>
                    </div>
                    
                    @if($page->meta_description)
                    <div class="row mb-3">
                        <div class="col-sm-3"><strong>Meta Description:</strong></div>
                        <div class="col-sm-9">{{ $page->meta_description }}</div>
                    </div>
                    @endif
                    
                    @if($page->meta_keywords)
                    <div class="row mb-3">
                        <div class="col-sm-3"><strong>Meta Keywords:</strong></div>
                        <div class="col-sm-9">
                            @foreach(explode(',', $page->meta_keywords) as $keyword)
                                <span class="badge badge-light me-1">{{ trim($keyword) }}</span>
                            @endforeach
                        </div>
                    </div>
                    @endif
                    
                    @if($page->is_enabled)
                    <div class="row mb-3">
                        <div class="col-sm-3"><strong>Page URL:</strong></div>
                        <div class="col-sm-9">
                            <a href="{{ $page->url }}" target="_blank" class="text-decoration-none">
                                {{ $page->url }} <i class="material-icons" style="font-size: 16px;">open_in_new</i>
                            </a>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Content Sections -->
            @if($page->content_sections && count($page->content_sections) > 0)
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title">Content Sections</h5>
                </div>
                <div class="card-body">
                    @foreach($page->content_sections as $key => $section)
                    <div class="border rounded p-3 mb-3 {{ !($section['is_enabled'] ?? true) ? 'bg-light' : '' }}">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <h6 class="mb-1">
                                    {{ $section['title'] ?? 'Section ' . $loop->iteration }}
                                    @if(!($section['is_enabled'] ?? true))
                                        <span class="badge badge-secondary ms-2">Disabled</span>
                                    @endif
                                </h6>
                                <div class="d-flex gap-3">
                                    <small class="text-muted">Type: <span class="badge badge-info">{{ ucfirst($section['type'] ?? 'text') }}</span></small>
                                    <small class="text-muted">Order: {{ $section['order'] ?? $loop->iteration }}</small>
                                </div>
                            </div>
                        </div>
                        
                        @if(!empty($section['content']))
                        <div class="mt-3">
                            @if(($section['type'] ?? 'text') === 'html')
                                <div class="border rounded p-2 bg-light">
                                    <small class="text-muted d-block mb-2">HTML Content:</small>
                                    <pre class="mb-0"><code>{{ $section['content'] }}</code></pre>
                                </div>
                            @else
                                <div class="content-preview">
                                    {{ Str::limit($section['content'], 200) }}
                                    @if(strlen($section['content']) > 200)
                                        <button type="button" class="btn btn-sm btn-link p-0" onclick="toggleFullContent(this)">
                                            Show more
                                        </button>
                                        <div class="full-content" style="display: none;">
                                            {{ $section['content'] }}
                                        </div>
                                    @endif
                                </div>
                            @endif
                        </div>
                        @endif
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            <!-- Custom CSS/JS -->
            @if($page->custom_css || $page->custom_js)
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title">Custom Styling</h5>
                </div>
                <div class="card-body">
                    @if($page->custom_css)
                    <div class="mb-4">
                        <h6>Custom CSS</h6>
                        <pre class="bg-light p-3 rounded"><code>{{ $page->custom_css }}</code></pre>
                    </div>
                    @endif
                    
                    @if($page->custom_js)
                    <div class="mb-3">
                        <h6>Custom JavaScript</h6>
                        <pre class="bg-light p-3 rounded"><code>{{ $page->custom_js }}</code></pre>
                    </div>
                    @endif
                </div>
            </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Page Status -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Page Status</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>Status:</span>
                        <button 
                            class="btn btn-sm btn-toggle-status {{ $page->is_enabled ? 'btn-success' : 'btn-danger' }}" 
                            data-page-id="{{ $page->id }}"
                            title="Click to {{ $page->is_enabled ? 'disable' : 'enable' }}"
                        >
                            <i class="material-icons">{{ $page->is_enabled ? 'visibility' : 'visibility_off' }}</i>
                            {{ $page->is_enabled ? 'Enabled' : 'Disabled' }}
                        </button>
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>Navigation:</span>
                        @if($page->show_in_nav)
                            <span class="badge badge-info">Visible in Nav</span>
                        @else
                            <span class="badge badge-secondary">Hidden from Nav</span>
                        @endif
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>Sort Order:</span>
                        <span class="badge badge-light">{{ $page->sort_order }}</span>
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <span>Template:</span>
                        <span class="text-capitalize">{{ $page->template }}</span>
                    </div>
                </div>
            </div>

            <!-- Page Information -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title">Details</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-6">
                            <small class="text-muted">Created</small>
                            <div>{{ $page->created_at->format('M j, Y') }}</div>
                            <small class="text-muted">{{ $page->created_at->format('g:i A') }}</small>
                        </div>
                        <div class="col-6">
                            <small class="text-muted">Updated</small>
                            <div>{{ $page->updated_at->format('M j, Y') }}</div>
                            <small class="text-muted">{{ $page->updated_at->format('g:i A') }}</small>
                        </div>
                    </div>
                    
                    @if($page->content_sections)
                    <div class="row mb-3">
                        <div class="col-12">
                            <small class="text-muted">Content Sections</small>
                            <div>{{ count($page->content_sections) }} sections</div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title">Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.pages.edit', $page) }}" class="btn btn-primary">
                            <i class="material-icons">edit</i> Edit Page
                        </a>
                        
                        @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 Page
                            </a>
                        @endif
                        
                        <button type="button" class="btn btn-outline-info" onclick="duplicatePage()">
                            <i class="material-icons">content_copy</i> Duplicate Page
                        </button>
                        
                        <hr class="my-2">
                        
                        <button type="button" class="btn btn-outline-danger" onclick="deletePage()">
                            <i class="material-icons">delete</i> Delete Page
                        </button>
                    </div>
                </div>
            </div>

            <!-- SEO Score (if applicable) -->
            @if($page->meta_description || $page->meta_keywords)
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title">SEO Information</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label small text-muted">Meta Description Length</label>
                        <div class="progress" style="height: 6px;">
                            @php
                                $descLength = strlen($page->meta_description ?? '');
                                $percentage = min(($descLength / 160) * 100, 100);
                                $color = $descLength < 120 ? 'warning' : ($descLength > 160 ? 'danger' : 'success');
                            @endphp
                            <div class="progress-bar bg-{{ $color }}" style="width: {{ $percentage }}%"></div>
                        </div>
                        <small class="text-muted">{{ $descLength }}/160 characters</small>
                    </div>
                    
                    @if($page->meta_keywords)
                    <div>
                        <label class="form-label small text-muted">Keywords</label>
                        <div>{{ count(explode(',', $page->meta_keywords)) }} keywords</div>
                    </div>
                    @endif
                </div>
            </div>
            @endif
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the page "<strong>{{ $page->title }}</strong>"?</p>
                    <p class="text-danger small">This action cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <form method="POST" action="{{ route('admin.pages.destroy', $page) }}" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
// Toggle page status
document.querySelector('.btn-toggle-status').addEventListener('click', function() {
    const pageId = this.dataset.pageId;
    const button = this;
    
    fetch(`/admin/pages/${pageId}/toggle-status`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update button appearance
            if (data.is_enabled) {
                button.className = 'btn btn-sm btn-toggle-status btn-success';
                button.innerHTML = '<i class="material-icons">visibility</i> Enabled';
                button.title = 'Click to disable';
            } else {
                button.className = 'btn btn-sm btn-toggle-status btn-danger';
                button.innerHTML = '<i class="material-icons">visibility_off</i> Disabled';
                button.title = 'Click to enable';
            }
            
            // Show success message
            showAlert('success', data.message);
            
            // Reload page after short delay to update other elements
            setTimeout(() => window.location.reload(), 1500);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('danger', 'Error updating page status.');
    });
});

// Delete page
function deletePage() {
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}

// Duplicate page
function duplicatePage() {
    if (confirm('This will create a copy of this page. Continue?')) {
        fetch(`{{ route('admin.pages.duplicate', $page) }}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => {
            if (response.ok) {
                window.location.href = response.url;
            } else {
                alert('Error duplicating page.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error duplicating page.');
        });
    }
}

// Toggle full content
function toggleFullContent(button) {
    const fullContent = button.nextElementSibling;
    const preview = button.parentElement;
    
    if (fullContent.style.display === 'none') {
        fullContent.style.display = 'block';
        preview.querySelector('.content-preview').style.display = 'none';
        button.textContent = 'Show less';
    } else {
        fullContent.style.display = 'none';
        preview.querySelector('.content-preview').style.display = 'block';
        button.textContent = 'Show more';
    }
}

// Show alert
function showAlert(type, message) {
    const alert = document.createElement('div');
    alert.className = `alert alert-${type} alert-dismissible fade show`;
    alert.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    const container = document.querySelector('.container-fluid');
    container.insertBefore(alert, container.firstChild);
    
    setTimeout(() => {
        alert.remove();
    }, 5000);
}
</script>
@endpush