@extends('layouts.app')

@section('title', $newsItem['title'])

@section('meta_title', $newsItem['title'])
@section('og:image', $newsItem['image_url'] ?? 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: absolute !important;
            min-height: fit-content !important;
            width: 100% !important;
            max-width: 100% !important;
            z-index: 1;
            overflow-y: visible !important;
        }

        /* الطبقة الرمادية (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;
        }

        /* تنسيق الشبكة لضمان التمركز */
        .news-details-grid {
            display: grid;
            grid-template-columns: 1fr 350px; /* Right: main, Left: sidebar */
            gap: 25px;
            padding: 5% 5%;
            position: relative;
            z-index: 2;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* كارد الخبر الرئيسي */
        .news-main-card {
            background: rgba(18, 18, 18, 0.65);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 40px;
            color: #fff;
            max-height: 87vh; 
            overflow-y: auto; 
            position: relative;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }

        /* Sidebar Styles */
        .news-sidebar {
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-height: 87vh;
            overflow-y: auto;
            scrollbar-width: none;
            background: rgba(18, 18, 18, 0.65);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 25px;
        }

        .news-sidebar::-webkit-scrollbar { display: none; }

        .sidebar-title {
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            margin-bottom: 10px;
            padding-right: 10px;
            border-right: 4px solid #e57e3a;
        }

        .latest-news-item {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 12px;
            display: flex;
            gap: 12px;
            text-decoration: none;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .latest-news-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: scale(1.02);
            border-color: rgba(229, 126, 58, 0.3);
        }

        .latest-news-img {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .latest-news-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .latest-news-info h4 {
            font-size: 14px;
            color: #fff;
            margin-bottom: 5px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .latest-news-info span {
            font-size: 12px;
            color: #aaa;
        }

        .news-main-card::-webkit-scrollbar {
            display: none; /* Chrome, Safari and Opera */
        }

        .news-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);
        }

        .news-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;
        }

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

        .news-tag {
            background: #e57e3a;
            color: #fff;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 10px;
            display: inline-block;
        }

        .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: 500px;
            object-fit: cover;
        }

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

        .news-content-text p { margin-bottom: 15px; }
        .news-content-text img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            margin: 15px 0;
        }

        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #fff;
            text-decoration: none;
            margin-bottom: 20px;
            font-weight: bold;
            transition: color 0.3s ease;
        }

        .back-btn:hover {
            color: #e57e3a;
        }

        .news-share-detail {
            display: flex;
            gap: 15px;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .share-btn-detail {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #fff !important;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.1);
            text-decoration: none !important;
        }

        .share-btn-detail:hover {
            transform: translateY(-3px);
            background: #e57e3a;
        }

        .share-btn-detail.whatsapp:hover { background: #25D366; }
        .share-btn-detail.twitter:hover { background: #000; }
        .share-btn-detail.facebook:hover { background: #1877F2; }
        .share-btn-detail.linkedin:hover { background: #0077B5; }

        @media (max-width: 1024px) {
            .bg-img {
                background-attachment: scroll;
            }
            .news-details-grid {
                grid-template-columns: 1fr;
                padding: 10% 3%;
            }
            .news-sidebar {
                max-height: none;
                overflow: visible;
            }
        }

        @media (max-width: 768px) {
            .news-details-grid { padding: 14% 3%; }
            .news-main-card { 
                padding: 25px; 
                max-height: none !important; 
                overflow: visible !important;
            }
            .news-main-card h1 { font-size: 22px; }
        }
    </style>
@endpush

@section('content')
<div class="bg-img">
    <div class="news-details-grid">
        <div class="news-main-card">
            
          

            <header>
                <div class="news-tag">
                    {{ $newsItem['group_label'] }}
                </div>

                <div class="news-meta-info">
                    <span>
                        <i class="far fa-calendar-alt"></i> 
                        {{ $newsItem['date'] }}
                    </span>
                    <span><i class="far fa-user"></i> {{ __('الإدارة') }}</span>
                </div>
                
                <h1>{{ $newsItem['title'] }}</h1>
            </header>

            <div class="featured-image-wrapper">
                @if ($newsItem['image_url'])
                    <img src="{{ $newsItem['image_url'] }}" alt="{{ $newsItem['title'] }}">
                @else
                    <img src="{{ asset('images/drbBg.png') }}" alt="{{ $newsItem['title'] }}">
                @endif
            </div>

            <div class="news-content-text">
                @if(!empty($newsItem['description']))
                    <div class="description-section mb-4">
                        {!! \App\Helpers\TextHelper::linkify($newsItem['description']) !!}
                    </div>
                @endif

                @if(!empty($newsItem['details']))
                    <div class="details-section">
                        {!! $newsItem['details'] !!}
                    </div>
                @endif
            </div>

            <div class="news-share-detail">
                <a href="https://wa.me/?text={{ urlencode(($newsItem['title'] ?? '') . ' ' . url()->current()) }}" target="_blank" class="share-btn-detail whatsapp" title="WhatsApp">
                    <i class="fab fa-whatsapp"></i>
                </a>
                <a href="https://twitter.com/intent/tweet?text={{ urlencode($newsItem['title'] ?? '') }}&url={{ urlencode(url()->current()) }}"
   target="_blank"
   class="share-btn-detail twitter"
   title="X (Twitter)">

    <img src="{{ asset('images/x.png') }}" alt="X" style="width: 18px; height: 18px;">
</a>
                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" target="_blank" class="share-btn-detail facebook" title="Facebook">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(url()->current()) }}&title={{ urlencode($newsItem['title'] ?? '') }}" target="_blank" class="share-btn-detail linkedin" title="LinkedIn">
                    <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="javascript:void(0)" onclick="copyToClipboard('{{ url()->current() }}')" class="share-btn-detail copy" title="{{ __('media.copy_link') ?? 'نسخ الرابط' }}">
                    <i class="fas fa-link"></i>
                </a>
            </div>

        </div> <!-- End of news-main-card -->

        <!-- Sidebar: Latest News -->
        <aside class="news-sidebar">
            <h3 class="sidebar-title">{{ __('آخر الأخبار') }}</h3>
            @foreach($latestNews as $latest)
                <a href="{{ route('components/newsDetails', $latest['id']) }}" class="latest-news-item">
                    @if($latest['image_url'])
                        <img src="{{ $latest['image_url'] }}" alt="{{ $latest['title'] }}" class="latest-news-img">
                    @else
                        <img src="{{ asset('images/drbBg.png') }}" alt="{{ $latest['title'] }}" class="latest-news-img">
                    @endif
                    <div class="latest-news-info">
                        <h4>{{ $latest['title'] }}</h4>
                        <span><i class="far fa-calendar-alt ml-1"></i> {{ $latest['date'] }}</span>
                    </div>
                </a>
            @endforeach
        </aside>

    </div>
</div>
@push('scripts')
    <script>
        function copyToClipboard(text) {
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(text).then(() => {
                    showCopySuccess();
                }).catch(err => {
                    console.error('Failed to copy: ', err);
                    fallbackCopyToClipboard(text);
                });
            } else {
                fallbackCopyToClipboard(text);
            }
        }

        function fallbackCopyToClipboard(text) {
            const textArea = document.createElement("textarea");
            textArea.value = text;
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            try {
                document.execCommand('copy');
                showCopySuccess();
            } catch (err) {
                console.error('Fallback: Oops, unable to copy', err);
            }
            document.body.removeChild(textArea);
        }

        function showCopySuccess() {
            Swal.fire({
                icon: 'success',
                title: '{{ __("media.link_copied") ?? "تم نسخ الرابط" }}',
                showConfirmButton: false,
                timer: 1500,
                toast: true,
                position: 'top-end',
                background: '#1a1a1a',
                color: '#fff',
                iconColor: '#e57e3a'
            });
        }
    </script>
@endpush
@endsection