@extends('layouts.app')

@section('title', $wirid->title . ' | Amalan')
{{-- ================= SEO & SOCIAL SHARE ================= --}}
@section('og_title', $wirid->title)

@section('og_description', 
    Str::limit(
        trim(strip_tags($wirid->content)), 
        150
    )
)

@section('og_image', 
    $wirid->thumbnail 
        ? asset('storage/'.$wirid->thumbnail) 
        : asset('images/awrad-icon.png')
)
@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 py-8 lg:py-12">
    {{-- Breadcrumb --}}
    <nav class="mb-6 sm:mb-8" aria-label="Breadcrumb">
        <ol class="flex items-center space-x-2 text-sm text-gray-500">
            <li>
                <a href="{{ route('wirid.index') }}" class="hover:text-emerald-600 transition-colors duration-200 inline-flex items-center">
                    <i class="fas fa-arrow-left mr-1 sm:mr-2 text-xs sm:text-sm"></i>
                    <span class="hidden sm:inline">Wirid & Doa</span>
                    <span class="sm:hidden">Kembali</span>
                </a>
            </li>
            <li class="flex items-center">
                <i class="fas fa-chevron-right mx-1 sm:mx-2 text-xs"></i>
            </li>
            <li class="text-emerald-600 font-medium truncate max-w-[150px] sm:max-w-none">
                {{ Str::limit($wirid->title, 40) }}
            </li>
        </ol>
    </nav>

    {{-- Main Card --}}
    <div class="bg-white rounded-xl sm:rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
        {{-- Header with badges --}}
        <div class="px-4 sm:px-6 lg:px-8 pt-6 sm:pt-8 pb-4 sm:pb-6 border-b border-gray-100">
            <div class="flex flex-wrap items-center gap-2 sm:gap-3 mb-3 sm:mb-4">
                @if($wirid->category)
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-100">
                        {{ $wirid->category->name }}
                    </span>
                @endif
                
                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium
                    {{ $wirid->type === 'doa' 
                        ? 'bg-blue-50 text-blue-700 border border-blue-100' 
                        : 'bg-amber-50 text-amber-700 border border-amber-100' }}">
                    <i class="{{ $wirid->type === 'doa' ? 'fas fa-hands-praying' : 'fas fa-dharmachakra' }} mr-1.5"></i>
                    {{ $wirid->type === 'doa' ? 'Doa' : 'Wirid' }}
                </span>
            </div>

            <h1 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 leading-tight">
                {{ $wirid->title }}
            </h1>
        </div>

        {{-- Content --}}
        <div class="p-4 sm:p-6 lg:p-8">
            {{-- Arabic Text Section --}}
            @if($wirid->arabic_text)
                <div class="mb-6 sm:mb-8 md:mb-10">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3 sm:mb-4">
                        <h3 class="text-base sm:text-lg font-semibold text-gray-700">
                            <i class="fas fa-language mr-2 text-emerald-600"></i>
                            Teks Arab
                        </h3>
                        <button onclick="copyToClipboard('{{ addslashes($wirid->arabic_text) }}')"
                                class="flex items-center justify-end sm:justify-start text-xs sm:text-sm text-gray-500 hover:text-emerald-600 transition-colors duration-200 w-fit ml-auto sm:ml-0"
                                title="Salin teks Arab">
                            <i class="far fa-copy mr-1.5"></i>
                            Salin Teks
                        </button>
                    </div>
                    <div class="bg-gray-50 rounded-xl p-4 sm:p-6 border border-gray-100">
                        <div class="text-lg sm:text-3xl md:text-4xl leading-relaxed text-right font-arabic text-gray-800 direction-rtl">
                            {{ $wirid->arabic_text }}
                        </div>
                    </div>
                </div>
            @endif

            {{-- Latin Text Section --}}
            @if($wirid->latin_text)
                <div class="mb-6 sm:mb-8 md:mb-10">
                    <h3 class="text-base sm:text-lg font-semibold text-gray-700 mb-3 sm:mb-4">
                        <i class="fas fa-font mr-2 text-amber-600"></i>
                        Teks Latin
                    </h3>
                    <div class="bg-amber-50 rounded-xl p-4 sm:p-6 border border-amber-100">
                        <div class="text-base sm:text-lg leading-relaxed text-gray-700 italic">
                            {{ $wirid->latin_text }}
                        </div>
                    </div>
                </div>
            @endif

            {{-- Translation Section --}}
            @if($wirid->translation)
                <div class="mb-6 sm:mb-8 md:mb-10">
                    <h3 class="text-base sm:text-lg font-semibold text-gray-700 mb-3 sm:mb-4">
                        <i class="fas fa-comment-dots mr-2 text-emerald-600"></i>
                        Terjemahan
                    </h3>
                    <div class="bg-emerald-50 rounded-xl p-4 sm:p-6 border border-emerald-100">
                        <div class="text-base sm:text-lg leading-relaxed text-gray-700">
                            {{ $wirid->translation }}
                        </div>
                    </div>
                </div>
            @endif

            {{-- Additional Notes Section (Optional) --}}
            @if($wirid->notes)
                <div class="mt-6 sm:mt-8 md:mt-10 pt-6 sm:pt-8 border-t border-gray-100">
                    <h3 class="text-base sm:text-lg font-semibold text-gray-700 mb-3 sm:mb-4">
                        <i class="fas fa-sticky-note mr-2 text-blue-600"></i>
                        Catatan
                    </h3>
                    <div class="prose prose-sm sm:prose-base prose-emerald max-w-none">
                        {!! $wirid->notes !!}
                    </div>
                </div>
            @endif

            {{-- Source/Reference Section (Optional) --}}
            @if($wirid->source)
                <div class="mt-6 sm:mt-8 pt-4 sm:pt-6 border-t border-gray-100">
                    <div class="text-xs sm:text-sm text-gray-500">
                        <strong class="font-medium"><i class="fas fa-book mr-1.5"></i> Referensi:</strong> {{ $wirid->source }}
                    </div>
                </div>
            @endif
        </div>

        {{-- Footer Actions --}}
        <div class="px-4 sm:px-6 lg:px-8 py-4 sm:py-6 bg-gray-50 border-t border-gray-100">
            <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="flex items-center text-xs sm:text-sm text-gray-500">
                    <i class="fas fa-clock mr-1.5 sm:mr-2"></i>
                    <span>Diperbarui: {{ $wirid->updated_at->translatedFormat('d M Y') }}</span>
                </div>
                
                <div class="flex flex-col xs:flex-row items-stretch xs:items-center gap-3 w-full xs:w-auto">
                    <a href="{{ route('wirid.index') }}" 
                       class="inline-flex items-center justify-center px-4 sm:px-5 py-2.5 bg-white border border-gray-300 
                              rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 
                              transition-colors duration-200 order-2 xs:order-1">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Kembali
                    </a>
                    
                    <button onclick="shareContent()"
                            class="inline-flex items-center justify-center px-4 sm:px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 
                                   text-white font-medium rounded-lg text-sm transition-colors duration-200 order-1 xs:order-2">
                        <i class="fas fa-share-alt mr-2"></i>
                        Bagikan
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Related Wirids --}}
    @if($relatedWirids->count() > 0)
        <div class="mt-10 sm:mt-12 md:mt-16">
            <h2 class="text-xl sm:text-2xl font-bold text-gray-900 mb-6 sm:mb-8">
                <i class="fas fa-bookmark mr-2 text-emerald-600"></i>
                Wirid & Doa Terkait
            </h2>
            <div class="grid gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach($relatedWirids as $related)
                    <a href="{{ route('wirid.show', $related->slug) }}"
                       class="group block bg-white p-4 sm:p-5 rounded-xl shadow-sm border border-gray-100 
                              hover:shadow-md hover:border-emerald-100 transition-all duration-300">
                        <div class="flex items-center gap-2 mb-2 sm:mb-3">
                            <span class="inline-flex items-center text-xs font-medium px-2.5 py-1 
                                         rounded-full {{ $related->type === 'doa' 
                                            ? 'bg-blue-50 text-blue-700' 
                                            : 'bg-amber-50 text-amber-700' }}">
                                <i class="{{ $related->type === 'doa' ? 'fas fa-hands-praying' : 'fas fa-dharmachakra' }} mr-1.5"></i>
                                {{ $related->type === 'doa' ? 'Doa' : 'Wirid' }}
                            </span>
                        </div>
                        <h3 class="font-semibold text-gray-900 group-hover:text-emerald-700 
                                   transition-colors duration-200 line-clamp-2 text-sm sm:text-base">
                            {{ $related->title }}
                        </h3>
                        @if($related->category)
                            <div class="mt-2 text-xs text-gray-500">
                                {{ $related->category->name }}
                            </div>
                        @endif
                    </a>
                @endforeach
            </div>
        </div>
    @endif
