@extends('layouts.app')

@php
    // التحقق من البيانات: إذا كانت نصاً نقوم بفكها، وإذا كانت مصفوفة نستخدمها مباشرة
    $title = is_string($articleData['title']) ? json_decode($articleData['title'], true) : $articleData['title'];
    $content = is_string($articleData['content']) ? json_decode($articleData['content'], true) : $articleData['content'];
    
    // استخراج النصوص بالعربية
    $currentTitle = $title['ar'] ?? ($articleData['title'] ?? 'تفاصيل المقال');
    $currentContent = $content['ar'] ?? ($articleData['content'] ?? '');
@endphp

@section('title', $currentTitle)

@section('meta_title', $currentTitle)
@section('og:image', $articleData['facility'] ?? asset('images/RFav.png'))

@push('styles')
    <style>
        /* الحاوية الرئيسية للخلفية */
        .bg-img {
            background-image: url("{{ asset('/images/slide.png') }}"); 
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-color: #000;
            position: relative;
            min-height: 100vh;
            width: 100% !important;
            max-width: 100% !important;
            z-index: 1;
        }

        /* الطبقة الرمادية (Gradient) */
        .bg-img:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(30, 31, 32, 0.8), rgba(40, 42, 45, 0.7), rgba(30, 31, 32, 0.8));
            z-index: -1;
        }

        /* تنسيق الشبكة لضمان التمركز */
        .article-details-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 5% 3%;
            position: relative;
            z-index: 2;
        }

        /* كارد المقال الرئيسي */
   .article-main-card {
    background: rgba(18, 18, 18, 0.75);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    color: #fff;
    max-height: 87vh; 
    overflow-y: auto; 
    position: relative;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

/* إخفاء شريط التمرير لمتصفحات Chrome و Safari و Edge الحديث */
.article-main-card::-webkit-scrollbar {
    display: none;
}

        .article-main-card h1 {
            color: #fff;
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 20px;
            line-height: 1.5;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        }

        .article-meta-info {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
            color: #ccc;
            font-size: 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 15px;
        }

        .article-meta-info span i {
            color: #e57e3a;
            margin-left: 5px;
        }

        .featured-image-wrapper {
            width: 100%;
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 30px;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .featured-image-wrapper img {
         width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
        }

        .article-content-text {
            color: #eee;
            line-height: 1.9;
            font-size: 17px;
        }

        .article-content-text p { margin-bottom: 15px; }

        @media (max-width: 768px) {
            .article-details-grid { padding: 14% 3%; }
            .article-main-card { padding: 20px;
            /* تحديد الارتفاع وتفعيل التمرير */
                max-height: 90vh !important;  }
            .article-main-card h1 { font-size: 20px; }
        }

/* تحسين شكل السكرول بار ليناسب التصميم المظلم */
.article-main-card::-webkit-scrollbar {
    width: 6px;
}

.article-main-card::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.article-main-card::-webkit-scrollbar-thumb {
    background: #e57e3a; /* لون الثيم الخاص بك */
    border-radius: 10px;
}
    </style>
@endpush

@section('content')
<div class="bg-img">
    <div class="article-details-grid">
        <div class="article-main-card">
            
            <header>
                <div class="article-meta-info">
                    {{-- عرض التاريخ القادم من API --}}
                    <span>
                        <i class="far fa-calendar-alt"></i> 
                        {{ isset($articleData['created_at']) ? date('d M Y', strtotime($articleData['created_at'])) : '' }}
                    </span>
                    <span><i class="far fa-user"></i> {{ __('الإدارة') }}</span>
                </div>
                
                {{-- العنوان المربوط --}}
                <h1>{{ $currentTitle }}</h1>
            </header>

            {{-- الصورة المربوطة --}}
            <div class="featured-image-wrapper">
                <img src="{{ $articleData['facility'] ?? 'https://darb.newtouch.dev/images/blog-default.jpg' }}" alt="{{ $currentTitle }}">
            </div>

            {{-- المحتوى المربوط مع دعم HTML --}}
            <div class="article-content-text">
                {!! $currentContent !!}
            </div>

        </div>
    </div>
</div>
@endsection