@extends('layouts.app')

@section('page-title', $news->title . " - " . config('app.name') )

@section('content')
    {{ Diglactic\Breadcrumbs\Breadcrumbs::render() }}
    <article id="news-container">
        <div class="news-header"
             style="background-image: linear-gradient(rgba(0,0,0,0.4), var(--bg2)), url('{{ $news->gallery()->first() ? Storage::url($news->gallery()->first()->image ) : '' }}')">
                <div class="news-header-content">
                    <h1 class="news-title">
                        {{ $news->title }}
                        @if( $news->state === 'pending' )
                            <div style="display:inline;color:var(--rhpz-orange);">
                                -
                                <i data-lucide="clock" size="24"></i>
                                Pending approval
                            </div>
                        @elseif( $news->state === 'rejected' )
                            <div style="display:inline;color:var(--error);">
                                -
                                <i data-lucide="x-circle" size="24"></i>
                                Rejected
                            </div>
                        @elseif( $news->state === 'locked' )
                            <div style="display:inline;color:var(--error);">
                                -
                                <i data-lucide="lock" size="24"></i>
                                Locked
                            </div>
                        @elseif( $news->state === 'draft' )
                            <div style="display:inline;color:var(--rhpz-orange);">
                                -
                                <i data-lucide="scissors" size="24"></i>
                                Draft
                            </div>
                        @elseif( $news->state === 'hidden' )
                            <div style="display:inline;color:var(--rhpz-orange);">
                                -
                                <i data-lucide="hide" size="24"></i>
                                Hidden
                            </div>
                        @endif
                    </h1>
                    <div class="news-meta">
                        @if($news->category_id)
                            <a href="{{ newsRoute( ['categories' => [ $news->category_id ] ]) }}" class="meta-item">
                                <i data-lucide="book" size="16"></i>
                                {{ $news->category->name }}
                            </a>
                        @endif
                        @if($news->user_id)
                            <span class="meta-item">
                                <i data-lucide="user" size="16"></i>
                                Posted by <x-xf-username-link :user-id="$news->user_id"/>
                            </span>
                        @endif
                        <span class="meta-item">
                            <i data-lucide="calendar" size="16"></i>
                            {{ $news->created_at->format('M d, Y') }}
                        </span>
                            @if($news->updated_at && $news->updated_at->gt($news->created_at))
                                <span class="meta-item">
                                    <i data-lucide="file-edit" size="16"></i>
                                    Updated {{ $news->updated_at->diffForHumans() }}
                                </span>
                        @endif
                    </div>
                    <div class="news-actions">

                        @if($news->state === 'pending')
                            @can('approve', $news)
                                <div x-data="{ rejectOpen: false }">
                                    <form action="{{ route('queue.news.approve', $news) }}" method="POST" style="display:inline">
                                        @csrf @method('PATCH')
                                        <button type="submit" class="btn success" onclick="return confirm('Approve this news?')">
                                            <i data-lucide="check-circle" size="14"></i> Approve
                                        </button>
                                    </form>
                                    <button type="button" class="btn danger" @click="rejectOpen = true">
                                        <i data-lucide="x-circle" size="14"></i> Reject
                                    </button>

                                    <div class="modal-overlay" x-cloak x-show="rejectOpen" x-transition.opacity
                                         @click.self="rejectOpen = false" @keydown.escape.window="rejectOpen = false">
                                        <div class="modal-window" x-show="rejectOpen" x-transition>
                                            <div class="modal-header">
                                                <span class="modal-title">Reject news</span>
                                                <button type="button" class="modal-close" @click="rejectOpen = false">
                                                    <i data-lucide="x" size="20"></i>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <form action="{{ route('queue.news.reject', $news) }}" method="POST">
                                                    @csrf @method('PATCH')
                                                    <div class="form-group">
                                                        <x-form-field-title name="Rejection reason" required="true" />
                                                        <textarea class="form-input" name="reason" rows="4" required></textarea>
                                                    </div>
                                                    <div class="queue-mod-actions">
                                                        <button type="button" class="btn" @click="rejectOpen = false">Cancel</button>
                                                        <button type="submit" class="btn danger">
                                                            <i data-lucide="x-circle" size="14"></i> Confirm rejection
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endcan
                        @endif

                        @can('update', $news)
                            <a href="{{ route('news.edit', $news) }}" class="btn">
                                <i data-lucide="edit" size="14"></i> Edit
                            </a>
                        @endcan

                        @auth
                            <a href="{{ xfRoute("romhackplaza_news/{$news->id}/report") }}" class="btn">
                                <i data-lucide="flag" size="14"></i> Report
                            </a>
                        @endauth

                    </div>
                </div>
        </div>

        <div class="news-layout">
            <div class="news-main-content entry-content">
                @if( $news->description )
                    <div class="news-body-text">
                        {!! $news->description_html !!}
                    </div>
                @endif
                @if( $news->gallery->isNotEmpty() )
                    <div x-data="{ open: false, currentImage: ''}" x-cloak>
                        <x-entry-section-title label="Gallery" icon="images"/>
                        <div class="entry-gallery">
                            @foreach( $news->gallery as $galleryItem )
                                <div class="entry-gallery-item"
                                     @click="currentImage = '{{ Storage::url($galleryItem->image) }}'; open = true; "><img
                                        src="{{ Storage::url($galleryItem->image) }}"></div>
                            @endforeach
                        </div>
                        <div class="gallery-modal" x-show="open" x-transition.opacity.duration.300ms @click="open = false"
                             @keydown.escape.window="open = false">
                            <span class="gallery-modal-close" @click="open = false;"><i data-lucide="x"></i></span>
                            <div class="gallery-modal-content" @click.stop>
                                <img :src="currentImage">
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            @if( $news->entry()->exists() || $news->relevant_link || $news->youtube_link )
                <aside class="news-sidebar">

                    @if($news->entry()->exists())
                        <div class="sidebar-block">
                            <h3 class="sidebar-title">
                                <i data-lucide="content" size="18"></i>
                                Related entry
                            </h3>
                            <div class="related-card">
                                @if( $news->entry->main_image )
                                    <div class="related-card-cover">
                                        <img src="{{ Storage::url($news->entry->main_image) }}">
                                    </div>
                                @endif
                                <div class="related-card-info">
                                    <h4>{{ $news->entry->title }}</h4>
                                    <a href="{{ route('entries.show', ['section' => $news->entry->type, 'entry' => $news->entry ]) }}" class="btn-sidebar" class="btn-orange">
                                        Go to the entry
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if($news->relevant_link)
                        <div class="sidebar-block">
                            <h3 class="sidebar-title">
                                <i data-lucide="link" size="18"></i>
                                Relevant link
                            </h3>
                            <a href="{{ $news->relevant_link }}" target="_blank" rel="noopener">
                                {{ $news->relevant_link }}
                            </a>
                        </div>
                    @endif

                    @if( $news->youtube_link )
                        <div x-data="{open: false, src: ''}" x-cloak class="sidebar-block youtube-section">

                            <h3 class="sidebar-title">
                                <i data-lucide="play" size="18"></i>
                                Youtube video
                            </h3>

                            <div class="video-thumbnail-wrapper"
                                 @click="src = 'https://www.youtube.com/embed/{{ $news->getYoutubeVideoId() }}?autoplay=1'; open = true">
                                <img src="https://img.youtube.com/vi/{{ $news->getYoutubeVideoId() }}/maxresdefault.jpg">
                                <div class="play-trigger">
                                    <i data-lucide="play"></i>
                                </div>
                            </div>

                            <div class="gallery-modal" x-show="open" x-transition.opacity.duration.300ms
                                 @click="open = false; src = ''" @keydown.escape.window="open = false; src = ''">
                        <span class="gallery-modal-close" @click="open = false; src = '';"><i
                                data-lucide="x"></i></span>
                                <div class="gallery-modal-video" @click.stop>
                                    <iframe :src="src"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen></iframe>
                                </div>
                            </div>
                        </div>
                    @endif
                </aside>
            @endif
        </div>
    </article>
    @include('entries.comments')
@endsection