@php $settings = app(\App\Settings\SiteSettings::class); @endphp
<!-- Search Box -->
<div class="bg-white border border-gray-100 rounded-2xl shadow-md p-6 card-glow relative" x-data="{ 
    q: '', 
    results: [], 
    loading: false,
    async search() {
        if (this.q.length < 2) { this.results = []; return; }
        this.loading = true;
        const res = await fetch('{{ route('live-search') }}?q=' + encodeURIComponent(this.q));
        this.results = await res.json();
        this.loading = false;
    }
}" @click.away="results = []">
    <h3 class="text-gray-900 font-black text-base mb-5 border-r-4 border-primary pr-3 flex items-center gap-2">
        <i class="fa-solid fa-search text-primary"></i> ابحث عن الخبر
    </h3>
    <form action="{{ route('search') }}" method="GET" class="relative group">
        <input type="text" name="q" x-model="q" @input.debounce.300ms="search()" placeholder="كلمات البحث..." class="w-full bg-gray-50 border-2 border-gray-100 focus:border-primary/20 focus:bg-white rounded-2xl px-6 py-4 text-sm font-bold transition-all outline-none text-right" dir="rtl" autocomplete="off">
        <button class="absolute left-2 top-2 bg-primary text-white w-10 h-10 rounded-xl hover:bg-red-800 transition shadow-lg flex items-center justify-center">
            <i class="fa-solid fa-magnifying-glass text-sm"></i>
        </button>
    </form>

    <!-- Live Search Results -->
    <template x-if="results.length > 0">
        <div class="absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl shadow-2xl border border-gray-100 z-[100] max-h-[400px] overflow-y-auto p-2">
            <template x-for="item in results" :key="item.url">
                <a :href="item.url" class="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-xl transition-all group">
                    <img :src="item.image" class="w-12 h-12 rounded-lg object-cover flex-shrink-0 shadow-sm" x-show="item.image">
                    <div class="flex-1 min-w-0">
                        <h4 class="text-xs font-black text-gray-800 line-clamp-2 leading-snug group-hover:text-primary transition-colors" x-text="item.title"></h4>
                    </div>
                </a>
            </template>
        </div>
    </template>
    
    <div x-show="loading" class="absolute left-10 top-[75px] z-[101]">
        <i class="fa-solid fa-spinner fa-spin text-primary text-xs"></i>
    </div>
</div>

<!-- Sidebar Ad 1 -->
<div class="bg-gray-50 border border-dashed border-gray-200 rounded-2xl overflow-hidden min-h-[180px] flex items-center justify-center card-glow group">
    @if($settings->sidebar_ad_1_image)
        <a href="{{ $settings->sidebar_ad_1_link ?? '#' }}" target="_blank" class="w-full h-full">
            <img src="{{ Storage::url($settings->sidebar_ad_1_image) }}" class="w-full object-contain" alt="إعلان">
        </a>
    @else
        <div class="text-center p-6">
            <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm group-hover:scale-110 transition-transform">
                <i class="fa-regular fa-rectangle-ad text-2xl text-gray-300 group-hover:text-primary transition-colors"></i>
            </div>
            <p class="text-[9px] font-black text-gray-400 uppercase tracking-widest">مساحة إعلانية (300x250)</p>
        </div>
    @endif
</div>

<!-- Most Read -->
<div class="bg-white border border-gray-100 rounded-3xl shadow-sm overflow-hidden card-glow">
    <div class="bg-gradient-to-l from-primary/10 to-transparent px-6 py-5 border-b border-gray-100">
        <h3 class="text-gray-900 font-extrabold text-base flex items-center gap-2">
            <i class="fa-solid fa-fire text-primary animate-pulse"></i> الأكثر قراءة
        </h3>
    </div>
    <div class="p-3">
        @foreach($topPosts as $i => $tp)
        <a href="{{ route('post.show', $tp->slug) }}" class="flex gap-4 p-4 hover:bg-primary/5 rounded-2xl transition-all group border-b border-gray-50 last:border-0 text-right" dir="rtl">
            <div class="text-3xl font-black text-gray-100 group-hover:text-primary/10 transition-colors w-8 flex-shrink-0 pt-1 italic">{{ $i+1 }}</div>
            <div class="flex-1 min-w-0">
                <h4 class="text-sm font-black text-gray-700 line-clamp-2 group-hover:text-primary transition leading-snug">{{ $tp->title }}</h4>
                <div class="flex items-center gap-3 mt-3">
                   <span class="text-[10px] text-gray-400 font-bold bg-gray-50 px-2 py-1 rounded-md border border-gray-100"><i class="fa-solid fa-eye text-primary/70 ml-1.5"></i>{{ number_format($tp->views_count) }} مشاهدة</span>
                </div>
            </div>
        </a>
        @endforeach
    </div>
</div>

