@extends('admin.ad_master')

@section('title', $title)
@section('ad_page_title', 'View Maid Link')
@section('ad_page_subtitle', 'View maid link page details')

@section('ad_content')
<div class="container-fluid py-4">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <h1 class="h3 mb-1">View Maid Link</h1>
            <p class="text-muted mb-0">View maid link page details</p>
        </div>

        <div class="d-flex gap-2">
            <a href="{{ route('admin.maid-links.edit', $maidLink) }}" class="btn btn-warning">
                <i class="fa-solid fa-pen-to-square me-2"></i>Edit
            </a>

            <a href="{{ route('admin.maid-links.index') }}" class="btn btn-light border">
                <i class="fa-solid fa-arrow-left me-2"></i>Back
            </a>
        </div>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body p-4">
            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="border rounded p-3 h-100 bg-light-subtle">
                        <div class="mb-3">
                            <div class="small text-muted mb-1">ID</div>
                            <div class="fw-semibold">{{ $maidLink->id }}</div>
                        </div>

                        <div class="mb-3">
                            <div class="small text-muted mb-1">Country</div>
                            <div><span class="badge text-bg-light border">{{ $maidLink->nationality_name }}</span></div>
                        </div>

                        <div class="mb-3">
                            <div class="small text-muted mb-1">Meta Title</div>
                            <div>{{ $maidLink->meta_title ?: '-' }}</div>
                        </div>

                        <div class="mb-3">
                            <div class="small text-muted mb-1">H1</div>
                            <div class="fw-semibold">{{ $maidLink->h1 ?: '-' }}</div>
                        </div>

                        <div class="mb-3">
                            <div class="small text-muted mb-1">Title</div>
                            <div>{{ $maidLink->title ?: '-' }}</div>
                        </div>

                        <div class="mb-3">
                            <div class="small text-muted mb-1">Slug</div>
                            <div><code>{{ $maidLink->slug }}</code></div>
                        </div>

                        <div class="mb-3">
                            <div class="small text-muted mb-1">Meta Keywords</div>
                            <div>{{ $maidLink->meta_keywords ?: '-' }}</div>
                        </div>

                        <div class="mb-0">
                            <div class="small text-muted mb-1">Created At</div>
                            <div>{{ $maidLink->created_at?->format('Y-m-d H:i') ?? '-' }}</div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-8">
                    <div class="border rounded p-3 h-100">
                        <div class="small text-muted mb-3">Image</div>

                        @if($maidLink->image)
                            <img
                                src="{{ asset('storage/' . $maidLink->image) }}"
                                alt="{{ $maidLink->title ?: $maidLink->h1 }}"
                                class="img-fluid rounded border"
                                style="max-height: 320px; object-fit: cover;"
                            >
                        @else
                            <div class="d-flex align-items-center justify-content-center rounded border bg-light text-muted" style="height: 320px;">
                                <div class="text-center">
                                    <i class="fa-regular fa-image fs-2 mb-2"></i>
                                    <div>No image uploaded</div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="col-12">
                    <div class="border rounded p-4 mb-4">
                        <div class="small text-muted mb-3">Meta Description</div>
                        <div>{{ $maidLink->meta_description ?: '-' }}</div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="border rounded p-4 mb-4">
                        <div class="small text-muted mb-3">Content EN</div>

                        @if($maidLink->content_en)
                            <div class="ck-content">{!! $maidLink->content_en !!}</div>
                        @else
                            <div class="text-muted">No English content available.</div>
                        @endif
                    </div>
                </div>

                <div class="col-12">
                    <div class="border rounded p-4">
                        <div class="small text-muted mb-3">Content AR</div>

                        @if($maidLink->content_ar)
                            <div dir="rtl" class="ck-content text-end">{!! $maidLink->content_ar !!}</div>
                        @else
                            <div class="text-muted">No Arabic content available.</div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection