@extends('layouts.master')

@section('title', 'كلمات الأغاني الأكثر زيارة')
@section('description', 'قائمة بكلمات الأغاني الأكثر زيارة في الموقع')

@section('content')

<div class="container" style="padding: 0 15px;">
    <h2 style="text-align: center; color: #7777CC; margin-bottom: 20px; font-size: 1.6em;">كلمات الأغاني الأكثر زيارة</h2>

    @php
        $topSongs = $songs->take(60);
        $rank = 1;
    @endphp

    <div class="most-visited-grid" style="display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;">
        @foreach($topSongs as $song)
            <div class="most-visited-item" style="display: flex; justify-content: space-between; align-items: center; background: #e8e8f0; border: 1px solid #c8c8dd; padding: 8px 10px; border-radius: 4px; width: calc(50% - 6px); min-width: 150px; box-sizing: border-box; font-size: 0.9em;">
                <div style="display: flex; align-items: center; gap: 8px; overflow: hidden; flex: 1;">
                    <span style="color: #666; font-weight: bold; min-width: 30px;">{{ $rank++ }}.</span>
                    <a href="/lyrics/{{ $song->slug }}" style="color: #a80000; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                        {{ $song->title }}
                    </a>
                    <span style="color: #888; white-space: nowrap;">- {{ $song->artists->first()->name ?? 'فنان' }}</span>
                </div>
                <div style="display: flex; align-items: center; gap: 4px; color: #666; white-space: nowrap;">
                    <span>{{ number_format($song->views) }}</span>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle;">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                </div>
            </div>
        @endforeach
    </div>

    <div style="text-align: center; margin-top: 20px;">
        <a href="/" class="btn btn-primary">العودة للرئيسية</a>
    </div>
</div>

@endsection
