@extends('front-end.layouts.apps')

@section('title')
    {{ $poetry->title ?? 'شعر' }} | {{ $poetry->poet->name ?? 'شاعر' }}
@endsection

@section('page_title')
    {{ $poetry->category->title_ps ?? 'شعر' }}
@endsection

@section('main_container')
<div class="container" dir="rtl">
    <div class="row">
        <div class="col-lg-10 offset-lg-1">
            <div class="poetry-card">
                <!-- سرلیک -->
                <div class="poetry-header">
                    <h2>{{ $poetry->title }}</h2>
                    <div class="meta">
                        <span><i class="fas fa-user"></i> {{ $poetry->poet->name ?? 'نامعلوم' }}</span>
                        @if($poetry->category)
                            <span><i class="fas fa-tag"></i> {{ $poetry->category->title_ps }}</span>
                        @endif
                        @if($poetry->created_at)
                            <span><i class="fas fa-calendar"></i> {{ $poetry->created_at->format('Y-m-d') }}</span>
                        @endif
                    </div>
                </div>

                <!-- د شعر متن -->
                <div class="poetry-body" id="poetryText">
                    {!! $poetry->body !!}
                </div>

                <!-- کړنې -->
                <div class="action-buttons">
                    <div>
                        <a href="{{ url()->previous() }}" class="back-btn">
                            <i class="fas fa-arrow-right"></i> واپس
                        </a>
                    </div>

                    <div class="share-buttons">
                        <a class="share-btn facebook" target="_blank" id="share-fb">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a class="share-btn twitter" target="_blank" id="share-twitter">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a class="share-btn linkedin" target="_blank" id="share-linkedin">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a class="share-btn reddit" target="_blank" id="share-reddit">
                            <i class="fab fa-reddit-alien"></i>
                        </a>
                        <a class="share-btn whatsapp" target="_blank" id="share-whatsapp">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                        <a class="share-btn telegram" target="_blank" id="share-telegram">
                            <i class="fab fa-telegram-plane"></i>
                        </a>
                    </div>

                    <div>
                        <button class="copy-btn" id="copyTextBtn">
                            <i class="fas fa-copy"></i> کاپي کول
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Toast -->
<div class="toast-notification" id="toast">
    <i class="fas fa-check-circle" style="color: #4caf50;"></i>
    <span id="toastMessage">کاپي شو!</span>
</div>
@endsection