@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="{{ route('public.poet_details', $poet->id) }}" class="btn btn-outline-secondary rounded-pill">
            <i class="fas fa-arrow-right ms-1"></i> شاته
        </a>
    </div>

    {{-- Poet header card --}}
    <div class="century-card mb-4 p-4">
        <div class="d-flex flex-wrap align-items-center gap-4">
            @if($poet->image)
                <img src="{{ asset('storage/'.$poet->image) }}" alt="{{ $poet->name }}"
                     class="avatar" style="width: 100px; height: 100px; border-radius: 50% 50% 30% 30%; object-fit: cover;">
            @endif
            <div>
                <h2 class="fw-bold" style="color: var(--adabi-dark);">{{ $poet->name }}</h2>
                <p class="text-muted mb-0">
                    <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>
            </div>
        </div>
    </div>

    {{-- Filter section --}}
    <div class="search-elegant mb-4 p-4">
        <div class="row g-3">
            {{-- Search box --}}
            <div class="col-md-6">
                <div class="input-icon-group">
                    <i class="fas fa-search"></i>
                    <input type="text" id="poemSearch" class="form-control"
                           placeholder="د شعر په لټه کې یاست؟ دلته ولیکئ...">
                </div>
            </div>

            {{-- Alphabet filter --}}
            @if(isset($alphabits) && $alphabits->count())
            <div class="col-md-6">
                <div class="d-flex flex-wrap gap-2 justify-content-start">
                    <a href="#" class="chip active" data-letter="all">ټول</a>
                    @foreach ($alphabits as $row)
                        <a href="#" class="chip" data-letter="{{ $row->name }}">{{ $row->name }}</a>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>

    {{-- Poems list --}}
    <div class="row" id="poemList">
        @php $i = 1; @endphp
        @forelse ($poetries as $row)
            <div class="col-12 mb-3 poem-item-wrapper"
                 data-title="{{ $row->title }}"
                 data-category="{{ $row->category->title_ps ?? '' }}"
                 data-letter="{{ $row->title ? mb_substr($row->title, 0, 1) : '' }}">
                <div class="folk-item">
                    <a href="{{ route('public.poet_poetry_details_single', $row->id) }}" class="folk-link" style="flex-direction: column; align-items: start;">
                        <div class="d-flex w-100 align-items-center">
                            <span class="poem-number me-2" style="background: var(--adabi-gold); color: #fff; padding: 2px 12px; border-radius: 30px; font-size: 0.85rem;">#{{ $i }}</span>
                            <span class="fw-bold" style="font-size: 1.1rem;">{{ $row->title }}</span>
                            <i class="fas fa-arrow-left folk-arrow"></i>
                        </div>
                        <div class="d-flex w-100 align-items-center mt-1">
                            @if($row->category)
                                <span class="badge" style="background: var(--adabi-red); color: #fff; padding: 4px 12px; border-radius: 30px; font-size: 0.75rem;">
                                    {{ $row->category->title_ps }}
                                </span>
                            @endif
                        </div>
                    </a>
                </div>
            </div>
            @php $i++; @endphp
        @empty
            <div class="col-12">
                <div class="alert alert-info text-center">
                    <i class="fas fa-inbox fa-2x mb-2"></i>
                    <p>د دې شاعر لپاره کوم شعرونه نشته</p>
                </div>
            </div>
        @endforelse
    </div>

    {{-- No results dynamic message (will be shown by JS) --}}
    <div class="no-results-dynamic" style="display: none;"></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