@extends('channels.layouts.master')

@section('content')
<style>

    .widgets-container {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        padding: 60px 30px;
        position: relative;
        overflow: hidden;
    }

    .widgets-container::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 500px;
        height: 500px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
        animation: float 20s infinite ease-in-out;
    }

    .widgets-container::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: -10%;
        width: 400px;
        height: 400px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
        animation: float 25s infinite ease-in-out reverse;
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(20px);
        }
    }

    .widgets-wrapper {
        position: relative;
        z-index: 1;
        max-width: 1400px;
        margin: 0 auto;
    }

    .widgets-header {
        text-align: center;
        margin-bottom: 60px;
        animation: slideDown 0.8s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .widgets-header h1 {
        font-size: 48px;
        color: white;
        font-weight: 700;
        margin-bottom: 15px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        letter-spacing: -0.5px;
    }

    .widgets-header p {
        font-size: 18px;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 300;
    }

    .widgets-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 30px;
        animation: fadeIn 1s ease-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .widget-card {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }

    .widget-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
    }

    .widget-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    }

    .widget-content {
        padding: 30px;
    }

    .widget-title {
        font-size: 18px;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .widget-icon {
        font-size: 24px;
    }

    .widget-description {
        font-size: 13px;
        color: #718096;
        margin-bottom: 20px;
        line-height: 1.6;
    }

    .widget-body {
        color: #2d3748;
        font-size: 14px;
        line-height: 1.8;
    }

    .widget-footer {
        padding-top: 20px;
        border-top: 1px solid #e2e8f0;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .widget-badge {
        display: inline-block;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .empty-state {
        grid-column: 1 / -1;
        text-align: center;
        padding: 80px 40px;
        color: white;
    }

    .empty-state-icon {
        font-size: 80px;
        margin-bottom: 20px;
        opacity: 0.8;
    }

    .empty-state h2 {
        font-size: 32px;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .empty-state p {
        font-size: 16px;
        opacity: 0.9;
    }

    .widget-card.news-widget {
        background: linear-gradient(135deg, #fff 0%, #f7fafc 100%);
    }

    .widget-card.promo-widget {
        background: linear-gradient(135deg, #fff 0%, #fffbeb 100%);
    }

    .widget-card.category-widget {
        background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
    }

    .widget-card.featured-widget {
        background: linear-gradient(135deg, #fff 0%, #fdf2f8 100%);
    }

    .news-widget .widget-badge {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

    .promo-widget .widget-badge {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    .category-widget .widget-badge {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    .featured-widget .widget-badge {
        background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    }

    @media (max-width: 1200px) {
        .widgets-grid {
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
        }
    }

    @media (max-width: 768px) {
        .widgets-container {
            padding: 40px 15px;
        }

        .widgets-header h1 {
            font-size: 36px;
        }

        .widgets-header p {
            font-size: 16px;
        }

        .widgets-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .widget-content {
            padding: 20px;
        }

        .widget-title {
            font-size: 16px;
        }
    }

    @media (max-width: 480px) {
        .widgets-container {
            padding: 30px 10px;
        }

        .widgets-header h1 {
            font-size: 28px;
        }

        .widgets-header p {
            font-size: 14px;
        }

        .widget-content {
            padding: 15px;
        }
    }
</style>

<div class="widgets-container">
    <div class="widgets-wrapper">
        <!-- হেডার সেকশন -->
        <div class="widgets-header">
            <h1>✨ আমাদের বৈশিষ্ট্যসমূহ</h1>
            <p>আপনার অভিজ্ঞতা উন্নত করতে আমরা বিভিন্ন দুর্দান্ত বৈশিষ্ট্য নিয়ে এসেছি</p>
        </div>

        <!-- উইজেট গ্রিড -->
        <div class="widgets-grid">
            @forelse ($widgets as $widget)
                <div class="widget-card {{ strtolower($widget->type) }}-widget">
                    @php
                        $viewPath = 'channels.widgets.' . $widget->type;

                        $icons = [
                            'news' => '📰',
                            'promo' => '🎯',
                            'category' => '📂',
                            'featured' => '⭐',
                            'trending' => '🔥',
                            'latest' => '🆕',
                            'popular' => '❤️',
                            'recommended' => '💡'
                        ];

                        $icon = $icons[strtolower($widget->type)] ?? '📌';
                    @endphp

                    <div class="widget-content">
                        @if($widget->title)
                            <div class="widget-title">
                                <span class="widget-icon">{{ $icon }}</span>
                                {{ $widget->title }}
                            </div>
                        @endif

                        @if(isset($widget->description) && $widget->description)
                            <div class="widget-description">
                                {{ \Illuminate\Support\Str::limit($widget->description, 100) }}
                            </div>
                        @endif

                        <!-- উইজেট কন্টেন্ট -->
                        <div class="widget-body">
                            @if (View::exists($viewPath))
                                @include($viewPath)
                            @else
                                <p style="color: #a0aec0; font-style: italic;">
                                    ⚠️ উইজেট ভিউ পাওয়া যায়নি
                                </p>
                            @endif
                        </div>

                        <!-- ফুটার ব্যাজ -->
                        @if($widget->type)
                            <div class="widget-footer">
                                <span class="widget-badge">
                                    {{ strtoupper(str_replace('_', ' ', $widget->type)) }}
                                </span>
                                @if($widget->is_active)
                                    <span class="widget-badge" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
                                        ✓ সক্রিয়
                                    </span>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>

            @empty
                <!-- খালি স্টেট -->
                <div class="empty-state">
                    <div class="empty-state-icon">📭</div>
                    <h2>কোনো উইজেট পাওয়া যায়নি</h2>
                    <p>এখানে কোনো সামগ্রী নেই। পরে আবার চেষ্টা করুন।</p>
                </div>

            @endforelse
        </div>
    </div>
</div>

@endsection