@extends('layouts.app')

@php
    $locale = app()->getLocale();
    
    // فك تشفير البيانات إذا كانت نصاً (احتياطاً)
    $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[$locale] ?? $title['ar'] ?? 'تفاصيل المقالة';
    $currentContent = $content[$locale] ?? $content['ar'] ?? '';
    
    // تنظيف المحتوى من وسوم الفقرات الفارغة التي تأتي من المحرر (Quill)
    $currentContent = preg_replace('/<p class="ql-align-right ql-direction-rtl"><br><\/p>/', '', $currentContent);
    $currentContent = preg_replace('/<p><br><\/p>/', '', $currentContent);
    
    $facility = $articleData['facility'] ?? asset('images/RFav.png');
    $date = isset($articleData['created_at']) ? \Carbon\Carbon::parse($articleData['created_at'])->locale($locale)->translatedFormat('d F Y') : '';

    // SEO
    $metaTitleRaw = $articleData['meta_title'] ?? null;
    $metaTitle = is_string($metaTitleRaw) ? (json_decode($metaTitleRaw, true)[$locale] ?? json_decode($metaTitleRaw, true)['ar'] ?? $currentTitle) : ($metaTitleRaw[$locale] ?? $metaTitleRaw['ar'] ?? $currentTitle);
    
    $metaDescRaw = $articleData['meta_description'] ?? null;
    $metaDesc = is_string($metaDescRaw) ? (json_decode($metaDescRaw, true)[$locale] ?? json_decode($metaDescRaw, true)['ar'] ?? '') : ($metaDescRaw[$locale] ?? $metaDescRaw['ar'] ?? '');

    $keywordsRaw = $articleData['keyword'] ?? null;
    $keywords = is_string($keywordsRaw) ? (json_decode($keywordsRaw, true)[$locale] ?? json_decode($keywordsRaw, true)['ar'] ?? '') : ($keywordsRaw[$locale] ?? $keywordsRaw['ar'] ?? '');
@endphp

@section('title', $metaTitle)
@section('meta_title', $metaTitle)
@section('description', $metaDesc)
@section('keywords', $keywords)
@section('og:title', $metaTitle)
@section('og:description', $metaDesc)

