@extends('layouts.master')
@section('title', $song->title . ' - كلمات أغنية')

<?php $result = '' ; 
	foreach($song->artists->all() as $artist) {
		$result .= $artist->name." & " ;
	}
	$result = substr($result, 0,-2) ;
?>
@section('content')
<div>

	{{-- Breadcrumb --}}
	@php
		$firstArtist = $song->artists->first();
		$firstLetter = $firstArtist ? mb_substr($firstArtist->name, 0, 1) : '';
	@endphp
	<nav style="background: #7777CC; padding: 10px 20px; border-radius: 3px; margin-bottom: 15px;">
		<ol style="list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; direction: rtl; gap: 5px; align-items: center;">
			<li><a href="/" style="color: #fff; text-decoration: none; font-weight: 600;">الرئيسية</a></li>
			@if($firstArtist)
			<li style="color: #ddd;">&rsaquo;</li>
			<li><a href="{{ route('artists.letter', $firstLetter) }}" style="color: #fff; text-decoration: none;">{{ $firstLetter }}</a></li>
			<li style="color: #ddd;">&rsaquo;</li>
			<li><a href="/artist/{{ $firstArtist->slug }}" style="color: #fff; text-decoration: none;">{{ $firstArtist->name }}</a></li>
			@endif
			<li style="color: #ddd;">&rsaquo;</li>
			<li style="color: #eee;">{{ $song->title }}</li>
		</ol>
	</nav>

	{{-- Share + Print buttons --}}
	<div style="display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;">
		<a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}" target="_blank" rel="noopener" title="مشاركة على فيسبوك" style="display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #3b5998; color: #fff; text-decoration: none; border-radius: 3px; font-size: 1.1em;">
			<svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg>
		</a>
		<a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($song->title . ' - ' . $result) }}" target="_blank" rel="noopener" title="مشاركة على X" style="display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #000; color: #fff; text-decoration: none; border-radius: 3px; font-size: 1.1em;">
			<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
		</a>
		<a href="mailto:?subject={{ urlencode($song->title . ' - ' . $result) }}&body={{ urlencode('شاهد كلمات الأغنية: ' . request()->url()) }}" title="إرسال بالبريد" style="display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #7777CC; color: #fff; text-decoration: none; border-radius: 3px; font-size: 1.1em;">
			<svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6" fill="none" stroke="#fff" stroke-width="2"/></svg>
		</a>
		<a href="javascript:window.print()" title="طباعة" style="display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #666; color: #fff; text-decoration: none; border-radius: 3px; font-size: 1.1em; cursor: pointer;">
			<svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>
		</a>
	</div>

	{{-- Song title + artist --}}
	<div style="text-align: center; margin-bottom: 10px;">
		<h3 style="font-weight: 800; color: #333; margin-bottom: 3px;">{{ $song->title }}</h3>
		<p style="color: #888; font-style: italic; margin: 0;">{{ $result }}</p>
		<p style="margin: 12px 0 0 0; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;">
			<span style="background: #7777CC; color: #fff; padding: 5px 15px; border-radius: 4px; font-size: 1.15em; font-weight: 600;">({{ number_format($song->views) }}) مشاهدة</span>
		</p>
	</div>
	<hr style="border-color: #9999CC;">

	{{-- Ad: between song info and lyrics --}}
	@include('layouts.ads', ['placement' => 'lyrics_inline'])

	{{-- Lyrics (centered) --}}
	<div class="lyrics-text" style="text-align: center; line-height: 1.7; padding: 10px 0; font-size: 1.05em;">
		{!! nl2br(e(preg_replace('/\n{2,}/', "\n", $song->lyrics)), false) !!}
	</div>

	<hr style="border-color: #9999CC;">

	{{-- Actions --}}
	@if(($siteSettings['correction_enabled'] ?? '1') == '1')
	<div style="text-align: center; margin: 10px 0;">
		<a class="btn btn-primary" href="/songs/{{$song->slug}}/edit" role="button" style="padding: 8px 30px;">تصحيح الكلمات</a>
	</div>
	@endif

	@if (Auth::check())
		@if (Auth::user()->role == 'admin')
		<form class="delete" action="/admin/delete/{{$song->id}}?type=song" method="POST" style="text-align: center; margin-top: 5px;">
			{{ method_field('DELETE') }}
			@csrf
			<input type="submit" value="حذف" class="btn btn-danger" style="padding: 6px 25px;">
		</form>
		@endif
	@endif
</div>

@endsection
