@extends('backend::layouts.master')

@section('title', 'Configuration Preview - ' . ($key ?? 'Unknown'))

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-0">
                                <i class="fas fa-eye me-2 text-primary"></i>
                                Configuration Preview: {{ ucfirst($key ?? 'Unknown') }}
                            </h4>
                            <small class="text-muted">Language: {{ $languageCode ?? 'en' }}</small>
                        </div>
                        <div>
                            <a href="{{ route('admin.site-configuration.edit', ['key' => $key]) }}" 
                               class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-edit me-1"></i>
                                Edit Configuration
                            </a>
                            <a href="{{ route('admin.site-configuration.index') }}" 
                               class="btn btn-outline-secondary btn-sm">
                                <i class="fas fa-arrow-left me-1"></i>
                                Back to List
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    @if($configuration)
                        <div class="preview-content">
                            <!-- Configuration Data Preview -->
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="fw-bold text-secondary mb-3">Configuration Details</h6>
                                    <div class="table-responsive">
                                        <table class="table table-sm table-borderless">
                                            <tbody>
                                                <tr>
                                                    <td class="fw-semibold text-muted" style="width: 30%;">Section Key:</td>
                                                    <td>{{ $key ?? 'N/A' }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="fw-semibold text-muted">Language:</td>
                                                    <td>{{ $languageCode ?? 'en' }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="fw-semibold text-muted">Status:</td>
                                                    <td>
                                                        @if(is_array($configuration) && isset($configuration['status']))
                                                            <span class="badge bg-{{ $configuration['status'] === 'active' ? 'success' : 'secondary' }}">
                                                                {{ ucfirst($configuration['status']) }}
                                                            </span>
                                                        @else
                                                            <span class="badge bg-success">Active</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="fw-semibold text-muted">Last Updated:</td>
                                                    <td>{{ now()->format('M d, Y H:i') }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <h6 class="fw-bold text-secondary mb-3">Data Values</h6>
                                    <div class="bg-light p-3 rounded">
                                        @if(is_array($configuration))
                                            @foreach($configuration as $key => $value)
                                                @if($key !== 'status' && $key !== 'meta')
                                                    <div class="mb-2">
                                                        <strong class="text-primary">{{ ucfirst(str_replace('_', ' ', $key)) }}:</strong>
                                                        <div class="text-muted ms-3">
                                                            @if(is_array($value))
                                                                <code>{{ json_encode($value, JSON_PRETTY_PRINT) }}</code>
                                                            @elseif(is_string($value) && strlen($value) > 100)
                                                                {{ Str::limit($value, 100) }}
                                                            @else
                                                                {{ $value }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                @endif
                                            @endforeach
                                        @else
                                            <p class="text-muted mb-0">No configuration data available.</p>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Visual Preview Section -->
                            <hr class="my-4">
                            <div class="row">
                                <div class="col-12">
                                    <h6 class="fw-bold text-secondary mb-3">Visual Preview</h6>
                                    <div class="border rounded p-4 bg-white" style="min-height: 200px;">
                                        <div class="text-center py-5">
                                            <i class="fas fa-eye fa-3x text-muted mb-3"></i>
                                            <h5 class="text-muted">Visual Preview</h5>
                                            <p class="text-muted mb-0">
                                                This section would show how the configuration appears on the frontend.
                                                <br>
                                                Configure the theme templates to see the actual visual output.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                            <h5 class="text-muted">No Configuration Found</h5>
                            <p class="text-muted mb-4">
                                The requested configuration section "{{ $key }}" could not be found or loaded.
                            </p>
                            <a href="{{ route('admin.site-configuration.index') }}" class="btn btn-primary">
                                <i class="fas fa-arrow-left me-1"></i>
                                Back to Configurations
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.preview-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.preview-content h6 {
    color: #495057;
    font-weight: 600;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
}

.preview-content .table td {
    padding: 0.5rem 0;
    border: none;
}

.preview-content code {
    background-color: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: #e83e8c;
    border: 1px solid #dee2e6;
}

.preview-content .bg-light {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6;
}

.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
}

.badge {
    font-size: 0.75em;
    padding: 0.35em 0.65em;
}
</style>
@endpush