@push('styles')
    <style>
        body {
            background-color: #1a2a2d !important;
            margin: 0;
            padding: 0;
        }

        .artical-detail-page {
            padding: 140px 20px 60px;
            background-color: #1a2a2d;
            background-image: linear-gradient(rgba(26, 42, 45, 0.8), rgba(26, 42, 45, 0.8)), url("/images/slideDark.png");
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            min-height: 100vh;
            color: #fff;
            margin-top: 0;
        }

        .artical-detail-hero {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 30px;
            align-items: center;
            margin-bottom: 40px;
        }

        .artical-detail-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            padding: 32px;
        }

        .main-header {
            position: fixed !important;
            background: transparent !important;
            border-bottom: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            transition: all 0.4s ease !important;
        }

        .main-header.scrolled {
            background: rgba(26, 42, 45, 0.98) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
            backdrop-filter: blur(15px) !important;
            -webkit-backdrop-filter: blur(15px) !important;
        }

        .artical-detail-hero-text {
            display: grid;
            gap: 18px;
        }

        .artical-detail-headline {
            font-size: clamp(1.8rem, 2.4vw, 2.8rem);
            font-weight: 700;
            color: #f3741f;
            margin: 0;
            line-height: 1.3;
        }

        .artical-detail-breadcrumb {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            color: rgba(255, 255, 255, 0.75);
            font-size: 0.95rem;
            margin-bottom: 10px;
        }

        .artical-detail-breadcrumb a {
            color: #ffffff;
            text-decoration: none;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

        .artical-detail-breadcrumb a:hover {
            opacity: 1;
        }

        .artical-hero-image {
            border-radius: 26px;
            overflow: hidden;
            min-height: 340px;
            background: #111;
            display: grid;
            place-items: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .artical-hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .artical-content-section {
            margin-top: 30px;
            line-height: 1.8;
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.9);
        }

        .section-title {
            font-size: 1.4rem !important;
            font-weight: 700;
            color: #f3741f !important;
            margin-bottom: 20px !important;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .slider-section {
            margin-top: 40px;
        }

        .slider-wrapper {
            position: relative;
            overflow: hidden;
            border-radius: 24px;
        }

        .slider-track {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding-bottom: 10px;
            scrollbar-width: none;
        }

        .slider-track::-webkit-scrollbar {
            display: none;
        }

        .slider-card {
            flex: 0 0 calc((100% - 40px) / 3);
            min-width: 280px;
        }

        .slider-card img {
            width: 100%;
            height: 240px;
            object-fit: cover;
            border-radius: 20px;
            cursor: pointer;
            transition: transform 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .slider-card img:hover {
            transform: scale(1.02);
        }

        .slider-buttons button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: none;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            cursor: pointer;
            display: grid;
            place-items: center;
            transition: background 0.3s;
            z-index: 10;
        }

        .slider-buttons button:hover {
            background: rgba(0, 0, 0, 0.8);
        }

        .slider-buttons .prev-button { left: 15px; }
        .slider-buttons .next-button { right: 15px; }

        .article-meta {
            display: flex;
            gap: 20px;
            color: rgba(255, 255, 255, 1);
            font-size: 0.9rem;
            margin-top: 5px;
        }

        .article-meta span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .btn-brand {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 28px;
            border-radius: 999px;
            background: #d76011;
            color: #ffffff;
            font-weight: 700;
            text-decoration: none;
            transition: background 0.3s, transform 0.2s;
        }

        .btn-brand:hover {
            background: #f3741f;
            transform: translateY(-2px);
        }

        @media (max-width: 960px) {
            .artical-detail-hero {
                grid-template-columns: 1fr;
            }
            .slider-card {
                flex: 0 0 calc((100% - 20px) / 2);
            }
        }

        @media (max-width: 680px) {
            .artical-detail-page {
                padding: 100px 15px 40px;
            }
            .artical-detail-headline {
                font-size: 1.6rem;
            }
            .slider-card {
                flex: 0 0 100%;
            }
        }
    </style>
@endpush

@section('content')
    <main class="artical-detail-page">
        <div class="container">
            <section class="artical-detail-hero artical-detail-card">
                <div class="artical-detail-hero-text">
                    <div class="artical-detail-breadcrumb">
                        <a href="{{ route('components/home') }}">{{ __('الرئيسية') }}</a>
                        <span>/</span>
                        <a href="{{ route('components/media') }}">{{ __('المركز الإعلامي') }}</a>
                        <span>/</span>
                        <span>{{ __('تفاصيل المقالة') }}</span>
                    </div>
                    <h1 class="artical-detail-headline">{{ $currentTitle }}</h1>
                    <div class="article-meta">
                        <span><i class="far fa-calendar-alt"></i> {{ $date }}</span>
                        <span><i class="far fa-user"></i> {{ __('الإدارة') }}</span>
                    </div>
                </div>
                <div class="artical-hero-image">
                    <img src="{{ $facility }}" alt="{{ $currentTitle }}">
                </div>
            </section>

            <section class="artical-detail-card">
                <h2 class="section-title">
                    <i class="fas fa-align-right"></i>
                    {{ __('محتوى المقالة') }}
                </h2>
                <div class="artical-content-section">
                    {!! $currentContent !!}
                </div>
            </section>

            {{--<section class="slider-section artical-detail-card">
                <h2 class="section-title">
                    <i class="far fa-images"></i>
                    {{ __('معرض الصور') }}
                </h2>
                <div class="slider-wrapper">
                    <div class="slider-track" id="articalSlider">
                        <div class="slider-card">
                            <img src="{{ $facility }}" alt="{{ $currentTitle }}" onclick="openImageModal('{{ $facility }}')">
                        </div>
                        <div class="slider-card">
                            <img src="{{ asset('images/slide.png') }}" alt="DRB" onclick="openImageModal('{{ asset('images/slide.png') }}')">
                        </div>
                        <div class="slider-card">
                            <img src="{{ asset('images/bg.png') }}" alt="DRB" onclick="openImageModal('{{ asset('images/bg.png') }}')">
                        </div>
                    </div>
                    <div class="slider-buttons">
                        <button class="prev-button" onclick="moveSlider(-1)">&#10094;</button>
                        <button class="next-button" onclick="moveSlider(1)">&#10095;</button>
                    </div>
                </div>
            </section>

            <div style="text-align: center; margin-top: 40px;">
                <a href="{{ route('components/media') }}" class="btn-brand">
                    {{ __('العودة للمركز الإعلامي') }}
                </a>
            </div>--}}
        </div>
    </main>

    {{-- Modal للصورة --}}
    {{--<div id="imageModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:9999; justify-content:center; align-items:center; padding:20px;" onclick="this.style.display='none'">
        <img id="modalImg" src="" style="max-width:100%; max-height:100%; border-radius:10px; border:2px solid #f3741f;">
    </div>--}}
@endsection

@push('scripts')
    <script>
        function moveSlider(direction) {
            const slider = document.getElementById('articalSlider');
            const scrollAmount = slider.offsetWidth / 2;
            slider.scrollBy({
                left: direction * scrollAmount,
                behavior: 'smooth'
            });
        }

        function openImageModal(url) {
            const modal = document.getElementById('imageModal');
            const img = document.getElementById('modalImg');
            img.src = url;
            modal.style.display = 'flex';
        }
    </script>
@endpush