@extends('dashboard.admin.layouts.master')

@php
    $locales = ['ar' => 'العربية', 'en' => 'English'];
    $text = fn (string $field, string $locale) => $about->getTranslation($field, $locale, false);
@endphp

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack flex-wrap gap-3">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('dash_site.details') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted"><a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">{{ trans('Toolbar.home') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted"><a href="{{ route('admin.about.index') }}" class="text-muted text-hover-primary">{{ trans('dash_site.about_records') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">#{{ $about->id }}</li>
            </ul>
        </div>
        <div class="d-flex align-items-center gap-2">
            @if ($about->is_active)
                <a href="{{ route('about') }}" target="_blank" rel="noopener" class="btn btn-sm btn-light"><i class="bi bi-box-arrow-up-right"></i>{{ trans('dash_site.about_view_site') }}</a>
            @else
                <form action="{{ route('admin.about.activate', $about) }}" method="POST">
                    @csrf @method('PATCH')
                    <button type="submit" class="btn btn-sm btn-light-success"><i class="bi bi-broadcast"></i>{{ trans('dash_site.about_activate') }}</button>
                </form>
            @endif
            <a href="{{ route('admin.about.edit', $about) }}" class="btn btn-sm btn-primary"><i class="bi bi-pencil"></i>{{ trans('forms.edite_btn') }}</a>
            <a href="{{ route('admin.about.index') }}" class="btn btn-sm btn-light">{{ trans('dash_site.Back') }}</a>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxxl">
        <div class="row g-7">
            <div class="col-xl-4">
                <div class="card card-flush mb-7">
                    <div class="card-body pt-7">
                        <div class="d-flex justify-content-between align-items-center mb-5">
                            <span class="text-muted fw-semibold">{{ trans('dash_site.contact_status') }}</span>
                            @if ($about->is_active)
                                <span class="badge badge-light-success fs-7"><i class="bi bi-broadcast text-success me-1"></i>{{ trans('dash_site.about_live') }}</span>
                            @else
                                <span class="badge badge-light-secondary fs-7">{{ trans('dash_site.about_not_live') }}</span>
                            @endif
                        </div>
                        <div class="d-flex justify-content-between mb-3">
                            <span class="text-muted fw-semibold">{{ trans('dash_site.about_created') }}</span>
                            <span class="fw-semibold">{{ $about->created_at?->format('Y-m-d h:i A') }}</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-muted fw-semibold">{{ trans('dash_site.about_last_updated') }}</span>
                            <span class="fw-semibold">{{ $about->updated_at?->format('Y-m-d h:i A') }}</span>
                        </div>
                    </div>
                </div>

                @foreach ([
                    trans('dash_site.image') => $about->image_path,
                    trans('dash_site.about_secondary_image') => $about->secondary_image_path,
                    trans('dash_site.seo_image') => $about->seo_image_path,
                ] as $label => $url)
                    <div class="card card-flush mb-7">
                        <div class="card-header min-h-50px"><div class="card-title fs-6 fw-bold">{{ $label }}</div></div>
                        <div class="card-body pt-0">
                            <a href="{{ $url }}" target="_blank" rel="noopener">
                                <img src="{{ $url }}" class="w-100 rounded object-fit-cover" style="max-height: 220px;" alt="{{ $label }}">
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="col-xl-8">
                <div class="card card-flush mb-7">
                    <div class="card-header"><div class="card-title"><h3 class="fw-bold">{{ trans('dash_site.about_content') }}</h3></div></div>
                    <div class="card-body pt-0">
                        <div class="row g-7">
                            @foreach ($locales as $locale => $language)
                                <div class="col-lg-6" dir="{{ $locale === 'ar' ? 'rtl' : 'ltr' }}">
                                    <span class="badge badge-light-primary mb-4">{{ $language }}</span>
                                    <h2 class="fw-bold text-gray-900 mb-4">{{ $text('title', $locale) ?: $text('address', $locale) ?: '—' }}</h2>
                                    <div class="text-gray-700 fs-6 lh-lg" style="white-space: pre-line;">{{ strip_tags((string) ($text('description', $locale) ?: $text('details', $locale))) ?: '—' }}</div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="card card-flush">
                    <div class="card-header"><div class="card-title"><h3 class="fw-bold">{{ trans('dash_site.about_seo') }}</h3></div></div>
                    <div class="card-body pt-0">
                        <div class="row g-7">
                            @foreach ($locales as $locale => $language)
                                <div class="col-lg-6" dir="{{ $locale === 'ar' ? 'rtl' : 'ltr' }}">
                                    <span class="badge badge-light-primary mb-4">{{ $language }}</span>
                                    <div class="mb-4">
                                        <div class="text-muted fs-7">{{ trans('dash_site.seo_title') }}</div>
                                        <div class="fw-semibold">{{ $text('seo_title', $locale) ?: '—' }}</div>
                                    </div>
                                    <div class="mb-4">
                                        <div class="text-muted fs-7">{{ trans('dash_site.seo_description') }}</div>
                                        <div class="fw-semibold">{{ $text('seo_description', $locale) ?: '—' }}</div>
                                    </div>
                                    <div>
                                        <div class="text-muted fs-7">{{ trans('dash_site.seo_keywords') }}</div>
                                        <div class="fw-semibold">{{ $text('seo_keywords', $locale) ?: '—' }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection