@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8 col-md-8">
            <!-- Breadcrumb -->
            <nav aria-label="breadcrumb" class="mb-4" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
                <ol class="breadcrumb" style="{{ app()->getLocale() === 'ar' ? 'text-align: right;' : 'text-align: left;' }}">
                    <li class="breadcrumb-item"><a href="{{ route('home', ['locale' => app()->getLocale()]) }}">{{ __('navigation.home') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('news', ['locale' => app()->getLocale()]) }}">{{ __('navigation.news') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $news->title }}</li>
                </ol>
            </nav>

            <!-- Article Header -->
            <article class="news-article" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
                <header class="article-header mb-4">
                    <div class="d-flex align-items-center mb-3" style="{{ app()->getLocale() === 'ar' ? 'justify-content: flex-end;' : '' }}">
                        <span class="badge" 
                              style="background-color: {{ $news->category->color }}; color: white; {{ app()->getLocale() === 'ar' ? 'margin-left: 0.5rem; margin-right: 0;' : 'margin-right: 0.5rem; margin-left: 0;' }}">
                            {{ $news->category->name }}
                        </span>
                        <small class="text-muted">
                            <i class="fas fa-calendar" style="{{ app()->getLocale() === 'ar' ? 'margin-right: 0.25rem; margin-left: 0;' : 'margin-left: 0.25rem; margin-right: 0;' }}"></i>
                            {{ $news->published_at->format('F j, Y') }}
                        </small>
                        @if($news->read_time)
                        <small class="text-muted" style="{{ app()->getLocale() === 'ar' ? 'margin-right: 1rem; margin-left: 0;' : 'margin-left: 1rem; margin-right: 0;' }}">
                            <i class="fas fa-clock" style="{{ app()->getLocale() === 'ar' ? 'margin-right: 0.25rem; margin-left: 0;' : 'margin-left: 0.25rem; margin-right: 0;' }}"></i>
                            {{ $news->read_time }} {{ __('news.min_read') }}
                        </small>
                        @endif
                    </div>

                    <h1 class="display-6 fw-bold text-dark mb-3" style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                        {{ $news->title }}
                    </h1>

                    <div class="d-flex align-items-center mb-4" style="{{ app()->getLocale() === 'ar' ? 'flex-direction: row-reverse; justify-content: flex-end; text-align: right;' : 'text-align: left;' }}">
                        <img src="{{ optional($news->author)->avatar ?? '/assets/images/avatars/default.jpg' }}"
                             class="rounded-circle"
                             style="width: 48px; height: 48px; {{ app()->getLocale() === 'ar' ? 'margin-right: 0; margin-left: 0.75rem;' : 'margin-left: 0; margin-right: 0.75rem;' }}"
                             alt="{{ optional($news->author)->full_name ?? 'Unknown' }}">
                        <div>
                            <h6 class="fw-bold mb-0">{{ optional($news->author)->full_name ?? 'Unknown' }}</h6>
                            <small class="text-muted">{{ optional($news->author)->position ?? '' }}</small>
                        </div>
                    </div>
                </header>

                <!-- Featured Image -->
                @if($news->featured_image)
                <div class="article-image mb-5">
                    <img src="{{ $news->featured_image }}"
                         class="img-fluid rounded shadow"
                         alt="{{ $news->title }}"
                         style="width: 100%;">
                    @if($news->caption)
                    <figcaption class="text-center text-muted mt-2">
                        {{ $news->caption }}
                    </figcaption>
                    @endif
                </div>
                @endif

                <!-- Article Content -->
                <div class="article-content" style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                    {!! $news->content !!}
                </div>

                <!-- Gallery Images -->
                @if($news->gallery_images && is_array($news->gallery_images) && count($news->gallery_images) > 0)
                <div class="article-gallery mt-5" style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                    <h4 class="h5 fw-bold mb-3">{{ __('navigation.gallery') }}</h4>
                    <div class="row g-3">
                        @foreach($news->gallery_images as $image)
                        <div class="col-md-4">
                            <a href="{{ $image }}" data-lightbox="gallery">
                                <img src="{{ $image }}" class="img-fluid rounded" alt="Gallery Image">
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Tags -->
                @if($news->tags)
                <div class="article-tags mt-4" style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                    <h6 class="fw-bold mb-2">{{ __('navigation.tags') }}:</h6>
                    <div class="d-flex flex-wrap gap-2" style="{{ app()->getLocale() === 'ar' ? 'justify-content: flex-end;' : '' }}">
                        @foreach(explode(',', $news->tags) as $tag)
                        <a href="{{ route('news', ['locale' => app()->getLocale(), 'search' => trim($tag)]) }}"
                           class="badge bg-light text-dark text-decoration-none">
                            #{{ trim($tag) }}
                        </a>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Social Sharing -->
                <div class="social-sharing mt-5 pt-4 border-top" style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                    <h6 class="fw-bold mb-3">{{ __('navigation.share_this_article') }}:</h6>
                    <div class="d-flex gap-2" style="{{ app()->getLocale() === 'ar' ? 'justify-content: flex-end;' : '' }}">
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
                           class="btn btn-outline-primary btn-sm" target="_blank">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($news->title) }}"
                           class="btn btn-outline-info btn-sm" target="_blank">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(url()->current()) }}&title={{ urlencode($news->title) }}"
                           class="btn btn-outline-primary btn-sm" target="_blank">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="mailto:?subject={{ $news->title }}&body={{ urlencode(url()->current()) }}"
                           class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-envelope"></i>
                        </a>
                    </div>
                </div>

                <!-- Article Navigation -->
                <div class="article-navigation d-flex justify-content-between mt-5 pt-4 border-top" style="{{ app()->getLocale() === 'ar' ? 'flex-direction: row-reverse;' : '' }}">
                    @if($prevArticle)
                        <a href="{{ route('news.show', ['locale' => app()->getLocale(), 'slug' => $prevArticle->slug]) }}"
                           class="btn btn-outline-primary">
                            @if(app()->getLocale() === 'ar')
                                <i class="fas fa-arrow-right me-2"></i>
                                {{ __('navigation.previous_article') }}
                            @else
                                <i class="fas fa-arrow-left me-2"></i>
                                {{ __('navigation.previous_article') }}
                            @endif
                        </a>
                    @else
                        <span></span>
                    @endif

                    @if($nextArticle)
                        <a href="{{ route('news.show', ['locale' => app()->getLocale(), 'slug' => $nextArticle->slug]) }}"
                           class="btn btn-outline-primary">
                            @if(app()->getLocale() === 'ar')
                                {{ __('navigation.next_article') }}
                                <i class="fas fa-arrow-left ms-2"></i>
                            @else
                                {{ __('navigation.next_article') }}
                                <i class="fas fa-arrow-right ms-2"></i>
                            @endif
                        </a>
                    @endif
                </div>
            </article>

            <!-- Related News -->
            @if($relatedNews->count() > 0)
            <section class="related-news mt-5 pt-5 border-top" style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                <h3 class="h4 fw-bold mb-4">{{ __('navigation.related_news') }}</h3>
                <div class="row g-4">
                    @foreach($relatedNews as $related)
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm h-100">
                            <img src="{{ $related->featured_image ?: '/assets/images/news/default.jpg' }}"
                                 class="card-img-top"
                                 alt="{{ $related->title }}"
                                 style="height: 200px; object-fit: cover;">
                            <div class="card-body" style="{{ app()->getLocale() === 'ar' ? 'text-align: right; direction: rtl;' : 'text-align: left; direction: ltr;' }}">
                                <span class="badge mb-2"
                                      style="background-color: {{ $related->category->color }}; color: white;">
                                    {{ $related->category->name }}
                                </span>
                                <h5 class="card-title fw-bold">
                                    <a href="{{ route('news.show', ['locale' => app()->getLocale(), 'slug' => $related->slug]) }}"
                                       class="text-dark text-decoration-none">
                                        {{ Str::limit($related->title, 60) }}
                                    </a>
                                </h5>
                                <p class="card-text text-muted small">
                                    {{ Str::limit($related->excerpt, 100) }}
                                </p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">
                                        {{ $related->published_at->diffForHumans() }}
                                    </small>
                                    <a href="{{ route('news.show', ['locale' => app()->getLocale(), 'slug' => $related->slug]) }}"
                                       class="btn btn-primary btn-sm">
                                        {{ __('navigation.read') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </section>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4 col-md-4 mt-5 mt-md-0">
            @include('frontend.news.partials.sidebar')
        </div>
    </div>
</div>
@endsection