@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">Page Details: {{ $page->title }}</h3>
                        <div>
                            <a href="{{ route('admin.pages.edit', $page) }}" class="btn btn-primary">
                                <i class="fas fa-edit"></i> Edit Page
                            </a>
                            <a href="{{ route('admin.pages.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to Pages
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <th width="30%">Title:</th>
                                    <td>{{ $page->title }}</td>
                                </tr>
                                <tr>
                                    <th>Route Name:</th>
                                    <td><code>{{ $page->route_name }}</code></td>
                                </tr>
                                <tr>
                                    <th>URL Pattern:</th>
                                    <td><code>{{ $page->url_pattern }}</code></td>
                                </tr>
                                <tr>
                                    <th>Access Level:</th>
                                    <td>
                                        <span class="badge badge-{{ 
                                            $page->access_level === 'public' ? 'success' : 
                                            ($page->access_level === 'auth' ? 'primary' : 
                                            ($page->access_level === 'admin' ? 'warning' : 'danger')) 
                                        }} badge-lg">
                                            {{ ucfirst($page->access_level) }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Status:</th>
                                    <td>
                                        @if($page->is_active)
                                            <span class="badge badge-success badge-lg">Active</span>
                                        @else
                                            <span class="badge badge-secondary badge-lg">Inactive</span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <th width="30%">SSL Required:</th>
                                    <td>
                                        @if($page->require_ssl)
                                            <i class="fas fa-lock text-success"></i> Yes
                                        @else
                                            <i class="fas fa-unlock text-muted"></i> No
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <th>Created:</th>
                                    <td>{{ $page->created_at->format('M j, Y g:i A') }}</td>
                                </tr>
                                <tr>
                                    <th>Last Updated:</th>
                                    <td>{{ $page->updated_at->format('M j, Y g:i A') }}</td>
                                </tr>
                                @if($page->redirect_url)
                                <tr>
                                    <th>Redirect URL:</th>
                                    <td><a href="{{ $page->redirect_url }}" target="_blank">{{ $page->redirect_url }}</a></td>
                                </tr>
                                @endif
                            </table>
                        </div>
                    </div>

                    @if($page->description)
                    <div class="row">
                        <div class="col-12">
                            <h5>Description</h5>
                            <p class="text-muted">{{ $page->description }}</p>
                        </div>
                    </div>
                    @endif

                    @if($page->allowed_roles && count($page->allowed_roles) > 0)
                    <div class="row">
                        <div class="col-12">
                            <h5>Allowed Roles</h5>
                            <div>
                                @foreach($page->allowed_roles as $role)
                                    <span class="badge badge-info mr-1">{{ ucfirst($role) }}</span>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @endif

                    @if($page->meta_data && count($page->meta_data) > 0)
                    <div class="row mt-3">
                        <div class="col-12">
                            <h5>Metadata</h5>
                            <pre class="bg-light p-3 rounded"><code>{{ json_encode($page->meta_data, JSON_PRETTY_PRINT) }}</code></pre>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <!-- Access Control Info -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Access Control</h5>
                </div>
                <div class="card-body">
                    @php
                        $accessInfo = match($page->access_level) {
                            'public' => [
                                'icon' => 'globe',
                                'color' => 'success',
                                'title' => 'Public Access',
                                'description' => 'This page is accessible to everyone, including non-authenticated users.'
                            ],
                            'auth' => [
                                'icon' => 'user',
                                'color' => 'primary',
                                'title' => 'Authenticated Access',
                                'description' => 'This page requires users to be logged in.'
                            ],
                            'admin' => [
                                'icon' => 'user-shield',
                                'color' => 'warning',
                                'title' => 'Administrator Access',
                                'description' => 'This page requires admin or manager privileges.'
                            ],
                            'superadmin' => [
                                'icon' => 'crown',
                                'color' => 'danger',
                                'title' => 'Super Administrator',
                                'description' => 'This page requires admin privileges only.'
                            ]
                        };
                    @endphp

                    <div class="text-center">
                        <div class="mb-3">
                            <i class="fas fa-{{ $accessInfo['icon'] }} fa-3x text-{{ $accessInfo['color'] }}"></i>
                        </div>
                        <h6 class="text-{{ $accessInfo['color'] }}">{{ $accessInfo['title'] }}</h6>
                        <p class="text-muted small">{{ $accessInfo['description'] }}</p>
                    </div>

                    @if($page->allowed_roles && count($page->allowed_roles) > 0)
                        <hr>
                        <h6>Additional Role Restrictions:</h6>
                        <ul class="list-unstyled">
                            @foreach($page->allowed_roles as $role)
                                <li><i class="fas fa-user-tag text-info"></i> {{ ucfirst($role) }}</li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card">
                <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 btn-block">
                            <i class="fas fa-edit"></i> Edit Page
                        </a>
                        
                        <form method="POST" action="{{ route('admin.pages.toggle-status', $page) }}">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-{{ $page->is_active ? 'warning' : 'success' }} btn-block">
                                <i class="fas fa-{{ $page->is_active ? 'pause' : 'play' }}"></i>
                                {{ $page->is_active ? 'Deactivate' : 'Activate' }}
                            </button>
                        </form>

                        <form method="POST" action="{{ route('admin.pages.destroy', $page) }}" 
                              onsubmit="return confirm('Are you sure you want to delete {{ $page->title }}? This action cannot be undone.')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-block">
                                <i class="fas fa-trash"></i> Delete Page
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Page Statistics -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Page Information</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border-right">
                                <h6 class="mb-0">{{ $page->is_active ? 'Active' : 'Inactive' }}</h6>
                                <small class="text-muted">Status</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <h6 class="mb-0">{{ $page->require_ssl ? 'Yes' : 'No' }}</h6>
                            <small class="text-muted">SSL Required</small>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="text-center">
                        <small class="text-muted">
                            Created {{ $page->created_at->diffForHumans() }}<br>
                            Updated {{ $page->updated_at->diffForHumans() }}
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.badge-lg {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}
</style>
@endsection