</div>

@push('scripts')
<script>
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(() => {
            showToast('Teks berhasil disalin!');
        }).catch(err => {
            console.error('Gagal menyalin: ', err);
        });
    }

    function shareContent() {
        if (navigator.share) {
            navigator.share({
                title: '{{ $wirid->title }}',
                text: '{{ Str::limit($wirid->latin_text ?? $wirid->translation, 100) }}',
                url: window.location.href
            }).then(() => {
                showToast('Berhasil dibagikan!');
            }).catch(err => {
                console.error('Gagal membagikan: ', err);
            });
        } else {
            copyToClipboard(window.location.href);
            showToast('Link berhasil disalin!');
        }
    }

    function showToast(message) {
        // Create toast element
        const toast = document.createElement('div');
        toast.className = 'fixed bottom-4 right-4 left-4 sm:left-auto bg-emerald-600 text-white px-4 py-3 rounded-lg shadow-lg transform translate-y-10 opacity-0 transition-all duration-300 z-50 text-sm sm:text-base text-center sm:text-left';
        toast.textContent = message;
        document.body.appendChild(toast);
        
        // Animate in
        setTimeout(() => {
            toast.classList.remove('translate-y-10', 'opacity-0');
            toast.classList.add('translate-y-0', 'opacity-100');
        }, 10);
        
        // Remove after 3 seconds
        setTimeout(() => {
            toast.classList.remove('translate-y-0', 'opacity-100');
            toast.classList.add('translate-y-10', 'opacity-0');
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 300);
        }, 3000);
    }
</script>

@push('styles')
<style>
    /* Responsive Arabic text sizes */
    @media (max-width: 640px) {
        .font-arabic {
            font-size: 1.5rem;
            line-height: 2;
        }
    }
    
    @media (min-width: 641px) and (max-width: 768px) {
        .font-arabic {
            font-size: 2rem;
            line-height: 2.1;
        }
    }
    
    /* Small breakpoint for very small screens */
    @media (max-width: 380px) {
        .font-arabic {
            font-size: 1.25rem;
            line-height: 1.8;
        }
    }
    
    /* Ensure RTL direction for Arabic text */
    [dir="rtl"], .direction-rtl {
        direction: rtl;
        text-align: right;
    }
    
    /* Improved spacing for mobile */
    @media (max-width: 640px) {
        .prose-sm p {
            margin-bottom: 0.75rem;
        }
        
        .prose-sm ul, .prose-sm ol {
            padding-left: 1.25rem;
            margin-bottom: 0.75rem;
        }
    }
</style>
@endpush

@endpush
@endsection