@props([
    'sticky' => true,
])

<aside class="sidebar" id="sidebar" data-sticky="{{ $sticky ? 'true' : 'false' }}">
    {{-- Most Read Section --}}
    <div class="sidebar-section sidebar-most-read">
        <h3 class="sidebar-title">
            <span class="title-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </span>
            সর্বশেষ পঠিত
        </h3>
        
        <ol class="most-read-list">
            @forelse($mostReadPosts ?? [] as $index => $post)
            <li class="most-read-item">
                <a href="{{ route('single', $post->slug) }}" class="most-read-link">
                    <span class="most-read-number">{{ $index + 1 }}</span>
                    <div class="most-read-content">
                        <h4 class="most-read-title">{{ $post->title }}</h4>
                        <span class="most-read-meta">
                            @if($post->category)
                            <span class="most-read-category">{{ $post->category->name_bn }}</span>
                            @endif
                            <span class="most-read-views">{{ number_format($post->views_count) }} পঠিত</span>
                        </span>
                    </div>
                </a>
            </li>
            @empty
            <li class="most-read-empty">কোনো পোস্ট পাওয়া যায়নি</li>
            @endforelse
        </ol>
    </div>
    
    {{-- Advertisement Block --}}
    <div class="sidebar-section sidebar-ad">
        @component('components.ad', ['placement' => 'sidebar_top', 'class' => 'ad-300x250'])
        @endcomponent
    </div>
    
    {{-- Video Section --}}
    @if(isset($videoPosts) && $videoPosts->count() > 0)
    <div class="sidebar-section sidebar-video">
        <h3 class="sidebar-title">
            <span class="title-icon">
                <svg viewBox="0 0 24 24" fill="currentColor">
                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </svg>
            </span>
            ভিডিও
        </h3>
        
        <div class="video-list">
            @foreach($videoPosts->take(3) as $video)
            <article class="video-item">
                <a href="{{ route('single', $video->slug) }}" class="video-link">
                    <div class="video-thumbnail">
                        <img src="{{ $video->thumbnail_url }}" 
                             alt="{{ $video->title }}"
                             loading="lazy"
                             width="280"
                             height="157">
                        <span class="video-duration">{{ $video->video_duration ?? '0:00' }}</span>
                        <span class="video-play">
                            <svg viewBox="0 0 24 24" fill="currentColor">
                                <polygon points="5 3 19 12 5 21 5 3"></polygon>
                            </svg>
                        </span>
                    </div>
                    <h4 class="video-title">{{ $video->title }}</h4>
                </a>
            </article>
            @endforeach
        </div>
        
        <a href="{{ route('videos') }}" class="view-all-link">
            সব ভিডিও দেখুন
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="5" y1="12" x2="19" y2="12"></line>
                <polyline points="12 5 19 12 12 19"></polyline>
            </svg>
        </a>
    </div>
    @endif
    
    {{-- Live Update Card --}}
    <div class="sidebar-section sidebar-live">
        <h3 class="sidebar-title sidebar-title-live">
            <span class="live-indicator"></span>
            লাইভ আপডেট
        </h3>
        
        <div class="live-updates" id="live-updates">
            @forelse($liveUpdates ?? [] as $update)
            <div class="live-update-item">
                <span class="update-time">{{ $update['time'] }}</span>
                <p class="update-text">{{ $update['text'] }}</p>
            </div>
            @empty
            <div class="live-update-empty">কোনো আপডেট নেই</div>
            @endforelse
        </div>
        
        <button class="live-refresh" id="live-refresh">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="23 4 23 10 17 10"></polyline>
                <polyline points="1 20 1 14 7 14"></polyline>
                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
            </svg>
            রিফ্রেশ
        </button>
    </div>
    
    {{-- Newsletter Subscribe --}}
    <div class="sidebar-section sidebar-newsletter">
        <div class="newsletter-box">
            <h4 class="newsletter-title">নিউজলেটার</h4>
            <p class="newsletter-desc">প্রতিদিনের খবর পান আপনার ইমেইলে</p>
            <form action="{{ route('newsletter.subscribe') }}" method="POST" class="newsletter-form">
                @csrf
                <div class="newsletter-input-group">
                    <input type="email" 
                           name="email" 
                           class="newsletter-input" 
                           placeholder="আপনার ইমেইল" 
                           required>
                    <button type="submit" class="newsletter-submit">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="22" y1="2" x2="11" y2="13"></line>
                            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                        </svg>
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    {{-- Weather Widget --}}
    <div class="sidebar-section sidebar-weather">
        <h3 class="sidebar-title">
            <span class="title-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="5"></circle>
                    <line x1="12" y1="1" x2="12" y2="3"></line>
                    <line x1="12" y1="21" x2="12" y2="23"></line>
                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                    <line x1="1" y1="12" x2="3" y2="12"></line>
                    <line x1="21" y1="12" x2="23" y2="12"></line>
                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                </svg>
            </span>
            আবহাওয়া
        </h3>
        <div class="weather-widget">
            <div class="weather-main">
                <div class="weather-icon">
                    <i class="fas fa-cloud-sun fa-3x text-warning"></i>
                </div>
                <div class="weather-temp">
                    <span class="temp-value">32</span>
                    <span class="temp-unit">°C</span>
                </div>
            </div>
            <div class="weather-location">ঢাকা</div>
            <div class="weather-details">
                <span><i class="fas fa-tint"></i> 65%</span>
                <span><i class="fas fa-wind"></i> 12 km/h</span>
            </div>
        </div>
    </div>
    
    {{-- Horoscope Widget --}}
    <div class="sidebar-section sidebar-horoscope">
        <h3 class="sidebar-title">
            <span class="title-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="14.31" y1="8" x2="20.05" y2="17.94"></line>
                    <line x1="9.69" y1="8" x2="21.17" y2="8"></line>
                    <line x1="7.38" y1="12" x2="13.12" y2="2.06"></line>
                    <line x1="9.69" y1="16" x2="3.95" y2="6.06"></line>
                    <line x1="14.31" y1="16" x2="2.83" y2="16"></line>
                    <line x1="16.62" y1="12" x2="10.88" y2="21.94"></line>
                </svg>
            </span>
            রাশিফল
        </h3>
        <div class="horoscope-widget">
            <div class="horoscope-select">
                <select class="form-select form-select-sm" id="zodiacSelect">
                    <option value="">আপনার রাশি নির্বাচন করুন</option>
                    <option value="aries">মেষ (২১ মার্চ - ১৯ এপ্রিল)</option>
                    <option value="taurus">বৃষ (২০ এপ্রিল - ২০ মে)</option>
                    <option value="gemini">মিথুন (২১ মে - ২০ জুন)</option>
                    <option value="cancer">কর্কট (২১ জুন - ২২ জুলাই)</option>
                    <option value="leo">সিংহ (২৩ জুলাই - ২২ আগস্ট)</option>
                    <option value="virgo">কন্যা (২৩ আগস্ট - ২২ সেপ্টেম্বর)</option>
                    <option value="libra">তুলা (২৩ সেপ্টেম্বর - ২২ অক্টোবর)</option>
                    <option value="scorpio">বৃশ্চিক (২৩ অক্টোবর - ২১ নভেম্বর)</option>
                    <option value="sagittarius">ধনু (২২ নভেম্বর - ২১ ডিসেম্বর)</option>
                    <option value="capricorn">মকর (২২ ডিসেম্বর - ১৯ জানুয়ারি)</option>
                    <option value="aquarius">কুম্ভ (২০ জানুয়ারি - ১৮ ফেব্রুয়ারি)</option>
                    <option value="pisces">মীন (১৯ ফেব্রুয়ারি - ২০ মার্চ)</option>
                </select>
            </div>
            <div id="horoscopeResult" class="horoscope-result mt-2"></div>
        </div>
    </div>
    
    {{-- Bottom Advertisement --}}
    <div class="sidebar-section sidebar-ad-bottom">
        @component('components.ad', ['placement' => 'sidebar_bottom', 'class' => 'ad-300x600'])
        @endcomponent
    </div>
</aside>