<!-- Social Connect -->
@if(count($settings->social_links) > 0)
<div class="bg-gray-900 rounded-3xl p-8 text-white shadow-2xl card-glow relative overflow-hidden text-right" dir="rtl">
    <div class="absolute -top-10 -left-10 w-32 h-32 bg-primary/30 rounded-full blur-3xl"></div>
    <h3 class="text-xl font-black mb-6 relative z-10">اشترك في منصاتنا</h3>
    <div class="grid grid-cols-4 gap-4 relative z-10">
        @foreach($settings->social_links as $link)
        <a href="{{ $link['url'] }}" target="_blank" class="w-full h-14 bg-white/10 hover:bg-primary rounded-2xl flex items-center justify-center transition-all group hover:-translate-y-1">
            @php
                $icon = 'fa-solid fa-link';
                if($link['platform'] == 'facebook') $icon = 'fa-brands fa-facebook-f';
                elseif($link['platform'] == 'twitter') $icon = 'fa-brands fa-twitter';
                elseif($link['platform'] == 'instagram') $icon = 'fa-brands fa-instagram';
                elseif($link['platform'] == 'youtube') $icon = 'fa-brands fa-youtube';
                elseif($link['platform'] == 'whatsapp') $icon = 'fa-brands fa-whatsapp';
                elseif($link['platform'] == 'telegram') $icon = 'fa-brands fa-telegram';
                elseif($link['platform'] == 'rss') $icon = 'fa-solid fa-rss';
            @endphp
            <i class="{{ $icon }} text-xl text-white"></i>
        </a>
        @endforeach
    </div>
</div>
@endif

<!-- Prayer Times Sidebar -->
<div class="bg-white border border-gray-100 rounded-3xl shadow-sm overflow-hidden card-glow text-right relative" dir="rtl" x-data="{ 
    timings: null,
    currentTime: '',
    currentDate: '',
    nextPrayerKey: '',
    async fetchPrayers() {
        const res = await fetch('https://api.aladhan.com/v1/timingsByCity?city=Cairo&country=Egypt&method=5');
        const data = await res.json();
        this.timings = data.data.timings;
        this.updateTime();
    },
    updateTime() {
        const now = new Date();
        this.currentTime = now.toLocaleTimeString('ar-EG', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
        this.currentDate = now.toLocaleDateString('ar-EG', { weekday: 'long', day: 'numeric', month: 'long' });
        
        if (this.timings) {
            const timeStr = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
            const prayerOrder = ['Fajr', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
            let found = false;
            for (let p of prayerOrder) {
                if (this.timings[p] > timeStr) {
                    this.nextPrayerKey = p;
                    found = true;
                    break;
                }
            }
            if (!found) this.nextPrayerKey = 'Fajr';
        }
    },
    format12(time) {
        if(!time) return '';
        let [h, m] = time.split(':');
        h = parseInt(h);
        let period = h >= 12 ? 'م' : 'ص';
        h = h % 12 || 12;
        return `${h}:${m} ${period}`;
    }
}" x-init="fetchPrayers(); setInterval(() => updateTime(), 1000)">
    <div class="bg-primary/5 px-6 py-5 border-b border-gray-100">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-gray-900 font-extrabold text-base flex items-center gap-2">
                <i class="fa-solid fa-mosque text-primary"></i> مواقيت الصلاة
            </h3>
            <span class="text-[10px] font-bold text-primary bg-white px-2 py-1 rounded-md shadow-sm">القاهرة</span>
        </div>
        <div class="flex items-center justify-between text-gray-500 font-bold text-[10px]">
           <span x-text="currentDate"></span>
           <span class="text-primary tabular-nums" x-text="currentTime"></span>
        </div>
    </div>
    <div class="p-4">
        <div class="grid grid-cols-1 gap-2">
            <template x-if="timings">
                <div class="space-y-2">
                    @foreach(['Fajr' => 'الفجر', 'Dhuhr' => 'الظهر', 'Asr' => 'العصر', 'Maghrib' => 'المغرب', 'Isha' => 'العشاء'] as $key => $label)
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-2xl border transition-all duration-300 group"
                         :class="nextPrayerKey === '{{ $key }}' ? 'border-primary bg-primary/5 shadow-sm border-r-4 border-r-primary' : 'border-gray-100 hover:bg-primary/5'">
                        <span class="text-xs font-black" :class="nextPrayerKey === '{{ $key }}' ? 'text-primary' : 'text-gray-600'" >{{ $label }}</span>
                        <span class="text-sm font-black" :class="nextPrayerKey === '{{ $key }}' ? 'text-primary font-black' : 'text-gray-400'" x-text="format12(timings.{{ $key }})"></span>
                    </div>
                    @endforeach
                </div>
            </template>
            <template x-if="!timings">
                <div class="p-8 text-center text-primary"><i class="fa-solid fa-spinner fa-spin"></i></div>
            </template>
        </div>
    </div>
</div>

<!-- Sidebar Ad 2 -->
<div class="bg-gray-50 border border-dashed border-gray-200 rounded-3xl overflow-hidden min-h-[180px] flex items-center justify-center card-glow group mt-6">
    @if($settings->sidebar_ad_2_image)
        <a href="{{ $settings->sidebar_ad_2_link ?? '#' }}" target="_blank" class="w-full h-full">
            <img src="{{ Storage::url($settings->sidebar_ad_2_image) }}" class="w-full object-contain" alt="إعلان">
        </a>
    @else
        <div class="text-center p-8 w-full">
            <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-sm group-hover:scale-110 transition-transform">
                <i class="fa-solid fa-rectangle-ad text-xl text-primary/30"></i>
            </div>
            <p class="text-[9px] font-black text-gray-400 uppercase tracking-[0.2em] mb-1">مساحة إعلانية</p>
            <p class="text-[10px] text-gray-300 font-bold">Google AdSense (300x250)</p>
        </div>
    @endif
</div>