@extends('layouts.admin')

@section('title', 'View Homepage Section')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">View Homepage Section</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard', ['locale' => app()->getLocale()]) }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.manage.homepage-sections.index', ['locale' => app()->getLocale()]) }}">Homepage Sections</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $section->title_en ?? 'Untitled Section' }}</li>
                </ol>
            </nav>
        </div>
        <div>
            <a href="{{ route('admin.manage.homepage-sections.edit', array_merge(['homepage_section' => $section->id], ['locale' => app()->getLocale()])) }}" class="btn btn-primary">
                <i class="fas fa-edit"></i> Edit Section
            </a>
            <a href="{{ route('admin.manage.homepage-sections.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Sections
            </a>
        </div>
    </div>

    <!-- Section Details -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Section Information</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Section Key:</label>
                                <p>{{ $section->section_key }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Section Type:</label>
                                <p>{{ $section->type_display }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Title (English):</label>
                                <p>{{ $section->title_en ?? 'Not set' }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Title (Arabic):</label>
                                <p>{{ $section->title_ar ?? 'Not set' }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Sort Order:</label>
                                <p>{{ $section->sort_order }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Status:</label>
                                <p>
                                    @if($section->is_active)
                                        <span class="badge bg-success">Active</span>
                                    @else
                                        <span class="badge bg-secondary">Inactive</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Created:</label>
                                <p>{{ $section->created_at->format('M d, Y H:i') }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Updated:</label>
                                <p>{{ $section->updated_at->format('M d, Y H:i') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Content -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Content</h6>
                </div>
                <div class="card-body">
                    <ul class="nav nav-tabs" id="contentTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="english-tab" data-bs-toggle="tab" data-bs-target="#english" type="button" role="tab">English</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="arabic-tab" data-bs-toggle="tab" data-bs-target="#arabic" type="button" role="tab">Arabic</button>
                        </li>
                    </ul>
                    <div class="tab-content mt-3" id="contentTabsContent">
                        <div class="tab-pane fade show active" id="english" role="tabpanel">
                            <div class="content-display">
                                {!! $section->content_en !!}
                            </div>
                        </div>
                        <div class="tab-pane fade" id="arabic" role="tabpanel">
                            <div class="content-display">
                                {!! $section->content_ar !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Styling -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Styling</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Background Color:</label>
                        <div class="d-flex align-items-center">
                            <div class="color-box me-2" style="background-color: {{ $section->background_color ?? '#ffffff' }}; width: 30px; height: 30px; border: 1px solid #ddd;"></div>
                            <span>{{ $section->background_color ?? 'Default' }}</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Text Color:</label>
                        <div class="d-flex align-items-center">
                            <div class="color-box me-2" style="background-color: {{ $section->text_color ?? '#000000' }}; width: 30px; height: 30px; border: 1px solid #ddd;"></div>
                            <span>{{ $section->text_color ?? 'Default' }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Settings -->
            @if($section->settings)
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Settings</h6>
                </div>
                <div class="card-body">
                    <pre class="bg-light p-3 rounded"><code>{{ json_encode($section->settings, JSON_PRETTY_PRINT) }}</code></pre>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.content-display {
    min-height: 200px;
    padding: 15px;
    border: 1px solid #e3e6f0;
    border-radius: 5px;
    background-color: #f8f9fc;
}
</style>
@endsection