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

@section('title', ($poet->name ?? 'شاعر') . ' | تفصیلات')

@section('page_title', $poet->name ?? 'شاعر')

@section('main_container')
<div class="container" dir="rtl">
    {{-- Back button --}}
    <div class="mb-3">
        <a href="{{ url()->previous() }}" class="btn btn-outline-secondary rounded-pill">
            <i class="fas fa-arrow-right ms-1"></i> شاته
        </a>
    </div>

    <div class="row g-4">
        {{-- Main column: Poet details + categories --}}
        <div class="col-lg-8">
            {{-- Poet profile card --}}
            <div class="century-card mb-4 p-4">
                <div class="row g-4 align-items-center">
                    <div class="col-md-4 text-center">
                        <img src="{{ asset('storage/' . ($poet->image ?? 'front-end/images/person.png')) }}"
                             alt="{{ $poet->name }}"
                             class="avatar" style="width: 180px; height: 180px; border-radius: 50% 50% 30% 30%; object-fit: cover;">
                    </div>
                    <div class="col-md-8">
                        <h2 class="fw-bold" style="color: var(--adabi-dark);">{{ $poet->name }}</h2>
                        <p class="text-muted mb-2">
                            <i class="fas fa-calendar-alt" style="color: var(--adabi-gold);"></i>
                            @if($poet->birth_year)
                                {{ $poet->birth_year }} @if($poet->death_year) – {{ $poet->death_year }} @endif
                            @elseif($poet->centry)
                                {{ $poet->centry->title_ps ?? '' }}
                            @endif
                        </p>
                        @if($poet->bio)
                            <p class="mt-3">{{ Str::limit($poet->bio, 150) }}</p>
                            <button type="button" class="btn btn-sm btn-gradient" style="width: auto;" data-bs-toggle="modal" data-bs-target="#bioModal">
                                <i class="fas fa-book-open me-1"></i> نور ولولئ
                            </button>

                            {{-- Bio Modal --}}
                            <div class="modal fade" id="bioModal" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">{{ $poet->name }} – سوانح</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>{{ $poet->bio }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Poetry categories (اصناف سخن) --}}
            <div class="section-header mt-3">
                <i class="fas fa-tags"></i>
                <h3>اصناف سخن</h3>
            </div>

            @if($categories->count() > 0)
                <div class="folk-grid mb-4">
                    @foreach($categories as $cat)
                        <div class="folk-item">
                            <a href="{{ route('public.poet_poetry_details', $cat->id . '-' . $poet->id) }}" class="folk-link">
                                <i class="fas fa-{{ $cat->icon ?? 'book-open' }} folk-icon"></i>
                                <span>{{ $cat->title_ps ?? $cat->title }}</span>
                                <i class="fas fa-arrow-left folk-arrow"></i>
                            </a>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-muted">د دې شاعر لپاره کوم صنف نشته.</p>
            @endif
        </div>

        {{-- Sidebar: other poets and centuries --}}
        <div class="col-lg-4">
            {{-- Other poets card --}}
            <div class="century-card mb-4">
                <div class="century-title" style="font-size: 1.3rem; padding: 10px 20px;">
                    <i class="fas fa-users me-2"></i> نور شاعران
                </div>
                <div class="p-3">
                    @forelse($poets as $other)
                        <a href="{{ route('public.poet_details', $other->id) }}" class="text-decoration-none">
                            <div class="d-flex align-items-center gap-3 mb-3 p-2 rounded-3" style="background: #f9f6f0; transition: 0.2s;" onmouseover="this.style.background='#f0e9dd'" onmouseout="this.style.background='#f9f6f0'">
                                <img src="{{ asset('storage/' . ($other->image ?? 'front-end/images/person.png')) }}"
                                     alt="{{ $other->name }}"
                                     style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--adabi-gold);">
                                <div>
                                    <h6 class="mb-0 fw-bold" style="color: var(--adabi-dark);">{{ $other->name }}</h6>
                                    <small class="text-muted">{{ $other->centry->title_ps ?? '' }}</small>
                                </div>
                            </div>
                        </a>
                    @empty
                        <p class="text-muted">بل شاعر نشته</p>
                    @endforelse
                </div>
            </div>

            {{-- Centuries chips --}}
            @if($centries->count() > 0)
                <div class="century-card">
                    <div class="century-title" style="font-size: 1.3rem; padding: 10px 20px;">
                        <i class="fas fa-clock me-2"></i> پېړۍ
                    </div>
                    <div class="p-3">
                        <div class="century-chips">
                            @foreach($centries as $cent)
                                <a href="{{ route('public.category_related_general', $cent->id) }}" class="chip">{{ $cent->number }}</a>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>

    {{-- Bottom Navigation --}}
    <nav class="bottom-nav">
        <a href="{{ url('/') }}" class="nav-item {{ request()->is('/') ? 'active' : '' }}">
            <i class="fas fa-home"></i> <span>کور</span>
        </a>
        <a href="{{ route('public.categories') }}" class="nav-item {{ request()->is('categories*') ? 'active' : '' }}">
            <i class="fas fa-list-ul"></i> <span>کټګورۍ</span>
        </a>
        <a href="{{ route('public.poetry_search') }}" class="nav-item {{ request()->is('poetry/search') ? 'active' : '' }}">
            <i class="fas fa-search"></i> <span>لټون</span>
        </a>
    </nav>
</div>
@endsection

